Webdesign in WordPress en JingJobs webapplicatie in PHP Bij Redstar Works, Beijing
Bachelor in de toegepaste informatica
Yannick Van Hauwe
Academiejaar 2013-2014 Campus Geel, Kleinhoefstraat 4, BE-2440 Geel
3
VOORWOORD In het kader van mijn opleiding heb ik 3 maanden stage gelopen. Ik heb ervoor gekozen deze stage te doen in Beijing, China. Dit om mijn culturele kennis te vergroten en om te ervaren hoe het is om in het buitenland te werken. Mijn ouders hebben mij deze kans gegeven en die heb ik dan ook met beide handen gegrepen. Uit persoonlijke ondervindingen kan ik iedereen aanbevelen hetzelfde te doen indien de mogelijkheid zich voordoet. Graag wil ik enkele mensen bedanken. Eerst en vooral mijn ouders voor de kans die ik gekregen heb. Verder wil ik ook de mensen van de Hutongschool in Beijing bedanken, omdat ze mij goed geholpen hebben bij het zoeken naar een geschikte stageplaats. Zij hebben mij goed opgevangen en wegwijs gemaakt in de stad. Ze hebben mij op geholpen in het zoeken naar een geschikte verblijfplaats. Indien ik ter plaatse problemen ondervond, kon ik ook steeds met al mijn vragen bij hen terecht. Ten slotte heeft de Hutongschool mij ook geholpen bij de Chinese lessen die ik ter plaatse gevolgd heb en bij het organiseren van andere activiteiten. Ik bedank ook de mensen van Redstar Works, omdat ik er mijn stage heb kunnen lopen. Ze hebben me laten kennismaken met hoe het eraan toegaat in een bedrijf. Ze hebben er alles aan gedaan om mijn stage zo goed en leuk mogelijk te laten verlopen. Tot slot wil ik Miranda Decabooter nog bedanken omdat ze me goed heeft geholpen met het schrijven van mijn eindwerk. Als er problemen waren tijdens de stage dan kon ik ook altijd bij haar terecht.
4
SAMENVATTING In dit eindwerk vind je een uitgebreid verslag van mijn bedrijfsstage bij Redstar Works Beijing. Met dit eindwerk wil ik je een inzicht geven in wat ik gedaan heb tijdens die drie maanden stage. Verder kan u ook lezen hoe ik het ervaren heb om te werken in een klein bedrijf. Mijn stageopdracht bestond uit drie grote delen. In eerste instantie moest ik aanpassingen maken of problemen verhelpen aan WordPress-websites. Hiervoor had ik vooral mijn kennis van HTML en CSS voor nodig. Ook de kennis van Adobe PhotoShop is hier van pas gekomen. Een tweede deel bestond uit kleine PHP-opdrachten, die later gebruikt worden in grotere web-applicaties. Als laatste en belangrijkste onderdeel van de stage werd mij gevraagd om de webapplicatie ‘JingJobs’ te testen en nadien de gevonden fouten te herstellen. Deze webapplicatie is geschreven in PHP. De moeilijkheid hier was dat er onvoldoende analyse was gedaan en hierdoor zijn er vele fouten in de applicatie geslopen. Een bijkomende moeilijkheid situeerde zich in het feit dat er verschillende mensen op verschillende tijdstippen aan deze applicatie gewerkt hadden. Dit alles maakte de opgave er voor mij niet eenvoudiger op. Zo was de commentaar bijvoorbeeld geschreven in verschillende talen waaronder het Chinees.
5
INHOUDSTAFEL VOORWOORD ................................................................................................... 3 SAMENVATTING ............................................................................................... 4 INHOUDSTAFEL ................................................................................................ 5 LIJST MET ILLUSTRATIES ................................................................................. 7 ALFABETISCHE LIJST MET AFKORTINGEN ........................................................ 9 INLEIDING ..................................................................................................... 10 1
REDSTAR WORKS ............................................................................. 11
2
PLAN VAN AANPAK........................................................................... 12
2.1 2.2 2.3 2.4 2.5 2.6
Aanleiding en achtergrond van de stageopdracht ............................ 12 Verwacht resultaat ........................................................................... 12 Business Case .................................................................................. 13 Fasering ........................................................................................... 13 Primaire doelgroep en andere stakeholders ..................................... 14 Informatie en rapportering .............................................................. 14
3
GEBRUIKTE TOOLS ........................................................................... 15
3.1 3.1.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8
WordPress ....................................................................................... 15 Werking .............................................................................................. 15 PhotoShop ....................................................................................... 16 Netbeans .......................................................................................... 16 phpMyAdmin .................................................................................... 16 WampServer .................................................................................... 16 FileZilla ............................................................................................ 17 Skype ............................................................................................... 17 Asana ............................................................................................... 17
4
WORDPRESS WEBSITES ................................................................... 18
4.1 4.1.1 4.1.2 4.1.3 4.2 4.3
WordPress voorbeelden ................................................................... 18 Basis instellingen ................................................................................. 18 Page ................................................................................................... 19 Posts .................................................................................................. 20 CSS en HTML voorbeelden ................................................................ 20 PhotoShop voorbeelden ................................................................... 21
5
KLEINE PHP PROJECTEN .................................................................. 22
5.1 5.1.1 5.1.2 5.2 5.2.1 5.2.2
Project Export .................................................................................. 22 Database ............................................................................................ 22 Applicatie ............................................................................................ 23 Visual statistics ................................................................................ 25 Database ............................................................................................ 25 applicatie ............................................................................................ 26
6
ANALYSE VAN DE ‘JINGJOBS’-DATABASE ......................................... 28
6.1 6.2 6.2.1 6.2.2 6.2.3
Huidige database ............................................................................. 28 Hoe ziet de database er nu concreet voor mij uit ............................. 32 User deel ............................................................................................ 33 Job deel .............................................................................................. 34 Jobseeker deel ..................................................................................... 35
6
7
JINGJOBS ......................................................................................... 36
7.1 7.2 7.3
Wachtwoord aanpassen ................................................................... 36 scrol lader ........................................................................................ 38 Verbetering paswoord security ........................................................ 39
BESLUIT…. ..................................................................................................... 40 LITERATUURLIJST .......................................................................................... 41
7
LIJST MET ILLUSTRATIES Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur Figuur
1: Redstar Works logo ............................................................................. 2: Redstar magazine ................................................................................ 3: Redstar slogan .................................................................................... 4: WordPress logo ................................................................................... 5: PhotoShop logo ................................................................................... 6: NetBeans logo ..................................................................................... 7: phpMyAdmin logo ................................................................................ 8: WampServer logo ................................................................................ 9: FileZilla logo ....................................................................................... 10: Skype logo ........................................................................................ 11: Asana logo ........................................................................................ 12: WordPress menu opmaak ................................................................... 13: WordPress thema menu...................................................................... 14: Wordpress pagina .............................................................................. 15: WordPress instelling ........................................................................... 16: WordPress categorie .......................................................................... 17: WordPress thema .............................................................................. 18: WordPress aangepast thema ............................................................... 19: Touchdown website ............................................................................ 20: Touchdown CSS ................................................................................ 21: Photoshop voorbeeld .......................................................................... 22: Photoshop voorbeeld 2 ....................................................................... 23: Tabel export ..................................................................................... 24: Tabel export met testgegevens............................................................ 25: Voorbeeld pagina ............................................................................... 26: Functie getRows ................................................................................ 27: Functie index .................................................................................... 28: HTML pagina ..................................................................................... 29: Functie toExcelAll .............................................................................. 30: PHP pagina ....................................................................................... 31: Tabel statistics .................................................................................. 32: Inhoud tabel statistics ........................................................................ 33: Statistieken tabel over topics .............................................................. 34: Voorbeeld grafiek .............................................................................. 35: Ajax functie ...................................................................................... 36: Functie getAllPagesTotalViews ............................................................. 37: Grafiek opties .................................................................................... 38: Oude database ‘JingJobs’ .................................................................... 39: Voorbeeld database ‘JingJobs’ ............................................................. 40: Tabellen met dezelfde inhoud .............................................................. 41: Tabel industry deel 1 .......................................................................... 42: Tabel industry deel 2 .......................................................................... 43: Tabel interview_status ....................................................................... 44: Nieuw database model ....................................................................... 45: Database model user deel ................................................................... 46: Database model job deel .................................................................... 47: Database model jobseeker deel ........................................................... 48: Wachtwoord aanpassen ‘JingJobs’ ........................................................ 49: Wijzig paswoord ................................................................................ 50: Foutmelding ...................................................................................... 51: Error validatie ................................................................................... 52: Ajax functie ...................................................................................... 53: Changepass functie ............................................................................ 54: Functie updatePassword ..................................................................... 55: Scrol lader voorbeeld ......................................................................... 56: Functie index scrol lader .....................................................................
11 11 11 15 16 16 16 16 17 17 17 18 18 19 19 20 20 20 21 21 21 21 22 22 23 23 23 23 24 24 25 25 26 26 26 26 27 28 29 30 30 30 31 32 33 34 35 36 36 37 37 37 37 37 38 38
8
Figuur Figuur Figuur Figuur Figuur
57: 58: 59: 60: 61:
Functie Functie Functie Functie Functie
lastPostFunc .......................................................................... ajax_list ................................................................................ getAll .................................................................................... getAllUsers ............................................................................ changeAllPasswords ................................................................
38 38 39 39 39
9
ALFABETISCHE LIJST MET AFKORTINGEN CMS
Content Managementsysteem
CSS
Cascading Style Sheets
DIV
Divisie
FTP
File Transfer Protocol
HTML
Hypertext Markup Language
IDE
Integrated Development Environment
IP
Internet Protocol
IT
Informatietechnologie
JDK
Java Development Kit
JVM
Java Virtual Machine
PHP
Hypertext Preprocessor
SQL
Structured Query Language
VoIP
Voice Over IP
10
INLEIDING Vandaag de dag is het internet populairder dan ooit en groeit het nog elke dag. Voor bedrijven is het een handig en belangrijk reclamemiddel. Dit gebeurt via sociale netwerken zoals Facebook of LinkedIn, maar voor veel bedrijven is dit nog niet voldoende. Ze willen dan ook een eigen persoonlijke website op de markt brengen. Dit geldt niet alleen voor grote bedrijven. Ook kleinere bedrijven laten steeds meer een op maat gemaakte website ontwikkelen. Via deze weg kunnen klanten online bekijken wat bedrijven te bieden hebben. Redstar heeft deze boodschap ook begrepen. Naast het ontwerpen van flyers, affiches en ander promotiemateriaal wil ze de klant een eigen persoonlijke website aanbieden. Ze richt zich vooral op kleinere bedrijven. Met dit eindwerk wil ik u een idee geven van wat mijn taak inhield bij Redstar Works Beijing tijdens die drie maanden stage. Een groot deel van mijn stage bestond in het maken van WordPress-websites. Dit zijn kleinere websites, die enkel bedoeld zijn om mensen te informeren. Bij dit soort websites is het uitzicht heel belangrijk. Ze moeten aantrekkelijk zijn. Daarnaast werkte ik aan kleine PHP-applicaties. Deze worden later in bestaande websites geïntegreerd. Hier is de functionaliteit belangrijk. Ze moeten dus in de stijl van de website passen. Ten slotte moest ik ook verbeteringen en aanpassingen aanbrengen in de webapplicatie ‘JingJobs’. Dit is een groot PHP-project dat Redstar heeft aangenomen om verder te kunnen groeien in de sector. De eerste opdracht was de applicatie grondig testen. Uit deze testen kwamen er verschillende fouten naar boven. Nadien moest ik deze fouten verbeteren. Dit was heel belangrijk zodat de klanten op de diensten van de ‘JingJobs'-website konden rekenen.
11
1
REDSTAR WORKS
Figuur 1: Redstar Works logo
Redstar is in 2003 in Qingdao opgericht door de Brit Ian Burns. In 2011 hebben ze een afdeling in Beijing geopend. Momenteel heeft Redstar ongeveer 30 mensen in dienst. Deze mensen komen uit negen verschillende landen.
Redstar Works houdt zich vooral bezig met het maken van een magazine dat verdeeld wordt over de Chinese stad Qingdao. Het magazine is gratis, maar wordt betaald via advertenties in het magazine. Verder houdt ze zich bezig met het ontwerpen en creëren van een bedrijfsidentiteit. Voorbeelden zijn oa. logo-ontwerpen, Microsoft Word en PowerPointsjablonen maken. Het ontwerpen van flyers en affiches en nog veel meer. In een nieuwe fase wil ze nog verder gaan door haar klanten ook een online identiteit aan te bieden en dit via een website, die voornamelijk gebruik zal maken van WordPress. In Beijing en Qingdao houdt ze zich ook bezig met het organiseren van evenementen. Specifiek gaat het om comedyshows. Deze gaan ongeveer 5 maal per kalenderjaar door.
Figuur 2: Redstar magazine
Redstar Works is ook begonnen met het maken van een magazine. Ze wil haar klanten een totaal pakket geven en daarom heeft ze ervoor gekozen om voor haar klanten nog andere zaken te ontwerpen. Dit alles typeert Redstar Works. Het bedrijf wil alles voor haar klanten doen.
Figuur 3: Redstar slogan
De IT-afdeling is zeer klein. Je hebt één IT-er die zich enkel en alleen bezig houdt met PHP en WordPress. Een collega werkt met HTML en CSS en werkt een beetje met PHP. Redstar maakt veel gebruik van outsourcing. In Azië is dit relatief goedkoop, maar de kwaliteit kan er onder leiden. Haar IT-afdeling is te klein en beschikt nog over te weinig kennis om grote projecten aan te nemen. Het bedrijf wil wel groeien in haar sector. Voor WordPress-websites zijn er drie werknemers. Ze kunnen welwerken met WordPress, maar ze weten totaal niets af van HTML/CSS. Dit laatste is echt wel nodig als je de klanten een eigen design wil aanbieden.
12
2
PLAN VAN AANPAK
2.1
Aanleiding en achtergrond van de stageopdracht
Momenteel bestaat mijn stage uit drie onderdelen. Een deel bestaat uit het opmaken van de Wordpress-websites, deze hebben een basisopmaak vanuit de template, maar door middel van CSS kan je ze bewerken. Binnen Redstar Beijing zijn er geen mensen aanwezig die enige kennis hebben van IT. Niemand van de werknemers kent aldus HTML/CSS. Dit is voor een basis Wordpresswebsite ook niet nodig, maar het bedrijf wil persoonlijke ontwerpen aan de klant aanbieden vertrekkend vanuit een template binnen Wordpress. Daarnaast gebruik ik ook nog Photoshop om foto’s op deze websites te bewerken. Verder moet ik kleine web-applicaties bouwen. Deze moeten in bestaande websites ingebouwd worden. Redstar heeft ook klanten die geen Wordpress-website willen. Als de klant daarenboven zelf aanpassingen aan zijn website wil doen, heeft hij hiervoor pagina’s nodig die in PHP geschreven zijn. De moeilijkheid in dit deel van mijn opdracht is dat deze opdrachten via Skype worden gegeven en als ik vragen heb dat ik ze ook via dit medium moet stellen. Dit omdat de IT-ers zich in Redstar Qingdao bevinden. Het laatste onderdeel is het testen van een groot PHP-project (http://www.jingjobs.com/). Redstar heeft dit project aangenomen omdat ze wil groeien in de IT-business. Door het gebrek aan IT-ers binnen het bedrijf, was het voor Redstar onmogelijk om dit project tot een goed einde te brengen. Ze heeft het project geoutsourcet aan een Chinees bedrijf, maar dit is faliekant afgelopen. Het project zit vol fouten en daar begint het voor ons. Wij moeten alle fouten verbeteren.
2.2
Verwacht resultaat
Voor het eerste deel is het verwachte resultaat de Wordpress-klanten het gewilde design bezorgen. Dit moet snel vooruit gaan, zodat er in een korte periode heel wat websites gepresenteerd kunnen worden. Bij deel één is het verwachte resultaat dat de klanten van de Wordpress-websites het gevraagde design geven. Dit moet zo snel mogelijk uitgevoerd worden, zonder dat de kwaliteit hieronder te lijden te heeft. Deel twee is de gewilde applicaties werkend afleveren en inbouwen in de websites. Ze moeten gemaakt worden volgends de wil van de klant. Deel drie bestaat er in de gewilde applicaties te maken en ze in de websites in te bouwen. De applicaties moeten voldoen aan de juiste functionaliteiten en passen binnen het design van de bestaande website. Voor het laatste onderdeel moeten de ‘Jingjobs’-website grondig getest worden zodat fouten snel op te sporen zijn. Nadien moeten de gevonden fouten verbeterd worden, zodat de website volledig gebruikt kan worden volgens de wil van de klant.
13
2.3
Business Case
Voor de Wordpress-websites en de PHP-applicaties wil Redstar haar klanten op ‘maat’ gemaakte websites kunnen aanbieden. Dit omdat ze zo meer mensen willen overtuigen om voor haar te kiezen in plaats van bedrijven die gewone basis Wordpress-websites bouwen. Omdat een website bouwen in Wordpress normaal sneller is dan in HTML, wil ze bedrijven die op maat gemaakte websites in HTML maken, te snel af zijn door sneller websites online te krijgen. De ‘Jingjobs’-website houdt momenteel de groei van het bedrijf tegen. De verwachtingen waren net tegenovergesteld. Het was de bedoeling dat dit project Redstar veel geld zou opbrengen en dat ze zo haar IT-afdeling kon uitbreiden. Op die manier zou ze in de toekomst meer van die projecten kunnen doen.
2.4
Fasering
Dit is de manier waarop ik te werk ga en dit ook in de toekomst zal doen bij eventuele nieuwe projecten. Voor het werken met Wordpress:
De opdracht krijgen (Meestal via E-mail/Word document) Doorlezen Vragen stellen indien nodig Uitzoeken via Element inspecteren welke CSS er aangepast moet worden. Aanpassingen doen Foto’s bewerken in Photoshop Foto’s plaatsen Resultaat tonen aan klant/mentor Eventueel aanpassingen doen
Voor PHP:
Opdracht krijgen (Via Skype) Doorlezen Vragen stellen indien nodig Codeigniter instaleren (Config aanpassen) Opzoeken wat nodig is Models aanmaken Controllers/views aanmaken Resultaat controleren/testen Eventueel nog aanpassingen doen Inbouwen in bestaande website Testen
Voor Jingjobs:
Fout zoeken door te testen Kijken waar de fout zich bevindt (welke bestanden) Oplossen Testen Eventueel verder oplossen Volgende fout zoeken
14
2.5
Primaire doelgroep en andere stakeholders
Voor de Wordpress-sites zijn natuurlijk de primaire doelgroepen de klant zelf en diens klanten en/of gebruikers. Terwijl de PHP-applicaties meestal enkel voor de klant zijn. Voor ‘Jingjobs’ is dit veel duidelijker. Je hebt:
2.6
De klant (eigenaar website) Werkzoekenden Werkgevers die actief zijn op de website Studenten die een stage in China willen
Informatie en rapportering
Mijn begeleidende docent, Miranda Decabooter houd ik op de hoogte via e-mail. Ik stuur haar wekelijks een e-mail met daarin mijn opgedane ervaringen van die stageweek. Ik informeer mijn stagebegeleider, Teodora Lazarova steeds wanneer ik een bepaald onderdeel heb afgewerkt of wanneer ik met vragen zit. Op maandagochtend is er altijd een korte werkvergadering/briefing om van elkaar te weten te komen aan welke projecten er wordt gewerkt.
15
3
GEBRUIKTE TOOLS
In dit hoofdstuk beschrijf ik de tools die ik tijdens mijn stage heb gebruikt. WordPress heb ik veel gebruikt om websites in te maken. Het bedrijf heeft hiervoor gekozen omdat de kennis van IT niet zo groot is en voor WordPress is dit geen vereiste, Parate kennis van CSS en HTML zijn zeker een pluspunt. Om foto’s en afbeeldingen op WordPress-websites te bewerken, maakte ik gebruik van Adobe PhotoShop. Verder gebruikte ik Netbeans als programma om de PHP-applicaties en de ‘JingJobs’website in te maken. De MySQL-database werd beheerd in phpMyAdmin. Eerst werden de applicaties lokaal op mijn pc getest via WampServer om deze later via FileZilla op de server te plaatsen en op het internet te testen. Via Skype en Asana gebeurde de communicatie binnen het bedrijf. Om taken te verdelen werd Asana gebruikt en om snel te communiceren tussen beide kantoren werd gebruik gemaakt van Skype.
3.1
WordPress WordPress is een website software. Het wordt veel gebruikt om websites en webblogs te creëren. De software is geschreven in PHP en is ontwikkeld door Mark Mullenweg samen met een grote groep ontwikkelaars die hem hierin steunen.
Figuur 4: WordPress logo
WordPress is een CMS of content managementsysteem. Dit wil zeggen dat de gebruiker die geen technische kennis heeft toch op een eenvoudige manier aanvullingen en/of wijzigingen kan aanbrengen aan de
inhoud van de website. WordPress kan op elk platform gebruikt worden waar PHP en MySQL op werken. 3.1.1
Werking
Wanneer u start, kiest u een WordPress-thema. Dit is ofwel gratis ofwel betalend. Of u begint met een zelfgemaakte template. Via CSS kan je de stijl aanpassen naar de stijl die je zelf wilt. WordPress werkt via drie functies:
Templates: deze zorgen voor het uiterlijk van de website. Er kunnen meerdere templates op één WordPress-website geïnstalleerd worden. Plug-ins: ze geven meer mogelijkheden aan gebruikers, zoals bijvoorbeeld om een favicon te plaatsen of om een foto-slider te gebruiken. Ze zijn betalend of gratis. Widgets: dit zijn kleine modules die op een WordPress-installatie gebruikt kunnen worden door ze via een drag-and-drop-systeem op de website te plaatsen. Voorbeelden hiervan zijn een zoekbalk, menubalk, slideshow, footer.
16
3.2
PhotoShop PhotoShop is een grafisch programma van Adobe dat gemaakt is om foto’s en ander digitaal beeldmateriaal te bewerken. Photoshop verscheen in februari 1990. Het programma richt zich op de professionele gerbuikers. De andere kunnen terecht bij Adobe PhotoShop Elements. Dit is gratis online te gebruiken.
Het is beschikbaar voor Windows en Mac OS X. Gebruikers van Linux en Unix kunnen via CodeWeavers' CrossOver, Wine de Windowsversie toch onder het X Window System laten draaien. Figuur 5: PhotoShop logo
3.3
Netbeans NetBeans is een IDE of integrated development environment, makkelijker gezegd een programeer omgeving. Vooral bedoeld om te programmeren in Java, PHP, C/C++ en HTML5. Het kan ook gebruikt worden als application platform framework voor Java desktop applications.
Figuur 6: NetBeans logo
NetBeans is geschreven in Java en gebruikt worden op de volgende besturingssystemen: Windows, OS X, Linux, Solaris en andere platvormen die gebruik maken van een JVM of Java Virtual Machine.
3.4
phpMyAdmin phpMyAdmin is een gratis web-applicatie geschreven in PHP. Je kan er MySQL-databases in beheren en raadplegen via de browser. Het is beschikbaar in 72 talen.
Je kan er via een user interface werken. De meeste zaken kunnen gedaan worden via de user interface. Enkele voorbeelden beheren van databases, tabellen, kolommen, Figuur 7: phpMyAdmin logo relaties, gebruikers, … maar je kan ook altijd via een SQL statement werken. Tobias Ratschiller is in 1998 begonnen aan phpMyAdmin. Door een gebrek aan tijd heeft hij het project in 2001 uit handen gegeven en sindsdien staat het geregistreerd in SourceForge.net.
3.5
WampServer WampServer is een web ontwikkelomgeving voor Windows. Je kan het gebruiken voor web-applicaties met Apache2 en PHP. Voor de web-applicaties kan je een MySQL database gebruiken. De database kan je managen via phpMyAdmin.
Figuur 8: WampServer logo
Zo kan je de zelf gemaakte PHP web-applicaties testen zonder dat je over webruimte beschikt.
17
3.6
FileZilla FileZilla is een FTP-client (File Transfer Protocol) en het is opensource. Met FileZilla kan je meerdere verbindingen gebruiken om bestanden naar een FTP-server te versturen en op te halen. Zo kan je sneller upen downloaden.
FileZilla is in 2001 opgericht door Tim Kosse en twee medestudenten. Ze hebben het programma opensource gemaakt Figuur 9: FileZilla logo omdat er veel FTP-clients beschikbaar waren en zo de kans op commercieel succes eerder laag was. Het is gratis te downloaden, en beschikbaar voor Windows, Linux, Mac en FreeBSD. FileZilla is geschreven in C++.
3.7
Skype
Figuur 10: Skype logo
Skype is een VoIP (Voice over IP) programma. Dit wil zeggen dat Skype je stem via het internet verstuurd. Het kan gebruikt worden om te chatten. Het wordt vooral gebruikt om videogesprekken of telefoongesprekken te voeren. Je kan ook mobiele nummers bellen, maar hiervoor moet je Skypetegoed kopen. Skype is een programma van Microsoft en is gratis
verkrijgbaar. Het is geschreven in de programmeertaal Delphi, Objective C en C++. Het is beschikbaar voor Windows, OS X, Linux, , iOS, Android en Windows Phone.
3.8
Asana De webapplicatie Asana is ontwikkeld voor de communicatie van bedrijven of groepen te verbeteren die veel in team werken.
Figuur 11: Asana logo
Het is opgericht door Dustin Moskovits en Justin Rosenstein, medeoprichter en werknemer van Facebook.
Met Asana kunnen gebruikers elkaar taken geven en elkaar opvolgen in deze taken. Als een gebruiker een taak krijgt wordt er ook telkens een e-mail verstuurd naar het aan Asana gekoppelde e-mail adres. Er is ook een zeer handig overzicht van taken per project. Het is een handig programma om alles overzichtelijk weer te geven en een idee te krijgen van wie aan welk project werkt.
18
4
WORDPRESS WEBSITES
Een deel van mijn stage was aanpassingen maken aan websites gemaakt in WordPress. Ik had er mijn kennis van CSS, HTML en PhotoShop voor nodig om deze opdrachten tot een goed einde te brengen. Ik heb de klanten ook een demo van de administrator gegeven, zodat ze zelf aan de slag konden. Hieronder ga ik delen van websites tonen en zo een beeld proberen te geven over wat mijn taak was.
4.1
WordPress voorbeelden
4.1.1
Basis instellingen Als voorbeeld neem ik hier de website: http://jingjobs.com/news. De homepage is geen aparte pagina, maar ze wordt gegenereerd door WordPress aan de hand van instellingen die de administrator heeft gemaakt. Je ziet dat je elk deel van de website zelf kan aanpassen via de instellingen. De hele homepage wordt samengesteld door deze instellingen zonder dat er een aparte pagina voor bestaat. Basiskleuren en lettertypen worden ook in dit deel ingesteld. Hieronder een voorbeeld van het menu dat samengesteld kan worden door via drag en drop pagina’s toe te voegen.
Figuur 12: WordPress menu opmaak
Deze functionaliteiten zijn zeer handig als je een basis WordPress-website wil maken zonder dat er teveel moet veranderd worden aan de begintemplate. Figuur 13: WordPress thema menu
19
4.1.2
Page Een page of pagina is een hoeveelheid content die kan bestaan uit tekst, video of foto. Hiernaast zie je een voorbeeld van een pagina waarin tekst en foto’s staan. Hieronder vind je dezelfde page, maar hoe ze wordt opgesteld in WordPress.
Figuur 14: Wordpress pagina
De opmaak kan op eenzelfde manier als de opmaak van een Microsoft Word-document. Je voegt tekst toe en via de tools bovenaan de pagina kan je deze tekst opmaken. Je hebt ook tools om de pagina te verdelen in verschillende stukken. Hier kan je een voorbeeld zien van hoe de pagina verdeeld wordt in vier delen. Daarvoor dient het stukje code bij de foto. “[one_fourth last=”no”][/one_fourth]” Als je deze code vier maal achter elkaar plaatst, wordt de inhoud naast elkaar weergegeven. Bij de laatste code moet de “last” op yes gezet worden.
Figuur 15: WordPress instelling
Onderaan de pagina vind je instellingen om de page op te maken. Zoals achtergrond, titels, … Hierboven kan je zien hoe het titeldeel van de pagina op 300px hoog wordt gezet en dat er een achtergrondafbeelding is. Bij een pagina is het de bedoeling dat de inhoud niet veranderd wordt. Hiervoor heeft WordPress de post.
20
4.1.3
Posts Er hoeft niet steeds een pagina aangemaakt te worden. In WordPress bestaan ook posts. De verschillen met een pagina zijn dat er een datum aan een post hangt. Er kunnen tags en categorieën aan toegevoegd worden en ze hebben een image. Hiernaast ziet u een deel van een homepage waar een categorie wordt weergegeven. Van deze categorie zijn de vijf laatste posts. Via een link kan je naar de volledige post gaan. De tekstopmaak is net dezelfde als bij een page.
In de back end kan je de categorieën selecteren, waarvan je wilt dat ze bij de post horen. Je kan er meerdere selecteren en per categorie nog onderverdelen in subcategorie. Dit is zeer handig om bijvoorbeeld voor een menu te gebruiken. Je gebruikt dan geen pages in het menu, maar categorieën. Je voegt een categorie toe door ze aan te vinken.
Tags zijn weer zeer handig wanneer je een zoekfunctie gebruikt in je website. Je voegt tags toe aan de post en zo kan de gebruiker gaan zoeken op posts die bij een tag horen. Figuur 16: WordPress categorie
4.2
CSS en HTML voorbeelden
Figuur 17: WordPress thema
Figuur 18: WordPress aangepast thema
Hierboven zie je een voorbeeld van een website die vertrokken is van een thema genaamd Sahifa. Zoals je kan zien is de basis hetzelfde als de rechtse website maar via CSS kan je zelf toch veel aanpassen zodat de website er helemaal anders uitziet.
21
Figuur 19: Touchdown website
Naast het uitgangspunt van een template, is het ook mogelijk om zelf een template te bouwen. Net zoals bij een HTML-website is er nog geen CSS en moet je deze zelf schrijven. Hierboven vind je een voorbeeld van een eigen gemaakte template waar de CSS en de HTML zelf geschreven is. De extra moeilijkheid hier was dat de website in het Chinees was en dat het daarom niet altijd even duidelijk was aan welk deel ik aan het werken was. Hiernaast zie je de inhoud van de tabel in het Chinees.
Figuur 20: Touchdown CSS
4.3
PhotoShop voorbeelden
Figuur 21: Photoshop voorbeeld
op foto’s.
Figuur 22: Photoshop voorbeeld 2
De juiste hoogte en breedte geven aan afbeeldingen gebeurde in PhotoShop. Ook de grootte om de afbeeldingen te veranderen naar de juiste websitegrootte, gebeurde in het programma van Adobe. Verder plaatste ik ook tekst
22
5
KLEINE PHP PROJECTEN
5.1
Project Export
Export is een zeer klein project dat bedoeld is om later gebruikt te worden in andere grotere projecten. De opdracht was een web-applicatie te maken, die data uit de database haalt en nadien de data toont op het scherm van de gebruiker. De gebruiker kan via een klik op een knop, de getoonde data downloaden in een Microsoft Office Excel document. Er is mij gevraagd dit project te maken in het CodeIgniter PHP framework. Dit project was meer bedoeld om mijn kennis van CodeIgniter en PHP te testen. 5.1.1
Database
Er werd gebruik gemaakt van een eenvoudige database dieuitsluitend bestaat uit teksvelden en een numeriek veld dat dient als ID. Dit numeriek veld is dan ook de primaire sleutel.
Figuur 23: Tabel export
Hieronder vindt je de data waarmee de tabel opgevuld is.
Figuur 24: Tabel export met testgegevens
23
5.1.2
Applicatie Hiernaast een voorbeeld waarop je kan zien hoe de data aan de gebruiker getoond worden. Daaronder vind je de knop om data te kunnen converteren naar een Excel-document.
Figuur 25: Voorbeeld pagina
Om data te kunnen tonen moeten we deze eerst uit de database halen. In CodeIgniter doet u dit via een model. Zoals je hiernaast kan zien is dit een zeer makkelijke code. Met “$this->dbFiguur 26: Functie getRows >get(‘test’);” haalt u de hele tabel “test” uit de database. Daarna geeft u via een return het resultaat van de query terug, die via CodeIgniter gemaakt is.
Figuur 27: Functie index
De functie “getRows” wordt gebruikt in de controller die de pagina’s en de database verbind. In de functie “index” zie je dat eerst het model wordt geladen en daarna de functie “getRows” wordt opgeroepen.
Vervolgens wordt deze info naar de test pagina gestuurd. Op de pagina wordt de data doormiddel van een foreach weergegeven. Onderaan zie je een formulier met daarin enkel een knop. Hiermee kan je doorgaan naar een andere functie in de controller “welcome”, namelijk de functie “toExcelAll”. Figuur 28: HTML pagina
24
Deze functie haalt opnieuw de data uit de database en stuurt deze door naar de pagina “excel_view”. Figuur 29: Functie toExcelAll
De pagina “excel_view” is net dezelfde als de pagina “test” met als verschil, een stukje PHP Figuur 30: PHP pagina code dat ervoor zorgt dat dit niet in een webpagina maar in een Excel document weergegeven wordt. Dit Excel bestand begint automatisch te downloaden vanaf het moment dat er op de knop geklikt is.
25
5.2
Visual statistics
Dit project is bedoeld om de statistieken van de topics en pagina’s in een website grafisch weer te geven. De statistieken moesten getoond worden in grafieken en een tabel. Ook dit project wordt in CodeIgniter gemaakt. 5.2.1
Database
De database heb ik gekregen. Ik heb deze niet zelf moeten aanmaken of bedenken. Er is maar één tabel en in deze tabel bevinden zich de gegevens van zowel topics als van pagina’s.
Figuur 31: Tabel statistics
Het veld ‘stat_name’ dat de naam van de statistiek wil voorstellen is een tekst veld. De velden ‘last_views’, ‘last_downloads’, ‘last_comments’ hebben een datum als inhoud. Alle andere velden zijn van het type integer.
Hier zie je dat er gegevens van zowel topics als van pagina’s in de database staan. Bij een topic begint de ‘stat_name’ met topic en een pagina heeft een naam.
Figuur 32: Inhoud tabel statistics
26
5.2.2
applicatie Eerst haal ik alle gegevens uit de database. In een tabel toon ik de gegevens die niet in de grafiek moeten. Via tabs kan je kiezen tussen de gegevens over topics of de gegevens over pagina’s.
Figuur 33: Statistieken tabel over topics
De data van het type integer moet getoond worden in een grafiek. Hiernaast zie je een voorbeeld van een grafiek waar gegevens van hoeveel keer pagina’s bekeken zijn worden weergegeven. Voor deze grafieken te maken heb ik gekozen om gebruik te maken van Google Charts. Een gratis en handige tool om grafieken weer te geven in een website. Figuur 34: Voorbeeld grafiek
Eerst met behulp van Ajax de gegevens van de pagina of topic uit de database gaan halen. Figuur 35: Ajax functie
Ik heb niet alle gegevens van een tabel nodig. Ik haal met een aangepaste query de juiste gegevens uit de database op.
Figuur 36: Functie getAllPagesTotalViews
Via een functie in de controller haal ik bovenstaande functie uit het model op. Google Charts wil de data in een speciaal formaat om deze dan in een grafiek te verwerken. Als de data in het juist formaat zijn omgezet dan geven we deze weer in een json formaat.
27
Tot slot geef ik de data aan een functie van Google Charts. Dit gebeurt in Javascript. Ik geef opties op, deze dienen om de grafiek het juiste uitzicht te geven. Daarna zeg ik in welke div de grafiek moet getekend worden. Figuur 37: Grafiek opties
Dit wordt telkens voor elke grafiek herhaald.
28
6
ANALYSE VAN DE ‘JINGJOBS’-DATABASE
In dit onderdeel leg ik uit hoe de database momenteel is opgebouwd. Ik toon de zwaktes aan en de zaken die anders of beter kunnen. Je vindt hier ook op welke manier ik de database wil optimaliseren. Het is de bedoeling om je te laten zien hoe slecht de database opgebouwd is en hoe belangrijk het is om dit op voorhand goed te doen.
6.1
Huidige database
In het begin van de opdracht bestudeerde ik de database grondig. Ik had toen reeds enkele bedenkingen bij de database. Later heb ik het datamodel gevraagd. Toen ik nog meer gebruik maakte van de database, vond ik er zaken in terug die er heel abnormaal uitzagen. Later is er mij verteld dat er geen datamodel uitgewerkt werd voor de database. Ik heb de query van de database in MySQL Workbench gebruikt en hieronder vindt u het resultaat.
Figuur 38: Oude database ‘JingJobs’
29
Het eerste wat onmiddellijk opvalt, is dat er geen relaties aangemaakt zijn. Het zijn stuk voor stuk losstaande tabellen. Twee tabellen worden verbonden door via code een integerveld op te vullen met de ID van een andere tabel. Het gevaar bestaat erin dat wanneer er bijvoorbeeld een programmeerfout gemaakt wordt, er een hele tabel kan verwijderd worden zonder dat er een foutmelding of waarschuwing tevoorschijn komt. Als je de database verder gaat bekijken, is er iets wat je niet kan zien in het model. Er zijn tabellen gemaakt die gewoonweg niet gebruikt worden. Ongebruikt tabellen:
Article Category City Country Company_social User_social
De tabellen “article” en “category” zijn ooit verschenen op een pagina over ‘JingJobs’. Later werd deze pagina vervangen door een WordPress-website. User_social werd uitgeprobeerd, maar werd uiteindelijk niet lang gebruikt. In de tabel bevinden zich maar enkele gegevens. Tot slot zijn de tabellen: “company_social”, “city” en “country” aangemaakt maar nooit gebruikt.
Figuur 39: Voorbeeld database ‘JingJobs’
30
Een volgend probleem is dat tabellen dezelfde gegevens bevatten. Zo bevatten de tabellen “user_industry_position” en “job_industry_position” dezelfde inhoud. Dit geldt ook voor de tabel “tech_skills” die samen met “user_professional_skills” en het TEXT veld “preferred_technical_skills” in de tabel “job” werd geïntegreerd. Ook de tabel “personal_skills” en “user_personal_skills” samen met het TEXT veld “preferred_personal_skills” hebben een gemeenschappelijke inhoud en kunnen vervangen worden door één goede tabel. Job
Personal_skills
User_personal_skills
Figuur 40: Tabellen met dezelfde inhoud
Nog iets dat absoluut niet correct is, is dat er één tabel gebruikt wordt om gegevens in te bewaren die eigenlijk in twee tabellen horen. Hiernaast zie je de tabel “industry”. De eerste 36 gegevens zijn de industrieën. Vervolgens bevat de tabel jobs die bij een industrie horen. Je ziet hier dat de industrie met naam “General” en id 1 een parent heeft met waarde nul. Hieronder vind je “analyst” met id 37 die als parent de waarde “General” heeft. Deze waarde verwijst naar de “General” met id 1.
Figuur 41: Tabel industry deel 1
Indien er industriën nodig zijn in de webapplicatie gaan ze alle gegevens ophalen waarvan de parentwaarde nul is. En als bijvoorbeeld de jobs met naam “General” nodig zijn halen ze alles op waar de parent de waarde “General” heeft.
Figuur 42: Tabel industry deel 2
31
Naast alle vorige fouten zijn er ook nog veel ongebruikte of dubbel gebruikte kolommen. Er is voordien onvoldoende nagedacht over de opbouw van de database. Het bewijs hiervan is, dat er tijdens het moment waarop de webapplicatie actief is, tabellen en velden worden toegevoegd aan de database. Ook het feit dat er geen datamodel is, laat zien dat er in het begin van het project zo goed als geen analyse gemaakt is. Voorbeelden hiervan zijn de tabellen “support” en “support_type”, deze zijn de laatst toegevoegde tabellen. Dit is niet het grootste probleem of fout. De klant heeft nog maar net beslist dat de applicatie voorzien moest zijn van een supportfunctie. Voordien werd er in de tabel “interview” de kolom “is_deleted” verwijderd. Deze werd vervangen door een volledig nieuwe tabel die als naam “interview_status” meekreeg. Eerst had de jobseeker enkel de mogelijkheid om een interview te accepteren of te weigeren. Wanneer het interview geweigerd werd, was het niet meer zichtbaar. Een interview kan nu vier statussen hebben.
Figuur 43: Tabel interview_status
Pending: Het interview is aangevraagd maar is niet geaccepteerd of is niet geweigerd. Accepted: Wanneer het interview geaccepteerd is. Declined: Wanneer het interview geweigerd is. Deleted: Wanneer het interview verwijderd is.
32
6.2
Hoe ziet de database er nu concreet voor mij uit
Ook al zal dit datamodel hoogstwaarschijnlijk nooit gebruikt worden, toch heeft het me niet tegengehouden om een verbetering aan te brengen aan de huidige database. De hoofdprogrammeur en de baas van het bedrijf vonden het een goed idee. Ze vonden het zeker interessant om dit te bekijken. Bovendien was dit voor hen ook nog leerrijk naar toekomstige projecten toe.
Figuur 44: Nieuw database model
Omdat deze tabel in zijn totaliteit weinigzeggend is, ga ik de verschillende onderdelen van het model opsplitsen en tonen. In de database zijn er drie heel belangrijke tabellen aanwezig, namelijk “jobseeker”, “job” en “user”.
33
6.2.1
User deel
Figuur 45: Database model user deel
De tabel “admin” is overbodig gemaakt door de tabel “user” uit te breiden. Een gebruiker beschikt nu over de tabel “user_type”, daarin wordt bijgehouden of hij/zij een “admin”, “jobseeker” of “company” is. Daarnaast zijn er nog de tabellen “jobseeker” en “company” die de info bijhouden die verschillend is. Het verschil van info hangt af van welke rol de gebruiker heeft. Door de tabellen “country” en “city” te gebruiken voorkom je dubbele gegevens in de tabel “user”. In de tabel “user_status” wordt bijgehouden wanneer de gebruiker het laatst online was en of hij momenteel wel/niet online is. Een gebruiker kan één of meerdere talen hebben. Een taal bestaat uit de naam van de taal en het niveau dat de gebruiker van die taal machtig is. De tabel “inbox” is de chat/e-mail van de web-applicatie. Een gebruiker kan naar een andere gebruiker een bericht verzenden.
34
6.2.2
Job deel
Figuur 46: Database model job deel
Een job behoort altijd tot company. Een job heeft ook een land, provincie en stad. Een industry_position van een job betekent in welke sector de job zich bevindt en in welke bedrijfstak. Ik verduidelijk dit even met een voorbeeld: ziekenzorg is de sector en een dokter is een tak binnen de ziekenzorg. Job_status dient voor de administrator, als een job aangevraagd wordt, is deze niet zichtbaar. De administrator kan deze zichtbaar maken of niet toelaten. De tabel “Job_apply” is nodig wanneer een werkzoekende zich wil aanbieden voor een job en de tabel “job_bookmark” is nodig wanneer hij/zij een job aan zijn favorieten wil toevoegen. Tot een job kunnen ook één of meerdere talen behoren. Dit zijn de talen die de werkzoekende machtig moet zijn om de job te kunnen uitoefenen. De tabel “Job_language” wordt net hetzelfde gecreëerd als de tabel “user_language”. Een job kan ook technische en persoonlijke kwaliteiten hebben. Als een job er één of meerdere heeft wilt dat zeggen dat de werkzoekende deze ook moet hebben.
35
6.2.3
Jobseeker deel
Figuur 47: Database model jobseeker deel
Een werkzoekende kan net zoals een job ook een bedrijf aan zijn favorieten toevoegen. Dit wordt bijgehouden in de tabel “company_bookmark”. Een werkzoekende kan persoonlijke of technische kwaliteiten hebben. Deze kunnen nodig zijn om voor een bepaalde job in aanmerking te komen of om meer in de kijker te staan bij bedrijven. Een matchscore wordt berekend door verschillende factoren tussen de job en de werkzoekende. In de tabel worden enkel numerieke waarden bijgehouden die daarna in de code worden omgezet in een percentage. Een werkzoekende kan gedurende zijn hele carrière enkele projecten hebben gemaakt. Ze worden bijgehouden in de tabel ‘portfolio_project’. Een werkzoekende kan ook opleidingen gevolgd hebben. Ze staan in de tabel ‘jobseeker_education’. Een werkzoekende kan al gewerkt hebben of hij kan op dit moment ook aan het werk zijn. Al deze gegevens worden bijgehouden in de tabel ‘jobseeker_work_history’. Deze bestaat uit een industrie en een positie binnen de industrie. Een bedrijf kan zich in een industrie bevinden. Bij een werkzoekende wordt weergegeven hoeveel keer hij bekeken werd door een bedrijf. Al deze gegevens worden bijgehouden in de tabel ‘company_view’. Een werkzoekende kan een interview hebben over een bepaalde job en dit interview heeft een status. Een bedrijf kan een lijst hebben met gewilde werkzoekenden die te vinden zijn in de tabel ‘company_candidate’.
36
7
JINGJOBS
‘JingJobs’ is een web-applicatie die gemaakt werd voor mensen die een stage of job willen uitoefenen in China. De applicatie heeft een eigen chat-functie. Ze is gemaakt met de bedoeling dat de gebruikers geen andere programma’s hoeven te gebruiken. Het programma werd eerst opgestart bij Redstar zelf. Het bedrijf kwam al snel tot de vaststelling dat het niet in staat was om dit project tot een goed einde te brengen. Dit om twee redenen: een gebrek aan technische know-how en een tekort aan personeel. Daarom hebben ze het project geoutsourcet aan een Chinees bedrijf. De communicatie verliep stroef. Met als gevolg dat het programma niet volledig was en vol fouten zat. Redstar zocht daarom twee IT-studenten om deze applicatie verder te ontwikkelen. Er werden ook nog twee Indische freelancers ingehuurd om het ‘JingJobs’-project mee tot een goed einde te brengen. In het volgende hoofdstuk laat ik jullie zien hoe we aan de applicatie gewerkt hebben.
7.1
Wachtwoord aanpassen
Er was nog geen functie aanwezig in de applicatie waarmee de gebruikers hun wachtwoord konden aanpassen. Er werd mij gevraagd deze toe te voegen en tevens enkele aanpassingen te maken in verband met de lay-out.
Figuur 48: Wachtwoord aanpassen ‘JingJobs’
Zoals je kan zien is er nu een knop rechts onderaan de pagina om het paswoord te wijzigen. Ik heb deze knop zelf toegevoegd. Daarnaast kan je links bovenaan “View Profile” en “Find a Job” zien. Ze stonden eerst onderaan de pagina. Ze zijn echter zo belangrijk, dat het beter was ze altijd zichtbaar te maken. Ik heb ze verplaatst naar het linkse menu dat altijd mee opschuift. Er verschijnt een pop-up venster nadat er op de knop “Change Password” geklikt word. Hier moet de gebruiker dan het oude paswoord, het nieuwe paswoord en een bevestiging van het nieuwe paswoord ingeven. Als deze goed zijn krijgt de gebruiker een bevestiging dat zijn paswoord aangepast is.
Figuur 49: Wijzig paswoord
37
Als de gebruiker niet de juiste informatie invult, krijgt hij een foutmelding te lezen. Dit gebeurt wanneer er niets werd ingevuld of wanneer er een foutief of verouderd paswoord werd ingegeven of wanneer het nieuwe paswoord en de bevestiging ervan niet overeenkomen. Figuur 50: Foutmelding
Hieronder zie je de “change password” knop in code.
Als er op de knop geklikt word, ga je verder naar een javascript functie. Eerst zie je hoe de foutenafhandeling wordt gedaan. Eerst wordt de error op 0 gezet. Vervolgens worden de waarden van de paswoordvelden opgehaald.
Figuur 51: Error validatie
Vervolgens zie je dat het nieuwe en het bevestigingspaswoord vergeleken worden met een if. Als dit verkeerd is, wordt de error op één gezet en verschijnt de foutmelding. Dit gebeurt voor alle fouten op dezelfde manier. Als de error nul is, verstuur je via Ajax alles naar de controller. Als alles goed gaat krijg je een melding dat je paswoord veranderd is. Anders krijg je een foutmelding waarin te lezen valt dat het oude paswoord foutief is.
Figuur 52: Ajax functie
Eerst worden de models geladen. Daarna haal je de user uit de sessie. Je vraagt het oude en nieuwe paswoord op van de pagina. Je vergelijkt het oude opgevraagde paswoord met het paswoord dat in de database staat. Als dit goed is dan doe je de update in het model.
Figuur 53: Changepass functie
De update paswoord functie uit het model. Het paswoord wordt Figuur 54: Functie updatePassword
38
gehasht en in de database verandert
7.2
scrol lader
De jobs werden allemaal getoond op dezelfde pagina en ze werden in één keer allemaal geladen. Er was geen scrol lader of paging aanwezig. Momenteel was dit nog geen probleem omdat er niet veel jobs in de database stonden. Later kon dit wel een probleem gaan vormen. Er moest naar een oplossing gezocht worden om dit probleem te voorkomen. Er werd geopteerd om een scrol-lader toe te passen. Elke keer dat er naar beneden gescrold wordt, verschijnen er meer jobs. Hier zie je een voorbeeld van de scrol lader. Bij het laden van de pagina verschijnen er tien jobs. Als je tot beneden scrolt worden er tien nieuwe jobs geladen en getoond.
Figuur 55: Scrol lader voorbeeld
Hieronder gebruik ik een verkorte code omdat dit handiger is om aan te tonen hoe de scrol lader werkt. Eerst halen we de eerste vijf jobs uit de database en tonen we de jobs in de ‘scroller’ pagina.
Figuur 56: Functie index scrol lader
Met de javascript functie ‘lastPostFunc’ tellen we het aantal jobs op de pagina en vervolgens halen we de volgende reeks van jobs op uit de database. Deze jobs worden toegevoegd aan de pagina. Deze functie staat onderaan de pagina waar de jobs worden getoond.
Figuur 57: Functie lastPostFunc
Als er gescrold is stuurt de pagina je verder naar de functie ‘ajax_list’. Deze functie haalt vijf nieuwe jobs op uit de database en stuurt ze naar de pagina. Figuur 58: Functie ajax_list
39
Hier zie je de manier waarop telkens de jobs uit de database worden gehaald. Er wordt een aantal opgegeven en hoeveel jobs er reeds opgevraagd zijn.
Figuur 59: Functie getAll
7.3
Verbetering paswoord security
De paswoorden waren allemaal onvoldoende beveiligd. Er werd gebruikt gemaakt van een md5 om de paswoorden te hashen. Dit ziet er op het eerste zicht voldoende uit, maar als er echter ingebroken wordt in de database zijn er zeer snelle manieren om de paswoorden te ontrafelen. Hier moest dus ook een beter systeem voor worden uitgedokterd. Om dit te doen heb ik gekozen om na md5 nog een keer met sha3 de paswoorden te hashen. Hiernaast kan je zien hoe ik alle gebruikers uit de database ga halen.
Figuur 60: Functie getAllUsers
De functie “getAllUsers” wordt gebruikt in de functie die de paswoorden gaat veranderen. Eerst haal ik alle gebruikers op, nadien haal ik per gebruiker, het paswoord van de gebruiker op en voer ik er een sha3 op uit. Tot slot sturen we het nieuwe paswoord en de gebruiker naar het model Figuur 61: Functie changeAllPasswords met de functie “updatePassword”. Deze functie is reeds besproken bij wachtwoord aanpassen. Omdat de website online staat en gebruikt word is er gekozen om te wachten met de paswoorden aan te passen. Binnenkort zijn er grote veranderingen gepland en dan wordt de website offline gehaald. Het ideale moment om dit uit te voeren.
40
BESLUIT…. Redstar heeft relatief veel ‘kleine’ klanten die enkel WordPress-websites nodig hebben. Het bedrijf wil echter groeien in de websitesector en daarom nemen ze nu ook PHPprojecten aan. Ik heb in die drie maanden ontzettend veel bijgeleerd van hoe het eraan toegaat in de echte bedrijfswereld. Het was bovendien interessant om vast te stellen hoe Redstar zelf lessen trekt uit het leerproces waarin het bedrijf zich momenteel bevindt. Omdat er in Beijing geen IT-ers in het bedrijf werkten, heb ik zelf moeten leren om fouten op te sporen en indien nodig deze te verbeteren. Bovendien was er natuurlijk ook nog de taalbarrière die er voor zorgde dat het niet altijd even makkelijk was om te werken. Wanneer men niet begreep wat ik hen vroeg, besloot ik zelf maar naar een geschikte oplossing te zoeken. Door de opgedane ervaring tijdens deze stage vind ik van mijzelf dat ik voldoende kennis heb om te weten hoe het eraan toegaat in een de echte bedrijfswereld. Ik moet eerlijk bekennen dat mijn kennis van hoe een website op te maken nog vrij beperkt is. Daarom heb ik ook besloten om mij in deze boeiende materie verder te verdiepen en alzo mijn niveau proberen op te krikken. Tijdens de stage heb ik meermaals de vraag gekregen om na de stage te blijven werken voor Redstar. Deze jobaanbieding is echter een teken dat ze bij Redstar echt wel tevreden waren over mijn inzet en het geleverde werk. Momenteel voel ik mij echter nog te jong en onervaren om deze grote stap nu al te zetten. Het zou een iets te grote stap zijn om mijn familie en vriendenkring hiervoor nu al op te geven. In de verre toekomst sluit ik een jobaanbieding uit China echter niet uit.
41
LITERATUURLIJST WordPress, http://wordpress.org/ (geopend 06 mei, 2014). Netbeans, https://netbeans.org/about/ (geopend 06 mei, 2014). PhotoShop, http://www.webdesignerdepot.com/2010/02/20-years-of-adobephotoshop/ (geopend 06 mei, 2014). PhotoShop, http://www.designbyfire.com/pdfs/history_of_photoshop.pdf (geopend 06 mei, 2014). Asana, https://app.asana.com/ (geopend 07 mei, 2014). Asana, https://asana.com/ (geopend 07 mei, 2014). Skype, http://www.skype.com/nl/ (geopend 09 mei, 2014). FileZilla, https://filezilla-project.org (geopend 09 mei, 2014). FileZilla, http://web.archive.org/web/20080423060025/http://filezilla.sourceforge.net/document ation/history.htm (geopend 09 mei, 2014). WampServer, http://www.wampserver.com/en/ (geopend 09 mei, 2014). phpMyAdmin, http://www.phpmyadmin.net/home_page/index.php (geopend 09 mei, 2014). .
