PET AF VOOR TECHNISCHE VORMING

PET AF VOOR TECHNISCHE VORMING

Project aangeboden door Tim Carton voor het behalen van de graad van Bachelor in de Multimedia en Communicatie Technologie Academiejaar 2005-2006

Woord vooraf Dit verslag is geschreven in het kader van een project als stage-opdracht voor de opleiding Bachelor Multimedia en Communicatietechnologie aan de Hogeschool WestVlaanderen Departement PIH. In mijn derde en laatste jaar in deze richting koos ik voor de afstudeeroptie 'algemeen'. De reden hiervoor is te vinden bij mijn brede interesse op computergebied, gecombineerd met het willen aangaan van nieuwe uitdagingen. Eén van die uitdagingen is het autodidactisch verwerven van kennis, in dit geval de kennis van de PHP-taal. Deze opdracht was voor mij als student dan ook de perfecte kans om de in de les aangeleerde basishandelingen aan te vullen met geavanceerde, nieuwe codes. De scriptie is er voor iedereen die meer duiding wenst bij het gerealiseerde project, en heeft als doel het verschaffen van alle nodige info om zich optimaal te kunnen inleven in het afgewerkte product en het proces dat tot het maken van dit product heeft geleid. Het verslag bevat een inleiding, kern en conclusie die telkens onderverdeeld zijn in hun respectievelijke subcategorieën. Een structureel overzicht vindt u in de inhoudsopgave op pagina 3. Graag wil ik mevrouw Lies Hackelbracht en mevrouw Caroline Vindevogel bedanken voor het aanbieden van deze opdracht en de samenwerking tijdens de stageperiode. Als verantwoordelijken voor Pet Af voor Technische Vorming, de opdrachtgever van dit project, droegen zij op die manier toe tot het behalen van mijn diploma Hoger Onderwijs. Daarnaast bedank ik ook graag de mensen van Barco Vision met in het bijzonder de heer Armand Dendievel en de heer Johan Volkaerts, bedienden op de verkoopsadministratie waar ik stage liep. Ook wens ik mevrouw Bieke Masselis te bedanken. Als stagecoach binnen de opleiding MCT zorgde zij voor de nodige feedback betreft de stageverslaggeving.

Projectdossier Tim Carton

2

1. Inhoudsopgave PET AF VOOR TECHNISCHE VORMING...................................................................... 1 Woord vooraf............................................................................................ 2 1.Inhoudsopgave....................................................................................... 3 2.Inleiding................................................................................................ 4 3.1 Inhoud........................................................................................... 4 3.2 Doel van dit verslag.......................................................................... 4 3.Kern..................................................................................................... 5 3.1 Opdracht........................................................................................ 5 3.1.1 Persoonlijke opvatting................................................................ 5 3.2 Opdrachtgever................................................................................. 6 3.2.1 Feitelijke opdrachtgever............................................................. 6 3.2.2 Stageplaats.............................................................................. 6 3.3 Verrichte werkzaamheden................................................................. 7 3.3.1 Nieuwe lay-out.......................................................................... 7 3.3.2 Administratiemodule.................................................................. 7 3.3.3 Navigatie.................................................................................. 9 3.3.4 Inhoud toevoegen en aanpassen................................................ 12 3.3.5 Nieuwsbrief............................................................................. 13 3.3.6 Fotoalbum.............................................................................. 14 3.4 Wekelijkse verslagen...................................................................... 16 Maandag 13 maart 2006................................................................... 16 Dinsdag 14 maart 2006.................................................................... 16 Woensdag 15 maart 2006................................................................. 16 Donderdag 16 maart 2006................................................................ 17 Vrijdag 17 maart 2006...................................................................... 17 Maandag 20 maart 2006................................................................... 17 Dinsdag 21 maart 2006.................................................................... 18 Woensdag 22 maart 2006................................................................. 18 Donderdag 23 maart 2006................................................................ 18 Vrijdag 24 maart 2006...................................................................... 19 Maandag 27 maart 2006................................................................... 19 Dinsdag 28 maart 2006.................................................................... 19 Woensdag 29 maart 2006................................................................. 20 Donderdag 30 maart 2006................................................................ 20 Vrijdag 31 maart 2006...................................................................... 20 Maandag 17 april 2006..................................................................... 20 Dinsdag 18 april 2006...................................................................... 20 Woensdag 19 april 2006................................................................... 21 Donderdag 20 april 2006.................................................................. 21 Vrijdag 21 april 2006........................................................................ 21 Maandag 24 april 2006..................................................................... 22 Dinsdag 25 april 2006...................................................................... 22 Woensdag 26 april 2006................................................................... 23 Donderdag 27 april 2006.................................................................. 23 Vrijdag 28 april 2006........................................................................ 23 Maandag 1 mei 2006........................................................................ 23 Dinsdag 2 mei 2006......................................................................... 24 Woensdag 3 mei 2006...................................................................... 24


3

Donderdag 4 mei 2006..................................................................... 24 Vrijdag 5 mei 2006.......................................................................... 24 Maandag 8 mei 2006........................................................................ 25 Dinsdag 9 mei 2006......................................................................... 25 Woensdag 10 mei 2006.................................................................... 26 Donderdag 11 mei 2006................................................................... 26 Vrijdag 12 mei 2006......................................................................... 26 Maandag 15 mei 2006...................................................................... 27 Dinsdag 16 mei 2006....................................................................... 27 Woensdag 17 mei 2006.................................................................... 27 Donderdag 18 mei 2006................................................................... 27 3.5 Planning........................................................................................ 28 3.5.1 Aanvankelijke planning............................................................. 28 3.5.2 Actueel gepresteerde uren........................................................ 30 4.Conclusie............................................................................................. 31 4.1 Evaluatie van het verrichte werk....................................................... 31 4.2 Vergelijking kennis – ervaring.......................................................... 31 BIJLAGEN........................................................................................................... 32


4

2. Inleiding 2.1 Inhoud Dit dossier geldt als uitgebreide documentatie ter ondersteuning van het stageproject 'website Pet Af voor Technische Vorming' dat ik in het laatste jaar van de opleiding Bachelor Multimedia en Communicatie Technologie maakte. U vindt er niet alleen een gedetailleerd verslag in terug dat van dag tot dag de gerealiseerde zaken toelicht, u kan er ook de planning in nazien. Naast dit alles is er per belangrijk deel van de opdracht een verduidelijking van hoe dat punt gerealiseerd werd, en waarom er voor dat soort oplossing gekozen werd. Ook wordt de gebruikte code in dat deel van het verslag toegelicht en geïllustreerd. Waar nodig, is het verslag geïllustreerd met afbeeldingen. In de benaming van de afbeeldingen herkent u twee types: Namen beginnend met een 'A', zijn vooral codeweergaven ter verduidelijking van de gebruikte technologie. Deze afbeeldingen vindt u enkel in de tekst zelf terug. De namen beginnend met een 'B', zijn bijlagen en zijn een hulp om sommige zaken visueel beter te kunnen voorstellen. Deze afbeeldingen vindt u uitsluitend terug in het deel 'Bijlagen' van dit verslag.

2.2 Doel van dit verslag Dit verslag werd geschreven met als hoofddoel de lezer te informeren over hoe het project aangepakt werd. Het is belangrijk dat de geïnteresseerde lezer weet waarom er een bepaalde handelswijze gehanteerd werd bij het maken van het project. Daarnaast wil ik met dit verslag ook een soort handleiding maken die het andere webmasters mogelijk maakt om dit project later eventueel voort te zetten. Het mag evenwel duidelijk zijn dat het niet mijn bedoeling is om een stap-voor-stap uiteenzetting te maken zodat elke leek de code zonder problemen kan reproduceren.


5

3. Kern 3.1 Opdracht In opdracht van 'Pet Af voor Technische Vorming', een West-Vlaams initiatief dat meer techniek en technologie in het (lager) onderwijs wil brengen en dat een beter imago wil geven aan technische vormingen, wordt er gewerkt aan een nieuwe website die alle informatie over Pet Af aan de buitenwereld kenbaar maakt. Belangrijk is dat de website een module bevat waardoor de website gemakkelijk aan te passen is, maar er moet uiteraard ook rekening gehouden worden met de doelgroep. Die doelgroep omhelst hoofdzakelijk kinderen van 11 en 12 jaar die in het zesde leerjaar zitten. Bijgevolg mag de website toch wel wat speels opgevat worden, lange saaie teksten zijn uit de boze.

3.1.1 Persoonlijke opvatting De structuur van de website ligt zo goed als volledig vast en mag overgenomen worden van de reeds bestaande website. Bij het invullen van de lay-out krijg ik echter heel wat speelruimte, zolang de huisstijl uiteraard gerespecteerd wordt. Deze opdracht spreekt me vooral aan door de doelgroep. Die biedt perspectieven voor wat betreft het implementeren van extra’s. Zo dacht ik bijvoorbeeld aan het gebruiken van 1 of meerdere figuren die doorheen de volledige website terugkomen. Kinderen of andere figuurtjes getekend in Adobe Illustrator CS moeten het geheel op die manier wat opfleuren en vooral speelser maken. Ook een spel waarvan de verdere details nog moeten besproken en ingevuld worden, kan de site voor de bezoekers extra interessant maken. Het geheel mag zeker niet strak overkomen. Rechthoeken of vierkanten achterwege laten, kan hierbij al een stuk helpen. Er zal in de lay-out dus vaak gebruik gemaakt worden van afgeronde hoeken. Wat het back-end gedeelte van de website betreft blijft de admin-module het belangrijkste. Teksten eisen het belangrijkste deel van het werk op, dus zal er vooral een nieuwssysteem/blogsysteem gescript moeten worden. Ook worden er foto’s gebruikt en kan ik dus best een uploadsysteem maken om die foto's zonder enige technische voorkennis op het net te kunnen zetten. Dit systeem zal ook van pas komen om verslagen van vergaderingen –eventueel in een beveiligde sectie van de site- te uploaden . Daarnaast wenst Mevr. Hackelbracht ook een nieuwsbriefsysteem waarbij ze HTMLnieuwsbrieven kon rondsturen. In dat opzicht lijkt het me handig om een systeem te maken waarin gebruik wordt gemaakt van lijsten. Zo kan het systeem gebruikt worden om nieuwsbrieven te verzenden, maar ook om een mailtje naar alle stuurgroepleden te versturen.


6

3.2 Opdrachtgever 3.2.1 Feitelijke opdrachtgever De opdracht wordt uitgetekend door 'Pet Af voor Technische Vorming', een stuurgroep die het technische onderwijs promoot bij hoofdzakelijk kinderen van het zesde leerjaar in het basisonderwijs. De bedoeling is dat kinderen en hun ouders het technisch onderwijs niet gaan zien als een tweede keuze omdat een algemene opleiding te moeilijk zou zijn, maar dat men een technische opleiding als een volwaardige studiekeuze gaat zien. De strategische doelstellingen van 'Pet Af voor Technische Vorming' zijn: ●

Het stimuleren van de samenwerking tussen bedrijven en onderwijs, en dit regio-, net- en sectoroverschrijdend.

●

De opwaardering van TSO, BSO en BuSO (imagoverbetering van technische vormingen).

●

Het creëren van een grotere in- en uitstroom in het nijverheidstechnisch onderwijs op basis van een objectieve keuze.

Daarom wil 'Pet Af voor Technische Vorming' onder andere meer techniek en technologie in het lager onderwijs, dynamische binnen- en buitenschoolse activiteiten organiseren, de maatschappelijke relevantie en het belang van technologie bewijzen, de leerkrachten lager onderwijs laten informeren over technische vormingen en hun beroepen en hen tegelijkertijd tonen dat deze jobs kwalitatief en waardevol zijn in onze hedendaagse maatschappij. Doen hun pet af voor technische vorming: VKW West-Vlaanderen, VOKA, Charter ZuidWest-Vlaanderen, Hogeschool West-Vlaanderen Departement PIH Kortrijk, KATHO Departement VHTI Kortrijk, KHBO Departement IW&T Oostende, Barco, Bayer Sheet Europe, Bekaert, De Coene Construct, Geldof Metaalconstructie, Liggo Security Locks, Manpower, Michel Van de Wiele / Ferromatric, Mol Cy, Proviron Fine Chemicals, Randstad, Roba, Sadef, Unifrost, Unilin Flooring en Unique Interim.

3.2.2 Stageplaats Hoewel 'Pet Af voor Technische Vorming' de opdrachtgever van dit stageproject is, heb ik mijn stage doorlopen bij Barco Vision, Theodoor Sevenslaan 106 in Kortrijk. De reden hiervoor is dat Mevrouw Hackelbracht (coördinator 'Pet Af voor Technische Vorming') tijdens mijn stage op zwangerschapsverlof was, en er op moment van mijn stageaanvraag nog geen zekerheid was over het feit of er al dan niet een voltijdse vervanger zou worden gevonden. Daarom ging Mevrouw Hackelbracht op zoek naar een vrije plaats bij Barco, een van de bedrijven die deel uitmaken van de stuurgroep 'Pet Af voor Technische Vorming'. Binnen de firma Barco was het nog even zoeken naar een vrije bureauruimte in een van de vestigingen, en die werd uiteindelijk gevonden in de afdeling 'Barco Vision' in de Theodoor Sevenslaan in Kortrijk.


7

3.3 Verrichte werkzaamheden 3.3.1 Nieuwe lay-out De oorspronkelijke opdracht bestond erin een nieuwe website te maken die een online administratiemodule bevat. Een eerste stap in het realiseren hiervan, is het maken van een nieuwe lay-out. Zoals bij elk ontwerp, ging ik uit van een basisidee dat ik voor de duidelijkheid in een gedetailleerde tekening omzette (zie bijlage 1). Daarna werd de tekening omgezet in een computerafbeelding, ingekleurd met de juiste kleurtinten en aangevuld met de gepaste afbeeldingen. (zie bijlage 3) Eens dit gerealiseerd werd, was het al gemakkelijker om een beeld van de nieuwe site te vormen. Dit brengt met zich mee dat het ook gemakkelijker is om de nieuwe lay-out te optimaliseren. Daarom kwam ik achtereenvolgens tot drie variaties. (zie bijlage 4, 5 en 6) Na overleg met de stuurgroepleden op de vergadering van 24 maart 2006, werd de definitieve lay-out vastgelegd op het ontwerp zoals te zien in bijlage 6.

3.3.2 Administratiemodule De administratiemodule is het kloppende hart achter deze website. Ik ben ervan uitgegaan dat de beheerder van de site geen HTML-kennis heeft, maar de teksten die via de administratiemodule worden toegevoegd toch een opmaak wil geven. Daarom werden er in de administratiemodule functies voorzien om tekst vet of cursief te plaatsen, te onderlijnen en de tekstgrootte aan te passen. Daarnaast is het ook mogelijk om een url in te voegen, een afbeelding te uploaden en in te voegen en een bestand (tekstdocument, powerpointpresentatie, pdf-bestand, ...) te uploaden en aan de tekst te koppelen. Maar de administratiemodule is meer dan alleen maar het toevoegen, aanpassen en verwijderen van tekst. De beheerder kan er ook nieuwsbrieven mee versturen (en de daaraan gekoppelde beheersfuncties), fotoalbums aanmaken en opvullen, en bovendien is het via deze module ook mogelijk de navigatie te bewerken. Er zijn twee pagina's van groot belang in het admin-gedeelte van deze website: content.php en verwerk.php. In de pagina content.php wordt beslist welk deel van de module actief moet zijn, of met andere woorden welke componenten getoond moeten worden om de gewenste actie uit te kunnen voeren. De keuze wordt gemaakt door te controleren wat de waarde van de hoofdparameter in de querystring is ($type). In totaal zijn er vijf hoofdcategorieën die moeten duidelijk maken welk onderdeel van de website moet aangepast worden. De vijf categorieën zijn: 'menseq', 'menu', 'inhoud', 'brief' en 'foto'.


8

'Menseq' staat voor menu-sequentie, en behandelt de volgorde van de hoofditems in de navigatie. Hoe dit juist gebeurt, leest u in paragraaf QSDF van dit verslag. De categorie 'menu' stelt de beheerder in staat om items aan het hoofd- en submenu toe te voegen, aan te passen of te verwijderen. Hoe dit juist gebeurt, leest u in paragraaf QDSF van dit verslag. De code onder 'inhoud' is dan weer het deel dat voor de bewerking van de teksten op de website zorgt. Hoe dit juist gebeurt, leest u in paragraaf QSDF van dit verslag. Fig. A1: Eerste stap in verwerking administratietaken

Bij het onderdeel 'brief' vindt u de code terug die instaat voor het nieuwsbriefsysteem. Hier worden mailinglists aangemaakt en aangepast, mailadressen verwijderd en nieuwsbrieven verstuurd. Hoe dit juist gebeurt, leest u in paragraaf QSDF van dit verslag. 'Foto' tenslotte, zal de beheerder de mogelijkheden bieden om fotoalbums aan te maken en er foto's in te plaatsen. Hoe dit juist gebeurt, leest u in paragraaf QSDF van dit verslag.


9

3.3.3 Navigatie De navigatie is een vrij dynamisch systeem geworden. Ik koos voor een opdeling in twee onderdelen: een hoofdnavigatie en een subnavigatie. De hoofdnavigatie wordt bovenaan de site weergegeven op een horizontale menubalk. Wanneer de gebruiker op een van deze items klikt, worden dynamisch de subitems ingeladen en op de linkerkant van de website in verticale orde getoond.

Fig. A2: De subnavigatie op het scherm uitprinten aan de hand van het actieve hoofditem

Figuur A2 toont de code die nodig is voor het opbouwen van het submenusysteem. Zowel hoofdmenu als submenu worden dynamisch opgebouwd. Dit wil zeggen dat zowel de data betreft het hoofdmenu als de data betreft het submenu via SQL-queries uit een tabel in de database worden opgehaald. De items uit het submenu zijn aan het hoofdmenu gekoppeld via het id van het hoofdmenu (in de hierboven vermelde code is dit de variabele $hoofdID). Dat alle gegevens uit de database worden opgehaald, impliceert meteen ook dat de navigatie volledig door de websiteverantwoordelijke zal kunnen beheerd worden: items aanpassen, toevoegen, verwijderen, de volgorde aanpassen, alles wordt mogelijk... Als eerste punt wil ik graag het aanpassen van de volgorde toelichten. In mijn zoektocht naar een gebruiksvriendelijke en gemakkelijk verstaanbare manier om dit visueel voor te stellen, ben ik uitgekomen op een systeem dat kan vergeleken worden met een datagrid uit andere programmeertalen (zie bijlage 6). Alle items worden uit de database opgehaald, vergezeld van hun respectievelijke positie in de menubalk. Achter die positie zit een link. Wanneer er op die link geklikt wordt, verandert de positie in een input-veld. Om te weten of er al dan niet op de link geklikt werd, heb ik de variabele '$active' gebruikt. Deze variabele kan de waarde '0' of '1' aannemen. Bij '0' werd er niet geklikt en moet er dus geen input-veld weergegeven worden.


10

Wanneer de waarde van de variabele $active echter '1' is, moet er nog gecontroleerd worden op welke link er juist geklikt werd.

Fig. A3: De volgorde per hoofdmenu-item ophalen

Zoals te zien is in de code op figuur A3 wordt per hoofditem het ID en de volgorde van dat item opgehaald. Deze gegevens zijn opgeslagen in de arrayvariabele '$volg'.

Fig. A4: input-veld weergeven wanneer het hoofditem aangeklikt werd.

Per item in de tabel 'hoofdmenu', wordt nagegaan of de waarde van de parameter 'control' (te vinden in de querystring) overeenkomt met het ID van het hoofditem zoals dat opgeslagen is in de tabel 'submenu'. Indien deze waarden gelijk zijn, dan wordt het input-veld (...
Fig. A5: Standaardlink tonen wanneer het item niet aangeklikt werd


11

Een tweede deel van de code achter het bewerken van het navigatiesysteem, is dat om items toe te voegen, aan te passen en te verwijderen. Zoals eerder in dit verslag vermeld staat, behoort dit tot de categorie 'menu'. In de categorie 'menu' zien we twee onderverdelingen met als variabele naam '$cat1'. Deze variabele kan twee waarden aannemen: 'hoofd' en 'sub', per onderverdeling zijn er dan weer drie acties mogelijk (variabele $cat2). Het gaat om het toevoegen van items ('add'), het aanpassen van items ('edit') en tot slot het verwijderen van items ('del').

Fig. A6: Keuzestructuur om de juiste actie te kunnen ondernemen betreft het bewerken van het menu.

Het aanpassen en verwijderen van zowel hoofditems als subitems, gebeurt op analoge wijze als bij het aanpassen van de volgorde van de hoofditems. Voor informatie over de hiertoe gebruikte code, verwijs ik u graag naar paragraaf QSDF van dit verslag. Voor het toevoegen van items worden de respectievelijke formulieren ingeladen. Als het gaat om het invoegen van een nieuw hoofditem, volstaat het om de naam in te geven. Deze data worden verstuurd naar de pagina verwerk.php. Bij het toevoegen van subitems, is het noodzakelijk eerst het hoofditem te selecteren uit een keuzelijst. Ook in dit geval worden de data doorgestuurd naar verwerk.php.


12

3.3.4 Inhoud toevoegen en aanpassen Bij het inhoudsbeheer is het enkel mogelijk om teksten toe te voegen en aan te passen. Het is met andere woorden niet mogelijk om een tekst te verwijderen. De reden hiervoor is dat er maar één tekst per item kan toegewezen worden en indien men deze tekst zou verwijderen, zou er een lege pagina ontstaan. Dit kan niet de bedoeling zijn. Als men de tekst wil wissen met als doel een nieuwe tekst te plaatsen, moet dit gebeuren door de tekst volledig te vervangen door een nieuwe tekst. Om het de beheerder zo gemakkelijk mogelijk te maken wat betreft de opmaak van de teksten, heb ik een eigen systeem van UBB-code ontwikkeld. Door een knop op de werkbalk aan te klikken, worden via javascript speciale tags toegevoegd aan de tekst (of aan de geselecteerde tekst). De url die achter deze knoppen zit, ziet er als volgt uit: Fig. A7: Verwijzing naar de functie in javascript

De functie ubbCode is terug te vinden op de pagina index.php (zie fig. A8). Het omvat één parameter die aangeeft welke tag er juist moet toegevoegd worden.

Fig. A8: Javascriptfunctie om de nodige opmaaktags aan te maken

Deze data wordt doorgestuurd naar de pagina verwerk.php, waar de juiste afhandeling alle info aan de correcte tabel toevoegt. Een belangrijke stap hierbij is het omzetten van de ubbCode-tags naar geldige xHTML-code. Dit gebeurt via de functie str_replace().

Fig. A9: str_replace() zorgt voor de omzetting van UBB naar HTML

Het eerste argument van deze functie is de zoekparameter, of met andere woorden wat vervangen moet worden. De tweede parameter geeft aan welke string in de plaats moet komen van de gevonden data, en de derde parameter is de string waarop dit alles toegepast moet worden. Het aanpassen van teksten gebeurt op gelijkaardige wijze als het toevoegen ervan. Het enige verschil zit hem in het uiteindelijke SQL-statement1. 1 Een SQL-statement gaat uit van 3 basisacties: 'insert' om een nieuw record in een tabel toe te voegen, 'update' om een bestaand record aan te passen en 'delete' om een bestaand record uit de tabel te verwijderen. Projectdossier Tim Carton

13

3.3.5 Nieuwsbrief Naast het maken van een online administratiemodule was het voor 'Pet af voor Technische Vorming' ook belangrijk om nieuwsbrieven te kunnen versturen. Om de mails wat extra aantrekkingskracht te geven, koos ik ervoor om een systeem te maken dat HTML-nieuwsbrieven verzend. Het opmaken van de tekst, alsook het invoegen van afbeeldingen, gebeurt op volledig dezelfde manier als het toevoegen en aanpassen van tekst aan de website. Via de website kunnen bezoekers zich inschrijven op de nieuwsbrief. Uiteraard gebeurt dit niet zonder enige controle. Voor eerst wordt nagezien of de ingevulde data wel een geldig e-mailadres is. Dit gebeurt via een reguliere expressie2.

Fig. A10: Reguliere expressie ter controle van het ingevulde emailadres.

Als het resultaat van de functie ereg() 'false' is, krijgt de bezoeker de boodschap te zien dat hij een ongeldig email-adres invulde. Is het resultaat 'true', dan wordt er gecontroleerd of het email-adres al in de database aanwezig is of niet. Is dat niet het geval, dan wordt het adres toegevoegd aan de database. Bij het inschrijven op de nieuwsbrief, komt de bezoeker automatisch in de algemene lijst terecht. Het is aan de beheerder van de website om het e-mailadres aan de juiste mailinglist te koppelen. Dit kan in wezen een tekortkoming lijken, maar het lijkt mij de beste manier om misbruik te voorkomen. De mailinglists die worden opgemaakt, zijn onderverdeeld in functie van doelgroep en niet in functie van interesses. Zo is er een mailinglist 'stuurgroep' en een mailinglist 'algemeen'. Als de bezoeker in staat zou zijn om zich in te schrijven op de mailing voor de stuurgroep, dan zou die wel eens informatie kunnen ontvangen die niet voor hem bestemd is. De beheerder van de website kan nieuwe lijsten naar believen toevoegen. Het versturen van de nieuwsbrief gebeurt via de PHP-functie mail()3. Om HTML-mails te kunnen versturen, is het belangrijk dat de juiste mailheaders aan de e-mail worden toegevoegd. In dit geval, is dit de header voor text/html die je ziet op figuur A11.

Fig. A11: Om HTML-mails te versturen is het belangrijk dat je de juiste Content-type instelt.

2 Bron: Using regular expressions in PHP, James Usher-Smith, (http://www.sitepoint.com/article/regular-expressions-php) 3 Bron: http://www.php.net/mail Projectdossier Tim Carton

23/12/2002

14

3.3.6 Fotoalbum De vijfde en laatste categorie in de administratiemodule, is het beheer van het fotoalbum. De beheerder van de website kan op een heel eenvoudige manier een fotoalbum aanmaken en daarin foto's plaatsen. Er is geen enkele kennis van FTP vereist, want uploaden gebeurt via de in PHP beschikbaar zijnde functies. Het fotoalbum is MySQL gebaseerd, wat wil zeggen dat alle data in de database bewaard wordt. Er is een tabel voor de verschillende categorieën (lees: albums) en voor de bestandsnamen van de foto's. Een eerste stap in het uploaden, is het aanmaken van het album. Beter gezegd is dit: het aanmaken van een map op de server. Dit gebeurt via het mkdir() commando. Hier stopt het echter niet, want om schrijftoegang te krijgen tot deze map, moet die map via chmod()4 de correcte rechten krijgen.

Fig. A12: Het aanmaken van een map op de server.

Eens deze map aangemaakt is, kunnen de foto's ge-upload worden. Dit kan in drie delen opgesplitst worden: het checken van de te uploaden foto, het uploaden zelf en het automatisch aanmaken van de thumbnail. Het controleren van de foto begint met de extensie van de foto: “heeft de gebruiker wel een foto gekozen?” De toegelaten extensies worden in een array gestoken. Hoewel bmp eigenlijk niet het optimale bestandsformaat is om op het web te gebruiken, voeg ik dit type bestanden toch toe aan de lijst met toegelaten types. De reden hiervoor is dat er later toch nog op de bestandsgrootte gecheckt wordt. Fig. A13: Toegelaten bestandstypes bij het uploaden van foto's

Een volgende controle gebeurt op de breedte van de site. De foto mag niet breder zijn dan 350 pixels. Is dit wel het geval, dan wordt de foto niet ge-upload. Ook wordt er nagekeken of de foto niet te groot is qua bestandsgrootte. Als de foto deze controles feilloos gepasseerd is, wordt de foto opgeslagen in de eerder aangemaakte map.

4 Chmod(): 0777 geeft alle rechten aan alle gebruikers (http://be2.php.net/chmod) Projectdossier Tim Carton

15

Als derde en laatste stap in het uploaden van foto's, wordt er per foto een thumbnail5 aangemaakt. Dit gebeurt door eerst na te gaan of het om een liggende of staande foto gaat. De thumbnail krijgt automatisch een naam toegewezen en wordt vervolgens opgeslagen in de juiste map.

Fig. A14: Het bepalen van de breedte en hoogte van de thumbnails.

Op figuur A13 worden de breedte en de hoogte van de te maken thumbnail bepaald aan de hand van een standaard breedte (indien het gaat om een landscape6 foto) of hoogte (indien het gaat om een portrait7 foto). Om te weten over welk soort foto het gaat, worden de hoogte en breedte uit de foto gehaald via de functie getimagesize(). Deze functie geeft een array terug met daarin de breedte (index 0), hoogte (index 1), bestandstype (index 2) en een HTML-klare string die de breedte en hoogte bevat (index 3).

Fig. A15: Het maken van een nieuwe afbeelding

Het maken van de thumbnail zelf, begint met het creëren van een lege afbeelding met de juiste breedte en hoogte (via imagecreatetruecolor()). Via de functie imagecopyresized() wordt de originele foto dan naar de pas aangemaakte afbeelding gekopieerd. De functie imagejpeg(), zoals te zien op figuur A14, koppelt de afbeelding uiteindelijk aan de juiste afbeeldingsnaam.

5 Thumbnail: Kleine versie van een foto die dient als preview. Vaak fungeert hij als link naar de grotere versie. 6 Landscape: liggende foto, waarbij de breedte groter is dan de hoogte. 7 Portrait: staande foto, waarbij de hoogte groter is dan de breedte. Projectdossier Tim Carton

16

3.4 Wekelijkse verslagen Maandag 13 maart 2006 •Kennismaking

Maandagochtend 8u30, korte kennismaking met de collega's van de afdeling aan- en verkoop in Barco departement Sevenslaan. •Toegang tot netwerk

Normaal gezien zou er een toegang tot het barco-netwerk voorzien zijn, maar dat was nog niet in orde. De eerste dag dus internetloos doorgebracht, wat uiteindelijk geen problemen opleverde. •Lay-out

Wat de lay-out van de nieuwe website betreft, kreeg ik van Pet Af vrijwel carte blanche. Om een goede keuze te maken, maakte ik vandaag 2 mogelijke lay-outs in Adobe Photoshop CS. Heel tevreden was ik echter niet, dus morgen op zoek naar een derde en betere versie.

Dinsdag 14 maart 2006 •Toegang tot netwerk

De tweede dag in mijn stageperiode, en nog steeds geen netwerkaansluiting. Opnieuw levert dit geen problemen op, want er is nog werk genoeg aan het ontwerpen van een goede lay-out. •Ontwerp lay-out

Een nieuwe poging tot het maken van een geslaagde lay-out. En naar mijn gevoel geldt het gezegde "driemaal scheepsrecht", enkel nog wat fine-tuning ter vervollediging en dan kan dit ontwerp als de lay-out voor de nieuwe website dienen.

Woensdag 15 maart 2006 •Toegang tot netwerk

De dag begint goed met de mededeling dat er een account werd aangemaakt dat me toegang tot het netwerk moet verschaffen. Enkel het wachtwoord lijkt het nog niet te doen. In de namiddag werd dit ook in orde gebracht, waardoor alle info op het www nu voor het grijpen ligt. •Figuurtjes tekenen

Als aanvulling op de huisstijl zal ik zelfgetekende figuurtjes in de site implementeren. Het gaat hier om drie "vermenselijkte" werktuigen: een schroevendraaier, een hamer en een zaag. Vandaag tekende ik de schroevendraaier en een deel van de zaag. •Planning opstellen

Uiteraard is er ook een goede planning nodig bij het realiseren van elk project. Het schema dat ik vandaag opstelde moet ervoor zorgen dat de site eind mei-begin juni klaar is, testing niet inbegrepen. Op die manier heb ik nog ruim de tijd om de website (al dan niet op het stagebedrijf, indien niet: afwezigheid bespreken met stagebegeleidster) door verschillende personen te laten testen.


17

Donderdag 16 maart 2006 •Figuurtjes tekenen

Het tekenen van de figuurtjes gaat gewoon verder. Vandaag tekende ik de rest van de zaag en een hamer. Alle tekeningen kregen zoals eerder gezegd een menselijk karakter mee, i.e. haar, neus, ogen, mond, kledij, ... . •"Pre-xHTML schets"

Om de gemaakte lay-out straks gemakkelijker in xHTML om te zetten, maakte ik vandaag een gedetailleerde tekening op papier waarin elke tabel, cel en kolom met de nodige eigenschappen werd uitgetekend. •Bronbestanden ontvangen

Aan de stagebegeleidster van Pet Af vroeg ik de nodige bronbestanden (logo's in groot formaat, foto's van huisstijl, ...). Dit alles ontving ik vandaag samen met nog wat ander nuttig materiaal op een CD-ROM.

Vrijdag 17 maart 2006 •Aangepaste lay-out in xHTML gieten

Vandaag heb ik de getekende lay-out in een xHTML-versie omgezet, gebaseerd op een tabel-indeling. Door deze omzetting viel het me op dat de lay-out toch iets te druk oogt. Daarom ben ik via twee kleine aanpassingen tot een nieuw -en wat mij betreft definitiefontwerp gekomen. •Afwerken tekeningen

De drie getekende figuurtjes vragen nog wat afwerking. Enkele attributen moeten het geheel wat interessanter maken, alsook worden de figuurtjes verschillende lichaamshoudingen aangemeten. Tenslotte koos ik bij de zaag ook voor verschillende t-shirts en details in het aangezicht. •Einde week: situatie in planning

Met het einde van deze dag is meteen ook de eerste stageweek afgelopen. Tijd dus voor een eerste evaluatie van de vorderingen ten opzichte van de vooropgestelde planning. De evaluatie is gunstig, aangezien de xHTML-structuur nu al af is, zit ik een drietal dagen voor op schema. Ik hou dan ook een tevreden gevoel over aan deze eerste week.

Maandag 20 maart 2006 •xHTML structuur vervolledigen met PHP

De xHTML structuur die eind vorige week werd aangemaakt, heb ik vandaag geoptimaliseerd door van de vaak voorkomende zaken afzonderlijke pagina's te maken en die via PHP-code te includen in het standaard skelet. Zo wordt de code niet alleen veel overzichtelijker, het wordt ook stukken gemakkelijker om zaken in die veel voorkomende pagina's aan te passen. Eén aanpassing volstaat nu namelijk om de volledige site te veranderen. •Navigatiestructuur

Vandaag dacht ik ook na over de realisatie van de navigatiestructuur. Die structuur bestaat uit 2 niveau's: 5 hoofditems met daaronder 2 tot 7 subitems. Ik heb beslist om te werken met een globale variabele die per hoofditem een aangepaste waarde krijgt. Op basis van die waarde wordt de subnavigatie dan ingevuld. Het invullen van de subnavigatie gebeurt op één en dezelfde pagina, wat het eventuele aanpassen opnieuw vereenvoudigt.


18

Dinsdag 21 maart 2006 •Stageplaats even verlaten

Nadat ik de mensen van Barco ervan op de hoogte bracht, verliet ik deze voormiddag voor een uurtje mijn stageplaats. Dit in het teken van het maken van een project voor de module Office Automation, onder begeleiding van Mevr. Viaene. Dit uur bevond ik me in de Hiepso. •Optimaliseren getekende figuren

Nu ik de getekende figuren in de site kan inbrengen, viel me op dat enkele zaken nog geoptimaliseerd konden worden. Het ging hier om details zoals het geven van een achtergrondkleur, het verschalen en het spiegelen van de afbeelding, of het toevoegen van enkele "bewegingslijntjes". •Eerste volwaardige PHP-code

Hoewel er gisteren bij het maken van de navigatiestructuur al PHP-code aan te pas kwam, schreef ik vandaag al iets meer gevorderde code. Dit mag gerust relatief opgenomen worden, maar toch schreef ik na enig denkwerk een sterk vereenvoudigde code om afbeeldingen in een rotatiesysteem te steken. De afbeeldingen in kwestie zijn de illustrator-tekeningen die onderaan links de site verschijnen.

Woensdag 22 maart 2006 •Foto's huisstijl

De foto's uit de huisstijl van Pet Af mogen niet ontbreken op de website. Alleen is het even denken om ze op een passende manier aan te brengen. Dit is hopelijk gelukt door ze in rotatiesysteem in de header van de website te plaatsen. •Geavanceerd rotatiesysteem

Het rotatiesysteem waarvan sprake in het vorige puntje bleek al snel niet voldoende te zijn. Er was geen controle op de reeds getoonde foto's, waardoor 2 of zelfs 3 dezelfde foto's getoond konden worden. Een iets geavanceerder systeem was dus wensbaar, en dat heb ik ook geschreven. Na enige testtijd is het systeem goed bevonden, geen enkele keer werd een foto dubbel of drie maal getoond. •Dynamiek?

Om een beetje dynamiek in de site te brengen is er een rollover-effect op de huisstijlfoto's geplaatst. Alleen ben ik er nog niet uit of dit wel meerwaarde aan de site geeft. Rondvraag bij de opdrachtgever zal uitsluitsel moeten brengen. •Valid website

Vandaag heb ik de website ook volledig xHTML-valid gemaakt. Het CSS bestand geraakte op enkele waarschuwingen (geen fouten) na ook heelhuids door de validator.

Donderdag 23 maart 2006 •Foutje in lay-out

Gedetailleerd nazicht van de gerealiseerde lay-out bracht een klein foutje aan het licht. Soms wordt een lijn bij het kadertje van het submenu iets te ver doorgetrokken. Het was heel lang zoeken naar de oorzaak, waardoor een oplossing ook enige tijd uitbleef. Uiteindelijk is het toch gelukt dit probleem op te lossen. •Stagewebsite

Ietwat aan de late kant stak ik vandaag een stagewebsite in elkaar waar stagebegeleider en MCT-coach mijn vooruitgang kunnen volgen.


19

•Morgen belangrijke dag

Morgen staat er van 12u30 tot 14u30 bij Pet Af in het Kasteel 't Hooghe in Kortrijk een werklunch op het programma. Ik ben uitgenodigd om mijn plannen en reeds gerealiseerde zaken toe te lichten. Morgen krijg ik dus met andere woorden een stop of go voor mijn gekozen lay-out.

Vrijdag 24 maart 2006 •Firefox

Vandaag is me opgevallen dat de website totaal niet compatibel is met Mozilla Firefox, een veelgebruikte internet browser naast Microsoft Internet Explorer. Wellicht is de oorzaak te vinden in het CSS-bestand. Dit wordt vandaag nagekeken en indien tijd nog opgelost. Zoniet moet dit begin volgende week opgelost worden. •Stuurgroepvergadering

Deze middag stond in het gebouw van Pet Af een stuurgroepvergadering op het programma. Een ideale gelegenheid om mijn lay-out te laten keuren door de aanwezigen. De commentaren waren positief en de opmerkingen heel bruikbaar. Er werd onder andere voorgesteld om een lichte animatie, en daarmee ook dynamiek, in de getekende figuurtjes te steken. Ook peter Flip Kowlier mag iets meer in the picture staan. Wat de inhoud betreft werd er vandaag duidelijkheid geschept over hoe dit moet aangepakt worden. Zo blijft de 11 - 12 jarige leerling het hoofddoel van de website. In die zin moet de inhoud ook aangepast worden wat woordkeuze betreft. Ook de functie om een studierichting en school te kiezen moet heropgevist worden. •Einde week: situatie in planning

Als ik mijn planning vergelijk met het reeds gepresteerde werk, stel ik vast dat ik nu een week voor ben op mijn schema. Die week komt goed van pas om de commentaren die op de stuurgroepvergadering gegeven werden, in actie om te zetten. Ik voorzie voor deze aanpassingen echter geen volledige week, waardoor ik nog altijd enkele dagen voor zit op schema. Dagen die later nog van pas kunnen komen.

Maandag 27 maart 2006 •Animatie

Na een korte brainstorm over hoe de tekeningen geanimeerd kunnen worden, begon ik vandaag met het eerste figuurtje. Dit nam toch iets meer tijd in beslag dan ik aanvankelijk verwacht had, mede doordat het actionscripten niet echt vlotte. Nu dit uiteindelijk toch gelukt is, hoop ik morgen iets rapper te kunnen werken.

Dinsdag 28 maart 2006 •Verder onderzoek

Om nog wat inspiratie op te doen voor de verschillende animaties, ging ik vandaag eens kijken op www.kidcity.be. Daar valt op dat de animaties zich tot iets heel eenvoudigs beperken zoals mondbewegingen, armbewegingen, ... Ook op de (sub)site van Ketnet Kick zie ik geen al te grote animaties, net als bij www.nesquik.info. Hierdoor ben ik van plan volgende beperkte animaties in te voeren wanneer de bezoeker over de tekeningen gaat met de muis: - schroevendraaier: knipperen met ogen, lichte beweging in "staart" - hamer met nagel: hamer klopt nagel in houtblok, eventueel klein geluidje - hamer op box: knipperen met ogen - hamer en schroevendraaier: zonnebril afnemen, knipoogje trekken, zon doen schijnen, eventueel wolkje laten passeren.


20

Woensdag 29 maart 2006 •Animatie

Zoals de twee vorige dagen maakte ik vandaag de animaties in de tekeningen. Hier kruipt nogal veel werk in, maar ik ben er van overtuigd dat deze animaties een meerwaarde geven aan zowel de website als aan mijn stage. •Eigenaardig probleem vastgesteld

Weinig nieuws onder de zon. Vandaag opnieuw aan de animaties gewerkt. Hierbij stootte ik op een vreemd probleem bij het importeren van vectoriële tekeningen in Flash 8. •Oplossing

Het heeft een hele tijd geduurd, maar uiteindelijk ben ik dan toch tot een oplossing gekomen. De tekening is niet op de gewenste manier geïmporteerd, maar naar de eindgebruiker toe maakt dit geen enkel verschil voor wat het eindresultaat betreft. In plaats van de figuur naar de library te importeren, heb ik hem gewoon hardgecodeerd ingeladen.

Donderdag 30 maart 2006 •Variatie in animatie

Het is belangrijk dat er toch enige variatie te bespeuren is in de animaties op de illustrator-tekeningen. Daarom zou ik in een van de tekeningen een klein interactief "spel" willen inbouwen: wanneer de bezoeker over de figuur gaat (of erop klikt), valt die in stukken uiteen. Vervolgens moet de bezoeker de tekening opnieuw opbouwen via het klik & sleep-principe.

Vrijdag 31 maart 2006 •Animaties

De animatie waarvan sprake op 30 maart is er gekomen. Er rest me nu nog 1 figuurtje te animeren. Ik probeer dit de komende twee weken te doen zodat ik na het paasverlof nog altijd op schema zit met mijn vooropgestelde planning. •Paasverlof

Van 1 tot 16 april is het Paasverlof waardoor ik niet op mijn stageplaats aanwezig zal zijn. De mensen van Pet af en Barco zijn hiervan op de hoogte

Maandag 17 april 2006 •Paasmaandag

Vandaag Paasmaandag, en dus verlof.

Dinsdag 18 april 2006 •Concept website

Ik dacht vandaag ook na over het structurele concept van de website. Ik ben er namelijk nog niet uit of ik per navigatie-onderdeel 1 pagina maak, of dat ik alles in één pagina doe. Dit laatste zou het technisch onderhoudsgemak drastisch verhogen. •Research Flash

Vandaag moesten er nog enkele problemen opgelost raken wat betreft actionscript en de combinatie flash-php. Na lange tijd zelf zoeken zonder succes, ging ik te rade bij een community. Uiteindelijk vond ik de oplossing voor het probleem (Flash movie werd in PHP wel ingeladen, maar hij speelde niet af) dan toch zelf.


21

Woensdag 19 april 2006 •Even herinneren

Vrijdag zal ik slechts tot 11u30 aanwezig zijn. 's Namiddags moet ik namelijk mijn praktijkexamen voor mijn rijbewijs afleggen. Indien ik voor 16u nog in Barco kan raken, keer ik nog terug om verder te werken. •Structureel concept website

Vandaag heb ik beslist om de structuur van de website op een andere manier aan te pakken. Er zal nog maar met 1 pagina gewerkt worden. Afhankelijk van parameters in de url, wordt er hierop andere inhoud getoond. Dit brengt ook met zich mee dat de navigatie aangepast kan worden, althans de manier waarop die gecodeerd is. De code voor het inladen van de subnavigatie is in een tijd teruggebracht van 35 naar 10 regels. •Voordeel

Wat is nu het voordeel van dit nieuwe concept? Door alles in 1 pagina te steken, wordt er rekening gehouden met toekomstige lay-outsveranderingen. Als men na bepaalde tijd de structuur wenst te behouden, maar een nieuwe lay-out wil invoeren, dan moet er maar een pagina (met weliswaar de verschillende ingesloten subpagina's) aangepast worden. Het grootste voordeel is echter dat het op deze manier heel gemakkelijk wordt om zelf de navigatie naar believen aan te passen, dit maakt een interventie van een webmaster overbodig en kan dus door de mensen van 'Pet Af' zelf gebeuren.

Donderdag 20 april 2006 •Navigatie

Ik ben bezig met het scripten van de administratiemodule. Dit wil zeggen dat er de komende dagen weinig tot niets zichtbaars zal veranderen aan de site, maar niet dat er niet meer wordt aan verdergewerkt. Het eerste deel dat vandaag werd gemaakt is de module om de navigatie aan te passen. •Aanpak

Om het de toekomstige webmaster zo gemakkelijk mogelijk te maken, heb ik de navigatiemodule zo volledig mogelijk gemaakt. Het is nu mogelijk om: - Een hoofditem toe te voegen - Een subitem toe te voegen aan een hoofditem - De naam van een hoofditem aan te passen - De naam van een subitem aan te passen - Een hoofditem uit het menu te verwijderen - Een subitem uit een hoofditem verwijderen - De volgorde waarin de hoofditems getoond worden in de navigatiebalk wijzigen •Afwerking

Uiteraard werd er rekening gehouden met de details. Zo worden alle subitems van een bepaald hoofditem uit de database gewist wanneer dat hoofditem gewist wordt, en wordt dat hoofditem ook uit de volgordesequentie gehaald.

Vrijdag 21 april 2006 •Admin console

Vandaag stond er maar één ding op het programma: het tekstgedeelte van de administratieconsole. Het gedeelte dat dus dient om de inhoud van de website aan te passen. Teksten kunnen nu al toegevoegd en bewerkt worden. Ook zocht ik naar een systeem om opmaakcodes te kunnen invoeren. Dit systeem, een combinatie van PHP, HTML en javascript, zal morgen afgewerkt worden.


22

Maandag 24 april 2006 •Admin console

De administratieconsole is afgewerkt. Zowel vrijdag als vandaag werd het tekst-gedeelte geïmplementeerd. Hiermee is het mogelijk de teksten op de website aan te passen, verwijderen of nieuwe toe te voegen. •Gebruiksgemak

Het gebruiksgemak van deze console ligt opnieuw heel hoog. De toekomstige webmaster zal geen enkele kennis van HTML moeten hebben om teksten toe te voegen of te bewerken. Enkel de basiskennis van een tekstverwerker is leuk meegenomen. De mogelijkheden die de webmaster zal hebben zijn de volgende: - Tekst in het vet plaatsen - Cursieve tekst toevoegen - Teksten onderlijnen - Tekstkleur aanpassen - Een link invoegen - Een afbeelding uploaden en aan de tekst toevoegen •Nieuwsbrief

Vandaag begon ik ook aan het nieuwsbriefsysteem. De bezoeker kan zich momenteel inschrijven op de mailinglist, morgen is het de bedoeling om het admingedeelte van dit onderdeel te scripten.

Dinsdag 25 april 2006 •Nieuwsbrief inschrijvingscontrole

Wat gisteren nog niet volledig afgewerkt was, is vandaag wel gebeurd. Er is nu een controle op het inschrijven op de nieuwsbrief. Eerst en vooral wordt er gecheckt of de ingegeven tekst wel een geldig emailadres is (reg. expr.), daarna wordt er gecontroleerd of het emailadres al dan niet al in de database aanwezig was. Indien wel, dan wordt het nieuwe adres niet opgeslagen. Het zou namelijk overbodig zijn om een nieuwsbrief twee maal naar een adres te versturen... . •Nieuwsbrief lijsten

In het administratiegedeelte maakte ik vandaag het eerste onderdeel voor het beheer van het nieuwsbriefsysteem: het lijstenbeheer. Het zal voor de webmaster namelijk mogelijk zijn om verschillende lijsten op te stellen en daar ingeschreven e-mailadressen aan toe te voegen. Waarom meerdere lijsten en niet gewoon één lijst? Wel, op die manier kan de webmaster (in dit geval de administratieve verantwoordelijke voor Pet Af) mails naar verschillende groepen versturen. Stel nu dat de verantwoordelijke van Pet Af een mail wil sturen naar alle leden van de stuurgroep, dan zal dit ook via de site kunnen. Wil de verantwoordelijke een mail naar de voltallige ledenlijst sturen, dan is dit ook mogelijk. •Donderdag afwezig

Donderdag is er de jobbeurs in de PIH, aanwezigheid verplicht. Bijgevolg ben ik dan niet aanwezig in het stagebedrijf.


23

Woensdag 26 april 2006 •Nieuwsbrief Lijstbeheer

Zoals gepland, is het mogelijk om meerdere lijsten/groepen aan te maken binnen het nieuwsbriefsysteem. Dit beheer werd vandaag gescript. Het is nu mogelijk om nieuwe groepen te creëren en om e-mailadressen aan een bepaalde groep te koppelen. Bij het inschrijven komt het nieuwe emailadres automatisch in de groep "algemeen" terecht. Het is dan aan de webmaster om het adres aan de juiste groep te koppelen. •Nieuwsbrief verzenden

De mailfunctie werkt voorlopig nog niet, maar volgens mij ligt dat aan het feit dat ik hier lokaal werk en er geen mailserver op mijn PC geconfigureerd is. Daarom zal ik de geschreven code vanavond uittesten wanneer de website op de webserver draait. •Proxy-probleempje

Hier in Barco zit ik achter een proxy-server. Dit schept een klein probleem wanneer ik toegang wil krijgen tot de beheerconsole van de webruimte. De enige oplossing zal zijn om dat werk 's avonds thuis te doen.

Donderdag 27 april 2006 •Jobbeurs PIH

Vandaag ben ik niet aanwezig op mijn stageplaats, dit omwille van de jobbeurs in de PIH. Ik volgde 3 infosessies (GPB, verder studeren, grafische opleiding) en voerde 2 sollicitatiegesprekken (Esri BeLux en Conba nv). •Infosessies

Ik had vooral interesse in de GPB-sessie en de grafische opleiding. De GPB-sessie was dan ook heel interessant en ik heb de nodige info ingewonnen. Deze opleiding volgen blijft een van de grote opties voor volgend jaar, zelfs al vind ik een job. De grafische opleiding lijkt me ook interessant, maar dan als eerste opleiding. Naar mijn mening is de meerwaarde die je creëert niet groot genoeg om een positief besluit te kunnen trekken uit de vergelijking meerwaarde <-> duur opleiding/inschrijvingsgeld. •Esri BeLux •Dit bedrijf is gespecialiseerd in GIS-systemen, en zoekt een helpdeskmedewerker. Het gesprek

verliep vlot en ik word eventueel uitgenodigd voor een verder gesprek in het bedrijf zelf. •Conba nv Dit bedrijf houdt zich vooral bezig met SEO, maar ook met het opzetten van ecommerce- en aanpasbare sites voor klanten. Dit gesprek verliep naar eigen gevoel heel vlot en zeer goed. Een dezer dagen krijg ik een e-mail met het bericht of ik al dan niet uitgenodigd word voor een nieuw gesprek op het bedrijf zelf. Vrijdag 28 april 2006 •Nieuwsbrief versturen

Het probleem met het versturen van nieuwsbrieven via de site is opgelost. De oorzaak was inderdaad te zoeken bij het feit dat ik lokaal werk.

Maandag 1 mei 2006 •Feest van de arbeid

Verlof.


24

Dinsdag 2 mei 2006 •Bugs

Bij het testen van het administratiesysteem ben ik nog op enkele bugs gestoten. Deze werden vandaag opgelost. De eerste bug was het invoegen van een afbeelding. Bij het uploaden, ging de eerder getypte tekst voor het bericht verloren. Dit kan uiteraard niet de bedoeling zijn, als oplossing koos ik ervoor om het uploadformulier via een popup in een ander venster te tonen. Een andere bug lag bij het invoeren van een link in de tekst. De link werd gewoon achteraan de getypte tekst toegevoegd, maar stel nu dat de gebruiker de link wil op de plaats waar de cursor op dat moment staat, dan zat ik met een probleem. Via een extra stukje javascript is dit nu opgelost. Een andere bug zit hem in de waarden van de globale variabelen. Soms zijn deze niet bepaald, waardoor er errors optreden. Dit wordt nu ook opgevangen waardoor het volledige systeem nu errorvrij zou moeten zijn. -> Fotoalbum Niet echt een deel van de opdracht, maar wel mooi meegenomen als extraatje voor de mensen van Pet Af. Zo wordt het mogelijk om sfeerbeelden van vb. de muizenvalwagenrace aan het publiek te tonen. Het blijft uiteraard de bedoeling om alles zo eenvoudig mogelijk te maken, daardoor zal de webmaster enkel een album moeten aanmaken (1 inputveld) en daarna de foto's web-based in dat album moeten uploaden. Thumbnails worden automatisch aangemaakt. In enkele klikken tijd bekomt de webmaster zo een mooi fotoalbum.

Woensdag 3 mei 2006 •Fotoalbum

Het fotoalbum is mysql-gebaseerd, wat wil zeggen dat alle opgeladen foto's in een tabel worden bijgehouden. Het uploaden gebeurt via een webbased-formulier, terwijl een thumbnail van de foto automatisch gecreerd wordt. •Nieuwsbrief

Wat ik de voorbije dagen over het hoofd zag, was de afwerking van het nieuwsbriefsysteem. Alle beheerdersfuncties werkten wel, maar de mail op zich was nog geen HTML-formaat, iets wat wel gevraagd werd door de opdrachtgever. Dit begon ik vandaag te implementeren.

Donderdag 4 mei 2006 •Afwezig

Afwezig wegens begrafenis grootvader.

Vrijdag 5 mei 2006 •Nieuwsbriefsysteem

Eens de nieuwsbrief uiteindelijk in HTML-formaat werd gegoten, moest alles nog in de meest courante "omgevingen" getest worden. Hotmail, g-mail, howest, outlook 2003, telenet webclient, werden vandaag uitgetest en gaven geen problemen. •Fotoalbum

Het fotoalbum is af, en in principe gebruiksklaar. Toch zou ik er nog een kleine variatie in aanbrengen. Nu worden alle ge-uploade foto's van alle albums in een map opgeslagen, ik zou dit willen veranderen zodat per aangemaakt album een nieuwe map wordt aangemaakt in de FTP-structuur.


25

Maandag 8 mei 2006 •Concept spelletje

Om de website speels en aantrekkelijk te houden, heb ik ervoor gekozen om een spelletje te implementeren. Het spel zal in Adobe/Macromedia Flash gemaakt worden, vandaag dacht ik na over het concept. •Verschillende mogelijkheden

Er waren verschillende mogelijkheden. Eén ervan was een traditioneel "vang" spelletje, waarbij de getekende figuurtjes (schroevendraaier, zaag, hamer) uit de lucht komen vallen en moeten opgevangen worden. Dit lijkt me echter iets te gewoon, waardoor ik beter iets anders zou zoeken. Ik kwam daarna terecht bij een ander idee, namelijk de muizenvalwagenrace die ook in real life bestaat. Maar hoe kan ik dit invullen? - Race tegen PC: de bezoeker racet tegen een pc-gegenereerde tegenstander, en moet als eerste over de meet van een kaarsrecht parcours komen - Race op circuit: de bezoeker racet tegen een pc-gegenereerde tegenstander, en moet als eerste over de meet komen na enkele ronden op een getekend circuit. Bonuspunten zijn te verdienen door het verzamelen van verschillende items. - Virtuele Muizenvalwagenrace: Eerst laten we de gebruiker een muizenvalwagen samenstellen (drag & drop), en daarna laten we hem racen zoals hierboven in het tweede puntje vermeld. De twee laatste mogelijkheden lijken me het meest interessant, maar het is nog even afwachten welke oplossing het meest haalbaar is.

Dinsdag 9 mei 2006 •Concept spelletje

Het concept van het spel wordt het volgende: In een eerste scherm zal de speler in beperkte mate een wagen kunnen samenstellen. Er zal keuze zijn tussen verschillende types/kleuren muizenvallen en verschillende groottes van wielen die aan de wagen bevestigd moeten worden. Afhankelijk van de y-afstand tussen de wielen op een as, wil ik proberen om de maximum snelheid van de wagen aan te passen. Nadat de wagen gebouwd is, komt de speler op een circuit terecht waar hij het tegen drie tegenstanders (PC) moet opnemen. Als de wagen tegen de rand van het circuit komt, zal de snelheid verminderen zodat de speler tijd/afstand op tegenstanders verliest. •Realisatie vandaag

Vandaag werd het circuit getekend (pijltjestoetsen) opgevangen.

en

werd

de

besturing

van

het

wagentje

•Extra realisaties

Aangezien dit spelletje niet tot de eigenlijke opdracht behoort, maar een zelf gekozen extraatje is om de stage-opdracht uit te breiden, zal een highscore-systeem pas geïmplementeerd worden als de rest van de site volledig af is.


26

Woensdag 10 mei 2006 •Inhoud website + opmerking

Vandaag heb ik de inhoud van de oude site overgebracht naar de nieuwe. Dit geeft meteen een andere indruk, en maakt ook duidelijk dat de site eigenlijk iets breder mag zijn. De ruimte waar de tekst nu staat, is iets te smal. Het verbreden van de website kan eventueel als gevolg hebben, dat de website niet meer optimaal zal weergegeven worden op een 800*600 resolutie (resolutie die steeds minder vaak voorkomt). •Inhoud aanpassen aan doelgroep

De inhoud moet nog worden aangepast aan de doelgroep. Moeilijke termen en ingewikkelde zinsconstructies moeten worden omgezet in een taal die voor 12-jarigen verstaanbaar is. •Animaties

Kinderen uit de doelgroep voor deze site, experimenteren graag. Om hierop in te spelen, heb ik een lichte animatie aangebracht op de contactpagina. Door bewegingen van de muis over een foto, gaat die over in een andere foto. Ook is er een geanimeerde banner te zien, die de aandacht vestigt op de peter van Pet Af (Flip Kowlier). De banner moet enige nieuwsgierigheid opwekken.

Donderdag 11 mei 2006 •Contactformulier

Het formuliertje om van op de website naar Pet Af te mailen, werd vandaag gerealiseerd. Het is gebruiksvriendelijker dan gewoon een e-mail adres kenbaar te maken. •Bug administratiesysteem

Toen ik een deel van de inhoud wou aanpassen via het administratiesysteem, werd duidelijk dat ik nog iets over het hoofd gezien had. De UBB-code die bij het toevoegen van een nieuw stukje tekst wordt omgezet in HTML-code, werd bij het aanpassen van datzelfde stukje tekst niet omgezet van HTML naar UBB. Op die manier zou de beheerder toch HTML moeten kennen/leren, en dat is niet de bedoeling. Daarom werd dit probleem vandaag verholpen en wordt er bij het bewerken van teksten nu ook gebruik gemaakt van UBB-code.

Vrijdag 12 mei 2006 •Breedte

De breedte van de website werd vandaag aangepast. In plaats van de oorspronkelijke vaste breedte van 750px (optimale weergave vanaf 800*600), wordt de site nu op 90% van de breedte van het scherm getoond. Op de standaard 1024*768 resolutie wordt de site perfect weergegeven, op andere resoluties en schermtypes moet dit nog uitgetest worden. •Breedte fotoalbum & adminconsole

Ook de adminconsole en het fotoalbum moeten uiteraard aangepast worden qua breedte. •Probleem fotoalbum

Bij het verbreden van het fotoalbum en het daaraan gekoppelde testen, blijkt er plots een fout in de code gesloten te zijn. Het aanmaken van de thumbnail werkt niet naar behoren bij *.gif-bestanden, en dat moet dus nog opgelost worden.


27

Maandag 15 mei 2006 •Fotoalbum

Het was even zoeken naar de oorzaak van het probleem in het fotoalbum. Bij het automatisch genereren van de thumbnails ging er iets mis. Uiteindelijk lag het aan de gebruikte functie. Die werkte enkel voor afbeeldingen van het type *.jpg. Nu is dit aangepast, en werkt het ook voor gif, png en bmp. •Voorstel inhoud

De inhoud van de huidige website is niet echt op de doelgroep (voornamelijk 12 jarigen) toegespitst. De "moeilijke" termen die gebruikt worden, zouden vloeken met de nieuwe lay-out (zakelijk vs. speels). Er werd me gevraagd enkele voorstellen tot aanpassen gedaan, en die zullen later deze week besproken worden op een nieuwe vergadering.

Dinsdag 16 mei 2006 •Dossier

Eind deze week moet er een draft-versie van het stagedossier ingediend worden. Hoog tijd dus om hier nog wat aan verder te werken en een woord vooraf en inleiding te schrijven, alsook om ervoor te zorgen dat de lay-out verzorgd is.

Woensdag 17 mei 2006 •Dossier


Donderdag 18 mei 2006 •Dossier



28

3.5 Planning 3.5.1 Aanvankelijke planning Week 1: 13/03/2006 tot 17/03/2006 13/03: 14/03: 15/03: 16/03: 17/03:

kennismaking, dossier opstellen dossier, aanmaken lay-outs aanmaken lay-outs aanmaken en finaliseren lay-outs, tekenen figuurtjes in illustrator tekenen figuurtjes in illustrator

Week 2: 20/03/2006 tot 24/03/2006 20/03: 21/03: 22/03: 23/03: 24/03:

tekenen figuurtjes in illustrator tekenen figuurtjes in illustrator tekenen figuurtjes in illustrator lay-out omzetten in xHTML-structuur, CSS lay-out omzetten in xHTML-structuur, presentatie op stuurgroepvergadering

Week 3: 27/03/2006 tot 31/03/2006 27/03: aanpak navigatiesysteem op papier uittekenen, begin navigatiesysteem maken 28/03: navigatiesysteem maken (scripting) 29/03: navigatiesysteem afwerken 30/03: controleren of xHTML structuur valid is en eventueel aanpassen 31/03: Laatste aanpassingen om lay-out definitief af te werken zodat volgende week met de echte PHP-scripting kan begonnen worden. 03/04/2006 tot 07/04/2006 03/04: 04/04: 05/04: 06/04: 07/04:

Paasverlof Paasverlof Paasverlof Paasverlof Paasverlof

10/04/2006 tot 14/04/2006 10/04: 11/04: 12/04: 13/04: 14/04:

Paasverlof Paasverlof Paasverlof Paasverlof Paasverlof

Week 4: 17/04/2006 tot 21/04/2006 17/04: Administratiesysteem scripten (aanpak op papier uittekenen, toegang tot database) 18/04: Administratiesysteem scripten 19/04: Administratiesysteem scripten, testen, inhoud site invullen 20/04: Single file-upload systeem scripten (foto's en vergaderingsverslagen uploaden) Projectdossier Tim Carton

29

21/04: Nieuwsbriefsysteem scripten (uitgebreid informeren op het www en in ander bronmateriaal), namiddag afwezig (rijexamen) Week 5: 24/04/2006 tot 28/04/2006 24/04: 25/04: 26/04: 27/04: 28/04:

Nieuwsbriefsysteem Nieuwsbriefsysteem Nieuwsbriefsysteem Nieuwsbriefsysteem Fotoalbum scripten

scripten scripten scripten scripten + testen, tijdens dag afwezig (Jobbeurs PIH)

Week 6: 01/05/2006 tot 05/05/2006 01/05: 02/05: 03/05: 04/05: 05/05:

Feest v/d Arbeid Fotoalbum scripten Concept spelletje bedenken, namiddag afwezig (rijexamen bis) Realisatie spelletje, namiddag afwezig (Pet Af muizenvalwagenrace) Realisatie spelletje

Week 7: 08/05/2006 tot 12/05/2006 08/05: 09/05: 10/05: 11/05: 12/05:

Realisatie spelletje Realisatie spelletje Realisatie spelletje Realisatie spelletje Afwerking spelletje, testing

Week 8: 15/05/2006 tot 19/05/2006 15/05: Sessionbeveiliging Adminmodule 16/05: Projectdossier afwerken 17/05: Projectdossier afwerken 18/05: Projectdossier afwerken 19/05: Draftversie projectdossier indienen, Dynamiek in logo krijgen (ronddraaiende schroef) Week 9: 22/05/2006 tot 26/05/2006 22/05: Dynamiek in logo krijgen (ronddraaiende schroef) 23/05: Splash pagina maken. Website online plaatsen in temp map, database overzetten op petaf.be-domein 24/05: Testing navigatie, adminmodule 25/05: Testing adminmodule 26/05: Testing adminmodule Week 10: 29/05/2006 tot 02/06/2006 29/05: 30/05: 31/05: 01/06: 02/06:

Testing Testing Testing Testing Testing

beveiliging beveiliging cross-browser compabiliteit cross-browser compabiliteit cross-browser compabiliteit


30

Week 11: 05/06/2006 tot 09/06/2006 05/06: 06/06: 07/06: 08/06: 09/06:

Uitbreiden mogelijkheden spel Uitbreiden mogelijkheden spel Projectdossier aanpassen Projectdossier aanpassen Projectdossier aanpassen

Week 12: 12/06/2006 tot 16/06/2006 12/06: 13/06: 14/06: 15/06: 16/06:

Indienen definitieve versie projectdossier Testing uitgebreid spel Testing uitgebreid spel Afwerking Afwerking

3.5.2 Actueel gepresteerde uren Aanmaken verschillende lay-outs + variaties: 9 uur Aanmaken illustratorfiguurtjes + animaties: 74 uur Nauwkeurige tekening Lay-out maken + omzetten naar HTML: 25 uur Scripten navigatiesysteem (uitlezen uit database): 7 uur Controleren op valid xHTML en aanpassen: 3 uur Aanmaken en onderhouden: 2 uur Stuurgroepvergaderingen: 4 uur Administratiemodule – navigatiesysteem: 8 uur Administratiemodule – nieuwssysteem: 22 uur Administratiemodule – nieuwsbriefsysteem: 20 uur Administratiemodule – fotoalbum: 14 uur Testing administratiemodule (alles): 12 uur Spelletje: 16 uur Aanbrengen van inhoud: 9 uur Stagedossier: 24 uur De conclusie die uit de vergelijking tussen beide planningen kan getrokken worden, is dat ik vrij lang op of zelfs voor op schema zat. Alles tot aan het maken van de administratiemodule verliep vlotter dan gepland, het maken van de administratie verliep exact zoals gepland. Dit zou moeten resulteren in het feit dat ik na 8 weken nog iets voor zat op schema, maar dat was niet het geval. De reden hiervoor is heel eenvoudig: het testen dat voor de laatste weken gepland stond, heb ik er tussendoor bijgenomen. Als ik nu het gevoel heb dat ik krap zit wat tijd betreft, dan zal dat gevoel omgekeerd worden wanneer de laatste weken zich aandienen. Na acht weken is er één ding nog niet volledig gerealiseerd: het spel. De basis ertoe is gelegd, maar meer nog niet. Deze opdracht wordt voorlopig verschoven naar week negen.


31

4. Conclusie 4.1 Evaluatie van het verrichte werk De opdracht die door 'Pet Af voor Technische Vorming' vooropgesteld werd, luidde 'maak een nieuwe website met een (online) module om alles aan te passen'. De technologie mocht door de uitvoerder zelf gekozen worden. Mijn keuze viel op PHP 8, omdat ik het interessant vond om de opgedane kennis op school aan te vullen met gevorderde praktijkervaring. De eigenlijke opdracht is volledig vervuld. Er is een nieuwe frisse look, de beheerder van de website kan nieuwsbrieven versturen en als belangrijkste punt is er een online console om de website aan te passen. De belangrijkste uitbreiding op de online console zijn de opmaakmogelijkheden. Dit was niet echt een deel van de opdracht en zonder dit zou de website ook perfect kunnen functioneren, maar de aanwezigheid ervan geeft toch een meerwaarde aan de website. Bovendien verhoogt dit de gebruiksvriendelijkheid en het gebruiksgemak van de administratiemodule heel wat. Ook het systeem om fotoalbums aan te maken is heel goed meegevallen. Dit was voor mij een onbekend deel uit het PHP-bestaan en dus een hele ontdekking. Het eindresultaat mag er qua gebruiksgemak en nuttigheid best wezen. Algemeen kan ik besluiten dat... (...een eindconclusie volgt aan het einde van de stageperiode).

4.2 Vergelijking kennis – ervaring In de opleiding Multimedia en Communicatietechnologie beperkt de cursus PHP zich in de afstudeerrichting 'Algemeen' tot een basiscursus. Ik heb ervaren dat dit echter volstaat om zelf verder op die basis voort te bouwen aan de hand van de informatie die in allerlei bronnen beschikbaar is. Wat ik tijdens mijn stage vooral heb bijgeleerd, is het werken met de GD-library9 van PHP. Dit was voor mij volledig nieuw, maar met behulp van de nodige info op het web 10 werd het een heel leerrijke en haalbare opdracht. Ondanks enige ervaring met het bouwen van andere websites, had ik tot nog toe nog geen ervaring met het maken van nieuwsbriefsystemen. Ook dit was dus nieuw voor mij en opnieuw kan hetzelfde gezegd worden: met behulp van het Internet werden heel wat problemen opgelost.

8 Hypertext Preprocessor: “PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML.” Bron: http://www.php.net 9 GD-library: Graphics draw library. “GD is an open source code library for the dynamic creation of images by programmers. GD is written in C, and "wrappers" are available for Perl, PHP and other languages”. Bron: http://www.boutell.com/gd/ 10 http://be2.php.net/gd en gerelateerde links Projectdossier Tim Carton

32

BIJLAGEN


33

Bijlage 1: Lay-out

Fig B1: Schets van oorspronkelijke lay-out


34

Bijlage 2: Kleuren

Fig B2: Het vastleggen van de te gebruiken kleuren


35

Bijlage 3: Lay-out

Fig B3: Computertekening gebaseerd op de schets uit bijlage 1


36

Bijlage 4: Lay-out

Fig. B4: Variatie op de computertekening, gebaseerd op de schets uit bijlage 1.


37

Bijlage 5: Lay-out



38

Bijlage 6: Lay-out



39

Bijlage 7: Administratiemodule – navigatie

Fig. B7: Het systeem gelijkaardig aan een datagrid, dat de beheerder in staat stelt om een bepaalde waarde in de database aan te passen. Dit systeem wordt meermaals gebruikt in deze administratie-module.

Bijlage 8: Administratiemodule – navigatie

Fig. B8: Ook om de namen van de items in de subnavigatie aan te passen, werd het datagrid-systeem gebruikt.


40

Bijlage 9: Nieuwsbrief versturen per lijst

Fig B9: De (aanzet tot de) code die nodig is om een mail naar een bepaalde groep te versturen


41

Bijlage 10: Fotoalbum

Fig B10: Wat moet er allemaal mogelijk zijn met het beheren van het fotoalbum, en hoe moet het album eruit zien?


42

Bijlage 11: Verwerken van gegevens

Fig. B11: Rond welk basisprincipe is de website opgebouwd?

Het is altijd gemakkelijker om eerst iets op papier uit te tekenen. Dat is niet anders wanneer je het basisprincipe van het verwerken van gegevens wil opzetten. Ik heb gekozen om te werken met een querystring, iets wat je in heel wat grote websites ook terugvindt. Op het tweede deel van het blad vind je de code die eerder dit verslag ook al werd toegelicht.


43

Bijlage 12:

Fig. 12: Schets van de adminconsole


44

PET AF VOOR TECHNISCHE VORMING

Recommend Documents