universiteit gent faculteit toegepaste...
TRANSCRIPT
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