Web ontwikkeling en OpenVPN oplossing voor Mobile Marketing nodes

Transcriptie

1 Web ontwikkeling en OpenVPN oplossing voor Mobile Marketing nodes Project aangeboden door Steph Decavele voor het behalen van de graad van Bachelor in de New Media and Communication Technology Academiejaar Stageplaats : XD.it Stagementor : Xavier Duthoo Stagebegeleider : Tijl Deneut

2

3 Voorwoord Deze bachelorproef werd geschreven door Steph Decavele, een NMCT (New Media and Communication Technology) - student aan de Hogeschool West-Vlaanderen (Kortrijk). Het eerste jaar van de opleiding gaat er vooral om verschillende aspecten van IT te bekijken en aan te leren zoals programmeren, web ontwikkeling en netwerkinfrastructuur aangevuld met een basis wiskunde. Hierna gaat het tweede opleidingsjaar al wat meer in detail en het derde jaar heeft de student de volledige mogelijkheid om z n eigen curriculum te bepalen. Door deze specifieke aanpak worden studenten eerst een stevige basis aangebracht alvorens zich te kunnen specialiseren in de aspecten waar hun voorkeur zich bevindt. Zoals eerder aangegeven bestaat de IT wereld uit verschillende aspecten. Zelf ben ik vooral geïnteresseerd in netwerkinfrastructuur, systeembeheer en front-end ontwikkeling. Gedurende mijn stage bij XD.it kreeg ik de kans om mij verder te kunnen ontwikkelen in deze interesses. Daarom zal mijn thesis zich toespitsen op netwerkinfrastructuur (OpenVPN oplossing) alsook front-end ontwikkeling. Deze thesis is bedoeld voor IT professionals die interesse hebben in het onderzoeken of implementeren van een OpenVPN oplossing. Hiernaast is er ook een overzicht hoe een responsive website te ontwikkelen via een eigen theme in WordPress maar ook het gebruik van Google, Facebook en Twitter API. Graag wil ik mij richten tot mijn stagementor Xavier Duthoo en zijn vennoot David Lesage, beiden oprichters van het bedrijf XD.it te Brugge, om me de kans te geven mijn stage bij hen uit te voeren. Vooral de intensieve samenwerking met hen en de collega s is iets wat ik zeker kon appreciëren. Daarnaast zou ik ook mijn stagebegeleider Tijl Deneut willen bedanken voor de opvolging en het adviseren gedurende de stage.

4 1 INHOUDSTAFEL Lijst met figuren.. Lijst met afkortingen 1 Inleiding Achtergrond informatie Probleem definitie Onderzoeksvraag Onderzoeksmethode Virtual Private Network (VPN) Definitie VPN standaarden IPsec SSL Beveiliging mechanismes Voordelen VPN OpenVPN Wat is OpenVPN Voordelen OpenVPN Actualiteit: OpenVPN service kwetsbaar door the Heartbleed OpenSSL bug The setup Zentyal Clear OS IPFire pfsense Vergelijking OpenVPN mogelijkheden Minimum Hardware Requirements Gebruiksgemak Snelheid Kostprijs Conclusie BlueWave Marketing website... 31

5 3.1 Content Management Systeem WordPress Hoe ziet een custom page template file eruit Werken met Custom Post Types en Custom fields Website Lay-out Responsive design Facebook sharing Twitter sharing Werken met Google Maps Search Engine Optimalisation WordPress Security Bronvermelding... 46

6 LIJST MET FIGUREN Figure 1 Port forwarding naar WAN interface OpenVPN Server... 3 Figure 2 Onderzoekopstelling OpenVPN... 4 Figure 3 Logo Zentyal... 9 Figure 4 Logo Gateway Package... 9 Figure 5 Logo VPN Service... 9 Figure 6Configuratie van de interfaces Figure 7 Configuratie interface eth Figure 8 Configuratie interface eth Figure 9 Aanmaken CA Figure 10 OpenVPN Server Configuratie Figure 11 OpenVPN Service Figure 12 Downloaden client bundle Figure 13 Virtuele adapter client Figure 14 Verbonden clients Figure 15 Logo Clear OS Figure 16 Configuratie van de netwerk settings Figure 17 Instellen van de interfaces Figure 18 Configuratie hostname Figure 19 Aanmaken CA Figure 20 Maken van groep "vpnusers" Figure 21 Downloaden client certificaten Figure 22 Virtuele adapter client Figure 23 Logo IPFire Figure 24 Keuze interfaces IPFire Figure 25 Configuratie RED interface (WAN) Figure 26 Configuratie GREEN interface (LAN) Figure 27 Globale OpenVPN instellingen Figure 28 Genereren van het CA Figure 29 OpenVPN connectie type Figure 30 Downloaden client certificaten Figure 31 Virtuele adapter client Figure 32 Logo pfsense Figure 33 Interface keuzes Figure 34 Toekennen interface aan WAN Figure 35 Overzicht configuraties pfsense Figure 36 Toekennen IP adres WAN Figure 37 Correcte configuratie WAN en LAN Figure 38 Instellingen Server Figure 39 Installeren Client Export Utility Figure 40 Aanmaken CA Figure 41 Genereren User Certificaat Figure 42 Authentication Backend Type... 26

7 Figure 43 Maken van het server certificaat Figure 44 OpenVPN Server instellingen Figure 45 Virtuele adapater client Figure 46 Small Business Server Min. Requirements Figure 47 Router/Firewall Min. Requirements Figure 48 Snelheid bestandsoverdracht Figure 49 Toevoegen Custom Post Type Locatie Figure 50 Toeovoegen eigen velden aan de post ype "Locatie" Figure 51 Toevoegen van de locatie "Brugge" Figure 52 Extra velden voor het aanmaken van een portfolio artikel Figure 53 Ophalen locaties Figure 54 Wireframe van de home pagina Figure 55 Voorbeeld responsive lay-out Figure 56 HTML met bootstrap klasses Figure 57 Delen van locaties te Antwerpen Figure 58 Maken van een Facebook knop Figure 59 Inladen van de Facebook SDK Figure 60 Invullen paramaters Figure 61 Html voor een Twitter share knop Figure 62 Maken van de querystring Figure 63 Tonen van meerdere adressen met infowindow Figure 64 Hotspot locaties te Brugge... 43

8 LIJST MET AFKORTINGEN CMS VPN NAT UDP TCP IPsec SSL TUN TAP OS WAN LAN DHCP DMZ Content Management System Virtual Private Network Network Address Translation User Datagram Protocol Transmission Control Protocol Internet Protocol Security Secure Sockets Layer Namely Network Tunnel Namely Network Tap Operating System Wide Area Network Local Area Network Dynamic Host Configuration Protocol Demilitarized zone

9 1 INLEIDING 1.1 ACHTERGROND INFORMATIE XD.it is een bvba uit Brugge die zich richt op diensten zoals webdesign, webshops, videoproductie, reclame en digitaal flyeren. Dit laatste gaat voort onder de noemer BlueWave Marketing, waarbij men zich gaat specialiseren in de mobile proximity marketing. Concreet wil dit zeggen dat BlueWave meetbaar gaat communiceren met tablets of mobieltjes op interessante locaties om zo heel gericht het doelpubliek van de klant te gaan bereiken en dit via 2 mogelijkheden. De eerste mogelijkheid is via het gebruik van de wifi-hotspot. Deze gaat de bezoekers en passanten gratis draadloos internet aanbieden. In ruil gaan de gebruikers eerst de reclameboodschap bekijken. Deze boodschap kan bestaan uit aanbiedingen, kortingen, filmpjes tot zelfs integratie van sociale media. Tevens zal het BlueWave platform interessante gegevens bieden om zo een inzicht te bieden op het doelpubliek. Een tweede mogelijkheid is via de bluetooth-hotspot. Deze hotspot zal geautomatiseerde boodschappen naar mobiele toestellen van klanten of passanten versturen. De ontvanger kan hierbij zelf beslissen of hij al dan niet wenst de boodschap te bekijken. 1.2 PROBLEEM DEFINITIE In beide gevallen is het uiteraard belangrijk dat de hotspots goed beheerd kunnen worden. Dit moet BlueWave Marketing in staat kunnen stellen om zo de hotspots correct te laten functioneren naar de behoeften van de klant. Voor het systeem van de wifi-hotspots is dit geen probleem, die zijn namelijk reeds gekoppeld in een cloud systeem. Echter bij de bluetooth-hotspots is dit niet het geval. De bluetooth installaties bevinden zich op een linuxdistributie namelijk Ubuntu en dit achter een router met firewall. Het zou dus de bedoeling moeten zijn om die nodes te kunnen bereiken en beheren vanaf het kantoor van XD.it. Echter dient er wel rekening gehouden te worden dat er op deze locaties geen vast IP beschikbaar is omwille van de kostprijs hiervan. Een oplossing zou kunnen zijn om de bluetooth installaties te laten verbinden met het netwerk van XD.it via een Virtual Private Network (VPN). Dit op basis van OpenVPN dat een opensource software is om beveiligde point-to-point of site-to-site verbindingen te realiseren. Niet enkel het beheren van zowel de wifi als de bluetooth hotspots is een belangrijk aspect, ook de verspreiding en bekendmaking van deze technologie in België en Nederland is van groot belang. Een goeie website is dus zeker en vast een noodzaak. Deze website moet zich zeker aanpassen aan de verschillende resoluties voor zowel desktop, tablets en smartphones. Hiernaast is het ook belangrijk dat de zichtbaarheid op Google heel goed is. Ook moet de website gebruik maken van een CMS (Content Management System) waardoor men zelf de inhoud van de website kan wijzigen. Integratie van sociale media zoals Facebook en Twitter mogen zeker niet ontbreken. 1

10 1.3 ONDERZOEKSVRAAG Web ontwikkeling en OpenVPN oplossing voor Mobile Marketing nodes Zoals omschreven bij het onderdeel Probleem Definitie zullen de hoofdzaken gedurende de stageperiode het onderzoek naar oplossingen voor beheren van bluetooth nodes via OpenVPN zijn en het maken van een website met achterliggend content management systeem. Vandaar dat de inhoud van de bachelorproef zich zal focussen op deze twee aspecten met bovenstaande titel als gevolg. Deze thesis is dan ook bedoeld voor IT professionals die interesse hebben in het onderzoeken of implementeren van een OpenVPN oplossing. Hiernaast is er ook een overzicht hoe een responsive website te ontwikkelen via een eigen theme in WordPress maar ook het gebruik van Google, Facebook en Twitter API. 1.4 ONDERZOEKSMETHODE Het stond reeds vast OpenVPN als oplossing te gebruiken voor het op afstand bereiken van de bluetooth installaties. Echter zijn er heel wat verschillende software mogelijkheden die kunnen dienen als server. Hierbij valt te denken aan firewall/router software maar ook small business software kan een oplossing bieden zeker in het geval dat de server ook meerdere functies zou kunnen uitvoeren dan enkel te fungeren als OpenVPN server. Volgende software mogelijkheden leken hiervoor in aanmerking te komen. Firewall/Router software IPFire pfsense Small Business Server Zentyal Clear OS Uiteraard is het belangrijk dat elk van deze software onder dezelfde omstandigheden getest kunnen worden. Dit zodat ze na het testen zo objectief mogelijk vergeleken kunnen worden om zo de stageplaats de best mogelijke oplossing aan te bieden. Eerst werd een volledig virtuele opstelling overwogen waarbij de VPN server en client elk in een ander subnet zaten waardoor ze elkaar niet konden bereiken. Dit zou moeten mogelijk gemaakt worden door de VPN. Echter was dit niet eenvoudig om dit virtueel te kunnen testen en week deze opstelling ook vrij veel af van de realistische situatie. Hierna werd dan ook besloten de verschillende mogelijkheden te testen zoals de situatie zich normaal zou voortdoen. De test opstelling bestaat uit een OpenVPN server die zich bevindt in het LAN netwerk van het stagebedrijf. Een server dient steeds bereikt te kunnen worden op hetzelfde IP adres, daarom krijgt die een statisch adres toegewezen in dit geval Dit adres bevindt zich binnen het subnet(werk) dat gecreëerd wordt door de router die het lokale netwerk zal verbinden met het internet. De OpenVPN server beschikt steeds over twee netwerk interfaces, hierdoor kan er zich ook na de server nog een netwerk bevinden. Die tweede interface zal zich situeren in een ander subnet, in dit geval krijgt die toegewezen. In de realiteit is er geen tweede netwerk na de VPN server, toch dient deze interface geconfigureerd te zijn. 2

11 Een andere belangrijke configuratie is nodig bij de router die het LAN netwerk zal verbinden met het internet. Aangezien de OpenVPN server niet als router/gateway zal dienen in dit netwerk (er staat al een router), zal er een port forwarding nodig zijn. Port forwarding is het doorsturen van TCP of UDP pakketten in een NAT gateway. Dit maakt het mogelijk om externe hosts te kunnen laten verbinden met een bepaalde host in een privé-netwerk, in dit geval de OpenVPN server. OpenVPN gaat meestal gebruik maken van UDP pakketten en dit op poort Deze poortconfiguratie is overigens in te stellen binnen de software. Er zal dus een verwijzing nodig zijn binnen de router die de UDP pakketten zal doorsturen naar de correcte host namelijk de OpenVPN server met het adres Bij een telenet router zal deze port forwarding er uitzien zoals in bovenstaande afbeelding. De hierboven besproken opstelling is ook nog te bekijken in onderstaande figuur. Figure 1 Port forwarding naar WAN interface OpenVPN Server 3

12 Een compleet overzicht van de opstelling is te bekijken op onderstaande afbeelding. Figure 2 Onderzoekopstelling OpenVPN 4

13 2 VIRTUAL PRIVATE NETWORK (VPN) 2.1 DEFINITIE A virtual private network (VPN) is a network that uses a public telecommunication infrastructure, such as the Internet, to provide remote offices or individual users with secure access to their organization's network. A virtual private network can be contrasted with an expensive system of owned or leased lines that can only be used by one organization. The goal of a VPN is to provide the organization with the same capabilities, but at a much lower cost. 2.2 VPN STANDAARDEN VPN is bestaande uit twee standaarden namelijk IPsec en SSL/TLS. Aangezien OpenVPN werkt via OpenSSL, een opensource uitvoering van het SSL protocol zullen beide protocollen besproken worden om de keuze voor OpenVPN te helpen verklaren IPsec IPsec is een standaard voor het beveiligen van het IP protocol. Deze beveiliging gebeurt op basis van encryptie en / of authenticatie op alle pakketten. Dit betekent dus dat IPsec de netwerklaag van het OSImodel gaat beveiligen. IPsec bestaat uit twee modes namelijk een transport mode en een tunnel mode. De default mode voor IPsec is de tunnel mode, hierbij zal het gehele originele IP pakket beveiligd worden. Dit betekent dat het pakket zal geëncapsuleerd en geëncrypteerd zal worden alsook een nieuwe IP header zal toegevoegd worden om zo te verzenden naar de andere kant van de VPN tunnel. De transport mode zal de echte data gaan beveiligen die te gaan encapsuleren door IPsec header en trailer. De originele IP header zal intact blijven, enkel het IP protocol zal vervangen worden. Het originele protocol zal bewaard worden in de IPsec trailer en zal hersteld worden bij het decrypteren SSL SSL is een encryptieprotocol om communicatie op het Internet te beveiligen. De authenticatie zal gebeuren via het aanmaken van certificaten dat berust op asymmetrische cryptografie. Bij asymmetrische cryptografie zal er gebruik gemaakt worden van paren van publieke en private sleutels. Dit heeft tot gevolg dat de data geëncrypteerd door de client gebruik makend van de publieke sleutel enkel gedecrypteerd kan worden door de server met de private sleutel. Hierdoor kan de client data versturen die enkel verstaanbaar is voor de server. Deze procedure wordt enkel gevolgd voor de communicatie tussen de server en de client waarbij de geheime symmetrische sleutels worden uitgewisseld, hierna worden deze gebruikt voor het versturen van de echte data. 5

14 2.3 BEVEILIGING MECHANISMES Het private netwerk zal altijd gescheiden worden door een firewall, dit kan zowel door de router die de verbinding met het publieke netwerk zal voorzien alsook door de VPN server zelf. Dit zal ervoor zorgen dat het binnenkomend en uitgaand verkeer geanalyseerd en gefilterd kunnen worden. Encryptie gaat ervoor zorgen dat data gewijzigd zal worden in een onleesbare vorm namelijk de cyphertekst. Via een sleutel kan de ontvanger deze data gaan decrypteren waardoor de tekst terug leesbaar wordt. Enkele performante encryptietechnieken zijn AES en 3DES. Indien mogelijk is het best AES de voorkeur te geven vanwege heel sterke crypto eigenschappen. Door tunneling zal een pakket geëncapsuleerd worden binnen een nieuw pakket. Eerst en vooral zal dit gebeuren om het originele pakket compatibel te maken met het publieke netwerk (internet). Bij aankomst zal het pakket dan weer uitgepakt worden waardoor er terug met het originele verder gewerkt kan worden. Tunneling is een veelgebruikte techniek bij VPN-implementaties alsook bij OpenVPN waarmee er in dit geval gewerkt zal worden. 2.4 VOORDELEN VPN Eerst en vooral is een VPN heel toegankelijk, dit omdat er een hele brede beschikbaarheid is van het internet maar ook door de routering hierbij. Hiernaast is het vaak ook niet meer nodig om speciaal voor het gebruik van een VPN een client geïnstalleerd te hebben. Bij SSL VPN s is het zelfs mogelijk te connecteren op een VPN via een https-verbinding in de browser. Door het versleutelen en encapsuleren van de pakketten is het ook heel veilig om te connecteren via een VPN. Hierdoor kunnen zogenaamde eavesdroppers heel moeilijk het verkeer onderscheppen. Ook mochten ze hier al in slagen dienen de boodschappen nog gedecrypteerd te worden naar een leesbare vorm alvorens de inhoud te kennen van het bericht. Een ander belangrijk voordeel is ook dat VPN s heel schaalbaar zijn. Naarmate een bedrijf groeit, is het mogelijk om de capaciteit van een VPN te gaan vergroten. Hieraan gekoppeld kan er ook geconcludeerd worden dat een VPN meestal goedkoper zal zijn. Bij leased lines zal telkens het bedrijf groeit er moeten gekeken worden om ofwel de infrastructuur aan te passen of in geval van huur extra te betalen voor grotere capaciteit. Een laatste voordeel is dat VPN s globaal beschikbaar zijn. Doordat het internet globaal heel toegankelijk is, is het dan ook mogelijk van bijna waar dan ook een verbinding te maken met het bedrijfsnetwerk. 6

15 2.5 OPENVPN Wat is OpenVPN OpenVPN is een opensourcesoftware uitgerust met SSL/TLS die het mogelijk maakt om veilige point-topoint of site-to-site VPN verbindingen te creëren. Ook is het heel geschikt voor het doorkruisen van Network Address Translators (NAT) en firewalls. De verificatie van de gebruikers gebeurt met behulp van een vooraf gedeelde geheime sleutel, combinatie gebruikersnaam en wachtwoord of via certificaten. Dit op basis van de OpenSSL library om versleuteling en controle kanalen te voorzien. Bij het gebruik van een Multi client-server configuratie laat de server toe om voor elke cliënt een authenticatie-certificaat aan te maken met behulp van een handtekening en een certificaat autoriteit (CA). De officiële poort toegewezen aan OpenVPN is Hierbij is de keuze ook voor ofwel het UDP of TCP protocol. Via de server zijn er tal van mogelijkheden om bepaalde netwerkconfiguraties voor de cliënt in te stellen. Dit kan het omvatten van IP adressen, routing opdrachten en andere mogelijkheden zijn. OpenVPN zal twee soorten interfaces aanbieden namelijk TUN en TAP. TUN (Namely Network Tunnel) zal een laag 3 gebaseerde tunnel creëren en zal gaan werken op basis van IP pakketten. TAP (Namely Network Tap) is een laag 2 (Ethernet Layer) gebaseerde Ethernet TAP dat gaat werken op basis van ethernet pakketten Voordelen OpenVPN Eerst en vooral is OpenVPN cross-platform, dit wil zeggen dat deze VPN software beschikbaar is voor meerdere besturingssystemen waaronder o.a. Windows, Linux, OSX, enz. Ten tweede maakt OpenVPN gebruik van de OpenSSL library waardoor het dan ook beroep kan doen op heel wat verschillende soorten algoritmes om aan versleuteling te doen. OpenVPN is tevens modulair gebouwd, alle cryptografie wordt verzorgd door de OpenSSL library, alle IP- Tunneling functionaliteiten worden geleverd door de TUN/TAP virtuele netwerk driver. Dit heeft als gevolg dat OpenVPN dynamisch gekoppeld kan worden aan nieuwe versies van de OpenSSL library en dus heel snel toegang heeft tot nieuwe functionaliteiten in een vernieuwde versie. Een ander voordeel is ook dat OpenVPN eerder gemakkelijk is om te gebruiken, certificaten kunnen eenvoudig gegenereerd worden zonder veel vereiste kennis. Ook is er vrij veel documentatie beschikbaar op het internet. Een laatste voordeel is dat OpenVPN niet alleen snel is, ook laat het toe om firewalls en NAT te doorkruisen zonder extra configuratie. Dit is één van de belangrijkste kenmerken en dan ook de hoofdreden voor het gebruik binnen het stageproject. 7

16 2.5.3 Actualiteit: OpenVPN service kwetsbaar door the Heartbleed OpenSSL bug Frederik Stromberg, medeoprichter van VPN-aanbieder Mullvad heeft aangetoond dat OpenVPN kwetsbaar blijkt te zijn via de Heartbleed-bug. Heartbleed is de naam van een lek in de cryptografische OpenSSL library. Deze bug maakt het mogelijk dat een server gebruik makend van OpenSSL een bepaald gedeelte van zijn geheugen op verzoek kan terugsturen. Desondanks dit lek reeds gekend is van in 2011 was er tot nog toe niemand in geslaagd om een privésleutel van een certificaat te stelen. Stromberg echter ontwikkelde een exploit die gebruik maakt van deze kwetsbaarheid. Door eerst het OpenVPN-protocol te gaan openen kan er effectief gebruik gemaakt worden van de Heartbleed bug om zo het geheugen uit te lezen. Na een test op een eigen server bleek dat er voldoende materiaal uit het geheugen van de server gehaald kon worden om zo de privésleutel van een certificaat te kunnen reproduceren. Daarbij komend genereert de aanval weinig verkeer en zou het daardoor niet kunnen opvallen. Om te weten of een server al dan niet kwetsbaar is voor de Heartbleed bug moet de OpenSSL versie opgevraagd worden. Dit kan op ubuntu door onderstaand voorbeeld commando. # openssl version -a OpenSSL 1.0.1e 11 Feb 2013 built on: Sat Feb 1 22:14:33 UTC 2014 platform: debian-amd64 options: bn(64,64) rc4(16x,int) des(idx,cisc,16,int) blowfish(idx) OPENSSLDIR: "/usr/lib/ssl" Versies gemaakt voor 7 april 2014 blijken kwetsbaar te zijn. Om dit probleem te verhelpen dient OpenSSL een update te krijgen. # Ubuntu systemen sudo apt-get update sudo apt-get upgrade # CentOS / Fedora systemen yum -y install openssl Na het updaten van OpenSSL is het ook aan te raden de oude private sleutels te revoken, nieuwe private sleutels te genereren en bijgevolg ook nieuwe certificaten maken met de nieuwe sleutels. 8

17 2.6 THE SETUP Zentyal Wat is zentyal Zentyal is een Linux small business server dat geconfigureerd kan worden als Gateway, Infrastructure Manager, Unified Threat Manager, Office Server, Unified Communication server of als een combinatie van dit alles. Figure 3 Logo Zentyal Het kan aanzien worden als een alternatief voor Microsoft Network Infrastructure producten zoals Windows Small Business Server, Windows Server, Microsoft Exchange enz. Het zorgt ervoor dat allerhande netwerk services kunnen beheerd worden op een platform gebaseerd op Linux. Desondanks Zentyal over meer mogelijkheden beschikt dan enkel de configuratie van een VPN zou deze software aanzien kunnen worden als overkill. Echter is in veel gevallen de server van een VPN oplossing hetzelfde systeem als de router/gateway. Vandaar dat deze software opgenomen is in het onderzoek net zoals Clear OS. Installatie Gedurende de installatie zijn er enkele belangrijke zaken waarop gelet moeten worden. Niet de gehele installatieprocedure zal hieronder volgen, enkel de belangrijkste configuraties zullen toegelicht worden. Na het rebooten van de server (eerste deel van de installatie) kan er ingelogd worden in het admin gedeelte via de gekozen gebruiker en bijhorend wachtwoord. Na het volgende installatie gedeelte kan deze admin interface ook bereikt worden via de LAN kant van de server. Dit is mogelijk via de browser te surfen naar het lan adres van de server namelijk Eerst dient een keuze gemaakt te worden welke modules te installeren. Om de toepassing OpenVPN geïnstalleerd te krijgen dient de Gateway module te worden aangeklikt. Niet alle packages hierbij zijn van toepassing maar de meeste kunnen wel handig zijn. Overbodige packages kunnen ook afgevinkt worden. Figure 4 Logo Gateway Package Figure 5 Logo VPN Service 9

18 Een belangrijke configuratie zijn de instellingen voor netwerk interfaces van de server. Zoals besproken in het hoofdstuk Onderzoeksmethode zal de eerste interface hier de WAN kant zijn. Deze krijgt een statisch ip adres toegewezen met als gateway wat de router is die het lokale netwerk verbind met het internet. Figure 6Configuratie van de interfaces Figure 7 Configuratie interface eth0 10

19 De tweede interface moet een ip adres krijgen in een ander subnet dan de eerste interface, volgens de eerder besproken opstelling moet het statisch ip adres ingesteld worden. Figure 8 Configuratie interface eth1 Configuratie OpenVPN Server Het eerste wat er aangemaakt worden is het Certification Authority, dit is een entiteit die digitale certificaten kan verlenen aan de clients. Hierdoor kan de server bewijzen dat hij daadwerkelijk de eigenaar is. Figure 9 Aanmaken CA 11

20 Het volgende certificaat dat aangemaakt moet worden is een certificaat voor de server. Belangrijke zaken zijn hierbij dat de server poort op UDP 1194 dient te staan. Het VPN adres zal het netwerk zijn waarin de client een virtueel ip adres toegewezen zal krijgen, in dit geval Allow client-to-client connections dient ook aan te staan zodat wanneer iemand van binnen het netwerk van het bedrijf zou verbinden met de VPN, ook kan verbinden met de andere vpn clients. Een laatste belangrijke instelling is dat de server moet luisteren naar beide interfaces. Normaal zou dit enkel op de WAN interface (eth0) moeten zijn maar omdat de VPN niet correct wou starten bij deze configuratie is dit gewijzigd naar "All network interfaces. Figure 10 OpenVPN Server Configuratie 12

21 In het dashboard zou nu moeten te zien zijn dat de OpenVPN service draaiende is met daarbij de instellingen. Indien dit niet het geval is kan de VPN service opgestart worden op het dashboard bij de tab Module status. Connecteren client Figure 11 OpenVPN Service Om de client te kunnen connecteren met de VPN server moeten er certificaten aangemaakt worden. Dit kan door een client bundle te gaan downloaden. Bij de VPN Servers kan er geklikt worden op Download Client Bundle Figure 12 Downloaden client bundle Belangrijk is nu om bij de client bundle het correcte adres van de server op te geven, namelijk het WAN adres. Omdat de bluetooth installaties als operating system Ubuntu hebben wordt er hier voor Linux als client type gekozen. Wanneer de client bundle gedownload is, moeten deze bestanden uitgepakt worden en overgezet naar de client. Wanneer dit voltooid is kan volgend commando gebruikt worden om de connectie te starten. # openvpn config OpenVPNserver-client.conf 13

22 Wanneer de connectie gemaakt is zal er bij de client te zien zijn welk virtueel adres hij toegewezen gekregen heeft door de VPN. Dit kan door volgend commando: # ifconfig -a Figure 13 Virtuele adapter client Ook op de server is het mogelijk te zien welke clients verbonden zijn onder de tab OpenVPNServer. Figure 14 Verbonden clients 14

23 2.6.2 Clear OS Wat is Clear OS Clear OS is een linuxdistributie gebasseerd op CentOS en Red Hat Enterprise voor het gebruik in kleine tot middelgrote ondernemingen als gateway en netwerk server. Net zoals Zentyal kan het een alternatief bieden voor Windows Small Business Server. Figure 15 Logo Clear OS Clear OS is zowel beschikbaar in een community/developer editie alsook een professionele aan te kopen editie. Echter omdat er maar maximum 10 users aangemaakt kunnen worden in de community editie zal er in dit geval nood zijn aan de professionele versie wanneer het stagebedrijf deze toepassing wenst te gebruiken. Net zoals Zentyal is Clear OS modulair opgebouwd en kan er zelf gekozen worden welke packages geïnstalleerd moeten worden. Installatie Een eerste belangrijke configuratie is alweer het instellen van de netwerk interfaces volgens het eerder opgestelde schema. Na het rebooten dient er geklikt te worden op Network Console. Inloggen kan via root en het bijhorende wachtwoord. Figure 16 Configuratie van de netwerk settings Hierna kunnen de interfaces als volgt ingesteld worden: Figure 17 Instellen van de interfaces 15

24 Het is ook van groot belang meteen de juiste instellingen te maken i.v.m. de hostname en internet hostname. Bij het aanmaken van de certificaat authority zullen deze gegevens immers van belang zijn. Eens deze instellingen gedaan zijn kunnen de certificaten zich niet meer vernieuwen dus is het van groot belang deze meteen correct te doen. Figure 18 Configuratie hostname Configuratie OpenVPN server De webconfig kan nu bereikt worden via het volgende adres: Eens ingelogd zal eerst de OpenVPN module geïnstalleerd moeten worden. Dit kan door naar The marketplace te gaan via het wolkje rechts bovenaan. Daar kan dan gezocht worden naar de gratis OpenVPN package. Als volgt moet ook hier eerst een CA aangemaakt worden. Dit kan door te navigeren naar System > Security > Certificate > Manager Figure 19 Aanmaken CA 16

25 Na deze stap zal er een nieuwe user aangemaakt moeten worden in een nieuwe groep. Dit kan via System > Accounts > Groups De groep vpnusers kan aangemaakt worden om users toe te laten de VPN te gebruiken. Figure 20 Maken van groep "vpnusers" Hierna kan een nieuwe user aangemaakt worden via System > Accounts > Users. Deze user moet toegevoegd worden aan de eerder gemaakte groep. Connecteren client Om de client te kunnen voorzien van de benodigde certificaten zal er eerst ingelogd moeten worden op Clear OS onder de naam van de user. Uitloggen kan recht bovenaan. Eens ingelogd als user kan er rechts bovenaan geklikt worden op My Account > User Certificates. Nu kunnen alle certificaten en bijhorende bestanden gedownload worden. Figure 21 Downloaden client certificaten 17

26 Na het downloaden van de benodigde bestanden moet er wel nog een aanpassing gebeuren in het.ovpn bestand. Volgende lijnen moeten worden verwijderd. User Group nobody nobody Na deze wijzigingen moeten de bestanden overgeplaatst worden naar de client. Met onderstaand commando kan de vpn verbinding gestart worden. Hierna zal er ook nog gevraagd worden naar het wachtwoord voor de aangemaakte gebruiker. # openvpn config ovpn Eens de VPN verbinding opgestart is kan dit geverifieerd worden via: # ifconfig -a Ook nu is te zien dat er een virtuele interface aangemaakt is met een bijhorend ip adres voor de client. Figure 22 Virtuele adapter client 18

27 2.6.3 IPFire Wat is IPFire IPFire is een opensource linux distributie die gaat funderen als een router en firewall. In vergelijking met Zentyal en Clear OS is het dus niet van toepassing als small business server. Het is een heel licht systeem dat gemakkelijk kan opereren op zelfs oudere hardware. Enkele mogelijkheden van deze software zijn firewall, NAT, DHCP, Proxy server en uiteraard VPN. Figure 23 Logo IPFire Installatie Een eerste belangrijke configuratie is het instellen van de interfaces. IPFire werkt hierbij niet met namen zoals WAN, LAN, DMZ of WLAN maar wel met kleuren. Red WAN Extern netwerk, geconnecteerd met het internet Green LAN Intern / privaat netwerk Orange DMZ The DeMilitarized Zone, een onbeschermd netwerk toegankelijk vanaf het internet Blue WLAN Wireless netwerk Onze server beschikt zoals de vorige configuraties over twee interfaces, één interface voor de WAN, de andere voor het LAN netwerk. Bij deze stap zal er dus gekozen moeten worden voor de optie GEEN + RED. Figure 24 Keuze interfaces IPFire 19

28 De volgende stap is het aanwijzen van de juiste netwerkkaart voor elke interface op basis van het MAC adres. Probeer op de hoogte te zijn over welke netwerkkaart welk adres heeft. Wanneer dit correct toegepast is, kunnen de interfaces geconfigureerd worden zoals beschreven in de onderzoeksopstelling. De RED interface krijgt dus het statisch ip adres (WAN), de GREEN interface het ip adres (LAN). Figure 26 Configuratie GREEN interface (LAN) Figure 25 Configuratie RED interface (WAN) Nadat de installatie is afgelopen en IPFire heeft kunnen heropstarten kan de webconfig geraadpleegd worden via de browser met volgend adres: Inloggen kan via admin en het bijhorende wachtwoord. Indien de interfaces opnieuw geconfigureerd moeten worden, dan kan dit enkel via de commandolijn van IPFire. Hier moet worden ingelogd via root in plaats van admin. Door het commando setup in te geven kunnen de basisinstellingen van IPFire gewijzigd worden. # setup 20

29 Configuratie OpenVPN server Het configuratie gedeelte voor OpenVPN is te vinden via Services > OpenVPN. De globale instellingen moeten als volgt geconfigureerd worden. Figure 27 Globale OpenVPN instellingen De OpenVPN server moet luisteren op de RED interface, ook is het belangrijk bij Local VPN Hostname/IP het WAN adres van de server te plaatsen. Als encryptiemethode wordt er best gekozen voor AES. Figure 28 Genereren van het CA Hierna moet een host certificaat aangemaakt worden. Dit kan door te klikken op Generate root/host certificates. De velden die leeg mogen zijn hoeven niet worden ingevuld. Uploaden van een PKC12 file is ook niet nodig. Als laatste mag er ook niet vergeten worden de service te starten, dit gebeurt niet automatsch. 21

30 Connecteren client Figure 29 OpenVPN connectie type Ook voor de client zal er opnieuw een certificaat gegenereerd moeten worden. De verbinding die gekozen moet worden is: Host- To-Net. Dit betekent dat één client zich zal verbinden met een netwerk (point-to-point). De overige instellingen zijn vanzelfsprekend. Figure 30 Downloaden client certificaten Opnieuw zullen de certificaten met bijhorende bestanden overgeplaatst moeten worden naar de client. Het uitvoeren van onderstaand commando zal de VPN starten. # openvpn config OpenVPN-TO-IPFire.ovpn Eens de VPN verbinding opgestart is kan dit geverifieerd worden via: # ifconfig -a Figure 31 Virtuele adapter client 22

31 2.6.4 pfsense Wat is pfsense pfsense is een opensource firewall/router software gebaseerd op FreeBSD. Alle instellingen kunnen gemaakt worden via een web interface, hierdoor is er geen kennis nodig van het onderliggende FreeBSD om het systeem te kunnen configureren. Figure 32 Logo pfsense Vaak wordt pfsense gebruikt voor zaken als firewalling, NAT, wireless access points, DNS server, DHCP en VPN oplossingen. Installatie Een eerste belangrijke configuratie gedurende de installatie procedure is het toewijzen van de interfaces aan de juiste netwerkkaart. Via het MAC adres van de netwerkkaarten kan herkent worden welke kaart gebruikt zal worden voor WAN (le0) en LAN (le1). Figure 33 Interface keuzes De interfaces kunnen simpelweg toegekend worden via het plaatsen van le0 en le1 Figure 34 Toekennen interface aan WAN Wanneer de installatie is afgerond valt te zien dat de interfaces correct werden toegewezen, echter het vooropgestelde ip adres is nog niet correct geconfigureerd. Via het nummer 2 kunnen de interfaces hun ip adres ingesteld worden. Figure 35 Overzicht configuraties pfsense 23

32 Hieronder is een voorbeeld hoe de WAN interface te configureren, op dezelfde manier kan dit gedaan worden voor de LAN. Figure 36 Toekennen IP adres WAN Na de configuratie van de ip adressen zou volgend resultaat bovenaan zichtbaar moeten zijn. Zoals vooropgesteld in de opstelling heeft de WAN interfaces het ip adres toegewezen gekregen, de LAN het ip adres Nu is de pfsense klaar om geconfigureerd te worden als VPN server. Figure 37 Correcte configuratie WAN en LAN De webconfig kan ook nu bereikt worden via de browser door te surfen naar het LAN adres namelijk: Inloggen kan via admin en het bijhorende standaard wachtwoord pfsense. Na het inloggen, zullen er eerst nog enkele configuraties gedaan moeten worden. Aangezien de overige instellingen reeds gemaakt werden via de commandolijn, is het nu enkel van belang het correcte domein op te geven (WAN ip adres) alsook de DNS servers. Omdat er geen gebruik gemaakt wordt van eigen DNS servers zullen voorlopig de Google public dns servers gebruikt worden. Figure 38 Instellingen Server 24

33 Configuratie OpenVPN server Eerst en vooral zal een extra package moeten geïnstalleerd worden om clients te kunnen voorzien van hun certificaten. Deze package kan gevonden en geïnstalleerd worden via System > Packages > Available Packages. In de lijst van beschikbaar packages kan gezocht worden naar OpenVPN Client Export Utility. De installatie kan plaatsvinden door het klikken op het plus icoon rechts naast de package. Figure 39 Installeren Client Export Utility De volgende stap is opnieuw het aanmaken van een CA, deze gaat voorzien dat er een geldige entiteit is voor het aanmaken van certificaten. Hiervoor navigeren naar System > Cert Manager, in deze tab kan er een nieuw CA aanmaken met bijvoorbeeld onderstaande instellingen. Figure 40 Aanmaken CA Hierna moet er eerst een nieuwe user aangemaakt worden, dit kan door te navigeren naar System > User Manager. Belangrijk hierbij is niet te vergeten een certificaat aan te maken voor de user. Figure 41 Genereren User Certificaat 25

34 De instellingen voor de server kunnen nu echt gebeuren door te navigeren naar VPN > OpenVPN en daar te klikken op Wizards. Volgende stappen moeten doorlopen worden. Kies voor de optie Local User Acces. Figure 42 Authentication Backend Type De CA is reeds aangemaakt in een vorige stap, hier kan dus gewoon verder de configuratie doorlopen door op next te klikken. Hierna moet er wel nog een certificaat voor de server aangemaakt worden, de meeste velden zullen al correct ingevuld staan. Figure 43 Maken van het server certificaat De volgende stap is het effectief maken van instellingen voor de OpenVPN server. Eerst moet er een tunnel netwerk opgegeven worden. Dit is het virtuele netwerk waar de client een ip adres toegewezen zal krijgen /24. Bij het lokale netwerk daarentegen moet het netwerkadres ingegeven worden waartoe de client toegang zal krijgen eens verbonden met de VPN. Ook kan er compressie gebruikt worden voor de pakketten in de tunnel om zo het verkeer wat sneller te kunnen laten gaan. 26

35 Figure 44 OpenVPN Server instellingen Connecteren client De benodigde certificaten voor de client kunnen gedownload worden onder VPN > OpenVPN > Client export. Belangrijk is wel het WAN adres op te geven waarmee de client verbinding moet maken. Dit kan door Other te selecteren bij Host Name Resolution. Onderaan kan er bij de standaard configuraties gekozen worden om een archive af te halen met alle correcte bestanden. Deze moeten opnieuw overgebracht worden naar de client. Via onderstaand commando kan de connectie opgestart worden. Ook zal er een wachtwoord gevraagd worden bij de eerder aangemaakte user. # openvpn config ovpn Eens de VPN verbinding opgestart is kan dit geverifieerd worden via: # ifconfig -a Ook nu kan er gezien worden dat er een virtuele interface aangemaakt is met een bijhorend ip adres voor de client. Figure 45 Virtuele adapater client 27

36 2.7 VERGELIJKING OPENVPN MOGELIJKHEDEN Voor het stagebedrijf is het de bedoeling slechts één van deze software te gaan gebruiken. Vandaar dat hieronder een vergelijkende studie zal gedaan worden om te zien welke OpenVPN oplossing het best zou passen in bedrijfssituatie. Hierbij zal rekening gehouden worden met volgende zaken: minimum hardware requirements, gebruiksgemak, snelheid en kostprijs. Deze punten zullen hieronder besproken worden met een conclusie tot gevolg Minimum Hardware Requirements Uiteraard zou het niet correct zijn om de minimum vereisten te gaan vergelijken tussen de small business server software en software voor router/firewall. Aangezien de router/firewall software over veel minder mogelijkheden beschikken zullen de minimale hardware vereisten ook beduidend lager liggen dan die van de small business server software. Hieronder een overzicht in tabelvorm. Zentyal Clear OS CPU P4 of equivalent 1300 MHz 1000 MHz RAM Geheugen 2 GB 1 GB HDD Geheugen 10 GB 10 GB Install CDROM / USB CDROM / USB Network 2 interfaces 2 interfaces Figure 46 Small Business Server Min. Requirements Het is duidelijk dat Zentyal toch over net iets meer mogelijkheden beschikt en dit is dan ook te zien aan de hardware vereisten. De vereisten bij Zentyal zijn ook slechts bij het gebruik als Gateway, wanneer deze server nog andere modules geïnstalleerd krijgt zullen de minimale vereisten groter worden. Deze gegevens zijn terug te vinden op de website van Zentyal. Clear OS heeft duidelijk minder behoefte aan een systeem zoals Zentyal. Echter zijn deze vereisten slechts voor 5 users omdat dit de community editie is. Bij de professionele editie zullen deze een beetje hoger liggen, echter zullen er dan ook bijkomende kosten zijn voor deze editie aan te kopen. 28

37 IPFire pfsense CPU Pentium upward(s) 333 MHz Pentium II processor 333 MHz RAM Geheugen 256 MB 256 MB HDD Geheugen 1 GB 1 GB Install CDROM / USB CDROM / USB Network 2 interfaces 2 interfaces Figure 47 Router/Firewall Min. Requirements Het valt op dat beide software weinig benodigdheden hebben op het gebied van hardware. Zowel IPFire als pfsense vereisen dus slechts lage systemen. Echt een duidelijk onderscheid kan er niet gemaakt worden, al leunt het voordeel hierbij toch iets meer naar IPFire Gebruiksgemak Gebruiksgemak kan voor iedereen verschillend zijn, dit is dus een heel subjectieve gegeven. Echter voor mezelf denk ik aan volgende puntjes als het aankomt op gebruiksgemak: gemakkelijke installatie procedure, duidelijk en eenvoudige web interface, logische volgorde bij het aanmaken van de certificaten, eenvoudig af te halen client bundle en documentatie. Zowel Zentyal als Clear OS hebben een eenvoudige installatie procedure, Zentyal heeft echter een fraai ogende interface waarbij het gebruik voor de user duidelijk centraal staat. Ook de online documentatie is heel goed. Bij Clear OS was het vooraf niet simpel te weten hoe en waar de certificaten aangemaakt moesten worden. Ook moet je als client eerst inloggen onder de eigen user om de benodigde certificaten te bekomen. Een bijkomend nadeel bij Clear OS is dat het afgehaalde.ovpn bestand eerst nog gewijzigd dient te worden voor het gebruik op linux. Zonder deze wijziging lukte het niet een werkende VPN connectie te bekomen. Bij de router/firewall oplossing geniet mijn voorkeur toch IPFire. De installatie is iets eenvoudiger te volgen voor iemand met minder kennis dan bij pfsense. Ook is het zonder documentatie mogelijk de OpenVPN configuraties te maken alsook de benodigde certificaten. Bij de interface van pfsense was het iets moeilijker alle configuratie bladen te vinden en moest er ook de documentatie bijgenomen worden om de VPN te kunnen configureren. 29

38 2.7.3 Snelheid Omdat alle software oplossingen gebruik maken van de vooropgestelde OpenVPN toepassing zijn er weinig verschillen bij de snelheid op te merken. De snelheid is getest door via de aangemaakte tunnel een bestand over te brengen van de client naar de server. Een voorbeeld van zo n overdracht is hieronder te bezichtigen. In onderstaande tabel staan alle snelheden t.o.v. elkaar, grote verschillen zijn er niet op te merken en zullen dus geen doorslag geven in het besluit. IPFire pfsense Zentyal Clear OS Snelheid 1071 kb/s 1055 kb/s 984 kb/s 996 kb/s Figure 48 Snelheid bestandsoverdracht Kostprijs Bij de small business software kan er voor Zentyal geopteerd worden voor de community editie, deze versie is dan ook gratis te gebruiken echter wel zonder support. Vandaar dat Zentyal de voorkeur geniet op Clear OS waarbij er in de community editie slechts 5 users aangemaakt kunnen worden. De licentie voor de basis versie van Clear OS komt op $280 per jaar. De keuze voor Zentyal lijkt hierbij, desondanks de hogere minimum vereisten wat hardware betreft, duidelijk. IPFire en pfsense zijn beide opensource software voor router/firewall installaties. Beide zijn dus gratis te gebruiken. Ook de kosten voor de benodigde hardware zijn bijna identiek. Op basis van kostprijs valt er dan ook geen onderscheid te maken Conclusie Als er een keuze gemaakt moet worden tussen de small business server software van Zentyal en Clear OS, dan gaat de voorkeur naar Zentyal. Kort samengevat is Zentyal eenvoudiger te gebruiken, beter ogend en ook gratis te gebruiken dankzij de community editie. Bij de router/firewall gaat de keuze naar IPFire, dit omdat hij eruit springt op basis van gebruiksgemak. De werkwijze om een OpenVPN op te zetten is heel wat eenvoudiger dan bij pfsense, ook de installatie van het systeem verloopt eenvoudiger. Wanneer de andere kenmerken zo goed als gelijk zijn dan springt IPFire er dus uit op basis van het gebruiksgemak. 30

39 3 BLUEWAVE MARKETING WEBSITE 3.1 CONTENT MANAGEMENT SYSTEEM Een CMS ofwel een content management systeem is meestal een web applicatie waarbij mensen zonder veel technische kennis een website kunnen gaan wijzigen, dit gaande van het veranderen van foto s teksten, enz. Zo n systeem is vooral van belang voor websites waar de inhoud regelmatig verandert. Enkele gekende voorbeelden van CMS systemen zijn Drupal, WordPress, Joomla WordPress Voor BlueWave Marketing werd WordPress als CMS gekozen. Dit systeem staat vooral bekend als een opensource webblog software. Echter is het de laatste jaren meer en meer geëvolueerd naar een volwaardig CMS systeem met vele talrijke plugins om te voldoen aan de behoeften van de klant. De installatie van WordPress verloopt vrij eenvoudig. Via de officiële website kunnen de bestanden gedownload worden. Hierna dient de webserver of local host te beschikken over een database en user waarop de WordPress kan functioneren. Vaak zal het aanmaken van een database gebeuren via phpmyadmin, dit dient echter wel aanwezig te zijn op de server. Wanneer de bestanden (via FTP) zijn overgezet naar de server, kan er d.m.v. te surfen naar de server de configuratie voltooid worden via een wizard. In deze wizard zullen onder andere database gegevens gevraagd worden alsook een admin account aangemaakt worden. Soms kan het gebeuren dat WordPress niet correct het wp-config.php bestand kan aanmaken. Deze configuratie file zal ervoor zorgen dat WordPress weet op welke database hij zich kan richten alsook de authenticatie daartoe. In het geval van problemen kan er ook zelf de configuratie gekopieerd worden naar het wp-config bestand op de server. Wanneer de installatie correct is afgerond kan er via volgende link ingelogd worden op het admin paneel: Hoe ziet een custom page template file eruit Om een custom page template te maken moet de nieuwe file beginnen met volgende PHP-Comment: <?php /* Template Name: My Custom Page */ Dit zal ervoor zorgen dat WordPress de template gaat herkennen als een pagina met de opgegeven naam. Bijgevolg zal wanneer een pagina aangemaakt in het admin paneel er nu ook de keuze zijn de template te gebruiken met de opgegeven naam in de PHP-Comment. 31

40 Een basis pagina structuur bestaat uit volgende onderdelen: header, content, footer. De Header gaat alle informatie bevatten dat bovenaan de website moet staan zoals <doctype>, <meta>, <head>-tag, enz. Ook bevat de header het openen van een <body> tag. Naast deze elementen zullen ook alle zichtbare delen van de header aanwezig zijn. Het content gedeelte bevat concreet de inhoud van de pagina. De footer gaat informatie bevatten dat behoort onderaan de pagina zoals contact informatie, copyright, sitemap enz. <?php /* Template Name: My Custom Page */?> <?php get_header();?> <?php if (have_posts()) : while (have_posts()) : the_post();?> <?php the_content();?> <?php endwhile; endif;?> <?php get_footer();?> In dit voorbeeld zullen op deze pagina de header en footer ingeladen worden alsook de content van de aangemaakte pagina via het admin paneel. De header en footer kunnen aangepast worden in hun respectievelijke bestanden namelijk header.php en footer.php. 32

41 3.1.3 Werken met Custom Post Types en Custom fields Om te kunnen werken met een eigen soort post kan er gebruikt gemaakt worden van custom post types. De meest eenvoudige manier om dit te doen is via de plugin Custom Post Type UI. Deze plugin laat toe via een gemakkelijke interface nieuwe custom post types te creëren evenals taxonomies. Figure 49 Toevoegen Custom Post Type Locatie Door deze plugin te gaan combineren met de plugin Advanced Custom Fields kunnen er ook aan de nieuw aangemaakte Post Type velden toegevoegd worden. Figure 50 Toeovoegen eigen velden aan de post ype "Locatie" 33

42 Na het aanmaken van deze eigen Post Type zal er in het WordPress menu een nieuwe item verschijnen. Nu kan de gebruiker dus post gaan toevoegen van het type locatie. Een voorbeeld hiervan is te bekijken in onderstaande afbeelding. Figure 51 Toevoegen van de locatie "Brugge" Ook is het mogelijk de reeds bestaande Posts te voorzien van extra velden. Voor de website van BlueWave is dit gedaan om cases toe te voegen. Het Type Post is dus uitgebreid met extra velden om te voldoen aan alle benodigdheden voor een portfolio artikel. Figure 52 Extra velden voor het aanmaken van een portfolio artikel 34

43 Om nu via PHP de locaties op te vragen moet er gebruik gemaakt worden van de WordPress loop. Door argumenten te specifiëren kan er aangegeven worden van welke categorie de posts moeten zijn, de hoeveelheid, sorteervolgorde enz. Figure 53 Ophalen locaties 3.2 WEBSITE LAY-OUT Een aantrekkelijke, fraai ogende website is uiteraard heel belangrijk. Het is dus van groot belang goed na te denken over de indeling van de website. Meestal is het eerste wat een designer gaat doen het schetsen van de website in wireframes. Dit gaat ervoor zorgen dat hij reeds een goed beeld kan vormen over hoe de website er zal uitzien zonder al heel specifiek te denken naar opmaak. Schetsen kunnen immers snel bijgewerkt worden. Een voorbeeld van een wireframe voor de homepage staat hieronder. Figure 54 Wireframe van de home pagina 35

44 De volgende stap is het uitwerken van de schetsen in Photoshop, hierbij gaat nu echt al gelet worden op de kleurencombinaties, lettertypes, foto s enz. Eens dit klaar is, en goedgekeurd door de klant (in dit geval het stagebedrijf) kan dit omgezet worden naar HTML en CSS. In dit geval via een WordPress template. Het uitwerken van een basistemplate kwam reeds eerder aan bod. 3.3 RESPONSIVE DESIGN Responsive design is een benadering waarbij de ontwikkelaar streeft naar de optimale ervaring voor een breed gamma aan apparaten, denk aan desktops, tablets en smartphones. Het is de bedoeling dat de website mee gaat schalen volgens de afmetingen van een scherm. Dit omdat een website op alle scherm resoluties goed leesbaar en overzichtelijk moet blijven. Een relatief eenvoudige manier om dit te gaan doen is door te werken via het framework Twitter Bootstrap. Kort gezegd Bootstrap is een gratis front-end framework dat verschillende tools omvat voor het creëren van websites en web applicaties. Het omvat heel wat HTML en CSS gerelateerde templates om het de ontwikkelaar eenvoudiger te maken een consistente website te bouwen. Een van deze beschikbare tools is het Grid systeem. Deze tool zou het de ontwikkelaar eenvoudiger moeten maken om een responsive lay-out te creëren. Het systeem kan 12 kolommen bevatten die zichzelf gaan schalen naar de schermgrootte van een toestel. Door het toevoegen van klasses aan de HTML code zal de lay-out zich gaan aanpassen aan een schermgrootte. Een voorbeeld is hieronder beschikbaar. Figure 55 Voorbeeld responsive lay-out 36

45 De code om deze structuur te bekomen ziet er uit als volgt: Figure 56 HTML met bootstrap klasses Alvorens er een indeling gemaakt kan worden in kolommen, moet er aan het bovenliggende element de klasse row toevoegt worden. Nu zullen de elementen weten dat ze zich horen te gedragen volgens het Grid systeem van Bootstrap. Een volgend aandachtspunt is da de som van het aantal kolommen altijd moet uitkomen op twaalf. Bij de tweede rij gaat de eerste kolom acht van de twaalf kolommen gaan innemen. De tweede kolom zal 4 kolommen ruimte in nemen. Wanneer de schermresolutie gaat verkleinen, bijvoorbeeld in plaats van een weergave op tablet een weergave op smartphone, dan gaan de kolommen zich onder elkaar gaan nestelen in plaats van naast elkaar. Dit omdat er op een smartphone te weinig ruimte is om alles naast elkaar weer te geven, tevens swipen de gebruikers naar beneden wanneer men verder wil gaan lezen. 37

46 3.4 FACEBOOK SHARING Wanneer een webpagina gedeeld wordt op Facebook, dan gaat Facebook zijn informatie halen via de Open Graph tags. Belangrijke tags zijn oa. Title, site_name, url, description, image en app_id. De eerste tags heoevn weinig uitleg. De app ID is een een uniek ID dat er voor zorgt dat Facebook weet wat de identiteit van de website is. Enkele voorbeelden: <meta property="og:title" content="workday Sets Price Range for I.P.O." /> <meta property="og:site_name" content="my Favorite News"/> <meta property="og:url" content=" /> <meta property="og:description" content="workday, a provider of cloud-based applications for human resources, said on Monday that it would seek to price its initial public offering at $21 to $24 a share. At the midpoint of that range, the offering would value the company at $3.6 billion. Like many other technology start-ups, Workday, founded in 2005, will have a dual-class share structure, with each Class B share having 10 votes. Its co-chief executives, David Duffield, the founder of PeopleSoft, and Aneel Bhusri, who was chief strategist at PeopleSoft, will have 67 percent of the voting rights after the I.P.O., according to the prospectus." /> Deze OpenGraph tags worden geladen bij het opstaren van een webpagina. Achteraf kunnen deze niet meer gewijzigd worden. Wanneer er dus sprake is dat er dynamisch zou moeten content gedeeld worden met Facebook, dan zijn deze tags dus niet de oplossing. Een oplossing hiervoor is het gebruiken van de Facebook SDK voor Javascript. Dit laat toe om like buttons, sociale plugins, Facebook logins te gebruiken op een website. Een voorbeeld hierbij was het gebruiken van de SDK voor het delen van locaties. Figure 57 Delen van locaties te Antwerpen 38

47 Bij het klikken op de Facebook knop zal er een javascript functie uitgevoerd worden namelijk fb_callout. Deze functie zorgt ervoor dat de SDK geladen zal worden. Figure 58 Maken van een Facebook knop Figure 59 Inladen van de Facebook SDK Hierna zal de Javascript SDK ingeladen worden waarbij de correcte APP_ID moet ingegeven worden. Via de FB.ui kunnen er extra parameters mee gegeven worden om zo de Feed Dialog te voorzien van data. Deze data werd bij het klikken op de Facebook knop opgevraagd en kan nu ingevuld worden als waarden voor de paramters. Figure 60 Invullen paramaters 39

48 3.5 TWITTER SHARING Om de Twitter button waarden mee te geven die gedeeld moeten worden op twitter kunnen volgende eigenschappen gebruikt worden. Deze waarden moeten ingevoerd worden als via een query string. Data Source Share query string data- attribute of anchor tag Priority 1 2 URL To Tweet url Data-url Via user Via Data-via Tweet text Tekst Data-tekst Language Lang Data-lang Hashtags Hashtags Data-hashtags Een voorbeeld van een statische knop kan er zo uitzien: <a href=" class="twitter-share-button" dataurl=" data-via="your_screen_name" data-lang="en" data-related="anywherethejavascriptapi" data-count="vertical">tweet</a> <script>!function(d,s,id){var js,fjs=d.getelementsbytagname(s)[0];if(!d.getelementbyid(id)){js=d.createelement(s);js.id=id;js.src=" tter-wjs"); </script> HTML code voor het maken van de Twitter knop Figure 61 Html voor een Twitter share knop 40

49 Het is echter niet zo eenvoudig om deze query string met correcte parameters te laten genereren. Onderstaande code is hierin geslaagd. Figure 62 Maken van de querystring Via setattribute kunnen er attributen toegevoegd worden aan de HTML knop, in deze attributen zal de data zitten die getoond zal worden bij het plaatsen van de tweet. Het data-url attribuut bevat de link naar waar de tweet moet verwijzen, het data-tekst attribuut gaat het opschrift voor de tweet bevatten. De functie die daarop volgt zal voor de knop de querystring gaan aanmaken met de eerder ingegeven attributen. Zo kan er dynamisch data gewijzigd worden voor de Tweet knop. 41

50 3.6 WERKEN MET GOOGLE MAPS De documentatie van Google voor het maken van een kaart met een locatie is heel goed. Echter voor het plaatsen van meerdere locaties op een kaart met bijhorende markering van het adres verliep niet zo eenvoudig. Onderstaande code hiervoor zal worden toegelicht. 42 Figure 63 Tonen van meerdere adressen met infowindow