Procesbeskrivelse - Webprogrammering Indholdsfortegnelse Forudsætninger... 1 Konceptet... 2 Hjemmesiden... 2 Server-side... 3 Filstrukturen... 3 Databasehåndtering og serverforbindelse... 4 Client-side... 4 Responsive webdesign... 4 Validering... 5 Situationsbestemt styling... 5 Forudsætninger Hjemmesiden udnytter følgende teknologier: - PHP - Javascript - jquery - Ajax - HTML - CSS PHP håndteres på serveren, og det er derfor ikke nødvendigt for brugeren at tage stilling til dette. Resten af sprogene bliver kørt i browseren, og det er derfor nødvendigt for brugeren bruge en browser, der understøtter sprogene. Alle browsersprogene understøttes i nyere webbrowsere. Ældre versioner af browsere understøtter formentlig ikke fx Ajax. Hjemmesiden er udviklet ved brug af Google Chrome og WampServer 2.4 og testet i Google Chrome version 39. Hjemmesiden er lagt ud på mattwebservice.dk, men det er desværre ikke muligt at bruge Internet Explorer, da der sker et eller andet, som gør at PHP-scripts til forbindelse med databasen, ikke fungerer korrekt. Det virker i Google Chrome. Side 1 af 5
Konceptet Hele idéen med hjemmesiden er, at brugere kan håndtere deres ønskesedler nemt og overskueligt og dele dem med andre. Et scenarie kan være, at en bruger har fødselsdag, og vil gerne dele sin ønskeseddel med familie og venner. Der oprettes en fødselsdagsønskeseddel der kunne hedder Fødselsdag 2015, hvor der kan tilføjes ønsker. Ønskesedlen deles med de familiemedlemmer og venner, der skal have den, og modtagerne kan derefter gå ind på ønskesedlen og afmærke det ønske, som vedkommende opfylder med en gave. De andre modtagere af ønskesedlen kan se, at der allerede er en anden, der giver denne gave og kan i stedet vælge noget andet. Der kunne fx logges ind med Facebook login for på forhånd at have en liste over familie og venner, og modtagerne har derfor også selv et login til at se ønskesedlen med det samme. En vision er at bruge noget lignende Open Product Data, der er en database over alle kommercialiserede produkter i verden. Databasen er stadig under udvikling, men der er gode udsigter, da det er et projekt, der er bakket op af store virksomheder og regeringer i Europa og resten af verden. Når der skal tilføjes et ønske til ønskesedlen skal det kunne vælges fra databasen over alle produkter i verden, og når en modtager kigger på ønskesedlen, vil det være muligt at se hvor produktet kan købes, hvad prisen er, om det er på lager hos udbyderen osv. Ønskeseddelapplikationen vil indsamle data om brugernes ønsker, og statistik kan sælges til virksomheder om deres produkter. Dette vil være det bærende element for virksomhederne og deres årsag til at skulle være med, og gøre noget ud af at have deres produkter opdaterede osv. Hjemmesiden På nuværende tidspunkt, ved udførelsen af dette dokument, er hjemmesiden ikke lavet som beskrevet ovenfor. Det var blot visionen. Det er en kompleks opgave, der kræver at virksomhederne også er med til udviklingen, så deres produkter vises korrekt og altid er opdaterede. Open Product Data er tænkt som det element, der kan bringe dette til applikationen, så ønskeseddelapplikationen kan udvikles uafhængigt at virksomhederne til en vis grad. Først og fremmeste har hjemmesiden en login funktion. Det er ikke muligt at lave nyere brugere eller redigere eksisterende brugere. Det kan kun logges ind. Der er lavet to brugernavne på forhånd, og der kan nemt laves flere, når der er direkte adgang til databasen. Det er meget muligt, at det til eksamen vil være muligt at oprette nye brugere. Brugernavn: Matthias Kodeord: Andersen Ovenstående kan bruges til at logge ind på hjemmesiden indtil eksamen. Når der er logget ind kan brugerens ønskesedler ses. Der vises en liste over brugerens ønskesedler, som er genereret i wishlists-list.php, der er en widget. Side 2 af 5
Der vælges en ønskeseddel og en liste af alle ønske i den pågældende ønskeseddel vises. Denne er genereret i products-list.php, der også er en widget. Alt efter hvilken type ønskeseddel der er valgt, bliver temaet lavet om, så det passer til ønskesedlen. Til højre vises ønskesedlen Christmas 2015, hvor baggrunden bliver lavet om. Det er muligt at redigere eller slette hvert ønske, eller tilføje et nyt ønske. Brugeren har mulighed for Create, Read, Update og Delete (CRUD), som er de fire typer rettigheder der er mulige. En modtager af ønskesedlen har naturligvis kun Read rettigheder, og brugere, som ikke er modtagere af ønskesedlen, har ingen af delene. Server-side Filstrukturen Filstrukturen på serveren er bygget op med visse regler for at gøre det mere overskueligt, og for at sikre at filer håndteres på en bestemt måde alt efter deres ansvar. Herunder nævnes filstrukturen fra roden, og der beskrives hvilket ansvar de har og hvordan de kan håndteres. Root Roden er det yderste af filstrukturen. Her ligger alle sider, som brugeren kan komme hen på. Disse filer trækker på alle andre filer for at blive opbygget, og indeholder kun i nogle tilfælde sin egen funktionalitet. Dette er gjort for at kunne trække på de ressourcer, der bliver opbygget på hjemmesiden, som widgets, PHP-scripts osv. /Include Include indeholder stumper af hjemmesiden, som dokumenterne i roden kan genbruge. Dette gælder bl.a. header, head og footer, som bruges af alle sider. Include-filerne har sin egen PHP og JavaScript, og kan også være defineret på baggrund af PHP-scripts ved siden af. Det vigtige ved disse filers indhold er, at den ikke kan stå alene. Den bliver nødt til at være inkluderet. Stier i disse filer er også skrevet på baggrund af, at de er i roden, da de skal inkluderes. /php I denne mappe gemmes alle de filer, der ikke har til formål at vise noget på skærmen, men udelukkende laver en handling, der forbinder til databasen, eller indeholder nogle oplysninger, som bruger ikke skal have adgang til. Brugerne har ikke i forvejen adgang til serveren og dens indhold, men specifikke rettigheder kan tildeles denne mappe for at opnå størst sikkerhed. Dette gælder fx når der er flere brugere, der får adgang til serveren. /php/widgets Her ligger dokumenter, der fungerer som sit eget element på hjemmesiden. Det er lidt misvisende, at denne ligger i php-mappen. Side 3 af 5
Widgets er stumper af html, PHP og JavaScript, der viser en selvstændig blok på hjemmesiden, som kunne være en liste over brugerens ønsker for en bestemt ønskeseddel, eller en liste over ønskesedler for en bruger. Dette kan til eksamen også være en liste over alle ønskesedler i databasen, så alle brugere kan se alle andre brugeres ønsker. Denne rettighed skal gælde indtil der kommer styring på, at kun bestemte brugere kan se bestemte ønskesedler fra andre brugere. /media Denne mappe indeholder billeder. Mappen er nødt til at ligge i roden, da stylesheets linker relativt til billederne. /stylesheet Denne mappe indeholder stylesheets. Der er kun ét stylesheet på den simple hjemmeside, der er lavet. /stylesheet/wishlist-themes Her ligger specifikke stylesheets, der knytter sig til temaer på ønskesedlerne. De ændrer ikke meget, men de gør, at der er forskel på hver eneste type af ønskeseddel. Der er tre typer ønskesedler: Fødselsdag, Jul og Bryllup. Baggrundsbilledet på content-vinduet bliver lavet om alt efter hvilken det er. Dette beskrives senere. Databasehåndtering og serverforbindelse Hver handling i databasen har sit eget php-script, de håndtere den forbindelse, der er til databasen og udfører den enkelte handling. Et PHP-script ved navn dbconfig.php indeholder oplysningerne til databasen. Nogle globale variable om brugernavn, password, databasenavn og host defineres i dette script på baggrund af om PHP-handlinger er usynlige for brugeren, da koden eksekveres af serveren. Dette sikrer, at der ikke er nogen brugere eller hackere, der har tilgang til sikkerhedsmæssige kritiske oplysninger. Derudover findes global.php, der indeholder nogle globale variable for alle sider. Alle sider kan inkludere dette script og gøre brug af de variable, der er defineret. På nuværende tidspunkt bliver scriptet kun brugt til at indeholde stien til ROOT, da den ikke er ens på mattwebservice.dk og på den lokale Wamp server. På den måde skal der ikke laves noget om, når filer uploades til mattwebservice.dk, da stierne bliver ændret ift. hvem hosten er. Client-side Responsive webdesign For at lave den bedst optimerede hjemmeside, der også er læsevenlig på mobiltelefoner og tablets, gøres den responsive. Dette betyder blot, at hjemmesiden passer til flere skærmstørrelser. Der er mange måder at opnå dette på. Min favorit er at bruge min-width og max-width i CSS til at styre hvad minimum og maksimum på bredden af forskellige elementer må være. Det vigtigste er, at width ikke defineres, da dette vil være en statisk værdi. Hvis minimum og maksimum defineres vil browseren håndtere hvordan hjemmesiden skal læses på baggrund af skærmstørrelsen. Der findes flere metoder til at styre hjemmesiden, når denne metode bruges. I CSS er det muligt at indsætte if-statements med skærmbredden som variabel. Dette er ikke en udvidet form for CSS, men er Side 4 af 5
standard, og det tolkes af alle nye browsere. Det bruges desværre ikke på denne hjemmeside, men det er en rigtig god metode, hvis fx, der ønskes forskellige logostørrelse o. lign., som man ikke ønsker, at browseren skal styre. Så kan der ved forskellige skærmbredde defineres en størrelse på logoet. Validering Validering af brugerinput sker ikke kun på klientsiden, men også på serversiden. Dette er vigtigt, da der ellers ville opstå alvorlige fejl under brugen af hjemmesiden. Validering i browseren vha. JavaScript eller jquery kan manipuleres af brugeren via browseren, og det er derfor nødvendigt at have validering begge steder. Brugernavn og password må kun være henholdsvis 20 og 30 karakterer lange ifl. databasen. Dog bliver dette aldrig kontrolleret, da det på nuværende tidspunkt ikke er muligt at oprette brugere. Til gengæld bliver der kontrolleret om tilføjede ønsker ikke indeholder flere end 40 karakterer. Situationsbestemt styling Når en ønskeseddel åbnes bliver baggrunden lavet om, så den matcher det tema, som ønskesedlen har. Hver ønskeseddel har i databasen en type, og på baggrund af denne bliver baggrundsbilledet lavet om. Der bliver tilføjet et nyt stylesheet til hjemmesiden, hvor baggrundsbilledet i content-vinduet defineres. Side 5 af 5