Ontwikkelen van website voor de verhuur van...

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

Universiteit Gent



Ontwikkelen van website voor de

verhuur van jeugdbewegingslokalen

Jeroen De Vuyst

Tine Van Raemdonck


Thesisbegeleider: Lic. Koen De Wolf

Scriptie ingediend tot het behalen van de graad van

Master Toegepaste Informatica

IV

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."

V

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



Begeleider: Lic. K. De Wolf


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

VI

Inhoudstafel

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

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

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

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

4.1. PHP....................................................................................................................................... 4

4.2. JavaScript ............................................................................................................................. 6

4.3. HTML................................................................................................................................... 6

4.4. CSS ....................................................................................................................................... 7

5. 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

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

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

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

8. 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

VII

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

VIII

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

1

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.

2

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.

3

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.

4

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-side-

technologie 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-side-

technologie. 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 HTML-

code kunnen schrijven. PHP-documenten hebben meestal de extensie .php. PHP wordt zeer veel

5

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

6

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 <HTML> (begin van een HTML-pagina), <STRONG> (vetgedrukte letters). Elk

van deze tags heeft een corresponderende afsluitende tag, die begint met een /, bijvoorbeeld

</HTML> [De Neve, 2006, p98].”

7

4.4. CSS

Via Cascading Style Sheets kan een auteur specificeren hoe HTML-elementen (bijvoorbeeld <H1>-

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.

8

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 SQL-

commando’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).

9

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

10

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 WYSIWY-

omgeving fouten worden teruggevonden het moeilijk is voor beginnende gebruikers om deze op te

11

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

12

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/).

13

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: úser´, ´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 úser´.

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 úser´. Door deze tabellen proberen we van onze

databank een relationele databank te maken.

14

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

15

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).

16

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.

17

� 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 e-

mailadres 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.

18

� 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.

19

� 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.

20

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

21

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: 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.

22

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 SQL-

injectie 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:

23

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: 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:

24

$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.

25

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">

//<![CDATA[

function ValidateForm(){

var naamID=document.registratie.naam

var error_message = "De pagina creërde volgende foutmeldingen:\n"

var fout = false;

if ((naamID.value==null)||(naamID.value=="")){

error_message += "- Naam is een verplicht veld\n"

fout = true;

}

if (fout == true){

alert(error_message)

return false

}

return true

}

//]]>

</script>

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

26

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: nl2br()

string nl2br ( string $string )

Geeft string met '<BR>' ingevoegd voor alle newlines.

Opmerking: Vanaf PHP 4.0.5 is nl2br() XHTML

compatible. Alle versies voor 4.0.5 zullen string

teruggeven met '<br>' ingevoegd voor elke newline in

plaat van '<br />'.

Bovenstaande opmerking is belangrijk. Indien deze functie <br> 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

27

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.

28


PHP functie: mkdir()

bool mkdir ( string $pathname [, int $mode] )

Probeert de folder pathname aan te maken.

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

29

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.

30

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.

31

Figuur 5: Screenshot (lokaal) resolutie:1280x800

Figuur 6: Screenshot (berichtenbord) resolutie: 1024x768

32

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 lay-

out 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.

33

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.

34

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

35

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.

36

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/”.

37

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

VIII

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,

IX

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,


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 (


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)

);

X

# ---------------------------------------------------------------------- #

# 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)

);

XI

# ---------------------------------------------------------------------- #

# 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


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


ALTER TABLE foto ADD CONSTRAINT categorie_foto_foto

FOREIGN KEY (IDcategorie) REFERENCES categorie_foto (IDcategorie);

ALTER TABLE kalender ADD CONSTRAINT lokaal_kalender


ALTER TABLE berichtenbord ADD CONSTRAINT user_berichtenbord


Ontwikkelen van website voor de verhuur van...

Documents

Transcript of Ontwikkelen van website voor de verhuur van...