Ontwikkelen interactief platform duiken.be

Ontwikkelen interactief platform duiken.be

Project aangeboden door Thomas Ampen voor het behalen van de graad van Bachelor in de New Media and Communication Technology Academiejaar 2013-2014 Stageplaats : Progressive bvba Stagementor : Ruben Gekiere Stagebegeleider : Tim Vandendriessche

Thomas Ampen


Voorwoord Dit eindwerk kwam tot stand als onderdeel van de opleiding New Media and Communication Technology tot het behalen van het diploma Bachelor in de New Media and Communication Technology. Hierbij wil ik graag van de gelegenheid gebruik maken om enkele personen te bedanken die geholpen hebben bij de realisatie van de bachelorproef en het project die werd verwezenlijkt tijdens de stage. Eerst en vooral wil ik Dhr. Frederik Gekiere en Dhr. Ruben Gekiere, de zaakvoerders van Progressive bvba, bedanken voor de opvolging en constructieve feedback bij het project. Ten tweede wil ik Dhr. Tim Vandendriessche bedanken voor de opvolging en feedback op de blog en de bachelorproef. Daarnaast wil ik ook Dhr. Brecht Geerardyn bedanken voor de feedback op de bachelorproef. Tot slot wil ik mijn ouders bedanken voor de hulp die zij hebben geboden om dit eindwerk, en meer algemeen, de opleiding New Media and Communication Technology tot een goed einde te brengen.

Thomas Ampen


Samenvatting Tijdens mijn stageperiode heb ik één grote opdracht gekregen. De website www.duiken.be is een persoonlijk project van Frederik Gekiere, de website is reeds tien jaar oud en gezien de leeftijd was het dringend aan een herontwikkeling toe. Met dit document is het de bedoeling om mijn werking tijdens het creëren van de backend van een meer interactief platform toe te lichten. De nieuwe website werd reeds voorzien van een layout twee jaar geleden en er werd door het bedrijf besloten om gebruik te maken van het CMS systeem Umbraco. Om up-to-date te blijven met de hedendaagse technologieën wordt het Entity Framework met de code first techniek toegepast.

Thomas Ampen


Verklarende woordenlijst Open-source software: Computersoftware waarvan de broncode vrij beschikbaar is met een licentie waarbij je zelf de software mag bestuderen, aanpassen en zelf verspreiden. Framework: Een geheel van softwarecomponenten dat gebruikt kan worden bij het programmeren van applicaties. ORM: Object-relational mapping is een techniek om data te converteren tussen niet compatibele systemen in een objectgeoriënteerde programmeertaal. Dit creëert een virtuele object database die kan worden aangesproken in een programmeertaal. API: Een verzameling van definities waarop een applicatie zich baseert om te communiceren met een andere applicatie of onderdeel van een applicatie. Razor: Razor is een programmeersyntax die gebruikt wordt bij dynamische webpagina’s in combinatie met C# of VB.NET. Het laat toe om server-based code te gebruiken op webpagina’s.

Thomas Ampen

Afkortingen EF: Entity Framework ORM: Object-relational mapping MVC: Model-view-controller CMS: Content management system DOM: Document Object Model MSDN: Microsoft Developer Network HTML: Hypertext Markup Language CSS: Cascading Style Sheet API: Application Programming Interface Id: Identifier GUID: Globally Unique Identifier


Thomas Ampen


Inhoudstafel Voorwoord................................................................................................... Samenvatting .............................................................................................. Verklarende woordenlijst ............................................................................... Afkortingen ................................................................................................. Inhoudstafel .............................................................................................. 7 Inleiding.................................................................................................... 9 Stagebedrijf ............................................................................................ 9 Praktische informatie ............................................................................... 9 Stageopdracht ...................................................................................... 10 Concreet .............................................................................................. 11 Tools ...................................................................................................... 12 Adobe Photoshop CS6 ............................................................................ 12 Visual Studio 2013 ................................................................................. 12 Chrome DevTools .................................................................................. 12 SQL Server Management Studio .............................................................. 12 Technologiën ........................................................................................... 13 .NET framework .................................................................................... 13 Entity Framework .................................................................................. 13 Javascript ............................................................................................. 13 AngularJS ............................................................................................. 13 HTML ................................................................................................... 14 CSS ..................................................................................................... 14 Umbraco ................................................................................................. 15 CMS ..................................................................................................... 15 Waarom Umbraco .................................................................................. 15 Rondleiding........................................................................................... 16 Settings ............................................................................................. 16 Users ................................................................................................ 17 Content ............................................................................................. 18 Database................................................................................................. 19 7

Thomas Ampen


Gebruiker ............................................................................................. 19 Organisaties ......................................................................................... 20 Adres ................................................................................................ 20 Abonnementen ................................................................................... 21 Website................................................................................................... 22 Inleiding ............................................................................................... 22 MVC .................................................................................................. 22 Code first ............................................................................................. 23 Klassen ............................................................................................. 23 Relaties ............................................................................................. 24 DbContext ......................................................................................... 24 Migrations .......................................................................................... 25 Layout ................................................................................................. 27 Menu................................................................................................. 27 Beveiliging ............................................................................................ 29 Membershipprovider............................................................................ 29 Roleprovider ...................................................................................... 30 Controllers ............................................................................................ 30 Organisaties ....................................................................................... 31 Authenticatie ...................................................................................... 34 Profiel ............................................................................................... 38 Blog .................................................................................................. 40 Advertenties....................................................................................... 42 Overzichtspagina’s ................................................................................. 45 ShoplistController ............................................................................... 46 Contentfinder ........................................................................................ 48 Conclusie ................................................................................................ 50 Links .......................................................................................................... Figurenlijst ..................................................................................................

8

Thomas Ampen


Inleiding Stagebedrijf

Figuur 1 Logo Progressive

Progressive bvba is een jong IT bedrijf dat werd opgericht door Ruben Gekiere en Frederik Gekiere in 2014. Progressive bvba is gespecialiseerd in het ontwikkelen van websites, .Net webdevelopment en andere webgerelateerde toepassingen. Er wordt zowel gewerkt aan interne projecten als aan projecten bij klanten als consultant. Deze projecten worden met de meest gangbare technologieën tot stand gebracht, denk hierbij aan HTML5, CSS3, JQuery, ASP.NET MVC 4, Entity Framework.

Praktische informatie Industriezone 5 De Tonne 117 9800 Deinze Tel: 0494/23.20.18 Email: [email protected] Website: www.progressive.be

9

Thomas Ampen


Stageopdracht

Figuur 2 www.duiken.be

De website www.duiken.be werd ruim tien jaar geleden ontwikkeld. Het is een verzamelplaats van links naar andere duikwebsites (winkels, clubs, duikplekken, enzovoort) met een zelfontwikkeld forum. Het forum wordt nog steeds zeer intensief gebruikt. Gezien de leeftijd van het platform is het aan een herontwikkeling toe. Het nieuw grafisch ontwerp werd reeds twee jaar geleden ontworpen maar het platform zelf, de backend, moet nog worden ontwikkeld. Het moet een meer sociaal platform worden naar de sector toe, met een blog, reclame, overzicht pagina’s van winkels, clubs en merken.

10

Thomas Ampen


Concreet Een gebruiker moet de mogelijkheid hebben om op overzichtspagina’s een gewenste club of winkel te vinden door gebruik te kunnen maken van zoekcriteria. Eén van deze criteria moet het mogelijk maken voor de gebruiken om te zoeken binnen een bepaalde straal door gebruik te maken van de Google Maps API. De gevonden zoekresultaten moeten ook weergegeven worden op een Google Maps kaart. Een gebruiker moet zich in kunnen loggen om zo op een afgeschermd deel van de website te komen. Een gebruiker kan verschillende rollen aannemen en op basis van deze rollen zal deze gebruiker toegang verkrijgen tot delen van de website. Een gebruiker kan een beheerder zijn van een merk, winkel en/of club. Op basis van deze gegevens moet een gebruiker een pagina verkrijgen waarop het mogelijk is de bijhorende gegevens in te vullen. De gegevens die worden ingevuld door een gebruiker die beheerder is van een merk, winkel en/of club moeten door een administrator eerst worden goedgekeurd vooraleer deze info wordt weergegevens op de website. Een administrator moet een overzicht hebben van alle gebruikers en de organisaties (merken, clubs en winkels). Daarbij moet er ook een overzicht beschikbaar zijn van de advertenties en abonnementen. Een beheerder van een merk of winkel moet een aanvraag kunnen indienen om na betaling meer info weer te geven op een detailpagina van zijn organisatie.

11

Thomas Ampen


Tools Adobe Photoshop CS6 Het gekende programma Adobe Photoshop is een grafisch programma om fotomateriaal te bewerken en biedt de mogelijkheid grafische ontwerpen te creëren. Het programma werd tijdens de opdracht vooral gebruikt om een mockup te maken van een bepaalde pagina om een beter idee te krijgen i.v.m. het positioneren van afbeeldingen en tekst.

Visual Studio 2013 Microsoft Visual Studio is een programmeerontwikkelomgeving, het biedt ontwikkelingstools om computerprogramma’s te schrijven in verschillende talen. Verder bestaat het programma uit compilers en een debugger en wordt de MSDNlibrary meegeleverd, het programma is ontwikkeld om het .NET-framework te ondersteunen.

Chrome DevTools Chrome DevTools of in Chrome beter bekend als Developer Tools, is standaard aanwezig in de browser. Deze tool voorziet een ontwikkelaar van enkele essentiële hulpmiddelen bij het ontwikkelen van een website. Zo is er de mogelijkheid om on the fly CSS en HTML aan te passen, kun je te weten komen hoe snel javascript bestanden laden en bestaat de mogelijkheid om de DOM structuur te bekijken en live aan te passen.

SQL Server Management Studio Om een grote hoeveelheid data te kunnen opslaan is er nood aan een database. Deze database moet kunnen worden beheerd, hiervoor is SQL Server Management Studio een geschikt programma. Het is mogelijk een database aan te maken, een tabel te wijzigen, data te manipuleren al dan niet door SQL query’s te schrijven en uit te voeren.

12

Thomas Ampen


Technologiën .NET framework .NET is een applicatieframework die zorgt voor een samenwerking van applicaties en bibliotheken die geschreven zijn in verschillende programmeertalen. Het bestaat uit een groot aantal klassen die een ontwikkelaar kan gebruiken met het ontwikkelen van een eigen programma. Daarbij zit ook een virtueel executiesysteem en compilers om de broncode om te zetten naar een tussenlaag. Deze tussenlaag wordt dan door een compilatie omgezet naar machinetaal en kan zo worden uitgevoerd.

Entity Framework Het Entity Framework is een Object-Relational Mapping framework dat ontwikkelaars toelaat om te werken met relationele data alsook domain-specific objecten. Zonder nog zelf data access code te moeten schrijven. Het geeft de ontwikkelaar een automatisch mechanisme voor het aanspreken als het opslaan van data in een database en om te werken met de resultaten zonder een dataset of datareader nodig te hebben. ORM is een hulpmiddel voor het opslaan van domain objecten naar relationele databases zoals Microsoft SQL Server in een geautomatiseerde manier zonder zelf nog veel te moeten programmeren.

Javascript Javascript is een scripttaal die gebruikt wordt om webpagina’s interactief te maken. De code wordt uitgevoerd op de computer van de bezoeker van een webpagina, vaak om asynchrone communicatie uit te voeren, een document dynamisch aan te passen.

AngularJS AngularJS is een open-source framework dat helpt bij het maken van web applicaties. Enkel HTML, CSS en javascript dient aanwezig te zijn bij de bezoeker van de webpagina. Het voordeel van deze technologie is dat er gebruik kan worden gemaakt van het MVC patroon.

13

Thomas Ampen


HTML HyperText Markup Language is een taal die gebruikt wordt om documenten te creëren op het World Wide Web. Html definieert de structuur en de lay-out van een webdocument door middel van voorgedefinieerde tags en attributen. De correcte structuur van een HTML document begint met een daarna de en tot slot . Alle informatie die moet worden weergegeven aan de eindgebruiker dient tussen de body tags te komen, in de head tags komen referenties naar javascriptbestanden en CSS bestanden.

CSS Cascading Style Sheets zijn stijlbladen die zorgen voor de vormgeving van HTMLcode. Op deze manier wordt de opmaak van de feitelijke inhoud gescheiden.

14

Thomas Ampen


Umbraco CMS Een contentmanagementsysteem is een systeem dat wordt gebruikt om de inhoud op een website te beheren zonder hier veel technische kennis voor nodig te hebben. Het systeem maakt het mogelijk om op een eenvoudige manier teksten zonder lay-out, documenten en andere content op een website te publiceren. De ingevoerde teksten worden met een lay-out door toepassing van een sjabloon weergegeven aan de eindgebruiker.

Waarom Umbraco

Figuur 3 Logo Umbraco

Umbraco is een open course CMS die een grote flexibiliteit biedt om zowel kleine blogs als grote complexe websites te bouwen. Umbraco maakt gebruikt van ASP.NET en draait daarom ook op een Windows server. Het systeem zorgt ervoor dat je volledige vrijheid hebt van design en mark-up om zo tot een op maat gemaakt eindproduct te komen die later nog kan worden uitgebreid. De flexibiliteit van het CMS is groot door de mogelijkheid om eigen documenttypes aan te maken en datatypes. Zo is het eenvoudig om tekst, afbeeldingen, rich tekst editor, … toe te voegen aan een documenttype. Deze documenttypes beschrijft de content die zal te zien zijn op een pagina. Het CMS kan aangesproken worden met Razor en zo is het mogelijk om zelf toegevoegde eigenschappen als een afbeelding of een extra titel,… aan te spreken.

15

Thomas Ampen


Rondleiding Om toegang te verkrijgen tot het CMS is het voldoende om ‘/umbraco’ te typen na de domeinnaam van de site. Door naar deze URL te surfen wordt een inlogscherm weergegeven en kan er worden aangemeld.

Figuur 4 Inlogscherm Umbraco

Nadat er succesvol werd aangemeld wordt de content weergegeven in de vorm van een lijst. Deze lijst is een lijst van zelf gemaakte templates met al dan niet zelf toegevoegde eigenschappen.

Settings

Figuur 5 Settings lijst

Onder de tab settings zijn alle opties te vinden die te maken hebben met het aanmaken, stijlen van een pagina. Onder stylesheets bevinden zich alle css bestanden die zorgen voor de opmaak van een pagina. Scripts bevat alle javascript bestanden om dynamische bewerkingen uit te voeren op een pagina. Daarnaast bevat deze tab een optie om een woordenlijst bij te houden als een een site wordt gemaakt die moet weergegeven worden in meerdere talen. Ook bevinden de partial views zich hier, dit zijn views die onderdeel zijn van een hoofdpagina. De belangrijkste opties zijn echter ‘document types’ en ‘templates’.

16

Thomas Ampen


Documenttypes en templates

Figuur 6 Overzicht documenttypes Umbraco

Bij het aanmaken van een nieuw documenttype zijn er reeds enkele voorgedefinieerde eigenschappen, zoals: naam, alias, beschrijving,… Naast deze standaardeigenschappen bestaat hier de mogelijkheid om zelf eigenschappen toe te voegen. Deze eigenschappen zijn afhankelijk van de content die een pagina moet bevatten. Onder een eigenschap verstaan we een afbeelding, extra tekstveld, een combobox,… Verder bestaat de mogelijkheid om aan te geven welke andere documenttypes dit documenttype als child item kan bevatten, op deze manier is het mogelijk een container te creëren voor types. In dit voorbeeld werden enkele tabs onder een type aangemaakt waaronder bepaalde eigenschappen zitten. Nadat er een documenttype werd aangemaakt wordt de mogelijkheid gepresenteerd om onmiddellijk een template van dit type aan te maken. In deze template wordt de html, Razor,... code geschreven.

Users

Figuur 7 Members Umbraco

In de database is een gebruikstabel en een tabel met rollen voorzien. Deze tabellen worden gebruikt voor het inlogsysteem, bij het aanmaken van een custom roleprovider en membershipprovider wordt er geërfd van een Umbraco klasse waardoor de data van de database ook zal opgenomen worden in het CMS. Hierdoor kan beveiliging op pagina’s worden ingesteld en kunnen gebruikers eenvoudig worden beheerd. 17

Thomas Ampen


Content

Figuur 8 Overzicht Umbraco

Zoals eerder vermeld wordt een overzicht weergegeven van content in de vorm van een lijst na het aanmelden. Deze content kan worden aangemaakt aan de hand van de eerder gedefinieerde documenttypes. Na het aanmaken van een item onder de root wordt een pagina aangemaakt van een welbepaald gekozen type. Hierna kan de effectieve inhoud van de pagina worden ingegeven en de eerder zelf gedefinieerde eigenschappen van een bepaald type kunnen ook hier worden ingesteld.

Figuur 9 Tabs Umbraco

De eigen toegevoegde tabs krijg je te zien bij het selecteren van een item in de lijst. Enkele standaardtabs zijn al voorzien zoals SEO en Properties, de eerste tab kan worden weggelaten en in de tweede krijg je algemene info. Denk hierbij aan de gebruikte template, het id van een pagina, de auteur, enzovoort.

18

Thomas Ampen


Database Het project maakt gebruik van meerdere databases, namelijk één voor het CMS systeem, voor het forum en tot slot een database voor de effectieve backend van het project. De database van het CMS wordt gegenereerd tijdens de installatie van het CMS en de database van het forum werd reeds aangemaakt bij een vroegere versie van de website. Binnen de database van de backend kunnen enkele opdelingen worden gemaakt, namelijk:  

Gebruikers Organisaties o Subscriptions o Adres

Gebruiker

Figuur 10 Tabel gebruiker

Een gebruiker heeft een relatie met alle organisaties behalve een federatie. Een federatie kan namelijk niet worden beheerd, maar wordt wel weergegeven op een infopagina en moet door een administrator kunnen worden aangemaakt en aangepast. Daarnaast is een gebruiker gekoppeld aan een tussentabel die de rollen bijhoudt. De voorgedefinieerde rollen zijn: user, shopeditor, clubeditor, forumadmin en admin afhankelijk van de rol verkrijgt de gebruiker toegang tot welbepaalde pagina’s. Deze tussentabel is dan op zijn beurt gekoppeld aan een tabel met de mogelijke rollen.

19

Thomas Ampen


Organisaties

Figuur 11 Tabel organisaties

Bij de verschillende organisatie zijn er veel gelijke gegevens die worden bijgehouden. Daarom is er een hoofdtabel organisation die gekoppeld is aan de verschillende mogelijk organisatievormen. In de tabellen die gekoppeld zijn aan de hoofdtabel wordt de organisatie specifieke informatie bijgehouden.

Adres

Figuur 12 Tabel adres

Van elke organisatie wordt een adres bijgehouden, de tabel adres bevat de adresgegevens en is gekoppeld aan een tabel met alle provincies die dan op zijn beurt gekoppeld is aan een tabel met landen. Hierdoor bestaat de mogelijkheid om de site later nog uit te breiden voor buitenlandse organisaties.

20

Thomas Ampen


Abonnementen

Figuur 13 Tabel abonnementen

Om inkomsten uit de site te halen wordt er gewerkt met abonnementen en advertenties. Een advertentie kan worden aangemaakt in het CMS systeem en zal dan worden weergegeven op welbepaalde pagina’s. Het id van de advertentie wordt opgeslagen in de ‘advertisementSubscription’ tabel. Naast de advertenties bestaat de mogelijkheid om als organisatie een abonnement aan te vragen gedurende een bepaalde periode. Na ontvangst van betaling wordt dit abonnement op actief geplaatst en wordt een volledige detailpagina weergegeven. In de overige tabellen worden de gegevens van de organisatie opgeslagen.

21

Thomas Ampen


Website Inleiding MVC Model-view-controller is een softwarepatroon die software opdeelt in drie delen die onderling in verbinding staan met elkaar. Dit patroon wordt gebruikt in grotere toepassingen om de leesbaarheid en herbruikbaarheid van code te vergroten. Een model bevat de informatie waarmee een applicatie werkt. Een view zorgt voor de weergave van informatie, tot slot zorgt de controller voor de verwerking en reageert op events.

Model 4

3

Controller

View 1

2

User

1. Een view is wat een gebruiker te zien krijgt. 2. Een gebruiker gebruikt de view en voert acties uit op deze view waardoor er een event wordt gestuurd naar de controller. 3. De controller reageert op deze events en manipuleert het model. 4. Het model brengt de view op de hoogte dat een update nodig is, de view ontvangt deze melding en vernieuwt.

22

Thomas Ampen


Code first Om tot de databasestructuur te komen werd gebruikt gemaakt van de code first techniek. Bij deze techniek wordt eerst de data beschrijvende klassen geschreven, deze fungeren dan als model first waaruit de database gegenereerd wordt.

Klassen

Figuur 14 Klasse organisation

Zoals te zien is in de database is er een tabel ‘organisation’ die de algemene data bevat van de organisaties. In de code vertaalt dit zich naar een abstracte klasse met alle basiseigenschappen waarvan de organisaties erven.

Figuur 15 Klasse shop

Daarnaast is ook te zien in de database dat er voor elke soort organisatie nog een aparte tabel is voorzien, hiervoor is ook een aparte klasse nodig. In dit geval de klasse ‘shop’ die erft van ‘organisation’ zodat zowel de algemene eigenschappen als de specifieke eigenschappen worden bijgehouden.

23

Thomas Ampen


Relaties Na het aanmaken van de klassen moeten er ook relaties worden gelegd tussen de verschillende klassen. Dit kan door gebruik te maken van het keyword virtual.

Figuur 16 Relaties

Na het keyword virtual volgt op de eerste regel ‘ICollection’, door gebruik te maken van de ICollection interface wordt een lijst bijgehouden van ‘Brand’. Met andere woorden een een-op-veel relatie wordt hier aangemaakt. De tweede regel bevat één enkele gebruiker, dus gaat het over een een-op-een relatie.

DbContext Zoals vermeld is het entity framework een object-relational mapping framework dat toelaat om te werken met relationele data, zonder zelf data access code te moeten schrijven. De ontwikkelaar krijgt een automatisch mechanisme aangeboden voor het aanspreken van data zonder een dataset of datareader. De klasse die verantwoordelijk is om data aan te spreken als objecten is de DbContext klasse. Deze klasse houdt de entity objecten bij tijdens het uitvoeren van de code. Dit houdt in dat de context wordt opgevuld met data uit de database, veranderingen worden bijgehouden en zaken kunnen worden toegevoegd aan deze context. Bij het opslaan van de context worden de veranderingen doorgevoerd naar de database.

Figuur 17 Web.config connectionstring

In het bestand ‘Web.config’ wordt aangegeven waar de database zich bevindt, er wordt ook een naam meegegeven aan deze referentie. Verder kan ook meegegeven worden over welke soort database het gaat, timeout eigenschappen, de naam van de database en de locatie. In dit geval gaat het over een lokale database met de naam ‘duikenConnectionString’.

Figuur 18 Constructor DbContext klasse

Deze naam wordt gebruikt in de constructor van de DbContext zodat deze bij het initialiseren verbinding kan maken met die bepaalde database. De DbContext klasse bevat door het erven van ‘DbContext’ een methode ‘OnModelCreating’, in deze methode wordt enkel uitgevoerd bij het aanmaken van het model. 24

Thomas Ampen


Figuur 19 OnModelCreating methode

In deze methode kunnen relaties handmatig worden geconfigureerd en bepaalde standaardeigenschappen kunnen worden uitgezet. Standaard wordt bij het verwijderen van bijvoorbeeld een winkel een ‘cascade delete’ uitgevoerd. Dit betekent dat alles die verbonden is aan deze winkel ook zal worden verwijderd. Dit is niet wenselijk en werd dan ook uitgeschakeld. De veel-op-veel relaties worden ook in deze methode bijgehouden. In dit voorbeeld wordt een tussentabel aangemaakt om per winkel de merken bij te houden dit aangeboden worden.

Migrations De kracht van code first is dat de database automatisch wordt gegenereerd en bij veranderingen deze ook worden doorgevoerd. Om dit mogelijk te maken moet door gebruik te maken van de ‘Package Manager Console’ migrations worden ingeschakeld met het commando ‘Enable-Migrations’. Nadat dit commando werd uitgevoerd wordt een map ‘Migrations’ aangemaakt in het project. Deze map bevat reeds twee bestanden namelijk ‘Configuration’ en een initiële creëer migration bestand.

Figuur 20 Map migrations

Het configuratiebestand laat toe om het gedrag van de context aan te passen. Het tweede bestand geeft de objecten weer die worden aangemaakt in de database.

25

Thomas Ampen


Figuur 21 Constructor configuration bestand

In de constructor van het configuratie bestand kan er meegegeven worden dat aanpassingen automatisch worden uitgevoerd. In dit geval staat: ‘AutomaticMigrationDataLossAllowed’ op true omdat dit in een testfase is. Dit is natuurlijk niet wenselijk als er zich echte data in de database bevindt. Een andere handige methode die zich bevindt in het configuratiebestand is de ‘Seed’ methode. Deze methode maakt het mogelijk om de database op te vullen met testdata bij het starten van het project.

Figuur 22 AddDays methode

In de seed methode wordt bijvoorbeeld de methode ‘AddDays’ opgroepen en zo wordt de database onder andere gevuld met de dagen van de week.

26

Thomas Ampen


Layout Een website dient consistent te zijn opgebouwd, op deze manier is de website overzichtelijk voor een gebruiker en moet een ontwikkelaar niet op verschillende plaatsen een zelfde aanpassing maken. Om dit mogelijk de maken wordt er gebruik gemaakt van een master template namelijk ‘layout.cshtml’, dit is de hoofdpagina waarin de andere pagina’s worden geladen. Op deze manier is het enkel nodig om een footer, header en belangrijke referenties naar javascript en css bestanden te maken in het ‘layout.cshtml’ bestand en kunnen de overige pagina’s enkel inhoud bevatten. Door deze methode toe te passen wordt de html code veel overzichtelijker, naast de RenderPage methode om de pagina content op te halen wordt er ook gewerkt met partial views. Door middel van partial views kunnen bepaalde stukken code gescheiden worden wat het geheel nog meer overzichtelijk maakt. Bijvoorbeeld worden partial views gebruikt om de breadcrumbs weer te geven, advertenties en een inlogmenu bovenaan de pagina.

Menu

Figuur 23 menu

Zoals eerder vermeld in het onderdeel over het CMS, is het met Umbraco eenvoudig nodes aan te spreken door middel van code. In dit voorbeeld wordt door middel van Linq en Lambda expressies de nodes opgehaald van de root waarbij de parameter ‘IsVisible’ op true staat. In de foreach wordt gecontroleerd of de node de eerste, de laatste of huidige node is en zo wordt een css klasse indien nodig toegevoegd.

27

Thomas Ampen


Omdat er gevraagd werd om een submenu te maken in het hoofdmenu tot op twee niveaus wordt er in de foreach nog eens gecontroleerd of dat item childnodes heeft. Als dit het geval is, wordt een helper ‘subMenuItems’ aangeroepen

Figuur 24 Helper subMenuItems

Door toepassen van css wordt dit een uitklapmenu met het volgende resultaat:

Figuur 25 Menu resultaat

28

Thomas Ampen


Beveiliging Een gebruiker kan een eigenaar zijn van een club, merk of winkel. Omdat niet elke gebruiker toegang moet krijgen tot bepaalde pagina’s moet er een inlogsysteem worden gemaakt en een rechtensysteem worden voorzien. Om dit mogelijk te maken wordt een membership-en roleprovider aangemaakt.

Membershipprovider In ASP.NET is het mogelijk de klasse ‘MembershipProvider’ te implementeren om zo een eigen inlogsysteem te maken. Het CMS systeem waarmee gewerkt wordt biedt zelf een gelijkaardige klasse aan die ‘MembersMembershipProvider’ heet, hierdoor kunnen gebruikers beheerd worden in het CMS. Nadat een klasse de klasse MembersMembershipProvider implementeert, worden twee functies aangemaakt, namelijk: ValidateUser en GetUser.

Figuur 26 Functie ValidateUser

De eerste functie verifieert dat een gebruiker met dat bepaald wachtwoord bestaat.

Figuur 27 Functie GetUser

De tweede functie geeft informatie terug over een bepaalde gebruiker.

29

Thomas Ampen


Roleprovider ASP.Net voorziet ook een rechtensysteem door de klasse ‘RoleProvider’ te implementeren. Opnieuw wordt een gelijkaardige klasse meegeleverd door Umbraco gebruikt, namelijk ‘MembersRoleProvider’. Na het implementeren van deze klasse worden er een reeks functie toegevoegd, enkele belangrijke zijn: ‘IsUserInRole’, ‘GetUsersInRole’, ‘GetAllRoles’ en ‘GetRolesForUser’. Eén van de meest belangrijke functies in deze klasse is: ‘IsUserInRole’.

Figuur 28 Functie IsUserInRole

Deze functie is zeer belangrijk omdat hiermee kan na worden gegaan of een bepaalde gebruiker bijvoorbeeld al dan niet een administrator is.

Figuur 29 Functie GetRolesForUser

De functie ‘GetRolesForUser’ geeft een array terug van strings van alle mogelijk rollen. Dit wordt later gebruikt op de profielpagina, zodat een administrator rollen kan toewijzen aan gebruikers. De overige twee functies spreken voor zichzelf, ‘GetUsersInRole’ geeft een lijst terug met alle gebruikers die behoren tot een bepaalde rol. ‘GetAllRoles’ geeft een lijst terug met alle rollen.

Controllers Zoals aangegeven in de inleiding, zorgen controllers voor het opvangen van events en het manipuleren van de models. Er kunnen enkele opdelingen worden gemaakt in de controllers, namelijk een controller voor: organisaties, authenticatie, profiel, blog en advertenties.

30

Thomas Ampen


Organisaties Zoals te zien is in de database bevatten de organisaties gelijkaardige data, hierdoor zijn de controllers ook zeer gelijkaardig opgebouwd. Iedere controller van een organisatie bevat een constructor waarin alle repositories worden geïnitialiseerd. Er is een repository aangemaakt voor iedere entity, deze repository bevat functies om data op te halen van deze entity.

Figuur 30 constructor ClubSurfaceController

In dit voorbeeld wordt de controller van een club gebruikt. Daarnaast bevat iedere controller drie belangrijke functies namelijk: ClubEditForm, ClubEditFormPosted en GetSelectedClub.

GetSelectedClub

Figuur 31 Functie GetSelectedClub

Een beheerpagina kan op verschillende manieren benaderd worden. Zo kan een administrator aanpassingen maken als ook een beheerder van die pagina. Als een administrator een passing wenst te maken wordt een id meegegeven in de URL, deze parameter wordt omgezet naar een integer en op basis van de integer wordt door gebruik te maken van de clubrepository de desbetreffende club opgehaald. Als een gebruiker zijn club wil aanpassen wordt een guid meegegeven als parameter, deze parameter wordt ook omgezet naar het type guid en via deze waarde wordt opnieuw de desbetreffende club opgehaald. Maar indien een gebruiker de URL wijzigt om zo op een pagina te komen van iemand anders, zal toch zijn club worden opgehaald en weergegeven.

31

Thomas Ampen


ClubEditForm De beheerder van een organisatie verkrijgt toegang tot een pagina waar hij of zij informatie kan invullen over de welbepaalde organisatie.

Figuur 32 Club beheerpagina

Bij het laden van de pagina, wordt de functie ‘ClubEditForm’ opgeroepen

Figuur 33 Functie ClubEditForm

32

Thomas Ampen


Allereerst wordt de geselecteerde club opgehaald door middel van de functie ‘GetSelectedClub’. Indien een club volledig nieuw is, zal een null waarde worden verkregen. Hierdoor zal ook een leeg model terug gestuurd worden naar de view. Als de club niet null is, zal het ‘ClubEditFormModel’ worden opgevuld met de data van de club. Daarna zal het opgevulde model naar de view worden gestuurd.

ClubEditFormPosted

Figuur 34 Functie ClubEditFormPostd

Als een gebruiker de gegevens van de organisatie heeft aangepast, wordt de functie ‘ClubEditFormPosted’ opgeroepen. Hierin wordt eerst gecontroleerd of het model geldig is, met andere woorden dat het model voldoet aan de validatie. 33

Thomas Ampen


Daarna wordt ook hier de functie ‘GetSelectedClub’ opgehaald en gecontroleerd of het gaat om een nieuwe club. Als de club nieuw is, moeten enkele extra eigenschappen worden ingevuld zoals de creëerdatum en moeten enkele eigenschappen worden geïnitialiseerd. Als de club niet nieuw is worden enkele de velden upgedate die worden weergegeven aan de gebruiker.

Authenticatie De authenticatie controller wordt gebruikt bij het inloggen, registeren en als de gebruiker het wachtwoord van zijn account is vergeten. Ook bij deze controller wordt de repository geïnitialiseerd in de constructor. Enkel de ‘userRepository’ is hier belangrijk omdat er geen aanpassingen zullen worden gemaakt aan andere entiteiten.

Figuur 35 Constructor AuthenticationSurfaceController

Aanmelden

Figuur 36 Registreren pagina

Bij het laden van de pagina om te registeren wordt de functie ‘RegistrationForm’ opgeroepen.

Figuur 37 Functie RegistrationForm

Een leeg ‘RegistrationFormModel’ wordt verstuurd naar de gebruiker. 34

Thomas Ampen


Nadat de gebruiker de nodige velden correct heeft ingevuld wordt de functie ‘RegistrationFormPosted’ opgeroepen

Figuur 38 Functie RegistrationFormPosted

Een nieuwe User wordt aangemaakt en opgevuld met de data uit het model. Door middel van een functie ‘GetSecurePassword’ wordt een hash gegenereerd van het wachtwoord, zodat er geen plain tekst wachtwoorden in de database komen te staan.

Figuur 39 Functie GetSecurePassword

Er wordt gebruik gemaakt van de klasse SHA1Managed om een hash te creëren van het wachtwoord. SHA-1 is een cryptogrische hash functie die een hash weergeeft van veertig tekens. Tot slot wordt er een mail verstuurd naar de gebruiker met een activatielink. Een activatielink ziet er als volgt uit: ‘http://www.duiken.be/mijnaccount/activeren/?guid=3890f4d9-12bf-4334-9ba1-110035fee7a8’. Door naar deze link te surfen zal de guid die als parameter is meegegeven worden gebruikt als parameter om de desbetreffende gebruiker te zoeken in de database. Als de gebruiker bestaat, zal de kolom ‘TimestampActivated’ ingevuld worden.

35

Thomas Ampen


Inloggen Nadat een account werd aangemaakt en geactiveerd, kan een gebruiker inloggen.

Figuur 40 Login pagina

Bij het surfen naar de loginpagina wordt gelijkaardig aan de registreren pagina een leeg ‘LoginFormModel’ verstuurd. Bij het effectief inloggen wordt de functie ‘LoginFormPosted’ opgeroepen.

Figuur 41 Functie LoginFormPosted

Als de gebruiker zich probeert aan te melden met een bestaand account die nog niet is geactiveerd, zal opnieuw een mail worden verstuurd naar deze gebruiker. De gebruiker ontvangt ook een bijhorende boodschap dat het account eerst geactiveerd dient te worden vooraleer er kan worden ingelogd.

36

Thomas Ampen


Daarna wordt door middel van de eerder aangemaakte membershipprovider gecontroleerd of deze gebruiker voldoet aan alle voorwaarden. Er wordt een controle uitgevoerd of deze gebruiker de rol ‘User’ bezit. Als dit niet het geval is, betekent dit dat de gebruiker werd geblokkeerd, ook hier zal een passende boodschap worden getoond. Als de gebruiker wel in het bezit is van de rol ‘User’, zal een authenticatie cookie worden aangemaakt en wordt de gebruiker zo ingelogd.

Wachtwoord vergeten

Figuur 42 Wachtwoord vergeten pagina

Indien een gebruiker zijn wachtwoord vergeten is, kan hij terecht op de ‘wachtwoord vergeten’ pagina. Hier wordt eerst een pagina weergegeven waar de gebruiker zijn e-mailadres moet ingeven. Na het invullen van zijn adres, wordt de functie ‘SendPasswordReset’ opgeroepen en wordt een e-mail verstuurd met een reset link die er als volgt uitziet: ‘http://localhost:10353/mijnaccount/wachtwoord-vergeten/?guid=a921ca7d-d691-45fb-8c8d-adb2df6b85dd’

Figuur 43 Functie SendPasswordReset

Bij het surfen naar de reset link wordt de volgende pagina weergegeven.

Figuur 44 Wachtwoord instellen pagina

Nadat het nieuwe wachtwoord is ingesteld, kan de gebruiker zich aanmelden met het nieuwe wachtwoord.

37

Thomas Ampen


Profiel Om het profiel te wijzigen werd een ‘ProfileSurfaceController’ aangemaakt. Ook bij deze controller worden eerst de verschillende repositories geïnitialiseerd in de constructor. Deze controller maakt enkel gebruik van de user-en rolerepository.

Figuur 45 Constructor ProfileSurfaceController

Onderaan de pagina is het mogelijk om de rollen van een gebruiker in te stellen. De volgende weergave krijgt enkel een administrator te zien.

Figuur 46 Profiel wijzigen pagina

Een gewone gebruiker krijgt de mogelijkheid om de gegevens op zijn profiel te wijzigen op zijn gebruikersnaam na. Er is reeds een checkbox voorzien voor een latere implementatie van het forum. De gebruiker krijgt namelijk de keuze of hij al dan niet wil dat zijn e-mailadres zichtbaar is voor anderen.

38

Thomas Ampen


Bij het laden van deze pagina wordt de functie ‘ProfileEditForm’ opgeroepen

Figuur 47 Functie ProfileEditForm

De huidige gebruiker wordt opgehaald door middel van de ‘GetSelectedUser’ functie, verder wordt ook aan het model meegegeven indien deze gebruiker admin is. Als dit zo is, wordt ook een lijst met alle rollen meegegeven. Omdat het niet wenselijk is dat een gebruiker die beheerder is van een organisatie wordt verwijderd, wordt een boolean ‘hasOrganisations’ bijgehouden. Op deze manier krijgt een administrator een gepaste melding indien hij deze gebruiker wou verwijderen. Na het opslaan van de gegevens wordt de functie ‘ProfileEditFormPosted’ opgeroepen.

Figuur 48 Functie ProfileEditFormPosted

Hierin wordt opnieuw de gebruiker opgehaald en de nieuwe gegevens die werden verstuurd met het model meegegeven met het user object.

39

Thomas Ampen


Figuur 49 Functie ProfileEditFormPosted

Verder in deze functie wordt gecontroleerd of het e-mailadres werd gewijzigd. Als dit het geval is, zal een nieuwe activatiemail worden verstuurd naar de gebruiker.

Blog Een blogartikel wordt aangemaakt in het CMS systeem daarom werd ook gevraagd om de reacties niet in de database van de backend op te slaan, maar onder het artikel in het CMS. Om dit te verwezenlijken werd eerst een document type ‘BlogComment’ aangemaakt in het CMS. Hier werden de eigenschappen ‘UserID’ en ‘Message’ aan toegevoegd. Daarna werd een template gemaakt van dit type. Bij het klikken op een blogartikel wordt het blogitem opgehaald uit Umbraco. Blogitem is ook een eigen gedefinieerd documenttype.

Figuur 50 Constructor BlogItem

Een blogitem bevat de standaardeigenschappen zoals id, titel, intro,… Maar ook enkele zelf ingestelde eigenschappen als: allowComments, tags. In de klasse BlogItem wordt een lijst met reacties of ‘Comments’ bijgehouden, deze kunnen opgehaald worden met Linq.

40

Thomas Ampen


Figuur 51 Constructor Comment

Een reactie of ‘Comment’ bevat een id, user id, message en een aanmaakdatum.

Figuur 52 Blog artikel

Bij het laden van de pagina, worden de reacties door gebruik te maken van Razor weergeven. Om reacties te kunnen plaatsen wordt er gebruik gemaakt van javascript en Razor, bij het klikken op reageren wordt een post uitgevoerd met Razor en wordt het bericht ingegeven door javascript. Omdat de reacties in het CMS systeem moesten worden toegevoegd werd gebruik gemaakt van de Umbraco API.

Figuur 53 Functie replyPosted

Via ‘ApplicationContext.Services.ContentService’ is het mogelijk content te posten op het CMS systeem door middel van code. De parameters worden meegegeven met de methode ‘CreateContent’ die de gebruikersnaam, blogitem id, de titel en een ingebouwde umbraco User id vereist. 41

Thomas Ampen


Zoals te zien is op figuur 52 heeft een administrator de mogelijkheid een reactie te verwijderen of hij kan een hele reeks reacties verwijderen. Hiervoor wordt een javascript POST uitgevoerd naar de controller met als parameter een comment id of een array van comment id’s.

Figuur 54 Functie deleteComments

De array van comment id’s wordt als een JSON parameter in javascript verstuurd en dient daarom eerst te worden gedeserialiseerd. Het effectief verwijderen van een reactie wordt opnieuw gedaan door gebruik te maken van de Umbraco API.

Figuur 55 Functie DeleteComment

Advertenties De site haalt inkomsten uit advertenties en abonnementen. Een advertentie wordt aangemaakt in het CMS systeem, hier werd eerst een document type voor aangemaakt onder de settings tab. Een advertentie bevat de eigenschappen: title, url, image en remarks. Aan het document type ‘page’, wat de parent is van alle pagina’s met inhoud, werd een extra tab ‘Ads’ aan toegevoegd. Deze tab bevat een checkbox ‘Display on Subpages’, de checkbox biedt de mogelijkheid om advertenties op alle onderliggende pagina’s te tonen. Ook bevat deze tab een zelf aangemaakt data type waarin een lijst van advertenties kan worden gekozen.

Figuur 56 Tab Ads

42

Thomas Ampen


Om deze advertenties weer te geven werd ook een partial view aangemaakt. De reden dat er voor een partial view werd gekozen en geen normale view is omdat partial views geen layout hebben. Deze view wordt geladen in de ‘layout.cshtml’ view

Figuur 57 Partial view in Layou.cshtml

Figuur 58 Functie getAdFromPage

Om een advertentie te tonen op een pagina werd de functie ‘getAdFromPage’ geschreven. Bij het laden van een pagina wordt de partial view opgeroepen waarin deze functie zich bevindt. In de functie wordt een lijst met advertentie id’s opgehaald uit de database, daarna wordt de lijst met id’s van de advertenties van die bepaalde pagina opgehaald. Daarna wordt uit de overeenkomstige id’s uit beide lijsten een willekeurige advertentie gehaald en weergegeven. Naast de advertenties in het CMS systeem kunnen winkels en merken een abonnement betalen voor een bepaalde periode, standaard één jaar, om een volledige detail pagina te tonen op de website. Een eigenaar van een organisatie kan dit eenvoudig aanvragen door op de beheerpagina een uitgebreide fiche aan te vragen.

Figuur 59 Uitgebreide fiche aanvragen

Nadat een aanvraag door een eigenaar van een organisatie werd uitgevoerd, wordt de aanvraag toegevoegd in een lijst van abonnementen die enkel te zien is voor een administrator.

Figuur 60 Admin abonnementen pagina

43

Thomas Ampen


Nadat de betaling werd ontvangen, kan een administrator de aanvraag eenvoudig activeren door middel van de checkbox ‘Is actief’ aan te vinken. Op deze pagina kan een administrator handmatig abonnementen invoeren, het is ook hier dat een advertentie na het toevoegen in het CMS systeem moet worden toegevoegd aan de database van de backend.

Figuur 61 Advertentie toevoegen

De eerste combobox biedt de mogelijkheid om het type abonnement te kiezen, dit kan een abonnement zijn voor een merk, winkel, ... Maar het kan ook gaan om een advertentie.

Figuur 62 Functie GetChildClasses

De verschillende types kunnen met de functie ‘GetChildClasses’ worden opgehaald. Zoals te zien is in de database is er een hoofdtabel ‘Subscriptions’ die verbonden is aan verschillende soorten abonnementen. Bij het kiezen van het type ‘AdvertisementSubscription’ worden alle advertenties opgehaald uit het CMS systeem.

Figuur 63 Ophalen advertenties

Dit wordt verwezenlijkt door een combinatie van Razor en javascript. De Razor code haalt via Linq alle advertenties op, vervolgens worden deze door javascript toegevoegd aan een combobox.

44

Thomas Ampen


Overzichtspagina’s Naast de ledensectie en beheerpagina’s moet het voor een gewone gebruiker ook mogelijk zijn om een overzicht te krijgen van de verschillende clubs en winkels die geregistreerd zijn op de website. Er waren enkele vereisten voor deze pagina’s, zo moest er een Google Maps kaart worden weergegeven met markers die de clubs of winkels aanduiden. Er moest een zoekfunctie aanwezig zijn zodat gebruikers gemakkelijk een club of winkel konden vinden. Tot slot moest er bij winkels voorzien worden dat er kon worden gezocht binnen een bepaalde straal. De overzichtspagina voor winkel wordt gebruikt als voorbeeld omdat hier de geolocatie werd gebruikt. Om deze zoekfunctie te maken werd gebruik gemaakt van AngularJS, het is een open-source framework gemaakt door Google die HTML uitbreidt om eenvoudig dynamische pagina’s te creëren. Om gebruik te kunnen maken van AngularJS is het enkel nodig de javascript bestanden te includen en een attribuut ‘data-ng-controller’ toe te voegen aan een container div om de controller te definiëren.

Figuur 64 Attribuut data-ng-controller

Er werd gevraagd om te kunnen zoeken op provincie, openingsdagen, merken en product categorieën. De mogelijke criteria werd via Razor opgehaald en weergegeven.

Figuur 65 Zoekcriteria

Figuur 66 Weergave zoekcriteria

Het attribuut ‘data-ng-click’ is opnieuw een attribuut van AngularJS, door een checkbox aan te vinken zal de functie ‘search()’ worden opgeroepen in de ‘shoplistController’.

45

Thomas Ampen


ShoplistController

Figuur 67 ShoplistController

Bovenaan de controller wordt eerst de naam gedefinieerd van de controller. In de controller is de functie search aanwezig waarin de waarden van de zoekcriteria worden opgehaald door middel van javascript. De opgehaalde data wordt opnieuw via javascript verstuurd naar de functie ‘GetSearchResults’ in de shopcontroller door middel van een POST.

Figuur 68 Functie GetSearchResults

46

Thomas Ampen


De zoekcriteria worden echter effectief toegepast in de functie ‘GetShops’ in de shoprepository.

Figuur 69 GetShops

In de parameters worden de id’s meegegeven van de zoekcriteria, door het gebruik van ‘Intersect’ kunnen de id’s in lijst parameters vergeleken worden met de id’s uit de database. Op figuur 68 is te zien dat het resultaat wordt teruggestuurd naar de controller.

Figuur 70 Functie search bij succes

De winkels worden aan de scope van de controller toegevoegd en als de lijst met winkels niet leeg is, wordt een functie ‘showMarkers’ opgeroepen om de winkels aan te duiden op de Google Maps kaart. Het resultaat ziet er als volgt uit:

Figuur 71 Overzichtspagina winkels

47

Thomas Ampen


Contentfinder De detailpagina’s zijn pagina’s waarvan de data wordt geladen uit de database. De standaard URL van bijvoorbeeld een winkeldetailpagina was ‘http://www.duiken.be/winkels/shopdetail/1’, met deze link werd de winkel met id één weergegeven. Deze link is niet gebruikersvriendelijk en geeft ook niet veel informatie aan een gebruiker. Om een meer gebruiksvriendelijke URL te creëren werd een klasse ‘contentfinder’ aangemaakt die de interface ‘IContentFinder’ implementeert. Als een URL wordt ingegeven die niet wordt herkend, wordt de functie ‘TryFindContent’ opgeroepen in deze klasse. In deze functie wordt de URL verwerkt en indien nodig een organisatie of een blogartikel weergegeven.

Figuur 72 Splitten van de URL

De URL wordt eerst opgedeeld op basis van een forward slash. Daarna wordt een controle uitgevoerd of deze array uit meer dan één deel bestaat. Als er aan deze voorwaarde wordt voldaan, wordt er gecontroleerd of het eerste deel ‘winkels’, ‘merken’, ‘clubs’ is. Als het eerste deel één van de eerste drie woorden bevat wordt er gekeken naar het tweede deel van de array.

Figuur 73 Switch voor het type organisatie

Het tweede deel is een unieke naam van een organisatie, deze wordt opgezocht in de database en er wordt een string meegegeven waaronder een detailpagina is gekend in het CMS systeem.

48

Thomas Ampen


Figuur 74 Retournering detailpagina

Als er geen null waarde wordt ontvangen van de database wordt een route teruggegeven naar een behorende detailpagina en wordt een id van de organisatie bijgehouden. Als de gebruiker op de detailpagina komt van de organisatie, wordt door dit id de correcte organisatie opgehaald uit de database en weergegeven aan de gebruiker. Een voorbeeld van een meer gebruiksvriendelijke URL is ‘http://www.duiken.be/winkels/Javaro_Diegem’. Het resultaat ziet er als volgt uit:

Figuur 75 Detailweergave winkel

Indien er wel een null waarde wordt ontvangen van de database of als de organisatie niet op actief is geplaatst, zal een error pagina worden getoond.

Figuur 76 Error pagina

Naast de organisatie wordt dit systeem ook gebruikt om blogartikelen weer te geven bij het zoeken op een bepaalde tag. Bij het blog moet er echter niets opgezocht worden in de database maar enkel naar de juiste URL geretourneerd worden. Bij het retourneren wordt de tag meegegeven en deze kan worden opgezocht in het CMS systeem.

49

Thomas Ampen


Conclusie Tijdens de stageperiode heb ik heel wat bijgeleerd, niet enkel op het vlak van programmeren, maar ook over de dagelijkse werking binnen het bedrijfsleven. Hierbij heb ik het geluk gehad samen te werken met twee zeer gedreven personen die altijd constructieve en onderbouwde feedback gaven. Dankzij dit project heb ik verschillende zaken bijgeleerd met betrekking tot programmeren. Maar ook werken in team, timemanagement en zelfstandig werken waren belangrijke punten tijdens het project. Na zowel met het MVC-patroon te hebben gewerkt tijdens de lessen als tijdens de stageperiode is het duidelijk dat dit de nieuwe standaard wordt. Het vergt in het begin een kleine inspanning om aan te leren, maar in een middelgroot tot groot project waar met meerdere personen wordt aan gewerkt is het gebruiksgemak voor een ontwikkelaar zeer groot. Het CMS systeem Umbraco was voor mij volledig nieuw, de laatste paar jaar groeide het systeem uit tot een volwaardig CMS die enorm flexibel is. Hierdoor is het een uitermate geschikt CMS systeem voor op maat gemaakte .NET websites. Tot slot, een stage bij Progressive bvba kan ik aanraden aan iedere NMCT-er die geïnteresseerd is in webdevelopment. Je komt terecht tussen gedreven en gepassioneerde mensen die altijd klaar staan met constructieve feedback.

50

Thomas Ampen


Links      



   



 



“What is EF” http://entityframework.codeplex.com/ “What is Entity Framework?” http://www.entityframeworktutorial.net/what-is-entityframework.aspx “What is Angular?” https://docs.angularjs.org/guide/introduction “Content management system (CMS)” http://searchsoa.techtarget.com/definition/content-management-system “Working with DbContext” http://msdn.microsoft.com/nl-be/data/jj729737.aspx “RoleProvider Class” http://msdn.microsoft.com/enus/library/system.web.security.roleprovider.aspx “USING UMBRACO PIPELINE FOR MEMBER PROFILE URLS” http://creativewebspecialist.co.uk/2013/12/03/using-umbraco-pipelinefor-member-profile-urls/ “Umbraco Documentation” http://our.umbraco.org/documentation/ “Code First Migrations” http://msdn.microsoft.com/nl-be/data/jj591621.aspx#enabling “MSDN Library” http://msdn.microsoft.com/en-us/library/ms123401.aspx “Stackoverflow ‘entity object cannot be referenced by multiple instances of IEntityChangeTracker‘” http://stackoverflow.com/questions/10191734/entity-object-cannot-bereferenced-by-multiple-instances-of-ientitychangetracker Google Maps javascript v3 API https://developers.google.com/maps/documentation/javascript/tutorial?hl =nl “How to: Validate Model Data Using DataAnnotations Attributes” http://msdn.microsoft.com/en-us/library/ee256141(VS.100).aspx AuthorizeAttribute Class http://msdn.microsoft.com/enus/library/system.web.mvc.authorizeattribute.aspx Working with document types http://our.umbraco.org/wiki/how-tos/working-with-document-types

51

Thomas Ampen


Figurenlijst 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 Logo Progressive ........................................................................... 9 2 www.duiken.be............................................................................ 10 3 Logo Umbraco ............................................................................. 15 4 Inlogscherm Umbraco .................................................................. 16 5 Settings lijst ................................................................................ 16 6 Overzicht documenttypes Umbraco ................................................ 17 7 Members Umbraco ....................................................................... 17 8 Overzicht Umbraco ...................................................................... 18 9 Tabs Umbraco ............................................................................. 18 10 Tabel gebruiker.......................................................................... 19 11 Tabel organisaties ...................................................................... 20 12 Tabel adres ............................................................................... 20 13 Tabel abonnementen .................................................................. 21 14 Klasse organisation .................................................................... 23 15 Klasse shop ............................................................................... 23 16 Relaties .................................................................................... 24 17 Web.config connectionstring ........................................................ 24 18 Constructor DbContext klasse ...................................................... 24 19 OnModelCreating methode .......................................................... 25 20 Map migrations .......................................................................... 25 21 Constructor configuration bestand ................................................ 26 22 AddDays methode ...................................................................... 26 23 menu ....................................................................................... 27 24 Helper subMenuItems ................................................................. 28 25 Menu resultaat........................................................................... 28 26 Functie ValidateUser ................................................................... 29 27 Functie GetUser ......................................................................... 29 28 Functie IsUserInRole .................................................................. 30 29 Functie GetRolesForUser ............................................................. 30 30 constructor ClubSurfaceController ................................................ 31 31 Functie GetSelectedClub ............................................................. 31 32 Club beheerpagina ..................................................................... 32 33 Functie ClubEditForm .................................................................. 32 34 Functie ClubEditFormPostd .......................................................... 33 35 Constructor AuthenticationSurfaceController .................................. 34 36 Registreren pagina ..................................................................... 34 37 Functie RegistrationForm ............................................................ 34 38 Functie RegistrationFormPosted ................................................... 35 39 Functie GetSecurePassword ......................................................... 35 40 Login pagina.............................................................................. 36 41 Functie LoginFormPosted ............................................................ 36 52

Thomas Ampen

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

42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76


Wachtwoord vergeten pagina ...................................................... 37 Functie SendPasswordReset ........................................................ 37 Wachtwoord instellen pagina ....................................................... 37 Constructor ProfileSurfaceController ............................................. 38 Profiel wijzigen pagina ................................................................ 38 Functie ProfileEditForm ............................................................... 39 Functie ProfileEditFormPosted ...................................................... 39 Functie ProfileEditFormPosted ...................................................... 40 Constructor BlogItem ................................................................. 40 Constructor Comment................................................................. 41 Blog artikel................................................................................ 41 Functie replyPosted .................................................................... 41 Functie deleteComments ............................................................. 42 Functie DeleteComment .............................................................. 42 Tab Ads .................................................................................... 42 Partial view in Layou.cshtml ........................................................ 43 Functie getAdFromPage .............................................................. 43 Uitgebreide fiche aanvragen ........................................................ 43 Admin abonnementen pagina ...................................................... 43 Advertentie toevoegen ................................................................ 44 Functie GetChildClasses .............................................................. 44 Ophalen advertenties.................................................................. 44 Attribuut data-ng-controller ......................................................... 45 Zoekcriteria ............................................................................... 45 Weergave zoekcriteria ................................................................ 45 ShoplistController....................................................................... 46 Functie GetSearchResults ............................................................ 46 GetShops .................................................................................. 47 Functie search bij succes............................................................. 47 Overzichtspagina winkels ............................................................ 47 Splitten van de URL .................................................................... 48 Switch voor het type organisatie .................................................. 48 Retournering detailpagina ........................................................... 49 Detailweergave winkel ................................................................ 49 Error pagina .............................................................................. 49

53

Ontwikkelen interactief platform duiken.be

Recommend Documents