Universiteit Gent Faculteit Ingenieurwetenschappen Academiejaar 2006-2007

Ontwikkelen van website voor de verhuur van jeugdbewegingslokalen

Jeroen De Vuyst Tine Van Raemdonck

Promotor: Prof. P. De Neve Thesisbegeleider: Lic. Koen De Wolf

Scriptie ingediend tot het behalen van de graad van Master Toegepaste Informatica

II

Universiteit Gent Faculteit Ingenieurwetenschappen Academiejaar 2006-2007

Ontwikkelen van website voor de verhuur van jeugdbewegingslokalen

Jeroen De Vuyst Tine Van Raemdonck

Promotor: Prof. P. De Neve Thesisbegeleider: Lic. Koen De Wolf

Scriptie ingediend tot het behalen van de graad van Master Toegepaste Informatica III

Voorwoord Graag willen wij enkele mensen bedanken die ons geholpen en gesteund hebben bij het maken van onze scriptie. Bedankt, Prof P. De Neve, voor het promotorschap van deze scriptie, K. De Wolf voor de begeleiding, goede raad en antwoorden op onze vragen, Ward Vermaere voor het gratis ter beschikking stellen van webspace, Al onze vrienden, zowel binnen en als buiten de universiteit, voor de goede tips, onze medestudenten, voor het toffe jaar, zowel op school als daarbuiten, en tot slot onze ouders, voor de kans die ze ons dit jaar weer gegeven hebben.

"De auteur(s) geeft (geven) de toelating deze scriptie voor consultatie beschikbaar te stellen en delen van de scriptie te kopiëren voor persoonlijk gebruik. Elk ander gebruik valt onder de beperkingen van het auteursrecht, in het bijzonder met betrekking tot de verplichting de bron uitdrukkelijk te vermelden bij het aanhalen van resultaten uit deze scriptie."

IV

Overzicht Ontwikkelen van website voor de verhuur van jeugdbewegingslokalen door Jeroen De Vuyst, Tine Van Raemdonck

Scriptie ingediend tot het behalen van de academische graad van Master Toegepaste Informatica Academiejaar 2006-2007

Promotor: Prof. P. De Neve Begeleider: Lic. K. De Wolf Faculteit Ingenieurwetenschappen Universiteit Gent Vakgroep Elektronica en informatiesystemen Voorzitter vakgroep: Jan Van Campenhout

Samenvatting:

Het doel van deze scriptie is de ontwikkeling van een website voor het verhuur van jeugdbewegingslokalen. De website is bestemd zowel voor de groep die een lokaal wil verhuren als voor de groep die een lokaal zoekt. Voor de ontwikkeling van de website werd gebruik gemaakt van de volgende scriptalen en scripting technologieën: PHP, JavaScript, HTML en CSS. De belangrijkste software die werd gebruikt is Wampserver, phpMyAdmin, Apache en MySQL. In de scriptie wordt de creatie van de databank en de ontwikkeling van de website besproken. De website is voorzien van een inlogsysteem, een zoeksysteem, weergave van de lokalen, berichtenbord,…

Trefwoorden: website, databank

V

Inhoudstafel 1.

Inleiding........................................................................................................................................ 1

2.

Probleemstelling ........................................................................................................................... 2

3.

Doelstelling................................................................................................................................... 3

4.

Technologieën voor het ontwerp van een webapplicatie.............................................................. 4

5.

4.1.

PHP....................................................................................................................................... 4

4.2.

JavaScript ............................................................................................................................. 6

4.3.

HTML................................................................................................................................... 6

4.4.

CSS ....................................................................................................................................... 7

Gekozen software ......................................................................................................................... 8 5.1.

Wampserver.......................................................................................................................... 8

5.2.

phpMyAdmin ....................................................................................................................... 8

5.3.

Apache .................................................................................................................................. 9

5.4.

MySQL ................................................................................................................................. 9

5.5.

Dreamweaver...................................................................................................................... 10

5.6.

Datanamic: Dezign for databanks ...................................................................................... 11

5.7.

Mapedit............................................................................................................................... 11

5.8.

Adobe Photoshop................................................................................................................ 12

5.9.

Lynda .................................................................................................................................. 12

5.10.

Map24............................................................................................................................. 12

6.

Creatie van de databank.............................................................................................................. 13

7.

Opbouw van de webapplicatie.................................................................................................... 16

8.

7.1.

Eerste type gebruiker: GAST ............................................................................................. 16

7.2.

Tweede type gebruiker: ZOEKER ..................................................................................... 17

7.3.

Derde type gebruiker: BEHEERDER................................................................................. 18

Ontwikkeling van de webapplicatie ........................................................................................... 20 8.1.

Framework en inlogsysteem............................................................................................... 20

8.2.

Beveiliging ......................................................................................................................... 22

8.3.

Validatie van formulieren................................................................................................... 24

8.4.

Berichtenbord en feedback ................................................................................................. 25

8.5.

Weergave/beheer lokaal ..................................................................................................... 26 VI

8.5.1.

Foto’s uploaden .......................................................................................................... 26

8.5.2.

Kalender ..................................................................................................................... 28

8.5.3.

Printpagina.................................................................................................................. 29

8.6.

Zoeken ................................................................................................................................ 29

8.7.

Lay-out ............................................................................................................................... 30

9.

Opmerkingen .............................................................................................................................. 32

10.

Mogelijke uitbreidingen ......................................................................................................... 34

11.

Besluit..................................................................................................................................... 36

12.

Bibliografie............................................................................................................................. 37

VII

Lijst van figuren Figuur 1: Databankschema (Datanamic, DeZign for Databanks v4.2.0) ........................................... 14 Figuur 2: Eerste type gebruiker: GAST.............................................................................................. 16 Figuur 3: Tweede type gebruiker: ZOEKER...................................................................................... 17 Figuur 4: Derde type gebruiker: BEHEERDER................................................................................. 18 Figuur 5: Screenshot (lokaal) resolutie:1280x800 ............................................................................. 31 Figuur 6: Screenshot (berichtenbord) resolutie: 1024x768 ................................................................ 31

VIII

1. Inleiding Het doel van deze scriptie is de ontwikkeling van een website voor het verhuur van jeugdbewegingslokalen. De website is bestemd zowel voor de groep die een lokaal wil verhuren als voor de groep die een lokaal zoekt. We willen ervoor zorgen dat dit alles op een zo eenvoudig en toegankelijk mogelijke manier kan gebeuren. In het eerste deel van deze scriptie leggen we uit welke scripttalen en software we gebruikt hebben bij de ontwikkeling van onze webapplicatie. We beginnen met een uitleg over de gebruikte scripttalen. We bespreken de volgende technologieën voor het ontwerpen van een webapplicatie: PHP: Hypertext Preprocessor, JavaScript, HyperText Markup Language (HTML) en Cascading Style Sheets (CSS). Vervolgens gaan we in op de gekozen software. De belangrijkste software is Wampserver, phpMyAdmin, Apache en MySQL. Verder wordt Dreamweaver besproken, Dezign voor databanks, Mapedit, Adobe photoshop, de tutorial Lynda en de routeplanner Map24. In het tweede deel van onze scriptie bespreken we hoe we de ontwikkeling van de webapplicatie hebben aangepakt. We leggen eerst uit hoe we te werk zijn gegaan voor de creatie van de databank. Vervolgens wordt de opbouw van de webapplicatie overlopen aan de hand van de drie types gebruikers: gast, zoeker en beheerder. Bij de bespreking van de ontwikkeling van de webapplicatie worden volgende elementen verder uitgediept: framework en inlogsysteem, beveiliging, validatie van formulieren, berichtenbord en feedback, weergave/beheer lokaal (foto’s uploaden, kalender, printpagina), zoeken en lay-out. We eindigen deze scriptie met opmerkingen en mogelijke uitbreidingen van onze webapplicatie. De webapplicatie is tijdelijk te bekijken op http://jl.osn.be.

1

2. Probleemstelling Voor de jeugdbewegingen in Vlaanderen is het een jaarlijkse traditie om op weekend en kamp te gaan samen met een specifieke leeftijdsgroep. Veel jeugdbewegingsgroepen verhuren hun lokalen als weekendplaats aan andere groepen. Op deze manier verdient de groep enerzijds een centje bij, voor bijvoorbeeld het onderhoud van hun lokalen, en anderzijds heeft de andere groep een goedkope en geschikte plaats om op weekend te gaan met hun leden. Het is voor een groep vaak moeilijk om een goede locatie te vinden voor weekends en kampen. Het zoeken van een weekendplaats gebeurt vaak heel omslachtig. Telefoonnummers of adressen van de lokaalverantwoordelijken worden via via verkregen of via de gemeentelijke website kan men de website zoeken van de plaatselijke jeugdgroepen en met een beetje geluk kan men daar meer informatie vinden over het verhuur van hun lokalen. Er zijn ook een aantal organisaties die deze informatie online aanbieden. Een voorbeeld hiervan is de website van de vzw Centrum voor Jeugdtoerisme, www.cjt.be. Op deze website staan echter vooral duurdere lokalen en lokalen voor grote groepen. Men vindt er bijna geen lokalen van jeugdbewegingen terug. Het is ook redelijk omslachtig om een lokaal te verhuren via deze website. Om een lokaal op de website van het CJT te mogen plaatsen moet je voldoen aan verschillende voorwaarden van het CJT en de verhuur van lokalen wordt meestal door het CJT zelf geregeld. Het is dus de bedoeling om een toegankelijke website te maken om alle informatie over het verhuur van lokalen van jeugdbewegingen te bundelen. Op deze website is er enerzijds de mogelijkheid voor groepen om hun lokaal online te plaatsen voor verhuur. De lokaalverantwoordelijke krijgt de mogelijkheid om zijn lokalen op een eenvoudige manier in te geven in de databank. Anderzijds wordt er een eenvoudige zoekfunctie voorzien om een weekendplaats te zoeken.

2

3. Doelstelling De website is bestemd zowel voor de groep die een lokaal wil verhuren als voor de groep die een lokaal zoekt. We willen ervoor zorgen dat dit alles op een zo eenvoudig en toegankelijk mogelijke manier kan gebeuren. Voor de verhuurder: Het is de bedoeling om een webapplicatie te ontwikkelen waar de verantwoordelijke van een jeugdlokaal zich kan inschrijven en vervolgens een volledige pagina ter beschikking krijgt om zijn/haar lokaal online te zetten. De verhuurders moet geregistreerd zijn om een lokaal te kunnen toevoegen. Op de registratiepagina kunnen ze alle details van hun lokaal invullen, bijvoorbeeld de coördinaten, minimum en maximum aantal personen, de prijs,… Hiervoor wordt gebruik gemaakt van een vooraf opgesteld formulier. Verder kunnen ze ook een foto toevoegen indien ze dit wensen. Er is ook de mogelijkheid om een online kalender toe te voegen die volledig onder de controle van de verhuurder staat. Deze kan men online updaten zodat de huurders weten welke periodes reeds geboekt zijn. Op deze manier wordt er een volledige databank samengesteld van alle lokalen. Voor de zoeker: Door een zoekfunctie kan er gezocht worden naar een geschikt lokaal. De hier boven vermelde databank wordt opgevraagd en aan de hand van bepaalde zoekcriteria kunnen de juiste lokalen gevonden worden. De hoofdcriteria waarop gezocht kan worden zijn: provincie, gemeente, postcode en aantal personen. Hierna moet de zoeker zelf contact opnemen met de verhuurder voor reservatie van de lokalen. Er is ook de mogelijkheid voor de huurder om na het verblijf commentaar te geven op een locatie. De huurder moet zich hiervoor wel eerst registeren.

3

4. Technologieën voor het ontwerp van een webapplicatie We hebben gebruik gemaakt van technologieën voor de creatie van onze webapplicatie: PHP, JavaScript, HTML en CSS. Op de eerste plaats willen we PHP bespreken. PHP is een server-sidetechnologie en is bedoeld om op een webservers dynamische webapplicatie’s te creëren. In tegenstelling tot PHP is Javascript een vorm van client-side scripting, wat toelaat om interactiviteit toe te voegen aan een webpagina. HTML is de taal waarin webpagina’s zijn opgebouwd. Cascading Style Sheets tenslotte is een taal waarmee een auteur kan specificeren hoe HTML-elementen moeten worden opgemaakt.

4.1. PHP Wij hebben als scripttaal gekozen voor PHP. Een scripttaal is een programmeertaal die geschikt is voor het schrijven van scripts. Scripts zijn kleine programmaatjes die gebruikt worden om veel voorkomende taken te automatiseren, of om een grote maar eenmalige taak uit te voeren. Meestal hebben deze taken te maken met het verwerken van data. Er zijn verschillende scripttalen voor het web ontwikkeld. Voorbeelden hiervan zijn JavaScript, VBscript, ASP (Active Server Pages) en PHP. Allen zorgen ze voor dynamiek en interactie op websites. Oorspronkelijk stond PHP voor “Personal Home Page”. Sinds PHP 3.0 is de betekenis “PHP: Hypertext Preprocessor” geworden. Deze naam wijst op het feit dat de taal meestal gebruikt wordt voor informatieverwerking tot hypertext. PHP is in 1994 ontworpen door Rasmus Lerdorf, een senior sofware engineer bij IBM. De eerste publieke versie werd uitgegeven in 1995 en de meest recente stabiele versie is 5.2.1 (8 april 2006). Ook al is PHP 5 al meer dan 3 jaar geleden uitgekomen, toch gebruiken de meeste webservers nog steeds PHP 4. Ook wij kozen ervoor om te werken met PHP 4 [Wikipedia, 2007]. PHP is bedoeld om op webservers dynamische webapplicatie’s te creëren. PHP is een server-sidetechnologie. Dit betekent dat alles wat PHP doet op de webserver plaatsvindt en niet op de client, de computer van de persoon die de website bekijkt. Een server is een speciale computer waarop de pagina’s staan die je ziet wanneer je een webadres bezoekt met de browser (ULLMAN, 2004). PHP is een HTML ingesloten scripttaal. Dit wil zeggen dat we PHP-instructies binnen de HTMLcode kunnen schrijven. PHP-documenten hebben meestal de extensie .php. PHP wordt zeer veel 4

gebruikt in combinatie met Linux, Apache en MySQL. Dit wordt afgekort tot LAMP. Deze architectuur is zeer succesvol op het internet. Wij gebruiken echter Windows in plaats van Linux. WAMP is voor hiervoor de geschikte variant [Wikipedia, 2007]. Tijdens de lessen internettoepassingen hebben we leren werken met de scripttaal ASP. In principe leek het ons een logische keuze om voor deze scripttaal te kiezen maar na enig opzoekwerk leek PHP een betere keuze. Een belangrijk voordeel van PHP op ASP is dat PHP open source is en ASP niet, je kan eenvoudig een PHP webserver installeren, maar bij ASP loopt dit niet zo vlot (zeker niet bij XP Home). Verder heeft PHP de volgende eigenschappen: Ten opzichte van HTML is het voordeel van PHP dat PHP ruimte laat voor flexibiliteit of reacties. Met HTML kan je bijvoorbeeld geen e-mail verzenden vanaf webapplicatie’s, geen gastenboek opstellen,… PHP is speciaal geschreven voor het maken van dynamische webapplicatie’s. Het is belangrijk dat deze elementen aanwezig zijn op onze website (ULLMAN, 2004). PHP is eenvoudig om aan te leren en te gebruiken. PHP hoef je niet in de winkel te kopen. Op elke computer met internetverbinding kan je de laatste versie van PHP downloaden en met elke (gratis) editor kan je PHP-pagina’s schrijven. Op de officiële PHP-website www.php.net vind je alle informatie die je nodig hebt over PHP (KASSENAAR, 2002). Verder is PHP cross-platform, wat inhoudt dat het kan worden gebruikt op machines waarop Unix, Windows, Macintosh en andere besturingssystemen draaien (ULLMAN, 2004). Het werkt ook op de meest gangbare webservers zoals Apache en Microsoft Internet Information Server (IIS). Wat verder nog belangrijk is voor onze website is dat PHP diverse databanken ondersteunt, zoals bijvoorbeeld MySQL, waar wij mee werken. MySQL wordt meestal gebruikt in combinatie met PHP (Wikipedia, 2007). In PHP is ondersteuning voor de MySQL-databankserver ingebouwd, zodat je de specifieke MySQL-functies van PHP kan benutten (ULLMAN, 2004). In tegenstelling tot server-side scripting is het ook mogelijk om een script uit te voeren aan de clientzijde. Een nadeel hiervan is dat dergelijke scripts slechts kunnen uitgevoerd worden als de browser van de eindgebruiker daartoe in staat is. Dit probleem stelt zich niet bij het gebruik van scripts aan de serverzijde. Bij het gebruik van scripts aan de serverzijde wordt de broncode niet naar de clients gestuurd. Het voordeel hiervan is dat het netwerk minder belast wordt en dat de broncode beter beschermd wordt. Anderzijds is het niet altijd zinvol om een omweg te maken via servers, bijvoorbeeld wanneer een script alleen maar een eenvoudige berekening realiseert die uitsluitend 5

gebruik maakt van data die ingevoerd werd door de eindgebruiker. Dan laat men het script beter uitvoeren aan de clientzijde. Wij hebben gekozen voor een combinatie van PHP en JavaScript, een combinatie van een script aan de serverzijde en een script aan de clientzijde (De Neve, 2006).

4.2. JavaScript “JavaScript is een scripttaal die toelaat om interactiviteit toe te voegen aan een webapplicatie.. De naamsverandering van LiveScript naar JavaScript gebeurde ongeveer gelijktijdig met de tijd dat Netscape Java-technologie in zijn browser begon in te bouwen. Deze naamskeuze heeft sindsdien al vaak tot verwarring geleid. Er is echter geen echte relatie tussen Java en JavaScript. De gelijkenissen betreffen vooral de syntax. De semantiek van beide talen is echter sterk verschillend. Aangezien JavaScript een compatibiliteit heeft met de meeste bestaande browsers, maken de meeste webontwikkelaars gebruik van JavaScript in het geval van client-side scripting [De Neve, 2006, p103-104]”. Dit is ook de reden waarom wij ervoor gekozen hebben om te werken met JavaScript. Wij hebben JavaScript gebruikt voor de validatie van gebruikersinvoer en weergave van foutmeldingen, wanneer de gebruiker incorrecte data invoert. Voor het inlog- en registratiesysteem is het nodig om te controleren of de data correct is ingevoerd in de invulvelden. Ook bij het invoeren van de gegevens van de lokalen is er een controle op de ingevoerde data. Dit gebeurt via JavaScript aan de clientzijde. Op deze manier wordt de server niet nodeloos belast.

4.3. HTML Bij de bespreking van PHP wordt vermeld dat PHP een HTML ingesloten scripttaal is. We kunnen PHP dus binnen de HTML-code schrijven. Dit hebben wij ook gedaan bij de opbouw van onze website. “HTML is een mark-up taal, ook wel opmaaktaal genoemd, die ontworpen werd voor de creatie van webapplicatie’s en andere informatie die zichtbaar is in een browser. Origineel werd HTML ontwikkeld als een eenvoudige toepassing van SGML, een mark-up taal die vooral gebruikt wordt in organisaties met complexe publishing vereisten. Binnen HTML wordt gebruikgemaakt van zogenaamde tags, opmaakcodes die beginnen met een < en eindigen met een >. Voorbeelden van opmaakcodes zijn (begin van een HTML-pagina), <STRONG> (vetgedrukte letters). Elk van deze tags heeft een corresponderende afsluitende tag, die begint met een /, bijvoorbeeld [De Neve, 2006, p98].”

6

4.4. CSS Via Cascading Style Sheets kan een auteur specificeren hoe HTML-elementen (bijvoorbeeld

hoofdingen) moeten worden opgemaakt. Je kunt hiermee aangeven hoe je in HTML gestructureerde informatie gepresenteerd wil hebben. Deze code kan op één pagina worden opgenomen of ondergebracht worden in een apart bestand. De oorspronkelijke bedoeling van HTML was om enkel de logische structuur te beschrijven. De opmaak zou volledig worden overgelaten aan de browser, rekening houdend met de beschikbare visualisatiemogelijkheden. Uiteindelijk kreeg de auteur toch enige controle over de fysische structuur, zoals bijvoorbeeld de achtergrondkleuren, fysische commando’s, zoals tekst schuin zetten,… Uiteindelijk heeft men de “Cascading Style Sheets’ ingevoerd om opmaak en inhoud beter te scheiden. Men kan bijvoorbeeld een aantal stijlen benoemen, zoals bijvoorbeeld “titel”. In het HTML-bestand voegt men aan de tags attributen toe die aangeven in welke stijl ze moeten worden opgemaakt (Philips, 2006). Een stijl bestaat uit een aantal aspecten zoals lettertype en voor- en achtergrondkleur. Ook breedte van kantlijnen, de horizontale en verticale positie, de zichtbaarheid, de transparantie en vele andere aspecten kunnen in een stylesheet worden aangegeven (Wikipedia, 2007). “Cascading” slaat op het feit dat de definities uit verschillende bestanden gelezen kunnen worden bijvoorbeeld uit een bestand met standaardstijlen van de browser. Bij ons wordt de definitie gelezen uit een bestand met stijlen die door de auteur, wij dus, zijn gedefinieerd. De definitie kan ook gelezen worden uit een bestand met door de gebruiker gedefinieerde stijlen. De gebruiker, of de bezoeker van de website, kan dan zelf bepalen in welke layout hij de webapplicatie wil bekijken. Er worden dan verschillende alternatieve layouts aangeboden (Philips, 2007). Wij werken met CSS omdat het aangeraden wordt om in de PHP-bestanden enkel de functionaliteit te plaatsen en de lay-out in een apart bestand te beschrijven. Dit is erg handig als je veel documenten dezelfde opmaak wil geven. Eén keer een Style Sheet maken en die aan alle documenten koppelen is voldoende. Op deze manier kan de lay-out achteraf op een gemakkelijke manier aangepast worden. Style Sheets worden ook steeds beter ondersteund door browsers en zullen langzamerhand de methode worden om HTML documenten op te maken.

7

5. Gekozen software In dit deel bespreken we de gekozen software die we gebruikt hebben bij de creatie van onze webapplicatie. In de eerste plaats bespreken we het softwarepakket Wampserver. Vervolgens hebben we het over phpMyAdmin, dat instaat voor het beheer van de databank. Hierna leggen we Apache en MySQL uit, respectievelijk web- en databankservers. Als teksteditor gebruikten we Dreamweaver. Voor de ontwikkeling van ons databankschema gebruikten we het programma Datanamic: Dezign for databanks. De ontwikkeling van de clientside imagemap gebeurde via Mapedit. Met Adobe Photoshop bewerkten we foto’s en logo’s. Lynda was onze favoriete tutorial. En met de routeplanner Map24 verkregen we een routebeschrijving naar de gekozen weekendplaats.

5.1. Wampserver WAMP is een acroniem voor een combinatie van softwarepakketten waarop een dynamische website kan draaien. Het is een combinatie van Windows (besturingssysteem), Apache (webserver), MySQL (databankserver) en PHP (scripttaal). Het is een opensource-webplatform. De naam WAMP is afkomstig van de afkorting LAMP, een combinatie waarbij als besturingssysteem Linux wordt gebruikt. De LAMP-combinatie wordt wereldwijd meer gebruikt dan de WAMP-combinatie. Een voorbeeld van een pakket is Wampserver, waarvan wij gebruik maken. De Wampserver werd ons voorgesteld in de tutorial Lynda. Het gebruik van de Wampserver is voor ons een belangrijk hulpmiddel om te werken met zowel Apache, MySQL als PHP [Wikipedia, 2007].

5.2. phpMyAdmin Om onze databank te beheren hebben we gebruik gemaakt van phpMyAdmin. PhpMyAdmin is een PHP-programma om MySQL-databanken via het internet te beheren. Het programma kan databanken, tabellen, records toevoegen, verwijderen en mogelijk aanpassen, het kan ook SQLcommando’s aanmaken. Tobias Ratschilles, IT-adviseur en oprichter van het softwarebedrijf Maguma, begon in 1998 met het werken aan een interface voor MySQL in PHP. Toen hij het project opgaf in 2000 wegens een gebrek aan tijd was phpMyAdmin een van de populairste PHP- en MySQL-programma’s, met vele gebruikers. Om het groeiende aantal nieuwe versies te coördineren werd het project geregistreerd in SourceForge door Olivier Müller, Marc Delisle en Loïc Chapeaux, zij namen de ontwikkeling over in 2001 (Wikipedia, 2007).

8

5.3. Apache Wij hebben gewerkt met Apache. Apache is een open source webserver. Een webserver is een computerprogramma dat via een netwerk ontvangen verzoeken volgens het Hypertext Transfer Protocol afhandelt en documenten naar de client stuurt. Een server is in dit geval een computerprogramma dat voor andere programma’s, de clients, een bepaalde taak afhandelt. In het geval van een webserver is de client vaak een webbrowser of een downloadprogramma. Over de oorsprong van de naam Apache zijn verschillende meningen. Soms wordt aangenomen dat de auteur gewoon een originele naam verzonnen had, terwijl anderen van mening zijn dat de naam voortkwam uit “a patchy server”. Oorspronkelijk was Apache het enige open source alternatief voor de Netscape webserver. Sinds de eerste versie is de populariteit blijvend toegenomen. In mei 2005 maakten ongeveer 70% van alle websites gebruik van Apache. Apache wordt gebruikt in combinatie met verschillende scripttalen, databanks, template-talen en programmeertalen voor webapplicaties. Vooral de modulaire architectuur maakt Apache tot een zeer geliefde webserver. In 1999 is de Apache Software Foundation opgericht, die Apache (en ook andere vrije software) onderhoudt en verder ontwikkelt (Wikipedia, 2007).

5.4. MySQL MySQL is een open source relationele databank management systeem (RDBMS), dat gebruik maakt van SQL. Een databankmanagementsysteem is bedoeld voor het beheer van de databanks en schermt daarvoor de gebruikers af van de technische details van hardware en bestandsorganisatie. Alle interactie met een databank gebeurt via DBMS. Als een gebruiker data wil opzoeken, toevoegen, wijzigen of verwijderen, voeren we dit in het DBMS in, dat vervolgens zorgt voor de correcte afhandeling van de gevraagde operaties (De Tré, 2007). In feite is DBMS de software die samenwerkt met de eigenlijke databank. De termen databank en dmbs worden echter steeds vaker door elkaar gebruikt. Een databank is een verzameling van tabellen (tabellen opgemaakt met kolommen en rijen) die informatie bevatten. Databanks worden gemaakt, bijgehouden en gelezen door SQL (Structured Query Language) (ULLMAN, 2004). SQL is de standaardtaal voor het werken met relationele databanks. In zijn huidige versie bestaat SQL uit een kerntaal die wordt aangevuld met verschillende, optionele pakketten. De kerntaal bevat twee subtalen: de datadefinitietaal (Data Definition Language of DDL) die bestaat uit instructies

9

voor fysiek databankontwerp en de datamanipulatietaal (Data Manipulation Language of DML), die bestaat uit instructies voor databankmanipulatie en –doorzoeking. Daarnaast bevat de kerntaal onder meer instructies voor het werken met views, het opzetten van beveiligingsmechanismen en het delen van gegevens. SQL is een beschrijvende taal. In plaats van te specificeren hoe een bepaalde actie moet worden uitgevoerd, beschrijft de taal wat men met een bepaalde actie wenst te bereiken. SQL kan ingebed worden in een bestaande scripttaal, zoals bijvoorbeeld PHP, of programmeertaal. Daarbij worden de SQL-instructies gecodeerd in de script- of programmacode en wordt het mogelijk om met het DBMS te communiceren via speciaal daartoe voorziene variabelen [De Tré, 2007, p185]. De eerste interne versie van MySQL verscheen in 1995. MySQL werd vroeger vaak gebruikt voor toepassingen zoals gastenboeken en fora. Tegenwoordig is het de basis van een breed scala aan internettoepassingen, maar ook stand-alone software. Het MySQL-softwarepakket bestaat onder meer uit een serverprogramma. Verder bestaat het uit een verzameling clientprogramma’s waarmee automatisch of interactief met de server gecommuniceerd kan worden. MySQL is een populair databankmanagamentsysteem dat voor het gestructureerd opslaan van gegevens voor zeer veel toepassingen wordt gebruikt. MySQL wordt gebruikt om data op te slaan. Dit kan tekst zijn, maar ook afbeeldingen. Wij kozen voor MySQL omdat MySQL, evenals PHP, een product is van de open source beweging en het beschikbaar is voor vele platformen. MySQL wordt ook veel gebruikt in combinatie met Apache en PHP [Wikipedia, 2007].

5.5. Dreamweaver Dreamweaver is een softwareprogramma waarmee een webdesigner een website kan maken en onderhouden. Om een goed PHP-script te schrijven is het gemakkelijk om daarvoor de juiste hulpmiddelen te gebruiken. Veel webontwikkelaars maken gebruik van WYSIWYG- (What you see is what you get) editor of een semi-WYSIWYG omgeving, waarin snel gewisseld kan worden van de code naar het uitvoerscherm en terug. Wij hebben gebruik gemaakt van Dreamweaver. Hier kan je met een ‘mixed mode’ werken met boven in het scherm bijvoorbeeld de HTML-code van de pagina en onder in het scherm de visuele weergave. Je kunt dan zelf kiezen of je via dialoogvenster of met de hand code voor tabellen, afbeeldingen of scripts aan de pagina toevoegt (KASSENAAR, 2002). Een mogelijk nadeel van Dreamweaver is dat wanneer er bij het gebruik van de WYSIWYomgeving fouten worden teruggevonden het moeilijk is voor beginnende gebruikers om deze op te 10

lossen. Vaak kunnen ze de achterliggende code nog niet zelf verbeteren en verspillen ze hierdoor onnodig veel tijd. Ook voor ervaren webdesigners kan dit heel vervelend zijn (Wikipedia, 2007). Wij hebben echter geen gebruik gemaakt van de WYSIWYG-editor. We hebben ervoor gekozen om te werken via de code zelf. In principe konden we gebruik maken van gratis software, zoals textpad. Toch we hebben ervoor gekozen om met Dreamweaver te werken. In de tutorial, waar we mee gewerkt hebben, werd dit ons aangeraden. Het is handig om met Dreamweaver te werken omdat er gebruik gemaakt wordt van syntax highlighting. Dreamweaver weet ook welke opties en functies er mogelijk zijn. Bij eventuele fouten is het gemakkelijk om deze op te sporen aan de hand van deze kleuren.

5.6. Datanamic: Dezign for databanks Voor het ontwikkelen van de databank is het belangrijk om eerst een databankschema op te stellen. Later kan dit ontwerp worden geïmplementeerd en omgezet naar de DDL, die kan worden verwerkt door het DBMS, hier MySQL. Voor de ontwikkeling van onze databank hebben we het programma ‘Dezign for Databanks V4’ gebruikt. Dit programma hebben we gevonden op www.datanamic.com. Dezign for Databanks is een hulpmiddel om databanken te creëren. Het programma maakt het mogelijk om op een eenvoudige manier een databankschema op te stellen en hieruit een databank af te leiden. Dezign for databanks gebruikt ‘entity relationship diagrams’ voor het grafische ontwerp en genereert automatisch databanken aan de hand van SQL. Een ‘Entity-Relationship’-model modelleert concepten uit de reële wereld aan de hand van entiteittypes en verwantschappen tussen entiteittypes, die relatietypes worden genoemd (De Tré, 2007). Het databankschema dat we hebben opgesteld, wordt verder in onze scriptie uitgebreid besproken.

5.7. Mapedit Wij hebben het programma Mapedit gebruikt om een client-side image map te maken. Een image map is een plaatje dat bestaat uit meerdere delen die ieder een bepaalde functie uitvoeren wanneer erop geklikt wordt. Zo kunnen de bezoekers worden doorgestuurd naar een bepaalde pagina. Image maps worden dan ook vaak gebruikt op het web. Op onze site kunnen de bezoekers op de homepagina zoeken via een kaartje van Vlaanderen. Wanneer de bezoekers klikken op het kaartje op bepaalde provincie, krijgen ze alle lokalen die zich in deze provincie bevinden. Voor het maken van een client side image map heb je drie zaken nodig, namelijk een programma voor het maken van de

11

map, een HTML editor (bij ons Dreamweaver) en een browser die image maps ondersteunt. De meeste moderne browsers ondersteunen echter image maps. Met het programma Mapedit kan je de map maken. Voordat je MapEdit gebruikt is het het beste om eerst het HTML-bestand aan te maken met daarin de code naar het plaatje waarin je een image map van wilt maken.

5.8. Adobe Photoshop Voor het maken van tekeningen en logo’s voor onze website hebben we gebruik gemaakt van Adobe Photoshop. Dit is een grafisch programma voor het bewerken van foto’s en ander digitaal beeldmateriaal via de computer. Photoshop is ontwikkeld door softwareproducent Adobe. [Wikipedia, 2007].

5.9. Lynda De tutorial Lynda.com-PHP Essential Trainig heeft ons geholpen om te leren werken met PHP en databanken. Het aanbod van Lynda.com is vrij omvangrijk, van digitale fotografie, cold fusion, podcasting, Photoshop CS3, Expression web, Visio, After effect tot zelfs Frontpage en natuurlijk ook PHP. De visual training courses van Lynda.com zijn video tutorials. De trainingen zijn in het Engels, maar het verteltempo is traag en sluit volledig aan bij het programma dat je gebruikt. In de tutorial wordt stap per stap uitgelegd hoe je moet werken. Er wordt verteld welke software je nodig hebt en hoe je die moet installeren, PHP wordt uitgebreid besproken, er wordt uitgelegd hoe je moet werken met formulieren en invulvelden, databanken en MySQL komt aan bod, …

5.10. Map24 Map24 is een online routeplanner. Wanneer een bezoeker een lokaal bekijkt, geeft de pagina een link naar map24 die automatisch het correcte adres zal invoeren. Hiervoor moeten we een account aanmaken bij map24. Je krijgt dan een ID die je in de link moet plaatsen. Telkens wanneer er een adres wordt opgevraagd wordt dit bijgehouden op hun server. Op deze manieren kunnen wij controleren hoeveel keer deze functie gebruikt wordt (http://www.be.map24.com/).

12

6. Creatie van de databank Het is de bedoeling dat verschillende mensen lokalen kunnen beschikbaar stellen op onze website. Om deze te kunnen bijhouden is het dus handig om te werken met een databank. Ons eerste werk was het uitdokteren van een goed databankschema: “Een databankschema bestaat uit een aantal tabeldefinities. Daarbij worden onder meer de kolomdefinities en dus ook het aantal kolommen van elke tabel vastgelegd. Om verwantschappen tussen verschillende rijen uit dezelfde of verschillende tabellen weer te geven, zijn de concepten ‘kandidaatsleutel’ en ‘vreemde sleutel’ ingevoerd [De Tré G, 2007, p.41].” Met de lessen van Prof. De Tré in het achterhoofd begonnen we eraan. Al snel bleek dat dit niet zo eenvoudig was. Na het doornemen van enkele boeken omtrent databanks en MySQL begon ons schema vorm te krijgen (De Tré G., 2007) (Segers S., 2006). We hebben gekozen voor de creatie van een relationele databank: “Volgens dit model worden alle data gestructureerd in tabellen die van een vooraf gedefinieerde vorm zijn. Een tabel wordt hierbij gezien als een voorstellingsvorm van het wiskundige concept relatie. Bij elke kolom van de tabel hoort een naam (die uniek is binnen de tabel) en een datatype. Het geassocieerde datatype legt de toegestane waarden voor de kolom vast [De Tré G, 2007, p.41].” De basis van ons schema bestond uit drie tabellen: ´user´, ´lokaal´ en ´groep´. Deze opsplitsing kwam er door het bekijken van de relaties. De groep is eigenaar van het lokaal, de user is lid van de groep en het lokaal is in beheer van de user. Toen we echter overgingen tot de implementatie van dit schema bleek dit moeilijk realiseerbaar. De tabel ´groep´ werd eigenlijk een ingewikkelde schakel in het proces die weinig zou bijbrengen aan de functionaliteit van onze webapplicatie. Daarom hebben we besloten om deze tabel te integreren in de tabel ´user´. Hierna hebben we verschillende tabellen toegevoegd die we nodig hadden om de functionaliteit van onze webapplicatie te verbeteren. De tabel ´feedback´ is bijvoorbeeld in staat om de feedback, die op een bepaald lokaal gegeven wordt, te registeren zodat deze later kan opgehaald en bewerkt worden. Er zijn ook tabellen aanwezig die ervoor zorgen dat bepaalde informatie niet dubbel in onze databank aanwezig is. De tabel ´beweging´ is bijvoorbeeld een samenvatting van alle jeugdbewegingen, hierdoor kunnen we gemakkelijk een dropdown lijst creëren en wordt deze data niet elke keer opnieuw opgeslagen in de tabel ´user´. Door deze tabellen proberen we van onze databank een relationele databank te maken.

13

Figuur 1: Databankschema (Datanamic, DeZign for Databanks v4.2.0)

Het uiteindelijke databankschema wordt weergegeven in figuur 1. De verschillende verbanden worden weergegeven door de stippellijnen. We hebben ervoor gekozen om aan de kandidaatsleutel telkens een unieke ID toe te kennen via de functie auto-increment. De definitie van de kandidaatsleutel verplicht deze unieke waarde: “Een kandidaatsleutel van een tabel is een irreducibele verzameling van kolommen uit de tabel, waarvan de waarden de rijen van de tabel op een unieke manier identificeren. Met andere woorden, een kandidaatsleutel wordt gekarakteriseerd door twee eigenschappen uniciteit en irreducibiliteit. Uniciteit wil zeggen dat voor elke rij in de tabel de combinatie van de waarden van de kolommen van de kandidaatsleutel uniek is binnen de tabel, en irreducibiliteit betekent dat je geen enkel kolom uit de kandidaatsleutel kunt weglaten zonder dat hierdoor de uniciteiteigenschap teniet wordt gedaan. Voor elke tabel in de databank moeten we minstens één kandidaatsleutel definiëren [De Tré G, 2007, p.41].” De kandidaatsleutels worden in de figuur geïdentificeerd via de afkorting PK (primary key). We linken verschillende tabellen aan elkaar door gebruik te maken van de vreemde sleutel: “De verwantschappen tussen rijen van twee tabellen worden dan gemodelleerd door een kandidaatsleutel van de ene tabel ook op 14

te nemen in de andere tabel. In deze laatste tabel vormen deze extra kolommen dan een zogenoemde vreemde sleutel [De Tré G, 2007, p.41].” Deze vreemde sleutels worden in onze figuur geïdentificeerd via de afkorting FK (foreign key). Velden die niet NULL mogen zijn, worden aangegeven via een sterretje (*). De figuur wordt gecreëerd door het programma Datanamic, DeZign for Databanks, dit programma heeft ook een functie die automatisch een SQL-script genereert (bijlage 1). Dit script maakt het gemakkelijk om alle tabellen correct in te voeren in phpMyAdmin. Het gebruik van de verschillende tabellen zal duidelijk worden bij de bespreking van de verschillende onderdelen van de webapplicatie. De verschillende datatypen die aan de attributen zijn meegegeven worden ook afgebeeld op de figuur. We gaan dieper in op de keuzes van datatypes: “Om de waarden in een kolom te kunnen vergelijken, wordt bij het maken van een tabel een datatype aan een kolom toegekend. Datatypen hebben een belangrijke rol in de beschrijving van de data. Ze bepalen namelijk hoe de data zich zal gedragen. Feitelijk worden alle data op dezelfde manier opgeslagen (binair), maar door het datatype weet het databanksysteem hoe de data geïnterpreteerd moet worden [Segers S., 2006, p.36].” Voor onze databank hebben we volgende datatypen gekozen:


DATE: datatype voor een datum, je kunt een datum op verschillende manieren ingeven, wij gebruiken yyyy-mm-dd (vb: 2007-04-21).




DECIMAL(x,y): numeriek datatype, in dit geval wordt het getal weergegeven in x posities, waarvan y achter de komma.




INTEGER: numeriek datatype, 4 bytes (232-1) (unsigned).




SMALLINT: numeriek datatype, 2 bytes (216-1) (unsigned).




TEXT: type op basis van karakters , variabele lengte van de data (max.:231-1).




TIMESTAMP: datatype voor datum, dit type wordt als een soort stempel gebruikt die de huidige datum wegschrijft bij het toevoegen of wijzigen van een rij.




TINYINT: numeriek datatype, 1 bytes (0 tot 255) (unsigned).




VARCHAR(n): type op basis van karakters, n geeft het maximale aantal karakters dat moet worden opgeslagen voor dit datatype weer. (max. 65535 voor MySQL).

15

7. Opbouw van de webapplicatie In dit deel bespreken we de opbouw van onze webapplicatie. Dit deel kan gezien worden al een soort walkthrough van de pagina. De pagina is zodanig opgebouwd dat er drie soorten gebruikers zijn, namelijk: een gast, een zoeker en een beheerder. Door de hiërarchische structuur van de gebruikers kunnen we de opbouw bespreken aan de hand van enkele schema’s.

7.1. Eerste type gebruiker: GAST

Figuur 2: Eerste type gebruiker: GAST

Je bent gast wanneer je nog niet bent geregistreerd in onze databank en wanneer het dus niet mogelijk is om je aan te melden. Natuurlijk kan je de meeste dingen bekijken zonder je te registreren, maar op het moment dat je data (content) wil toevoegen aan de databank zal je enkele gegevens moeten opgeven. We overlopen kort alle pagina’s die je als gast kan bekijken.


Home: dit is de startpagina.




FAQ: de bekende Frequently asked questions pagina, hier kan u terecht als u vragen heeft over de webapplicatie.




Contact: u kunt ons altijd contacteren met mogelijke opmerkingen, suggesties,…




Lees berichtenbord: als gast kan u enkel het berichtenbord lezen. Als u ook iets wil posten, dan moet u zich laten registreren. 16




Registreer: indien u berichten wil posten, feedback wil geven op een lokaal of zelf een lokaal online wil plaatsen, zult u zich moeten registreren. Gegevens die worden gevraagd, zijn: naam, gebruikersnaam, wachtwoord en e-mailadres. Dit e-mailadres zal met behulp van een validatie e-mail bevestigd worden. U kunt pas inloggen indien deze validatie succesvol gebeurd is. Verder moet u ook akkoord gaan met de gebruikersovereenkomst.




Valideer e-mail: na de registratie krijgt u normaal een e-mail met een link in om je emailadres te valideren, maar indien u deze mail bent verloren, kunt u die hier opnieuw laten sturen.




Zoeken: dit is de belangrijkste functie van de webapplicatie, via snel zoeken of geavanceerd zoeken kunt u een lijst van lokalen opvragen. U kunt elke lokaal in detail bekijken, u kunt de kalender raadplegen en de pagina afdrukken. De belangrijkste zaken waarop u kunt zoeken zijn: provincie, gemeente, postcode en aantal personen. Je kunt ook een uitgebreide zoekquery doorvoeren en kijken of er bijvoorbeeld voldoende bedden aanwezig zijn.

7.2. Tweede type gebruiker: ZOEKER Je krijgt de status van Zoeker wanneer de registratie volledig is afgehandeld. Als zoeker kan je volgende pagina’s bekijken:

Figuur 3: Tweede type gebruiker: ZOEKER




Alle pagina’s die de gast kan oproepen, kunnen ook opgeroepen worden als zoeker.




Het is mogelijk om een bericht achter te laten op ons berichtenbord.

17




Het is mogelijk een commentaar op een lokaal achter te laten. Hierbij kunt u een algemene indruk geven, maar ook een score toekennen aan de volgende onderwerpen: lokaal, omgeving en bereikbaarheid. De beheerder van het lokaal kan, indien hij dit wil, commentaar toevoegen aan de feedback.




Indien u wijzigingen wil aanbrengen aan de gegevens die u heeft opgegeven tijdens de registratie, kan u dit altijd doen via de link ‘gegevens wijzigen’.




Indien u op de link ‘lokaal registeren’ klikt, wordt er eerst extra informatie gevraagd zodat uw status kan worden geüpdatet naar Beheerder. We vragen volgende informatie: naam van de groep, type jeugdbeweging, gemeente van de groep en een correct telefoonnummer. Dit telefoonnummer is belangrijk omdat mogelijke reservaties via dit nummer kunnen gebeuren.

7.3. Derde type gebruiker: BEHEERDER Zoals hierboven vermeld moet u Beheerder zijn om een lokaal te laten registreren. Na het correct invullen van de extra gegevens (telefoonnummer, gemeente,…) zullen de linken ‘beheer lokaal’ en ‘registreer lokaal’ zichtbaar worden. Van hieruit kan je volgende dingen doen:

Figuur 4: Derde type gebruiker: BEHEERDER




Een beheerder kan alles doen wat een zoeker kan.




Het is opnieuw mogelijk om alle persoonlijke gegevens te wijzigen.

18




Nu kan je ook een lokaal registreren. Je krijgt een invulformulier dat je kunt invullen. Er zijn een aantal verplichte velden, bij de andere velden kies je zelf hoeveel gegevens je opgeeft. Hoe meer informatie je beschikbaar stelt, hoe groter de kans is dat je lokaal in de zoekresultaten zal voorkomen. Het formulier wordt opgedeeld in een vijftal subsecties zodat de voorstelling niet te druk wordt: coördinaten, algemene informatie, voorzieningen, voorzieningen keuken en omgeving. Volgende velden werden opgenomen in de subsecties. Coördinaten: naam lokaal, straat, nr., postcode, gemeente, webapplicatie; Algemene informatie: aantal personen, aantal slaaplokalen, aantal polyvalente zalen, aantal vergaderzalen, prijs, aantal bedden, plaats voor tenten, toegang voor rolstoelpatiënten en inleidende informatie; Voorzieningen: aantal wc’s, aantal urinoirs, aantal kraantjes, aantal douches, type van verwarming; Voorzieningen keuken: voldoende eetgerief aanwezig, voldoende kookgerief aanwezig, aantal ovens, aantal bekkens, aantal ijskasten, aantal diepvriezers, extra informatie omtrent de keuken; Omgeving: omschrijving terrein, omschrijving omgeving, bereikbaarheid, afstand van station, supermarkt, bakker, slager, bos, recreatiedomein, zwembad, speeltuin en een textarea voor bijkomende informatie.




Als beheerder kan je de gegevens van je lokaal achteraf nog wijzigen. Via ‘beheer lokaal’ kan je de gegevens veranderen, de foto’s veranderen, een commentaar geven op een feedback en gegevens toevoegen of verwijderen aan de kalender.

De bovenstaande schema’s maken dus duidelijk waar je wat kunt vinden op onze webapplicatie.

19

8. Ontwikkeling van de webapplicatie In het voorgaande deel hebben we de verschillende pagina’s overlopen die aanwezig zijn op onze webapplicatie. In dit deel gaan we dieper in op de manier waarop de pagina’s tot stand zijn gekomen, welke programmeerbeslissingen we genomen hebben, hoe we de beveiliging hebben aangepakt,... We zijn van het standpunt om zoveel mogelijk zelf te proberen programmeren. Op het web zijn er voldoende scripts aanwezig die alles zelf doen (je hoeft enkel nog de lay-out aan te passen), maar we denken dat het eerder belangrijk is iets bij te leren dan iets moois af te leveren. Dus meestal vertrekken we van een voorbeeld en zullen we dit zelf proberen programmeren en zodanig ontwikkelen dat het bruikbaar wordt op onze pagina. Indien we wel iets gekopieerd hebben van het internet, dan hebben we de referenties tussen onze code gezet.

8.1. Framework en inlogsysteem Na het doornemen van enkele tutorials (hoofdzakelijk Lynda.com - PHP Essential Training) over PHP kregen we een goed idee hoe een framework moest opgesteld worden voor onze webapplicatie. Om te beginnen moeten we een manier vinden om gegevens over de databank (naam, user en wachtwoord) bekend te maken aan de server. Bovenaan elke file plaatsen we volgende code: if(!isset($_SESSION['SESSION'])) include("include/session_init.php")

PHP-functie

van php.net

PHP functie: isset() bool isset ( mixed $var [, mixed $var [, $...]] ) Geeft TRUE terug als var bestaat, en anders FALSE. PHP functie : unset() void unset ( mixed $var [, mixed $var [, $...]] ) unset() vernietigd de gespecificeerde variabelen. PHP functie: include() Het include() statement voegt het aangegeven bestand in en evalueert deze.

We gaan dus als volgt te werk: eerst kijken we of de variabele $_SESSION[‘SESSION’] bestaat via de isset() functie, indien dit niet het geval is zullen we session_init.php inlezen. In deze file worden een aantal sessievariabelen gedeclareerd met daarin de correcte kenmerken van onze databank. Het 20

is belangrijk dat niet iedereen deze kenmerken kan opzoeken, want dan zouden derden schade kunnen toebrengen aan de databank. Door van de include file een .php bestand te maken kan je de variabelen niet achterhalen door enkel de pagina op te roepen. Er wordt echter een bestand aangemaakt op de server met de kenmerken in de sessievariabelen, maar deze zijn niet achterhaalbaar voor de client. In dit bestand wordt ook de variabele $_SESSION[‘SESSION’] geïnitialiseerd waardoor op de volgende pagina de session_init.php file niet meer opnieuw wordt opgeroepen. In het session_init.php bestand worden ook de variabelen $_SESSION[‘IDuser’] en $_SESSION[‘LOGGEDIN’] aangemaakt, deze wordt gewijzigd bij het aanmelden van een gebruiker. Indien een gebruiker zich wil afmelden kunnen we dit eenvoudig opvangen door enkel de $_SESSION[‘SESSION’] variabele te unsetten. Hierdoor zal bij de volgende pagina het session_init.php bestand opnieuw ingelezen worden en worden alle variabelen terug op hun standaardwaarde geplaatst. Het is belangrijk dat, wanneer je bent ingelogd, de webapplicatie weet wie er is ingelogd en dit ook gaat onthouden, daarom is het aangewezen om te werken met sessievariabelen. Wanneer een gebruiker zich registreert, worden al zijn gegevens toegevoegd aan de databank. Het wachtwoord wordt gecodeerd via de md5()-functie van PHP, hierdoor kan de gebruiker een wachtwoord opgeven, dat hij altijd gebruikt, zonder dat wij dit wachtwoord kunnen bekijken in onze databank. Door deze codering is het niet mogelijk om uit het hexadecimaal nummer het originele wachtwoord te achterhalen. Indien de gebruiker zijn/haar wachtwoord vergeet kunnen we niet het originele wachtwoord doormailen. Hierdoor zal de server automatisch een nieuw wachtwoord creëren en dit doorsturen naar het e-mailadres van de gebruiker, hij/zij kan later steeds het wachtwoord wijzigen.

PHP-functie

van php.net

PHP functie: md5() string md5 ( string $str ) Berekent de MD5 hash van str gebruik makend van het RSA Data Security, Inc. MD5 Message-Digest Algorithm, en geeft die hash terug. De hash is een 32 tekens lang hexadecimaal nummer. PHP functie: mail() bool mail ( string $to, string $subject, string $message [, string $additional_headers [, string $additional_parameters]] ) Sends an e-mail.

21

Er wordt ook gecontroleerd of de gebruikersnaam en het e-mailadres nog niet in de databank aanwezig zijn. Het e-mailadres wordt gevalideerd. Er wordt namelijk automatisch een e-mail verzonden met daarin een validatiecode. Pas indien de account geactiveerd is, kan je inloggen. Bij het inloggen worden de gebruikersnaam en het wachtwoord vergeleken met wat zich in de databank bevindt, indien deze overeenkomen worden een aantal sessievariabelen van waarde veranderd waardoor we kunnen onthouden welke persoon is ingelogd.

8.2. Beveiliging De beveiliging is een belangrijk onderdeel van onze webapplicatie. Aangezien we met een vrij uitgebreide databank werken, is het belangrijk dat data die wordt weggeschreven voldoende gecontroleerd wordt op mogelijke fouten. Eén van de belangrijkste zaken waar wij moeten op letten is het tegengaan van SQL-injectie: “De term SQL-injectie (Engels: SQL injection) wordt gebruikt voor een type kwetsbaarheid van computerapplicaties, meestal webapplicaties. Applicaties die informatie in een databank opslaan, maken gebruik van SQL om met de databank te communiceren. SQL-injectie kan gebeuren als invoer van gebruikers op onvoldoende gecontroleerde wijze wordt verwerkt in een SQL statement [Wikipedia, 2007].” We zullen een klein voorbeeld geven om SQLinjectie en de gevaren ervan duidelijk te maken. Wanneer er informatie wordt opgevraagd uit de databank zal dit gebeuren via een SQL query. In SQL heeft de apostrof een belangrijke functie, namelijk het afbakenen van niet-numerieke gegevens. Om bijvoorbeeld alle personen met de gebruikersnaam "sam" te selecteren uit een tabel wordt het volgende statement gebruikt: SELECT * FROM user WHERE username = 'sam'

Er treedt een probleem op wanneer een gebruikersnaam een apostrof bevat, bijvoorbeeld “O’reilly”. Wanneer deze gebruikersnaam wordt opgegeven krijgen we volgende query: SELECT * FROM user WHERE username = 'o'reilly'

Bij het uitvoeren van deze query zal de databank een error geven, dit omdat hij eigenlijk gaat zoeken op een gebruikersnaam “o” en erna bevindt zich een stuk code (reilly) die niet begrepen wordt door MySQL. Hackers kunnen hier ook gebruik van maken door een gemanipuleerde gebruikersnaam op te geven, bijvoorbeeld “Jansen OR 'a' = 'a'”, dan krijgen we volgende query: 22

SELECT * FROM user WHERE username = 'jansen' OR 'a' = 'a'

De zoekfunctie naar “jansen” kan dan wel FALSE teruggeven, maar “a” is altijd gelijk aan “a”, dus dit zal altijd TRUE teruggeven. Door de OR functie zullen hackers zo extra informatie kunnen ophalen uit de databank. Bovenstaand voorbeeld is nog vrij onschuldig, maar soortgelijke methodes kunnen gebruikt worden om informatie toe te voegen aan de databank, te wijzigen of te verwijderen. Hiervoor is echter voorkennis van de structuur van de databank nodig, maar deze worden meestal logisch gestructureerd waardoor het meestal niet zo moeilijk is om deze te achterhalen (Wikipedia, 2007). Het is dus heel belangrijk om een manier te vinden om dit te verhinderen. PHP heeft een functie (magic_quotes_gpc) die, wanneer deze aanstaat op de server, automatisch inkomende data zal bewerken. Het zal voor de enkele quote, de dubbele quote, de backslash en het NULL karakter automatisch een backslash plaatsen. Deze optie kan echter niet worden aangepast tijdens het runnen van een webapplicatie, hiervoor kunnen we gebruik maken van de functie addslashes().

PHP-functie

van php.net

PHP functie: get_magic_quotes_goc() int get_magic_quotes_gpc ( void ) Geeft TRUE terug als magic_quotes_gpc aan staat, anders geeft het FALSE terug. PHP functie: addslashes() string addslashes ( string $str ) Geeft een string weer met backslashes voor characters die moeten worden gequote in databank queries etc. Deze characters zijn single quote ('), double quote ("), backslash (\) en NUL (de NULL byte). PHP functie: stripslashes() string stripslashes ( string $str ) Geeft een string met backslashes gestript. (\' wordt ' enzovoort.) Dubbele backslashes worden enkele backslashes.

We moeten opletten dat we niet addslashes doorvoeren op het moment dat magic_quotes_goc() aanstaat op de server omdat we op dat moment teveel backslashes zouden toevoegen. Daarom passen wij telkens volgende code toe:

23

$x = (get_magic_quotes_gpc()) ? $x : addslashes($x);

We controleren eerst wat de instelling op de server is en indien magic_quotes_goc() aanstaat, zullen we de variabele overnemen, indien het afstaat, zullen we addslashes() uitvoeren. Dit stukje code is overbodig indien je op voorhand weet op welke server de applicatie gaat draaien, maar wil je dat de applicatie toepasbaar is op zo veel mogelijk servers, dan kan dit een goede optie zijn. Merk wel op dat wanneer we informatie, waar backslashes zijn aan toegevoegd, ophalen uit de databank, we de functie stripslashes() moeten toepassen wanneer we deze informatie willen uitschrijven naar het scherm (Choi W., Kent A., Lea C., Prasad G., Ullman C., 2000).

8.3. Validatie van formulieren Wij werken met verscheidene formulieren die met correcte informatie ingevuld moeten worden. Er dient dus een controle toegepast te worden op de gegevens die worden weggeschreven naar de databank. We willen niet dat er foutieve gegevens in onze databank komen of dat onze query een error teruggeeft wanneer we bijvoorbeeld een string naar een cel willen schrijven die is ingesteld als datum. Daarom moeten we al onze formulieren laten valideren. Dit kan zowel op de server als op de clientzijde gebeuren. Oorspronkelijk deden wij enkel controle op de serverzijde, dit door gebruik te maken van een vlagsysteem. Alle informatie van het formulier werd doorgezonden naar de server om daar gevalideerd te worden. Indien er een fout aanwezig was, dan werd men teruggestuurd naar het invulformulier en kreeg men een foutmelding (deze werd meegeven door query string parameters, de zogenaamde vlaggen). Dit systeem is echter heel belastend voor de server omdat bijvoorbeeld een formulier als ‘lokaal registreren’ toch al redelijk wat data bevat, en als dit steeds heen en weer gestuurd moet worden, kunnen we niet spreken over efficiëntie. Daarom zijn we op zoek gegaan naar een manier om ook validatie op de clientzijde te doen. Op deze manier zal alles dat wordt doorgezonden al aan een aantal eisen voldoen. Zo kunnen we gemakkelijk, door gebruik te maken van JavaScript, nagaan of alle verplichte velden zijn ingevuld, alle waarden die een integer moeten zijn wel degelijk een integer zijn, de postcode tussen de juiste waarde ligt,… Het is belangrijk dat die validatie op de server ook nog eens gebeurt, dit omdat het JavaScript makkelijk te omzeilen is. Op deze manier zouden hackers foutieve informatie kunnen doorgeven naar de databank.

24

Om JavaScript onder de knie te krijgen zijn we op zoek gegaan naar voorbeeldscripts op het internet. We zijn vertrokken van een validatiescript voor een e-mailadres. Wanneer we een script van het internet gebruiken wordt er in de .php file verwezen naar de url waar we het script gevonden hebben. Eens we het principe doorhadden konden we zelf scriptjes schrijven die bepaalde velden gingen valideren. We weten dat het niet de bedoeling is om volledige stukken code hier te bespreken, maar we zouden graag volgend voorbeeld geven van een JavaScript dat controleert of het veld Naam op de registratiepagina wel degelijk is ingevuld. Het script wordt opgeroepen door in de form tag “onsubmit='return ValidateForm()'” toe te voegen. Indien dit TRUE teruggeeft, zal het formulier worden doorgezonden naar de server. Indien het FALSE is, zal er een alert bericht verschijnen en zal niets worden doorgezonden naar de server. <script type="text/javascript"> //

Meer JavaScriptcode over de validatie van formulieren is terug te vinden in de .php files.

8.4. Berichtenbord en feedback Zoals reeds vermeld moet je aangemeld zijn als zoeker of als beheerder om berichten te kunnen plaatsen op het berichtenbord of om feedback te kunnen geven op een lokaal. De manier van

25

programmeren is vrij eenvoudig. We schrijven een stuk tekst naar de databank samen met de userID van de persoon die het bericht plaatst. Later kunnen we via de correcte SQL query deze gegevens terug ophalen en uitschrijven naar het scherm. Per bericht wordt er ook een cel ingevuld via de timestamp functie (hiervoor besproken). Op deze manier kunnen we de berichten gerangschikt oproepen. Naast de procedure om SQL-injectie tegen te gaan (hierboven besproken) moeten we nog een oplossing zoeken voor het doorgeven van hard breaks naar de databank. Wanneer iemand een stukje tekst ingeeft in de textarea en daarbij enkele enters gebruikt, wordt dit in de databank allemaal achter elkaar geplaatst. Dit geeft een ongewenst resultaat bij het uitschrijven van dit veld. In PHP is er een functie aanwezig die dit wel toelaat, namelijk nl2br():

PHP-functie

van php.net

PHP functie: nl2br() string nl2br ( string $string ) Geeft string met '
' ingevoegd voor alle newlines. Opmerking: Vanaf PHP 4.0.5 is nl2br() XHTML compatible. Alle versies voor 4.0.5 zullen string teruggeven met '
' ingevoegd voor elke newline in plaat van '
'.

Bovenstaande opmerking is belangrijk. Indien deze functie
zou schrijven zouden we onze pagina’s nooit valid kunnen maken, door deze aanpassing is dit wel mogelijk.

8.5. Weergave/beheer lokaal De weergave van een lokaal wordt volledig gecreëerd aan de hand van divisions. We werken met divisions omdat we op deze manier vanuit onze CSS file heel gemakkelijk dingen kunnen veranderen aan de lay-out. Alles wordt automatisch uit de databank gehaald en in de divisions geplaatst. De pagina ‘beheer lokaal’ laat de gebruiker de informatie beheren die getoond wordt bij de weergave van een lokaal. Je kunt hier gegevens veranderen, foto’s wijzigen, gegevens aan de kalender toevoegen,… We bespreken enkele onderwerpen en leggen uit hoe we dit hebben aangepakt.

8.5.1.

Foto’s uploaden

De foto die rechtsboven te zien is, kan worden opgeladen door de lokaalbeheerder. Hij kan een fotobestand (jpg of jpeg) selecteren op zijn eigen computer en dit wordt naar de server doorgestuurd. Daar wordt gecontroleerd of het wel degelijk om een foto gaat en wordt de afbeelding veranderd 26

naar een grootte van 200pixels op 150 pixels. Dit doen we om minder plaats op de server in te nemen

dan

nodig.

Het

script

om

dit

te

doen

hebben

we

gevonden

op

http://www.blazonry.com/scripting/upload-size.php. Er zijn drie belangrijke stappen: eerst bepalen waar we de tijdelijke bestanden zullen opslaan op de server, daarna gaan we de afbeelding van jpeg omzetten naar pnm, als laatste worden de afmetingen gewijzigd en wordt het bestand terug omgezet naar een jpeg formaat. We vonden het opportuun om hier even dit belangrijke stuk van het script weer te geven: /*== where storing tmp img file ==*/ $tmpimg = tempnam("/tmp" "MKPH"); $newfile = "$uploaddir/scaled.jpg";

/*== CONVERT IMAGE TO PNM ==*/ if ($ext == "jpg") { system("djpeg $imgfile >$tmpimg"); } else { echo("Extension Unknown. Please only upload a JPEG image."); exit(); }

/*== scale image using pnmscale and output using cjpeg ==*/ system("pnmscale -xy 250 200 $tmpimg | cjpeg -smoo 10 -qual 50 >$newfile");

In het formulier waar de beheerder een foto kan selecteren, is er een verborgen inputveld aanwezig die een MAX_FILE_SIZE van 1000000 heeft, dit wil zeggen dat er enkel foto’s aanvaard zullen worden die kleiner zijn dan ±1MB. Eens de afmetingen van de foto veranderd zijn, zal de foto worden opgeslagen op de server. We hebben de structuur zo gecreëerd dat er via de functie mkdir() telkens een directory wordt aangemaakt met als naam de lokaalID. Via de functie file_exists() kunnen we kijken of er al een foto aanwezig is. Indien dit het geval is, zal de oude foto overschreven worden.

27

PHP functie: mkdir() bool mkdir ( string $pathname [, int $mode] ) Probeert de folder pathname aan te maken.

PHP-functie

van php.net

PHP functie: file_exists() bool file_exists ( string $filename ) Geeft TRUE terug als het bestand of de directorie aangegeven met filename bestaat; FALSE in alle andere gevallen.

8.5.2.

Kalender

We vinden het noodzakelijk dat de beheerder een mogelijkheid heeft om aan te tonen op welke periodes van het jaar zijn lokaal reeds verhuurd is. We hebben dan ook geprobeerd om een kalender te maken die alle dagen van het jaar weergeeft en de beheerder kan hierop data in het groen of in het rood aanduiden. We geven de beheerder de keuze tussen vrije en bezette periodes is omdat de meeste jeugdbewegingen niet constant verhuren. Op deze manier kunnen ze aangeven tijdens welke periodes er wel wordt verhuurd en dit zal in het groen verschijnen op de kalender. Hebben ze later een verhuring dan kunnen ze dit toevoegen aan de kalender en zullen die dagen rood worden (bezet overschrijft vrij). De kalender wordt weergegeven per jaar. Het is mogelijk om naar het volgende en vorige jaar te gaan. Om deze kalender mooi te genereren hebben we een script van het internet gebruikt (PHP Calendar (version 2.3), written by Keith Devens). Dit script creëert een functie zodat je maand per maand kan oproepen. Wij roepen dus op de pagina kalender twaalf keer deze functie op voor elke maand van het jaar. Via divisions kunnen we deze verschillende stukken mooi plaatsen. Het script zelf doet echter niets meer dan correct weergeven van de maanden. We moeten dus zelf nog code toevoegen zodat de juiste periodes in het groen of in het rood verschijnen. De beheerder kan periodes toevoegen via ‘beheer lokaal’. Hier kan hij een begin- en een einddatum ingeven die dan worden weggeschreven naar de databank. De beheerder kan ook reeds ingegeven periodes verwijderen. Het is natuurlijk belangrijk dat er voldoende controle wordt toegepast op de ingegeven data, zo mag bijvoorbeeld de begindatum niet na de einddatum komen. Via JavaScript zullen we controleren of de ingegeven datum wel degelijk correct is. Het is wel moeilijk om te 28

bepalen of de dagen kloppen. Hiervoor hebben we een apart script gebruikt dat controleert of het een maand met 30 of 31 dagen is en dat controleert of het om een schrikkeljaar gaat of niet voor de dagen van de maand februari te bepalen.

8.5.3.

Printpagina

Als printpagina krijgen we dezelfde pagina als bij ‘weergave lokaal’, maar nu wordt er een andere CSS file toegepast die alle opmaak verwijdert die niet moet geprint worden.

8.6. Zoeken Momenteel is het enkel mogelijk om op de eigenschappen te zoeken die wij belangrijk vinden. Het is altijd mogelijk om deze zoekpagina uit te breiden naar alle informatie die wordt ingegeven over een lokaal. Je kunt op verschillende manieren zoekresultaten bekomen. Een eerste mogelijkheid is om op de foto op de startpagina de gewenste provincie aan te duiden. Dan krijg je de zoekresultaten van deze provincie. We hebben de pagina zo gemaakt dat er bovenaan steeds een functie ‘snel zoeken’ aanwezig is. Hier kan je via een dropdown menu een provincie selecteren. Als derde mogelijkheid kan je via de pagina ‘zoeken’ meerdere criteria invullen. Momenteel zijn deze criteria: provincie, gemeente, postcode, aantal personen, plaats voor tenten, voldoende eetgerief, voldoende kookgerief, voldoende bedden, toegang voor rolstoelpatiënten en het aantal lokalen. Voor het doorgeven van de criteria maken we gebruik van query string parameters, bijvoorbeeld: http://jl.osn.be/zoeken_resultaten.php?provincie=3&postcode=&gemeente=&per sonen_min=50&personen_max=100&rolstoel=1&kookgerief=1&lokalen=

In bovenstaande url zullen we lokalen zoeken uit de provincie Oost Vlaanderen (3), met het aantal personen tussen de 50 en de 100, met toegang voor rolstoelpatiënten en met voldoende kookgerief voor het aantal personen. Momenteel is de zoekfunctie zo geprogrammeerd dat we AND gebruiken in de zoekquery, dit geeft de meest toepasselijke resultaten. Wanneer je de zoekcriteria te specifiek maakt, zal je echter weinig of geen resultaten krijgen. Een verdere uitbreiding zou zijn om een script te ontwikkelen dat start van een zoekquery met AND, maar indien niets gevonden wordt, zouden er criteria moeten weggelaten worden om zo het lokaal te vinden dat het beste past bij de voorkeur van de zoeker.

29

8.7. Lay-out Om onze lay-out te maken hebben we gekozen om te werken met CSS. Wat CSS precies is, wordt uitgelegd in het deel gebruikte scripting technologieën. We hebben onze pagina opgedeeld in verschillende divisions. In deze divisions includeren we een PHP file, bijvoorbeeld menu_links.php. Op deze manier kunnen we gemakkelijk een wijziging aanbrengen aan een menu en ervoor zorgen dat deze op elke pagina zal verschijnen. Op de volgende pagina zijn 2 verschillende screen shots te zien van onze webapplicatie. Tijdens het ontwikkelen van een webapplicatie moet je keuzes maken betreffende de resolutie waarop je webapplicatie kan bekeken worden. In principe kan je een webapplicatie zodanig ontwikkelen dat de pagina’s automatisch van afmetingen veranderen naargelang de resolutie van de bezoeker. Vandaag de dag zien we echter dat verschillende ‘grote’ webapplicaties als basis resolutie 1024x768 nemen. Wij hebben ook voor deze resolutie gekozen. Zo zal de lay-out van de pagina tot zijn recht komen wanneer je de pagina bekijkt met een resolutie van 1024x768 of hoger. Hierboven worden een aantal screenshots weergegeven die een indruk geven van de lay-out. Je ziet duidelijk dat bij een breedbeeld resolutie de pagina aan de linkerkant van het scherm wordt geplaatst. Wanneer we echter op de standaardresolutie kijken, zien we dat het volledige beeld gevuld is. We maken gebruik van een template om te bepalen welke pagina moet geladen worden. Zoals reeds vermeld, is het de bedoeling dat we in onze .php bestanden proberen om enkel functionaliteit op te nemen. Daarom gebeurt de plaatsing van de verschillende divisions eenmaal in de index file. Elke link geeft een query string parameter (vb /?content=registreer) door aan deze index file. Aan de hand van een script wordt bepaald welk onderdeel er geladen moet worden in de welke division. Links op onze pagina zijn de verschillende logo’s van jeugdbewegingen terug te vinden. Dit is natuurlijk niet noodzakelijk, deze plaats is eigenlijk bedoeld om mogelijke sponsors weer te geven. Indien deze applicatie ooit online komt, kan de administrator zelf kiezen wat hij hier plaatst. Als laatste melden we dat we ook de 404.php file hebben aangepast zodat wanneer er een foute link optreedt de mensen niet de lelijke ‘pagina niet gevonden’ te zien krijgen, maar binnen de lay-out van onze webapplicatie blijven en van een query string zal een error worden doorgegeven.

30

Figuur 5: Screenshot (lokaal) resolutie:1280x800

Figuur 6: Screenshot (berichtenbord) resolutie: 1024x768

31

9. Opmerkingen Tijdens het programmeren zijn we een aantal problemen tegengekomen die in principe, volgens de theorie, geen problemen mogen geven. Zo heeft de WAMP-server een probleem met de PHP functie require. Deze functie kan om een of andere mysterieuze reden niet uitgevoerd worden. Om deze reden hebben wij overal de functie include gebruikt. Het verschil tussen deze twee functies is dat, wanneer je include(test.php) schrijft, je applicatie zal verdergaan indien de test.php file niet terug te vinden is. Type je require(test.php) dan zal de applicatie een error teruggeven wanneer de file niet terug gevonden wordt. In principe maakt dit niet veel verschil, maar het is wel spijtig dat WAMP niet alle functies ondersteunt. Zo worden de afmetingen van onze afbeeldingen ook niet automatisch gewijzigd via de WAMP server. Tijdens het programmeren van de webapplicatie maakten we gebruik van Firefox om alles te controleren. Maar toen we onze pagina in Internet Explorer bekeken kwamen we voor een aantal verrassingen te staan. Zo plaatst IE achter elk formulier een blanco lijn, dit brengt natuurlijk de layout in de war. Na lang zoeken op het internet zijn we tot de conclusie gekomen dat er een bug aanwezig is in IE die altijd automatisch marges toevoegt aan een formulier. Gelukkig kan je dit oplossen door in de CSS file de marges van het formulier specifiek op 0 te plaatsen. Verder hadden we nog problemen met de IE6.0 versie. Wanneer je een bepaalde breedte toekent aan een division dan zal deze in Firefox nooit breder worden dan de opgegeven waarde. Bij IE6.0 gebeurt dit echter wel, hierdoor versprongen verschillende divisions van plaats. We hebben in onze CSS file de breedte van een aantal divisions moeten aanpassen om dit probleem te vermijden. Gelukkig is deze bug weggewerkt in IE7.0. Als laatste hebben we nog een opmerking op IE6.0, deze browser is niet in staat om een .png foto bestand transparant weer te geven. Als laatste willen we nog een aantal opmerkingen meegeven over onze aanpak. We denken dat het verstandiger was geweest om vroeger aan de constructie van de kalender te beginnen. We vonden het werken met data niet zo gemakkelijk binnen PHP en SQL. Verder hebben we in het begin tijd verloren door content management systemen te bekijken zoals Joomla. Met deze software kan je heel gemakkelijk een mooie site creëren, maar we zouden meer werk hebben om alles te laten werken zoals het hoort dan om het zelf te programmeren. Uiteindelijk hebben we zelf een aantal belangrijke dingen bijgeleerd door bepaalde zaken zelf te programmeren. 32

Een van de grote minpunten van onze webapplicatie is dat we bijna geen controlemogelijkheden hebben op de feedback. Omdat de reservatie niet via de webapplicatie zelf gebeurt, is het moeilijk om te bepalen wie waar feedback mag posten. Het originele idee was dat enkel een groep die een lokaal gehuurd had feedback kon posten, maar dit kunnen wij niet controleren. Daarom mag iedereen feedback geven op een lokaal, de voorwaarde is wel dat die persoon geregistreerd is. We hebben ook de beheerder van een lokaal de mogelijkheid gegeven om een eenmalige commentaar te geven op een feedback. Hierdoor kan de beheerder zijn mogelijk ongenoegen uiten over een onterechte feedback in afwachting dat de moderators het bericht verwijderen. Wij hopen dat de registratieprocedure en de mogelijkheid om commentaar te geven op een feedback onterechte feedback zal beperken.

33

10. Mogelijke uitbreidingen Een webapplicatie zoals de onze is natuurlijk nooit af. Er zijn altijd zaken die we kunnen uitbreiden of verbeteren. In dit deel willen we even een aantal ideeën overlopen die we door tijdsgebrek niet meer kunnen uitvoeren.


Meer foto’s: momenteel is het enkel mogelijk om één foto op te laden naar de server, namelijk de inleidende foto. Een mogelijke uitbreiding zou zijn om meer foto’s te laten opladen, bijvoorbeeld foto’s van de omgeving, het lokaal, een mogelijke afbeelding van de plattegrond. De tabellen zijn zo opgesteld dat deze uitbreiding perfect kan doorgevoerd worden, maar door tijdsgebrek hebben we deze functie niet meer kunnen implementeren in de webapplicatie.




Opladen van een brochure: Het zou handig zijn indien een lokaal ook een huisbrochure online kan plaatsen. Meestal is dit een PDF bestand met daarin enkel huisregels, foto’s, plattegronden, … op deze manier kan de beheerder een grote bron van informatie online plaatsen.




Online reservatie: Dit is mogelijk op de website van CJT. Via een online reservatiesysteem kan je de data waarop het lokaal beschikbaar is veel nauwkeuriger bijhouden. Zo kan je een systeem programmeren dat automatisch alle gereserveerde data in de kalender aanduidt. Spijtig genoeg is een dergelijke functie veel werk en zouden we extra geld moeten aanrekenen om onze eigen kosten te kunnen dekken, zoals bij het systeem van CJT gebeurt.




Weergave van een lokaal: Momenteel worden alle data vrij statisch weergegeven wanneer je een lokaal opzoekt. Het is mogelijk om dit uit te breiden zodat de beheerder meer vrijheid heeft over de manier waarop gegevens gepresenteerd worden. Zo kan hij dan bijvoorbeeld bepaalde pluspunten van zijn lokaal wat meer in de verf zetten. Momenteel wordt ook alles via tekst weergeven. Het zou mooier lijken indien we gebruik zouden maken van icoontjes, maar die zijn niet zo eenvoudig te vinden, en het zou veel tijd innemen om deze zelf te maken.




Registratie

van

een

lokaal:

We

denken

dat

het heel

moeilijk

is

om elke

lokaalverantwoordelijke gelukkig te maken met ons invulformulier. Er is namelijk teveel diversiteit tussen de verschillende lokalen. Zo wil de ene dat er expliciet vermeld wordt dat 34

er een bakplaat aanwezig is en vindt een andere dat dit overdreven is. We hebben het formulier zodanig opgesteld dat alle belangrijke dingen, naar onze persoonlijke mening, aanwezig zijn en er is altijd een mogelijkheid om meer informatie te typen in de textarea’s. Het is dus mogelijk om eens op gesprek te gaan bij meerdere lokaalverantwoordelijken om te kijken hoe we ons formulier nog kunnen uitbreiden.


Zoeker kan adres opgeven: Een mogelijke uitbreiding is de optie dat een zoeker bij de registratie ook een adres kan opgeven. Wanneer je een lokaal bekijkt krijg je een link naar Map24. Momenteel geeft Map24 automatisch een kaart van de omgeving van het lokaal. Indien de zoeker ook een adres opgeeft kan je Map24 automatisch een route laten berekenen. Wij hebben deze functie niet opgenomen in het systeem omdat we ervan uitgaan dat de meeste mensen zo weinig mogelijk gegevens willen opgeven bij de registratieprocedure.




Meer lay-out: We hebben geprobeerd om in onze PHP bestanden enkel functionaliteit te programmeren en onze lay-out te benaderen via een CSS-bestand. Momenteel is er enkel de basis lay-out aanwezig. Maar het is perfect mogelijk om verschillende lay-outs te ontwikkelen en de gebruiker de keuze te laten welke hij wil gebruiken. Dit kan gaan over bijvoorbeeld kleur en lettertype (zo is het heel eenvoudig om het blauw in onze webapplicatie te vervangen door groen), maar dit kan ook gaan over een volledige herstructurering van de verschillende divisions. Je kunt de voorkeur van de gebruiker dan opslaan in je databank of werken met cookies.

35

11. Besluit Voor het maken van deze website hebben we gekozen voor de scripttaal PHP, in combinatie met JavaScript. Op het einde van de rit vonden we het een goede keuze om te kiezen voor PHP in plaats van ASP. Wij kregen de indruk dat er op het internet veel meer documentatie aanwezig is over werken met PHP dan over ASP. Hoewel we de mogelijkheid hadden om scripts te gebruiken van het net, hebben we er toch voor gekozen om de meeste dingen zelf te programmeren. Op deze manier hebben we veel meer bijgeleerd dan indien we zomaar code zouden overnemen. Voor de lay-out hebben we gekozen voor CSS, ook hier hebben we zoveel mogelijk zelf proberen uitdokteren. De webapplicatie beantwoordt momenteel aan de doelstellingen die we vooraf hebben opgesteld, maar we weten wel dat dit een basis is en dat er veel uitbreidingsmogelijkheden aanwezig zijn. De bestanden voor de webapplicatie zijn terug te vinden op de bijgesloten CD-ROM. Je kunt de webapplicatie ook (tijdelijk) online bekijken en testen via “http://jl.osn.be/”.

36

12. Bibliografie BOTT, E. & LEONHARD, W. (2003), Special edition using Microsoft Office 2003, Indianapolis: Que (Pearson Education). CHOI, W., KENT, A., LEA, C., PRASAS, G. & ULLMAN, C. (2000), Beginning PHP4, Birmingham: Wrox Press Ltd. DE NEVE, P. & VAN DE WALLE, R. (2006-2007), Internettoepassingen, Syllabus, Gent: UGent. DE TRE, G. (2007), Principes van databanks, Amsterdam: Pearson Education. KASSENAAR,P.(2002), Basiscursus PHP 4.2, Schoonhoven: Academic Service. PHILIPS, W. (2006), Cursus kantoorautomatisering, Gent: Universiteit Gent. ULLMAN, L. (2004), PHP voor het world wide web, Nijmegen: Pearson Education Benelux. WIKIPEDIA (2007), verkregen op 10 mei, 2007, van www.wikipedia.com

37

Bijlage 1: SQL script # # # # # # # # #

---------------------------------------------------------------------Script generated with: DeZign for Databanks v4.2.0 Target DBMS: MySQL 4 Project file: thesis.dez Project name: Author: Script type: Databank creation script Created on: 2007-05-15 14:19 ----------------------------------------------------------------------

# # # # # # # # #

# ---------------------------------------------------------------------- # # Tables # # ---------------------------------------------------------------------- # # ---------------------------------------------------------------------- # # Add table "lokaal" # # ---------------------------------------------------------------------- # CREATE TABLE lokaal ( IDlokaal INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, naam_lokaal VARCHAR(40) NOT NULL, IDuser INTEGER UNSIGNED NOT NULL, straat VARCHAR(40) NOT NULL, nr SMALLINT UNSIGNED NOT NULL, postcode SMALLINT UNSIGNED NOT NULL, gemeente VARCHAR(40) NOT NULL, aantal_personen SMALLINT UNSIGNED NOT NULL, aantal_lokalen TINYINT UNSIGNED NOT NULL, prijs TEXT NOT NULL, aantal_bedden SMALLINT UNSIGNED, tenten TINYINT(1) UNSIGNED, aantal_wcs TINYINT UNSIGNED, aantal_lavabos TINYINT UNSIGNED, aantal_douches TINYINT UNSIGNED, centrale_verwarming TINYINT(1) UNSIGNED, eetgerief TINYINT(1) UNSIGNED, kookgerief TINYINT(1) UNSIGNED, aantal_ovens TINYINT UNSIGNED, aantal_vuren TINYINT UNSIGNED, aantal_ijskasten TINYINT UNSIGNED, aantal_diepvriezers TINYINT UNSIGNED, keuken_extra TEXT, omschrijving_terrein TEXT, omschrijving_omgeving TEXT, bereikbaarheid TEXT, toegang_rolstoel TINYINT(1) UNSIGNED, algemeen_extra TEXT, km_bos DECIMAL(3,1) UNSIGNED, km_speeltuin DECIMAL(3,1) UNSIGNED, km_zwembad DECIMAL(3,1) UNSIGNED, km_recreatiedomein DECIMAL(3,1) UNSIGNED, km_station DECIMAL(3,1) UNSIGNED, km_slager DECIMAL(3,1) UNSIGNED,

VIII

km_bakker DECIMAL(3,1) UNSIGNED, km_supermarkt DECIMAL(3,1) UNSIGNED, last_updated TIMESTAMP, inleiding TEXT, CONSTRAINT PK_lokaal PRIMARY KEY (IDlokaal) ); # ---------------------------------------------------------------------- # # Add table "feedback" # # ---------------------------------------------------------------------- # CREATE TABLE feedback ( IDfeedback INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, IDuser INTEGER UNSIGNED NOT NULL, IDlokaal INTEGER UNSIGNED NOT NULL, datum TIMESTAMP, feedback TEXT, score_globaal TINYINT UNSIGNED DEFAULT 2, score_lokaal TINYINT UNSIGNED DEFAULT 2, score_omgeving TINYINT UNSIGNED DEFAULT 2, score_bereikbaarheid TINYINT UNSIGNED DEFAULT 2, commentaar TEXT, CONSTRAINT PK_feedback PRIMARY KEY (IDfeedback) ); # ---------------------------------------------------------------------- # # Add table "user" # # ---------------------------------------------------------------------- # CREATE TABLE user ( IDuser INTEGER UNSIGNED NOT NULL, naam_user VARCHAR(40) NOT NULL, username VARCHAR(40) NOT NULL, email VARCHAR(40) NOT NULL, password VARCHAR(40) NOT NULL, IDusertype INTEGER UNSIGNED NOT NULL, validatie_code VARCHAR(40) NOT NULL, toegang TINYINT(1) UNSIGNED NOT NULL DEFAULT 0, IDbeweging INTEGER UNSIGNED, naam_groep VARCHAR(40), gemeente_groep VARCHAR(40), telefoon VARCHAR(15), CONSTRAINT PK_user PRIMARY KEY (IDuser) ); # ---------------------------------------------------------------------- # # Add table "foto" # # ---------------------------------------------------------------------- # CREATE TABLE foto ( IDfoto INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, IDlokaal INTEGER UNSIGNED NOT NULL, IDcategorie INTEGER NOT NULL, locatie VARCHAR(60) NOT NULL, alt VARCHAR(60) NOT NULL, CONSTRAINT PK_foto PRIMARY KEY (IDfoto) );

IX

# ---------------------------------------------------------------------- # # Add table "kalender" # # ---------------------------------------------------------------------- # CREATE TABLE kalender ( IDkalender INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, IDlokaal INTEGER UNSIGNED, status VARCHAR(40), begin_datum DATE, eind_datum DATE, CONSTRAINT PK_kalender PRIMARY KEY (IDkalender) ); # ---------------------------------------------------------------------- # # Add table "beweging" # # ---------------------------------------------------------------------- # CREATE TABLE beweging ( IDbeweging INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, naam_beweging VARCHAR(40), CONSTRAINT PK_beweging PRIMARY KEY (IDbeweging) ); # ---------------------------------------------------------------------- # # Add table "usertype" # # ---------------------------------------------------------------------- # CREATE TABLE usertype ( IDusertype INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, usertype VARCHAR(40), CONSTRAINT PK_usertype PRIMARY KEY (IDusertype) ); # ---------------------------------------------------------------------- # # Add table "categorie_foto" # # ---------------------------------------------------------------------- # CREATE TABLE categorie_foto ( IDcategorie INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, categorie VARCHAR(40) NOT NULL, CONSTRAINT PK_categorie_foto PRIMARY KEY (IDcategorie) ); # ---------------------------------------------------------------------- # # Add table "berichtenbord" # # ---------------------------------------------------------------------- # CREATE TABLE berichtenbord ( IDbericht INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, IDuser INTEGER, email VARCHAR(40), bericht TEXT, tijd TIMESTAMP, CONSTRAINT PK_berichtenbord PRIMARY KEY (IDbericht) );

X

# ---------------------------------------------------------------------- # # Foreign key constraints # # ---------------------------------------------------------------------- # ALTER TABLE lokaal ADD CONSTRAINT user_lokaal FOREIGN KEY (IDuser) REFERENCES user (IDuser); ALTER TABLE feedback ADD CONSTRAINT lokaal_feedback FOREIGN KEY (IDlokaal) REFERENCES lokaal (IDlokaal); ALTER TABLE feedback ADD CONSTRAINT user_feedback FOREIGN KEY (IDuser) REFERENCES user (IDuser); ALTER TABLE user ADD CONSTRAINT usertype_user FOREIGN KEY (IDusertype) REFERENCES usertype (IDusertype); ALTER TABLE user ADD CONSTRAINT beweging_user FOREIGN KEY (IDbeweging) REFERENCES beweging (IDbeweging); ALTER TABLE foto ADD CONSTRAINT lokaal_foto FOREIGN KEY (IDlokaal) REFERENCES lokaal (IDlokaal); ALTER TABLE foto ADD CONSTRAINT categorie_foto_foto FOREIGN KEY (IDcategorie) REFERENCES categorie_foto (IDcategorie); ALTER TABLE kalender ADD CONSTRAINT lokaal_kalender FOREIGN KEY (IDlokaal) REFERENCES lokaal (IDlokaal); ALTER TABLE berichtenbord ADD CONSTRAINT user_berichtenbord FOREIGN KEY (IDuser) REFERENCES user (IDuser);

XI

XII