UNIVERSITEIT GENT FACULTEIT TOEGEPASTE WETENSCHAPPEN

Vakgroep

Telecommunicatie en Informatieverwerking Voorzitter: Prof. Dr. Ir. H. Bruneel

Ontwerp van een dynamische website voor een jongerenvereniging

door Vincent Latré

Matthias Vandermaesen

Scriptie ingediend tot het behalen van de academische graad van gediplomeerde in de aanvullende studies van

informatica

Promotor: Prof. Dr. Ir. W. Philips Scriptiebegeleider: Ir. B. Huysmans

Academiejaar 2003 – 2004

UNIVERSITEIT GENT FACULTEIT TOEGEPASTE WETENSCHAPPEN

Vakgroep

Telecommunicatie en Informatieverwerking Voorzitter: Prof. Dr. Ir. H. Bruneel

Ontwerp van een dynamische website voor een jongerenvereniging

door Vincent Latré

Matthias Vandermaesen

Scriptie ingediend tot het behalen van de academische graad van gediplomeerde in de aanvullende studies van

informatica

Promotor: Prof. Dr. Ir. W. Philips Scriptiebegeleider: Ir. B. Huysmans

Academiejaar 2003 – 2004

Overzicht

Ontwerp van een dynamische website voor een jongerenvereniging

door Vincent Latré

Matthias Vandermaesen

Scriptie ingediend tot het behalen van de academische graad van gediplomeerde in de aanvullende studies van informatica

Promotor: Prof. Dr. Ir. W. Philips Begeleider: Ir. B. Huysmans Universiteit Gent Faculteit Toegepaste Wetenschappen Vakgroep Telin

Samenvatting:

Wij hebben een website ontworpen voor de jongerenvereniging Caracalla uit het Oost-

Vlaamse Bellem. Hiermee wil het bestuur zijn leden beter informeren aangezien vroeger

de communicatie soms gebrekkig verliep.

We hebben ervoor gekozen om de site volledig dynamisch te maken zodat het bestuur de

volledige inhoud kan aanpassen via een gebruiksvriendelijke interface. Om deze

interactiviteit te garanderen hebben wij gebruik gemaakt van volgende talen: HTML, PHP,

MySQL en Javascript.

Ook is de site modulair opgebouwd zodat het mogelijk is om op een eenvoudige manier

pagina’s toe te voegen of te verwijderen. Zo kunnen we garanderen dat de site in de

toekomst ook nog actueel blijft.

Trefwoorden: website, PHP, MySQL, jongerenvereniging

IV

Copyright, confidentialiteit

Ondergetekenden, Matthias Vandermaesen en Vincent Latré bevestigen hierbij dat

onderhavige scriptie wel mag worden geraadpleegd, maar niet mag worden

gefotokopieerd. Bij het citeren moeten steeds de titel en de auteurs van de scriptie vermeld

worden.

25 mei 2004

V

Woord Vooraf Aan het begin van deze eindverhandeling zouden wij iedereen willen bedanken voor hun

hulp en bijdrage tot de realisatie van dit eindwerk.

In eerste instantie gaat onze aandacht uit naar onze promotor, Prof. Dr. Ir Phillips en onze

begeleider Bruno Huysmans, omdat zij ons de mogelijkheid gaven om deze thesis te

verwezenlijken.

Daarnaast willen wij de bestuursleden van Caracalla niet vergeten, in het bijzonder Joost

Decock en Wouter Declercq, die voortdurend ter beschikking waren voor een permanente

feedback.

Ook Kurt De Meulenaere, oud-lid van Caracalla, willen we langs deze weg bedanken voor

het ter beschikking stellen van zijn archief over Caracalla.

Als laatste willen we nog al onze vrienden en al die anderen die we nog zouden moeten

vermelden danken voor hun hulp tijdens onze studies en voor dit eindwerk in het

bijzonder.

VI

Online testen van de site Dit eindwerk bestaat uit het ontwikkelen van een dynamische website. In dit thesisboek

wordt deze site uitvoerig besproken. Om deze eindverhandeling te beoordelen is het ook

nodig om de site zelf eens te bekijken en een paar functies uit te proberen.

Aangezien de site momenteel reeds online staat (http://caracalla.netsensei.nl) en gebruikt

wordt door Caracalla is het niet mogelijk om de functionaliteit van de site te testen zonder

de oorspronkelijke database te compromitteren. Daarom is er een tweede site gecreëerd

die, behalve de database, een exacte kopij is van de originele site. Op deze manier is het

mogelijk om alle functies van de site te testen zonder gevolgen voor de originele site.

Deze kopij is terug te vinden op volgende locatie: http://thesis.netsensei.nl en is beschermd

via een paswoord.

Om het testen optimaal te laten verlopen zijn er reeds fictieve gegevens ingevuld in de

database. Zo zijn er 8 gebruikers aangemaakt: één systeemadministrator, twee

bestuursleden, drie gewone leden en twee oud-leden. Ook zijn er reeds activiteiten en

nieuwsfeiten toegevoegd en staan er twee fotoalbums online.

Om de code van de website te bekijken wordt er verwezen naar de CD-ROM die als bijlage

bij deze thesis gevoegd is.

Noodzakelijke gegevens testsite:

URL: http://thesis.netsensei.nlLogin site login: asithesis paswoord: t3l1n (=T3L1N in kleine letters) Soorten gebruikers:

Naam lid Toegangsniveau Loginnaam Paswoord

Vincent Latré Systeemadministrator Vincent palm

Joost Decock Bestuurslid Joost palm

Paul De Meester Bestuurslid Paul palm

Bert Goethals Gewoon lid Bert palm

Bart Vriendt Gewoon lid Bart palm

Karen Declercq Gewoon lid Karen palm

Nolf Lieselot Oud-lid Lieselot palm

Pieter De Preatere Oud-lid Pieter palm

VII

Inhoudsopgave Overzicht............................................................................................................................................................... IV Woord Vooraf ....................................................................................................................................................... VI Online testen van de site.......................................................................................................................................VII Inhoudsopgave ................................................................................................................................................... VIII Figurenlijst ............................................................................................................................................................ IX Hoofdstuk 1 Inleiding ............................................................................................................................................. 1

1.1 Situering Caracalla .................................................................................................................................... 1 1.2 Doel en vereisten van de site..................................................................................................................... 2 1.3 Structuur van deze eindverhandeling ........................................................................................................ 3

Hoofdstuk 2 Gebruikte Technologie ....................................................................................................................... 5

2.1 HTML ....................................................................................................................................................... 5 2.2 CSS ........................................................................................................................................................... 7 2.3 Keuze van de server-side scriptingtaal...................................................................................................... 8

2.3.1 PHP................................................................................................................................................... 9 2.3.2 ASP................................................................................................................................................... 9 2.3.3 PHP versus ASP ............................................................................................................................. 10

2.4 Javascript................................................................................................................................................. 11 2.5 MySQL ................................................................................................................................................... 11 2.6 Hosting.................................................................................................................................................... 13 2.7 Gebruikte ontwikkelplatformen .............................................................................................................. 14 2.8 Gebruikte tools........................................................................................................................................ 15

2.8.1 Dreamweaver MX .......................................................................................................................... 15 2.8.2 KWrite ............................................................................................................................................ 17 2.8.3 Photoshop ....................................................................................................................................... 17 2.8.4 SmartFTP en GFTP ........................................................................................................................ 17

Hoofdstuk 3 Vaststellen functionele eisen ............................................................................................................ 18

3.1 Inleiding .................................................................................................................................................. 18 3.2 Vastleggen van de functionele eisen ....................................................................................................... 18 3.3 Beperkingen van de site .......................................................................................................................... 19

Hoofdstuk 4 Algemene aspecten van de site......................................................................................................... 20

4.1 Overzicht van de verschillende gebruikers van de site............................................................................ 20 4.2 Structuur van de site................................................................................................................................ 21 4.3 Interfaces & modules .............................................................................................................................. 21

4.3.1 Werken met modules ...................................................................................................................... 22 4.3.2 Het toevoegen van een module....................................................................................................... 22

4.4 Stylesheets............................................................................................................................................... 23 4.5 Functies ................................................................................................................................................... 24

4.5.1 function is_valid_email($var)......................................................................................................... 24 4.5.2 function is_valid_euroNumber($var) ............................................................................................. 24 4.5.3 function decimal_point_to_comma($var)....................................................................................... 25 4.5.4 function datum_nl($datefield) ........................................................................................................ 25 4.5.5 function date_long_notation($datefield)......................................................................................... 25 4.5.6 function style_title($userStyleSheet) .............................................................................................. 25 4.5.7 function style_corner($userStyleSheet) .......................................................................................... 26 4.5.8 function style_arrow_left($userStyleSheet).................................................................................... 26 4.5.9 function style_arrow_right($userStyleSheet) ................................................................................. 26 4.5.10 function purge($dir)........................................................................................................................ 26

Hoofdstuk 5 Overzicht functionaliteit per pagina ................................................................................................. 27

5.1 Publiek gedeelte ...................................................................................................................................... 27 5.1.1 Hoofdpagina ................................................................................................................................... 27 5.1.2 Agenda............................................................................................................................................ 29 5.1.3 Babbelbox....................................................................................................................................... 29 5.1.4 Fotobox........................................................................................................................................... 30 5.1.5 Links ............................................................................................................................................... 31

VIII

5.1.6 Over Caracalla ................................................................................................................................ 31 5.1.7 Contact............................................................................................................................................ 32 5.1.8 Paswoord verloren .......................................................................................................................... 32

5.2 Beheersgedeelte ...................................................................................................................................... 33 5.2.1 Nieuwsbeheer ................................................................................................................................. 34 5.2.2 Voeg een item toe ........................................................................................................................... 34 5.2.3 Update een item.............................................................................................................................. 34 5.2.4 Verwijder een item ......................................................................................................................... 34 5.2.5 Profielbeheer................................................................................................................................... 34 5.2.6 Agendabeheer ................................................................................................................................. 38 5.2.7 Fotobeheer ...................................................................................................................................... 40 5.2.8 Links beheer ................................................................................................................................... 43

Hoofdstuk 6 Tabellen overzicht ............................................................................................................................ 44

6.1 Tabel ‘users’:........................................................................................................................................... 44 6.2 Tabel ‘agenda’......................................................................................................................................... 45 6.3 Tabel ‘participants’ ................................................................................................................................. 45 6.4 Tabel ‘guestbook’ ................................................................................................................................... 46 6.5 Tabel ‘news’............................................................................................................................................ 47 6.6 Tabel ‘photo_overview’ .......................................................................................................................... 47 6.7 Tabel ‘photo’........................................................................................................................................... 48 6.8 Tabel ‘links’ ............................................................................................................................................ 48 6.9 Tabel ‘main_content’ .............................................................................................................................. 49 6.10 Tabel ‘panel_content’.............................................................................................................................. 49

Hoofdstuk 7 Testen van de site ............................................................................................................................. 51

7.1 Validatie .................................................................................................................................................. 51 7.2 Verificatie ............................................................................................................................................... 52

7.2.1 De validators van het W3C............................................................................................................. 52 7.2.2 Andere verificatietechnieken .......................................................................................................... 53

Hoofdstuk 8 Slotwoord ......................................................................................................................................... 54 Referenties ............................................................................................................................................................ 55

Figurenlijst Figuur 1: De hoofdpagina van de site ................................................................................................................... 28 Figuur 2: Overzicht van de verschillende foto-albums ......................................................................................... 30 Figuur 3: De beheerspagina................................................................................................................................... 33 Figuur 4: Profielbeheer: ledenoverzicht ................................................................................................................ 35 Figuur 5: het exporteren van de ledenlijst naar Excel ........................................................................................... 36 Figuur 6: ledenbeheer: wijzigen gegevens van een lid.......................................................................................... 38 Figuur 7: Toevoegen van foto's: stap 2 ................................................................................................................. 41

IX

Hoofdstuk 1 Inleiding

Caracalla is een studentenvereniging uit Bellem. Tot voor kort kon deze vereniging slechts

beschikken over een kleine statische website. Hoewel dit oorspronkelijk ruim voldoende

was, blijkt dit vandaag de dag niet meer te voldoen aan de behoeften en de eisen van de

leden van Caracalla. Zo werd de website niet regelmatig geactualiseerd. Interactie met de

bezoekers en de leden was quasi onbestaand. Vanuit de ledenbasis was er dan ook een

algemene vraag naar een dynamische website die een ruim aantal diensten op maat

aanbiedt. Ook voor de interne werking van Caracalla bleken de voordelen van een

dynamische website legio. Via deze thesis wilden de auteurs dan ook tegemoet komen aan

de verzuchtingen van Caracalla.

1.1 Situering Caracalla

Caracalla is een jongerenvereniging in het Oost-Vlaamse Bellem. Dit vriendenverband

werd gesticht in 1976 en was oorspronkelijk bedoeld als een studentenclub, maar is in de

loop der jaren geëvolueerd naar een jongerenvereniging. Caracalla telt momenteel een

veertigtal leden.

Hoofddoel van Caracalla is het organiseren van diverse activiteiten waaraan leden kunnen

deelnemen. Deze activiteiten kunnen zowel van sportieve als van culturele aard zijn.

Volgende activiteiten stonden het voorbije seizoen op de agenda: karting, bowling, uitstap

naar ‘La Coupole’ in Frankrijk, Westernavond, Caracalla Weekend naar Dirbach (Groot

Hertogdom Luxemburg), film (Kill Bill 2), toneel (Caveman), enz.

Indien er geen activiteit gepland is hebben de leden de mogelijkheid om te verzamelen in ’t

kot. Dit is het clublokaal van Caracalla en bevindt zich in een voormalige basisschool te

1

Bellem. Dit clublokaal wordt ter beschikking gesteld door de gemeente Aalter en wordt

volledig autonoom beheerd door Caracalla.

1.2 Doel en vereisten van de site

Het doel van dit project is het creëren van een overzichtelijke en dynamische website voor

de jongerenvereniging Caracalla. Een website kunnen we tegenwoordig moeilijk nog

alleen als een uithangbord beschouwen. Waar een website vroeger een louter aanvullende

functie had (het weergeven van enkel algemene informatie) laten de technische

mogelijkheden vandaag de dag toe om véél verder te gaan. Een moderne en degelijke

website vormt een communicatieplatform waar de leden van een vereniging elkaar online

kunnen treffen en informatie uitwisselen. Binnen een vereniging neemt een degelijke

website een centrale plaats in en houdt ze het contact en de banden tussen de leden sterk.

Ook bij de organisatie en de werking neemt een goed uitgebouwde website een centrale

plaats in.

Het voordeel van een dynamische website is dat de technische kant quasi volledig

gescheiden wordt van de inhoudelijke kant. Daar waar de webmaster vroeger eveneens

verantwoordelijk was voor het publiceren van de informatie, wordt zijn rol vandaag eerder

beperkt tot de technische ondersteuning. Gewone leden en bestuursleden zouden dan ook

in staat moeten zijn om zelfstandig en eenvoudig informatie online te plaatsen. De

webmaster valt weg als aanspreekpunt voor het online plaatsen van informatie. Dit laatste

heeft een aantal aangename gevolgen. In de eerste plaats werkt de webmaster van een

jeugdvereniging vaak op vrijwillige basis. De kans dat de communicatie mank loopt is vrij

groot. Gepubliceerde informatie kan soms verkeerd zijn, met vertraging of zelfs helemaal

niet online geplaatst worden wanneer men voor een statische website opteert. De

mogelijkheid om zelfstandig en direct de agenda aan te passen, nieuws toe te voegen, enz.

-kortom de inhoud dynamisch aan te passen- garandeert de correctheid en de actuele

waarde van de informatie. In tweede instantie krijgt de webmaster de handen vrij om zich

te concentreren op zaken zoals het toevoegen van extra functionaliteit, het technische

onderhoud, het verbeteren van het comfort en de gebruiksvriendelijkheid, …

De vroegere website1 is eerder statisch van aard. De verantwoordelijke heeft niet altijd tijd

om nieuwe informatie toe te voegen. De site is dan ook duidelijk gedateerd en dringend toe

aan vernieuwing.

2

Hierna stellen we kort even concreet de functies voor die we hebben geïmplementeerd.

Uiteraard hebben we rekening gehouden met de eisen en de wensen van het bestuur en de

leden van Caracalla. In eerste instantie dient er een nieuws- en agendasysteem te bestaan

dat de leden toelaat snel en eenvoudig aankondigingen met betrekking tot het organiseren,

uitstellen, afgelasten, enz. van activiteiten, vergaderingen en dergelijke meer op de website

te plaatsen.

In tweede instantie zou er een discussieplatform moeten komen onder de vorm van een

babbelbox. Via deze babbelbox kunnen leden, bestuursleden en zelfs occasionele

bezoekers een berichtje achterlaten. Regelmatig contact en communicatie wordt hierdoor

bevorderd.

In derde instantie is het de bedoeling om Caracalla zelf voor te stellen. Daarom is er de

sectie over Caracalla gepland waar de gebruiker kan leren wat voor een vereniging

Caracalla is, wat de geschiedenis is van Caracalla, hoe men lid kan worden, enz.

Een laatste luik aan dit project is de implementatie van een fotohoek. Gezien de

veelvuldige activiteiten van Caracalla en het bezit van digitale camera’s door enkele leden,

was er vraag naar een publieke sectie waar de leden – bepaalde beperkingen in acht

genomen – online foto’s kunnen plaatsen.

De uitdaging van dit project is het integreren van al deze deelaspecten in één dynamisch en

gebruiksvriendelijk geheel. De hierboven geëiste functionaliteit bestaat al in de vorm van

andere, publiek verkrijgbare software. We denken hierbij aan bijvoorbeeld Movable Type2,

phpBB3 en Coppermine Gallery4. Dit zijn echter vrij complexe pakketten, wat het moeilijk

maakt deze pakketten te implementeren en aan te passen aan de eisen en de wensen van de

eindgebruiker. We vinden het dan ook meer opportuun om zelf een volledig systeem op

maat te construeren.

1.3 Structuur van deze eindverhandeling

In het tweede hoofdstuk van deze thesis wordt de technologie besproken die gebruikt is

voor het ontwikkelen van de site. Hierbij wordt ondermeer uitgelegd waarom we voor een

bepaalde ontwikkelingstool of programmeertaal kozen.

In het volgende hoofdstuk wordt nagegaan welke functionele eisen en beperkingen in acht

genomen zijn bij het ontwikkelen van deze site. De functionele eisen bepalen hierbij wat

de site moet kunnen volgens het bestuur van Caracalla en de beperkingen worden bepaald

3

door de technische voorwaarden opgelegd door de hostingdienst waarbij de site gehost

wordt.

Het vierde hoofdstuk handelt over de algemene aspecten van de site. Volgende zaken

komen aan bod: welke gebruikers er onderscheiden worden, wat de structuur is van de site,

de modulaire opbouw van de site, het gebruik van stylesheets en het gebruik van diverse

functies.

In het vijfde hoofdstuk wordt dieper ingegaan op de specifieke functionaliteit die de site

biedt. Per pagina wordt de geleverde functionaliteit uitvoerig besproken.

Het volgende hoofdstuk geeft een beschrijving van de gebruikte tabellen. Van elke tabel

wordt weergegeven uit welke velden deze bestaan en op welke momenten de tabellen

gemanipuleerd worden.

Het laatste hoofdstuk toont hoe de site getest werd. Hierbij wordt gekeken naar de validatie

(biedt de site de gevraagde functionaliteit) en de verificatie (het opsporen van ondermeer

programmeerfouten) van de site.

4

Hoofdstuk 2 Gebruikte Technologie

In dit hoofdstuk gaan we dieper in op de technologie die we gebruikten om dit project te

verwezenlijken. Er is een ruime waaier aan middelen voorhanden om informatie op een

snelle manier te verspreiden. De beschikbare software geeft ons niet alleen een heleboel

vrijheden om een bepaalde functionaliteit te implementeren, maar legt ons vaak ook een

aantal belangrijke beperkingen op. Het is dan ook van belang om uitgaande van de noden

en vooropgestelde eisen een verantwoorde keuze te maken. In dit hoofdstuk bespreken we

een aantal van de middelen die we hebben aangewend om tot de realisatie van onze

doelstelling, het bouwen van een dynamische website, te komen. We proberen daarbij een

duidelijke motivatie te geven waarom we voor een welbepaald pakket kozen en een

vergelijkbaar pakket uit de boot viel.

2.1 HTML

HTML5 of HyperText Markup Language is de lingua franca die gebruikt wordt om

documenten te publiceren op het World Wide Web. HTML is een opmaaktaal. Aan het te

publiceren document worden een aantal extra commando’s toegevoegd. Het doel van deze

commando’s of tags is hoofdzakelijk het beschrijven van de opmaak en het beschrijven

van de logische en inhoudelijke structuur. Daarnaast dient een opmaaktaal ook om

bijvoorbeeld de positie van een afbeelding binnen de tekst vast te leggen. HTML is een taal

die naast een declaratief (de commando’s leggen de logische structuur van het document

vast) ook een proceduraal (de commando’s leggen de opmaak en de lay-out vast)6 element

incorporeert. We kunnen het onderscheid maken tussen vier verschillende soorten

opmaakelementen7:

• Structural Markup beschrijft de logische en inhoudelijke structuur van de tekst.

5

• Presentational Markup beschrijft de fysische structuur van een document. Het gaat

hier louter om de visuele voorstelling van de tekst los van de functie van een

tekstelement. Men probeert steeds vaker inhoud en lay-out van elkaar te scheiden.

Het is dan ook niet aangewezen om presentational markup rechtstreeks in een

document te gebruiken, maar indirect via een aparte stylesheet.

• Hypertext Markup staat in voor het linken of aan elkaar koppelen van documenten

door gebruik te maken van de URI of Uniform Resource Identifier.

• Widget Elements: voor de creatie van objecten. Voorbeelden van widget elements

zijn lijsten, knoppen, tabellen, enz.

HTML is een non-proprietary formaat dat gebaseerd is op SGML of Standard Generalized

Markup Language. Deze standaard wordt onderhouden door de W3C8, het World Wide

Web Consortium. Zij produceert aanbevelingen. Dit zijn sets van regels die goedgekeurd

werden door de W3C en als dusdanig gebruikt worden bij de ontwikkeling van nieuwe

software enerzijds en de opmaak van documenten anderzijds.

Wij kozen ervoor om onze site uiteindelijk in XHTML9 weer te geven. Dit acroniem staat

voor eXtensible HyperText Markup Language. XHTML is de opvolger van HTML 4.01.

XHTML is eigenlijk een herformulatie van HTML volgens XML of eXtensible Markup

Language, een metataal die eveneens zijn oorsprong kent in SGML. De syntax van HTML

blijft echter ook in XHTML bewaard. De verschillen met traditionele HTML zijn eerder

klein. Het voornaamste verschil is de eis dat alle tags goed gevormd10 dienen te zijn.

Daarmee wordt ondermeer bedoeld dat een tag die geopend wordt altijd gesloten moet

worden. Ook mogen de verschillende tags niet overlappen.

De XHTML standaard incorporeert een nieuwe manier van denken over hoe een web

document beschreven moet worden. HTML wordt vaak gebruikt om niet alleen de logische

maar ook de fysische structuur van een document te beschrijven. De oorspronkelijke

bedoeling van HTML was om alleen de logische structuur van een webpagina te

beschrijven. Het beschrijven van de fysische structuur is een evolutie die plaatsgevonden

heeft na de opkomst van de visuele webbrowser. Dit brengt met zich mee dat veel van de

semantiek eigen aan HTML nauwelijks gerespecteerd wordt en zelfs verloren gaat.

XHTML grijpt terug naar een oorspronkelijk concept: HTML louter en alleen voor de

logische opmaak van een document gebruiken.

Het visuele aspect wordt daardoor volledig overgelaten aan nieuwe technologieën die

daartoe veel geschikter zijn. Men gebruikt enkel tags om de inhoudelijke en logische

6

structuur van een document te beschrijven. Tags en parameters die instaan voor de fysische

structuur worden verwijderd. Het visuele element van een tekst wordt dan ook bij voorkeur

in een apart opmaakdocument of stylesheet beschreven. We gaan verder dieper in op de

voordelen van stylesheets (cf. hoofdstuk 2.2).

De reden waarom wij voor XHTML kozen, is de grote compatibiliteit met de bestaande

browsers. De recente versies en een flink aantal oudere versies van populaire browsers

(Internet Explorer, Mozilla Firefox, Opera, enz.) ondersteunen XHTML. Het respecteren

van de XHTML standaard verzekert ons dat de logische structuur van een document

correct zal weergegeven worden op de meeste gangbare browsers.

2.2 CSS

CSS11 of Cascading Style Sheets is een taal die gebruikt wordt om de visuele presentatie

van een logisch gestructureerd document geschreven in HTML of XML te beschrijven. De

CSS standaard wordt net zoals HTML en XML vastgelegd door het World Wide Web

Consortium. De voornaamste bestaansreden van CSS is de scheiding van de logische

structuur en de visuele representatie van die structuur. Deze scheiding brengt een aantal

interessante voordelen met zich mee:

• Grotere toegankelijkheid van de inhoud

• Grotere flexibiliteit

• Betere controle over de fysische structuur van een document

• Gereduceerde complexiteit van de logische structuur van een webdocument

Deze voordelen leiden ertoe dat de lay-out van een document van een statisch gegeven

naar een dynamisch element overgaat. De stijl van een document kan op verschillende

manieren doorgegeven worden aan een web document 11:

• De Author Style wordt gedefinieerd door de maker van een document. Deze kan

doorgegeven worden via een externe stylesheet die in een apart document wordt

gespecifieerd, embedded in het HTML document zelf, of inline waarbij eenmalig

op een welbepaalde plaats de overkoepelende stijl wordt doorbroken.

• De User Style wordt gedefinieerd door diegene die op dat moment het document

consulteert. Het gaat om een lokale stylesheet die op alle HTML documenten wordt

toegepast.

7

• De User Agent Style is een standaard style sheet die door de user agent toegepast

wordt op alle HTML documenten. Het gaat hier om de standaard voorstelling van

HTML elementen door de user agent. Een user agent kan bijvoorbeeld een browser

zijn maar ook de software die mobiele toestellen in staat stelt HTML documenten

weer te geven.

Concreet zorgt het implementeren van de inhoud in een los document ervoor dat de

beschrijving van de fysische structuurelementen van een website gecentraliseerd wordt. De

overhead die het updaten of aanpassen van een structureel element met zich meebrengt,

wordt hierdoor geminimaliseerd. Gebruikers met een visuele handicap kunnen gemakkelijk

terug vallen op een aparte stylesheet waardoor ook voor hen de inhoud toegankelijk wordt.

Uiteindelijk wordt ook de HTML code vereenvoudigd aangezien de informatie met

betrekking tot het visuele aspect van een element in de stylesheet wordt beschreven.

Toch moeten we opletten voor een aantal gevaren dat het gebruik van embedded CSS met

zich meebrengt. In de eerste plaats verdwijnt het voordeel van een minimale overhead

wanneer we kiezen voor embedded CSS in alle webdocumenten. In de tweede plaats

vervalt bij embedded CSS de grote flexibiliteit die met een extern stijldocument meekomt.

Als men dan de stijl van een site wil aanpassen moet men op alle pagina’s van de site de

embedded stylesheet aanpassen. Dit moet vermeden worden. Het is beter om te opteren

voor de implementatie van een externe stylesheet en het weloverwogen gebruik van inline

CSS daar waar het verantwoord kan worden (meestal is dit een eenmalige afwijking van de

standaard stylesheet).

Tot slot geeft CSS aan de ontwerper een grote mate van vrijheid in het creëren van een lay-

out. Het bestaan van alle mogelijkheden die geïmplementeerd zijn in een CSS selector

vormt geen obligatie om deze te gebruiken. Vaak is het beter om bepaalde mogelijkheden

niet te implementeren dan wel. Een indrukwekkende lay-out zorgt vaak dat de inhoud van

een document minder gemakkelijk toegankelijk wordt. Het is dan ook een kwestie om een

evenwicht te vinden tussen estheticisme en toegankelijkheid12.

2.3 Keuze van de server-side scriptingtaal

Een belangrijke afweging die we moesten maken tijdens de ontwikkeling van dit project

was de keuze van de server-side scriptingtaal die we gingen gebruiken om op een

dynamische wijze de inhoud te beheren. Deze strijd liep vlug terug tot twee mogelijke

kandidaten, namelijk PHP en ASP.

8

2.3.1 PHP

PHP13 staat voor PHP: Hypertext Preprocessor. Het is een Open Source programmeertaal

die hoofdzakelijk gebruikt wordt om server-side applicaties te ontwikkelen die op een

dynamische wijze informatie aanbieden. PHP kan gezien worden als een alternatief voor

Microsofts ASP/VBScript, JSscript, Sun Microsystems JSP/Java en CGI/Perl. Qua syntax

leunt PHP het dichtst aan bij talen zoals C en Perl, waardoor ervaren programmeurs vrij

snel complexe toepassingen kunnen ontwikkelen. PHP heeft met andere woorden een

minimale leercurve. Diezelfde programmeurs kunnen daardoor heel snel overschakelen

van een ander domein naar de ontwikkeling van internettoepassingen die dynamisch

informatie aanbieden. Verder laat PHP een doorgedreven interactie met een groot aantal

relationele databasesystemen, zoals Oracle, MySQL, DB2 en PostgreSQL toe. PHP is

eveneens beschikbaar voor de meeste grote besturingssystemen zoals Unix, Linux,

Windows en Mac Os X enerzijds en een aantal webservers zoals Apache, Microsoft IIS,

Caudium, Zeus Web Server, e.a. anderzijds. De mogelijke combinaties om tot een

geïntegreerde configuratie tussen het besturingsysteem, de webserver, PHP en een

databankbeheerssysteem te komen zijn eindeloos. Een populaire architectuur die de laatste

jaren furore wist te maken is LAMP of de Linux Apache MySQL PHP/Perl architectuur.

Ten slotte laten versie 4 en 5 van PHP een objectgeoriënteerde aanpak toe. Vooral in versie

5, die momenteel in ontwikkeling is, worden de mogelijkheden daartoe uitgebreid14.

2.3.2 ASP

ASP, een belangrijk alternatief voor PHP, staat voor Active Server Pages. Het werd

ontwikkeld en verkocht door Microsoft als een randtoepassing voor IIS (Internet

Information Server). ASP is net als PHP een technologie die server-side werkzaam is en

dynamisch webpagina’s kan genereren. De meeste ASP scripts worden geschreven in

VBScript (Visual Basic Scripting Edition), een subset van Visual Basic15, hoewel ook

andere talen zoals JScript en PerlScript ondersteund worden. Begin 2002 werd ASP

vervangen door ASP.NET. Sindsdien kunnen ontwikkelaars gebruik maken van de

mogelijkheden die het .NET framework hen aanbiedt. In tegenstelling tot PHP is ASP een

gesloten formaat. Programmeurs zijn niet vrij om code toe te voegen of te wijzigen. ASP is

evenmin gratis. Hoewel het een geïntegreerd geheel vormt met het Windows

besturingssysteem en Microsoft’s IIS, is er een significante meerkost om ASP op een

alternatief platform te laten opereren. ASP is dan ook hoofdzakelijk een professionele

oplossing voor noden binnen de bedrijfswereld. Qua functionaliteit biedt ASP weliswaar

dezelfde mogelijkheden aan als PHP.

9

2.3.3 PHP versus ASP

Ondanks onze voorkennis en ervaring met PHP is het nodig om toch even de pro’s en

contra’s tussen deze twee grote talen aan de orde te brengen. We houden hierbij in

gedachten dat de punten die aan bod komen wel degelijk invloed hebben op ons eigen

project16.

• PHP leunt dichter aan bij Java dan ASP. In het kader van onze opleiding krijgen wij

een goede basis Java mee. PHP kent een groot aantal gelijkenissen met deze

hoogniveau programmeertaal wat betreft syntax. De syntax van ASP leunt

daarentegen veel dichter aan bij Visual Basic. De moeilijkheden waarmee wijzelf te

maken krijgen bij het overstappen van Java naar PHP zijn dan ook veel minder

groot dan een overstap naar VBScript en ASP. Binnen het opgelegde tijdsschema is

het dan ook logischer om de overstap naar PHP te maken.

• PHP is platformonafhankelijk. Het is mogelijk om een project te ontwikkelen in

een Windows omgeving terwijl het uiteindelijke doelplatform een LAMP-

configuratie kan zijn. Verder laat dit toe om op een flexibele manier de

geproduceerde PHP scripts eventueel te verhuizen tussen servers met een

verschillend besturingsplatform. Het onderhoud dat een dergelijke onderneming

met zich meebrengt blijft daardoor minimaal. ASP is echter platformafhankelijk.

ASP draait het meest betrouwbaar op de Microsoft Internet Information Services.

• PHP garandeert een grotere veiligheid. Dit moeten we direct nuanceren. Het gaat

om de veiligheid die een combinatie ASP/IIS/Windows met zich meebrengt. Deze

omgeving staat bekend omwille van de talloze veiligheidslekken die dagelijks

ontdekt worden. ASP is bovendien een commerciële programmeertaal in

tegenstelling tot het Open Source karakter van PHP. Dit brengt met zich mee dat de

mate waarin de veiligheid gegarandeerd kan worden volledig afhankelijk is van de

goodwill van Microsoft.

• Het coderen van algoritmen in PHP gebeurt efficiënter dan in ASP. Dezelfde

functionaliteit kan vaak bereikt worden met minder code in PHP dan in ASP. Een

typisch voorbeeld hiervan is het automatisch creëren van HTTP GET en POST

variabelen door PHP als global variables terwijl in ASP de informatie manueel

geëxtraheerd dient te worden uit een ASP Request Object. Dit komt ook de tijd

waarin een project dient uitgewerkt te worden ten goede.

10

• PHP is een van de populairste server-side scripting talen op het Internet17. Een van

de redenen hiervoor is het feit dat de syntax van PHP een grote mate van vrijheid

toelaat. Zo hoeven variabelen niet gedeclareerd te worden en speelt het datatype

van een variabele geen belang. Dit geldt ook voor de constructie van arrays in PHP.

Dit in tegenstelling tot veel andere talen zoals het populaire C en Java. Over de

populariteit van PHP bestaan een aantal studies. Uit een onderzoek dat Netcraft

voerde in april 2002 blijkt dat ongeveer 9 miljoen van de 37 miljoen domeinen die

men opnam, PHP ondersteunden. De statistieken van PHP.net tonen dat dit aantal

in mei 2003 al de kaap van het 13 miljoen had overschreden. Uit diezelfde cijfers

blijkt trouwens dat het huidige aantal servers, die PHP ondersteunen rond 15

miljoen schommelt (maart 2004).

Kortom, er zijn voldoende redenen om voor PHP te kiezen. De belangrijkste redenen voor

ons project: onze ruime voorkennis, de platformonafhankelijkheid van PHP en de

efficiëntie die ons toelaat algoritmen snel te coderen.

2.4 Javascript

Javascript18 is een programmeertaal die gebruikt wordt om client-side uitgevoerd te

worden. Javascript wordt voornamelijk gebruikt om de server te ontlasten, en ook om

clientspecifieke toepassingen uit te voeren, die onmogelijk server-side uitgevoerd kunnen

worden (zoals achterhalen van schermgrootte, bestanden opslaan,…). Nadeel is wel dat de

code altijd mee verstuurd moet worden naar de client. Daardoor heeft iedereen inzage in de

gebruikte programmacode. Om deze reden wordt enkel Javascript gebruikt daar waar het

noodzakelijk is. Waar het mogelijk is wordt met PHP gewerkt.

2.5 MySQL

MySQL19 is een relationeel databankmanagementsysteem. Een relationele databank heeft

als voornaamste kenmerken snelheid en flexibiliteit. In tegenstelling tot klassieke

databanken wordt de data in MySQL in verschillende tabellen bewaard die met elkaar

verbonden zijn via gedefinieerde relaties. Dit maakt het mogelijk informatie op verzoek te

combineren. Daarenboven is het mogelijk om door een relationeel

databankmanagementsysteem informatie toe te voegen, te verwijderen en aan te passen in

een databank. MySQL is bovendien open source, hoewel ook commerciële licenties

beschikbaar zijn.

11

MySQL werkt volgens het client/server model dat bestaat uit een multi-threaded SQL

server die een ruime waaier van bibliotheken, API’s, client programma’s, administratieve

tools en andere software ondersteunt. Ondersteuning voor MySQL wordt standaard met

PHP meegeleverd. PHP kent een uitgebreide set functies die toelaten om SQL

commando’s door de server te laten uitvoeren. Hierbij vermelden we opnieuw het belang

van de MySQL binnen de populaire LAMP architectuur. De inhoudelijke informatie van

de website wordt quasi volledig online bewaard in een MySQL database. Via de MySQL

ondersteuning binnen PHP kan specifieke informatie snel opgevraagd worden en via een

door PHP gegenereerd webdocument weergegeven worden.

Naast MySQL bestaan er ook andere databankmanagementsystemen zoals MS Access of

PostgreSQL. MySQL kent een aantal voordelen tegenover bijvoorbeeld MS Access20:

• Je kunt op een veelvoud aan manieren de databanken op een MySQL server

bevragen. Zo kan je een MySQL databank benaderen via MS Access, de standaard

MySQL client (via een command line interface of een GUI-frontend), via het web,

enz. Access heeft weliswaar eveneens mogelijkheden om via een

Linux/Apache/PHP configuratie benaderd te worden, maar deze zijn ondergeschikt

aan de functionaliteit die een LAMP-configuratie aanbiedt.

• MySQL is een multi-user systeem. MS Access beperkt zich tot lokaal single-user

gebruik. Een MySQL database kan door een veelvoud aan clients op hetzelfde

moment, ongeacht de plaats, bevraagd worden. MS Access leent zich hier niet zo

toe.

• MySQL is beter uitgewerkt op het vlak van veiligheid. Iedereen kan een

Accessdatabase downloaden en openen. In het beste geval kan een MS Access

database beveiligd worden met een paswoord. Access zelf kent geen beveiliging.

De MySQL-server is zo geconstrueerd dat het de veiligheid op zich neemt. Men is

verplicht het paswoord en de username van een gebruiker te kennen om een

verbinding te kunnen leggen met de MySQL-server. Overigens kan men binnen een

MySQL-server een ruim scala aan bevoegdheden toekennen of weigeren aan

gebruikers.

• MySQL is open source, wat wil zeggen dat men MySQL gratis kan verkrijgen en

mag aanpassen naar goeddunken, mits de code teruggegeven wordt aan de

gemeenschap. Overigens zijn een groot aantal mogelijke clients die met de MySQL

server een verbinding kunnen leggen eveneens open source. MS Access is echter

12

commerciële software waarvoor men relatief dure licentiekosten dient te betalen.

Daarbij komt dat MS Access enkel compatibel is met de Windows omgeving. Dit

brengt ook een gebondenheid qua hardware met zich mee. MySQL is

platformonafhankelijk, iets wat onder andere het migreren van gegevens ten goede

komt wanneer besloten wordt om naar een andere hostingdienst over te stappen

waar men gebruik maakt van een ander platform. De voorwaarde hier is dat de

nieuwe hostingdienst eveneens MySQL ondersteuning aanbiedt.

Voor de website van Caracalla kozen wij voor een MySQL. De hostingdienst waar de site

uiteindelijk haar onderkomen vindt, biedt namelijk geen alternatief aan. Ook het aspect van

de veiligheid speelt een voorname rol in onze voorkeur voor MySQL ondersteuning. De

database bevat namelijk heel wat vertrouwelijke informatie zoals emailadressen,

thuisadressen, telefoonnummers, paswoorden, loginnamen, enz. Het compromitteren van

deze gegevens valt niet te verantwoorden. Zoals gezegd wilden we van de mogelijkheden

die PHP ons biedt maximaal gebruik maken. De ondersteuning vanuit PHP naar MySQL

toe is superieur aan de ondersteuning van MS Access.

2.6 Hosting

De vroegere website van Caracalla is gevestigd op de persoonlijke webruimte van een

bestuurslid. Meer specifiek gaat het om webruimte geleverd door internetprovider Telenet.

Deze webruimte zit standaard in elk internetpakket van deze provider. We sommen even

de mogelijkheden op die dit pakket biedt21:

• 50MiB webruimte. Indien 50MiB onvoldoende blijkt, dan kan de webruimte per

blok van 10MiB tot 200MiB uitgebreid worden

• Actief tot deactivatie van het account

• Mogelijkheid tot subdomein (naam.telenet.be) of registratie van een domeinnaam

(naam.be )

• Trafiek: 0,5GiB/maand toegestaan per 10MiB webruimte. Voor de standaard

webruimte wordt dus 2,5GiB/maand datatrafiek toegelaten

• Mogelijkheid tot FTP

• Geen PHP/MySQL/CGI ondersteuning

13

Dit pakket volstaat ruimschoots voor een statische pagina. Zodra men ze ietwat dynamisch

wil maken, is men aangewezen op JavaScript of Java aangezien deze twee talen client-side

werkzaam zijn. Een dynamische website maken waarbij zelfgemaakte scripts server-side

verwerkt worden, is uitgesloten.

Gelukkig beschikt Matthias Vandermaesen (één van de schrijvers) over eigen webruimte

bij de hostingservice Flaxe webhosting22. Het pakket waarop hij geabonneerd is bevat wel

de nodige functionaliteit om een dynamische website te ondersteunen. Voor dit

thesisproject werd er dan ook een subdomein aangemaakt: http://caracalla.netsensei.nl. Er

werd eveneens een MySQL database toegekend samen met een deel van de beschikbare

webruimte. Hoewel dit slechts een tijdelijk onderkomen is (tot het bestuur van Caracalla

besloten heeft over te gaan tot de aanschaf van een eigen hostingpakket), is wel alle

functionaliteit beschikbaar die eveneens via een volwaardig hostingpakket wordt

aangeboden. We vermelden hier de inhoud van het totaalpakket die voor dit project

relevant is.

• PHP/CGI ondersteuning

• 20 MySQL databases

• 200MiB Webruimte

• 20 subdomeinen

• 1 domeinnaam naar keuze .be/.nl

• 3GiB verkeer per maand

• 15 FTP accounts

In onderlinge afspraak met het bestuur van Caracalla en gezien de technische vereisten

werd besloten om de website voorlopig onder dit account onder te brengen. Daartoe werd 1

MySQL database toegekend, één subdomein en één FTP account. Dataverkeer en gebruik

van webruimte zijn niet gelimiteerd aangezien de toekenning gebeurde in goed vertrouwen

en de hosting van tijdelijke aard is.

2.7 Gebruikte ontwikkelplatformen

Omwille van persoonlijke voorkeuren werd dit project deels ontwikkeld binnen een Linux

omgeving en deels binnen een Windows omgeving. Dit bracht als voordeel met zich mee

dat de PHP scripts en de gegenereerde HTML pagina’s geoptimaliseerd werden om op

14

beide platformen correct te werken. Migratie is mogelijk met een minimum aan

aanpassingen binnen de broncode.

Zowel binnen de Linux omgeving als de Windows omgeving werden recente versies van

volgende software geïnstalleerd en geconfigureerd:

• Apache v1.3.29 (Linux), v2.0.48 (Windows)

• MySQL v4.0.18

• PHP v4.3.4

We probeerden om zo accuraat mogelijk de online configuratie van de webruimte lokaal na

te bootsen. Zo konden we efficiënt en snel werken aan de broncode en hadden we direct

zicht op de resultaten. Daardoor hadden we een betere greep op de ontwikkeling van de

website.

Binnen een eenvoudige netwerkomgeving konden we de website op beide platformen

testen. Eveneens konden we eenvoudig bestanden uitwisselen zodat we zeker waren steeds

met de meest recente versie te werken.

2.8 Gebruikte tools

2.8.1 Dreamweaver MX

Dreamweaver23 is een veelzijdige WYSIWYG editor voor Windows die toelaat om

eenvoudige webpagina’s te bouwen. We geven hier een klein overzichtje van de features

die voor ons het meeste nuttigst waren tijdens de ontwikkeling van ons project:

• De gebruiksvriendelijke interface laat toe om simultaan een aantal documenten te

bewerken in dezelfde instantie van Dreamweaver. De interface levert heel wat

feedback over de geschreven code en de interface vergemakkelijkt het bouwen van

een website aanzienlijk.

• We gebruikten Dreamweaver om vooral PHP scripts uit te werken en in tweede

instantie de gegenereerde HTML. De WYSIWYG mogelijkheden die deze editor

ons bood waren daarom eerder ondergeschikt van aard. We werkten hoofdzakelijk

in ‘code’ view om toegang te hebben tot de code. Dreamweaver herkent de

gangbare syntax van PHP, HTML, CSS en JavaScript. De code wordt door

Dreamweaver gemarkeerd met kleuren waardoor alles veel overzichtelijker wordt.

15

Tot slot checkt Dreamweaver de code ook nog eens en geeft hints daar waar de

syntax als incorrect wordt geïnterpreteerd.

• Een eenvoudige verkenner geeft een accuraat beeld van de folderstructuur.

Hierdoor is het mogelijk om snel en efficiënt bestanden vanaf de juiste plaats te

openen en te bewerken. De verkenner laat toe om de bestanden per project te

groeperen zodat men aan meerdere webprojecten tegelijk kan werken zonder dat

bestanden in het verkeerde project dreigen te verzeilen.

• Dreamweaver bezit eveneens een handige feature die toelaat de compatibiliteit van

het document met een ruime waaier browsers te checken. Het gaat hier om alle

versies van Internet Explorer, Netscape Navigator en Opera. Zo wordt het mogelijk

om te zien of de code wel correct door de meest gangbare browsers weergegeven

wordt.

Los van deze browser checker bevat Dreamweaver ook een geïntegreerde validator

die controleert of de HTML code correct valideert tegenover het gedefinieerde

DOCTYPE (Document Type Declaration). Het gevaar bestaat echter dat de

standaarden vastgelegd door de W3C door de makers van Dreamweaver niet

gerespecteerd worden. Dit vormde een probleem in vroegere versies van

Dreamweaver 24.

• Een andere feature is de uitgebreide bibliotheek die met Dreamweaver komt. Zo

hadden we de O’Reilly HTML/CSS reference tot onze beschikking. Jammer genoeg

bezit Dreamweaver geen referentie met betrekking tot PHP, dit in tegenstelling tot

ASP. Er is eveneens een uitgebreide bibliotheek met stukjes kant-en-klare code die

onmiddellijk geïntegreerd kunnen worden in de pagina. Hier maakten we echter

géén gebruik van omdat deze mogelijk de compatibiliteit kon schaden.

Daarenboven probeerden we een uniforme lay-out te bekomen.

• Tot slot vermelden we het bestaan van een vrij uitgebreide preview functie. Te

allen tijde is het mogelijk om op de functietoets F12 te drukken en zo de resultaten

van de code te zien. Daarenboven is het mogelijk om deze functie te integreren met

webservers zoals Apache of IIS. Zo wordt het mogelijk om direct het resultaat te

zien via de webserver.

16

2.8.2 KWrite

KWrite25 is een standaard editor die mee geleverd wordt met KDE, een desktopmanager

voor de grafische interface van Linux. KWrite is gelicencieerd onder de GPL wat betekent

dat deze software gratis gedistribueerd mag worden en de broncode beschikbaar is. KWrite

is een alternatief voor meer geavanceerde editors zoals Emacs. Een meer uitgewerkte

versie van KWrite is Kate dat eveneens mee met KDE wordt verscheept. Qua

gebruiksgemak kan men KWrite nog het beste vergelijken met Wordpad of Kladblok in

Windows. Een van de handige features is dat KWrite de PHP syntax herkent en als

dusdanig van een gekleurde ‘highlighting’ voorziet net zoals Dreamweaver. Verder

ontbreekt in KWrite zaken zoals het controleren van verkeerde syntax, een uitgebreide

interface, enz.

Het voordeel van KWrite is de performantie en het gebruiksgemak. KWrite behoeft géén

uitgebreide configuratie en eenmaal opgestart kan men onmiddellijk aan de slag.

2.8.3 Photoshop

Hoewel we kozen voor een eerder sobere vormgeving waarbij we voornamelijk op CSS

rekenden voor de grafische ondersteuning, konden we er niet onder uit dat we een aantal

elementen als afbeelding moesten weergeven. In hoofdzaak gaat het hier om de banner die

als titel dienst doet en een uithangbord vormt voor de website. Om deze titelafbeelding te

ontwerpen is er een ruim aanbod van tools, gaande van het minimale, standaard met

Windows geleverde Paint, het onder de GPL gelicencieerde GIMP26 en het commerciële

Photoshop. Onze voorkeur ging naar Photoshop27. Hoewel GIMP een krachtige tool is voor

grafische ontwerpers, is de interface nogal chaotisch en zeker niet intuïtief. Een eerste

ontwerp in de GIMP leverde dan ook niet het gewenste resultaat. Wel had één van de

auteurs enige ervaring in het werken met Photoshop. Er werd dan ook naar Photoshop

overgeschakeld om de banner en een aantal kleinere, minder complexe elementen verder te

ontwerpen en uit te werken.

2.8.4 SmartFTP en GFTP

Om de bestanden up te loaden naar de webruimte op het Internet werd er gebruik gemaakt

van FTP of File Transfer Protocol. De clients die we daartoe gebruikten zijn enerzijds

SmartFTP28 voor Windows en GFTP29 voor Linux. Onze voorkeur ging uit naar software

die gebruiksvriendelijk was en ons toeliet op een snelle en efficiënte manier de bestanden

op het Internet te plaatsen.

17

Hoofdstuk 3 Vaststellen functionele eisen

3.1 Inleiding

In de planningsfase werd nagegaan wat de functionele eisen en de beperkingen waren

waarmee bij de ontwikkeling van de site rekening moet gehouden worden. De functionele

eisen omschrijven wat er van de site verwacht wordt: welke inhoud, de interactiviteit met

de gebruiker, de mogelijkheden, enz. Bij de ontwikkeling van de site moet evenwel ook

rekening gehouden worden met eventuele beperkingen, welke vaak van technische aard

zijn. Na het vaststellen van de functionele eisen en beperkingen werd dan overgegaan tot

het schematisch ontwerp van de site.

3.2 Vastleggen van de functionele eisen

Alvorens van start te gaan met het ontwerpen van de website was het noodzakelijk om na

te gaan welke functionaliteit de nieuwe, dynamische website moest bieden. Daartoe werd

er een informeel gesprek gehouden met twee bestuursleden van Caracalla: Wouter De

Clercq en Joost Decock.

Wouter is de huidige webmaster van Caracalla. De site was toen nog niet dynamisch

opgebouwd en zodoende stond Wouter in voor het volledige beheer van de site. Alle

bestuursleden moesten Wouter contacteren om een activiteit, nieuwsbericht of een reeks

foto’s op de site te zetten. Gezien de drukke agenda van de bestuursleden kon het zijn dat

Wouter te laat gewaarschuwd werd en dat daardoor de site soms veel te laat geüpdatet

werd.

18

Voor Joost en Wouter was dit dan ook de belangrijkste reden om een nieuwe site te laten

ontwikkelen voor Caracalla. Een nieuwe site zou het voor alle bestuursleden mogelijk

moeten maken om zelf nieuwsfeiten, activiteiten en foto’s online te zetten zonder

tussenkomst van een webmaster. Dit zou de flexibiliteit verhogen: de leden kunnen op een

snelle en effectieve manier gewaarschuwd worden van o.a. nieuwe activiteiten.

Al snel werd duidelijk dat de site zeker moest beschikken over een nieuwspagina, een

agendapagina, een fotopagina en een pagina waar de bezoeker meer informatie kon vinden

over Caracalla. Ook was er vraag naar een soort van babbelbox, waar bezoekers een

berichtje konden achterlaten.

Uiteindelijk werd ook duidelijk dat het voor de bestuursleden handig zou zijn om ook de

gegevens van de leden bij te houden via de site. Zo kunnen alle bestuursleden beschikken

over een ‘up to date’ ledenbestand. Met dit ledenbestand zou het mogelijk zijn om

bijvoorbeeld de leden via email te informeren en inschrijvingen voor activiteiten bij te

houden.

3.3 Beperkingen van de site

Bij het ontwikkelen van een dynamische site kan men niet alle functionele eisen gewoon

beginnen ontwikkelen. Vaak heeft men te kampen met enkele beperkingen. Een voorbeeld

van zo’n beperking is dat de hostingsdienst van de site niet alle mogelijke technologieën

ondersteunt. Ook legt de hostingsdienst vaak extra beperkingen op zoals maximale

webruimte, een maximale transfervolume per maand, een beperkt aantal MySQL

databases, enz. Bij de ontwikkeling van de site is rekening gehouden met deze

beperkingen. Zo wordt onder andere door het gebruik van thumbnails (kopie van een foto

in een kleinere afmeting, ongeveer zo groot als een postzegel) geprobeerd om het

transfervolume zo laag mogelijk te houden.

19

Hoofdstuk 4

Algemene aspecten van de site

In de volgende drie hoofdstukken wordt besproken hoe de site opgebouwd is. Dit

hoofdstuk handelt over de algemene structuur van de site. Hierbij wordt ondermeer

vermeld wie de verschillende gebruikers zijn van de site, hoe de site is opgebouwd

(modules en interfaces), hoe de lay-out verzorgd werd, enz. Hoofdstuk 5 geeft een

overzicht van de functionaliteit van de verschillende pagina’s waaruit de site is opgebouwd

en Hoofdstuk 6 handelt over de gebruikte SQL-tabellen.

4.1 Overzicht van de verschillende gebruikers van de site

Niet alle gebruikers van de site hebben toegang tot alle pagina’s. Om de gebruikers van

elkaar te kunnen scheiden hebben we alle bezoekers ingedeeld in vier verschillende klassen

met elk een eigen ‘toegangsniveau’. De eerste groep zijn de gewone bezoekers. Deze

hebben enkel toegang tot het publiek gedeelte van de site (nieuwspagina, agenda,

fotopagina en babbelbox). De gewone bezoekers kunnen eveneens een bericht achterlaten

op de babbelbox.

De volgende gebruikersgroep zijn de leden. Deze kunnen zich kenbaar maken door in te

loggen. Een lid kan zichzelf niet inschrijven op de site. Van zodra iemand lid wordt van

Caracalla zal een bestuurslid het lid inschrijven en een paswoord en een unieke

gebruikersnaam aanmaken. De leden kunnen alles doen wat een gewone bezoeker kan.

Voorts kunnen zij hun eigen eerder geposte berichten in de babbelbox aanpassen en

verwijderen. De leden kunnen zich ook inschrijven voor een bepaalde activiteit. Verder

20

beschikken de leden over de mogelijkheid om hun eigen profiel binnen het ledenbestand

aan te passen. Zo kan een lid gemakkelijk een adresverandering doorgeven, zijn paswoord

wijzigen, enz. Deze wijzigingen zijn dan onmiddellijk beschikbaar voor de bestuursleden.

De derde groep van gebruikers zijn de bestuursleden. Deze beschikken over een

uitgebreide functionaliteit: nieuwsberichten toevoegen of verwijderen, agendapunten

toevoegen, aanpassen of verwijderen, de inschrijvingen voor activiteiten beheren, foto’s

toevoegen of verwijderen, leden toevoegen, verwijderen of hun profiel aanpassen, enz.

De laatste groep van gebruikers zijn de systeem administrators. Deze hebben een

volledige controle over de site. Alles wat een bezoeker, lid of bestuurslid verandert, kan

opnieuw aangepast worden door de systeem administrators. Zo kunnen ze alle items in de

babbelbox aanpassen of verwijderen, wachtwoorden achterhalen, enz. Dit alles kadert

binnen het technisch onderhoud van de website, wat hun verantwoordelijkheid is.

4.2 Structuur van de site

Na het bepalen van de verschillende soorten gebruikers werd begonnen met het ontwerpen

van de structuur van de website. Deze werd onderverdeeld in twee hoofdgedeelten: een

publiek gedeelte dat bereikbaar is voor elke bezoeker (nieuws-, agenda- en fotopagina en

babbelbox) en een beheersgedeelte waar er extra functionaliteit voorzien is voor

geregistreerde leden (beheer van hun eigen profiel), bestuursleden (nieuws-, agenda-, foto-

en ledenbeheer) en vanwaar de systeembeheerder uiteindelijk alle noodzakelijke

onderhoud kan verrichten.

Aan de hand van dit model werd de huidige site ontwikkeld. Om praktische en functionele

redenen werd de scheiding tussen het publiek gedeelte en het administrator gedeelte niet

altijd strikt nageleefd. Sommige delen werden zelfs gecombineerd (bijvoorbeeld babbelbox

en het inschrijven voor een bepaalde activiteit).

4.3 Interfaces & modules

Een site is nooit af. Wanneer een site in gebruik is genomen, blijft regelmatig onderhoud

een noodzaak. Veel bestaande sites laten echter niet toe om op een gebruiksvriendelijke

manier extra functies te implementeren zonder de broncode volledig aan te passen. Tijdens

de ontwerpfase van dit project hebben wij geprobeerd rekening te houden met het feit dat

de site ook in de toekomst nog regelmatig aangepast zal moeten worden.

21

Om het onderhoud te vergemakkelijken hebben we geprobeerd te werken met modules.

Om de werking van deze modules uit te leggen zullen we ons concentreren op het

administratorgedeelte van de site (de beheerspagina). Zo bestaat de beheerspagina uit een

indexpagina (index.php), heeft elke module een interface (zoals news_management.php en

user_management.php) en bestaan de verschillende modules uit groepen scripts die in een

eigen submap zitten (zoals de mappen newsmanagement en usermanagement).

Op deze manier hebben we de website structuur zo eenvoudig mogelijk proberen houden.

4.3.1 Werken met modules

De indexpagina komt via de informatie uit de tabel ‘panel_content’ te weten welke

interfaces er allemaal bestaan voor de verschillende modules. Deze interfaces verschijnen

dan als link in het navigatiepaneel (bijvoorbeeld ‘nieuws beheer’ en ‘profiel beheer’). Deze

links worden uit de MySQL database gehaald, waar in een tabel bijgehouden wordt welke

modules er zijn en voor welke gebruikers deze toegankelijk zijn. Als men op één van deze

links klikt, dan wordt de indexpagina herladen en worden volgende GET-variabelen via de

URL doorgegeven: page (die de naam van de interface bevat en die boven de interface

verschijnt als titel) en link (die de bestandsnaam van de interface bevat). Aan de hand van

deze twee variabelen wordt de juiste interface opgeroepen. Deze wordt geïncludeerd in de

indexpagina. Indien link en page in de URL ontbreken, wordt automatisch de

standaardpagina geladen.

De interface laadt op zijn beurt de juiste pagina van de module. Dit kan omdat via de URL

ook de GET-variabele pageid wordt doorgegeven. Deze variabele bevat de naam van de

pagina die uit een bepaalde module opgeroepen moet worden. Ontbreekt deze variabele,

dan moet ook hier een standaardpagina geladen worden. Meestal is deze standaardpagina

de interface zelf.

Als een bepaalde pagina uit een module herladen moet worden (bijvoorbeeld na het

invoeren van gegevens via een formulier), dan wordt altijd de indexpagina opgeroepen

waarbij minstens de drie bovenstaande variabelen (page, link en pageid) worden

doorgegeven via de URL. Andere variabelen die eventueel nog doorgegeven zouden

worden via de URL, zijn dan bedoeld voor verder intern gebruik in de module.

4.3.2 Het toevoegen van een module

Als er een module toegevoegd wordt, dan moet eerst de nieuwe interfacepagina

toegevoegd worden aan de site. Dit kan door de naam en de plaats van de interface toe te

22

voegen aan het bestand ‘panel_content.inc.php’ in de map ‘/install/’ Vervolgens moet men

via ‘index.php’ in de map ‘/install/’ de tabel ‘panel_content’ opnieuw aanmaken. Vanaf

dan is er een link toegevoegd in het navigatiegedeelte van de indexpagina en is de interface

dus te bereiken via de beheerspagina. Vervolgens kan men beginnen met het ontwikkelen

van de verschillende pagina’s van de nieuwe module. Om de pagina's binnen de module op

het scherm te laten verschijnen, moet dan nog enkel de interface zelf aangepast worden.

Aan de andere pagina’s van de site moet niet meer geraakt worden.

Dit is juist het voordeel van de interface: indien men de indexpagina aanpast, dan moet

men niets veranderen aan de interfaces of modules, zolang de verschillende interfaces nog

altijd opgeroepen worden via de variabelen ‘link’ en ‘page’ (mocht dit veranderen, dan zou

men alle links op alle pagina’s van alle modules moeten aanpassen). Voorts kan men een

module aanpassen (pagina’s toevoegen/verwijderen) zonder dat de indexpagina daar iets

moet van afweten. Zolang de indexpagina de interfacepagina kan bereiken is er geen

probleem. Ook de interface zelf mag aangepast worden, zolang dit conform is met de eisen

van de indexpagina (doorgeven van de gepaste variabelen via de URL) en met de modules

(moeten nog altijd via de interface opgeroepen kunnen worden).

Dit zorgt voor een grote onderhoudbaarheid van de site. De functionaliteit van de site kan

aangepast worden zonder dat men iets moet veranderen aan de code van de indexpagina.

Zo vermijdt men mogelijke fouten die eventueel zouden kunnen optreden door het

aanpassen van de broncode.

Uiteraard werkt niet alleen de beheerspagina met modules, maar ook de hoofdpagina van

de site. Hier kunnen we wel de bemerking maken dat sommige modules slechts uit één

pagina bestaan. Daarom zijn sommige modules geïntegreerd in de interface zelf. Men kan

eenvoudig een interface naar een module in de hoofdpagina installeren door het bestand

‘main_content.inc.php’ in de map ‘/install/’ aan te passen en de tabel ‘main_content’ via

‘index.php’ te hermaken in dezelfde map.

4.4 Stylesheets

Zoals eerder vermeld is er een strikte scheiding tussen de inhoud van de site en de opmaak.

De opmaak is volledig ondergebracht in een CSS stylesheet. Om dit te benadrukken

hebben we verschillende stylesheets gemaakt. Via de knoppen links onderaan de site kan

men van stylesheet veranderen en dus de kleuren van de site aanpassen. Men heeft de

keuze tussen geel, groen en rood.

23

Voor het beheersgedeelte is er maar één enkele stylesheet aangemaakt omdat dit gedeelte

vooral te maken heeft met het beheer van de site en niet zozeer behoort tot het publieke

gedeelte.

4.5 Functies

Tijdens het programmeren bleek algauw dat sommige functies vaak herhaald werden.

Daarom hebben we in de map ‘/lib/’ het bestand ‘functions.php’ aangemaakt. Daarin

werden de verschillende functies ondergebracht die vaak opgeroepen worden. Het bestand

‘functions.php’ wordt automatisch ingevoegd in de indexpagina zodat alle functies

beschikbaar zijn zonder dat het bestand ‘functions.php’ expliciet opgeroepen moet worden

in de verschillende subpagina’s.

Hieronder volgt een overzicht van de functies die opgenomen zijn in het bestand

‘functions.php’. Deze functies hebben de schrijvers van deze thesis zelf ontwikkeld, tenzij

anders vermeld

4.5.1 function is_valid_email($var)

Deze functie controleert of een opgegeven emailadres inderdaad een emailadres is. Daarbij

wordt op volgende zaken gelet:

• voor het @-teken kunnen cijfers, letters en volgende symbolen voorkomen: . \ - _

• na het @-teken volgt de domeinnaam. Daarin kunnen dezelfde tekens voorkomen

als voor het @-teken, behalve “_”.

• Na het laatste punt mogen er alleen letters of cijfers voorkomen met een lengte

tussen twee en vier tekens (b.v.: .be, .com en .info).

Deze functie controleert of het emailadres goed gevormd is, niet of het daadwerkelijk

bestaat. Bedoeling van deze functie is dan ook om eventuele fouten bij het invoeren van

een emailadres zo klein mogelijk te maken. Deze functie is gehaald van de site

‘http://www.php.net’, maar werd nog geoptimaliseerd.

4.5.2 function is_valid_euroNumber($var)

Deze functie gaat na of een ingevoerd getal een geldig getal in euro is. Hierbij wordt

gecontroleerd of er minstens één cijfer is voor de komma en of er juist twee cijfers zijn na

de komma.

24

4.5.3 function decimal_point_to_comma($var)

In een MySQL database worden alle getallen opgeslagen volgens de Amerikaanse notatie.

Dit wil zeggen dat kommagetallen opgeslagen worden met een punt. Bij het invoegen van

een getal in de MySQL database gebeurt deze conversie automatisch. Als men echter de

gegevens ophaalt uit de database, dan gebeurt de conversie van punt naar komma niet

automatisch, vandaar deze functie.

4.5.4 function datum_nl($datefield)

Datums worden in een MySQL database opgeslagen volgens de Amerikaanse

datumnotatie: YY/mm/dd (jaar/maand/dag bv: 2004/03/24). De functie datum_nl zet de

Amerikaanse datumnotatie om naar de Belgische datumnotatie (dd/mm/YY).

De omgekeerde functie (van Belgische naar Amerikaanse datumnotatie) is niet voorzien

omdat bij het aanmaken van een datum automatisch altijd de Amerikaanse datumnotatie

wordt aangemaakt. Om een datum op het scherm te tonen wordt dan gebruikt gemaakt van

de functies datum_nl en date_long_notation.

4.5.5 function date_long_notation($datefield)

Deze functie zet de Amerikaans datumnotatie 2004/03/24 om naar volgende Belgische

datumnotatie: woensdag 24 maart 2004. Deze functie werd gehaald van de site

‘http://www.php.net’ en was oorspronkelijk gemaakt voor het weergeven van de Engelse

datumnotatie. Deze functie werd aangepast aan de behoeften van deze site.

4.5.6 function style_title($userStyleSheet)

Door het werken met CSS wordt de site optimaal weergegeven in alle resoluties (van

800*600 tot 1280*1024 pixels). Het enige probleem was de grootte van de banner die

bovenaan elke pagina van het publiek gedeelte van de site verschijnt. Bij een resolutie van

800 op 600 viel de banner veel te groot uit. Bij een resolutie van 1280 op 1024 veel te

klein. Daarom zijn er voor elke kleur verschillende banners met een aparte grootte

voorzien.

De functie style_title controleert eerst welke stylesheet toegepast wordt en controleert dan

de breedte van het scherm via JavaScript. Uiteindelijk wordt de gepaste banner (juiste

kleur en juiste grootte) weergegeven.

25

4.5.7 function style_corner($userStyleSheet)

Deze functie wordt gebruikt om bepaalde elementen op de site aan te passen aan de

gebruikte stylesheets. Op sommige plaatsen in de site wordt namelijk gebruik gemaakt van

afbeeldingen om bepaalde visuele aspecten naar voren te laten komen. Bij het veranderen

van stylesheet moeten deze afbeeldingen ook veranderen.

Deze functie controleert eerst welke stylesheet er momenteel gebruikt wordt en toont

vervolgens de gepaste afbeelding.

4.5.8 function style_arrow_left($userStyleSheet)

In het fotoalbum wordt gebruik gemaakt van pijlen (dit zijn afbeeldingen) om naar de

volgende of vorige foto te gaan. Deze pijlen moeten aangepast worden naargelang de

stylesheet die de gebruiker gekozen heeft.

Deze functie controleert welke stylesheet er momenteel gebruikt wordt en toont vervolgens

de linkerpijl in de juiste kleur.

4.5.9 function style_arrow_right($userStyleSheet)

Idem als voorgaande functie maar dan voor de rechterpijl.

4.5.10 function purge($dir)

Deze functie maakt een opgegeven directory leeg. Dit wordt gebruikt om de map /uploads

te legen bij het toevoegen van een aantal nieuwe foto’s. Ook wordt deze functie gebruikt

bij het verwijderen van een fotoalbum. Deze functie werd gehaald van de site

‘http://www.php.net’.

26

Hoofdstuk 5 Overzicht functionaliteit per pagina

In dit gedeelte wordt de praktische implementatie van de site beschreven. Hiervoor wordt

de functionaliteit pagina per pagina besproken. Dit mag niet opgevat worden als een

handleiding van de site. Er wordt enkel gefocusseerd op de functionaliteit ‘an sich’, niet op

de handelingen die een gebruiker moet stellen om van de aangeboden diensten gebruik te

maken.

5.1 Publiek gedeelte

5.1.1 Hoofdpagina

Om de beginpagina te creëren hebben we ons eerst in de plaats gesteld van de bezoeker

van de site. Hierbij zochten we een antwoord op volgende vraag: “Waarom gaat een

bezoeker naar de site en wat wil hij te weten komen?”. Om dit te achterhalen hebben we

een informeel gesprek gevoerd met enkele leden van Caracalla. We verzamelden heel wat

verzuchtingen en nuttige opmerkingen. Volgende zaken werden het meest aangehaald:

• De hoofdreden om de site te bezoeken is dat de leden zich meer willen informeren

over de komende activiteiten. Daarbij zijn ze vooral geïnteresseerd in informatie

over de eerstvolgende activiteit. Ze willen nog snel kunnen nagaan om welk uur

een activiteit van start gaat, waar men moet verzamelen, enz.

• Een volgende reden waarom de leden de site zouden bezoeken is het fotoboek.

Graag kijken ze eens naar de foto’s om herinneringen aan een bepaalde activiteit op

te halen. Vaak gaan leden vlak na een activiteit naar de site surfen om te zien of de

foto’s al online staan.

27

• Nog een reden die werd aangegeven is dat er ook leden zijn die de babbelbox

willen volgen.

• Ook zijn er leden die graag alles volgen en gewoon snel willen te weten komen of

er al nieuwe zaken op de site geplaatst werden.

Bij het ontwerpen van de startpagina hebben wij bovenstaande vaststellingen in rekening

gebracht. De bezoeker van de site kan nu, van zodra de hoofdpagina geladen wordt, in één

oogopslag zien wat de eerstvolgende activiteit is, of er een bericht toegevoegd is aan de

babbelbox en of er foto’s zijn toegevoegd aan het fotoalbum. Dit kan aan de hand van de

drie kaders die bovenaan de pagina staan (zie Figuur 1)

Figuur 1: De hoofdpagina van de site

Verder staat op de rest van de pagina de laatste nieuwtjes: hierop kunnen de leden zien of

de site geüpdatet is, of er een extra bericht is in verband met een bepaalde activiteit, of er

een oproep aan de leden is, enz. Ook wordt de inhoud van deze nieuwspagina aangepast

naargelang het toegangsniveau van de bezoeker. Daartoe werd ook aan de nieuwsberichten

een toegangsniveau toegekend. Een gewone bezoeker en een lid zien hetzelfde. Wanneer er

28

echter een bestuurslid inlogt, dan ziet deze ook de nieuwsberichten die enkel voor

bestuurders zichtbaar mogen zijn. Ook de systeemadministrators kunnen hier berichten

plaatsen die enkel door andere systeemadministrators gelezen kunnen worden.

5.1.2 Agenda

Op deze pagina staat de kalender voor de komende weken. Hier kunnen de bezoekers zien

welke activiteiten er zijn, wanneer ze doorgaan, wat de prijs is, of men al dan niet op

voorhand moet inschrijven, enz.

Als men op voorhand moet inschrijven, en men ingelogd is als lid, dan kan men zich op

deze pagina meteen ook inschrijven voor de activiteit. Daarna verschijnt er nog een scherm

waar men kan opgeven met hoeveel personen men komt en waar men de inschrijving kan

bevestigen. Al deze gegevens worden vervolgens opgeslagen in de tabel ‘participants’.

Een lid heeft echter niet de mogelijkheid om zich uit te schrijven voor een activiteit

waarvoor hij ingeschreven is. Dit werd opzettelijk zo voorzien omdat het verloop van de

inschrijvingen anders te onoverzichtelijk zou worden voor de bestuursleden. Soms zijn er

meer inschrijvingen dan plaatsen. De plaatsen worden verdeeld op een first come, first

serve basis. Hiertoe wordt voor ieder lid de datum van inschrijving bijgehouden. Latere

aanpassingen aan de inschrijving door de leden zelf leiden tot een beduidend hogere

complexiteit in het toekennen van beschikbare plaatsen aan de ingeschreven leden. Daarom

werd beslist dat men voor het uitschrijven of het veranderen van het aantal personen

iemand van het bestuur moet contacteren.

5.1.3 Babbelbox

Op deze pagina kunnen zowel leden als niet-leden een berichtje achterlaten. Om de pagina

niet te groot te maken is het aantal berichten dat op één pagina verschijnt, beperkt tot

vijftien. Onderaan de pagina kan men dan verder navigeren naar de andere berichten in de

babbelbox.

Een niet-lid moet zijn naam, emailadres en huidige verblijfplaats invullen om een berichtje

te plaatsen. Komt de naam en/of emailadres echter overeen met de gegevens van een

geregistreerd lid, dan wordt er verzocht om in te loggen, dit om misbruik te vermijden. Op

deze manier wordt namelijk vermeden dat niet-leden een bericht kunnen posten in naam

van een geregistreerd lid. Als alle velden ingevuld zijn, wordt het bericht opgeslagen in de

tabel ‘guestbook’.

29

Bij een ingelogd lid worde de naam en het emailadres automatisch overgenomen uit de

database. Hij kan dit niet zelf aanpassen. Mocht een lid zijn emailadres veranderen bij

profielbeheer, dan wordt altijd het juiste emailadres getoond. Een lid kan buiten het bericht

enkel de plaats van waaruit men het bericht schrijft aanpassen. Als men dan bijvoorbeeld

een bericht opstelt vanuit een andere plaats dan de woonplaats (bijvoorbeeld als men in het

buitenland zit), dan kan het lid dit op deze manier laten weten.

Een ingelogd lid heeft verder nog de mogelijkheid om zijn eigen geposte berichten aan te

passen of te verwijderen. Zo kunnen eventuele typ- of andere fouten verbeterd worden.

Bestuursleden hebben niet de mogelijkheid om de posts van anderen aan te passen. Enkel

de systeemadministrators hebben hiertoe de bevoegdheid. Ook is het niet mogelijk om

HTML-tags in het bericht te zetten. Dit omdat deze tags anders de normale werking van de

site zouden kunnen verstoren.

5.1.4 Fotobox

Op deze pagina kunnen de bezoekers de verschillende fotoalbums bekijken. Als men naar

deze pagina surft, dan heeft men een overzicht van de verschillende fotoalbums, gesorteerd

volgens de datum waarop activiteit plaats had. De jongste activiteiten staan bovenaan (zie

Figuur 2).

Figuur 2: Overzicht van de verschillende fotoalbums

30

Als men op een fotoalbum klikt, dan krijgt men een overzicht van alle foto’s van het

fotoalbum. Deze afbeeldingen zijn verkleinde kopieën (thumbnails) van het origineel die

elk maximaal vijf kilobyte groot zijn. Op deze manier kunnen alle foto’s steeds getoond

worden zonder de server of de verbinding te overbelasten. Als men een foto beter wil

bekijken, kan men op deze foto klikken om een grotere afbeelding te verkrijgen. Onder de

foto wordt commentaar afgebeeld zodat het voor de bezoeker van de site duidelijk wordt in

welke context de foto getrokken werd. Voorts is er een duidelijke navigatie voorzien om

naar de volgende en vorige foto te gaan.

Bestuursleden die ingelogd zijn, kunnen op deze pagina ook een foto verwijderen of de

commentaar bij een foto toevoegen of aanpassen. Een fotoalbum in zijn geheel verwijderen

kan enkel in het administrator gedeelte. Als een bestuurslid een foto verwijdert, dan wordt

deze niet alleen uit de tabel ‘photo’ verwijderd, maar ook de foto zelf en zijn thumbnail

worden fysiek verwijderd van de server.

Op veel sites worden foto’s redelijk groot uitgebeeld zodat men (vooral als men een klein

scherm heeft) vaak moet scrollen om de foto in zijn geheel te zien. Om dit op te vermijden

wordt de grootte van het scherm via JavaScript nagegaan. Indien de resolutie kleiner is dan

duizend pixels wordt een kleinere foto getoond.

5.1.5 Links

Caracalla is niet de enige site die beschikbaar is op het wereldwijde web. Daarom hebben

de bestuursleden van Caracalla de mogelijkheid om links toe te voegen die interessant zijn

voor de bezoeker van de site. Op deze pagina krijgen de bezoekers de links te zien.

5.1.6 Over Caracalla

In deze sectie wordt de bezoeker van de site duidelijk gemaakt wat Caracalla is. Deze

sectie is onderverdeeld in vier pagina’s. Deze pagina’s zijn, in tegenstelling tot de andere

delen van de hoofdpagina, niet dynamisch. Dit omdat deze niet vaak geüpdatet dienen te

worden.

5.1.6.1 Wat is Caracalla

Als men surft naar ‘Over Caracalla’ dan wordt deze pagina standaard geladen. Hier wordt

kort aan de bezoeker uitgelegd wat Caracalla eigenlijk is.

31

5.1.6.2

5.1.6.3

5.1.6.4

Geschiedenis

Op deze pagina krijgt de bezoeker een overzicht van de geschiedenis van Caracalla. Hier

wordt onder andere verteld wanneer Caracalla gesticht is en wordt een een beknopt

overzicht gegeven van de geschiedenis van de jongerenvereniging, gaande van de

oprichting, over ‘Rock Caracalla’, tot de huidige situatie.

Rock Caracalla

Rock Caracalla is het belangrijkste wapenfeit uit de geschiedenis van Caracalla. Daarom is

er een volledige sectie aan Rock Caracalla gewijd. De bezoeker krijgt van elke editie van

het festival een kort overzicht. Hierbij komt hij te weten welke groepen er optraden,

hoeveel bezoekers er kwamen, wat de pers schreef over Rock Caracalla, enz.

Lid worden

Op deze pagina komt de bezoeker te weten hoe hij lid kan worden van Caracalla.

5.1.7 Contact

Dit is de laatste pagina van het publiek gedeelte. De bezoeker kan hierbij, via een

formulier, een vraag stellen aan Caracalla. Naargelang het gekozen onderwerp (over de

site, over een bepaalde activiteit, over Caracalla algemeen), wordt de mail gestuurd naar de

juiste persoon (webmaster, alle bestuursleden,…). Ook worden op deze pagina de namen

en de emailadressen van alle bestuursleden vermeld. Zo weet de bezoeker van de site hoe

hij rechtstreeks iemand van het bestuur moet aanspreken.

5.1.8 Paswoord verloren

Dit is een extra pagina die is toegevoegd aan de site zodat leden die hun loginnaam of

paswoord kwijt zijn deze opnieuw kunnen achterhalen. Eerst wordt een formulier getoond

waarbij het lid zijn naam, voornaam en emailadres moet opgeven. Vervolgens wordt

gecontroleerd of er een lid geregistreerd is in de tabel ‘users’ met deze gegevens. Indien dit

wel zo is, dan wordt er automatisch een email verstuurd naar het lid met daarin zijn

loginnaam en paswoord.

Als een lid niet wordt teruggevonden in de tabel ‘users’, dan verschijnt een pagina waarbij

gevraagd wordt om ofwel nog eens het formulier in te vullen, ofwel een mail te sturen naar

32

één van de systeemadministrators, waarbij het emailadres van de systeemadministrators

automatisch verschijnt.

5.2 Beheersgedeelte

Het beheersgedeelte is alleen toegankelijk voor de leden. Wie niet ingelogd is en op deze

pagina terecht komt, wordt gevraagd om eerst in te loggen. Pas dan kan men van de

functies gebruik maken.

Bedoeling van het beheersgedeelte is het beheer van de volledige site te centraliseren.

Normaal gezien kan de volledige inhoud van het publiek gedeelte van de site volledig

aangepast worden via dit gedeelte. Om praktische redenen werd er echter voor gekozen om

sommige beheersfunctionaliteiten deels te implementeren in het publiek gedeelte (zoals het

verwijderen van een foto uit het fotoboek, het toevoegen van commentaar aan een foto,

beheer van de babbelbox, enz).

Figuur 3: De beheerspagina

Een bestuurslid heeft volledige toegang tot alle pagina’s aangezien deze het recht heeft om

alles (behalve de babbelbox) aan te passen op de site. Een gewoon lid heeft slechts

beperkte toegangsrechten en mag dus niet alles aanpassen. Om te vermijden dat een

gewoon lid komt op pagina’s waar hij geen toegangsrecht voor heeft, wordt in het

navigatiegedeelte het aantal links aangepast aan de toegangsrechten van de ingelogde

gebruiker. Mocht een gewoon lid per toeval op een pagina komen waarvoor hij geen

toegangsrechten heeft, dan krijgt hij de melding dat hij geen recht heeft om deze pagina te

bekijken. Momenteel zijn de rechten van een gewoon lid beperkt tot twee zaken binnen het

33

beheersgedeelte: hij kan zijn eigen profiel aanpassen en foto’s toevoegen aan de bestaande

database. Dit kan later, indien nodig, nog verder uitgebreid worden.

5.2.1 Nieuwsbeheer

Dit gedeelte is enkel toegankelijk voor bestuursleden. Hier kan een bestuurslid een

nieuwsbericht toevoegen, verwijderen of aanpassen.

5.2.2 Voeg een item toe

Bij het toevoegen van een nieuwsbericht wordt automatisch de huidige datum ingevoegd,

wat niet meer veranderd kan worden. Het bestuurslid kan hier een titel en het bericht

opgeven. Ook wordt het zichtbaarheidsniveau vastgesteld. Hier kan men opgeven of dit

nieuwsbericht gezien kan worden door iedereen (gewoon lid), door bestuursleden en

systeemadministrators (bestuurslid) of enkel door systeemadministrators. Deze laatste

optie kan enkel ingesteld worden door een systeemadministrator zelf. Na een

invoercontrole van de velden (er wordt in dit geval enkel nagegaan of alle velden ingevuld

zijn) wordt het nieuwsitem opgeslagen als een nieuw record in de tabel ‘news’.

5.2.3 Update een item

Voor het updaten van een nieuwsbericht wordt het nieuwsbericht weer getoond in het

oorspronkelijke formulier. Men kan alles aanpassen, met dezelfde beperkingen wat betreft

zichtbaarheid als bij het toevoegen van een nieuwsbericht.

5.2.4 Verwijder een item

Nieuwsberichten kunnen natuurlijk ook verwijderd worden. Om nieuwsberichten te

verwijderen hebben we ervoor gezorgd dat er meerdere nieuwsberichten gelijktijdig

verwijderd kunnen worden. Dit omdat men in de praktijk vaak nieuwsberichten verwijdert

in één opruimbeurt.

5.2.5 Profielbeheer

Op deze pagina worden de gegevens van alle leden bijgehouden. Onder leden worden

huidige en oud-leden verstaan. Oud-leden nemen soms ook nog deel aan bepaalde

activiteiten. Men kan ook alle gegevens van vroegere leden behouden om ze op deze

manier te informeren over activiteiten zoals reünies, enz.

34

5.2.5.1 Ledenoverzicht

De pagina ‘ledenoverzicht’ is de centrale plaats voor het profielbeheer (zie Figuur 4). Op

deze pagina vindt men een overzicht van de leden, kan men ze een email sturen en kan

men de ledenlijst exporteren naar Excel.

Op deze pagina vindt men twee lijsten. De eerste lijst toont in een overzichtelijke tabel alle

gegevens van de huidige leden van Caracalla. De onderste tabel bevat de gegevens van de

oud-leden van Caracalla.

Figuur 4: Profielbeheer: ledenoverzicht

Bovenaan de pagina heeft men de mogelijkheid om alle huidige leden, alle oud-leden of

huidige en oud-leden samen een email te versturen. Voor het sturen van deze emails wordt

de standaard mailcliënt van de gebruiker geopend. Dit omdat de functionaliteit die een

mailcliënt biedt veel uitgebreider is dan wat een eventuele eigen, webgebaseerde

emailcliënt ooit zou kunnen bieden. Na een korte rondvraag bleek dat alle bestuursleden

gebruik maken van Outlook of Outlook Express als standaard emailcliënt. Daarom werd de

output van emailadressen geoptimaliseerd voor Microsoft Outlook (Express). Dit houdt in

dat er een puntkomma gebruikt wordt als scheidingsteken tussen de emailadressen.

35

Een ledenlijst wordt gebruikt voor vele doeleinden. Daarom is het niet voldoende om de

ledenlijst enkel te tonen op het scherm. Vaak wil men de ledenlijst afdrukken of gebruiken

voor één of andere activiteit. De pagina ‘ledenbeheer’ laat niet toe om de ledenlijst te

gebruiken voor deze doeleinden. Daarom werd ervoor geopteerd om de mogelijkheid te

voorzien om de ledenlijst te exporteren naar Microsoft Excel (zie Figuur 5). Van hier kan

de ledenlijst dan afgeprint worden of gebruikt worden voor diverse doeleinden.

Figuur 5: het exporteren van de ledenlijst naar Excel

Bovenaan de pagina kan men de ledenlijst per categorie (alleen huidige leden, alleen ex-

leden of alle leden samen) exporteren naar Excel. Hierbij heeft men de mogelijkheid om

ofwel alle gegevens van de leden te exporteren naar Excel (om bijvoorbeeld alles te

printen), of om enkel de namen te exporteren naar Excel om zo de lijst bijvoorbeeld te

gebruiken bij het organiseren van activiteiten.

5.2.5.2 Voeg een lid toe

Voor het toevoegen van een lid moeten alle velden verplicht ingevuld worden behalve de

velden ‘bus’, ‘gsm’, ‘telefoon’ en ‘email’ Ook moet er een loginnaam en een paswoord

gekozen worden voor het nieuwe lid. Daarbij geldt de beperking dat een loginnaam uniek

moet zijn. Dit wil zeggen dat er geen twee verschillende leden mogen zijn met dezelfde

loginnaam. Twee verschillende leden met hetzelfde paswoord is echter wel toegestaan. Bij

het inloggen op de site is het de loginnaam die de gebruiker identificeert. Voorts wordt bij

36

het aanmaken van een lid vastgesteld wat zijn toegangsniveau is. Hierbij wordt aangeduid

of het toegevoegde lid een gewoon lid is, een bestuurslid of een systeemadministrator (dit

laatste kan men enkel instellen indien men is ingelogd als systeemadministrator). Verder

wordt daar waar nodig een gepaste invoercontrole uitgevoerd (bijvoorbeeld postcode: is

het wel een getal dat uit juist 4 cijfers bestaat). Als alle velden goed ingevuld zijn, wordt

het nieuwe lid automatisch toegevoegd aan de database in de tabel ‘users’ en wordt er

automatisch een email verstuurd naar het nieuwe lid met daarin zijn loginnaam en

paswoord). Een toegevoegd lid wordt altijd als een actief lid beschouwd. Om een ex-lid toe

te voegen aan de database moet het ex-lid na het toevoegen nog ex-lid gemaakt worden op

de pagina ‘verwijderen/updaten van een lid’, zie volgende sectie.

5.2.5.3 Delete/update gegevens lid

De pagina ‘verwijderen/updaten van een lid’ bestaat uit twee delen. Bovenaan staan de

huidige leden. Onderaan staan de ex-leden. Een huidig lid kan men niet verwijderen. Wel

kan men van een huidig lid een oud-lid maken. Een systeemadministrator kan niet tot oud-

lid omgevormd worden, behalve door een systeemadministrator. Bij de omschakeling van

huidig lid naar oud-lid wordt het toegangsniveau automatisch op het laagste niveau gezet

(dit is het niveau ‘gewoon lid’).

Een ex-lid kan weer een huidig lid worden of men kan dit lid definitief uit de database

verwijderen. Bij het verwijderen wordt nog eens de vraag gesteld of men zeker is dat men

die persoon wil verwijderen uit de database.

Bij het updaten van de gegevens verandert het uitzicht van het formulier naargelang het

toegangsniveau van een gebruiker. Een gewoon lid kan enkel zijn eigen profiel aanpassen

(niet verwijderen). Ook kan een gewoon lid zijn toegangsniveau niet veranderen (zie

Figuur 6, midden). Een bestuurslid kan bij zijn eigen profiel alles aanpassen (hij kan dus

ook zijn toegangsniveau verlagen naar een gewoon lid). Van andere leden kan een

bestuurslid alles aanpassen behalve de loginnaam en het paswoord (zie Figuur 6, links).

Een systeemadministrator kan echter elk veld aanpassen van elk lid (zie Figuur 6, rechts).

Daarbij verschijnt het wachtwoord in tekstvorm (dus niet verborgen) op het scherm.

37

Figuur 6: ledenbeheer: wijzigen gegevens van een lid door 1) bestuurslid 2) lid zelf 3) systeem

administrator

Als een lid verwijderd wordt, dus alvorens het lid uit de tabel ‘users’ te verwijderen,

worden nog enkele aanpassingen uitgevoerd. Zo wordt het lid uitgeschreven van alle

activiteiten waarvoor het ingeschreven was (de nodige records worden verwijderd uit tabel

‘participants’). Ook de tabel ‘guestbook’ wordt aangepast: het idnummer van het lid wordt

verwijderd uit de database en in de plaats wordt de naam en emailadres ingevoerd in de

tabel. Na deze aanpassingen wordt het lid verwijderd uit de tabel ‘users’.

5.2.5.4

5.2.6.1

Lidgeldbeheer

Als laatste pagina in het profielbeheer is er het ‘lidgeldbeheer’. Er wordt een overzicht van

alle actieve leden gegeven met daarbij een checkbox. Als een huidig lid het lidgeld al

betaald heeft, dan kan men de checkbox naast zijn naam aanvinken.

5.2.6 Agendabeheer

Het agendabeheer is de centrale plaats voor het beheren van de activiteiten van Caracalla.

Eerst en vooral is er de mogelijkheid tot het toevoegen, verwijderen of updaten van een

activiteit. Ook is er de mogelijkheid om de inschrijvingen per activiteit te beheren. Zo kan

een bestuurslid leden in- en uitschrijven voor een bepaalde activiteit.

Voeg een item toe

Bij het invoeren van een nieuwe activiteit wordt automatisch de naam van het bestuurslid

die de activiteit invoert weergegeven. Bij het ingeven van de datum staat automatisch de

huidige datum ingevuld, maar het bestuurslid kan dit natuurlijk nog aanpassen. Voor het

38

invullen van de overige velden is er een automatische foutcontrole. Als er geen fouten zijn

gevonden in de uitvoer, dan worden de gegevens toegevoegd aan de tabel ‘agenda.’

5.2.6.2

5.2.6.3

5.2.6.4

Update een item

Bij het updaten van een bepaalde activiteit worden alle velden van het formulier

automatisch opgehaald uit de database. Enkel de naam van het bestuurslid dat

oorspronkelijk de activiteit ingevoerd heeft, kan niet meer veranderd worden.

Verwijder een item

Voor het verwijderen van een activiteit wordt hetzelfde principe toegepast als bij het

verwijderen van nieuwsberichten: ook hier worden verschillende activiteiten vaak pas bij

een collectieve opruimactie verwijderd (bijvoorbeeld als men toevallig ziet dat er nog veel

oude activiteiten in de database zitten). Daarom wordt ook hier de mogelijkheid voorzien

om verschillende activiteiten tegelijkertijd te verwijderen. Ook wordt ervoor gezorgd dat

bij het schrappen van een bepaalde activiteit waarvoor inschrijven verplicht is, de

inschrijvingen voor de desbetreffende activiteit uit de tabel ‘participants’ verwijderd

worden.

Deelnemers per activiteit

De sectie 'Deelnemers per activiteit' toont in eerste instantie alle activiteiten waarvoor

inschrijven verplicht is. Naast de naam van de activiteit staat tussen haakjes aangegeven

hoeveel personen er al ingeschreven zijn voor deze activiteit. Als men op ‘toon

deelnemers’ klikt, verschijnt er een overzicht van de inschrijvingen voor de geselecteerde

activiteit. Deze pagina bestaat ook uit twee delen: bovenaan staan de huidige leden die

reeds ingeschreven zijn. Daarbij wordt ook nog hun emailadres vermeld en met hoeveel

personen ze komen. Deze gegevens worden uit de tabel ‘participants’ gehaald. Onderaan

staan de huidige leden die nog niet ingeschreven zijn. Ook is de mogelijkheid voorzien om

een email te sturen naar alle ingeschreven leden (om bijvoorbeeld praktische info mee te

delen) of een email naar alle leden over deze activiteit. Opnieuw wordt hier gebruik

gemaakt van de standaard mailcliënt van het bestuurslid.

Als een lid zichzelf via de site ingeschreven heeft, dan verschijnt zijn naam automatisch bij

de ingeschrevenen (er wordt dus een record toegevoegd in de tabel ‘participants’). Zoals

eerder vermeld kan een lid zichzelf niet meer uitschrijven of het aantal personen dat hij

meebrengt veranderen. Dit kan enkel door een bestuurslid gebeuren op deze pagina. Om

39

het aantal personen van een ingeschreven lid te veranderen moet een bestuurslid gewoon

het cijfer in het tekstvak bij ‘Aantal personen’ aanpassen. Om een lid uit te schrijven moet

men het vakje ‘Ingeschreven?’ uitvinken. Indien men een lid wil inschrijven voor deze

activiteit moet men het aantal personen invullen en het vakje ‘Ingeschreven?’ aanvinken.

Er is wel voor gezorgd dat een bestuurslid alle veranderingen in één keer kan doorvoeren.

Hij moet met andere woorden maar één keer op ‘inschrijvingen voor … wijzigen’ duwen

om alle aanpassingen in de database te laten gebeuren.

5.2.7 Fotobeheer

Op deze pagina beschikken de geregistreerde, actieve leden over de mogelijkheid om

foto’s toe te voegen op de site. Voor het uploaden van de foto’s naar de server is het

noodzakelijk dat men op de server ten minste één map heeft waar de gebruiker de

toestemming heeft om op te schrijven (chmod 777). Het geven van zulke permissies aan

een map brengt hoe dan ook veiligheidsrisico’s (elke gebruiker heeft dan de volledige

rechten op deze map) met zich mee, maar omdat er klaarblijkelijk niet veel alternatieven

voorhanden zijn die toelaten om veilig bestanden naar de server up te loaden hebben we er

toch voor gekozen om de mappen die noodzakelijk zijn voor het uploaden van foto’s een

volledige schrijfpermissie te geven (chmod 777).

5.2.7.1 Voeg een foto toe

Het uploaden van foto’s naar de server gebeurt in drie stappen. Na het geven van het aantal

files dat men wil uploaden, kan men de foto’s selecteren die men wil opgeven. Om de

server niet te overbelasten kan men maximum vijf foto’s tegelijkertijd uploaden met elk

een maximale grootte van 50 kilobyte. De grootte werd gelimiteerd tot 50 kb om het

dataverkeer te beperken bij het opvragen van de foto’s. Het dataverkeer tussen server en

cliënt wordt zo klein mogelijk gehouden omdat de firma waarbij de site gehost is, maar een

beperkt transfervolume toelaat.

Nadat men op ‘upload’ geklikt heeft, worden de eigenschappen van de bestanden die ge-

uploaded moeten worden gecontroleerd. Er wordt onder andere gecontroleerd of de

bestanden niet te groot zijn (max 50kb) en of de bestanden wel de juiste extensie hebben.

Daar het om een fotoalbum gaat, worden enkel foto’s aanvaard met volgende extensies:

jpg, jpeg en png. Dit zijn de meest voorkomende extensie bij foto’s. Pas wanneer aan deze

volwaarden voldaan blijkt te zijn, worden de foto’s effectief overgezet naar de server.

Hierbij komen alle foto’s voorlopig in een centrale directory, namelijk de directory

40

‘/uploads’ in de hoofdirectory. Deze directory wordt bij het begin van de eerste stap altijd

leeggemaakt zodat eventuele oudere bestanden die per ongeluk nog in deze map zouden

kunnen zitten (bijvoorbeeld als men de wizard vroegtijdig afbreekt) verwijderd worden.

Éénmaal de foto’s in de map ‘/uploads/’ bewaard zijn, wordt stap twee van de wizard

gestart (zie Figuur 7). Hier heeft een bestuurslid twee mogelijkheden. Ofwel maakt hij een

nieuw fotoalbum aan, ofwel selecteert hij een bestaand fotoalbum waar de foto’s aan

toegevoegd moeten worden. Een gewoon lid kan enkel foto’s toevoegen aan een bestaand

fotoalbum. Hij heeft niet de mogelijkheid om een fotoalbum aan te maken.

Als men klikt op ‘foto’s toevoegen’ begint de eigenlijke verwerking op de server, wat de

derde stap is. Indien een nieuw fotoalbum aangemaakt wordt, dan wordt eerst en vooral het

album toegevoegd aan de tabel ‘photo_overview’ in de database. Daarna wordt het

idnummer (dat automatisch gegenereerd wordt) van de nieuw aangemaakte record uit de

database gehaald. In de map ‘/images/photos/’ wordt dan een nieuwe directory aangemaakt

met dit idnummer. In deze directory ‘/images/photos/idnummer’ wordt dan nog een

directory ‘thumbnails’ aangemaakt.

Als men foto’s toevoegt aan een bestaand fotoalbum wordt het idnummer van dat

fotoalbum meteen opgehaald uit de database.

Figuur 7: Toevoegen van foto's: stap 2

41

Vervolgens wordt een kopie genomen van de foto’s uit de map uploads en deze worden via

de functie ‘new thumbnail’ verkleind waarna ze in de map

‘/images/photos/idnummer/thumbnails/’ ondergebracht worden. De functie ‘new

thumbnail’ werd gehaald van de site ‘http://kentung.f2o.org/scripts/thumbnail/’.

Uiteindelijk worden de foto’s zelf nog eens verplaatst van de map ‘/uploads/’ naar de map

‘/images/photos/idnummer/’ en de gegevens (idnummer, bestandsnaam en datum) worden

opgeslagen in de tabel ‘photos’. Als deze operaties succesvol verlopen zijn, krijgt de

gebruiker het bericht dat de wizard ten einde is. De foto’s zijn dan toegevoegd.

Nu kan men zich de vraag stellen waarom er gewerkt wordt met een aparte map uploads

alvorens de foto’s rechtstreeks in de juiste map op de server te zetten. Dit komt omdat er

anders teveel stappen in één keer uitgevoerd zouden worden (uploaden naar de server,

mappen aanmaken, kopiëren en verkleinen van kopie’s naar thumbnails). Mocht er dan iets

foutlopen, dan is het moeilijker om de fout te achterhalen. Daarom werd er voor gekozen

om eerst de bestanden naar de webserver te kopiëren vooraleer andere bewerkingen op de

server uit te voeren.

Ook kan men de vraag stellen waarom ervoor gekozen werd om thumbnails aan te maken.

Dit werd gedaan om het downloadvolume te beperken. Nu worden per fotoalbum alle

thumbnails getoond aan alle gebruikers. Indien er 50 foto’s zitten in één fotoalbum en een

thumbnail 4kb groot is, dan wordt er zo’n 200 kb opgevraagd elke keer de pagina geladen

wordt. Indien er geen thumbnails aangemaakt zouden worden en als de gewone foto’s (die

gemiddeld 45 kb groot zijn omdat men enkel foto’s kleiner dan 50kb kan uploaden) telkens

verkleind getoond zouden worden, dan zou er elke keer de pagina geladen wordt 2250kb

opgevraagd worden. Door deze aanpassing kunnen er tien keer meer bezoekers komen

zonder dat er een groter dataverkeer is op de server.

5.2.7.2 Verwijder een fotoalbum

Bij het fotobeheer heeft men ook de mogelijkheid om een volledig fotoalbum te wissen.

Dit houdt in dat automatisch alle foto’s van het fotoalbum en de desbetreffende directory

van de server verwijderd worden en dat alle records die tot dat fotoalbum behoorden uit de

tabel ‘photo’gehaald worden. Als laatste wordt het fotoalbum zelf uit de tabel

‘photo_overview’ verwijderd.

42

Individuele foto’s kunnen niet via fotobeheer verwijderd worden. Dit kan alleen in het

fotoalbum zelf. Van zodra men een foto verwijdert, wordt die ook fysiek verwijderd (net

als de thumbnail) van de server. Ook wordt de gepaste record uit de tabel ‘photo’ gehaald.

5.2.7.3

5.2.8.1

5.2.8.2

5.2.8.3

Hernoemen van een fotoalbum

Op pagina ‘hernoemen fotoalbum’ kan men de naam en datum van een fotoalbum

aanpassen.

5.2.8 Links beheer

Bij de module ‘links beheer’ kunnen de bestuurders de links beheren die getoond worden

op de pagina ‘links’ op het publieke gedeelte van de site.

Voeg een item toe

Hier kunnen de bestuursleden een link toevoegen. De bestuursleden kunnen een naam voor

de link en de link zelf opgeven. In HTML is het verplicht om bij externe hyperlinks altijd

‘http://’ te gebruiken. Op deze manier wordt een externe link (link naar een pagina buiten

eenzelfde site) immers onderscheiden van een interne link (link naar een pagina van

dezelfde website). Bij het rechtstreeks intypen van een URL in de titelbalk van een

browser mag echter het voorvoegsel ‘http://’ weggelaten worden.

Een gebruiker heeft niet altijd de gewoonte het voorvoegsel ‘http://’ te gebruiken. Daarom

werd ervoor gezorgd dat de gebruiker een URL zonder ‘http://’ mag invoeren. Indien de

gebruiker echter een URL invoert waar het voorvoegsel ‘http://’ wel in staat, dan wordt dit

voorvoegsel automatisch verwijderd.

Update een item

Op deze pagina heeft de bestuurder de mogelijkheid om foutieve links aan te passen. Links

kunnen onder andere foutief zijn wegen een verkeerde invoer of omdat de site waarnaar de

link verwijst, veranderd is van adres of niet langer bestaat.

Verwijder een item

Links kunnen op deze pagina verwijderd worden. Net als bij het verwijderen van

nieuwsfeiten en activiteiten kunnen hier meerdere links tegelijkertijd verwijderd worden.

43

Hoofdstuk 6 Tabellen overzicht

In deze sectie wordt een overzicht gegeven van de tabellen die gebruikt worden voor de

site van Caracalla. Van iedere tabel wordt eerst de structuur getoond en daarna de

bewerkingen die op de tabel uitgevoerd worden. De structuur wordt getoond via de PHP-

code die gebruikt wordt bij het aanmaken van de desbetreffende tabel. Ten slotte wordt

vermeld op welke plaatsen in de site de data in de tabellen gemanipuleerd worden, dit om

een zo goed mogelijk overzicht te kunnen geven van de integratie van MySQL databases in

de site.

Bij het ontwerpen van de site werd er ook aandacht besteed aan overtollige data. Er wordt

altijd getracht om data zo veel mogelijk te verwijderen indien ze overbodig wordt. Zo

wordt er bijvoorbeeld bij het verwijderen van een activiteit uit de tabel ‘agenda’ altijd alle

inschrijvingen voor die activiteit verwijderd uit de tabel ‘participants’.

6.1 Tabel ‘users’:

In deze tabel worden alle gegevens bijgehouden in verband met de leden. Het veld ‘active’

geeft aan of een lid een huidig lid (waarde 1) of een ex-lid is (waarde 0). Het veld ‘payed’

duidt aan of een bepaald lid zijn lidgeld al betaald heeft (waarde 1) of niet (waarde 0). De

overige velden zijn duidelijk en behoeven geen verdere verklaring.

$action = mysql_query("CREATE TABLE users ( id int(11) NOT NULL auto_increment, login varchar(25) NOT NULL default '', pass varchar(25) NOT NULL, access int(1) NOT NULL default '2', payed bool NOT NULL default 'false', email varchar(80) NOT NULL default '', name varchar(80) NOT NULL default '', surname varchar(80) NOT NULL default '', street varchar(80) NOT NULL default '',

44

number int(4) NOT NULL default '', box varchar(7) NOT NULL default '', zip int(4) NOT NULL default '', city varchar(80) NOT NULL default '', phone tinytext NOT NULL default '', gsm tinytext NOT NULL default '', active bool NOT NULL default '0', PRIMARY KEY (id))") or die(mysql_error()); Het aanmaken van een record in de tabel ‘users’ gebeurt enkel in het profielbeheer op de

pagina ‘voeg een lid toe’. Het updaten van een record in de tabel gebeurt op volgende

pagina’s: ‘delete/update gegevens lid’ (aanpassen van alle velden, behalve ‘payed’) en

‘lidgeldbeheer’ (enkel het veld ‘active’). Het verwijderen van een gebruiker kan enkel op

de pagina ‘delete/update gegevens lid’.

6.2 Tabel ‘agenda’

In deze tabel worden alle activiteiten opgeslagen die georganiseerd worden door Caracalla.

Het veld ‘user_id’ bevat het idnummer van het bestuurslid dat het agendapunt opgesteld

heeft. Het veld ‘time’ is een string (tinytext) omdat er soms niet met concrete uren gewerkt

wordt. Soms moet men noteren als tijd ‘tussen 18u en 19u’. Mocht het veld ‘time’ een

speciaal tijdsveld (timestamp) zijn, dan zou het onmogelijk zijn om dit op te slaan in de

database. Het veld ‘register’ toont of inschrijven op voorhand verplicht is voor een

bepaalde activiteit (waarde 1) of niet (waarde 0).

$action = mysql_query("CREATE TABLE agenda ( id int(11) NOT NULL auto_increment, date date NOT NULL, time tinytext NOT NULL default '',

place tinytext NOT NULL default '', register bool NOT NULL default 'false', title tinytext NOT NULL default '', message text NOT NULL default '', user_id int(11) NOT NULL default '0', price decimal(10,2) NOT NULL default '0.00', PRIMARY KEY (id))") or die(mysql_error()); De tabel agenda wordt aangemaakt bij agendabeheer op de pagina ‘voeg een item toe’.

Updaten en verwijderen van een record uit deze tabel gebeuren respectievelijk op de

pagina’s ‘update een item’ en ‘verwijder een item’.

6.3 Tabel ‘participants’

Deze tabel bevat alle leden die ingeschreven zijn voor activiteiten waarvoor inschrijven

verplicht is. Deze tabel bevat het idnummer van de activiteit waarvoor ingeschreven moet

45

worden (veld ‘idactivity’), het idnummer van het lid dat zich ingeschreven heeft (veld

‘iduser’), de datum van inschrijving (‘date’) en met hoeveel personen het lid komt

(‘numbers’).

$action = mysql_query("CREATE TABLE $participants ( idactivity int(11) NOT NULL, iduser int(11) NOT NULL, date date NOT NULL, numbers int(11) NOT NULL, PRIMARY KEY (idactivity, iduser))") or die(mysql_error()); Er kunnen op twee manieren records toegevoegd worden aan de tabel. Ten eerste kan een

lid zichzelf inschrijven op de pagina ‘agenda’ op het publiek gedeelte van de site. Ook kan

een bestuurslid op de pagina ‘deelnemers per activiteit’ leden inschrijven voor een

bepaalde activiteit. Het updaten van een record kan alleen door een bestuurslid op de

pagina ‘deelnemers per activiteit’. Het verwijderen van een record uit de tabel kan echter

gebeuren door drie verschillende handelingen. Ten eerste kan een bestuurslid iemand

uitschrijven op de pagina ‘deelnemers per activiteit’. Ten tweede worden alle

inschrijvingen van een lid geannuleerd als het lid verwijderd wordt uit de tabel ‘users’ op

de pagina ‘delete/update gegevens lid’. Ten laatste worden ook alle inschrijvingen van een

activiteit uit de tabel verwijderd indien een activiteit verwijderd wordt uit de tabel

‘agenda’ op de pagina ‘verwijder een item’ bij agenda beheer. Deze laatste twee worden

toegepast zodat overtollige data uit de tabel ‘participants’ verwijderd wordt en aldus

eventuele foutmeldingen (onbestaande idnummer van gebruiker en/of activiteit) vermeden

worden.

6.4 Tabel ‘guestbook’

Deze tabel omvat alle geposte berichten in de babbelbox. Voor elk gepost bericht worden

volgende velden ingevuld: ‘id’ (automatische nummering), ‘date’ (huidige datum), ‘place’

(plaats van waaruit bericht verstuurd wordt) en ‘message’ (het bericht zelf). Als de

gebruiker niet ingelogd is, dan worden de velden ‘name’ en ‘email’ door de gebruiker

ingevuld. Indien de gebruiker wel reeds ingelogd was, dan wordt enkel het veld ‘user_id’

ingevuld met daarin het idnummer van het ingelogd lid. Op deze manier wordt voor een

ingelogd lid altijd het juiste emailadres getoond bij alle posts.

$action = mysql_query("CREATE TABLE guestbook ( id int(11) NOT NULL auto_increment, date date NOT NULL, message text NOT NULL default '', user_id int(11), name tinytext,

46

place tinytext, email tinytext, PRIMARY KEY (id))") or die(mysql_error()); Een record wordt toegevoegd op de pagina ‘babbelbox’ op het publiek gedeelte. Het is ook

op deze pagina dat het ingelogd lid de mogelijkheid krijgt om zijn eigen posts aan te

passen of te verwijderen. De tabel ‘guestbook’ wordt ook aangepast indien een lid

verwijderd wordt uit de tabel ‘users’. Van dat lid worden dan alle records in de tabel

‘guestbook’ aangepast. Het velk ‘user_id’ wordt leeggemaakt en in de plaats worden de

velden ‘email’ en ‘name’ ingevuld.

6.5 Tabel ‘news’

Deze tabel bevat alle nieuwsfeiten die verschijnen op de hoofdpagina van de site. Voor elk

nieuwsbericht worden volgende gegevens bijgehouden: ‘id’ (automatische nummering),

‘date’ (huidige datum), ‘title’ (de titel van het nieuwsbericht), ‘news’ (het nieuwsbericht

zelf), ‘id_user’ (het idnummer van het bestuurslid dat het nieuwsbericht gepost heeft) en

‘access’ (dit veld geeft weer welke gebruikers (lid (waarde 2), bestuurslid (waarde 1) of

systeemadministrator (waarde 3))) het bericht mogen zien.

$action = mysql_query("CREATE TABLE news ( id int(11) NOT NULL auto_increment, access int(1) NOT NULL default '2', news text NOT NULL default '', title tinytext NOT NULL default '', date date NOT NULL, id_user int(11) NOT NULL default '', PRIMARY KEY (id))") or die(mysql_error()); Het toevoegen, verwijderen of aanpassen van een nieuwsbericht gebeurt alleen via het

nieuwsbeheer op respectievelijk volgende pagina’s: ‘voeg een item toe’, ‘verwijder een

item’ en ‘pas een item aan’.

6.6 Tabel ‘photo_overview’

Deze tabel bevat de noodzakelijke gegevens van de verschillende fotoalbums. De tabel

bevat volgende velden: ‘id’ het (idnummer van het fotoalbum), ‘activity’ (de naam van het

fotoalbum) en ‘date’ (de datum waarop het fotoalbum aangemaakt is).

$action = mysql_query("CREATE TABLE photo_overview ( id int(11) NOT NULL auto_increment, activity tinytext NOT NULL default '', date date NOT NULL, PRIMARY KEY (id))") or die(mysql_error());

47

Het aanmaken van een record in deze tabel kan enkel op de pagina ‘voeg een foto toe’ in

het fotobeheer. Het verwijderen van een fotoalbum gebeurt alleen op de pagina ‘verwijder

een fotoalbum’ in het fotobeheer. Het updaten van de velden ‘activity’ en ‘date’ gebeurt op

de pagina ‘hernoemen fotoalbum’.

6.7 Tabel ‘photo’

In deze tabel zitten de verwijzingen naar de eigenlijke foto’s. De gegevens die over de

foto’s bewaard worden, zijn: ‘id’ (het idnummer van de foto), ‘activityID’ (het idnummer

van het fotoalbum waartoe de foto behoort), ‘filename’ (de bestandsnaam van de foto),

‘comment’ (bevat eventueel een regel commentaar die bij de foto hoort) en ‘date’ (de

datum waarop de foto toegevoegd is).

$action = mysql_query("CREATE TABLE photo ( id int(11) NOT NULL auto_increment, activityID int(11) NOT NULL, filename varchar(80) NOT NULL default '', comment tinytext NOT NULL default '', date date NOT NULL, PRIMARY KEY (id))") or die(mysql_error()); Het toevoegen van een record aan deze tabel gebeurt alleen op de pagina ‘voeg een foto

toe’ in het fotobeheer. Het updaten van het veld ‘comment’ gebeurt op de pagina ‘fotobox’

in het publiek gedeelte van de site. Het verwijderen van een record uit de tabel kan op twee

manieren gebeuren. Ofwel bij het expliciet verwijderen van één foto op de pagina ‘fotobox’

in het publiek gedeelte van de site, ofwel bij het verwijderen van een volledig fotoalbum

op de pagina ‘verwijder een fotoalbum’ in het fotobeheer.

6.8 Tabel ‘links’

In deze tabel staan de links die op de pagina ‘links’ in het hoofdgedeelte getoond worden.

Volgende velden worden bijgehouden: ‘id’ (het idnummer van de link), ‘link’ (de url zelf

zonder ‘http://’), ‘date’ (de datum waarop de link is ingevoerd in de database) en ‘id_user’

(het lid dat deze link toegevoegd heeft).

$action = mysql_query("CREATE TABLE $links ( id int(11) NOT NULL auto_increment, titel text NOT NULL default '', links text NOT NULL default '', date date NOT NULL, id_user int(11) NOT NULL default '', PRIMARY KEY (id))") or die(mysql_error());

48

Een link wordt toegevoegd via de pagina ‘voeg een item toe’ bij ‘links beheer’. Indien een

link onjuist was of niet meer geldig, dan kan de link aangepast worden via de pagina

‘update een item’ in het ‘linksbeheer’. Verwijderen van een link gebeurt via de pagina

‘verwijder een item’.

6.9 Tabel ‘main_content’

Deze tabel bevat alle links die verschijnen in het navigatiemenu op de hoofdpagina, en is

de koppeling tussen de indexpagina en de verschillende modules van de site. Deze links

hebben volgende gegevens: ‘id’ het (idnummer van de link), ‘link’ (de bestandsnaam van

de link), ‘name’ (de naam die gegeven wordt aan de link en in het navigatiemenu komt te

staan) en ‘access’ (van de ingelogde leden: wie mag deze link zien? Systeemadministrators

(waarde 0), bestuursleden (waarde 1) of iedereen (waarde 2)). In table ‘main_content’

hebben voorlopig alle links nog de waarde 2 in het ‘access’ veld. Dit wil zeggen dat alle

links op de hoofdpagina bezocht kunnen worden door alle gebruikers van de site.

$action = mysql_query("CREATE TABLE main_content ( id int(11) NOT NULL auto_increment, link varchar(80) NOT NULL default '', access char(3) NOT NULL, name varchar(80) NOT NULL default '', PRIMARY KEY (id))") or die(mysql_error()); In deze tabel worden geen records toegevoegd, verwijderd of aangepast. Het is de

bedoeling dat, telkens deze tabel aangepast wordt, de tabel opnieuw aangemaakt moet

worden via de map ‘/install’ op de server.

6.10 Tabel ‘panel_content’

Deze tabel bevat alle links die verschijnen in het navigatiemenu op de beheerspagina. De

velden van deze tabel zijn dezelfde als de velden van de tabel ‘main_content’. Op de

beheerspagina mogen niet alle links door ingelogde leden bezocht worden, dus hier is de

waarde in het veld ‘access’ wel verschillend.

$action = mysql_query("CREATE TABLE $table ( id int(11) NOT NULL auto_increment, link varchar(80) NOT NULL default '', access char(3) NOT NULL, name varchar(80) NOT NULL default '', PRIMARY KEY (id))") or die(mysql_error());

49

Ook in deze tabel worden geen records toegevoegd, verwijderd of aangepast. Het is de

bedoeling dat, telkens deze tabel aangepast wordt, de tabel opnieuw aangemaakt moet

worden via de map ‘/install’ op de server.

50

Hoofdstuk 7 Testen van de site

Alvorens een site online gezet wordt, is het belangrijk de site aan een grondige test te

onderwerpen. Dit om te achterhalen of :

• de site alle functies aanbiedt die ze moet aanbieden. Met andere woorden moet hier

nagegaan worden of de inhoud en de functionaliteit van de site aangepast zijn aan

de noden (validatie);

• er geen ‘fouten’ meer zitten in de site. Zo kan er bijvoorbeeld nog een fout zitten in

de lay-out, de programmacode, de inhoud, de compabiliteit met de verschillende

browsers, enz. (verificatie).

7.1 Validatie

Bij validatie gaat men na of een site voldoet aan de eisen van de gebruiker. Door een

gebrek aan communicatie kan het gebeuren dat een site uiteindelijk niet de gevraagde

functionaliteit biedt. Aangezien het achteraf aanpassen van de site -om deze alsnog te

voorzien van de nodige functies- nogal tijdrovend is, hadden twee bestuursleden van

Caracalla (Joost Decock en Wouter De Clercq) permanente toegang tot de lokale server

waarop de site ontwikkeld werd. Op deze manier hadden zij een permanent zicht op de

ontwikkeling van de site en konden ze steeds nagaan of de ontwikkelde functionaliteit

voldeed aan de eisen van Caracalla.

Hieronder volgen een aantal opmerkingen over de functionaliteit die tijdens de

ontwikkelingsfase naar boven kwamen.

• Er was de vraag of bestuursleden de mogelijkheid hadden om andermans berichten

in de babbelbox aan te passen. Na overleg werd er besloten dat enkel de

51

systeemadministrators de mogelijkheid te krijgen om berichten van anderen aan te

passen.

• Ook kwam de vraag wat een lid moest doen als hij zijn paswoord kwijt was. Een

functie daarvoor was niet voorzien maar werd aldus nog geïmplementeerd.

• Na het toevoegen van een fotoalbum was men niet meer in staat om de naam en/of

datum van het fotoalbum aan te passen. Een verkeerde datum of een typfout kon

niet meer verbeterd worden. Deze functie werd toegevoegd.

• Bij profielbeheer was niet voorzien dat leden een telefoonnummer of een GSM

nummer konden invoeren. De database en de nodige pagina’s werden aangepast om

dit probleem te verhelpen.

7.2 Verificatie

Eens alle functionaliteit in de site aanwezig is, is het noodzakelijk de site aan een grondige

controle te onderwerpen om fouten op te sporen en te verwijderen.

7.2.1 De validators van het W3C

Bij het ontwerpen van de site is er getracht te werken volgens de regels die de XHTML-

standaard oplegt. Eens de pagina’s gemaakt waren, werden deze via de online “html

validator” 30 van het W3C gecontroleerd op het goedgevormd zijn van de tags. Dit bleek

echter een onmogelijke opdracht te zijn. De validator heeft immers geen toegang tot

pagina’s waarvoor men moet inloggen. Daardoor kon een groot deel van de site niet

gevalideerd worden. Daarbij komt nog dat op pagina’s waar men niet moet inloggen de

validator problemen had met Javascript.

Om pagina’s met Javasript te laten valideren, moet men alles tussen de begin- en eindtag

van Javascript uitcommentariëren (tussen <!-- en -->). Dit wordt echter niet ondersteund

door Internet Explorer waardoor de pagina foutief weergegeven zou worden. Voor het

testen van de pagina’s waarvoor men niet moet inloggen, hebben we alle Javascript

tijdelijk weggelaten, waarna deze pagina’s wel valideren. Op de Javascipt tags na zijn deze

pagina’s dus gevalideerd.

De stylesheets konden wel gevalideerd worden via “css validator”31 die net als de html

validator te vinden is op de site van het W3C.

52

7.2.2 Andere verificatietechnieken

Veel fouten worden pas achterhaald indien de site effectief gebruikt wordt. Daarom hebben

we, alvorens de site te publiceren, de site gepubliceerd op een voorlopig internetadres. Op

deze manier konden alle bestuursleden en enkele testpersonen de site grondig testen.

Hierbij werd gevraagd om zoveel mogelijk verkeerd te doen (foute invoer in velden,

proberen op pagina’s te geraken zonder in te loggen, in plaats van foto’s iets anders

uploaden naar de server, enz.).

In deze testfase kwamen nog enkele fouten naar boven. Hieronder volgen enkele

voorbeelden:

• Als een lid een vroeger gepost bericht in de babbelbox wilde aanpassen, dan werd

de naam van het lid niet getoond (veld bleef blanco).

• Bij het aanpassen van een agendapunt of een nieuwsfeit verdween de naam van de

oorspronkelijke poster en werd in de plaats het bestuurslid opgeslagen die het item

aanpaste. Dit was niet de bedoeling en werd dan ook aangepast.

• De pijlen vorige en volgende foto verschenen niet altijd in het fotoalbum.

• Bij het overschakelen naar een andere stylesheet in Mozilla Firefox kwam men uit

op een blanco pagina.

Ook werd de site grondig getest op comptabiliteit met de volgende browsers: Internet

Explorer, Mozilla Firefox en Netscape. Dit telkens op verschillende resoluties.

Na twee weken bleek dat er al een paar dagen geen enkele fout meer gevonden was en

werd beslist om de site publiek toegankelijk te maken.

53

Hoofdstuk 8 Slotwoord

Voor deze thesis hebben we geprobeerd een functionele, dynamische en aantrekkelijke site

te maken voor de jongerenvereniging Caracalla.

Het schrijven van deze thesis was een leerrijke ervaring. Zo hebben we niet alleen veel

bijgeleerd over verschillende programmeertalen zoals PHP, MySQL, HTML, enz., maar

ook op het vlak van teamwerk. Er moest immers steeds gezorgd worden voor een goede

communicatie en coördinatie, zodat we bijvoorbeeld niet tegelijkertijd aan dezelfde pagina

aan het werken waren.

Tijdens de realisatie van deze website hebben we heel wat bijgeleerd. Niet in het minst wat

er allemaal bij komt kijken om tot een resultaat te komen dat ruim aan alle eisen, noden en

verwachtingen voldoet. Hoewel we allebei al voorkennis hadden in het ontwerpen van

dynamische scripts, vormde het ontwerpen en uitwerken van een dergelijk project toch een

hele uitdaging.

Uiteindelijk zijn we tot een resultaat gekomen waar we allebei meer dan tevreden over

zijn.

Het resultaat van onze thesis kan je online bekijken op de volgende URL:

http://caracalla.netsensei.nl.

54

Referenties

1 Caracalla Homepage, Wouter De Clercq, 2003, http://users.pandora.be/wdc/caracalla.html,

(5/05/2004)

2 Movabletype.org, 2004, http://www.movabletype.org; (5/05/2004) 3 phpBB, 2004, http://www.phpbb.com, (5/05/2004)

4 Coppermine Photo Gallery, 2004, http://coppermine.sourceforge.net/, (5/05/2004) 5 World Wide Web Consortium, 2004, http://www.w3.org/TR/html4/intro/intro.html (16/05/2004)

6 Philips W., 2004, Didactisch materiaal bij de cursus Kantoorautomatisering

7 HTML, Wikiedia, 2004, http://en.wikipedia.org/wiki/HTML (16/05/2004)

8 World Wide Web Consortium, 2004, http://www.w3c.org, (5/05/2004) 9 XHTML,Wikipedia, 2004, http://www.wikipedia.org/wiki/xhtml, (5/05/2004) 10 Well formed tag, Wikipedia, 2003, http://www.wikipedia.org/wiki/well-formed_tag, (5/05/2004)

11 CSS, Wikipedia, 2004, http://en.wikipedia.org/wiki/Cascading_Style_Sheets, (5/05/2004)

12 Cascading Style Sheets level 2, 1998, http://www.w3.org/TR/CSS2/, (5/05/2004) 13 PHP, 2004 http://be.php.net/manual/nl/introduction.php, (16/05/2004)

14 PHP, Wikipedia, 2004, http://www.wikipedia.org/wiki/Php, (5/05/2004)

15 VBScript, Wikipedia, 2004, http://www.wikipedia.org/wiki/VBScript, (5/05/2004)

16 PHP versus ASP, Internet Concepts LLC, 2004,

http://www.netconcepts.com/news/php_vs_asp.php (16/05/2004)

17 PHP Usage Stats, 2004, http://www.php.net/usage.php, (5/05/2004)

18 GOODMAN G.,2001, Javascript 1.5 Het complete handboek, Academic Service, Schoonhoven,

978blz.

19 MySQL, Wikipedia, 2004, http://en.wikipedia.org/wiki/Mysql (16/05/2004)

20 Migrating from Microsoft Access to MySQL, Paul DuBois, 2003,

http://www.kitebird.com/articles/access-migrate.html, (5/05/2004)

21 FAQ Pandora Nieuwsgroepen, 2003, http://users.pandora.be/jvaes/faq/faq7.html, (5/05/2004)

22 Flaxe Webhosting, 2004, http://www.flaxe-webhosting.nl, (5/05/2004)

23Dreamweaver MX At a glance, Macromedia, 2004,

http://www.macromedia.com/software/dreamweaver/productinfo/overview/, (16/05/2004)

55

24 Modyfing Dreamweaver to produce valid XHTML, A List Apart, 2002,

http://www.alistapart.com/articles/dreamweaver/, (5/05/2004)

25 The KWrite Handbook, McGinnis T., 2001, http://docs.kde.org/en/3.2/kdebase/kwrite/,

(5/05/2004)

26 GIMP, The Gimp team, 2004, http://www.gimp.org/, (5/05/2004) 27 Adobe Photoshop, Adobe, 2004, http://www.adobe.com/products/photoshop/main.html,

(5/05/2004)

28 Smartftp, 2004, http://www.smartftp.com, (5/05/2004)

29 gFTP, 2004, http://gftp.seul.org/, (5/05/2004) 30 Validate you Markup, 2004, http://validator.w3.org, (07/05/2004)

31 W3C Validatieservice voor CSS, 2004, http://jigsaw.w3.org/css-validator/, (17/05/2004)

56