VOORWOORD De stage, de laatste repetitie vooraleer je er op uitgestuurd wordt in de bedrijfswereld. Het is mijn kans om mijn kennis van informatica toe te passen en te vergroten, maar ook een ervaring om met mensen in een team te werken. Als laatstejaarsstudent toegepaste informatica heb ik reeds praktische ervaring opgedaan in schoolprojecten, maar deze stage heeft me laten proeven van wat me te wachten staat in de toekomst. Dit eindwerk geeft een kijk op het werk dat ik gedurende de stage geleverd heb. Het is geschreven voor mensen met een basiskennis van informatica, maar vooral de personen die zich in webdevelopment specialiseren zullen zich in dit eindwerk interesseren. Mijn stageopdracht is ontstaan door een grote vraag naar een applicatie om wijn bij te houden. Het bijhouden van de informatie stond centraal, maar ook gebruiksvriendelijkheid en meer uitgebreide functies om informatie en accounts te beheren waren belangrijke factoren. Aan het begin van de stage was ik slecht vertrouwd met de PHP taal waarin de applicatie moest worden geschreven. Een eerste uitdaging die ik met veel steun en opzoekwerk heb kunnen klaren. Het resultaat van zowel de stage als dit eindwerk zijn te danken aan de steun en inzet van de zaakvoerders van Webdoos, Jorge Spiessens en Stijn Blomme en mijn stagebegeleider Kristien Roels.
SAMENVATTING In de volgende pagina’s zal u een uiteenzetting van mijn stageperiode bij Webdoos te lezen krijgen. Mijn opdracht bestond er in een gebruiksvriendelijk wijnapplicatie te maken online. Als eerste moest er een analyse worden gemaakt van het project. Zo werden de functionele en niet-functionele eisen genoteerd. Daarna werd er ook een SWOT analyse gemaakt en een eerste databankmodel dat tijdens het programmeren verder werd uitgebreid. Bij het ontwikkelen werd er gebruik gemaakt van PHP, JavaScript en een MySQL databank. Bovendien werd er ook veel gebruik gemaakt van AJAX om een dynamische webapplicatie te krijgen. In de handleiding lees je dat de applicatie de mogelijkheid biedt om wijnen te digitaliseren. Een uitgebreide wijnfiche laat de gebruiker alle kenmerken van de wijn bijhouden. Na een degustatie kan de gebruiker zijn bevindingen in een degustatiefiche noteren. Geavanceerde zoek- en sorteerfuncties maken het eenvoudig alles opnieuw te raadplegen. Om gebruikers te beheren is het mogelijk voor een administrator om in het programma in te loggen. Deze gebruiker heeft meer rechten en kan elke gebruiker bezichtigen en aanpassen. Als laatste reflecteer ik op mijn werk bij Webdoos. De goede en de minder goede puntjes van het programma en wat ik voortaan anders zou doen.
ABSTRACT In the next pages you will find an exposition of my internship at Webdoos. My assignment was to develop a user-friendly online application that appeals to all wine connoisseurs. First of all I had to analyze the project. I collected the functional and non-functional demands. Next I made a SWOT analyze and a first databank model that was further expanded during the process of the program. During the development I used PHP, JavaScript and a MySQL Database. I also used AJAX to create a dynamic web application. In the manual you can read that the application has the ability to digitalize your wines. A comprehensive wine fiche gives you the possibility to keep a record off all aspects of your wine. After a degustation you can add a new fiche with all your findings. All the information you entered can be looked up. An advanced search function gives the user easy access to the information he/she wants. There is also an administrator side to the program. This administrator can login and manage all the users. Eventually I was able to finish a more advanced product than I originally anticipated. My time on the work floor at Webdoos turned out to be a very enjoyable and educational experience.
KEYWORDS PHP – wijnkelder – wijn – AJAX – JavaScript – MySQLi – HTAccess – Prototype – Webdoos
2
INHOUDSOPGAVE Voorwoord .............................................................................................................................................................. 1 Samenvatting .......................................................................................................................................................... 2 Abstract ................................................................................................................................................................... 2 Keywords ................................................................................................................................................................. 2 1.
Webdoos ......................................................................................................................................................... 5
2.
Stage opdracht ................................................................................................................................................ 5 2.1 Huidige situatie ............................................................................................................................................. 5 2.2 Verwachte resultaat ...................................................................................................................................... 5
3.
Analyse ............................................................................................................................................................ 7 3.1 Functionele eisen .......................................................................................................................................... 7 3.2 Niet-functionele eisen ................................................................................................................................... 7 3.3 SWOT Analyse ............................................................................................................................................... 7 3.3.1 Strengths ................................................................................................................................................ 7 3.3.2 Weaknesses ............................................................................................................................................ 7 3.3.3 Oppertunities ......................................................................................................................................... 7 3.3.4 Threats ................................................................................................................................................... 8
4.
Ontwerp .......................................................................................................................................................... 9 4.1 Databankmodel ............................................................................................................................................. 9 4.2 Datadictionary ............................................................................................................................................. 10
5.
Programmatie ............................................................................................................................................... 21 5.1 Gebruikte software ..................................................................................................................................... 21 5.1.1 Dreamweaver ....................................................................................................................................... 21 5.1.2 PHPMyAdmin ....................................................................................................................................... 23 5.2 Gebruikte technologiën............................................................................................................................... 24 5.2.1 Structuur en Object georiënteerd ........................................................................................................ 24 5.2.2 MySQLi ................................................................................................................................................. 24 5.2.3 AJAX ...................................................................................................................................................... 27
3
5.2.4 HTAccess .............................................................................................................................................. 34 5.2.5 Beveiliging ............................................................................................................................................ 35 5.2.6 Foutcontrole ......................................................................................................................................... 36 6.
Handleiding ................................................................................................................................................... 38 6.1 De gebruiker ................................................................................................................................................ 38 6.1.1 Inloggen, Registreren & Password Recovery ....................................................................................... 38 6.1.2 Het hoofdmenu .................................................................................................................................... 39 6.1.3 Profiel wijzigen ..................................................................................................................................... 39 6.1.4 Uitloggen .............................................................................................................................................. 39 6.1.5 Nieuwe wijnfiche .................................................................................................................................. 40 6.1.6 Wijnfiche lijst ........................................................................................................................................ 42 6.1.7 Overzicht .............................................................................................................................................. 42 6.1.8 Zoeken .................................................................................................................................................. 43 6.1.9 Degustatiefiche .................................................................................................................................... 44 6.1.10 Printvriendelijke versie....................................................................................................................... 46 6.2 De Administrator ......................................................................................................................................... 46 6.2.1 Inloggen ................................................................................................................................................ 46 6.2.2 administrator Hoofdmenu ................................................................................................................... 47 6.2.3 Nieuwe gebruiker ................................................................................................................................. 47 6.2.4 Gebruikerslijst ...................................................................................................................................... 48 6.2.5 Gebruiker profiel .................................................................................................................................. 49 6.2.6 Gebruiker zoeken ................................................................................................................................. 49
7.
Kritische reflectie .......................................................................................................................................... 50
8.
Conclusie ....................................................................................................................................................... 52
9.
Goedkeuring eindwerk .................................................................................................................................. 53
4
1. WEBDOOS Aan het roer van Webdoos staan Stijn Blomme en Jorge Spiessens: jong, creatief, ambitieus en ze staan te popelen om van uw project een succesverhaal te maken. Webdoos is een klein en jong webontwikkelingsbedrijf dat een consequente langetermijnvisie hanteert. Het opbouwen en onderhouden van gezonde en vaste klantenrelaties beschouwen ze dan ook als een must. Ze specialiseren zich in de creatie en ontwikkeling van websites en webapplicaties. Technisch hoogstaande producten met een lange gebruiksduur worden afgeleverd door alles binnenshuis te houden en door de allernieuwste technologieën en normen te volgen. Webdoos streeft er bovendien naar service als een belangrijk en gevoelig punt te beschouwen, ook in de periode na de oplevering.
Bron: http://www.webdoos.be/nl/over_webdoos-18.html
2. STAGE OPDRACHT Mijn opdracht bestond uit het creëren van een webapplicatie voor het invoeren en raadplegen van wijninformatie en alles daarrond. Het geheel stelt een digitale wijnkelder voor.
2.1 HUIDIGE SITUATIE Als voorbeeld voor mijn applicatie was er een bestaande wijnapplicatie in Access. Deze applicatie bevat de grootste functionele eisen die ook in mijn programma moeten terugevonden worden. De nadelen van het huidige systeem zijn echter de beperktheid in het raadplegen van de applicatie. Je moet immers het programma op je computer staan hebben en Access om het programma op te starten. Bovendien is het programma niet gebruiksvriendelijk en onoverzichtelijk.
2.2 VERWACHTE RESULTAAT Als resultaat moet ik een product creëren waarin de klanten geïnteresseerd zijn. De doelgroep voor dit product zijn de wijnliefhebbers en professionele wijnkenners. De digitale wijnkelder houdt de informatie bij van alle wijnen die in het bezit van de gebruiker zijn. Een gebruiker moet zijn wijnen kunnen invoeren in het systeem en aan de hand van bepaalde eigenschappen (land, 5
naam, jaar, wijnsoort, dronk...) zijn wijnen opnieuw kunnen raadplegen. De gebruiker moet ook in staat zijn een reeds ingevoerde wijn aan te passen of te verwijderen van het systeem. Na een degustatie moet de gebruiker de bevindingen, die hij gedurende deze degustatie heeft waargenomen, kunnen invoeren in de applicatie. Deze degustatiefiche is gekoppeld aan de wijnfiche van de wijn die geproefd werd. De gebruiker moet ook in staat zijn een eigen profiel te beheren met persoonlijke informatie zoals naam, paswoord en e-mail. Verder moet er ook aandacht besteed worden aan veiligheid, zodat gebruikers zonder licentie de applicatie niet kunnen gebruiken en gebruikers die wel een licentie hebben enkel hun eigen wijnfiches kunnen bekijken en wijzigen, maar gebruikers zonder licentie niet. Wanneer de licentie van een gebruiker vervallen is wordt zijn informatie bijgehouden, maar kan hij de applicatie niet meer gebruiken tot wanneer hij zijn licentie opnieuw activeert. Een administrator moet kunnen inloggen en de gebruikers beheren. Hij moet in staat zijn alle gegevens van een gebruiker eenvoudig te raadplegen en te wijzigen. Dit is de opdracht waarmee ik begonnen ben, maar geregeld kreeg ik feedback op tussentijdse resultaten. Met deze feedback kon ik uitbreidingen maken die vooral de gebruiksvriendelijkheid van de wijnapplicatie ten goede uitkwamen. De website moest volledig opgebouwd worden met PHP, clientside beveiliging gebeurt met Javascript. Ik werd geheel vrijgelaten in het gebruik van extra technieken waardoor het mogelijk was om te experimenteren met relatief nieuwe technieken zoals AJAX en MySQLi. Het grafische aspect van de applicatie zit niet bij de opdracht.
6
3. ANALYSE 3.1 FUNCTIONELE EISEN •
• • • • • • •
•
Inloggen o “wachtwoord vergeten” functie (reset van wachtwoord en mailen naar gebruiker) o Gebruikers kunnen zelf registreren, de admin moet ze echter activeren voor een bepaalde periode. o Gebruikers hebben een account gelimiteerd op termijn (door bijvoorbeeld jaarlijks te verlengen); in dit geval vervalt de account op een specifieke datum (de account wordt niet verwijderd, maar het inloggen wordt uitgeschakeld) Gebruiker kan zijn eigen wijnfiches en degustatiefiches bekijken, toevoegen, wijzigen en verwijderen. Gebruiker kan zijn lijst met wijnfiches sorteren op naam, jaar, soort, land, dronk Gebruiker kan zijn eigen wijnfiches opzoeken volgens naam of jaar. Gebruiker kan een overzicht van al zijn wijnfiches raadplegen en sorteren op bepaalde eigenschappen. Gebruiker kan zijn eigen profiel wijzigen. (inclusief paswoord) Gebruikers met verschillende rollen (admin, member) Een administrator kan alle gebruikers beheren o Gebruikers toevoegen, wijzigen, activeren, verwijderen. o Een administrator kan inloggen als een gebruiker. Foutcontrole o Userside(javascript) en serverside (PHP)
3.2 NIET-FUNCTIONELE EISEN • • •
Het gebruik van PHP als scripttaal MySQL als database. Beveiliging o SQL-injection o Beveiliging tegen het rechtstreeks benaderen van webpagina’s door gebruikers die niet ingelogd zijn. o Beveiliging tegen het benaderen van administrator pagina’s. o Authenticatie aan de hand van een nickname en wachtwood (geëncrypteerd: md5/sha1)
3.3 SWOT ANALYSE 3.3.1 STRENGTHS • • • •
De gebruiker kan zijn wijnkelder overal ter wereld raadplegen als hij over een internetconnectie beschikt. De gebruiker wordt gedetailleerd op de hoogte gehouden van de inhoud van zijn wijnkelder. De applicatie is gebruiksvriendelijk. Gebruik van nieuwe technologieën zoals mysqli en AJAX om een robuuste en veilige applicatie te garanderen.
3.3.2 WEAKNESSES •
Alle wijngegevens moeten eenmaal manueel ingegeven worden.
3.3.3 OPPERTUNITIES •
De wijnfiches kunnen afgeprint worden waardoor er een catalogus/encyclopedie kan gemaakt worden van de eigen wijnkelder. 7
3.3.4 THREATS • •
Verkeerde invoer kan leiden tot een incorrecte inventaris van de wijnkelder. De wijnkelder moet up-to-date gehouden worden door de gebruiker zelf. Als dit niet gedaan wordt zal de digitale wijnkelder opnieuw foutieve gegevens bevatten.
8
4. ONTWERP 4.1 DATABANKMODEL
De hoofdtabel is de “wijnfiche”. De tabellen “classificatie”, “cru”, “wijnsoort”, “land”, “regio” en “streek” zijn tabellen met vaste waarden. Deze tabellen komen in de applicatie voor als dropdownlists waaruit de gebruiker kan kiezen. Bij de tabellen “land”, “regio” en “streek” zou u kunnen denken dat een rechtstreekse koppeling naar de wijnfiche met deze 3 tabellen overbodig is. In theorie zou enkel de “streek” voldoende zijn om dan verder de regio en het land te achterhalen. Maar in de praktijk zien we dat niet elk land een wijnregio heeft en niet elke regio een wijnstreek. Hetzelfde geldt voor de tabel “foto” en “druivensoorten”. Het enige verschil is de tussentabel “druivenfiche” en “fotofiche” zodat het mogelijk is meerdere foto’s en druivensoorten per wijnfiche op te slaan.
9
De “wijnfiche” is gekoppeld aan een “user” via de “userwijn” tabel zodat één user verschillende wijnfiches kan maken. De “degustatiefiche” is ook gekoppeld aan de “wijnfiche”. Er kan slechts 1 degustatiefiche per wijnfiche zijn. Dit is de tweede belangrijke tabel. Een degustatiefiche heeft een aantal eigenschappen die je in “degustatiefiche” kan zien. Daarnaast zijn er ook eigenschappen die onderverdeeld zijn in rubrieken, subrubrieken en opties. Bv. Rubriek: Geur, Subrubriek: Fruit, Optie: Banaan. Per rubriek is er een tabel gemaakt omdat het mogelijk is voor de gebruiker om een rubriek aan te vinken zonder verder opties aan te duiden. Hetzelfde geldt voor de smaak tabellen. Hier bestaan er ook subrubrieken die apart kunnen opgeslagen worden waardoor een extra tabel “subgeurfiche” voorzien is.
4.2 DATADICTIONARY
Wijnfiche Attribuut
Datatype
Omschrijving
Ficheid
Int
ID van de fiche.
Naam
Varchar
De naam van de wijn
Jaar
Int
Het jaar van de wijn
Percentage
Int
Percentage alcohol
Inhoud
Int
De inhoud van de wijnfles in ml
Toepassing
Varchar
Het eten dat geschikt is bij deze wijn
Prijs
Int
De aankoopprijs
Producent
Varchar
De producent
Degustatieficheid
Int
De ID van de degustatiefiche van deze wijn
Aantal
Int
Het aantal flessen van deze wijn
Drinken_van
Date
De begindatum van de dronk
10
Drinken_tot
Date
De einddatum van de dronk
Wijnvak
Varchar
Het vak in de fysieke wijnkelder waar de wijn zich bevindt.
Datum_van_aankoop
Date
De aankoopdatum
Gekocht_bij
Varchar
Waar de wijn gekocht is
Leverancier
Varchar
De leverancier
Extra_informatie
Text
Extra informatie
Datetime_lastupdated
Datetime
Datum en tijd wanneer deze fiche laatst is aangepast
Temperatuur
Int
De temperatuur waarop de wijn het best geserveerd wordt
Classificatieid
Int
ID die overeenkomt met de classificatie
Streekid
Int
ID die overeenkomt met de wijnstreek
Regioid
Int
ID die overeenkomt met de regio
Landid
Int
ID die overeenkomt met het land
Cruid
Int
ID die overeenkomt met de Cru
Attribuut
Datatype
Omschrijving
Userid
Int
ID van de gebruiker
Naam
Varchar
Naam
User
11
Voornaam
Varchar
Voornaam
Gebruikersnaam
Varchar
Gebruikersnaam
Paswoord
Varchar
Paswoord
Actief
Bit
Status van de gebruiker
Admin
Bit
Rol van de gebruiker
e-mail adres
Varchar
e-mail adres
Attribuut
Datatype
Omschrijving
Userid
Int
ID van de gebruiker
Ficheid
Int
ID van de wijnfiche
Attribuut
Datatype
Omschrijving
Soortid
Int
ID die overeenkomt met de wijnsoort
Naam
Varchar
De naam van de wijnsoort
Datatype
Omschrijving
Userwijn
Wijnsoort
Streek Attribuut
12
Streekid
Int
ID van de wijnstreek
Naam
Varchar
Naam van de wijnstreek
Regioid
Int
ID van de regio van de streek
Attribuut
Datatype
Omschrijving
Regioid
Int
ID van de regio
Naam
Varchar
Naam van de regio
Landid
Int
ID van land waartoe de regio behoort
Attribuut
Datatype
Omschrijving
Landid
Int
ID van het land
Naam
Varchar
Naam van het land
Attribuut
Datatype
Omschrijving
Druivensoortid
Int
ID van de druivensoort
Naam
Varchar
Naam van de druivensoort
Regio
Landen
Druivensoorten
13
Druivenfiche Attribuut
Datatype
Omschrijving
Druivensoortid
Int
ID van de druivensoort
Ficheid
Int
ID van de wijnfiche
Percentage
Int
Percentage van de hoeveelheid van deze druifsoort dat er in de wijn zit.
Attribuut
Datatype
Omschrijving
Fotoid
Int
ID van de foto
Naam
Varchar
De naam van de foto
Locatie
Varchar
Het pad waar de foto zich bevindt op de server
Type
Varchar
De extensie van de foto
Attribuut
Datatype
Omschrijving
Fotoid
Int
ID van de foto
Ficheid
Int
ID van de wijnfiche
Foto
Fotofiche
14
Classificatie Attribuut
Datatype
Omschrijving
Classificatieid
Int
ID van de classificatie
Naam
Varchar
Naam van de classificatie
Attribuut
Datatype
Omschrijving
Cruid
Int
ID van de cru
Naam
Varchar
Naam van de cru
Attribuut
Datatype
Omschrijving
Degustatieficheid
Int
ID van de degustatiefiche
Datum
Datetime
De datum en tijd waarop de degustatie heeft plaatsgevonden
Plaats
Varchar
De locatie waar de degustatie heeft plaatsgevonden
Temperatuur
Int
De temperatuur waarop de wijn werd uitgeschonken
Proeverspanel
Varchar
De mensen aanwezig op de degustatie
Meer_info
Text
Extra informatie
Cru
Degustatiefiche
15
Varchar
Het onderwerp van de degustatie
Attribuut
Datatype
Omschrijving
Smaakoptiesid
Int
ID van de smaakoptie
Degustatieficheid
Int
ID van de degustatiefiche
Attribuut
Datatype
Omschrijving
Naam
Varchar
De naam van de smaakoptie
Smaakrubriekid
Int
De ID van de rubriek waaronder de smaakoptie zich bevindt.
Attribuut
Datatype
Omschrijving
Smaakrubriekid
Int
ID van de rubriek
Naam
Varchar
Naam van de rubriek
Degustatieonderwerp
Smaakfiche
Smaak_opties
Smaak_rubrieken
16
Besluitfiche Attribuut
Datatype
Omschrijving
Degustatieficheid
Int
ID van de degustatiefiche
Besluitid
Int
ID van de besluit optie
Attribuut
Datatype
Omschrijving
Besluitid
Int
ID van de besluit optie
Naam
Varchar
De naam van de besluit optie
Rubriekid
Int
ID van de rubriek waaronder de besluit optie zich bevindt
Attribuut
Datatype
Omschrijving
Rubriekid
Int
ID van de besluit rubriek
Naam
Varchar
De naam van de besluit rubriek
Besluit_opties
Besluit_rubrieken
17
Eindbeoordelingsfiche Attribuut
Datatype
Omschrijving
Degustatieficheid
Int
ID van de degustatiefiche
Eindbeoordelingsid
Int
ID van de eindbeoordeling optie
Attribuut
Datatype
Omschrijving
Eindbeoordelingid
Int
ID van de eindbeoordeling optie
Naam
Varchar
De naam van de eindbeoordeling optie
Rubriekid
Int
ID van de rubriek waaronder de eindbeoordeling optie zich bevindt
Attribuut
Datatype
Omschrijving
Rubriekid
Int
ID van de rubriek
Naam
Varchar
De naam van de rubriek
Eindbeoordelingsopties
Eindbeoordeling_rubriek
18
Visueelfiche Attribuut
Datatype
Omschrijving
Degustatieficheid
Int
ID van de degustatiefiche
Visueelid
Int
ID van de visueel optie
Attribuut
Datatype
Omschrijving
Visueelid
Int
ID van de visueel optie
Naam
Varchar
Naam van de visueel optie
Visueelrubriekid
Int
ID van de rubriek waaronder de visueel optie zich bevindt
Attribuut
Datatype
Omschrijving
visueelrubriekID
Int
ID van de rubriek
Naam
Varchar
De naam van de rubriek
Datatype
Omschrijving
Visueel_opties
Visueel_rubrieken
Subgeurfiche Attribuut
19
Degustatieficheid
Int
ID van de degustatiefiche
Subrubriekid
Int
ID van de subrubriek
Attribuut
Datatype
Omschrijving
Subrubriekid
Int
ID van de subrubriek
Naam
Varchar
Naam van de subrubriek
Geurid
Int
ID van de geur optie
Attribuut
Datatype
Omschrijving
Degustatieficheid
Int
ID van de degustatiefiche
Geurid
Int
ID van de geur optie
Attribuut
Datatype
Omschrijving
Geurid
Int
ID van de geur optie
Naam
Varchar
Naam van de geur optie
Rubriekid
Int
ID van de geur optie
Geur_subrubrieken
Geurfiche
Geur_opties
20
Geur_rubrieken Attribuut
Datatype
Omschrijving
Rubriekid
Int
ID van de rubriek
Naam
Varchar
Naam van de geur rubriek
5. PROGRAMMATIE
5.1 GEBRUIKTE SOFTWARE
5.1.1 DREAMWEAVER Als ontwikkelingsomgeving maakte ik gebruik van Adobe DreamWeaver CS3. Dit is een erg geavanceerde ontwikkelingsomgeving die veel ondersteuning biedt voor HTML, XHTML, CSS, XML, JavaScript, Ajax, PHP, Adobe ColdFusion, ASP, ASP.NET, en JSP.
5.1.1.1 VERSCHILLENDE VIEWS Dreamweaver geeft u de mogelijkheid om grafisch uw code te schrijven in Design view, manueel uw code te schrijven in Code view of uw scherm op te delen zodat u zowel het grafische als de code kan zien.
5.1.1.2 GEÏNTEGREERDE WORKFLOWS U kan uw code in DreamWeaver ontwikkel terwijl u tegelijkertijd kan profiteren van integratie met andere Adobe tools, zoals Adobe Flash CS3 Professional, Adobe Fireworks CS3, Adobe Photoshop CS3, Adobe Contribute CS3, en Adobe Device Central CS3.
5.1.1.3 COMPLETE CSS SUPPORT Visuele CSS tools maken het eenvoudig om styles te bekijken, aan te passen en onderling te verplaatsen tussen files. U kan eenvoudig uw design controleren op browser compatibiliteit.
21
5.1.1.4 GEÏNTEGREERDE CODEEROMGEVING U kan uw code beter beheren met de geïntegreerde functies. Zo hebt u de mogelijkheid om stukken code samen te vouwen, uw code te kleuren of uw regels te nummeren. Er is ook een toolbaar die het mogelijk maakt comentaar toe te voegen en te verwijderen.
5.1.1.5 XML ONDERSTEUNING U kan uw XML content integreren door gebruik te maken van XSL of het Spry framework voor Ajax. Wijs een XML file of een XML feed URL aan, en Dreamweaver CS3 zal de content weergeven, zodat u door middel van drag en drop de gewenste velden op uw pagina kan toevoegen.
5.1.1.6 FLV SUPPORT Zonder enige kennis van Flahs kan u eenvoudig FLV bestanden toevoegen aan uw web pagina.
5.1.1.7 UITGEBREIDE DREAMWEAVER COMMUNITY Geniet van de online Adobe Design Center en Adobe Developer Center, training en seminaries, developer certification programs, user forums, en meer dan 1,000 downloadbare extensies beschikbaar in de Dreamweaver Exchange.
5.1.1.8 CROSS-PLATFORM ONDERSTEUNING Kies uw platform: Dreamweaver CS3 is beschikbaar voor Intel of PowerPC gebaseerd op Macintosh computers, evenals voor Windows XP en Windows Vista systemen. Ontwikkel in uw platform bij voorkeur en lever uw resultaat cross-platform met meer betrouwbare, consistente, en high-performance resultaten. Bron: http://www.adobe.com/products/dreamweaver/features/
22
5.1.2 PHPMYADMIN phpMyAdmin is een PHP-programma om MySQL-databanken via internet te beheren. Het programma kan onder andere databanken aanmaken en verwijderen; tabellen aanmaken, verwijderen en veranderen; gegevensvelden aanmaken, verwijderen en aanpassen; SQL-commando's aanmaken. Het is in phpMyAdmin niet mogelijk om Foreign Key Constraints te implementeren. Daarom dat een goed databankmodel cruciaal is voor de ontwikkeling van de databank. Bovendien werkt u via een webinterface die zeer gebruiksvriendelijk is.
23
5.2 GEBRUIKTE TECHNOLOGIËN 5.2.1 STRUCTUUR EN OBJECT GEORIËNTEERD In PHP is het nog niet lang mogelijk om object oriented (OO) te programmeren. In PHP 5 zijn de mogelijkheden om OO aan de slag te gaan sterk gegroeid, maar vergeleken met Java of C# staat dit nog erg in de kinderschoenen. Documentatie over object georiënteerd programmeren is bovendien ook erg moeilijk te vinden. Zelf ben ik niet object-geörienteerd aan de slag gegaan, hoofdzakelijk omdat PHP relatief nieuw voor me is en een gebrek aan documentatie voor grote problemen zou kunnen zorgen tijdens de ontwikkelingsfase.
Ik heb wel gezorgd voor een duidelijke structuur tussen de webpagina’s onderling. Er zijn mappen gecreëerd voor de verschillende soorten bestanden die de website gebruikt. De hoofdpagina’s bevinden zich onder de map inc. Alle bestanden die opgeroepen worden door AJAX zitten onder de map ajax. De map js bevat alle javascript functies, de map css alle css bestanden, images alle foto’s en afbeeldingen, functies alle php functies en errors de custom errorpagina’s.
In de pagina’s zelf heb ik zoveel mogelijk gezorgd voor een scheiding tussen het visuele en de verwerking van gegevens. Bij het maken van een wijnfiche krijgt de gebruiker de pagina wijnfiche_invulformulier.php te zien. Op deze pagina staat het formulier die de gebruiker dient in te vullen. Eenmaal de gebruiker deze pagina volledig heeft ingevuld klikt hij op de submit knop. De verwerking van de ingevoerde gegevens gebeurt dan op een andere pagina, namelijk wijnfiche_aanmaken.php. Deze pagina maakt een connectie met de databank en voert de nieuwe wijnfiche in de databank. Hetzelfde geldt voor user_registratieformulier.php en user_aanmaken.php, degustatiefiche_invulformulier.php en degustatiefiche_aanmaken.php.
5.2.2 MYSQLI MySQLi (improved) is nieuw sinds PHP5. Het verzorgt de connectie tussen PHP en een MySQL database. Ten opzichte van de oudere MySQL biedt MySQLi een verbetering aan.
5.2.2.1 PREPARED STATEMENTS Het grootste voordeel van mysqli is de snelheid waarmee het prepared statements afhandelt. Als je veel gelijkaardige queries hebt zal je een performance boost waarnemen door de prepared statement eenmaal te verzenden en dan meerdere keren te gebruiken. Bovendien maakt het SQL-injection onmogelijk. De SQL statement en de user input worden niet meer op dezelfde manier behandeld als bij mysql. De query template wordt verzonden naar de server voordat er data mee geassocieerd wordt. 24
5.2.2.2 VEILIGE MYSQL CONNECTIVES De mogelijkheid om eenvoudig mysqli_ssl_set() te gebruiken om een veilige connectie te garanderen door gebruik te maken van certificaat details als input parameters.
5.2.2.3 MULTI QUERY Door gebruik te maken van de mysqli_multi_query() method/function, kan een programmeur verschillende semi colon delimited queries tegelijk naar de server sturen. Elke resultset die wordt teruggestuurd kan apart gebruikt worden. Het nadeel is echter dat je hiermee geen prepared statements kan maken Bron: http://devzone.zend.com/node/view/id/686#Heading10
5.2.2.4 PERFORMANTIE Bij een benchmark zien we dat mysqli_query betere resultaten geeft dan mysql_query. Bovendien worden alle mysqli statements automatisch "pre-escaped". Dit wilt zeggen dat een “\” voor alle speciale characters geplaatst wordt zodat deze niet verkeerdelijk als code worden geïnterpreteerd. Bron: http://www.johnjawed.com/benchmarks/
5.2.2.5 CODEVOORBEELDEN In dit codevoorbeeld ziet u hoe er een mysqli instantie wordt aangemaakt: Code: $mysqli = new mysqli($con_host, $con_username, $con_password, $con_db); /* check connection */ if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); exit(); In dit codevoorbeeld ziet u hoe er gebruik gemaakt wordt van een prepared statement. Bij $stmt->bind_param() moet de eerste parameter een string zijn die de types van de corresponderende variabelen specifieert: Type specification chars: i voor het type integer d voor het type double s voor het type string a voor het type blob en zal in packets verstuurd worden Code: $stmt = $mysqli->prepare('UPDATE user SET naam = ?, voornaam = ?, email = ?, gebruikersnaam = ?, actief = ?, admin = ?, vervaldatum = ? WHERE userid = ? ');
25
$stmt->bind_param('ssssiisi', $_POST[naam], $_POST[voornaam], $mail, $_POST[gebruikersnaam], $actief, $_POST[admin], $vervaldatumdatetime, $_REQUEST[id]); $stmt->execute(); $stmt->close();
26
5.2.3 AJAX AJAX wordt gebruikt bij interactieve webapplicaties die onmiddellijk data-input verwerken. Het voordeel van Ajax is dat pagina’s direct worden bijgewerkt na input van de bezoeker. Wanneer de bezoeker een actie onderneemt, wordt alleen dié actie via de Ajax-engine naar de server gestuurd, en niet de gehele pagina. Xml zorgt voor de uitwisseling van data met de server, terwijl html en CSS worden gebruikt voor de weergave van de pagina's. JavaScript verbindt deze elementen zodat dynamische interactie mogelijk wordt. Om eenvoudig gebruik te maken van AJAX functionaliteit maak ik gebruik van de library Prototype.js . Deze maakt een eenvoudige syntax mogelijk en bespaart een hoop tijd aan typwerk.
5.2.3.1 VOORDELEN Gebaseerd op open standaarden (JavaScript, DHTML, xml, DOM, CSS) Asynchroon: alleen wijzigingen worden van/naar de server gestuurd De server heeft minder verkeer te verwerken
5.2.3.2 NADELEN Ontwikkeltools nog niet volwassen Moeilijk in zoekmachines op te nemen Trucs en hacks nodig voor compatibiliteit
5.2.3.3 PROTOTYPE Prototype is een library die ik gebruikt heb om de AJAX codering te vereenvoudigen. Het maakt het mogelijk om eleganter code te schrijven. Het gebruik van Prototype heeft meerdere voordelen dan handmatig alles scripten. De notaties zijn vaak korter en daarmee kun je veel sneller code schrijven. Zo kan u document.getElementById('divje') vervangen door $('divje'). Wat weer een paar bytes scheelt. Een ander groot voordeel is dat u zich geen zorgen hoeft te maken over cross-browser compatabiliteit, met andere woorden zorgen dat het werkt onder verschillende browsers. Bron: http://www.prototypejs.org http://www.scriptorama.nl/ajax/simpel-ajax-met-prototype
5.2.3.3 CODEVOORBEELDEN 5.2.3.3.1 LAND, REGIO EN STREEK Als eerste voorbeeld zal ik tonen hoe ik met behulp van prototype en AJAX de velden land, regio en streek dynamisch weergeef zonder dat de volledige pagina herladen wordt. Oorspronkelijk zien we de onderstaande figuur.
27
Wanneer de gebruiker een land selecteert zal de gebruiker 2 velden zien. Namelijk het land dat hij geselecteerd heeft en een nieuw veld regio als er een regio bestaat voor het geselecteerde land. Wanneer de gebruiker dan nog eens een regio selecteert komt er een derde veld bij waar de gebruiker een streek kan kiezen als er een streek voor de regio bestaat. Dan zien we onderstaande figuur.
We nemen eerste een kijkje naar de code op wijnfiche_invulformulier.php.
Oorspronkelijk krijgt de gebruiker enkel de tabel land te zien. Het belangrijkste hier is het onchange event. Wanneer de gebruiker een land selecteert zal de functie “showRegio(this.value)” opgeroepen worden met this.value die de id van het geselecteerde land bevat. Lager zien we twee cellen. De eerste cel heeft als id “lRegio”. In deze cel moet de label “Regio” worden ingevuld wanneer er een land geselecteerd is. In de tweede cel “aRegio” zal de dropdownlist met alle regio’s van het geselecteerde land komen. Nog lager zien we een cel met “lStreek” waar de label “Streek” te zien zal zijn wanneer een regio geselecteerd is. Daarnaast hebben we de cel met id “aStreek” waar de dropdownlist met alle streken van de geselecteerde regio te zal zijn.
28
We gaan nu kijken naar de functie “showRegio” in select.js.
Deze functie bevat 3 delen. Het eerste deel dat we zullen bespreken gaat van regel 296 tot en met regel 305. De variabele “url” bevat het pad naar het bestand waarin de content staat die moet worden ingeladen. In dit voorbeeld zal het dus de dropdownlist met alle regio’s bevatten. De variabele “pars” bevat de parameter met de id van het land. We zullen deze parameter nodig hebben om enkel de regio’s van het geselecteerde land te selecteren. Met de Ajax.Updater functie van de Prototype library hoeft u niet in te zitten met het maken van de XMLHttprequest object. Het enige dat u hoeft te doen is de id meegeven van de cel waar de nieuwe content moet komen, de url van waar de nieuwe content zich bevindt en uiteindelijk nog de methode en de parameters. De eerste cel die we nieuwe content gaan geven is de cel met id ‘aRegio’ en zoals eerder gezegd bevat de parameter “url” het pad waar de dropdownlist zich bevindt. Meer moet er niet gedaan worden. In 10 regels code zorgt deze functie ervoor dat het de inhoud van een cel vervangt door de inhoud van een url die we meegeven in de functie. Bovendien zal dit op alle browsers werken. Het tweede deel (r. 307-316) is hetzelfde als het eerste deel. Maar nu wordt de cel ‘lRegio’ gewijzigd. Deze zal een label krijgen die “Regio” weergeeft. Het derde deel (r.318-319) zorgt ervoor dat de inhoud van de cellen ‘lStreek’ en ‘aStreek’ leeg zijn. Zolang er immers geen regio geselecteerd is kan er ook geen streek zijn.
29
We zullen nu de code met de nieuwe content bekijken. Voor ons eerste voorbeeld was dit ../ajax/regio.php.
Omdat deze webpagina los staat van de rest van de website moeten we de sessie opnieuw starten. De parameter om de juiste regio’s van het geselecteerde land te vinden bevindt zich in de url. We kunnen deze gebruiken met $_REQUEST[]. De code erna vult de dropdownlist met de regio’s. Merk op dat er opnieuw een onchange event is die deze keer de functie ‘showStreek()’ oproept.
30
Deze functie is gelijkaardig aan de showRegio() functie die we reeds besproken hebben. De variabelen worden echter aangepast zodat de juist content in de juiste cellen komt. Met andere woorden dat de content van /ajax/streek.php komt in de cel ‘aStreek’ en de content van /ajax/lstreek.php komt in de cel ‘lStreek’. We hebben nu succesvol van 1 veld met landen overgegaan naar 3 velden met een regio en een streek.
5.2.3.3.2 ZOEKFUNCTIE Als tweede voorbeeld zullen we de zoekfunctie bekijken. Deze zoekfunctie werkt op hetzelfde principe als het gekende ‘google suggest’. Tijdens het typen van uw zoekcriteria wordt er reeds gezocht naar waarden die overeenkomen met hetgeen de gebruiker heeft ingetypt. Per toetsaanslag worden er nieuwe resultaten getoond. Omdat ik bij het maken van deze functie gebruik heb gemaakt van online documentatie zal ik geen gebruik maken van de Ajax.Update functie uit de Prototype library.
De code van de php pagina ziet er als volgt uit:
De event onKeyUp roept de getwijnnaam() functie op telkens er een toets wordt aangeslagen. De div ‘hiddenDIV2’ zal de gevonden resultaten weergeven.
31
De functie getwijnnaam.
Eerst moet er een XMLHttpObject gemaakt worden naargelang de browser die de gebruiker gebruikt. In de variabele idValue wordt de ingegeven zoekcriteria ingevuld. De variabele myRandom bevat een random getal. Dit getal wordt gebruikt om gegevens die zich nog in de cache van de browser kunnen bevinden tegen te gaan. Anders zouden er zich foutieve resultaten kunnen voordoen. De nieuwe content wordt geladen en wanneer de content klaar is, wordt deze afgebeeld in de voorziene div. De functie loadwinerecord zal opgeroepen worden in de volgende pagina. Deze functie zorgt ervoor dat de gebruiker naar de wijnfiche gebracht wordt die hij heeft aangeklikt.
32
Deze pagina bevat de gevonden resultaten.
Een SQL query zoekt records waar de parameter gedeeltelijk in voorkomt. We doen dit door de wildcard ‘%’ zowel voor als na de parameter te plaatsen. Bovendien kan er naast de naam ook gezocht worden op jaar. Per gevonden resultaat wordt er een link weergegeven. Wanneer de gebruiker dan op deze link klikt wordt de functie “loadwinerecord” opgeroepen die de gebruiker naar de geselecteerde wijnfiche brengt. Bron: http://crackajax.net/suggest.php
33
5.2.4 HTACCESS In het project wordt HTAccess gebruikt om de URL op te knappen. Alle php pagina’s (behalve de index) bevinden zich in de map inc. In de url zie je echter niet de /inc/ en wordt ook de extensie weggelaten. Code: # root aanpassen RewriteEngine On RewriteBase /wijnkelder/site RewriteRule ^(.*)/([0-9]+)?$ index.php?p=$1&id=$2 [T=application/x-httpd-php] De webpagina wijnkelder/site/inc/user_registratieforumulier.php wordt omgevormd tot wijnkelder/site/user_registratieformulier/ .
HTAccess wordt ook gebruikt om custom errorpages mogelijk te maken. In de plaats van de standaard 404 page not found melding krijgt de gebruiker nu een mooiere melding te zien. Code: # Afhandelen van foutmeldingen ErrorDocument 500 /wijnkelder/site/errors/internal_error.html ErrorDocument 401 /wijnkelder/site/errors/authorization_required.html ErrorDocument 403 /wijnkelder/site/errors/forbidden.html ErrorDocument 404 /wijnkelder/site/errors/notfound.html
HTAccess kan u ook gebruiken om uw website te beveiliging tegen referrer spam. Wanneer u een website beheert kan u allerlei statistieken opvragen van de gebruikers die uw website bezoeken. Zo kan u zien welke browser de gebruikers het meest gebruiken om uw website te bezichtigen, hoeveel gebruikers u krijgt per dag, van welk website ze komen voordat ze op uw website terechtkwamen... Dit laatste wordt soms misbruikt door bedrijven. Ze spammen uw website dan met headers die de url van hun eigen website bevatten (referrer spam). Zo worden uw statistieken zodanig beïnvloed dat ze geen correcte data meer weergeven. De reden dat ze dit zouden doen is om hun eigen website te promoten. Sommige websites maken immers automatisch een link naar de websites vanwaar hun bezoekers het vaakst komen.
34
Code: # referrer spam blokkeren # set the spam_ref variable SetEnvIfNoCase Referer "^http://(www.)?some-spammer.com" spam_ref=1 SetEnvIfNoCase Referer "^http://(www.)?other-spammer.com" spam_ref=1 SetEnvIfNoCase Referer "^casino-poker" spam_ref=1 # block all referrers that have spam_ref set
Order Allow,Deny Allow from all Deny from env=spam_ref
5.2.5 BEVEILIGING De meest voor zich sprekende beveiliging die ik in het programma gebruikt heb is de login. Een gebruiker zonder username en password kan niet inloggen. Bovendien moet deze gebruiker eerste geactiveerd worden door een administrator. Het paswoord wordt met md5 encryptie opgeslaan in de databank.
In het hoofdstuk rond MySQLi hebben we gezien dat SQL-injection niet mogelijk is. Ten eerste maak ik gebruik van prepared statements voor alle query’s die user input bevatten en bovendien worden alle mysqli query’s automatisch “pre-escaped”. Om ervoor te zorgen dat gebruikers die niet ingelogd zijn rechtstreeks een pagina zouden benaderen heb ik een functie gemaakt die dit controleert.
Deze functie wordt bovenaan elke webpagina opgeroepen. Als de webpagina in kwestie enkel door een administrator mag benaderd worden zal er een andere functie worden opgeroepen.
35
5.2.6 FOUTCONTROLE
Om ervoor te zorgen dat een gebruiker geen foutieve informatie ingeeft wordt er gebruik gemaakt van foutcontrole. Er wordt gecontroleerd indien de verplichte velden ingevuld zijn, jaartallen effectief uit cijfers bestaan, of datums bestaande datums zijn, e-mail adressen de juiste syntax hebben en andere. Voor deze controle maak ik gebruik van JavaScript. Wanneer de gebruiker zijn formulier submit worden eerst alle velden gecontroleerd. Als al deze velden voldoen aan de eisen zal het formulier verwerkt worden. Indien er zich echter een fout heeft voorgedaan, wordt de gebruiker hiervan op de hoogte gebracht met een melding. Op deze melding krijgt de gebruiker te lezen welke fout er zich heeft voorgedaan en wordt de cursor van de gebruiker naar het veld in kwestie gebracht. Dit is een voorbeeld van hoe de invoer voor het registreren van een nieuwe gebruiker gecontroleerd wordt:
36
Voorbeeld van een van de functies:
37
6. HANDLEIDING
6.1 DE GEBRUIKER
6.1.1 INLOGGEN, REGISTREREN & PASSWORD RECOVERY Op de homepage krijgt de gebruiker een inlogscherm te zien. Als de gebruiker reeds geregistreerd is kan die zijn gebruikersnaam en paswoord ingeven om in te loggen. Wanneer de gebruiker echter nog niet geregistreerd is kan hij dat doen door op de registreer knop te klikken en zijn gegevens in te vullen. Er wordt gecontroleerd of de gebruikersnaam of e-mail reeds bestaan. Als dit zo is zal de gebruiker een foutmelding krijgen. De gebruiker kan dan een nieuwe gebruikersnaam kiezen.
Voordat deze nieuwe gebruiker kan inloggen moet hij geactiveerd worden door een administrator. Wanneer een gebruiker zijn paswoord vergeten is kan hij gebruik maken van de passwordrecovery functie. De gebruiker klikt dan op “paswoord vergeten?”. Op deze pagina kan de gebruiker zijn e-mail adres invullen. Het paswoord van deze gebruiker wordt dan veranderd door een random 8 digit woord bestaande uit cijfers en letters. Dit nieuw paswoord wordt ook gemaild naar de gebruiker waarmee deze opnieuw kan inloggen.
38
6.1.2 HET HOOFDMENU Wanneer de gebruiker voor de eerste keer inlogt krijgt hij een menu te zien. De gebruiker kan een nieuwe wijnfiche toevoegen, zijn profiel wijzigen of opnieuw uitloggen. Wanneer een gebruiker niet voor de eerste keer inlogt en reeds een of meerdere wijnfiches heeft gemaakt zal hij meer opties te zien krijgen. De gebruiker kgrijt dan de mogelijkheid om een lijst van zijn wijnfiches te bekijken, een overzicht te raadplegen of te zoeken naar 1 bepaalde wijnfiche.
6.1.3 PROFIEL WIJZIGEN Hier kan de gebruiker zijn naam, voornaam, e-mail en gebruikersnaam bekijken en wijzigen. Een e-mail is niet verplicht om in te vullen omdat ook mensen zonder een e-mail adres gebruik kunnen maken van de applicatie. Deze gebruikers zullen de reeds uitgelegde password recovery functie echter niet kunnen gebruiken.
6.1.4 UITLOGGEN Wanneer de gebruiker klikt op uitloggen zal zijn sessie vernietigd worden en komt de gebruiker terug op de beginpagina met het inlogscherm.
39
6.1.5 NIEUWE WIJNFICHE Nu komen we aan het doel van de applicatie. Namelijk het opslaan en bijhouden van informatie over uw wijn. De gebruiker krijgt een uitgebreide fiche te zien die voorlopig leeg is. Hier worden alle gegevens gaande van de naam van de wijn, de temperatuur waarop hij het best geschonken wordt, de periode dat hij op dronk is tot de streek waaruit de wijn afkomstig is opgeslagen. (zie figuur op volgende pagina) Bepaalde velden zoals jaar, prijs en temperatuur worden gecontroleerd op ingave van een getal. Wanneer de gebruiker iets anders dan een getal opgeeft zal hij bij het opslaan een melding krijgen dat er een fout opgetreden is en wordt zijn cursor verplaatst naar het veld waar de fout zich heeft voorgedaan. Het enige veld dat verplicht moet worden ingevuld is de naam van de wijn. Voor het invoeren van een datum (bv. Op dronk van datum) is er een afbeelding naast het tekstveld geplaatst. De gebruiker kan kiezen om manueel de datum in te geven, maar als de gebruiker zeker wilt zijn van een juiste datum in te geven kan hij op de afbeelding klikken. Er komt dan een popup tevoorschijn met een kalender. De gebruiker kan bladeren door de jaren en maanden en wanneer hij op een dag klikt verdwijnt de popup en zal de gekozen datum automatisch correct worden ingevuld. Er wordt ook gecontroleerd dat de “op dronk van” datum niet na de “op dronk tot” datum valt. Om een foto toe te voegen klikt de gebruiker op de knop “bladeren”. De gebruiker krijgt dan de explorer van zijn pc te zien en kan de foto die hij wenst, selecteren op zijn hardeschijf. Deze foto zal automatisch worden bijgeknipt naar een maximale dimensie van 400 x 400 pixels en dan worden upgeload naar de server. Om de server niet te overbelasten is er een limiet gesteld op een grootte van 2MB per foto en en dimensie van 1280 x 1024 pixels. Bij de keuze van de druivensoort is er een tekstveld voorzien voor het invullen van het percentage en een dropdownlist voor het selecteren van de druivensoort. De druivensoorten zijn geordend volgens soort (wit of rood) en dan volgens naam. De meeste wijnen bestaan uit een combinatie van verschillende druivensoorten. Daarom dat er een “+” symbool is voorzien onder de eerste dropdownlist voor de druivensoort. Wanneer de gebruiker hierop klikt wordt er direct een tweede percentageveld en dropdownlist ingeladen. De gebruiker kan zoveel druifsoorten toevoegen als die wenst en ook verwijderen met het “-“ symbool.
Bij een nieuwe wijnfiche ziet de gebruiker enkel een veld voor het selecteren van een land uit een dropdownlist. Deze lijst bevat alle landen die officieel erkende producenten van wijn zijn. Wanneer een land wordt geselecteerd wordt er nagegaan welke regio’s overeenkomen met het geselecteerde land en wordt een nieuwe dropdownlist ingeladen met al deze regio’s. Hetzelfde geldt dat wanneer een regio wordt geselecteerd er een nieuwe dropdownlist wordt ingeladen met alle wijnstreken van de geslecteerde regio. Indien er geen extra dropdownlist komt wilt dit zeggen dat er voor de geselecteerde regio geen wijnstreken bestaan.
Wanneer de gebruiker tevreden is over de ingevoerde gegevens klikt hij op de knop om alles op te slaan. Als er geen validatie fouten meer zijn krijgt de gebruiker een melding dat de wijnfiche succesvol is toegevoegd. De gebruiker klikt op OK en krijgt opnieuw een blanco versie van een wijnfiche om een nieuwe wijn toe te voegen.
40
41
6.1.6 WIJNFICHE LIJST Nu de gebruiker een of meerdere wijnfiches heeft kan hij een lijst opvragen van al zijn wijnfiches. Standaard ziet hij tot en met 10 wijnfiches. Als de gebruiker klikt op de naam van de wijn komt hij terecht op de uitgebreide wijnfiche waar hij de gegevens kan opzoeken en wijzigen. Sommige wijnfiches in de lijst zullen naast hun naam een icoontje van een wijnfles en een wijnglas hebben. Dit wilt zeggen dat er van deze wijnfiche een degustatiefiche bestaat. Als de gebruiker klikt op dat icoontje wordt hij meteen doorgestuurd naar de degustatiefiche. Onderaan staat het aantal pagina’s. Per tien wijnfiches wordt er een nieuw paginanummer getoond. Naast de pagina nummers zijn er ook de knoppen “volgende”, “vorige”, “>>” en “<<”. De “volgende” en “vorige” schuiven de pagina met eentje op. De knoppen “<<” en “>>” schuiven de pagina met vijf op. Deze laatste knoppen zal u enkel zien als er meer dan vijf pagina’s zijn. De eerste knoppen zal u zien vanaf dat er meer dan één pagina is. De gebruiker kan ook meteen op de paginanummer klikken om naar deze pagina te gaan. Onder de paginanummers krijgt u de mogelijkheid om uw lijst te sorteren volgens een eigenschap van uw wijn. Zo kan u sorteren op naam, land, prijs, dronk of wijnsoort. In de lijst zijn er titels geplaatst naargelang uw sorteerkeuze. In de figuur ziet u dat de gebruiker gekozen heeft om zijn lijst volgens land te sorteren. Bovenaan ziet u “onbekend land” dit zijn alle wijnfiches waar de gebruiker geen land voor heeft ingevuld. Naast de naam van het land wordt bovendien het aantal meegegeven van dat land. Wanneer de gebruiker een tweede keer klikt bij het sorteren op, wordt de lijst omgekeerd gesorteerd.
6.1.7 OVERZICHT Als de gebruiker niet met pagina’s wilt werken, maar liever een lange lijst met al zijn wijnfiches ziet kan hij kiezen voor een overzicht. In dit overzicht worden alle wijnfiches in een tabel onder elkaar weergegeven. Bovenaan krijgt u het totaal aantal wijnfiches in uw bezit. In de kolommen vindt u de belangrijkste eigenschappen per wijnfiche terug namelijk: naam, jaar, dronk, aantal en soort. Wanneer u klikt op de naam van een kolom wordt de lijst opnieuw getoond, maar deze keer gesorteerd op de kolom die u aanklikte. Wanneer u nog een keer op deze kolom klikt wordt ze omgekeerd gesorteerd. Wanneer u sorteert op naam krijgt u een extra mogelijkheid om snel te navigeren naar de wijnfiches die u wenst. Bovenaan ziet u alle letters van het alfabet. Wanneer u klikt op een van deze letters zal uw cursor verplaatst worden naar de eerste wijnfiche waar de naam met uw gekozen letter begint. Ook hier wordt u naar de wijnfiche gebracht wanneer u op de naam van een wijn klikt.
42
6.1.8 ZOEKEN Wanneer u op zoek bent naar 1 specifieke wijn is het niet nodig om heel de lijst te overlopen tot u uw wijn gevonden heeft. Wanneer u de zoekfunctie gebruikt kan u met een gedeelte van de naam al aan de slag. Bij elke letter die u typt gaat de functie opzoek naar nieuwe resultaten die aan uw woord voldoen, bovenaan ziet het het aantal gevonden resultaten. Het principe is hetzelfde als die van google suggest. Bovendien kan u ook zoeken op jaar. Wanneer u klikt op de naam wordt u naar de wijnfiche van de gekozen naam gebracht.
43
6.1.9 DEGUSTATIEFICHE Onderaan een wijnfiche staat de knop om een nieuwe degustatiefiche te maken. Elke wijnfiche kan maximum 1 degustatiefiche hebben, maar je kan een bestaande degustatiefiche wel wijzigen. Bij het maken van een nieuwe degustatiefiche zal u merken dat er reeds een aantal velden zijn ingevuld, als naam voor het degustatieonderwerp zal de streek van de wijn ingevuld zijn. Als er geen streek van de wijn bekend is de regio van de wijn ingevuld worden. En als ook de regio van de wijn niet bekend is zal de naam van de betreffende wijn overnemen. In het veld proeverspanel ziet u automatisch uw naam ingevuld staan, dit is immers de naam van de gebruiker die ingelogd is. Deze velden kan u naar wens wijzigen. Aan de hand van radiobuttons kan u onder elke rubriek uw bevindingen ingeven. Bij de rubriek geur zal u bij bepaalde subrubrieken checkboxes zien in de plaats van radiobuttons. Dit maakt het mogelijk om verschillende opties aan te vinken of enkel een subrubriek zonder opties. Standaard zal u geen opties zien voor de subrubriek classificatie. Pas wanneer u een subrubriek aanvinkt zullen de opties tevoorschijn komen. Wanneer u een subrubriek uitvinkt zullen deze opties opnieuw verdwijnen. Wanneer de gebruiker tevreden is kan hij deze degustatiefiche opslaan. Wanneer er geen validatiefouten zich hebben voorgedaan zal de gebruiker teruggebracht worden naar de wijnfiche waarvan hij de degustatiefiche zonet heeft ingevuld. (Zie figuur volgende pagina)
44
45
6.1.10 PRINTVRIENDELIJKE VERSIE Om het de gebruiker eenvoudiger te maken kan u kiezen om een printvriendelijke versie van zowel uw wijnfiche als uw degustatiefiche te bekijken. Deze pagina bevat alle gegevens van de desbetreffende fiche zonder extra knoppen en zonder invulvelden. Het enige dat men hier kan doen is de informatie bekijken en afdrukken. Men kan deze pagina via de browser afdrukken of via de knop onderaan. Met deze knop wordt automatisch de wizard van uw printer opgestart.
6.2 DE ADMINISTRATOR 6.2.1 INLOGGEN Een administrator maakt gebruik van hetzelfde login scherm. De administrator geeft net als een gewone gebruiker zijn username en password in. Bij het controleren van de credentials wordt er gezien dat het om een administrator gaat en wordt de gebruiker doorgestuurd naar het admin hoofdmenu in de plaats van een gebruikershoofdmenu.
46
6.2.2 ADMINISTRATOR HOOFDMENU Wanneer u ingelogd bent als een administrator krijgt u een geheel ander menu dan wanneer u ingelogd zou zijn als een gewone gebruiker. Hier kan u de gebruikers beheren die zich hebben geregistreerd om gebruik te maken van de applicatie of om zelf een gebruiker toe te voegen.
6.2.3 NIEUWE GEBRUIKER De administrator kan zelf een nieuwe gebruiker maken. Dit veld lijkt sterk op het “profiel wijzigen” van een gewone gebruiker. Een administrator kan echter extra eigenschappen invullen. Zo kan hij kiezen om de gebruiker een admin te maken. Wanneer hij voor deze optie kiest moet het volgende veldje “actief” niet worden ingevuld. Admins zijn immers altijd actief. Wanneer er niet wordt gekozen om van de nieuwe gebruiker een admin te maken moet er echter wel nog gekozen worden om de gebruiker al dan niet actief te maken. Als er gekozen wordt om die meteen actief te maken komt er een nieuw tekstveld tevoorschijn. In dit tekstveld moet een datum worden ingevuld tot wanneer de nieuwe gebruiker actief is.
47
6.2.4 GEBRUIKERSLIJST Bovenaan ziet u de eigenschap waarop men de lijst sorteert en het aantal gebruikers ernaast tussen haakjes. Bij de tussentitels staat er ook steeds een aantal. Per pagina ziet u maximum 10 gebruikers. Als er meer dan 10 gebruikers bestaan worden er extra pagina’s gemaakt die u onderaan kan aanklikken om zo tussen de pagina’s te navigeren. Als u liever op een andere eigenschap sorteert kan u op de eigenschap klikken. Om omgekeerd te sorteren klikt u dezelfde eigenschap nog een keer aan. Wanneer u een naam aanklikt wordt u naar het profiel van deze gebruiker gebracht.
48
6.2.5 GEBRUIKER PROFIEL Hier ziet u het profiel van de gebruiker die u heeft aangeklikt. Hier kan u wijzigingen aanbrengen of de gebruiker verwijderen. U kan ook zijn wijnfiches bekijken. Wanneer u op “gebruikermenu” klikt wordt u naar het hoofdmenu van deze gebruiker gebracht. Het is net zoals wanneer u zopas heeft ingelogd met de gebruiker die u heeft aangeklikt. Vervolgens kan de administrator alles doen dat de gebruiker zou kunnen doen met de uitzondering om terug te keren naar het administrator hoofdmenu.
6.2.6 GEBRUIKER ZOEKEN Met de zoekfunctie kan u een gebruiker opzoeken. Een gedeelte van de naam zal al een resultaat geven met alle namen waar dit gedeelte in voorkomt. Wanneer u verder typt in het zoekveld zullen uw gevonden resultaten zich uitfilteren tot de gebruiker die u zoekt. Wanneer u op de naam klikt komt u weer bij het profiel van deze gebruiker.
49
7. KRITISCHE REFLECTIE Tijdens mijn opleiding op de hogeschool ben ik mij meer en meer gaan thuisvullen in de .NET omgeving. Voorafgaand aan de stage mochten we (de studenten) 3 bedrijven opgeven waar we graag stage zouden lopen. Van elk bedrijf was er een korte beschrijving van wat de opdracht zou zijn en omdat ik zeker een goede stage wou lopen had ik 3 bedrijven opgegeven waar er C# en ASP in de omschrijving stond. Tijdens een eerste voorafgaand bezoek aan de stageplaats Webdoos werd het meteen duidelijk dat er zich een fout had gedaan op de omschrijving van het bedrijf. In de plaats van C# zou de opdracht in PHP moeten zijn. PHP hebben we op school in het tweede semester gezien, dat wilt zeggen twee jaar geleden. Sindsdien heb ik niets meer in PHP gemaakt en zelfs toen was ik er geen kei in. Uiteindelijk hebben mijn stagementors en stagebegeleidster mij toch kunnen overtuigen om daar aan de slag te gaan. Bij de aanvang van mijn stage zag ik het echter niet goed zitten om in PHP te programmeren. Tijdens de vakantie ervoor heb ik PHP grondig zitten studeren, maar ik twijfelde sterk als ik zou kunnen toepassen wat ik geleerd had. Op de stage hebben de stagementors mij daar goed opgevangen zodat ik mij rap op mijn gemak begon te voelen. De analyse van het project schoot rap op en al na enkele dagen was ik klaar om te beginnen met programmeren. Omdat PHP nieuw was ben ik al zoekend aan het werk gegaan. Ik was verbaasd hoe natuurlijk PHP aanvoelde en hoe vlot ik opschoot in het project. Bij elk obstakel dat ik tegenkwam vond ik rap een oplossing. Ik heb vooral geprobeerd om zelfstandig te werken. Zo heb ik veel zitten opzoeken op het internet en mocht ik ook de code bekijken van andere websites die bij Webdoos gemaakt zijn. Als ik dan toch ergens vast zat met een probleem waren de stagementors op elk moment bereid mij met deskundige hulp bij te staan. Voor mij was het een groot voordeel dat ik een nieuw project moest maken. Het gaf me de mogelijkheid om alles stapje bij stapje te ontdekken. Moest het een bestaand project zijn dat ik moest bewerken zou ik in de problemen gekomen zijn om alle bestaande code te begrijpen. Het programmeren met AJAX was de grootste uitdaging voor mij, maar wel een leuke uitdaging. AJAX ziet er naar uit een veel gebruikte techniek te worden bij de meest moderne webapplicaties. Het zou dan ook een grote waarde brengen aan mijn applicatie. AJAX is echter net als PHP iets dat we in de lessen wel gezien hebben, maar niet uitgebreid. Zelf heb ik voor de stage AJAX nog meer één keer gebruikt in een integratieproject. Van een kennis heb ik echter geleerd over een library genaamd Prototype. Online vond ik hier niet veel documentatie over, maar de documentatie die er wel was volstond. Zoals uitgelegd in mijn eindwerk maakte dit het coderen eenvoudiger. Mijn grootste probleem was niet het coderen, maar de utf-8 encoding. Een klein probleem zou je denken, maar eentje die me veel tijd gekost heeft. Utf-8 encoding heb je nodig om speciale characters juist af te beelden. Vaak werden er namen van regio’s echter verkeerd afgebeeld en dan is het zoeken. Als je op google zoekt naar een oplossing omtrent utf-8 encoding krijg je letterlijk duizenden pagina’s met nog eens allemaal verschillende oplossingen. Het probleem is dat er zoveel instellingen zijn die je niet over het hoofd mag zien. Zo kan je de encoding meegeven in de browser. Als dit niet werkt zijn er dan nog verschillende opties die je op de server kan instellen. Als dit niet werkt zijn er dan nog verschillende opties die je in je databank kan instellen en nog eens instelling die je tijdens je connectie met de databank kan instellen. Om de juiste instelling te vinden die mijn probleem oplost was ik wel eventjes zoet. 50
Gebruiksvriendelijkheid bleek een van mijn minder sterke punten te zijn. Vooral de navigatie tussen pagina’s bleek niet duidelijk te zijn wanneer ik het programma liet testen. Hier heb ik naarmate het programma vorderde meer en meer energie in gestoken. Zelf ben ik tevreden over het resultaat dat ik heb kunnen leveren. Moest ik meer tijd gehad hebben zou het wel beter geweest zijn. Zo vind ik het een groot nadeel dat ik niet object georiënteerd gewerkt heb. Tijdens mijn opleiding hebben we immers niets anders gezien dan objectgeoriënteerd programmeren. Er zou zo heel wat code efficiënter en overzichtelijker kunnen geschreven worden. Moest ik het project opnieuw moeten maken zou ik met mijn vergaarde kennis van PHP nu wel een poging doen om object georiënteerd te werken. Ik heb een goede stage achter de rug, waar ik veel bijgeleerd heb. Het feit dat ik PHP niet kende is achteraf een pluspunt gebleken. Zo heb ik een nieuwe taal onder de knie.
51
8. CONCLUSIE In dit eindwerk werd het verloop van mijn stage bij Webdoos uitvoerig onderzocht. Als eerste hadden we de opdracht. Op gebied van informatica interesseer ik mij het meest in webdevelopment. Ik was dus blij te horen dat ik een webapplicatie zou mogen ontwikkelen. Iets dat je graag doet doe je nu eenmaal beter. De grote van de opdracht bleek van een goede omvang te zijn. Zo heb ik tijdens de stage op geen enkel moment zonder werk gezeten tot en met de laatste dag, maar ben ik wel geraakt waar ik wou komen. Over het resultaat van de analyse. Het project vereiste geen erg grote databank en de tabellen hebben onderling eenvoudige relaties. Een databankmodel volstond om de databank te maken zonder fouten. De functionele eisen waren een handige lijst die ik als checklist kon hanteren. Wanneer een functionele eis afgewerkt was kon ik overgaan naar de volgende. Op het einde van de lijst was er een basis van het programma ontstaan. Deze moest dan nog verder uitgebreid worden met toegoevoegde functionaliteiten en gebruiksvriendeiljkheid. Van de programmatie kunnen we besluiten dat er uitvoerig onderzoek verricht is naar het maken van een veilige en dynamische website. De gebruiker kan zijn wijnen invoeren en achteraf bekijken. Hij kan ze wijzigen en opzoeken en meer. Uiteindelijk zijn alle doelstellingen bereikt en ben ik verder geraakt dan ik oorspronkelijk verwacht had en heb ik een degelijk product kunnen afleveren. Het product is klaar om door de eindgebruikers getest te worden.
52
9. GOEDKEURING EINDWERK
Voor akkoord verklaard
Kristien Roels Stagebegeleidster
Stijn Blomme Stagementor
datum:
53
