Afstudeerverslag Het opzetten van een klantensite Bedrijf: Buildnet Webservices BV Student: R. F. Maalman 500511085 Examinator: B. Pinkster Datum: 12 maart 2012 Auteur: Richard Maalman Versie 1.0
Titel: Het opzetten van een klantensite Student: R. F. Maalman Studentnummer: 500511085 Onderwijsinstelling: Hogeschool van Amsterdam Opleiding: Informatica
Afstudeerperiode: 10 – 10 – 2011 t/m 12 – 03 – 2012 Examinator: B. Pinkster
Bedrijf: Buildnet Webservices BV Adres: Kinderhuissingel 126, H aarlem Bedrijfsbegeleider: S. van den Broek
Datum: 12 maart 2012 Auteur: Richard Maalman Versie 1.0
Pagina 2 van de 52
Versiebeheer Versie 0.1
Datum 21 – 11 – 2011 12 – 12 – 2011 21 – 12 – 2011 25 – 1 – 2012 26 – 1 – 2012 27 – 1 – 2012 30 – 1 -2012 2 – 2 – 2012 3 – 2 – 2012
0.2
9 – 2 – 2012 28 – 2 – 2012 5 – 3 – 2012 6 – 3 – 2012
1.0
7 – 3 – 2012 12 – 3 – 2012
Eigenaar Richard Maalman
Aanpassingen Inhoudsopgave gemaakt. Hoofdstukken ingedeeld. Uitgewerkt hoofdstuk 2 Stagebedrijf Uitgewerkt hoofdstuk 3 Afstudeeropdracht Uitgewerkt hoofdstuk 4 Plan van aanpak. Uitgewerkt Hoofdstuk 5 en 6 Hoofdstuk 6 afgemaakt Begin maken met Fase 3 Hoofdstuk 6 aangepast Verder uitwerken Fase 3 Verder uitwerken Fase 3 Verder uitwerken Fase 3 Fase Ontwerp toegevoegd aan het document. Opzetje gemaakt voor Fase 5 Stagebedrijf aangepast. Evaluatie Aanpassingen afstudeeropdracht. Inleiding, Voorwoord geschreven. Woordenlijst uitgebreid. Titelblad en kaft gemaakt. Lay-out voor het verslag gemaakt. Laatste spelling en grammatica controle.
Pagina 3 van de 52
Voorwoord Graag zou ik een aantal mensen willen bedanken. -
Sander van den Broek, voor de begeleiding tijdens mijn stage en de kans die hij mij heeft geboden voor het uitvoeren van deze opdracht.
-
Mijn collega’s bij Buildnet, voor de leuke werksfeer.
-
Wally de Munk voor de begeleiding tijdens mijn studie informatica.
-
Bert Pinkster voor de begeleiding van de afstudeerstage.
“First, solve the problem. Then, write the code.” (John Johnson)
Pagina 4 van de 52
Inhoudsopgave Versiebeheer..................................................................................................................................................3 Voorwoord....................................................................................................................................................4 Inhoudsopgave .............................................................................................................................................5 1.
Inleiding.................................................................................................................................................7
Deel I Het stagebedrijf en de afstudeeropdracht........................................................8 2.
3.
4.
Stagebedrijf............................................................................................................................................9 2.1.
Buildnet Webservices BV ...........................................................................................................9
2.2.
Diensten ........................................................................................................................................9
2.3.
Plaats van de afstudeerder binnen Buildnet...........................................................................11
2.4.
Bedrijfsbegeleider.......................................................................................................................11
Afstudeeropdracht .............................................................................................................................12 3.1.
Aanleiding voor de opdracht....................................................................................................12
3.2.
Probleemstellingen ....................................................................................................................12
3.3.
Doelstellingen.............................................................................................................................12
3.4.
Opdrachtformulering ................................................................................................................13
3.5.
Op te leveren producten...........................................................................................................13
Plan van aanpak..................................................................................................................................14 4.1.
Methodes en technieken ...........................................................................................................14
4.2.
Planning.......................................................................................................................................17
Deel II Uitvoering van de afstudeeropdracht.............................................................21 5.
Fase 1 – Onderzoek...........................................................................................................................22 5.1.
6.
7.
Analyse ........................................................................................................................................22
Fase 2 Functioneel en Technisch ontwerp.....................................................................................24 6.1.
Functioneel ontwerp .................................................................................................................24
6.2.
Technisch ontwerp ....................................................................................................................26
Fase 3 Ontwerpen..............................................................................................................................28 7.1.
De huisstijl ..................................................................................................................................28
7.2.
Template .....................................................................................................................................28 Pagina 5 van de 52
7.3. 8.
Aanpassingen in het ontwerp...................................................................................................30
Fase 4 Bouwen klantensite................................................................................................................33 8.1.
Login / templates ......................................................................................................................33
8.2.
Gegevens / logins......................................................................................................................35
8.3.
Klanten / bureaus......................................................................................................................36
8.4.
Projecten .....................................................................................................................................38
8.5.
Domeinen ...................................................................................................................................38
8.6.
Support........................................................................................................................................40
9.
Fase 5 Testen ......................................................................................................................................43 9.1.
Functionaliteit.............................................................................................................................43
9.2.
Code.............................................................................................................................................43
9.3.
Ontwerp ......................................................................................................................................43
10.
Overige werkzaamheden...............................................................................................................44
Deel III Evaluatie van de afstudeeropdracht......................................................45 11.
Evaluatie..........................................................................................................................................46
11.1.
Beantwoording doelstellingen..............................................................................................46
11.2.
Evaluatie opgeleverde producten........................................................................................47
11.3.
Te behalen competenties......................................................................................................47
11.4.
Wat zou ik de volgende keer anders/beter doen ..............................................................49
12.
Verklarende woordenlijst..............................................................................................................50
13.
Literatuurlijst...................................................................................................................................52
Pagina 6 van de 52
1. Inleiding Voor u ligt het afstudeerverslag van mijn afstudeerstage bij Buildnet Webservices van oktober 2011 tot maart 2012. Bij Buildnet heb ik gewerkt aan het opzetten van een klantensite.
1.1.
Indeling
Het verslag is opgedeeld in drie delen, in het eerste deel zal er gekeken worden naar het afstudeerbedrijf, wat voor diensten worden er geleverd en zal de stagiair zich plaatsen het bedrijf. Daarnaast zal de opgestelde afstudeeropdracht worden besproken, welke probleem- en doelstellingen zijn er opgesteld. Het tweede gedeelte van het verslag zal worden opgedeeld in verschillende fases, deze fases zullen de stappen zijn die ik heb doorlopen voor het uitvoeren van mijn opdracht. In fase één, zal het onderzoek worden besproken, welke is uitgevoerd voordat er is begonnen met het opzetten van de klantensite. In fase twee wordt er uitgelegd hoe het functioneel- en technisch ontwerp zijn opgezet, welke onderwerpen er in voor komen en hoe deze documenten hebben meegeholpen bij het opzetten van de klantensite. Fase drie zal gaan over het ontwerpen van de klantensite, hierin zal worden gekeken naar de beslissingen die zijn gemaakt voor het opzetten van een zo goed en duidelijk mogelijk ontwerp. Het daadwerkelijke bouwen van de klantensite zal stap voor stap worden uitgelegd in fase 4 van dit verslag. Er zal worden gekeken naar de verschillende functionaliteiten die in de klantensite zijn gebouwd. In de laatste fase zal er worden besproken waar de klantensite allemaal op getest is. In deze fase is er vooral gekeken naar de functionaliteiten en beveiliging van de klantensite. In het laatste deel van dit verslag, zal de evaluatie naar voren komen. Hier is besproken hoe het project is verlopen, zijn de doelstellingen behaald, het uiteindelijk resultaat van de producten en wat zou je de volgende keer anders doen.
Pagina 7 van de 52
Deel I Het stagebedrijf en de afstudeeropdracht
Pagina 8 van de 52
2. Stagebedrijf In dit hoofdstuk zal er nader worden gekeken naar het stagebedrijf Buildnet Webservices, waar ik gedurende mijn stageperiode heb gewerkt. Er zal worden besproken op wat voor manieren Buildnet probeert hun klanten de best mogelijke dienstverlening te bieden. De diensten zullen bestaan uit het werven van klanten tot het onderhouden van websites. Ook zal er gekeken worden naar mijn plaats binnen Buildnet.
2.1. Buildnet Webservices BV Buildnet Webservices BV is opgericht in januari van 2004 door Sander van den Broek. Buildnet is in de afgelopen 8 jaar uitgegroeid van eenmansbedrijf naar volledig webbureau dat klanten heeft in heel Nederland. Buildnet nu gevestigd in het centrum van Haarlem, bestaat uit een club van jonge enthousiaste programmeurs die proberen zoveel mogelijk op kwaliteit gerichte websites te ontwikkelen. Het afgelopen jaar is het Buildnet zelfs gelukt om meer dan 100 websites in een jaar op te leveren. Om ervoor te zorgen dat dit aantal elk jaar gehaald kan worden, maakt Buildnet gebruik van verschillende diensten en tools om hun klanten de beste kwaliteit en service te bieden. De verschillende diensten die Buildnet levert aan hun klanten zullen verderop in de dit hoofdstuk worden beschreven. Bij Buildnet werken op dit moment zeven medewerkers. Hiervan zijn er vijf bezig zijn met de ontwikkeling van websites.
2.1.1.
Inkopers-Café.nl
Buildnet heeft naast het bijhouden van de eigen klanten ook nog de website Inkopers-Café.nl lopen. Deze website is tevens opgezet door Sander en geeft inkopers in Nederland de mogelijkheid om door middel van een platform met elkaar kennis uit te wisselen. Deze site wordt in Nederland gezien als één van de grootste inkoop communities op het web. Er is op deze site informatie te vinden over inkoopvacatures, columns, artikelen en nieuwsberichten.
2.2. Diensten In deze paragraaf zullen de verschillende diensten worden besproken.
2.2.1.
Bouwen
Wanneer er eenmaal met de klant een akkoord is bereikt over het ontwerp, zal er worden begonnen met het opzetten van de website. Om ervoor te zorgen dat klanten na de oplevering van hun website zelf gemakkelijk met de website aan slag kunnen gaan, worden bijna alle websites opgeleverd met een bijpassend CMS (Content Management Systeem). Een van de belangrijkste CMS'en waar Buildnet gebruik van maakt is het Open Source CMSMS. Dit systeem dat vooral gericht is op klantvriendelijkheid maakt gebruik van het Smarty Framework. Omdat er nogal wat functionaliteiten worden bedacht tijdens het ontwerpen, die niet in het CMS zitten, worden er door de developers zelf modules ontwikkeld. Deze modules kunnen dan later
Pagina 9 van de 52
weer gebruikt worden voor andere projecten. Door gebruik te maken van al bestaande modules kan een uitgebreide website toch snel in elkaar worden gezet.
2.2.2.
Hosting
Na het ontwikkelen van een website is het natuurlijk niet de bedoeling dat je de website aan de klant geeft en afscheid neemt. Daarom biedt Buildnet hun klanten ook aan om de website door Buildnet te laten hosten. Hierdoor zal de website gebouwd worden voor een plek op de server die alle functionaliteiten ten volle kan benutten. Zodat er geen problemen ontstaan tussen verschillende hardware- en server versies. Om ervoor te zorgen dat iedere klant een mooi aanbod gedaan kan worden, zijn er een aantal verschillende hostingpakketten samengesteld. Deze verschillen van het hosten van een kleine website, tot een plek op het web met verschillende subdomeinen en grote webwinkels. Door het zelf hosten van de websites kan Buildnet ook sneller ingrijpen wanneer er problemen ontstaan bij de hosting van een website.
2.2.3.
Support
Naast het hosten en bouwen van websites zorgt Buildnet ook voor de support na de oplevering van een project. Klanten kunnen heb opmerkingen of problemen met een ticket insturen, waarna iemand van Buildnet het ticket zal afhandelen.
2.2.4.
Zoekmachine optimalisatie
Om beter en sneller gevonden te worden op het web en dan vooral in de zoekmachines, biedt Buildnet haar klanten ook SEO (Search Engine Optimization) aan. Voor alle websites die worden opgeleverd worden al een aantal standaard SEO punten uitgevoerd. Waaronder het aanmelden bij de bekendste zoekmachine, Google. Voor een wat uitgebreidere SEO kan Buildnet een aantal verschillende onderdelen van SEO uitvoeren, zoals het zorgen voor backlinks naar de website.
2.2.5.
Nieuwsbriefmodule
Om ervoor te zorgen dat klanten up to date blijven over de ontwikkeling van een website of bedrijf, is het mogelijk om een nieuwsbrief te verzenden. Het probleem met verzenden van een nieuwsbrief is wel dat het lang duurt voordat je er eenmaal één de deur uit hebt. Om dit probleem te verhelpen heeft Buildnet een nieuwsbriefmodule ontwikkeld. Door middel van deze module kunnen klanten zelfstandig een nieuwsbrief opzetten en versturen, een adressenbestand beheren of de resultaten van een nieuwsbrief bekijken en dat allemaal in een aantal simpele stappen.
Pagina 10 van de 52
2.3. Plaats van de afstudeerder binnen Buildnet De stagiair zal zich bij Buildnet bezig gaan houden met het opzetten van een klantensite. Voor het juist uitvoeren van deze opdracht zal hij geplaatst worden tussen een team van webdevelopers. Zodat gemakkelijk vragen kunnen worden gesteld wanneer er zich problemen voordoen.
2.4. Bedrijfsbegeleider Tijdens mijn afstudeerstage ben ik binnen Buildnet begeleid door Sander van den Broek, oprichter van Buildnet Webservices. Sander houdt zich vooral bezig met het werven van nieuwe klanten en het onderhouden van contacten.
Pagina 11 van de 52
3. Afstudeeropdracht In dit hoofdstuk zal er dieper worden ingegaan op de afstudeeropdracht die ik samen met Sander heb opgesteld. Daarnaast zullen de verschillende problemen en doelstellingen worden besproken.
3.1. Aanleiding voor de opdracht Sinds Buildnet begonnen is met het bouwen van websites heeft het zich vooral gericht op het technische aspect van de websites. Omdat je met de techniek alleen, geen website kan bouwen, worden voor het ontwerpen verschillende ontwerpbureaus ingehuurd. Anderzijds zullen de ontwerpbureaus een beroep doen op Buildnet wanneer zij een website moeten bouwen. In de afgelopen jaren zijn er verschillende relaties ontstaan tussen Buildnet en een aantal ontwerpbureaus. Door het gebruik van een externe partij, zal er voor de communicatie met een klant ook een extra stap ontstaan. De klant zal nu voor zijn technische vragen direct naar Buildnet gaan, waardoor er een grotere druk komt te staan op de support afdeling. De domeinregistratie gaat momenteel nog via het invoeren van gegevens in een Excel bestand. Wanneer deze gegevens zijn ingevoerd dient er ook nog te worden gefactureerd. Hiervoor moeten gegevens worden ingevuld in het boekhoudpakket. Deze twee stappen kosten op dit moment te veel tijd en geld. Er zal daarom iets moeten komen dat dit proces kan versnellen.
3.2. Probleemstellingen 1. Het aantal e-mail berichten over de support tickets, tussen de klanten en Buildnet kan behoorlijk snel oplopen. 2. De domeinregistratie wordt nog met de hand bijgehouden in een Excel bestand. 3. Gegevens worden nog handmatig in het boekhoudpakket ingevoerd. 4. De klanten van de ontwerpbureaus komen al voor elke kleine aanpassing meteen naar Buildnet toe. 5. Klanten hebben geen centraal punt voor het opvragen van informatie.
3.3. Doelstellingen 1. Het effectief opvragen van informatie over klanten, bureaus, domeinen, projecten en support tickets. 2. De klanten het gevoel geven dat zij zich in een omgeving van het bureau bevinden i.p.v. bij Buildnet. 3. Ervoor zorgen dat alle domeingegevens kunnen worden uitgelezen in de klantensite. 4. Ervoor zorgen dat alle ingestuurde tickets in de klantensite kunnen worden uitgelezen. 5. Domeinen moeten kunnen worden verlengd voor één jaar. 6. Verlengde domeinen moeten worden opgeslagen in een Excel bestand. 7. Klanten en bureaus zullen beide hun eigen login krijgen op de klantensite. 8. Het systeem moet mee kunnen met de huidige standaarden die vermeld zijn in het technisch ontwerp. Pagina 12 van de 52
3.4. Opdrachtformulering Er zal een klantensite moeten worden opgezet waar gebruikers de mogelijkheid hebben om informatie op te vragen over: domeinen, support tickets, login gegevens en klanten. Op de klantensite zal er door verschillende gebruikers moeten kunnen worden ingelogd. Namelijk klanten, ontwerpbureaus en beheerders. Deze types zullen allemaal hun eigen functionaliteiten krijgen op de klantensite. De ontwerpbureaus zullen allemaal hun eigen stijl mee krijgen wanneer zij op een pagina komen. De verschillende klanten van de ontwerpbureaus zullen dezelfde stijl te zien krijgen als het ontwerpbureau waar zij klant van zijn. Voor het domein- en support gedeelte van de website zal er een koppeling moeten worden gemaakt met de bestaande systemen om zo alle informatie in te laden. De frontend van het klantensite zal gebouwd moeten worden in HTML, CSS en het Smarty Framework. De backend en de database connecties zullen gemaakt moeten worden d.m.v. PHP en MySQL.
3.5. Op te leveren producten Aan het eind van de stageperiode dienen er een aantal producten te worden opgeleverd. Met deze producten kan ik aantonen wat er allemaal gedaan is tijdens de stageperiode. Deze producten zullen als externe documenten samen met het stageverslag worden ingeleverd.
3.5.1.
Functioneel ontwerp
Het functioneel ontwerp van de klantensite. In dit functioneel ontwerp zullen alle functionaliteiten van de klantensite genoteerd worden.
3.5.2.
Technisch ontwerp
In het technisch ontwerp zullen de verschillende technische aspecten van de klantensite genoteerd worden.
3.5.3.
Klantensite
De uiteindelijke klantensite, zoals hij zal worden gepresenteerd na de honderd stagedagen.
Pagina 13 van de 52
4. Plan van aanpak 4.1. Methodes en technieken 4.1.1.
WBS
De methode die gebruikt is voor de planning van dit project is de WBS (Word Breakdown Structure) methode. Bij deze methode wordt er van het project een hiërarchische structuur gemaakt met daarin alle verschillende deelproducten.
4.1.2.
Smarty Framework
Om ervoor te zorgen dat er na de oplevering van de website gemakkelijk aanpassingen kunnen worden gedaan door ontwerpers, wordt er bij Buildnet gebruik gemaakt van het Smarty Framework. Dit Framework zorgt ervoor dat de HTML en PHP/MySQL netjes van elkaar worden gescheiden, waardoor een ontwerper alleen maar HTML te zien krijgt wanneer hij of zij aanpassingen wil maken aan een website en hierdoor geen code stuk kan maken en de PHP scripts. Hierdoor niet worden gevuld met stukken HTML code. Op deze wijze staat de hele vormgeving los van alles functionaliteiten. Voor het gebruik van Smarty zullen er een aantal bestanden moeten worden gedownload die ervoor zullen zorgen dat je gebruik kan maken van de verschillende methodes. In het onderstaand voorbeeld wordt door middel van de methode assign een waarde meegeven aan de Smarty variable in dit geval paginaTitel. Deze waarde kan dan worden opgeroepen in een template bestand. Hierdoor kun je ervoor zorgen dat er geen logica in de template bestanden komt te staan, waardoor ontwerpers die geen verstand hebben van PHP toch de website kunnen aanpassen.
Figuur 1. Smarty assign functie.
Figuur 2. Voorbeeld Smarty template.
Pagina 14 van de 52
4.1.2.1. Template inheritance Een ander groot voordeel wat Smarty met zich mee brengt is Template inheritance. Dit houdt in dat template, ook wel de child template, de eigenschappen van een andere template kunnen overnemen, ook wel de parent template genaamd, waardoor je geen dubbele code krijgt in je bestanden. Smarty maakt hiervoor gebruik van een eigen functie, hierdoor zul je in de template bestanden ook geen includes meer hoeven toe te voegen. Hieronder wordt een voorbeeld van Template inheritance weergeven. Door het gebruik van extends kan er worden aangegeven van welke file de eigenschappen worden overgenomen. In de block name functies kunnen waardes worden doorgeven naar de parent template.
Figuur 3. Voorbeeld van een child template.
In het onderstaande voorbeeld van een parent template zullen de waardes die zijn meegeven in het child template worden ingeladen tussen de {block} {/block} velden.
Figuur 4. Het gebruik van blocks in een parent template.
Door het gebruik van Smarty voor de klantensite is het heel gemakkelijk om nieuwe templates aan te maken voor de verschillende bureaus. Er hoeven nu alleen maar objecten verplaatst te worden en de style sheets worden aangepast. Het gebruik van Smarty ben ik gaande dit project steeds meer gaan waarderen, vooral omdat het ook voor mijzelf een duidelijk beeld geeft van de
Pagina 15 van de 52
applicatie. Voor volgende projecten zal ik er zeker over nadenken om dit Framework opnieuw te gaan gebruiken.
4.1.3.
HTML / CSS
De lay-out van de klantensite zal door middel van HTML en CSS worden opgemaakt. Om ervoor te zorgen dat de klantensite met de tijd meegaat, zal er tijdens het programmeren van de HTML en CSS ook rekening gehouden worden met de nieuwe standaarden van HTML 5 en CSS 3. Het nadeel hiervan is, dat het nog niet door alle browsers wordt ondersteund.
4.1.4.
PHP
Voor de technische aspecten van de website zal er gebruik worden gemaakt van PHP 5. Er is voor deze taal gekozen omdat er bij Buildnet alleen maar websites worden gemaakt door middel van PHP. Hierdoor zouden mijn collega’s later ook met het systeem kunnen werken. PHP is een script taal die aan de kant van de server werkt. Een belangrijk onderdeel van PHP is het OOP. Dit houdt in dat PHP code wordt onderverdeeld in verschillende objecten met hun eigen methodes. Elk object zorgt voor een bepaald onderdeel van de site. In het geval van de klantensite zijn dit bijvoorbeeld: gebruiker, klant, bureau, product, project en domein. Door het gebruik van OOP wordt het voor ontwikkelaars stukken makkelijker om bepaalde delen code op te zoeken, te wijzigen en her te gebruiken.
4.1.5.
MySQL
Voor de klantensite is de database gebouwd in MySQL Er is voor MySQL gekozen om dat dit de standaard is bij Buildnet.
4.1.6.
JavaScript
JavaScript is een clientside language. JavaScript wordt uitgevoerd zonder dat er verzoeken naar de server worden gestuurd.
4.1.7.
UML
Voor het opzetten van een duidelijk database structuur kan je UML gebruiken. In een UML diagram kan gezien worden hoe verschillende database tabellen met elkaar communiceren.
4.1.8.
Navicat MySQL
Navicat is een software tool waarmee je de mogelijkheid hebt om een MySQL database te beheren. Binnen deze tool zijn er een aantal handige mogelijkheden om snel grote hoeveelheden data te importeren naar je database.
4.1.9.
Notepad ++ / Zend Studio - 8.0.0
Voor het schrijven van de code van de klantensite heb ik gebruik gemaakt van twee software programma’s. Omdat ik al vaker gewerkt had met notepad ++, heb ik besloten ook hierin de klantensite te gaan bouwen. Een minpunt van het gebruik van notepad ++ is dat je geen waarschuwing krijgt wanneer je fouten heb zitten in je code. Wanneer ik zulke dingen tegenkwam en niet kon vinden waar het fout ging, heb ik Zend Studio gebruikt om snel de fouten te vinden en te verbeteren. De laatste weken van het project heb ik besloten om alleen nog maar gebruik te gaan maken van Zend Studio om zo effectiever te werk te gaan.
Pagina 16 van de 52
4.2. Planning Aan het begin van de stageperiode heb ik samen met mijn bedrijfsbegeleider een planning opgesteld voor de komende twintig weken. De twintig weken zijn opgedeeld in fases van vier tot vijf weken. In deze fases zal elke keer één belangrijk onderdeel worden behandeld. Door zo te werk te gaan, zullen onderdelen eerst helemaal moeten worden afgerond voordat er verder kan worden gegaan. Naast de planning voor het bouwen van de klantensite moest ook nog rekening gehouden worden met het schrijven van het afstudeerverslag.
4.2.1.
Kort beschrijving van elke fase.
In deze paragraaf zal elke fase kort worden beschreven. 4.2.1.1. Fase 1. Onderzoek In deze fase zal er onderzoek worden uitgevoerd, om een beter idee te krijgen van de verschillende methodes en technieken die gebruikt gaan worden. Hieronder vallen het Smarty Framework en OOP. 4.2.1.2. Fase 2. Het functioneel- en technisch ontwerp In deze fase zal worden besproken hoe het functioneel- en technisch ontwerp zijn opgezet. 4.2.1.3. Fase 3. Ontwerpen In fase drie van het project is er begonnen met het ontwerpen van de klantensite. Hierbij gekeken naar de verschillende huisstijlen die gebruikt gaan worden voor de ontwerpbureaus. 4.2.1.4. Fase 4. Bouwen klantensite Fase vier is de fase waar het grootste van het werk is uitgevoerd. In deze fase zijn alle functionaliteiten van de website gebouwd. Van het inloggen tot het verlengen van domeinen. 4.2.1.5. Fase 5. Testen In de laatste fase van het project ben ik de klantensite gaan testen. Bij dit testen is er gekeken naar de beveiliging, functionaliteit en weergave van de website.
Pagina 17 van de 52
4.2.2.
Planningsmethode
De planning van dit project heb ik gemaakt doormiddel van de WBS methode. Hierbij heb ik gekeken naar de verschillende producten die worden opgeleverd en de stappen die moeten worden uitgevoerd. Hieronder is de WBS van het project te zien.
Figuur 5. WBS van het project.
Pagina 18 van de 52
4.2.3.
Gemaakte planning
De verschillende fases zijn in de onderstaande planning verwerkt. Bij elke fase is aangegeven wat de geplande activiteiten zijn, die uitgevoerd dienen te worden. Fase 1
2
3
Activiteiten: ‐ Kennis maken met het Smarty Framework. ‐ Kennis opdoen over PHP en OOP. ‐ Het opzetten van het functioneel- en technisch ontwerp. ‐ Het opzetten van de database structuur. ‐ Verslag: Maken van de inhoudsopgave + bedenken van de verschillende hoofdstukken. ‐ Opleveren van het functioneel ontwerp. ‐ Opleveren van het technisch ontwerp. ‐ Ontwerp maken verschillende pagina’s binnen de klantensite. ‐ Ontwerp doorvoeren naar HTML/CSS.
Opmerkingen:
Functioneel- en technisch ontwerp doorgenomen met Sander. verbeterpunten doorgevoerd.
Dit is alleen gedaan voor Buildnet. Omdat het ontwerp kan verschillen voor de diverse bureaus. Stijl map aangemaakt per bureau. En een map met de templates.
4
‐ ‐
‐
4
‐ ‐
4
‐ ‐
4
‐ ‐
4
‐ ‐
4
‐
Begin maken met de inlog functies. Ervoor gaan zorgen dat er verschillende templates geladen worden wanneer er een ander type gebruiker inlogt. Gegevens bekijken en wijzigen per klant. Een overzicht krijgen van alle klanten en bureaus binnen de klantensite. Het maken van de logins pagina voor de klanten.
Inlog functie is gebouwd. Er wordt gecontroleerd of de gebruiker bestaat, of de status actief is en of het wachtwoord correct is. Wanneer een klant of bureau inlogt, zal er gekeken worden in de database naar het thema van het bureau. Waarna het juiste pad wordt gezocht naar de map van het bureau. Alle type gebruikers hebben de mogelijkheid hun gegevens te wijzigen. De beheerder heeft tevens de mogelijkheid gegevens van andere gebruikers te wijzigen. Had twee weken voor ingepland, kon al binnen 1 week worden afgerond.
Begin maken aan de functie om domeinen te tonen op de klantensite.
Begin gemaakt met het domein gedeelte van de site. Kon deze week ook al alle gegevens inladen doormiddel van Excel en Navicat.
Een manier vinden om de domeingegevens te uploaden naar de database.
Domeinen kunnen nu worden verlengd, oude domeinen gaan op niet actief. En er wordt een Excel aangemaakt.
Zorgen dat domeinen kunnen worden verlengd + het aanmaken van een Excel file voor het boekhoudpakket. Begin maken met het support gedeelte
Onderzoek gedaan naar gebruik van de Kayako Staff en REST API
Pagina 19 van de 52
4
‐ ‐
4
‐
4
‐ ‐
5
‐ ‐
-
‐ ‐ ‐ ‐ ‐
-
Functie schrijven voor het tonen van de support verzoeken. Inleveren van het concept voor het stageverslag(70%). Bezoek van stagebegeleider over voortang van de stage. Het stage verslag dient hier voor 70% af te zijn. Afronden van het support gedeelte Aanvragen afstudeerzitting. (22 februari). Testen van de klantensite. Verwerken test resultaten.
Concept stage verslag ingeleverd.
Concept stage verslag goedgekeurd. Afstudeerzitting aangevraagd. Het toewijzen van tickets gemaakt. Het opzetten van het sturen van een mail naar de klant.
Werken aan het stageverslag Werken aan het stageverslag Opleveren van het stageverslag. Opleveren van de klantensite.
De planning zoals hij aan begin van stage was opgesteld, is gedurende het project op een aantal punten gewijzigd. Zo ging de planning voor het maken van het loginsysteem en het bekijken van klanten en bureaus sneller dan verwacht, waardoor ik eerder kon beginnen met het maken van het domein gedeelte. Het support gedeelte was dan weer een deel wat langer duurde dan verwacht, hier heb ik dan ook de extra tijd die had bespaard goed kunnen gebruiken. Al met al is de planning redelijk naar wens verlopen met hier en daar een kleine wijziging.
Pagina 20 van de 52
Deel II Uitvoering van de afstudeeropdracht
Pagina 21 van de 52
5. Fase 1 – Onderzoek In dit hoofdstuk zal ik nader ingaan op het onderzoek wat ik heb uitgevoerd voordat ik ben begonnen met het opzetten van de klantensite.
5.1. Analyse Voordat ik ben begonnen met het bouwen van de klantensite, heb ik tijdens de eerste twee weken van het project onderzoek gedaan naar de methodes en technieken die komen kijken bij het bouwen van een goed werkende website. Omdat alle websites die gemaakt worden bij Buildnet zijn opgezet in PHP, MySQL en het Smarty Framework en ik daar bijna geen verstand van had, heb ik eerst een aantal tutorials gevolgd over die methodes. Mijn collega’s, die dagelijks gebruik maken van het Smarty Framework en PHP, konden mij wat uitleg geven over de veel gebruikte functies binnen deze methodes.
5.1.1.
Smarty
Doordat ik al vroeg ben begonnen met leren van de basis van PHP en MySQL kon ik al snel gebruik maken van Smarty. Na wat testjes gedraaid te hebben met wat simpele scripts ben ik erachter gekomen dat Smarty een duidelijk Framework is voor het splitsen van front en backend. Een van de punten waar ik wel meteen tegenaan liep is dat het soms lastig tot bijna onmogelijk is om alle PHP code uit de templates te plaatsen. Vooral wanneer er PHP code in doorlinks komt te staan, waardoor je dus de link ook uit het template bestand moet halen. Een ander punt is dat het aantal templates behoorlijk snel kan toenemen voor het invoeren van een nieuwe pagina, die bijvoorbeeld gebruikt kan worden door verschillende gebruikers. Al deze gebruikers krijgen namelijk niet precies dezelfde pagina te zien, wat resulteert in 3 verschillende templates. Een oplossing dat ik hiervoor heb verzonnen is alle vaak voorkomende stukjes code in aparte templates te plaatsen. Hiervoor hoeven bij een aanpassing niet alle templates gewijzigd te worden maar alleen de template met dat stukje code.
5.1.2.
OOP
Een van de voorwaarden waar de nieuwe applicatie aan moest voldoen was dat de PHP code opgezet werd voor OOP (Object-Oriented Programming). Omdat ik als een wat minder ervaren programmeur nog bijna geen ervaring heb gehad met OOP, moest ik ervoor zorgen hier wat informatie over op te doen. Twee van de belangrijkste middelen die mij hierbij hebben geholpen zijn de website Lynda.com en het boek PHP en MySQL. Deze twee lieten duidelijk stap voor stap zien hoe classes en methodes worden opgebouwd en kunnen worden gebruik in de gehele applicatie. Door gebruik te gaan maken van deze classes en methodes kreeg mijn code al meteen wat meer structuur. OOP is niet iets wat je meteen onder de knie krijgt na het bouwen van een website, dus ik zal er zeker voor gaan zorgen deze techniek vaker te gaan gebruiken bij toekomstige projecten. Na het uitvoeren van mijn vooronderzoek ben ik in gesprek gegaan met Sander om de stageopdracht in detail te bespreken. In dit gesprek zijn de deelonderwerpen voor de klantensite dieper uitgelegd, zodat ik een beter idee kreeg van hoe de klantensite er uit moest komen te zien.
Pagina 22 van de 52
Aan het eind van het gesprek is besloten dat ik eerst een functioneel- en technisch ontwerp ga opzetten, om een nog beter idee te krijgen van wat er moet gebeuren.
Pagina 23 van de 52
6. Fase 2 Functioneel en Technisch ontwerp In de tweede fase van het project heb ik een begin gemaakt met het opzetten van een functioneel- en technisch ontwerp. Voordat ik aan mijn stageperiode begon had ik nog nooit één van deze documenten zelf gemaakt. Daarom ben ik eerst gaan uitzoeken wat er allemaal in deze documenten moeten komen te staan. Eerst heb ik op het internet wat informatie opgezocht over de opzet en indeling van deze documenten. Omdat ik niet genoeg had aan de informatie die op het internet te vinden is over functionele en technische ontwerpen, heb ik nog een functioneel ontwerp doorgekeken wat bij Buildnet is gemaakt. Dit functioneel ontwerp ging wel over een heel ander project, maar gaf me wel een duidelijk beeld van hoe het eruit moet komen te zien. Hierna ben ik begonnen met het opzetten van de documenten.
6.1. Functioneel ontwerp In deze paragraaf zal ik uitleggen wat voor onderdelen er allemaal in het functioneel ontwerp zijn verwerkt.
6.1.1.
Doel van de klantensite
Het eerste onderdeel van het functioneel ontwerp was het opstellen van het doel voor de klantensite. Om tot dit doel te komen ben ik gaan kijken naar de opdracht die is opgesteld aan het begin van de afstudeerstage en ben van daaruit mijn doelstellingen gaan formuleren.
6.1.2.
De verschillende doelgroepen
De klantensite gaat zo worden opgezet dat er verschillende type gebruikers moeten kunnen inloggen. Deze gebruikers krijgen allemaal hun eigen eigenschappen en functionaliteiten binnen de klantensite. Om hierover een juist beeld te krijgen ben ik de verschillende doelgroepen gaan formuleren. Omdat er in de afstudeeropdracht is besloten de site toegankelijk te maken voor klanten, ontwerpbureaus en beheerders, ben ik deze drie doelgroepen verder gaan uitwerken. Voor elke doelgroep heb ik de vragen: wie, wat en waarom gesteld. Om er zo achter te komen waarom deze gebruikers gebruik willen maken van de klantensite. De drie verschillende doelgroepen zullen in onderstaande alinea’s wat dieper worden uitgelegd. 6.1.2.1. Beheerders Om ervoor te zorgen dat de klantensite beheerbaar blijft is de doelgroep beheerders opgezet. De beheerders zijn de gebruikers die totale controle hebben over de klantensite. Zij mogen klanten verwijderen, project toevoegen, ticket toewijzen en nog veel meer. Omdat de beheerder alles kan wijzigen zal deze doelgroep alleen beschikbaar worden voor de medewerkers van Buildnet. 6.1.2.2. Bureaus De ontwerpbureaus zullen als tweede doelgroep gebruik gaan maken van de klantensite. Het idee achter deze doelgroep is dat zij de site zullen gaan gebruiken voor het monitoren van hun eigen klanten. Klanten die hun website bij een ontwerp bureau laten bouwen, zullen tevens in de klantensite staan als Buildnet de technische kant van de website heeft verzorgd en later ook de hosting zal verzorgen. Door middel van de klantensite kunnen de bureaus gegevens opvragen over bijvoorbeeld de verschillende domeinen die actief zijn bij een klant, of een overzicht van de ingestuurde support tickets. Pagina 24 van de 52
Een speciale eigenschap die elk bureau mee krijgt wanneer ze worden aangemaakt op de klantensite is dat er een thema template wordt aangemaakt. Deze template zal ervoor zorgen dat de lay-out van de klantensite veel lijkt op de lay-out van de website van het bureau zelf. Deze layout zal ook worden getoond aan de klanten van de ontwerpbureaus. 6.1.2.3. Klanten De laatste doelgroep die gebruik zal gaan maken van de klantensite zijn de klanten, deze gebruikers zullen de minste rechten hebben binnen de site. Dit heb ik gedaan omdat zij de site alleen mogen gebruiken voor het opvragen van informatie en niet voor het wijzigen of toevoegen. Het hoofddoel voor de klanten is dat zij snel en gemakkelijk een overzicht te zien kunnen krijgen van hun ingestuurde tickets, met daarbij de kosten voor elk ticket.
6.1.3.
Type gegevens vaststellen
Om ervoor te zorgen dat ik iets van een overzicht hield, over de rechten die gebruikers hebben binnen de site, heb ik een lijst gemaakt met alle functies die per gebruiker gebruikt mogen worden. Nadat ik de verschillende doelgroepen had geformuleerd, kon ik een begin gaan maken met het uitdenken van de verschillende gegevens die ik zou gaan opslaan in de database. Hiervoor ben ik eerst gaan kijken naar de verschillende objecten waar ik informatie over wilde gaan opslaan. Onder deze objecten bevinden zich, klanten, bureaus, domeinen, projecten, producten en extensies. Nadat ik alle objecten op een rij had staan ben ik de verschillende type gegevens gaan bedenken. Bij klanten bijvoorbeeld worden er bedrijfsnamen, contactpersonen, websites, plaatsen en debiteurnummers opgeslagen. Deze gegevens zullen allemaal via de klantensite kunnen worden ingevoerd.
6.1.4.
Opstellen van de functionaliteiten
Nu de verschillende doelgroepen en al hun specificaties bekend zijn ben ik begonnen met het opzetten van een sitemap voor de klantensite. In deze sitemap zullen alle mogelijke functies uit de klantensite worden genoteerd. Via de sitemap werd de structuur van de klantensite meteen een stuk duidelijker. De sitemap heeft ook gedurende het hele project gediend als een checklist om bij te houden welke onderdelen al in de site zitten en welke nog gebouwd moesten worden. In de daarna volgende paragrafen ben ik punt voor punt gaan uitleggen wat de gebruikers mogen verwachten bij de verschillende functies. Dit heb ik gedaan om een duidelijk beeld te krijgen over wat de gebruikers allemaal tegen zullen komen wanneer zij over de website navigeren.
6.1.5.
Importeren van gegevens
Het toch wel belangrijkste punt uit het functioneel ontwerp, dat Sander wilde zien was, hoe ik van plan was het invoeren van gegevens te gaan doen. Dit natuurlijk omdat er nogal wat gedaan moet gaan worden voordat alle domeinen en support tickets op de site verschijnen. Via Navicat, het software programma om database gegevens te wijzigen, is er een mogelijkheid om grote Excel files in te laten lezen. Omdat alle domein- en klantgegevens bij Buildnet in een Excel worden opgeslagen zou dit een prima manier zijn om deze gegevens in te lezen. In de andere paragraaf heb ik uitgelegd hoe ik van plan was om de koppeling te maken tussen het support systeem Kayako en de klantensite. Hiervoor heb ik de website en het forum van Kayako Pagina 25 van de 52
gebruikt om meer informatie te vinden. Een van de aangeboden methodes voor het overzetten/uitlezen van informatie is door gebruik te maken van de API’s die worden aangeboden door Kayako. Als laatst is het backuppen van gegevens besproken. Hier heb ik uitgelegd hoe ik van plan was ervoor te gaan zorgen dat alle data van de site op een tweede plek zal worden opgeslagen. Wanneer er problemen opduiken moet er ook terug kunnen worden gegaan naar een back-up.
6.2. Technisch ontwerp In deze paragraaf zal ik ingaan op de verschillende onderwerpen die in het technisch ontwerp aan bod komen.
6.2.1.
Databasetabellen
Voor het technisch ontwerp ben ik begonnen met het opzetten van de verschillende database modellen en stamtabellen. In deze modellen wordt voor elke database tabel aangeven welke gegevens er in komen te staan en welke waarden ze mee krijgen. Voor het koppelen van een gebruikersnaam aan een klant of bureau heb ik besloten een gebruiker twee velden mee te geven, een voor een klant ID en een voor bureau ID. Wanneer een van deze velden is ingevuld zal hij worden gelinkt aan een klant of bureau.
Figuur 6. De databasetabel voor het beheren van gebruikers.
6.2.2.
Stamtabellen
Ook heb ik de stamtabellen in het technisch ontwerp gezet. De stamtabellen bevatten data die al van te voren in het systeem zijn gezet. Deze data kan alleen via de database worden aangepast. Onder de stamtabellen vallen bijvoorbeeld, de verschillende producten, extensies en type gebruikers.
6.2.3.
Databasestructuur
Nadat de tabellen zijn gemaakt heb ik besloten een UML te maken om een duidelijk overzicht te krijgen van de database structuur. De UML heb ik gemaakt door gebruik te maken van de website www.dbschemaeditor.com. Op deze site kun je door middel van een paar simpele klikken gemakkelijk een UML in elkaar zetten. Via deze UML is duidelijk te zien hoe de verschillende tabellen een connectie met elkaar kunnen maken, en wat voor informatie er in de tabellen wordt opgeslagen. Pagina 26 van de 52
6.2.4.
Randvoorwaarden
Bij het opstellen van de randvoorwaarden voor de site, heb ik vooral gekeken naar de standaarden die Buildnet aanhoudt. De standaarden zullen aangeven waaraan de site moet voldoen voordat hij live kan worden gezet. Ik heb besloten de maximale load van de pagina’s zo klein mogelijk te houden, om er zo voor te zorgen dat de pagina’s snel in de browser geladen kunnen worden. Om ervoor te zorgen dat de load zo klein mogelijk wordt, heb ik besloten alle afbeeldingen op te slaan als ‘save for web’. Dit zorgt ervoor dat er een ideale verhouding wordt gezocht tussen een kleine file grootte en een maximale grafische kwaliteit. Daarnaast heb ik als randvoorwaarde opgesteld dat de klantensite beschikbaar moet zijn in een aantal verschillende browsers, waaronder Internet Explorer, Firefox, Google Chrome, Opera en Safari. De website zal in al deze browsers hetzelfde moeten functioneren en de lay-outs moeten overeen komen. Dit heb ik als voorwaarde gesteld omdat niet iedereen gebruik maakt van dezelfde web browser en het kan niet zo zijn dat de website bijvoorbeeld alleen in Firefox gebruikt kan worden.
6.2.5.
Gebruikersrechten
Het laatste hoofdstuk dat ik heb toegevoegd aan het technisch ontwerp is de lijst met functionaliteiten. Hierin zullen alle mogelijk functies binnen het systeem worden genoteerd met daarbij de verschillende doelgroepen die gebruik mogen gaan maken van die functies. Door middel van deze lijst kan ik duidelijk zien welke doelgroepen welke rechten hebben binnen de klantensite.
Pagina 27 van de 52
7. Fase 3 Ontwerpen Nu het voor mij duidelijk was geworden wat er allemaal precies gedaan moest worden, ben ik begonnen met het ontwerpen van de klantensite. In dit hoofdstuk zal ik uitleggen hoe ik tot het uiteindelijk ontwerp van de site ben gekomen.
7.1. De huisstijl Bij het ontwerpen van de klantensite heb ik geprobeerd mij zoveel mogelijk te houden aan de huisstijl die bij Buildnet wordt gehanteerd. Om zo de juiste ‘Look and feel’ van Buildnet mee te geven. Er zijn een aantal opvallende punten waaraan je snel de huisstijl van Buildnet kan herkennen. Er wordt gebruik gemaakt van een aantal standaard kleuren namelijk rood, bruin, beige en wit. Deze kleuren zijn op de homepage en achterliggende pagina’s duidelijk zichtbaar. Ook voor het logo is er gebruik gemaakt voor een combinatie van deze kleuren.
7.2. Template Bij het ontwerpen van de pagina’s heb ik besloten vooral eerst naar de lay-out te kijken van de Buildnet template. Hiervoor heb ik gekozen omdat ik anders teveel aanpassing zou moeten doorvoeren in alle verschillende ontwerpen. Ik heb daarom ook met Sander besloten om één template voorbeeld te maken van een bureau. Maar pas later de daadwerkelijke templates voor de bureaus te gaan maken. Voor elke bureau template zal er net zoals bij Buildnet goed gekeken worden naar de gebruikte huisstijlen en logo’s. In de onderstaande afbeelding is een voorbeeld te zien van een bureau template voor DM Creatieve Communicatie. Wanneer je deze template vergelijkt met de huidige website zijn er een hoop overeenkomsten te vinden. Voordat ik daadwerkelijk ben begonnen met het maken van een ontwerp in Photoshop, ben ik eerst de verschillende pagina’s gaan uitschetsen, om zo een idee te krijgen hoe ik alles eruit wil gaan laten zien. Bij het maken van deze schetsen heb ik ook gekeken naar de huidige website van Buildnet, voor de plaatsing van het logo en het menu. Ik heb besloten deze op dezelfde plaatsen neer te zetten om zo wat eenheid te creëren, niet alleen voor ons zelf maar ook voor de klant.
Pagina 28 van de 52
Nadat ik deze schetsen had gemaakt, ben ik begonnen met het verder uitwerken in Photoshop. In de onderstaande screenshots is te zien hoe dit ontwerp er uit is komen te zien.
Figuur 7. Ontwerp voor de DM en Buildnet template.
Het uiteindelijk resultaat voor de klantensite.
Figuur 8. Het uiteindelijke ontwerp.
7.2.1.
Iconen
Om ervoor te zorgen dat de gebruiker niet met alleen maar tekst op de website geconfronteerd wordt, heb ik ook gebruik gemaakt van een aantal iconen. Deze iconen die ik in Photoshop heb gemaakt proberen de gebruiker iets te vertellen over het object waar ze bij staan. Zo zal er een vraagteken staan bij de meeste invulvelden. Dit is gedaan om te gebruiker van wat extra informatie te voorzien
Pagina 29 van de 52
Op de pagina’s waar je een overzicht kan bekijken van een aantal objecten heb ik gebruik gemaakt van de vier onderstaande iconen. Zo wordt door middel van een groen rondje met vink aangegeven of een item actief is en zo niet dan zal het rode rondje met witte balk worden getoond. Voor deze twee kleuren heb ik gekozen omdat ze ook in het dagelijkse leven worden gebruikt voor doorgaan en stoppen.
Figuur 9. Iconen gebruikt in de klantensite
7.2.2.
Paginanummering
Voor de paginanummering heb ik gebruik gemaakt van blokjes met daarin het nummer. Er zijn daarnaast ook vier blokjes waarmee je de mogelijkheid hebt om één pagina verder of terug te gaan en om naar de eerste en laatste pagina te gaan. Ook in de paginanummering heb ik geprobeerd de bruine kleur terug te laten komen in de achtergrond. Knoppen die inactief zijn worden maar voor 60% van hun helderheid getoond. Hierdoor krijgen gebruikers al het idee dat deze knoppen niks kunnen doen.
Figuur 10. Ontwerp voor de paginanummering.
7.3. Aanpassingen in het ontwerp Gedurende het bouwen van de website zijn er een flink aantal wijzigen doorgevoerd in het ontwerp. Deze wijzigingen hebben er vooral voor gezorgd dat de informatie duidelijker en overzichtelijker getoond kan worden. In de onderstaande paragrafen zal ik de verschillende wijzigingen in het ontwerp doorlopen.
7.3.1.
De login pagina.
In het eerste ontwerp was de login pagina gebouwd in de stijl van Buildnet. Na wat overleg met Sander hebben we toch besloten de login pagina een neutrale uitstraling te geven, om zo de klanten niet meteen het idee te geven dat ze op een website van Buildnet zijn aanbeland.
Pagina 30 van de 52
Figuur 11. Verandering van de login pagina.
7.3.2.
Kleurgebruik
In het eerste ontwerp, had ik alle titelbalken als achtergrond de rode kleur van het logo gegeven. Na wat overleg met Sander is er toch besloten deze kleur te veranderen in een wat minder drukke kleur. Dus zijn alle rode balken veranderd in een donkerbruine kleur met klein verloop erin. Hierdoor wordt de balk minder druk en geeft hij het gevoel niet helemaal vlak te zijn.
Figuur 12. De nieuwe(bruine) en oude titelbalk.
Alle knoppen hebben nu ook de bruine achtergrond kleur gekregen, de rode kleur zal alleen nog te zien zijn wanneer je met de muis op de knop gaat staan. Het scheiden van gegevens door middel van een donkere en lichte balk is ook gewijzigd. Hiervoor in plaats heb ik een blok met titelbalk gemaakt, waar de gegevens in staan. Hierdoor krijgt het ontwerp een duidelijkere scheiding van de verschillende gegevens. De iconen boven aan zijn hierdoor in de titelbalk geplaatst, waardoor je kunt zien dat ze met de gegevens te maken hebben.
7.3.3.
Tekstgrootte
De tekst in het eerste ontwerp had de standaard grootte van elf pixels, ook hier is besloten een aanpassing door te voeren. Omdat er niet heel veel tekst op de website staat hebben we besloten de grootte aan te passen naar twaalf pixels. Hierdoor wordt de tekst iets opvallender en is hij beter te lezen.
Pagina 31 van de 52
7.3.4.
Contactblok
In het ontwerp zat ook een blok met wat informatie over het bureau waar de klant, bij is aangesloten. Na overleg is er toch besloten dit blok niet te tonen, omdat de klant door middel van het klikken op een bureaunaam al snel meer gegevens kan bekijken van het bureau.
Pagina 32 van de 52
8. Fase 4 Bouwen klantensite Nadat de documenten waren goedgekeurd door Sander en het ontwerp was gemaakt, is er een gesprek geweest over hoe de klantensite gebouwd zal gaan worden. We hebben besloten het project op te delen in een aantal stappen. Elke stap zal bestaan uit een aantal functies. Elke keer als ik een stap had gebouwd, ben ik met Sander gaan kijken of er dingen moesten worden aangepast of toegevoegd en zo niet of we verder konden gaan met de volgende stap.
8.1. Login / templates De eerste stap in het bouwen van de klantensite was het opzetten van een login systeem. Via dit login systeem moet er de mogelijkheid zijn voor verschillende gebruikers om in te loggen. De gebruiker dient hiervoor een gebruikersnaam en wachtwoord in te vullen.
8.1.1.
Flowchart inloggen
In de onderstaande flowchart heb ik zo duidelijk mogelijk proberen weer te geven de stappen die worden doorlopen tijdens het inloggen op de klantensite.
Figuur 11. Flowchart voor de login functie
Pagina 33 van de 52
8.1.2.
Beveiliging inputvelden
Om ervoor te zorgen dat dit alles veilig gebeurd zullen wachtwoorden worden uitgelezen door middel van sha1. Sha1 zorgt ervoor dat er een encryptie wordt gemaakt van een bepaald woord. Ik heb er niet voor gekozen om gebruik te maken van md5 omdat dit een mindere beveiliging biedt en omdat er nogal wat gegevens op de website staan. Voor het beveiligen van wachtwoorden zijn er een aantal verschillende functies die gebruikt kunnen worden. De meest bekende functies zijn: sha1 en md5. Voor het beveiligen van de wachtwoorden op de klantensite heb ik besloten gebruik te gaan maken van sha1. Ik heb hiervoor gekozen omdat md5 een verouderde functie is voor encryptie. En omdat er nogal wat gegevens op de site komen te staan is het verstandig alles goed te beveiligen. Daarnaast wordt er op elk invulveld de PHP functie mysql_real_escape_string uitgevoerd. Deze functie zorgt ervoor dat alle vreemde tekens die worden ingevoerd een backslash mee krijgen. Dit heb ik gedaan zodat er geen mogelijkheid is voor hackers om aan SQL injectie te doen. Bij SQL injectie probeert iemand door middel van een invulveld een database query uit te voeren. Als een invulveld bijvoorbeeld niet beveiligd is, kunnen door het gebruik van de juiste input, gegevens in de database gewijzigd worden, of zelf verwijderd worden. Deze beveiliging heb ik toegepast in scripts die gebruik maken van globale variabele zoals $_GET en $_POST.
Figuur 12. Escapen van een $_POST waarde.
8.1.3.
Globale variabelen
Globale variabelen zijn variabele die beschikbaar zijn voor alle functies binnen een script. De globale variabele $_GET kan worden verstuurd door middel van het invullen van een formulier of door de waarde mee te geven in de URL. Deze waarde wordt daarna getoond in de URL en kan door scripts worden uitgelezen. In een URL ziet de $_GET waarde er meestal zo uit ?page=domeinen, de waarde na de = kan dan worden opgehaald door een PHP script. Voor $_POST geld bijna hetzelfde, deze wordt door middel van een form doorgestuurd naar een PHP script die de waardes kan uitlezen. Alleen zullen deze waardes niet in de URL worden getoond.
8.1.4.
Feedback naar de gebruiker
Om ervoor te zorgen dat gebruikers feedback ontvangen als er iets niet goed gaat bij het inloggen, heb ik een veld aangemaakt boven het inlogformulier waar een waarschuwing kan worden gegeven, als de ingevulde data onjuist is.
8.1.5.
Inladen templates
Wanneer een gebruiker inlogt op de klantensite, moet er automatisch een template worden geladen. Deze templates verschillen per bureau. Om de juiste template te laden voor elke klant, heb ik elke klant aan een bureau gekoppeld. Door middel van het bureau kan het juiste template Pagina 34 van de 52
worden geladen. Elke bureau heeft zijn eigen map op de server staan met daarin de verschillende templates, style sheets en images.
8.1.6.
Wachtwoord vergeten
Voor de gebruikers die hun wachtwoord zijn vergeten is er een pagina, waar doormiddel van een gebruikersnaam en e-mailadres een nieuw wachtwoord kan worden verstuurd. Bij het versturen van het nieuwe wachtwoord zal het oude wachtwoord automatisch vervallen.
8.2. Gegevens / logins Wanneer gebruikers eenmaal zijn ingelogd moeten zij de mogelijkheid hebben voor het bekijken van hun gegevens. Er is een pagina gemaakt waar gebruikers een overzicht te zien krijgen van hun bedrijf en factuurgegevens. Daarnaast is er voor de gebruiker een mogelijkheid om deze gegevens of het wachtwoord te wijzigen.
8.2.1.
Debiteurnummer
Wanneer de beheerder op de gegevens pagina van een klant kijkt zal hij als extra optie ook nog een debiteurnummer te zien krijgen. Dit nummer wordt gebruikt voor het aanmaken van de Excel voor facturatie.
8.2.2.
Wijzigen van het wachtwoord
Voor het wijzigen van een wachtwoord is er een extra veld ingevoegd dat er voor zorgt dat er twee keer het juiste wachtwoord moet worden ingevuld. Met een klein PHP script wordt er gekeken of de wachtwoorden gelijk zijn en veranderd daarna het wachtwoord. Hierdoor kunnen er minder snel typefouten worden gemaakt.
8.2.3.
Login gegevens van software pakketten
Voor klanten worden er naast de algemene gegevens ook login gegevens opgeslagen. Onder deze login gegevens bevinden zich, Google Analytics, Plesk, AWstats en CMS, gebruikersnamen en wachtwoorden. De gegevens worden vrijgegeven wanneer een project wordt opgeleverd aan de klant. Als een klant wijzigingen doorvoert in één van deze software programma's zal dit niet veranderen op de klantensite.
8.2.4.
Tooltips
Tijdens deze fase is er ook besloten om tooltips toe te voegen bij invul velden en andere gegevens. Deze tooltips zullen informatie vermelden over de getoonde pagina. Tooltips zijn aangemaakt door middel van jQuery en zijn toegevoegd om ervoor te zorgen dat de gebruikers wat hulp hebben bij het invoeren, of bekijken van bepaalde gegevens.
8.2.5.
Vorige pagina
Als je op een van de wijzigingpagina’s zit, maar eigenlijk terug wil naar de vorige pagina heb ik een ga terug knop aangemaakt. Door middel van een PHP functie leest hij de URL van de pagina uit waarna hij hem opslaat in een sessie. Sessies zijn variabelen die tijdelijk op de server worden opgeslagen en die je over de gehele website kunt gebruiken. Waarneer een browser wordt afgesloten zullen sessies ook meteen beëindigd worden. Als de Ga-terug button moet worden Pagina 35 van de 52
getoond haalt hij de URL sessie van de vorige pagina op zodat hij weet waar hij naar toe moet linken. Een probleem wat ik hier tegen kwam is dat wanneer je tussen twee pagina’s wisselt, hij de URL pakt van de vorige pagina’s en je zo dus niet meer terug kon naar de daadwerkelijk vorige pagina. Maar blijft wisselen tussen de laatste twee pagina’s. Hiervoor heb ik besloten de Ga-terug knoppen alleen op pagina’s neer te zetten waar hij noodzakelijk is. Hierdoor is het niet meer mogelijk om tussen twee aanliggende Ga-terug pagina’s te wisselen.
Figuur 13. Script voor het maken van een 'Ga terug' url.
8.2.6.
Beveiligen gegevens
Bij de gegevens- en logins pagina’s heb ik vooral veel aandacht besteed aan het beveiligen van de gegevens, want het mag natuurlijk niet gebeuren dat iemand anders met jouw gegevens aan de haal gaat. Om ervoor te zorgen dat niet zomaar iedereen de gegevens van een bepaalde gebruiker kan bekijken via de URL, heb ik een controle ingebouwd die kijkt naar de relatie tussen de gebruiker die is ingelogd en wat bekeken wordt, door middel van een ID vergelijking. Mochten deze geen relatie hebben dan wordt de gebruiker teruggestuurd naar de vorige pagina.
8.3. Klanten / bureaus Nu de gegevens van alle gebruikers in de klantensite staan, is het de bedoeling dat ze ook kunnen worden bekeken. Ik heb een pagina klanten en bureaus aangemaakt waar een overzicht kan worden opgevraagd over klanten en bureaus. Dit overzicht komt in verschillende varianten voor. Zo zal de beheerder alle klanten en bureaus kunnen zien, maar een bureau alleen de mogelijkheid heeft om zijn of haar klanten te bekijken. De beheerder heeft daarnaast ook nog de mogelijkheid om alle klanten van een bepaald bureau te bekijken. Pagina 36 van de 52
8.3.1.
Joins
Per klant of bureau zullen een aantal gegevens worden getoond namelijk, de bedrijfsnaam, contactpersoon, e-mailadres en de website. Al deze gegevens worden opgehaald uit verschillende tabellen door middel van een JOIN query. Via deze JOIN kunnen er gegevens uit verschillende tabellen in 1 query worden opgehaald.
Figuur 14. Voorbeeld van een bureau overzicht.
Hieronder is een voorbeeld te zien van een JOIN die het aantal domeinen optelt van een bepaalde gebruiker.
Figuur 15. Een join query.
De gegevens op deze overzichtspagina kunnen ook doorlinken naar een extra pagina waar meer informatie is te vinden over dat onderwerp. Naast deze gegevens is er ook nog een te bewerken veld. Dit veld zal alleen beschikbaar zijn voor de beheerder. Hier kan de beheerder de status van de gebruiker wijzigen, doorgaan naar het wijzigingsformulier of de gebruiker verwijderen uit het systeem.
8.3.2.
Klantstatus
Voor het wijzigen van de status is er aan elke klant een status 0 of 1 meegegeven. Wanneer deze status op 1 staat is de klant actief en kan hij inloggen in het systeem. Als een beheerder daarna op de status knop klikt, zal een PHP script de status veranderen van 1 naar 0. Hierdoor krijgen klanten een waarschuwing bij het inloggen dat hun account niet actief is. Er zal na het klikken eerst nog een pop-up verschijnen die vraagt om extra validatie, zodat je niet per ongeluk een verkeerde klant non actief zet. Deze pop-up wordt getoond door middel van JavaScript.
8.3.3.
Verwijderen gebruikers
Het verwijderen van een klant of bureau gaat door middel van een DELETE query. Door het meesturen van een aantal $_GET variabelen in de URL kan een PHP script uitlezen welke hij moet verwijderen uit de database. Omdat gebruikergegevens in meerder tabellen voorkomen, heb ik gebruik gemaakt van meerdere DELETE query’s.
Pagina 37 van de 52
8.3.4.
Zoeken
Bovenaan de pagina bevindt zich ook een zoekfunctie waarmee in een aantal tabellen kan worden gezocht. Door middel van een form en het versturen van $_GET variabelen kan een query de juiste resultaten ophalen.
8.3.5.
Paginanummering
Onderaan de pagina is een paginanummering weergeven. Ik heb deze paginanummering zo gemaakt dat er maar maximaal 5 paginanummers per keer mogen worden getoond, dit heb ik gedaan door middel van een aantal if statements. Voor het ophalen van de juiste gegevens die nodig zijn voor het maken van een paginanummering, zoals het aantal pagina’s, de huidige pagina, pagina limiet, en de offset, heb ik een aantal PHP functies gemaakt. Door het opzetten van deze paginanummering in een object, kon ik hem gemakkelijk gebruiken voor de pagina’s domeinen en projecten.
8.4. Projecten De verschillende opdrachten die bij Buildnet binnenkomen moeten op een of andere manier duidelijk worden weergegeven op de klantensite. Er is daarom besloten om een pagina projecten aan te maken. Deze pagina zal een overzicht weergeven van alle projecten die bij Buildnet zijn uitgevoerd.
8.4.1.
Nieuwe projecten
Bij het binnenkomen van een nieuwe opdracht zal er gekeken moeten worden bij welk domein deze opdracht hoort. Via het domein kan dan een project worden aangemaakt, dat automatisch aan een klant gekoppeld wordt. Voor het invoeren van een nieuw project zullen er een aantal standaardgegevens nodig zijn, zoals een naam, domein en beschrijving. Voor het juist functioneren van de website zullen er voor de live gang nog een aantal lopende projecten aan de site moeten worden toegevoegd, om er zo voor te zorgen dat er geen problemen zullen ontstaan tussen het project en support gedeelte.
8.5. Domeinen De domeinenpagina is samen met de support een van de uitgebreidste onderdelen van de website. Op deze pagina wordt een overzicht getoond voor de beheerder van alle domeinen en de bijbehorende hostingpakketten die in de klantensite zitten. Het idee achter deze pagina was, ervoor te zorgen dat het bijhouden van de domeinregistratie allemaal via de site zou gaan lopen. Op de domeinenpagina zitten mogelijkheden voor het verlengen, wijzigen, exporteren, verwijderen en toevoegen van domeinen. Alle domeinen die in het systeem staan zijn gekoppeld aan een klant, product en extensie. Door middel van het product en het soort extensie kan de klantensite de juiste prijzen ophalen.
Pagina 38 van de 52
8.5.1.
Importeren gegevens
Om ervoor te zorgen dat alle domeinen die ooit bij Buildnet zijn geregistreerd juist in de database terecht komen, heb ik eerst wat onderzoek moeten doen naar hoe ik dit voor elkaar kon krijgen. In de paragraaf Functioneel Ontwerp is hier meer informatie over te vinden. De Excel lijst met klantgegevens moest worden gefilterd op bruikbare informatie, dit omdat er een aantal kolommen niet hoeven te worden meegenomen naar de klantensite. Daarnaast ben ik samen met een collega gaan kijken naar gaten in het bestand, domeinen zonder datum, product of naam. Nadat al deze waren opgevuld heb ik de Excel lijst ingevoerd in Navicat. Door middel van de combinatie, domein, klant en product kan er gekeken worden waarvoor een factuur moet worden aangemaakt. Onder deze producten vallen bijvoorbeeld, hostingpakketten, Content Management Systemen, verhuizingen of gewoon een domeinnaam registratie.
8.5.2.
Verlengen domeinen
Omdat het ook de bedoeling is dat het systeem kan kijken wanneer er een domein zal moeten worden verlengd, krijgt elk domein een begin en einddatum van de registratie mee. Hiermee kan er dan voor worden gezorgd dat een aantal weken van de tevoren het domein automatisch kan worden verlengd voor de volgende periode. Voor het verlengen van domeinen wordt een overzicht getoond van alle domeinen die vervallen tussen nu en anderhalve maand. Bij elk domein heb ik een checkbox gemaakt waarmee aan kan worden gegeven, of het domein verlengd mag worden of niet. Deze waardes worden door middel van een form verstuurd naar het PHP script dat ervoor zorgt dat een domein verlengd wordt.
8.5.3.
Excel lijst voor facturatie
Domeinen die moeten worden gefactureerd worden ingevoerd in het boekhoudpakket. Dit programma maakt automatisch een factuur van de ingevoerde gegevens. Omdat voorheen domeinen met de hand één voor één werden ingevoerd en dit een tijdrovend werkje is als er meer dan vijftig moeten worden gefactureerd, is er besloten om er een Excel bestand van te maken. Dit Excel bestand kan later worden ingevoerd in het boekhoudpakket. Hiervoor moest ik een script schrijven dat bepaalde domeingegevens in een Excel bestandje op de server plaatst. Het lastige hierbij was dat domeinen van een klant met een gelijke extensie als product, gezamenlijk in de Excel lijst moest worden getoond maar met een teller voor het aantal. Om dit voor elkaar te krijgen heb ik een functie geschreven die alle te verlengen domeinen ophaalt en controleert op een aantal gegevens. Door middel van deze gegevens kan worden bepaald of domeinen bij elkaar, of apart in de Excel lijst moeten worden gezet. Voor het schrijven van gegevens naar de Excel, heb ik gebruik gemaakt van de PHP functies fopen() en fwrite(). Door middel van fopen() kunnen bestanden worden aangemaakt, waarna ze met fwrite() kunnen worden bewerkt. Om ervoor te zorgen dat de Excel ook nog te downloaden is, heb ik een pagina export gemaakt, waar je een overzicht te zien krijgt van alle gemaakte verlenging met daarbij een link voor het downloaden van de Excel files. Ook voor de klanten en bureaus heb ik een mogelijkheid gemaakt voor het bekijken van hun eigen domeinen. Deze kunnen hier alleen wat extra informatie bekijken over het domein. Pagina 39 van de 52
8.6. Support Op de support pagina zullen tickets uit het support systeem worden geladen. Tijdens deze fase van het project, heb ik onderzocht op wat voor manier ik dit voor elkaar zou kunnen krijgen.
8.6.1.
Kayako
Het support systeem van Kayako heeft een aantal API’s beschikbaar waarmee het mogelijk is informatie uit het systeem op te halen. Via de fetch ticket lists API kan je een XML file ophalen van de tickets, waarna deze uitgelezen kan worden in de klantensite. Hiervoor heb ik een PHP library gedownload waarmee mijn applicatie met het support systeem kan communiceren. Om ervoor te zorgen dat de twee systemen die communicatie kunnen leggen moet er via een PHP script connectie worden gemaakt door middel van twee keys.
8.6.2.
Toewijzen support tickets
De support pagina toont alle openstaande tickets uit het support systeem. Voor elk ticket is er de mogelijkheid om hem toe te wijzen aan een project. Op deze pagina zijn een aantal belangrijke velden die dienen te worden ingevuld, voordat het ticket kan worden toegewezen. Het eerste veld wat de gebruiker tegen komt is het soort ticket. Door het bepalen van het soort ticket kan er gekeken worden of er tickets moeten worden afgehaald, of hoe de lay-out van het te versturen email eruit gaat zien. Ik heb ervoor gezorgd dat deze gegevens in een database tabel worden opgeslagen, mochten er meer soorten bij komen, ze gemakkelijk kunnen worden toegevoegd, zonder code te wijzigen.
8.6.3.
Credits
Het tweede veld wat moet worden ingevuld is de inschatting van het aantal credits. Hiervoor zal er moeten worden gekeken naar de inhoud van het ticket en zal er een inschatting voor de tijd moeten worden gemaakt. Naast de naam van de klanten zullen het aantal beschikbare credits worden getoond. Klanten die niet genoeg credits bezitten zullen een mail ontvangen met daarin aangegeven dat het aantal credits niet genoeg is voor het uitvoeren van het ticket. Het laatste veld dat zal moeten worden ingevuld is het projectveld. Door het selecteren van een project zal er automatisch een klant aan het ticket worden gekoppeld. Ik heb via AJAX en jQuery een functie gemaakt die automatisch de klant toont wanneer er een project wordt geselecteerd. Daarnaast zal op de pagina nog wat informatie over het ticket zelf worden getoond, zoals de aanmaak datum, de inzender, het onderwerp, de display id en het logboek. Om ervoor te zorgen dat de projectleider een duidelijk beeld krijgt van wat er allemaal met een ticket is gebeurd sinds het is binnengekomen, heb ik een logboek gemaakt. Het logboek zal alle veranderingen van het ticket bijhouden, zoals het binnenkomen van een ticket of het toewijzen van het ticket. Bij oplevering van bepaalde hosting pakketen zullen er al een aantal gratis credits worden bijgeleverd.
Pagina 40 van de 52
8.6.4.
Versturen akkoord e-mails
Voordat ik zou beginnen met de volgende stap, namelijk het versturen van een e-mail naar de klant na het toewijzen van een ticket. Wilde Sander graag eerst een flowchart zien van het proces dat zal worden doorlopen. Voor het maken van deze flowchart heb ik gebruik gemaakt van de website gliffy.com. Gliffy heeft een aantal handige tools waarmee je gemakkelijk vormen en lijnen kan maken voor een flowchart. Voor het opzetten van de flowchart, ben ik eerst gaan kijken naar wat precies de bedoeling is met het versturen van de mail, Namelijk het informeren van de klant over het ticket, wat het zal gaan kosten, hoelang het duurt en dat de aanpassing boven hun budget ligt. Voordat er een e-mail kan worden verzonden, zal er eerst moeten worden gekeken naar het soort mail. Alle soorten krijgen namelijk hun eigen standaard tekst die vermeldt wat het ticket zal gaan kosten. Daarnaast zal elk mailtje ook een lay-out mee krijgen. Om dit goed voor elkaar te krijgen heb ik besloten dezelfde thema’s te gebruiken die ik ook voor de bureaus gebruik, alleen zullen de mails moeten worden opgebouwd in tabellen. Dit heb ik moeten doen om er zo voor te zorgen dat elk mail programma de juiste lay-out krijgt te zien, want sommige mail programma’s kunnen div’s niet goed uitlezen. In de e-mail heb ik twee knoppen gemaakt met accepteren en weigeren, zodat een klant akkoord kan gaan met de aanpassing, of het ticket kan laten vervallen. Wanneer er op accepteren wordt geklikt zal er in het support systeem een melding komen dat het ticket is goedgekeurd en kan worden uitgevoerd.
8.6.5.
Flowchart mail systeem
In de onderstaande afbeelding is de flowchart te zien van het versturen van een e-mail naar de klant. Deze flowchart laat duidelijk zien welke stappen er worden doorlopen voor het versturen van de e-mail.
Pagina 41 van de 52
Figuur 16. Flowchart voor het versturen van e-mail. Bij het toewijzen van een support ticket.
Pagina 42 van de 52
9. Fase 5 Testen Voordat de site online kan worden geplaatst, zal hij eerst moeten worden getest op een aantal punten. Door het juist doorlopen van het testschema, zullen de meeste fouten gevonden kunnen worden. Deze fouten kunnen bestaan uit functionele fouten maar er kunnen ook dingen met het ontwerp fout gaan, dit is vooral het geval wanneer er in de oudere browsers wordt getest. Omdat ik zelf continue bezig ben geweest met het bouwen van de website en daardoor kleine dingen eerder over het hoofd zal zien, heb ik besloten de klantensite te laten testen door een collega. Door het zo te testen kunnen er ook dingen naar voren komen waar je als bouwer nooit aan heb gedacht. In dit hoofdstuk zal gekeken worden naar de verschillende onderdelen waarop getest gaat worden.
9.1. Functionaliteit Het belangrijkste punt waarop de klantensite getest is, de functionaliteit en de beveiliging daarvan. Hieronder vallen alle mogelijke handelingen die een gebruiker kan uitvoeren op de website. Voor het testen van de functionaliteiten binnen de website, moet er gekeken worden of er precies wordt gedaan, dat er gevraagd word. Omdat niet iedereen zomaar alle handelingen mag uitvoeren, is er ook gecontroleerd of er niet via SQL injectie functies kunnen worden uitgevoerd.
9.2. Code Voor de klantensite is er behoorlijk wat code geschreven. Deze zal natuurlijk ook gecontroleerd moeten worden. Hier is niet speciaal naar de gebruikte code, maar meer naar de structuur en het gebruik van comments gekeken. Het controleren is een aantal keer gedaan door een collega, wanneer er een functionaliteit was afgerond.
9.3. Ontwerp Een ander punt waar de klantensite op gecontroleerd zal worden is het ontwerp. Het ontwerp zal in de verschillende browsers er redelijk hetzelfde uit moeten zien. Er zal vooral gekeken worden naar de plaatsing van elementen op de pagina’s. Dit is bij sommige oude browsers nogal een probleem, zoals Internet Explorer 7.
Pagina 43 van de 52
10.
Overige werkzaamheden
Om ervoor te zorgen dat ik niet mijn gehele stage me alleen maar bezig zou gaan houden met mijn stageopdracht, heb ik ook met een aantal andere projecten mogen meehelpen. Deze projecten hebben niet heel veel bijgedragen aan mijn te leren competenties, maar kwamen wel als een aangename afwisseling.
10.1. Inkopers-Café.nl Buildnet Webservices heeft naast het bouwen van websites ook nog een andere website draaien die gericht is op inkopers. Deze website www.Inkopers-café.nl, biedt grote hoeveelheden informatie aan inkopers in heel Nederland. Hieronder vallen, vacatures, referenties, artikelen en columns. Voor deze website ben ik vooral bezig geweest met het plaatsen van vacatures, die worden ingestuurd door de verschillende klanten.
10.2. NetwerkBTB Een andere opdracht waar ik een aantal dingen voor heb gedaan, was het vernieuwen van de website NetwerkBTB. NetwerkBTB is een netwerkclub voor ondernemers in het MKB. Voor de nieuwe site moest alle data uit de oude gekopieerd worden. Dit kon niet via de database gedaan worden omdat de beide sites op verschillende database draaien.
10.3. DHTA Voor de website van DHTA moesten er een aantal enquêtes op de site geplaatst worden. Door middel van het gebruiken van de formbuilder module in CMSMS kon ik gemakkelijk een aantal formulieren aanmaken en die samenvoegen tot een enquête.
Pagina 44 van de 52
Deel III Evaluatie van de afstudeeropdracht
Pagina 45 van de 52
11.
Evaluatie
11.1. Beantwoording doelstellingen Aan het begin van het verslag heb ik een aantal doelstelling opgesteld waar ik rekening mee moest houden voor het succesvol afronden van de opdracht. In deze paragraaf zal ik elk van deze doelstelling doorlopen, met de daarbij behaalde resultaten. 1.
Het effectief opvragen van informatie over klanten, bureaus, domeinen, projecten en support tickets.
2.
De klanten het gevoel geven dat zij zich in een omgeving van het bureau bevinden i.p.v. bij Buildnet.
3.
Ervoor zorgen dat alle domeingegevens kunnen worden uitgelezen in de klantensite.
4.
Ervoor zorgen dat alle ingestuurde tickets in de klantensite kunnen worden uitgelezen.
5.
Domeinen moeten kunnen worden verlengd voor één jaar.
6.
Verlengde domeinen moeten worden opgeslagen in een Excel bestand.
7.
Klanten en bureaus zullen beide hun eigen login krijgen op de klantensite.
8.
Het systeem moet mee kunnen met de huidige standaarden die vermeld zijn in het technisch ontwerp.
Resultaat van de doelstellingen. 1)
De klantensite biedt voor alle gebruikers de mogelijkheden voor het opvragen van informatie over domeinen, projecten en support tickets. Voor de bureaus en beheerders is er ook een mogelijkheid om klanten te bekijken.
2)
Door gebruik te maken van verschillende templates voor elk bureau, krijgt de klant het gevoel dat hij/zij niet op een website van Buildnet zit, maar op een website van het ontwerp bureau.
3)
Door middel van het sorteren van de Excel lijst met klantgegevens en het daarna importeren via Navicat in de database, is er voor elke gebruik de mogelijk om informatie over domeinen op te vragen.
4)
Via de PHP library die beschikbaar is gesteld door Kayako, worden alle binnenkomende tickets opgehaald door de klantensite en daarna verwerkt. Alle gebruikers kunnen daarna de tickets bekijken.
5)
In de klantensite is een functie beschikbaar waarmee beheerders in een keer een grote hoeveelheid domeinen kunnen verlengen. Pagina 46 van de 52
6)
De domeinen worden tijdens het verlengen automatisch weggeschreven naar een Excel bestand, dat later ingevoegd kan worden in het boekhoudpakket.
7)
In de klantensite is rekening gehouden met verschillende gebruikers, zo zullen de klanten, ontwerp bureaus en beheerders allemaal hun eigen login hebben en een eigen pagina te zien krijgen.
8)
Het systeem is gebouwd voor PHP 5 waardoor het op alle nieuwe server goed kan draaien. De HTML templates zijn niet meer in tabels maar in divs opgebouwd zodat ze overzichtelijk blijven. Voor de CSS en HTML is er rekening gehouden met een aantal HTML 5 en CSS 3 elementen.
11.2. Evaluatie opgeleverde producten Het functioneel- en technisch ontwerp zijn aan het begin van het project gemaakt. Deze documenten hebben mij een hoop geholpen bij het opzetten van de klantensite. Door van te voren al na te gaan denken over de gebruiker, functionaliteiten en data, is het uiteindelijke bouwen van de klantensite een stuk makkelijker. Het gebruik van deze documenten is dus een must have voor bijna elk ICT project. De klantensite is een website geworden waar gebruikers informatie kunnen opvragen over verschillende type gegevens. De site beschikbaar voor verschillende type gebruikers, waarvan de bureaus allemaal hun eigen ‘look and feel’ meekrijgen. Het uiteindelijk implementeren van de klantensite heb ik helaas niet kunnen doen tijdens mijn afstudeerperiode, omdat hier te weinig tijd voor was. Deze stap was ook al niet opgenomen in de planning.
11.3. Te behalen competenties Voor het begin van het project waren er een aantal competenties opgesteld die door mij behaald moesten worden. In deze paragraaf zal ik voor elk van deze competenties vertellen wat ik er aan heb gedaan om dit te behalen. 1. Analyseren 1.1. Ik voer een analyse uit van processen, producten en informatiestromen in hun onderlinge samenhang en de context van de omgeving. Aan het begin van het project heb ik een onderzoek uitgevoerd naar de methodes en technieken die gebruikt worden binnen Buildnet. 1.2. Ik stel functionele specificaties op. Door middel van een Functioneel ontwerp heb ik de functionele specificaties beschreven. Pagina 47 van de 52
3. Ontwerpen 3.1. Ik ontwerp een ICT-systeem op basis van een architectuurbeschrijving en specificaties, in samenhang met een analyse. Binnen de gestelde kaders voor kwaliteit, testen, beveiliging, doorlooptijd, budget en exploitatie en beheer.
Voor mijn stageopdracht heb ik een systeem ontworpen, op basis van de architectuurbeschrijving die ik heb mee gekregen aan het begin van het project. Dit systeem in ontworpen binnen de gestelde kaders. 4. Realiseren 4.1. Ik bouw en implementeer een ICT-systeem op basis van een functioneel en technisch ontwerp. Binnen de gestelde kaders voor kwaliteit, testen, beveiliging, doorlooptijd, budget en exploitatie en beheer. Tijdens dit project heb ik een functioneel en technisch ontwerp gemaakt. Deze documenten zijn gedurende het project de bouwstenen geweest van de klantensite. De klantensite is getest op kwaliteit voor alle beschikbare browsers, voor de beveiliging is er goed gekeken naar encryptie van wachtwoorden en SQL injectie van de input velden. De globale variabelen worden allemaal uitgelezen door middel van de MySQL escape functie als er vreemde tekens in voorkomen. Elk onderdeel van de klantensite is getest op functionaliteit, kwaliteit en beveiliging. 5. Beheren 5.1. Zorg voor invoeren, testen, integreren, en inbedrijfstelling van een nieuw(e release van een) ICT-systeem. De klantensite is getest en staat klaar om gebruikt te gaan worden. 5.2. Verleen diensten die zijn overeengekomen binnen de gestelde kaders voor kwaliteit en financiën. Bij het uitvoeren van mijn opdracht heb ik mij zoveel mogelijk proberen te houden aan de afspraken die van te voren zijn opgesteld.
Pagina 48 van de 52
11.4. Wat zou ik de volgende keer anders/beter doen Er zijn nog wel een aantal punten, dat ik bij een volgend gelijksoortig project anders zou doen. Wat ik merkte bij het programmeren was dat ik al snel bezig was met het volgende punt op het lijstje, zonder dat ik daarover eerst met Sander had overlegd. Het is dan ook een aantal keren gebeurd dat ik dingen anders en opnieuw moest maken. Tevens, wanneer ik vast zat op bepaalde punten tijdens het programmeren, heb ik soms veel tijd gestoken in het zoeken naar een oplossing, terwijl ik om me heen de collega’s heb zitten die waarschijnlijk ook de oplossing voor het probleem weten en veel tijd had kunnen besparen.
Pagina 49 van de 52
12.
Verklarende woordenlijst
AJAX Asynchronous JavaScript and XML, het delen van data met de server zonder de pagina te herladen. API Application programming interface, een verzameling definities waarmee verschillende applicaties met elkaar kunnen communiceren. URL Uniform Resource Locator, een link die doormiddel van informatie, naar data of een webpagina kan verwijzen. CMS Content Management Systeem, een systeem waarmee je de inhoud op de website kan wijzigen. Framework Een aantal scripts die gebruikt kunnen worden voor het ontwikkelen van een applicatie. JavaScript Een taal die gebruikt worden voor het weergeven van interactieve delen van een webpagina. HTML Hypertext Markup Language, de taal die wordt gebruikt voor het opzetten van de structuur van de website. CSS Cascading Style Sheet, de taal die wordt gebruikt voor het stijlen van de HTML code. Open source Een gratis licentie op een software- of hardware product. SEO Search Engine Optimization, het optimaliseren van je website voor de zoekmachines. SQL Structured Query Language, een taal die gebruikt worden voor het aanpassen van gegevens in een relationele database. MySQL Een open source managementsysteem voor het beheren van relationele databases. UML Unified Modeling Language, een methode voor het weergeven van de structuur van informatiesystemen. WBS Word Breakdown Structure, een project methode. Pagina 50 van de 52
Load Het aantal gegevens dat geladen moet worden bij het openen van een pagina. Template Een stuk code, dat gebruik wordt voor het tonen van informatie SQL injectie Het invoeren van een SQL query in invoervelden en daarmee proberen toegang te krijgen tot de database. Variabelen Een variabele bestaat uit opgeslagen gegevens. Globale variabelen Variabelen die beschikbaar zijn in elke file. jQuery Een JavaScript Framework voor het gebruik van interactieve en dynamische functies. Query Een opdracht die naar de database wordt verstuurd. OOP Object-oriented Programming, is een programmeerstijl waarbij gebruik wordt gemaakt van objecten. Om zo overeenkomende code bij elkaar te voegen.
Pagina 51 van de 52
13.
Literatuurlijst
Boeken Converse T, Park J, Morgan C, PHP5 & MySQL het complete HANDBoek, uitgegeven door Sdu Uitgevers bv te Den Haag, 1ste druk 5de oplage, 2008, ISBN 90 395 2281 2 Ullman, Larry, PHP voor het World wide web, uitgegeven door Peachpit Press te Berkeley California, tweede druk, 2004, ISBN 90 430 0901 6
Websites www.w3schools.com www.gliffy.com www.dbschemaeditor.com www.lynda.com www.smarty.net
Pagina 52 van de 52
