#topp {} #header {} #navigation {} #leftcolum {} #rightcolumn {} #footer {}

Transkript

1 CSS Definisjon CSS- Cascading Style Sheets er et språk som brukes til å definere utseende på filer skrevet i HTML eller XML. Prinsippet er at HTML- eller XML-dokumentet utelukkende skal beskrive struktur og semantikk, mens oppsett, farger og annen stilinformasjon skal beskrives ved hjelp av CSS. ( n.n.) Hvorfor CSS I kravspesifikasjonen ble gruppa enig om å ha en ekstern CSS fil for hele websiden. Gruppa opprettet en CSS fil med navn styels.css som skulle inneholde all kode for utsende og oppførsel på sida. CSS oppsett for ønsket layout fant vi på internett: For å kunne gi økt brukervennlighet var det helt avgjørende med oversiktlig layout. Bruksområde Under prototypedesign ble det besluttet å ha en meny på toppen som skulle åpne en undermeny på venstre side. I koden på CSS filen ligger menylinja på toppen i #navigation og menyene som vises på venstre side ligger i #leftcolumn. Oversikten over alle CSS linjene som kalles for selector og inneholder alle deklarasjonene som styrer layouten og oppførselen er lagt opp på følgende måte: #topp {} #header {} #navigation {} #leftcolum {} #rightcolumn {} #footer {}

2 Skisse av oppsettet CSS koden har mange flere selector enn det som er nevnt over. Hele koden består av 165 linjer som er vedlagt rapporten (vedlegg CSS). Hovedselector kan ha flere under selectorer som kun styrer oppførselen innenfor hovedselectorens område. Plasseringen av alle selectors fremgår av skisse under: #navigation {} #header {} #logo {} #hstyle{} #navigation {} #navigation li a {} #navigation a:hover {} #leftcolum {} #leftcolumn a {} #leftcolumn a:hover {} #rightcolumn {} #rightcolumn a {} #rightcolumn a:hover {} iframe#identity {} iframe#identity2 {} #cart {} #cart a {} #cart a:hover {} #kategori {} #kategori a {} #kategori a:hover {} #skjema {} #annonse {} #annonse img {} #annonse2 {} #annonse2 img {} #footer {}

3 Liste over alle selectors og hva deklarasjonene gjør. Selector #topp {} #header {} #logo {} #hstyle{} Hva deklarasjonene gjør Styrer plassering og størrelsen av frame Styrer plassering og størrelsen av frame Styrer plassering og størrelse av logo Styrer plassering og størrelse av overskrift Securitas IT-meny #navigation {} #navigation li a {} #navigation a:hover {} Styrer plassering og størrelse av frame Styrer li a href linkene Styrer oppførselen til a href #leftcolum {} #leftcolumn a {} #leftcolumn a:hover {} Styrer plassering og størrelsen av frame Styrer a href linkene Styrer oppførselen til a href #rightcolumn {} #rightcolumn a {} #rightcolumn a:hover {} Styrer plassering og størrelsen av frame Styrer a href linkene Styrer oppførselen til a href iframe#identity {} iframe#identity2 {} Styrer plassering og størrelsen av iframe for nyhetene Styrer plassering og størrelsen av iframe for nyhetene #cart {} #cart a {} #cart a:hover {} Styrer plassering, størrelsen og oppførsel av handlekurven Styrer a href linkene Styrer oppførselen til a href #kategori {} #kategori a {} #kategori a:hover {} Styrer plassering, størrelsen og oppførsel av kategoriknappene på webshop Styrer a href linkene Styrer oppførselen til a href

4 #skjema {} Styrer plassering og størrelsen av skjema som fylles ut etter bestilling #annonse {} #annonse img {} #annonse2 {} #annonse2 img {} Styrer plassering, størrelsen og oppførsel av annonsene Styrer plassering, størrelsen og oppførsel av bildene som har portrett format Styrer plassering, størrelsen og oppførsel av annonsene Styrer plassering, størrelsen og oppførsel av bildene som har landskap format #footer {} Styrer plassering og størrelsen av frame CSS Switch Siden skulle designes så universell utformet som mulig, og et av tiltakene gruppen skulle foreta var å opprette et eget CSS for bedre kontrast og forskjellige skriftstørrelser for svaksynte. CSS for bedre kontrast så ikke gruppa som nødvendig under utviklingsprosessen. Bilde av fargene på menyen Slik det fremgår av bildet over har menyknappene mørkegrå farge med hvit skrift som gir bra kontrast. Samme gjelder for område hvor informasjonen vises i sort skrifttype arial med hvit bakgrunn som gir veldig bra kontrast. CSS switch knapper for normal og større skrift ble tatt med. For å utvikle denne funksjonen ble det brukt et JavaScript. Mye av informasjonen ble hentet fra

5 alternate-css-styles.shtml og modifisert etter vårt behov og bruk. Funksjonen bytter mellom to CSS filer med forskjellige konfigurasjoner som heter styles.css og styles2.css. Bilde av koden for CSS filene Knappene for å benytte CSS switchen ble plassert på toppen på høyre side. Bilde av plasseringen på CSS switch knappene HTML Definisjon HyperText Markup Language (HTML, hypertekstmarkeringsspråk) er et markeringsspråk for formatering av nettsider med hypertekst og annen informasjon som kan vises i en nettleser. HTML benyttes til å strukturere informasjon angi noe tekst som overskrifter, avsnitt, lister og så videre og kan, i en viss grad, brukes til å beskrive utseende og semantikk i et dokument. HTMLs grammatiske struktur er HTML DTD som ble skapt ved å gjøre bruk av SGML syntaks, som er en internasjonal standard for tekstformatering (ISO 8879). (4/ n.n Wiki) Hvorfor HTML

6 Den eksisterende siden som gruppa fikk utlevert av oppdragsgiver var skrevet i html. Gruppa bestemte seg for å redigere og videreutvikle den eksisterende koden. Html koden fra oppdragsgiver sin startside som de har kalt for deafult.htm bestod av 875 linjer med kode og samtlige filer inneholdt like mye kode og mer. For å holde fokus på brukervennligheten og mulighetene for videreutvikling av produktet måtte hele koden skrives om igjen, og gruppa var helt enig om å starte med blanke ark. Bruksområde Hovedsida for webportalen som vi begynte på er kalt index.html. Koden måtte utformes på en måte som gjorde at den kunne bli brukt for resten av html-sidene, og koden fra index.html dannet grunnlaget for videreutvikling av resten av filene. Første utkastet av index.html bestod av 44 linjer med kode. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html xmlns=" <head> <title>securitas IT meny</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="header"> <img id="logo" alt="securitas logo" src="bilder/securitas-logo.png"/> <h1 id="hstyle">securitas IT- Meny</h1> </div> <div id="navigation"> <ul><li> <a href='index.php'>hjem</a> <a href='system.php'>system</a> <a href='utstyr.php'>it-utstyr</a> <a href='it%20securitas.php'>it Securitas</a> <a href='faq.php'>faq</a> </li></ul> </div> <div id="leftcolumn"></div> <div id="rightcolumn"> <br></br><br></br> <h1>velkommen til IT Helpdesk</h1> <h3>gjør deg godt kjent med innhold som ligger under IT Securitas meny<br></br> Alle supporthenvendelser skal ragistreres i Kvalitetssystemet som ligger i Securitas Hovedmeny. I kvalitet vil du kunne se status på alle dine saker som er registrert.<br> </br> For umiddelbar support ta kontakt med Securitas IT Helpdesk på telefon.<br/> Telefon: 8888 ( )<br></br></h3> </div> <div id="footer"> Gruppe 25</div> </body> </html>

7 Kopi av første utkastet fra index.html Mappestruktur En av hovedgrunnene til at gruppa var enig om og ikke å bruke den eksisterende mappestrukturen var måten den var organisert på. Den var meget utfordrende å sette seg inn i og finne igjen til filene som det var referert til i koden. Mapper, html-filer, dokumentfiler, bilder og mye annet lå spredt om hverandre i hovedmappen. Den eksisterende mappestrukturen er avbildet under.

8 Bilde av deres eksisterende mappestruktur Under oppbyggingen av den nye mappestrukturen ble det lagt vekt på organisering og logisk oppsett og navngivningen av mappene. Alle hovedmenyvalgene som ble plassert på toppen, under selctor #navigation, fikk samme navn som knappene og ble plassert i hovedmappen. Alle filene som det blir referert til i undermenyen, under selector #leftcolumn, ble plassert inn i nye mapper med samme navn på mappen som på filen. Med denne mappestrukturen var det utrolig enkelt å navigere seg fram til infoformasjon og filene en trengte under videreutvikling av sidene.

9 Bilde av ny mappestruktur. PHP Definisjon Navnet PHP er et rekursivt akronym og står for PHP: Hypertext Preprocessor. PHP er et dynamisk, tolket og løst typet programmeringsspråk hovedsakelig brukt for å utvikle dynamiske nettsider. PHPs syntaks ligner C og Perl. (ref. Hvorfor PHP I utgangspunktet var det egentlig ikke meningen å bruke PHP til utformingen av produktet. Med produktet menes det her de funksjonene som var nødvendige for å få til det som var satt ned i kravspesifikasjonen. Det skulle egentlig brukes aspx, fordi det var det som ble brukt på systemet til oppdragsgiver fra før. Beslutningen om å gå over til PHP ble tatt tidlig i utviklingsprosessen, før det var satt i gang koding av produktet. Den ble tatt fordi en av funksjonene som skulle implementeres var et bestillingssystem og det ble bestemt at det skulle brukes databaser i forbindelse med dette. PHP hadde bedre støtte for å jobbe opp mot databasesystemet enn aspx, og oppdragsgiver gikk dessuten også med på å prøve denne løsningen. Gruppa hadde også bedre kunnskap og mer erfaring innen PHP enn aspx, så det var lettere å komme i gang med og det krevde mindre forarbeid.

10 Bruksområder Selv om alle filene til hele produktet er døpt om til PHP filer fra html er det ikke alle filene som inneholder PHP kode eller script. De som gjør det er filene til de sidene som styrer funksjonene som er lagt til. Noen av filene inneholder lengre script med flere funksjonaliteter, mens andre bare har mindre kodesnutter for overføring av informasjon. Det finnes også filer helt uten PHP kode, men de har fortsatt PHP filendelse. Bestillingssystem Filene som inneholder de mest omfattende scriptene har med utstyrsdelen å gjøre. Her brukes PHP med SQL til å hente ut all informasjonen om produktene i de ulike kategoriene fra databasen og vise dem i en tabell. Samtidig er dette første ledd i bestillingssystemet der brukeren velger produkt og valgt produkt blir lagt i databasen.

11 Bilde av tabell for bærbar PC Variabler for de forskjellige parametrene blir satt. Funksjon for å koble til databasen med feilmelding hvis det misslykkes. Funksjon for å velge hvilken database det skal kobles til med feilmelding hvis det misslykkes. Koden for å koble til databasen Variabel med tilkobling til databasen settes. Det sjekkes om kobling misslykkes og hvis det er tilfelle gis det feilmelding. Variabel for hvilken kategori som skal vises settes. Det sjekkes om det blir lest fra databasen og hvis det misslykkes gis det feilmelding. Ellers kjøres resten av scriptet. Variabel for

12 antall rader som skal skrives ut settes. Link til handlekurven vises. Løkke for visning av alle varene i vareregisteret innenfor den gitte kategorien med all informasjon som skal være med. Kode for visning av en kategori Handlekurven, som er andre ledd i bestillingssystemet, henter de valgte produktene fra databasen og viser dem i en liste. Her er det også mulig å gjøre endringer før brukeren går videre for å registrere sin bestilling. Bilde av handlekurven

13 Det sjekkes at det er blitt trykket på kjøp knappen og hvis det er tilfellet kjøres resten av scriptet. En session startes for å unngå start av ny handleliste hver gang en vare blir valgt. Variabler for informasjonen som skal legges i databasen settes. Det blir koblet til databasen. Variabler for sqlspørringer og kjøring av disse settes, og dermed blir varene lagt inn. Kode for å legge til varer i handlekurven Overskrift for handlekurv vises. Variabler for sqlspørring og utføring av den settes. Variabel for antall rader i tabellen settes. Tabellen startes og overskriftene blir lagt inn. Løkke for visning av alle varer som er valgt i en tabell kjøres og tabellen avsluttes. Variabler for sqlspørring og utføring av den settes. Variabel for antall rader settes. Tabell for visning av totalpris og totalantall startes og en løkke fyller tabellen. Kode for visning av handlekurven

14 Det sjekkes om det er trykket på Fjern alle knappen. Hvis det er tilfellet nullstilles sessionvariablen som tar vare på den startede ordren og det opplyses om at handlekurven er tom. Det sjekkes om det er trykket på en av Fjern knappene som er bak hver av varene i tabellen. Hvis det er tilfellet settes det variabler for varenummer og ordrenummer for den aktuelle varen. Det kobles til databasen og variabel for sqlspørring og utføring av denne settes. Kode for endring av handlekurven

15 Neste ledd i bestillingssystemet er å oppgi en e-postadresse som blir sjekket med et regulært uttrykk for å kontrollere at det oppgis en e-postadresse som er fra Securitas domene. Det vil si at den må slutte med securitas.no. Deretter blir det sendt en generert engangskode til den oppgitte e- postadressen som må tastes inn for å komme seg videre. Dette er for å verifisere at brukeren er en av de ansatte i Securitas. Bilde av e-post siden Variabel fro e-postadressen som skal sjekkes settes. Det sjekkes om e-posten slutter med securitas.no. Hvis det er tilfellet vises siden, eller hvis det ikke er tilfellet får brukeren beskjed om at det er tastet feil med anvisninger om hva som er riktig og en link for å prøve igjen.

16 Kode for test av e-post Sessionvariabel med e-postadressen settes. Variabel med et tilfeldig tall settes og dette tallet gjøres om til en kode. Mail sendes til den oppgitte e-postadressen med den genererte koden. Kode for generering av engangskode og sending av e-post Engangskoden som ble sendt til den oppgitte e-postadressen tastes inn og sjekkes for verifisering.

17 Bilde av kodesiden Den inntastede koden sjekkes mot koden som ble sendt. Hvis den er den samme vises siden, eller hvis den ikke er den samme vises en feilmelding og en link tilbake for å taste inn ny e-postadresse. Kode for test av engangskoden Siste ledd i bestillingssystemet er å fylle ut et skjema med informasjon om fakturering, mottager, bruker og eventuelt tilleggsinformasjon. Deretter genereres en e-post som blir sendt til it-avdelinga og det sendes en bekreftelsese-post til brukeren.

18 Bilde av informasjonsskjema ved bestilling Funksjon for å sende e-post til it-avdeling med parametrene til, emne og melding. Kode for sending av e-post

19 Funksjon for å sende e-post til bruker med parametrene til, emne og melding. Kode for sending av e-post Helt til slutt skrives det ut en oversikt over all informasjon til skjermen. Bilde av siste oversiktsbilde

20 Administratorside Det er også laget en administratorside hvor det er mulig å legge til, endre og slette varer i databasen. Dette systemet starter med at brukeren må logge seg inn. Her brukes sessions for hele tiden å kontrollere at brukeren er logget inn og slik at det er umulig å få tilgang til noen av de øvrige sidene uten at man er logget inn. Bilde av logg inn side Session startes, noe som må være med når session brukes. Inntastet brukernavn og passord sjekkes, eller om man allerede er logget inn. Sessionvariablen settes og brukeren sendes til admin.php. Hvis det blir tastet feil brukernavn eller passord får man beskjed om det og en link tilbake til innloggingssiden dukker opp.

21 Koden for logg inn Session startes som vanlig. Det sjekkes om sessionvariablen er satt, og hvis den er det vises siden. Hvis ikke gis det beskjed om at brukeren ikke er innlogget og link tilbake til logg inn dukker opp. Koden for å teste om brukeren er logget inn Når man er logget inn kan brukeren velge hvilken databasetabell som skal vises; varer, ordre eller ordrelinjer. Under varer listes hele vareregisteret fra databasen varer, og brukeren har mulighet til å legge til varer, endre varer og slette varer. Under ordre listes alle ordrene som er lagt inn og under ordrelinjer listes alle ordrene som ikke er registrerte ordre enda. De sistnevnte har også mulighet til å endre og slette.

22 Bilde av administratorsiden Bilde av Varer tabellen Variabel for databasenavn, sqlspørring og antall rader settes. Overskrift vises på siden. Tabell startes og overskriftene fylles i første rad. Løkke startes for å gå gjennom hele databasen. Variabel med all

23 informasjon i databasen som array settes. Informasjonen i arrayen skrives i tabellen. Tabellen avsluttes. Koden for å vise alle varene i en tabell Brukeren fyller ut et skjema med all informasjon om den nye varen som skal legges til og det blir lagt i databasen. Feltet som heter Link er det som skal vises når brukeren klikker på linken Les mer under hver vare. Tabellen med alle de eksisterende varene vises ikke under denne operasjonen da den er overflødig på dette tidspunktet.

24 Bilde av legg til skjemaet Det sjekkes at brukeren har trykket på ok og hvis den er trykket på utføres scriptet. Variabler fylles med informasjon oppgitt i skjemaet for tillegging av varer og variabelen for sqlspørring settes. Variabel for utføring av sqlspørring settes. Det sjekkes at sqlspørringen har fungert. Har den ikke fungert blir det opplyst om det og varenummeret blir skrevet ut eller hvis den har fungert blir det opplyst om det. Koden for å legge til varer i databasen

25 Brukeren taster inn vareid på den varen som skal endres. Varelisten vises under denne operasjonen for at det skal være mulig å finne vareid på den aktuelle varen. Bilde av endre-funksjonen Et skjema dukker opp likt det som brukes når en vare skal legges til, men her er all den eksisterende informasjonen om den valgte varen allerede fylt ut. Brukeren kan dermed utføre endringer uten å måtte fylle ut all informasjon på nytt. Tabellen med alle de eksisterende varene vises ikke under denne operasjonen da den er overflødig på dette tidspunktet.

26 Bilde av endre-funksjonen Det sjekkes at brukeren har trykket på ok og hvis den er trykket på utføres scriptet. Variabler fylles med informasjon oppgitt i skjemaet for endring av varer og variabelen for sqlspørring settes. Variabel for utføring av sqlspørring settes. Det sjekkes at sqlspørringen har fungert. Har den ikke fungert blir det opplyst om det og varenummeret blir skrevet ut eller hvis den har fungert blir det opplyst om det. Koden for å endre varer i databasen

27 Brukeren taster inn Vareid på den varen som skal slettes og varen blir slettet fra databasen. Varelisten vises under denne operasjonen for at det skal være mulig å finne vareid på den aktuelle varen. Bilde av slett funksjonen Det sjekkes at brukeren har trykket på ok og hvis den er trykket på utføres scriptet. Variabel fylles med informasjon oppgitt i skjemaet for sletting av varer og variabel for sqlspørring settes. Variabel for utføring av sqlspørring settes. Det sjekkes at sqlspørringen har fungert. Har den ikke fungert blir det opplyst om det og varenummeret blir skrevet ut eller hvis den har fungert blir det opplyst om det. Koden for å slette varer i databasen

28 Den siste funksjonen er logg ut knappen, som nullstiller sessionvariablen og sender brukeren tilbake til den første siden index.php. Session startes. Må være med når session brukes. Nullstiller sessionvariablen og sender brukeren tilbake til index.php, som er logg inn siden. Koden for å logge ut

29