IT/Programmering eksamensprojekt 1
Indholdsfortegnelse Problem formulering... 3 Krav til hjemmesiden... 3 Hvorfor bruge nettet... 3 Målgruppe... 4 Test specifikationer... 5 Kodesprog... 5 HTML (Hypertext markup language)... 5 CSS... 6 PHP... 6 MySQL... 7 JavaScript... 7 Brugervenlighed og usability... 7 Usability fundet på vores hjemmeside... 9 Billeder/galleri... 10 Info... 11 Krav til hjemmesiden... 11 Hvordan fungere siden... 12 Hvad er der på Hjemmesiden... 12 Formålet med brugen af det forskellige sprog... 13 PHP... 13 MySQL... 18 Konklusion... 18 Litteraturliste... 19 2
Problem formulering Vi skal lave en hjemme side, som eksamens projekt, der skal indeholde en database, som oplyser antal varer, der er tilgængeligt. Der skal være et galleri som automatisk skal registrere de billeder der bliver uploadet til hjemmesiden. Dynamisk metode, hvor man kan lave opdateringer til hjemmesiden. En Admin side med et login, som kan administrere ordre og de ændringer man kan lave til siden. En forside med basisk information og en FAQ, frequently asked questions, samt en side sammen med måder at opdrætte planterne på. Vi vil lave hjemmesiden ved brug af: HTML, CSS, PHP, MySQL, og javascript Krav til hjemmesiden Under forløbet vil vi lave en hjemmeside som eksamens projekt. Hjemmesiden skal indeholde en database som oplyser hvor mange varer der er tilgængelige. Hjemmesiden skal også have et stort galleri hvor man kan se de forskellige blomster/orkidéer som bliver solgt. Galleriet skal også selv kunne registrere de billeder som bliver lagt op. For at gøre det lettere for Erling (ham vi laver hjemmesiden til) vil vi lave et admin panel med login, så han kan ændre ting på hjemmesiden uden at han skal sætte sig ind i de forskellige kodesprog. Siden skal også have en forside med basiske informationer så som hvad man kan lave på siden og hvem opdrætteren af blomsterne er. Siden skal også indeholde en form for guide på hvordan man holder sådan en plante i live og hvordan man kan komme i kontakt med sælgeren. Hvorfor bruge nettet For 10 år siden havde hjemmesiden nok ikke været så relevant, det var de færreste der brugte internettet og dem der gjorde brugte det slet ikke til at købe ind. Internettet har været under en massiv udvikling på det seneste, ting som facebook og andre medier er blevet meget indflydelsesrig på vores samfund. Men det er ikke kun de sociale medier der tager nytte af internettet. Sælgere kan nu drage sig nytte af reklamer på de sociale medier og på den måde sprede deres produkt sortiment til potentiele kunder. 3
Mange kigger først på nettet hvis de skal købe noget, det kunne f.eks være at man skal have nyt fjernsyn, i stedet for at tage ud i butikkerne tjekker man nu priserne på nettet før man tager ud og køber sit nye fjernsyn, hvis man overhovedet forlader sit hus. Man kan nemlig typisk finde det billigst på nettet. En anden fordel ved at bruge nettet i dette tilfælde er at vi lever i et lille land, et lille land hvor sub-kulturer som dyrkning af pleioner har meget få følgere, men ved at bruge nettet kan man finde frem til sådanne kulturer hvis man ved hvad man skal google kan man hurtigt komme frem til det man ønsker. Som jeg nævnte før er Danmark et lille land, og det at dyrke pleioner er ikke specielt populært, så ved at bruge nettet kan dem med samme hobby som Erling finde hans hjemmeside, selvom man skulle på på den anden ende af europa. Pleioner har nemlig den fordel at deres navn er på latin, blomsterne har derfor samme navn i alle lande som benytter sig af det arabiske alfabet Målgruppe Vores målgruppe kan være bred. Det er egentlig bare folk der samler på sjældne blomster kaldet orkidéer. Orkidéer er dyre, derfor bliver målgruppen gjort betydeligt mindre da f.eks unge og ned ikke har pengene til at købe og have orkidéer, vi tror nu heller ikke at mængden af unge der har interesse for blomster er særlig stor. På grund af dette kan vi sætte nogen rammer for hvordan hjemmesiden skal se ud. Ældre mennesker har det med at være indforståede med IT og hvordan det fungere, derfor er det ret så normalt at biblioteker og andre offentlige steder holder kurser så de ældre lærer at bruge computeren og at befærde sig på internetet. Det ville altså være smart at bruge begrebet KISS som står for Keep it simple, stupid som ligesom navnet hentyder, handler det om at holde designet af hjemmesiden simpel. Der er altså ikke brug for flotte animationer og knapper der flyver rundt, hjemmesiden skal altså kun indeholde de nødvendige ting for at få den til at fungere. 4
Test specifikationer For at teste om vores hjemmeside er en success vil vi konsultere med Erling om han er tilfreds med hvad han ser indtil videre. Da det er er Erling har givet os opgaven og har stillet kravene til hjemmesiden føler vi at han bør bedømme om den. Så kan vi bruge hans feedback til at forbedre og eventuelt ændre hjemmesiden efter hans ønske. Svaret på samtalen med Erling vil stå i konklusionen. Kodesprog For at lave en hjemmeside må man tage brug af forskellige kodesprog, hvilke man vil bruge er meget op til en selv, da mange kodesprog kan de samme. Derfor kan man ligge sig meget i hvor vidt kodesprogene man har valgt, samarbejder med hinanden. Nedenunder kan man læse lidt om hvornår vi har valgt at bruge hvilke kodesprog og hvorfor. Desuden kan man også læse lidt om de forskellige kodesprog og deres udvikling. HTML (Hypertext markup language) HTML er nok det mest almindelige kodesprog som man vil kunne stødde på, der finds nok ikke særligt mange hjemmesider som ikke har taget det I brug. HTML er et opmærkningssprog hvilket betyder at sproget kombinerer både tekst og ekstra information om teksten. Html er er det mest kendte opmærkningssprog og er også kendt som en af hjørnestenene i WWW (world wide web). HTML blev udviklet af Tim Berners-Lee da han skulle bruge et simpelt opmærkningssprog så man let kunne dele sin forskning på nettet, iøvrigt er HTML baseret på SGML(standard generalizied markup language) HTML 5 er det nyeste, men tidligere versioner er stadig i brug 5
CSS CSS står for cascading style sheets. CSS bliver oftest brugt til design af hjemmeside og dets opbygning. CSS er et style sheet language. CSS er nok det mest brugte style sheet language brugt den dag i dag. CSS blev udviklet i 1980erne i sammenhæng med HTML blev mere og mere populært, for at give webdesignere bedre værktøjer til at designe deres hjemmeside efter deres eget ønske CSS bliver tit brugt som en blanding sammen med HTML da den mængde af customisation man får er meget større, CSS giver også ens side en kortere loading tid da den består af mindre kode en f.eks HTML CSS er på version 4 den dag i dag PHP PHP er et acronym for hypertext preprocessor. Det er et objekt orienteret programmeringssprog og blev udviklet i 1995 af Rasmus Lerdorf. PHP er det mest udbredte objekt-orienteret sprog da det er det sprog med dynamiske webløsninger der har det største community. Fordelen ved det store community er at der er mange developers, derfor bliver en bug hurtigt fundet og fixet. PHP er også et af de sprog der er kompatible på flest browsere og styrestystemer, derfor er sproget yderst populært. Version 5.5 er det nyeste inde for php men 5.6 er godt på vej 6
MySQL MySQL (structured query language) er et flertrådet database sprog og det mest brugte i dag. Det meste af MySQL bliver eksekveret igennem PHP MySQL blev udgivet i 1995. Den nyeste version af MySQL er 5.7 JavaScript Javascript er et objektorienteret scriptsprog udgivet i 1995 og designet af Brendan Eich. Javascript blev originalt udviklet til en anden webbrowser kaldet netscape og var en stærk konkurrent til sproget C++. Desværre for Java døde netscape, men microsoft tog heldigvis javascript til sig Da javascript ligger på ens egen computer istedet for en server bliver koden executed relativt hurtigt, tilgengæld har javascript lidt problemer med deres sikkerhed. Javascripts nyeste version er 1.8.5 Brugervenlighed og usability Usability er en meget vigtig ting på ens hjemmeside, uden usability kan ens brugere/besøgere have svært ved at finde rundt på hjemmesiden og derved nedsætter det chancen for at de skulle vende tilbage, mængden af usability man bør tage i brug har meget at gøre med ens målgruppe, arbejde man f.eks med en hjemmeside med en målgruppe der hedder IT-hajer vil man godt kunne skære ned på ens usability da de godt vil kunne bruge hjemmesiden. Desværre er der bare et eller andet med ældre mennesker og deres nedsatte evne til at gætte sig frem når det gælder ny 7
teknologi, derfor bruger man usability til at guide uvidene brugere så de får en behagelig oplevelse. Der er en række forskellige begreber man kan tage i brug hvis man ønsker en brugervenlig hjemmeside, her er der f.eks KISS(keep it simple,stupid) som går ud på at hjemmesiden skal være simpel og kun lige gøre de ting som er meningen, ingen smarte animationer eller pop-ups. Man vil også kunne tage brug af gestaltlovene som spiller meget på den måde vi mennesker opfatter ting, det har til formål at give ens brugere et lettere overblik over hvad ens hjemmeside kan tilbyde. Man vil også med fordel kunne tage Jacob Nielsens 10 love om usability som lyder: Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Flexibility and efficiency of use 8
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. (taget fra http://www.nngroup.com/articles/ten-usability-heuristics/) Usability fundet på vores hjemmeside Ved at udvikle adminstrator panelet behøver hjemmesidens ejer ikke at sætte sig ind i kodesprogene for at opdatere hjemmesiden, tilgengæld har det så den ulempe at hvis noget skulle ske med hjemmesiden, som f.eks at den stoppede med at fungere, ville ejeren være tvunget til at kontakte nogen som har styr på det. 9
Ved at holde hjemmesiden simpel undgår vi forviring når man kommer ind på hjemmesiden, man vil hurtigt kunne komme til sagen og få gjort de ting som man skal, som f.eks at købe en orkidé. Ved at holde hjemmesiden simpel opstår det problem desværre at nogen kan finde hjemmesiden mindre troværdig da det ikke har et fancy design. For at gøre vores hjemmeside lettere med at gøre har vi været nød til at tage princippet usability i brug. Du kan nedenunder læse om det usability man kan finde på hjemmesiden. Billeder/galleri set ovenonver er et billede taget fra vores galleri. Hver blomst har sit eget billede, der er en tydelig indelling mellem billederne så man ikke blive forvirret og ikke tror at det hele er et billede. Ved at dobbelt klikke med mousepad eller ved at holde musetast 1 inde kan man zoome ind på det ønskede billede. På den måde opnår det ønskede billede dominans og fjerner fokus fra de andre billeder. 10
Vores menu bar er også blevet tydeligt markeret for at indele knapperne og for at indikere hvor stor knappen er som man kan trykke på. Info Hjemmesiden får sin egen hjælpe side hvor man kan få hjælp hvis man skulle bruge hjælp til at befærde sig på hjemmesiden. Man vil også kunne læse sig frem til hvad f.eks denne her tabel neden under går ud på. Skulle man altså have lyst til at købe nogen af blomsterne på hjemmesiden er der rigeligt med hjælp at finde. Krav til hjemmesiden Da vi har en kunde har vi fået nogen specifikke krav til hjemmesiden og hvad den skal kunne. - Den ska indeholde et fuldt funktionelt CMS (Content management system) - Den skal være bruger venlig - Den skal opfylde kundens krav - Erling skal selv kunne adminstrere tingene på hjemmesiden uden at skulle søge professionel hjælp. -Erling har givet os et par tegninger over krav til hjemmesiden( både punkt og design mæsigt) som kan ses her 11
Hvordan fungere siden Siden er bygget op med html, skarpt efterfulgt af PHP for at have et dynamisk system, som selv er i stand til at vise nye sider, navigere sider, indtaste ønskede køb, have et system der er dynamisk og tilpasser sig selv efter ændringer der bliver foretaget, er meget vigtigt, hvis han beslutter sig for at tilføje flere under sider, og Erling skal kunne ændre teksten i alle sammen, uden at kode det. Da siden er blevet bygget op med PHP, har vi lavet en funktion, der selv finder filerne til undersiderne, som der efterhånden bliver tilføjet. Hvad er der på Hjemmesiden Der er følgene funktioner for dem der er besøgene på siden: En butik Et dynamisk galleri En side der giver tips til hvordan man dyrker en Pleione En kontakt side, med oplysninger der viser Funktioner for Erling ved hjælp af Admin siden: Et sted at rediger de uploadede billeder. En funktion til at kunne lave flere undersider til kunderne. Redigerer teksten på undersiderne. Uploade billeder i flere kategorier, dvs. 2 upload funktioner for Botaniske arter og menneskeskabte hybrider. En måde at redigere hvad der er i butikken. Se bestillinger fra kunder. En funktion til at kunne slette sider som allerede eksistere Disse funktioner er vigtige, for at kunne lave en selvoprettende side som selv tilføjer en side editor mere, hvis der bliver oprettet flere sider. Det er vigtigt for Erling, da han ville være nød til at kontakte os, hver gang han ville ændre noget. 12
Formålet med brugen af det forskellige sprog PHP Vores PHP, bliver brugt til: et login, en funktion til at uploade billeder og et automastik galleri Formålet med at have et automatisk galleri er at når der bliver uploadet et billede, kommer det selv formateret ind i galleriet. Da galleriet bruger css til at opstille det på en række af 3 og poste billederne ned efter det, kan man kalde det et Content Management System, sammen med at vi indexere filer, som bliver oprettet af Erling, og derefter automatisk behandlet når bruger besøger siden. Dette er upload funktionen, som uploader til mappen upload. Da Erling ikke er i stand til selv at kode er det vigtigt at lave en Admin side, hvor alt kan administreres. 13
Da de uploadede billeder gerne skulle kunne blive administreret fra Admin siden, har vi lavet en under side til dette formål. Denne side poster billederne efterfulgt af et link til billedet og et link til at slette billedet. Hvis han kommer til at slette et billede ved en fejl, kan han uploade det igen og hvis han tager flere billeder med, og nogen af dem allerede eksistere, bliver de bare ignoreret. Så længe fil navnet er det samme som det der allerede ligger på serveren. 14
Hvor han er i stand til at oprette nye sider og redigere indholdet. Da Erling ikke kender noget til IT og programmering, skal denne Admin side være så brugervenlig som muligt og vi skal have en lille guide til hvordan han bruger den, så han ikke bliver overvældet at funktionerne, med forskellige formål, som at hvis han kommer til at lave en fejl skal der være en mulighed, for at han kan rette op på den uden at han skal kontake os. Så derfor er der en masse funktioner, der enten kan slette en side han opretter som er f.eks. er stavet forkert eller at han ikke synes at det var et passene navn han havde valgt til den side. I sideeditoren er der em slet funktionen og lige præcis her er det vigtigt, at bruger manualen fortæller ham at alt det han skal skrive på siden er skrevet i et <pre> tag, som er et tag der automatisk formatere teksten så den bliver stille op på siden som man skriver det inde i tagget. 15
Katalogget er vigtigt da, han skal sælge sit produkt det skal være nemt at sætte en pris på alt efter om der er behov for det eller ej. Det er nemt at tilføje og fjerne produkter ved hjælp af navn. F.eks. hvis der i denne tabel bliver indskrevet Test i feltet under navn har man en mulighed for at slette den. Denne funktion opretter en side med det indtastede navn, fil typen for den oprettede fil er PHP, da men nemmere kan indlæse alle filerne hvis det har samme format, skal man ikke lave undtagelser. 16
De overstående er koden for at inddrage en tabel fra vores MySQL database, som er en af de funktioner, som indeholder funktioner som går igen mange steder på hjemme siden. Funktionen mysqli_connect bliver brugt til at opretteforbindelse til selve databasen, som bliver efterfulgt af mysqli_connect_errno som tager fat i variablen $con, som bare er en variable der gør det nemmere at tilgå brugernavn og password til databasen, for at tjekke om informationer passer overegens med det påkrævede. Mysqli_quary henter tabellerne fra databasen og gør dem klar til et array, som bliver sendt videre via variablen $result, som bliver hentet af mysqli_fetch_array og bliver holdt i gang med en while funktion, som bliver ved med at hente informationerne fra databasen indtil at den løber tør for nye rows. 17
While funktionen er en vigtig del for at kunne lave en indexere af mapper, eller databaser, da det er en funktion for at holde arrayet i gang. Disse funktioner bruger vi ved alle tabeller der opretter forbindelse til databasen og henter data, og når vi indlæser filer. MySQL Da hjemmesiden skal sælge blomster skal der også være en tabel der viser hvor mange af de forskellige produkter der er. Dette er praktisk da det dynamisk kan ændres. Da hjemmesiden indebærer en shop, bruger vi også MySQL til at holde en database over oplysninger, for folk der vil købe blomster, for at give Erling et overblik over hvem der vil købe hans produkter. Konklusion Det har været et godt projekt med en fornuftig sværhedsgrad, vi har begge arbejdet hårdt for at komme så langt og er godt tilfredse med vores resultat. Vi har opfyldt de mål som vi satte os for og har snakket med Erling om hjemmesiden. Erling synes godt om hjemmesiden og vil gerne have et kursus på mandag om hvordan man bruger den. Vi fortryder dog lidt at vi ikke havde flere tests på hjemmesiden og at vi ikke havde tættere kontakt med Erling da det ikke ville være så godt hvis vi lavede noget han ikke syntes om. 18
Litteraturliste http://www.w3schools.com/ http://en.wikipedia.org/wiki/kiss_principle http://php.about.com/od/phpbasics/p/php_reasons.htm Erling Flyvholm http://php.net/ http://www.nielsgamborg.dk/?p=gestaltlovene http://en.wikipedia.org/wiki/usability http://www.usability.gov http://www.lynda.com/ 19