Dynamisk hjemmeside: NeuTravel

Transkript

1 Dynamisk hjemmeside: NeuTravel Problemformulering I dette projekt ønsker vi at lave en uafhængig hjemmeside til brug af turister, som gerne vil læse neutral information (dvs. information der ikke er farvet i form af at hjemmesiden gerne vil sælge rejsen), samt andre brugeres anbefalinger og oplevelser angående det at rejse. Hjemmesiden vil hovedsagligt blive bygget op af brugerindtastet data, samt data indtastet fra en administrator. Hjemmesiden skal være visuel attraktiv og indeholde følgende funktioner: - Valuta omregner - Blogs - Rejsebeskrivelser - Hoteller - Søgefunktion til hoteller Tidligere har vi arbejdet med at oprette databaser, indsætte og udtrække fra en database og generel kodning af hjemmesider. Vi skal bruge den viden vi tidligere har erhvervet os og sætte det sammen så vi kan fremstille de valgte funktioner. Det kræver at vi tænker bredere end i forrige i projekter fordi dette skal sættes sammen til en større helhed, man kan sige vi skal være mere nyskabende i forhold til tidligere. Planlægning I dette projekt arbejder vi med forholdsvist nyt stof, som vi derfor ikke har den største erfaring med. Derfor er det svært at sætte deadline på hvornår det enkelte skal være færdigt. Derfor vil tidsplanen i dette projekt bliver lavet ud fra prioriteringer, med en fast afsat tid til arbejde hver uge. Hver uge skal hvert gruppemedlem arbejde mindst 2 timer udenfor skoletid med programmering af hjemmesiden, tiden er fastlagt ud fra projektets størrelse. Tiden er kun afsat til programmering - rapportskrivning kommer udover. Alt arbejde bliver lagt op i en dropbox mappe, så det er til rådighed for alle i gruppen. Prioriteret kodning 1. Lave dropdown menuer til hjemmesiden for et mere professionelt og simpelt look. 2. Lave en blog funktion, der tillader bruger at uploade en blog, og derefter gør det muligt for alle brugere at se bloggen, her skal både laves database samt php/html kode. 3. Lave en valuta omregner der kan omregne fra kroner til en udenlandsk valuta. Her skal både laves en database, samt php/html kode. 4. Lave søge funktion til hoteller, her skal både laves flere databaser, samt php/html kode. 5. Lave en rejsebeskrivelse funktion, fungere nogenlunde som blog funktion med enkelte ændringer. Her skal både laves database, samt php/html kode. 6. Udvide blog funktionen så den registrere tiden hvor bloggen er skrevet (optimering). 1

2 7. Gøre så der er mulighed for fremtidig implementering af flere sprog på hjemmesiden. Arbejdet vil forløbe således at prioritet 1 vil blive lavet før prioritet 2 osv. På denne måde sikrer vi os at de funktioner vi prioriterer højest er på plads først, samt at tidsplanen ikke bliver urealistisk. Rapporten vil blive skrevet når hjemmesiden har nok funktioner så det opfylder vores egne ønsker og mål. Analyse af problemstilling. Dette afsnit vil opbygget som en analyse af hvordan de listede krav i problemformuleringen kan opnås. Visuel attraktiv Om en hjemmeside er visuel attraktiv er ofte op til de enkelte personer der ser på den. Dog syntes vi at en side med rene linjer, skarpe kanter og et relativt enkelt design uden for mange links over det hele kunne være passende for hjemmesiden. Med disse sætninger i hovedet blev følgende skitser af hjemmeside designet lavet: Man kan sige at visionen var et hjemmesiden skulle være bygget op i "lag". Menuen skulle være en såkaldt "dropdown" menu, da dette ville spare plads på selve siden og derved holde den mere simpel i dens design, i forhold til hvis alle menu punkterne skulle være synlige hele tiden. Farvevalg er en vigtig ting, for at hjemmesiden skal virke tiltalende for folk. Vi besøgte de mest kendte rejsehjemmesider, hvor at Star Tours hjemmesiden med deres blå tema, var den som inspirerede os mest. Vi valgte derfor også at holde den i et blåt tema, på baggrund af at vi syntes det fungerede godt på Star Tours hjemmeside. 2

3 Valuta omregner Målet for valuta omregneren er at den skal kunne omregne danske kroner om til euro, engelske pund og amerikanske dollars. For at fremstille dette skal vores kendskab til database, php og generel html/css kodning benyttes. Der skal laves en html-form hvor antallet af danske kroner indskrives og der vælges hvilken valuta der skal omregnes til, til sidst skal der klikkes på "Udregn" knap. Når knappen trykkes skal de indtastede data behandles af php koden som trækker valutakursen for den valgte valuta ud af databasen og multiplicere med antallet af kroner - resultatet skal da vises for brugeren. Blogs og rejsebeskrivelser At udvikle en måde hvorpå brugeren kan skrive en rejsebeskrivelse eller en blog er meget ens. I begge tilfælde skal der lagres brugerindtastet data i databasen, som senere skal kunne ses for alle brugere. For at lave dette skal vores kendskab til database opbygning, php, html og css benyttes. Først skal en html-form laves hvori brugerens data kan indtastes, og når alt er indtastet skal det via en knap sendes til videre behandling af php koden. Først skal der i php koden undersøges for om brugeren har udfyldt alle felterne og derefter skal der undersøges for om det indeholder skadeligt indhold, i dette tilfælde bruges en selvskreven php function som undersøger for SQL injections. Endeligt skal de forskellige data indsættes i databasen, og derefter trækkes ud igen så alle får glæde af de skrevne blogs og rejsebeskrivelser. Hoteller og søgefunktion Vi tog en beslutning om at hotellerne kun skulle kunne tilgås via søgefunktionen. Søgefunktionen består af, at brugeren vælger et område, fx. Fyn, og så vil alle hoteller der er registreret i databasen blive vist nedenfor. For at udvikle søgefunktionen skal der ligesom i de foregående funktioner bruges viden om database, php, html og css. Selve søgefunktionen skal bestå af en html-form med en "Søg" knap. I htmlformen vælger brugeren et område og trykker på "Søg". Derefter vil php koden behandle inputtet og viderestille til den korrekte side på baggrund af databasen. 3

4 Database På vores hjemmeside gør vi brug af en MySQL database, i databasen er der flere entitets klasser. Flere af entiterne bliver kun brugt individuelt og vil derfor ikke indgå i et E/R Diagram. E/R diagram for entitets klasser med relationer: Derudover har vi entitet klassen Blog, og entitet klassen Rejsebeskrivelse. Normalformer Hotel ID_Hotel Navn link Dette er attributterne i entitets klassen Hotel, ID_Hotel er primærnøglen, og Navn og link er afhængig af denne. Den er på 3. normalform grundet at alle attributterne er afhængige af primærnøglen, og der er ingen indirekte afhængighed til en kandidat nøgle. Navn kan også opfattes som en kandidat til primærnøgle, men flere hoteller kan hedde det samme, og derved er den ikke brugbar. ligger i ID_Hotel område Dette er attributterne i relationen, det er en sammensæt primær nøgle. Den er i 3 normalform, grundet alle attributter er afhængige af primærnøglen (grundet det er de eneste 2 attributter), grundet der kun er 2 attributter og de er en sammensat primærnøgle kan der ikke være intern afhængighed af en kandidat nøgle. 4

5 Område område Valuta Land Dette er attributterne i entitets klassen område, område er primærnøglen. Den er på 3. normalform grundet at alle attributterne er afhængige af primærnøglen, og der er ingen indirekte afhængighed til en kandidat nøgle. Har valuta Denne relation er ikke nødvendig grundet at den indeholder samme attributter som entitetsklassen Kurs. Kurs Valuta Kurs Dette er attributterne i entitets klassen Kurs, Valuta er primærnøglen. Den er på 3. normalform grundet at Kurs er afhængig af primærnøglen, og grundet der kun er 2 attributter, hvor den ene er primær nøgle kan der ikke være intern afhængighed til en kandidat nøgle. Blog ID Titel Navn Indhold Dato Dette er attributterne i entitet klassen Blog, ID er primærnøglen. Den er på 3. normalform grundet at alle attributterne er afhængige af primærnøglen, og der er ingen indirekte afhængighed til en kandidat nøgle. Rejsebeskrivelse ID Titel Land Indhold Dato Dette er attributterne i entitets klassen Blog, ID er primærnøglen. Den er på 3. normalform grundet at alle attributterne er afhængige af primærnøglen, og der er ingen indirekte afhængighed til en kandidat nøgle. Valg af værktøj Til projektet har vi brugt følgende værktøjer. PSPad PSPad er et værktøj der er beregnet til at skrive flere forskellige sprog. PSPad farver forskellige syntaxer, for hurtigere overblik. PSPad tillade dog ikke at afprøve andet end hjemmesidens html samt css, det er ikke en lokal host og kan derfor ikke køre php kode. phpmyadmin phpmyadmin er en browser applikation der tillader ændring af MySQL databaser via en grafisk brugerflade. Den grafiske brugerflade, giver alle muligheder under oprettelse af en database, som ren SQL kode giver. PhpMyAdmin giver derudover mulighed for at konvertere SQL kode til PHP kode. GIMP GIMP er et gratis tegne program, lidt i stil med photoshop. I GIMP er de designmæssige elementer udarbejdet, samt det her heri hvor farvenuancerne hovedsagligt på hjemmesiden hovedsagligt er fundet. WinSCP (Windows Secure Copy) WinSCP er en gratis og open source SFTP og FTP klient til windows styresystemet. Det er brugt til at uploade filer til skolens server. 5

6 Produkt I dette afsnit vil vores produkt (hjemmesiden) blive beskrevet med kodeeksempler og forklarende tekst. En vigtig note er at hjemmesiden er optimeret til FireFox browseren, og ses ikke optimalt i Internet Explorer. Startside og menu Startsiden ses nedenfor, hvor musen er holdt over "Valuta" punktet i menuen, og undermenuen "Valuta Omregner" er vist. Hjemmesiden er bygget op som beskrevet i design afsnittet, dog er der tilføjet den funktion at der oppe i højre hjørne er en menu hvor det er tiltænkt at brugeren kunne vælge andre lande. Til høre ses koden for menuen. Der er brugt et javascript til at styre tiden menuen skal være synlig når musen ikke længere befinder sig ved menupunktet, scriptet gør dog også at brugeren bare kan klikke et sted på skærmen og så vil menuen lukke, lige meget om tiden (mclosetime) er gået. Derudover gør scriptet at menuer musen er kørt henover lukkes når en ny menu berøres af musen. Selve måden menuen opføre sig på og det generelle layout er lavet i css koden. 6

7 Fra menuen kan der navigeres rundt på hele siden. De tilgængelige funktioner fra menuen kan ses nedenfor. Hotel-søgemaskinen Når der i menuen vælges "Hotel-søgemaskine", får brugeren følgende indhold: Søgefunktionen er lavet via html-formen der ses til højre. Den består af en select-form, hvor brugeren vælger området der skal søges for. Når dette er valgt og knappen "Søg" trykkes bliver actionen "hotelsogemaskineresult.php" kørt. Actionen giver følgende output: Under "Søge resultater" er alle hoteller der er associeret med Fyn listet. Der er oprettet et hotel per 7

8 landeområde, hvilket i dette tilfælde for Fyn er "Fyns perle". Dog er koden udviklet således at den kan liste selv hvis der var 30 hoteller (Bare for at nævne et tal). Måden søge resultatet bliver fundet på er: Først oprettes der forbindelse til databasen, hvorefter det valgte område (fx Fyn) bliver defineret som en variabel. $submit er variablen for knappen, som nedenfor bruges til at verificere om den er trykket eller ej. Hvis ikke den er trykket bliver den oprindelige fil hotelsogemaskine.php inkluderet, mens hvis den er trykket bliver en række kode kørt. Først skrives "Søge resultater" en enkel gang, derefter udtrækkes ID'erne for hotellerne som befinder sig i det valgte område i databasen. En while løkke køres da et antal af gange (antal = antal af hotel ID'er), hvor ID'en defineres som en ny variabel $hid, der bruges til at finde det hotel der passer sammen med den pågældende ID. Endeligt defineres linket til hotellet til en variabel $lokation, hvorefter der udskrives navnet på hotellet og linket dertil. While løkken starter da forfra. I slutningen lukkes forbindelsen til databasen. Rejsebeskrivelser Når en bruger vil skrive en rejsebeskrivelse klikkes der på menuen "Rejsebeskrivelser" og derefter "Lav din egen rejsebeskrivelse", derefter kommer følgende op på skærmen: 8

9 I html-formen skal brugeren indtaste en titel, vælge et land og skrive selve indholdet, når dette er gjort trykkes der på "Post". Når "Post" er trykket bliver de indtastede værdier behandlet af "beskrivelsepost.php", som nævnes under actionen der skal udføres. PHP koden er følgende: Først oprettes der forbindelse til databasen, hvorefter "protect.php" bliver inkluderet. Protect.php (se kode til højre) er en selvskreven fil der undersøger om en variabel indeholder tegn der forbindes med en SQL injection, hvis den gør så behandles variablen så SQL injectionen ikke virker. Efter protect.php er inkluderet defineres variabler på baggrund af de indtastede data i html-formen, af de ikke indtastede data defineres yderligere to variabler ($date og $errorcount), hvor $date får den aktuelle dato, mens at errorcount sættes til 0 og bruges gennem koden til at se om der er fejl. Derefter undersøges der for om "Post" knappen er trykket, hvis den ikke er så inkluderes skrivbeskrivelse.php, hvilket er php filen hvor brugeren allerede befinder sig. Hvis den til gengæld bliver trykket bliver der kørt en fejlfinding nedover de indtaste data, hvor der undersøges for om alle felterne er udfyldt korrekt, hvis der er fejl stiger errorcount'en, som senere bliver undersøgt. Hvis errorcounten er noget andet end 0, så inkluderes en.php fil der siger at der er forkerte indtastninger, mens hvis errorcounten er lig med 0, så inkluderes en.php fil der fortæller at alt er indskrevet korrekt. Når alt er indskrevet korrekt bliver protect.php brugt på de indtastede data, samt nl2br (newline to break, dvs. hver gang brugeren har lavet en linjeskift, så bliver det oversat til <br />) bliver brugt på selve indholdet. 9

10 Derefter sættes det ind i databasen, så det hele kan ses under menuen "Alle rejsebeskrivelser". Hvis der skulle ske en fejl (fx at skolens servere er nede) og dataerne derfor ikke indsættes, så skrives en fejl besked der gør opmærksom på dette. I slutningen lukkes forbindelsen til databasen. Rejsebeskrivelserne kan ses ved at klikke på menuen "Rejsebeskrivelser" og vælge "Alle rejsebeskrivelser". Herunder kan alle rejsebeskrivelser ses. Måden hvorpå dette er lavet er gjort via hovedsagligt php (se kode til højre). Først oprettes der forbindelse til databasen, hvorefter alting fra rejsebeskrivelses databasen bliver valgt. Derefter bliver der udskrevet alle de skrevne rejsebeskrivelser. 10

11 Valuta omregner Valuta omregneren findes ved at klikke på menuen og vælge "Valuta", hvorefter man enten blot kan klikke på "Valuta" eller vælge undermenuen "Valuta Omregner". Når dette er gjort kommer følgende op på skærmen: Selve omregneren er lavet via en html-form (se kode til højre) med en action i form af php kode. Formen består af et input felt, select felt og en "Udregn" knap. Mængden af den valgte (selected) valuta indtastes og dens funktion er så, når der trykkes på "Udregn", at omregne det om til danske kroner. Dette bliver gjort via følgende php kode: Først oprettes der forbindelse til databasen, hvorefter den indtastede data bliver lavet om til variabler. Hvis "Udregn" knappen ikke er trykket på bliver filen valutacalc.php inkluderet, det er den fil hvor omregneren befinder sig. Hvis der til gengæld trykkes på knappen så vil kursen for den valgte valuta blive trukket ud af databasen og gemt som variablen $tal1. Mængden af den indtastede valuta ($num1) ganges da med kursen og resultatet vil give mængden af danske kroner, som udskrives til brugeren. Hvis kursen ikke findes i databasen, kommer der en fejl besked op. 11

12 Hvis man fx skriver 799 engelske pund (GBP) fås: Blogs Måden hvorpå bloggen er kodet er stort set identisk med måden rejsebeskrivelserne er kodet. For ikke at gentage hvad der allerede er skrevet, vil der i dette afsnit kun blive fokuseret på hvad der er nyt i blogdelen, i forhold til rejsebeskrivelserne. Den første iøjefaldende forskel er måden datoen for de to bliver gemt forskellige: En blog er noget, vi mener, skrives oftere og derfor mere ideelt at man kan se den nøjagtige tid, som den er skrevet på, mens at en rejsebeskrivelse ikke skrives så ofte og derfor er kun datoen og årstallet nødvendigt. Den næste forskel er at nogle af de skrevne blogs bliver sorteret efter bloggerens navn, dette er selvfølgelig mest optimalt såfremt man har et login system dog var det ikke prioriteringen i dette projekt. Måden sorteringen foregår er i mysql query'en, hvor "WHERE" bruges til at definere hvilke rækker der skal vælges. Hvis man tager udgangspunkt i TechTravel's blog, som ser sådan ud: Her er query'en Brugt til at finde netop de blogs, hvor bloggerens navn er "TechTravel". For de andre udvalgte blogs er navnet "Barney" og "The Cheap Shot" brugt i WHERE-delen. 12

13 Brugerafprøvning Uerfaren bruger -Grete Petersen Den uerfarne bruger, starter på vores startside, der forklare hvad formålet med hjemmesiden er. Derefter navigerer hun videre til hoteller. Brugen af dropdown menuer finder hun intet besvær med, og benytter sig af dem. Under hoteller navigere hun rundt mellem de forskellige hoteller og læser den korte beskrivelse der står. Derefter går hun videre til valutaomregneren, det tager længere tid for hende at bruge end hotel finderen, grundet at her skal brugeren give et input via keyboard. Hun finder dog ud af det uden indgriben, og det lykkedes for hende at omsætte forskellige beløb i Dkk til andre valutaer. Derefter navigere hun videre til blogs, her læser hun først de 3 anbefalede blogs som ligger i dropdown menuen. Derefter går hun ind på lav din egen blog. Beskrivelserne i de enkelte felter sørger for hun indtaster navn og titel korrekt, og derefter begynder hun at skrive en blog. Derefter navigere hun ind på alle blogs, og efter lidt tid finder hun bloggen hun lige har oprettet. Hun afprøver herefter den sidste funktion rejsebeskrivelser hvor hun ligesom med blogs læser rejsebeskrivelserne der allerede er skrevet først, for derefter at oprette sin egen. Her tager det brugeren lidt tid at finde ud af funktionen for drop down menuen, der siger hvilket land man ønsker at give en rejsebeskrivelse af, det lykkedes dog efter lidt tid. Erfaren bruger -Michael Hansen Den erfarne bruger starter på startsiden, og læser formålet med hjemmesiden. Derefter navigerer han til valutaomregneren. Han ser hurtigt input feltet og indtaster en værdi og får et output. Derefter navigerer han til blogs, han starter med at lave sin egen blog. Dette går hurtigt og smertefrit, og han navigerer derefter til alle blogs, hvor kan se hans skrevne blog er oprettet. Han navigerer derefter til hoteller, hvor han søger på forskellige hoteller, igen volder dette ingen problemer. Til sidst går han ind på rejsebeskrivelser, hvor han læser de eksisterende og opretter derefter hurtigt sin egen uden problemer. Analyse af bruger afprøvninger Begge brugere kunne uden vores indblanding bruge alle funktioner som vores hjemmeside tilbyder. Den uerfarne bruger var som man kunne forvente langsommere end den erfarne bruger, men fik stadig benyttet alle funktioner uden indblanding. Baseret på vores bruger analyse, vurdere vi at vores hjemmeside kan bruges af både uerfarne og erfarne brugere, uden at der kommer vejledende information om hvordan de forskellige funktioner benyttes. Brugerne i undersøgelsen ligger ikke op til at foretage ændringer, og finder det nuværende design samt funktionerne tilfredsstillende. Konklusion Vi fik fremstillet en hjemmeside til brug af turister der gerne vil læse neutral information om forskellige rejsemål. Brugerne har på hjemmesiden mulighed for at læse rejsebeskrivelser, blogs, omregne danske 13

14 kroner om til udenlandsk valuta og søge efter hoteller på baggrund af hvilke regioner af Danmark, Tyskland eller England de ønskede at søge i. De respektive funktioner blev udviklet i forhold til prioriteringsplanen (tidsplanen), hvilken virkede efter hensigten og med den afsatte tid nåede vi at færdiggøre hjemmesiden. Udviklingen heraf fungere godt, i det vi kunne følge med i hinandens progression i de områder vi hver især arbejde med. På denne måde sørgede vi for at design og funktioner passede sammen brugs- og stilmæssigt. Hjemmesiden blev brugertestet af to brugere - en erfaren og en uerfaren. Ingen af partnerne havde problemer der voldte dem brugsmæssige kvaler i forhold til brugen af hjemmesiden. På baggrund af ovenstående kan må vi kunne konkludere at projektet har været en succes, i det vi opfyldte prioriteringsplanen, fik fremstillet en brugervenlig og indholdsrig hjemmeside med et fornuftigt antal af funktioner og fik dokumenteret det hele. Hvis dette projekt skulle videreudvikles ville det være ideelt at lave et login system, så brugerne ikke kan udgive sig for at være hinanden under blog-delen af hjemmesiden. 14