Ontwerp van een dynamische website

tag in al onze pagina’s. Dit bestand geeft de gewenste informatie weer door een variabele $_GET[’action’] op te vragen. Aan de hand van de waarde hiervan wordt er weergegeven wat de gebruiker wenst. Als een gebruiker bijvoorbeeld klikt op ’wachtwoord vergeten’ dan zal de pagina dezelfde blijven maar wordt er aan de url een variabele toegevoegd. ?action=forgotpass"> Wachtwoord vergeten? Dit zorgt ervoor dat er een hyperlink wordt gecre¨eerd die verwijst naar de huidige pagina maar met een verschillende actie. Aan de hand van deze actie kan usermenu.php kiezen wat er moet weergegeven worden. Door de variabele $session->logged_in in de sessieklasse wordt bijgehouden of een gebruiker ingelogd is of niet. Een gebruiker kan pas inloggen als hij zich eerst geregistreerd heeft. Het registratieformulier bevindt zich in het bestand register.php en wordt geladen door de pagina contact.php. Wanneer een gebruiker zich registreert door het formulier (correct) te verzenden worden zijn gegevens in de database opgeslagen samen met een statusveld in de gebruikerstabel dat gelijk is aan 0. Op deze manier wordt aangegeven dat de gebruiker nog niet toegelaten is door de administrator. De administrator op zijn beurt krijgt een mailtje met daarin een unieke url die het activeren van de gebruiker toelaat. Deze activatie is veilig want er wordt gebruik gemaakt van het md5 ge¨encrypteerde wachtwoord en een base 645 gecodeerde versie van de ’timestamp’ waarde in de tabel. Samen met de gebruikersnaam krijgen we zo een veilige en unieke activeringsurl. Alle formulieren van het inlogsysteem worden verwerkt door een apart script, process.php. Een algemeen formulier ziet er als volgt uit: Formuliervelden 5

Dit is een coderingstechniek die geschikt is om informatie in een url voor de gemiddelde surfer onleesbaar te maken: http://en.wikipedia.org/wiki/Base64#URL_applications

Hoofdstuk 3. Code

24

We zien dat er een veld in de code zit. Dit veld zorgt ervoor dat onze verwerkingsklasse weet wat het met de verzonden data moet doen. In de verwerkingsklasse zit er dan een bepaalde regel: if(isset($_POST[’subjoin’])){ $this->procRegister(); } Op die manier kan ´e´en verwerkingsklasse instaan voor verschillende formulieren door de corresponderende verwerkingsfuncties toe te wijzen op basis van het verborgen veld. Bij alle formulieren over heel de website wordt deze werkwijze toegepast. De verwerkingsklasse process.php bevat de functies die nodig zijn om de formulieren in het inlogsysteem te verwerken. De nodige acties worden ondernomen door de desbetreffende functies en over het algemeen wordt de sessieklasse ingeschakeld om eventuele fouten te ontdekken. Wanneer de database moet bijgewerkt worden kan vanuit de sessieklasse na een foutcontrole de databaseklasse aangesproken worden. Als er fouten optreden wordt de formulierklasse aangesproken om de juiste foutmeldingen bij de juiste velden weer te geven waarna de gebruiker teruggeleid wordt naar de invoerpagina. Op deze manier verkrijgen we een consistente formulierverwerking. Deze werkwijze is een voorbeeld van het opsplitsen van de functionaliteit in de scripts. Zodoende blijven de scripts overzichtelijk en kunnen er gemakkelijk foutjes opgespoord worden. Het vermelden waard is de ’Onthoud mij’ functie in het inlogsysteem. Deze werkt door het gebruik maken van cookies. Er worden twee cookies ingesteld als de gebruiker wenst onthouden te worden. Eentje met de gebruikersnaam en eentje met het willekeurige gebruikersid. Ze vervallen door de tijd die werd opgegeven in constants.php. Zo kunnen we een gebruiker uniek identificeren en wordt hij automatisch ingelogd tot de cookies vervallen zijn. Het is moeilijk om alle functies in het inlogsysteem te bespreken. De code is echter gedocumenteerd en men kan door het lezen van de code meer inzicht krijgen in de werking ervan. De verschillende bestanden die gerelateerd zijn met het inlogsysteem zijn: login.php, newpass.php, process.php, register.php, useredit.php, userinfo.php, usermenu.php en viewactive.php. Deze laatste bevindt zich in de folder include.

3.3.2

Kalender

De kalender is een tabel met daarin de komende activiteiten en eventuele opmerkingen en is voor iedereen zichtbaar. Voor gebruikers die niet geregistreerd zijn is dus enkel de passieve kant van de kalender zichtbaar. Om de tabel weer te geven wordt er gebruik gemaakt van de functie displayEvents() in calendar.php. Deze functie verzorgt het weergeven van evenementen in blokken van tien per pagina. Dit wordt gedaan door eerst alle evenementen

Hoofdstuk 3. Code

25

en bijhorende informatie uit de database te halen. We gebruiken hiertoe twee queries en combineren ze. $r = "(SELECT id,event,date,description,timestamp,addedby " ."FROM ".TBL_CALENDAR." WHERE date > ".time() ." ORDER BY date ASC,event)"; $s = "(SELECT id,event,date,description,timestamp,addedby " ."FROM ".TBL_CALENDAR." WHERE date < ".time() ." ORDER BY date DESC,event)"; $q = $r." UNION ".$s; We krijgen dan eerst de toekomstige evenementen gerangschikt op stijgende datum en daarna een archief met voorbije evenementen gerangschikt op dalende datum. De gebruiker krijgt zo eerst de evenementen te zien die het dichtst in de toekomst liggen. Dit geeft volgens ons een intu¨ıtieve manier om naar de kalender te kijken. Het opsplitsen van de resultaten in blokken van tien komt in alle tabellen op de website terug. Boven elke blok staat het aantal resultaten en welke er op dat moment weergegeven worden. Onder elke blok staat het huidige paginanummer en een eventuele volgende of vorige link. Het algoritme kan u terugvinden in calendar.php of in tal van andere scripts waar een tabel wordt weergegeven. Het weergeven van de resultaten wordt aan de hand van een for-lus gedaan in de programmacode. Deze lus loopt over de resultatenlijst. Door in deze lus creatief om te gaan met verschillende opmaakklassen (zie 3.3.8) bekomen we een duidelijk zebramotief. Voor het evenementenarchief werd nog een andere opmaakklasse gebruikt. Voor andere bijzonderheden aan opmaak en weergaven van de resultaten uit onze database verwijzen we naar de code in calendar.php. calendaradd.php De bedoeling was om een online kalender te cre¨eren waaraan gebruikers evenementen konden toevoegen. Dit wordt gedaan aan de hand van een formulier. Bijzonder aan dit formulier is dat er een kalender in wordt getoond waar op een datum in de toekomst kan geklikt worden om deze te selecteren. Hier wordt gebruikt gemaakt van JavaScript om deze gebruikersinput te verwerken. Wanneer op een datum geklikt wordt wordt het datumveld van het formulier bevolkt. Gebruikers kunnen nu onmogelijk verkeerde data ingeven (het formulier veld is ’read-only’). De functie mk_drawCalendar($m,$y) staat in voor de generatie van de kalender. Deze functie is goed gedocumenteerd en kan doorgenomen worden in het bestand calendaradd.php. Het formulier wordt verwerkt door een aparte verwerkingsklasse (calendarprocess.php).

Hoofdstuk 3. Code

26

Deze klasse staat in voor het toevoegen en verwijderen van evenementen en het verwijderen van opmerkingen bij evenementen. Ze is volledig analoog aan de verwerkingsklasse voor het inlogsysteem process.php. calendardel.php Er moest ook een mogelijkheid voorzien worden om achteraf evenementen te verwijderen. Iedereen die ingelogd is kan evenementen verwijderen door op de daartoe voorzien links te klikken. Hierdoor wordt er een variabele aan de url doorgegeven die ervoor zorgt dat i.p.v. het id naast het evenement nu een afbeelding staat die het verwijderen symboliseert. We hebben deze werkwijze bij elke tabel waarvan iets moest verwijderd worden toegepast. Een JavaScriptje waarschuwt de gebruiker voor een eventuele onbedoelde verwijdering. We moeten opletten dat bij het verwijderen van een evenement ook de bijhorende opmerkingen verwijderd worden. Het verwijderen van een evenement houdt dus twee updates in van de database. Dit wordt vertegenwoordigd door twee queries in de functie Calendardel($id) in de databaseklasse.

3.3.3

Afbeeldingen

Het concept achter deze sectie is juist dezelfde als voor de kalender. Met de resultaten wordt er een tabel weergegeven (ditmaal in blokken van 3x4 miniaturen) en ingelogde gebruikers kunnen afbeeldingen toevoegen en verwijderen. De implementatie was evenwel moeilijker omdat de afbeeldingen moeten opgeladen en eventueel herschaald worden. De code om afbeeldingen weer te geven en te herschalen zit vervat in thumbs.php. Wanneer er op een afbeelding geklikt wordt zal er door middel van een JavaScript een pop-up venster weergegeven worden met de afbeelding in ware grootte. Wanneer men klikt op de titel dan zal er een nieuwe pagina geopend worden met de afbeelding en zijn informatie die opgegeven werd bij het toevoegen. De scripts die moeten bekeken worden om de werking hiervan ten volle te verstaan zijn thumbs.php en visual.php. pictureadd.php Het opladen van foto’s wordt wederom gerealiseerd door het verzenden van een formulier. Er worden velden voorzien voor het eigenlijke bestand, een titel, extra info en een eventuele categorie. De foutopvang voor het opgeladen bestand verdient nadere toelichting. De foutopvang voor de andere velden verloopt analoog aan wat reeds gezien is. Het opgeladen bestand mag enkel de extensies .jp(e)g of .png hebben. GIF bestanden worden niet ondersteund omdat er een fout optreedt bij het herschalen. Dit komt omdat de GD bibliotheek6 op de server geen GIF ondersteuning biedt. We doen de foutopsporing op basis van het MIME-type7 van de 6 7

http://www.libgd.org/Main_Page Multipurpose Internet Mail Extensions

Hoofdstuk 3. Code

27

afbeelding. In ons geval mag dit type image/(p)jp(e)g of image/png zijn. De details van de foutopsporing kunnen nagekeken worden in pictureprocess.php. De folder waarin bestanden opgeslagen worden is uploads op de server. In deze folder zit een subfolder thumbs die miniaturen van de afbeeldingen herbergt gegeneerd door thumbs.php. Deze miniaturen worden slechts eenmaal gecre¨eerd en maken dus dat de pagina sneller geladen kan worden. Ook is er een mogelijkheid voorzien om extra subfolders te cre¨eren in de folder uploads. Bij het opladen van afbeeldingen kan dan deze folder gekozen worden als categorie. De reden waarom we de folders niet laten aanmaken door een PHP script is omdat er dan een fout optreedt bij het toewijzen van permissies. De folders worden dan geregistreerd onder een andere naam en hierdoor kunnen de permissies niet gewijzigd worden (er moet namelijk kunnen geschreven worden naar deze folders). Om categorie¨en te cre¨eren moet er dus handmatig een subfolder van uploads aangemaakt worden en moeten de Unix permissies ingesteld worden op 777.8 Het herschalen kan op twee niveaus gebeuren. Het eerste niveau is een herschaling die altijd optreedt, namelijk het aanmaken van de miniaturen. Deze worden opgeslagen in hun eigen folder thumbs. Een tweede herschaling is optioneel en behandelt het bronbestand. Indien gewenst kan een gebruiker een maximale hoogte en/of een maximale breedte opgeven. Het bestand wordt dan opgeladen naar de server (in een tijdelijke folder) en wordt eerst herschaald alvorens verplaatst te worden naar zijn definitieve folder uploads of een subfolder ervan. Deze herschaling behoudt de oorspronkelijke verhoudingen zodat ofwel de maximale hoogte ofwel de maximale breedte de bepalende factor voor de herschaling wordt. Bijzondere aandacht moet ook geschonken worden aan het benoemen van de opgeladen bestanden. Een gebruiker moet eender welke bestandsnaam kunnen gebruiken voor de afbeelding zonder de server hiermee in moeilijkheden te brengen. Hiertoe hebben we een functie unique_filename() in pictureprocess.php die ervoor zorgt dat we een uniek en consistent naamgevingsalgoritme hebben. We gebruiken het ip-adres van de gebruiker en de tijd in microseconden om een unieke naam te verzekeren. Verder maken we gebruik van de sprintf(...) functie in PHP om een mooi geformateerde string terug te krijgen van vaste lengte. De miniaturen krijgen exact dezelfde naam (ze staan toch in een andere folder) zodat de beiden ook door hun bestandsnaam verbonden blijven. picturedel.php Het verwijderen van afbeeldingen is volledig analoog aan het verwijderen van kalenderevenementen. We moeten terug opletten dat we bij het verwijderen van een afbeelding en het databaserecord uit de database en het bestand en zijn miniatuur van de server verwijderen. 8

Dit is de octale representatie van rwxrwxrwx dus een read write execute permissie voor iedereen.

Hoofdstuk 3. Code

28

Het verwijderen uit de database wordt gedaan door de functie PictureDel($path) van de databaseklasse. Het verwijderen van de server wordt gedaan door het unlink($path) commando in de functie picturedel($path) van de sessieklasse. Merk op dat er twee unlink commando’s nodig zijn voor de afbeelding en zijn miniatuur. De bestanden die betrokken zijn bij het weergeven en verwerken van afbeeldingen zijn picture.php, pictureadd.php, picturedel.php, pictureprocess.php, thumbs.php en visual.php. Het doornemen van deze bestanden kan instructief zijn en een beter doorzicht geven in de gebrachte functionaliteit.

3.3.4

Shop

De shop is interactief gemaakt door het mogelijk te maken bestellingen te maken en deze automatisch via e-mail te laten verzenden. Het concept is gemakkelijk: Bij elk item staat er een invoerveld waar een gebruiker kan aangeven hoeveel stuks hij van het item wenst. Na minstens 1 veld van een getal te voorzien kan de gebruiker dit item bestellen. Hij krijgt dan een overzicht waarin hij eventueel nog items kan toevoegen. Wanneer hij dit formulier verzendt wordt er een e-mail naar de redactie verzonden. Het e-mailadres van de redactie kan aangepast worden in constants.php. De verwerking van de formulieren wordt door de klasse shopprocess.php verzorgd. Hierin huist ook een functie die de foutopsporing op zich neemt. In de e-mail naar de redactie bevindt zich een url met een besteloverzicht. De gebruiker krijgt ook een e-mail met daarin het verschuldigde bedrag en het rekeningnummer van de vereniging.

3.3.5

Admin

De adminsectie is vanzelfsprekend alleen toegankelijk voor administrators. Administrators zijn gebruikers waar het gebruikersniveau 9 is (voor gewone leden is dit 0). Ze kunnen genieten van extra functies zoals • Het verwijderen van gebruikers • Het veranderen van het gebruikersniveau dus het aanmaken en verwijderen van administrators • Het verwijderen van inactieve gebruikers • Het toevoegen en verwijderen en bewerken van nieuwsitems Voor het verifi¨eren of iemand administrator is wordt de functie isAdmin() gebruikt van de sessieklasse. Het verwerken van de input van de administrator gebeurt door een aparte klasse,

Hoofdstuk 3. Code

29

namelijk adminprocess.php. De verschillende functies die door de administrator kunnen uitgevoerd worden zijn zeer analoog aan wat er in het voorgaande reeds gezien werd. Het volstaat om de bestanden admin.php en adminprocess.php door te nemen om deze te doorgronden.

3.3.6

Nieuws

Deze pagina is een pagina die door de administrator volledig beheerd wordt. Wanneer de administrator een nieuwsitem aanmaakt dan verschijnt er een nieuwsitem op deze pagina. Het is dus mogelijk om deze pagina up-to-date te houden door enkel een formulier te verzenden. De nieuwsitems huizen in de nieuwstabel van de database en deze pagina vraagt dan ook deze informatie steeds op. De inhoud wordt conform de websiteopmaak weergegeven en gesorteerd van nieuw naar oud in blokken van tien nieuwsitems. In het bestand news.php kan de code nagelezen worden.

3.3.7

Leden

Wanneer een lid zich heeft ingelogd is het handig om een overzicht van alle leden te hebben. Deze pagina zorgt hiervoor door een tabel weer te geven van alle leden wanneer er ingelogd is. Een gast kan deze pagina niet bereiken en ziet deze ook niet in de header.

3.3.8

Lay-out

De opmaak van de hele site is gescheiden van de code door het gebruik te maken van CSS. Er zijn twee bestanden voorzien. Eentje verzorgt de opmaak zoals ze gezien wordt op het scherm (main.css in de folder css). De ander verzorgt de opmaak wanneer een pagina afgedrukt wordt (print.css in de folder css). Met Cascading Style Sheets kan de vormgeving van elk element in een webpagina worden bepaald. Een element van een webpagina wordt gedefinieerd door het gebruik van een HTMLtag. De term cascading geeft aan dat de stijl van elementen overerving vertoont: elk element neemt de stijl over van zijn parent element, tenzij er een eigen stijl voor dat element is gegeven. Elke webbrowser heeft een ingebouwde stylesheet die de vormgeving van alle elementen bepaalt als er geen stylesheets aan een document worden meegegeven. Een stijl bestaat uit een aantal aspecten zoals lettertype en voor- en achtergrondkleur. Ook breedte van kantlijnen, de horizontale en verticale positie, de zichtbaarheid, de transparantie, of een element boven of onder een ander element ligt en vele andere aspecten kunnen in een stylesheet worden aangegeven. Elk aspect van de stijl wordt onafhankelijk overge¨erfd door child-elementen in een webpagina. Daarom hoeven alleen de afwijkende aspecten van een stijl te worden aangegeven. Als er in

Hoofdstuk 3. Code

30

de stijl een lettertype wordt aangegeven voor het hele document, dan wordt dat lettertype in het hele document gebruikt en hoeft het niet voor elk element apart te worden te worden aangegeven. De klasse van een HTML element wordt aangegeven door de naam van de tag. Het is echter mogelijk om aan een tag een klasse toe te voegen (class=”verzonnen”), waardoor het element de stijl van de corresponderende klasse in het stylesheet overneemt. De aspecten van stijl die niet in deze corresponderende klasse worden aangegeven, erft het element echter nog steeds van het parent element of van de tag klasse. CSS kent ook pseudo-klassen. Daarmee wordt aangegeven dat de stijl van een element afhankelijk is van een status. Een bekende pseudo-klasse is de status van een link, de tekst van een link kan een andere kleur hebben als het betreffende document recent is bekeken. Een andere pseudo-klasse is de hover waardoor de stijl van een element anders wordt als de muis in het element staat.9 main.css In dit bestand wordt de opmaak gedefinieerd voor de verschillende HTML entiteiten en worden ook klassen gedefinieerd die daarin gebruikt kunnen worden. In onderstaande figuur worden de hoofdklassen ge¨ıllustreerd.

9

Bron: http://nl.wikipedia.org/wiki/Cascading_Style_Sheets

Hoofdstuk 3. Code

31

Door nu in de HTML header te schrijven en in de code