Produktdokumentasjon. Madison Møbler Administrasjonsside og Nettbutikk

Transkript

1 Produktdokumentasjon Madison Møbler Administrasjonsside og Nettbutikk 1

2 1. Forord 1.1 Dokumentasjonen Dette er en teknisk dokumentasjon på produktet som er utviklet. Denne er tiltenkt personer med teknisk kompetanse innenfor webdesign, webutvikling og web programmering. Dokumentasjonen inneholder tekniske begrep som ikke nødvendigvis forklares betydningen av, da man antar at vedkommende som benytter denne dokumentasjonen innehar den nødvendige kompetansen. 1.2 Innholdet Bootstrap Produktet er utviklet med Bootstrap 3.0 som rammeverk. Dette rammeverket forklares ikke i denne dokumentasjonen. Til dette formål henvises det til Bootstrap egne nettsider (URL: hvor man kan finne all nødvendig dokumentasjon for bruk og utvikling med dette rammeverket Egenutviklet kode Denne dokumentasjonen tar for seg egenutviklet kode, hovedsakelig PHP/Javascript scripter og funksjoner, samt MySQL database oppsettet. Det forklares hvor de ulike scriptfilene ligger i mappestrukturen, samt innholdet av dem og hva de hovedsakelig utfører av funksjonalitet Oppdeling av dokumentet Denne dokumentasjonen tar først for seg Administrasjonssidene til Madison Møbler, og deretter nettbutikk delen av produktet. Til slutt forklares MySQL database oppsettet Responsiv webdesign Alle delene av systemet er designet og utviklet for å virke på alle mulige skjermstørrelser og enheter. Sidene skalerer seg automatisk, og de ulike elementene som utgjør nettsidene plasserer seg riktig i forhold til hverandre, alt etter størrelsen på visningsflaten de har tilgjengelig. For denne dokumentasjonen sin del beskrives systemet som om visningsflaten skulle være en standard 24 monitor med oppløsning på 1920x

3 Innholdsfortegnelse 1. FORORD DOKUMENTASJONEN INNHOLDET Bootstrap Egenutviklet kode Oppdeling av dokumentet Responsiv webdesign... 2 SAMSVAR MELLOM KRAVSPESIFIKASJON OG FERDIG PRODUKT SYSTEMKRAV... 4 PÅLITELIGHET... 4 SIKKERHET... 4 BRUKERVENNLIGHET... 4 DATASTRUKTURER... 5 HTML... 5 CSS... 5 PHP... 5 JAVASCRIPT... 5 MYSQL ADMINISTRASJONSSIDENE FASTE MENYELEMENTER Toppmeny / fast «bar» element - < fx_top_nav.php > Sidemeny element - < fx_side_nav.php > Bunn «bar» (footer) element - < fx_footer.php > Toppmeny / fast «bar» element - < fx_top_nav.php > STARTSIDEN STARTSIDEN NETTBUTIKKEN RUTINER Logge inn Registrere bruker

4 Samsvar mellom kravspesifikasjon og ferdig produkt. Kravspesifikasjonen beskrev de funksjonelle og ikke-funksjonelle kravene til systemet. Disse ble opprettet i starten av prosjektet i samsvar med oppdragsgiver. Kravene var de funksjoner han ønsket fra systemet og de funksjonene vi følte at ville være verdifulle for systemet og oppdragsgiver. De viktigste kravene ble prioritert slik at om tiden skulle bli knapp så var et velfungerende system oppe å gå. Videre så avtalte vi med oppdragsgiver om å levere eventuelle funksjoner i ferdig tilstand om det skulle være mangler. Dette ville ikke være de nødvendige kravene til systemet, men tilleggskravene som ikke måtte legges til. Systemkrav Pålitelighet Produktet er laget for å selge produkter, noe som betyr at det bør tåle noe trafikk. Databasene henter ut informasjon og lagrer informasjon da forskjellige funksjoner blir gjort. Dette vil si at det krever god koding og en effektiv databaseserver. Oppdragsgiver skal bruke one.com som webhotell og database. De tilbyr god støtte og lite til ingen nedetid på sine servere. Det var viktig da vi skulle finne webhotell. Databasene er av type MySQL kobler på og henter/gir informasjon med php. Dette samarbeidet er raskt nok til å håndtere denne nettsiden og etter det vi har estimert så vil de ikke ha nok trafikk til å skape problemer i denne tjenesten. Sikkerhet Systemet skal ha en sikkerhet rundt innlogging og håndtering av informasjon. Alle passord hashes selvfølgelig i databasen og innlogging er kryptert slik at det ikke skal være lett å bryte seg inn og få tak på informasjon. Betalingen skjer fra en ekstern leverandør (paypal), som har sine egne sikkerhetstiltak. Det skal ikke lagres noe sensitiv informasjon i våre databaser. Brukervennlighet Systemet skal fungere på en slik måte at det ikke skal trenge store opplæringsrutiner. For nye kunder av nettbutikken så bygger oppsettet på en struktur som man kjenner igjen fra andre nettbutikker. Språk og menyvalg har lett leselig og ingen svært avanserte kommentarer. Dette gjelder begge nettsidene. Administrasjonssystemet er bygget opp slik at en bruker uten store kunnskaper skal kunne gjøre mer avanserte handlinger. Det er da lagt mye vekt på at dette skal gjøres for han og at han bare kan plotte inn informasjon og lignende i tekstbokser og trykke på knapper. 4

5 Datastrukturer HTML Produktet er en nettside og dette vil si at all kode er nettbasert. Det bygger på et html rammeverk som gir struktur. All tekst som ikke skal hentes fra andre kilder skriver inn i html koden. CSS Dette gir design, størrelse og plassering til eksisterende HTML elementer. Det vil si at hvordan elementer ser ut, defineres i CSS. Om et tekstbok skal være grønn eller gul så defineres dette i CSS koden. Uten denne koden så hadde man ikke oppnådd den brukervennligheten vi var ute etter. PHP For at nettsidene skulle ha fungerende funksjon og kunne fylle de kravene vi satt så måtte det brukes et dynamisk kodespråk. Php står for all kommunikasjon mellom klient og server. Det vil si at om du skal utføre en handling som krever et dykk i databasene, så er det php koden som er grunnlaget for at dette er mulig. All denne koden ble laget av oss og var også det mest tidkrevende. Javascript Mange funksjoner gjøres på klientsiden. Det vil si at det ikke kreves noe kommunikasjon med server for at disse funksjonene skal fungere. Dette er da ikke funksjoner som krever kryptering eller sikkerhet, men funksjoner som endrer i design eller elementer som dukker opp da andre handlinger har blitt gjort. Dette brukte vi mye for å få en ryddig, fungerende og ikke minst stilig nettsiden. Mye av denne koden var ferdig generert i Bootstrap, men det måtte også skrives en del script for at vi skulle får det slik vi ville. MySQL MySQL ble brukt som administrasjonssystem for databasene. Det vil si at det var MySQL som var kommunikasjonsspråket til databasene. Alle spørringer som henter eller skriver informasjon til databasene var MySQL. Uten disse ville ikke nettsiden fungere slik vi ville og et CMS system ville vært. Dette fordi databasene tar informasjon administrator legger inn og henter opp og viser på nettsiden i samsvar med php. 3. Administrasjonssidene Administrasjonssiden er i utgangspunktet et CMS system som lar bruker legge ut informasjon om varer og kategorier slik at dette vises på nettbutikken, men det er også mulighet for å administrere ordre, brukere og produkter med informasjon. Dette gjør det mulig for bruker å ha full kontroll på hva som foregår og lett kunne gjøre endringer slik at ting er oppdatert. Lister med informasjon som i ordrer, brukere, produkter og kategorier er data hentet fra databasen og listet ut. Her kan bruker lett gå inn og endre informasjonen slik at dette lagres i databasene. Denne informasjonen hentes også fra nettbutikken som viser det og om en endring er gjort så oppdateres dette også på nettbutikken. 5

6 Administrasjonssystemer er der Madison Møbler administrerer/vedlikeholder nettbutikken, kategorier, produkter, ordrer og kunder. Hele systemet ligger plassert under < «hoved domenet»/admin/ > mappen. Hele systemet er beskyttet med innloggingsfunksjon som sørger for at ingen kan aksessere de ulike delene av systemet uten først å logge på med godkjent bruker. Dette gjøres ved å bruke PHP < require > funksjon mot et PHP script som kontrollerer/validerer brukeren ved hjelp av < SESSION > variabel på hver eneste nettside i systemet. Dette < SESSION > variabelen settes kun etter at bruker har gjennomført en vellykket innlogging fra /admin/login/login-admin.php. Kryptering av passord utføres ved hjelp av en-veis Blowfish kryptering, som regnes blant de sikreste for bruk på nettsteder per dags dato. 3.1 Faste menyelementer Alle sidene i systemet gjør bruk av PHP «include» for å vise de samme faste meny og navigasjons elementer på samtlige sider. Disse faste php filene befinner seg i egen mappe, låst med <.htaccess > fil for å hindre uvedkommende i å aksessere filstrukturen. På denne måten trenger man kun å oppdatere innholdet i filene, for eksempel sidemenyen, på et enkelt sted Toppmeny / fast «bar» element - < fx_top_nav.php > Plassering: /admin/cms/content/fixed-cnt/fx_top_nav.php Funksjon: Sørger for visning av logo plassert øverst venstre hjørne, samt element for Nye bestillinger og Brukermeny plassert øverst høyre hjørne. Denne topp «bar» er fast, slik at den hele tiden vises på skjermen. Den inneholder to SQL seksjoner som tar hånd om elementet for å vise «Nye bestillinger». Den ene lister kun antall nye bestillinger, mens den andre fyller ut listen som åpnes når man velger elementet. Brukermenyen viser også antall nye bestillinger, samt funksjon ved hjelp av Javascript Plugin for full skjerm visning. Følgende kode er kommentert ut, og kan lett kommenteres inn igjen for fremtidig utvikling: «Min profil», «Min kalender» og «Min innboks» elementer under Brukermenyen. Disse vil opprette navigeringsvalgene under denne menyen, men må så fylles ut med nødvendig funksjonalitet Sidemeny element - < fx_side_nav.php > Plassering: /admin/cms/content/fixed-cnt/fx_side_nav.php Funksjon: Sørger for visning av navigasjonsmenyen for hele systemet, og vil alltid være plassert lengst til venstre i skjermflaten. Filen inneholder en liten PHP kall på en variabel som viser antall «Nye 6

7 bestillinger». Det er også plassert en knapp som minimerer sidemenyen, slik at kun ikonene er synlige, og slik øker visningsflaten til hovedinnholdet. Følgende kode er kommentert ut, og kan lett kommenteres inn igjen for fremtidig utvikling: «Returer» og «Historikk» under «Ordrer». Funksjonsområdet er tiltenkt, men ikke utviklet da nødvendigheten for dette ikke var tilstede under utviklingen. «Rapporter», stor hovedelement som var tiltenkt, men ikke utviklet av samme grunn som allerede beskrevet Bunn «bar» (footer) element - < fx_footer.php > Plassering: /admin/cms/content/fixed-cnt/fx_footer.php Funksjon: Sørger for visning av standardisert copyright informasjon nederst venstre hjørne, samt knapp plassert nederst høyre hjørne for raskt å komme seg til toppen/starten av den siden man er på Toppmeny / fast «bar» element - < fx_top_nav.php > Plassering: /admin/cms/content/fixed-cnt/fx_top_nav.php Funksjon: Sørger for visning av logo plassert øverst venstre hjørne, samt element for Nye bestillinger og Brukermeny plassert øverst høyre hjørne. 3.2 Startsiden Dette er hovedsiden alle administratorer / brukere på systemet møtes ved innlogging. Den gir en rask oversikt over det kunden ønsker presentert først og ønsker snarveier til. Inneholder minimalt med tekst for å fremheve det som er viktig. 3.3 Startsiden Dette er hovedsiden alle administratorer / brukere på systemet møtes ved innlogging. Den gir en rask oversikt over det kunden ønsker presentert først og ønsker snarveier til. Inneholder minimalt med tekst for å fremheve det som er viktig. 7

8 4. Nettbutikken Nettbutikken har som formål og presentere varer for kunder, la kundene finne ut nok informasjon varene og til slutt eventuelt kjøpe disse. Dette gjøres ved å ha funksjonene til rette slik at dette kan bli gjort. Dette vil si at kunder kan lagre den informasjonen som trengs for at forhandler skal kunne levere denne varen og at kunden skal kunne betale for den. All informasjon som vises i nettbutikken er hentet fra databasene. Databasene er administrert fra administrasjonssystemet som nevnt i forrige punkt. Dette vil si at om en endring er gjort der så endres informasjon i databasen og nettbutikken oppdateres med den nye informasjonen. Dette kan være for eksempel beholdning, pris, varebeskrivelse, bilder og lignende. 4.1 Rutiner Det er ikke alt for mange funksjoner i nettbutikken, men det er noen Logge inn Denne rutinen vil si at en bruker skal logge seg inn på nettbutikken. Dette krever at bruker er registrert som er en egen rutine. 1. Innlogging skjer ved at bruker skriver inn sitt brukernavn og passord i innloggingsfeltet. 2. Php kode og MySQL sjekker om brukers informasjon stemmer overens med det som er lagret i databasen. 3. Om dette stemmer så blir en SESSION opprettet og bruker er logget inn. 4. Om informasjonen ikke stemmer så får bruker tilbakemelding om at informasjonen skrevet inn ikke stemmer. KILDEKODE? Registrere bruker Dette er en brukers mulighet til å registrere egen konto slik at han/hun kan benytte seg av funksjoner som for eksempel kjøp. 1. Bruker trykker på registrer bruker på innloggingssiden. 2. Et HTML form vises hvor bruker må fylle inn informasjon. Blant annet om han er bedriftskunde eller privatkunde. Dette er relevant fordi det er 2 forskjellige databaser data lagres i og et javascript kjøres slik at informasjonen krevd for privat er annerledes enn bedrift. 3. Da all nødvendig informasjon er satt inn så valideres først det som er skrevet inn for tegn som ikke passer eller om all informasjon er skrevet inn eller generelt er korrekt. 4. Om alt stemmer så skrives informasjonen til databasen ved at php henter informasjonen med POST_$variabel og at en MySQL spørring skriver denne informasjonen til databasen for privat- eller bedriftskunder. 8