Scriptie ingediend tot het behalen van de graad van

PROFESSIONELE BACHELOR IN DE ELEKTRONICA-ICT

Intranet application based on ASP.NET,MVC4 and powered by Umbraco

Thomas Mulder en Wouter Ceulemans

Departement Wetenschappen en Techniek

Opleiding Elektronica-ICT

Academiejaar 2014-2015

Interne promotor: Marc SmetsExterne promotor: Bart De Meyer

Versie: 12 juni 2015

Dankwoord

Tijdens de voorbije maanden op onze stage hebben we niet enkel veel bijgeleerd door het werkenaan onze opdracht, maar ook van onze collega’s bij het .NET team hebben ons veel bijgebracht.Allereerst zouden we graag alle collega’s van dit team willen bedanken. Iedere ochtend kwamenwe samen om te scrummen. Zo konden snel problemen opgelost worden of nieuwe inzichtenverworven worden. Ook tussen scrum meetings door konden we steeds met onze problemenbij hen terecht en konden we delen in hun ervaring. Voor al de voorgaande redenen, alsookde aangename samenwerking en toffe sfeer, komen onze collega’s een oprecht woord van danktoe.

In het bijzonder komt onze appreciatie toe aan Thomas Ducheyne. Deze Junior .NET Developerheeft samen met ons aan het project gewerkt, ons bijgestaan in al onze perikelen en ons begeleidin ons leerproces. Wanneer we in de knoop zaten met iets konden we steeds rekenen op dehulp van Thomas. Hij heeft zijn best gedaan om onze stage zo leerrijk mogelijk te maken enons onze eigen ontdekkingen te laten maken. Hoewel Thomas zelf nog niet lang geleden deschoolbanken verlaten heeft, hebben we enorm veel van hem kunnen leren. We zijn hem danook op zijn minst onze dankbaarheid verschuldigd.

Aan het hoofd van het .NET team staat Bart De Meyer, onze promotor op ABC-Groep zelf.Vanzelfsprekend komt hem ook onze lof toe voor het sturen van ons project, het opvolgen vanonze planning, het doorlopen van onze code en algemene coaching. Door ons te betrekken inde teamwerking en ons project evenwaardig te behandelen als alle andere projecten hebben weniet enkel een grote meerwaarde gekregen voor ons project, maar ook mooi mogen ervaren hoehet eraan toe gaat in het bedrijfsleven. We hebben aan Bart niet enkel een mooi project tedanken, maar ook een fantastische begeleiding.

En laatst, maar niet allerminst is een woord van dank voor Marc Smets nog op zijn plaats. Alsonze interne promotor voor deze bachelorproef konden we steeds bij hem terecht met vragenof voor feedback op deze scriptie. We konden steeds rekenen op zijn opbouwende commentaaren kritische blik die ons bijstuurde waar nodig. Voor al de wijze raad, een woord van dank.

Antwerpen, 12 juni 2015Thomas Mulder & Wouter Ceulemans

i

Abstract

ABC-Groep is een consultancy bedrijf in de informatietechnologie, gespecialiseerd in verschil-lende domeinen van de IT-sector. Combineer deze verscheidenheid aan expertise met een grootaantal consultants en je krijgt een zeer divers bedrijf.

Om de communicatie binnen het bedrijf te vergemakkelijken, de beschikbare knowhow tefaciliteren en tevens het interne mailverkeer terug te dringen, was de nood aan een vernieuwdintranet groot. Het vorige intranet was minder praktisch en werd bovendien minder gebruiktdan oorspronkelijk gehoopt. De nood aan een stap vooruit kon niet genegeerd worden. Vanuitdeze gedachte is de opdracht voor deze bachelorproef ontstaan.

De nieuwe en verbeterde intranet-applicatie is opgebouwd rond het open source content ma-nagement systeem Umbraco, met behulp van het Model-View-Controller-model van ASP.NET,en vormgegeven met een Bootstrap template. Na het verwerken van alle requirements enspecifieke functionaliteiten was het resultaat een mooie en gebruiksvriendelijke omgeving.Hierop kunnen de werknemers van ABC-Groep de laatste nieuwigheden lezen, hun aanwezigheidop evenementen aangeven, technologische artikels schrijven, reacties plaatsen en veel meer.

Om aan alle vereisten te kunnen voldoen, zijn er naast het posten van verschillendesoorten inhoud in Umbraco nog een aantal op maat gemaakte functionaliteiten toegevoegdzoals het implementeren van Single-Sign-On met Active Directory Federation Services; eenuitgewerkt tag-systeem; aanwezigheid op evenementen en technische sessies doorgeven;accounts reserveren; ratings geven; integratie met de Exchange server, met de SharePointdocument library en met de andere ABC-Applicaties; en vele andere features.

Er kan geconcludeerd worden dat dit een zeer interessant project was met een uitdagendeleercurve, uiteenlopende taken en een mooi resultaat.

ii

Inhoudsopgave

Dankwoord i

Abstract ii

1 Situering 11.1 Stagebedrijf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Motivatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2.1 Wouter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2.2 Thomas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2.3 Samenwerking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.3 Aanleiding en analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3.1 Huidige situatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3.2 Doelstellingen en vereisten . . . . . . . . . . . . . . . . . . . . . . . . 4

2 Bespreking Intranet 52.1 Verklarende woordenlijst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2 Gebruikte technologieen en werkwijzen . . . . . . . . . . . . . . . . . . . . . 7

2.2.1 Umbraco CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.2.2 MVC4 & ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.2.3 Entity Framework 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.2.4 Jira . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.2.5 TeamCity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.2.6 SubVersion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.2.7 HipChat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.2.8 Lucene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.2.9 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.2.10 Glimpse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.3 Single sign-on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.4 PageBase en globale elementen . . . . . . . . . . . . . . . . . . . . . . . . . 15

2.4.1 PageBase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

iii

INHOUDSOPGAVE iv

2.4.2 Navigatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152.4.3 Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.4.4 Zijbalk widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.4.5 Reacties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.4.6 Pagina delen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.4.7 Gebruikersinstellingen . . . . . . . . . . . . . . . . . . . . . . . . . . 22

2.5 Inloggen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.6 Home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2.6.1 Sociale media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262.7 Nieuws . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

2.7.1 Standaard nieuwsberichten . . . . . . . . . . . . . . . . . . . . . . . . 322.7.2 Vastgezette nieuwsberichten . . . . . . . . . . . . . . . . . . . . . . . 322.7.3 Weergaven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332.7.4 Nieuwsbericht aanmaken in Umbraco . . . . . . . . . . . . . . . . . . 34

2.8 Knowledge Center . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352.8.1 Technologische artikels . . . . . . . . . . . . . . . . . . . . . . . . . . 362.8.2 Technische sessies . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362.8.3 Weergaven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

2.9 Evenementen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402.9.1 Evenementen aanmaken en beheren . . . . . . . . . . . . . . . . . . . 402.9.2 Weergaven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

2.10 Afdelingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442.10.1 Weergaven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452.10.2 HR Referral systeem . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

2.11 Reservaties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492.12 Zoeken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

2.12.1 Examine configureren . . . . . . . . . . . . . . . . . . . . . . . . . . 512.12.2 Examine & het intranet . . . . . . . . . . . . . . . . . . . . . . . . . 522.12.3 Zoekopdrachten uitvoeren . . . . . . . . . . . . . . . . . . . . . . . . 532.12.4 Zoekresultaten tonen . . . . . . . . . . . . . . . . . . . . . . . . . . 54

2.13 Notificaties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552.14 Beheer van de Umbraco backend . . . . . . . . . . . . . . . . . . . . . . . . 58

2.14.1 User permissions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582.14.2 Content tree structuur . . . . . . . . . . . . . . . . . . . . . . . . . . 592.14.3 Antwoorden op Evenementen . . . . . . . . . . . . . . . . . . . . . . 602.14.4 Admin sectie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612.14.5 Referral sectie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

2.15 Ophalen van data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

3 Resultaten 65

4 Besluit 67

INHOUDSOPGAVE v

A Handleiding Intranet 68A.1 Aanmelden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68A.2 Nieuws . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68A.3 Knowledge Center . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

A.3.1 Technologisch artikel . . . . . . . . . . . . . . . . . . . . . . . . . . . 69A.3.2 Extern technologisch artikel (Link) . . . . . . . . . . . . . . . . . . . 69A.3.3 Technische sessie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

A.4 Evenementen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71A.5 Accounts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72A.6 Afdelingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

A.6.1 FAQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72A.6.2 Extra Content Pagina . . . . . . . . . . . . . . . . . . . . . . . . . . 73A.6.3 Referral pagina (Enkel voor Human Resources) . . . . . . . . . . . . . 73

Lijst van figuren

2.1 Single Sign On met Active Directory Federation Services uitgelegd . . . . . . . 132.2 Loginscherm van de ADFS-server van ABC-Groep . . . . . . . . . . . . . . . 142.3 De navigatiebalk met breadcrumb bovenaan de website . . . . . . . . . . . . . 162.4 Hamburger-menu op de mobiele website . . . . . . . . . . . . . . . . . . . . 162.5 De footer onderaan de website . . . . . . . . . . . . . . . . . . . . . . . . . . 172.6 Het populaire items widget . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.7 Het gerelateerde items widget . . . . . . . . . . . . . . . . . . . . . . . . . . 192.8 Plaatsen van een reactie op een artikel . . . . . . . . . . . . . . . . . . . . . 202.9 Pagina delen: gebruikers zoeken . . . . . . . . . . . . . . . . . . . . . . . . . 212.10 Pagina delen: gebruikers geselecteerd . . . . . . . . . . . . . . . . . . . . . . 212.11 De gebruikersinstellingen van een gebruiker . . . . . . . . . . . . . . . . . . . 222.12 De homepagina bovenaan . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242.13 De homepagina onderaan . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.14 De twitter module met de recentste tweets . . . . . . . . . . . . . . . . . . . 282.15 De flickr module met enkele foto’s van ABC-Groep . . . . . . . . . . . . . . . 312.16 De nieuws overzichtspagina met bovenaan de vastgezette en onderaan de

standaard berichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332.17 De detailpagina van een nieuwsbericht zonder zijbalk . . . . . . . . . . . . . . 342.18 De knowledge center overzichtspagina met links de technologische artikels en

rechts de technische sessies . . . . . . . . . . . . . . . . . . . . . . . . . . . 352.19 De people picker in Umbraco . . . . . . . . . . . . . . . . . . . . . . . . . . 372.20 De detailpagina van een technologisch artikel zonder zijbalk . . . . . . . . . . 392.21 Vragen toegevoegd aan een evenement . . . . . . . . . . . . . . . . . . . . . 402.22 De lijstweergave van de evenementen . . . . . . . . . . . . . . . . . . . . . . 422.23 De kalenderweergave van de evenementen . . . . . . . . . . . . . . . . . . . . 432.24 De details van een evenement als widget . . . . . . . . . . . . . . . . . . . . 432.25 De reply widget waar de gebruiker zijn aanwezigheid kan doorgeven . . . . . . 442.26 Een FAQ pagina bij een afdeling . . . . . . . . . . . . . . . . . . . . . . . . . 452.27 De overzichtspagina met enkel afdelingen . . . . . . . . . . . . . . . . . . . . 46

vi

LIJST VAN FIGUREN vii

2.28 De detailpagina van de afdeling HR . . . . . . . . . . . . . . . . . . . . . . . 462.29 Het formulier om een referral in te sturen . . . . . . . . . . . . . . . . . . . . 482.30 De reeds ingestuurde referrals van een gebruiker . . . . . . . . . . . . . . . . 482.31 De reservatiekalender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492.32 Het reservatie formulier en de toekomstige reservaties van de huidige gebruiker 502.33 De zoekbalk bovenaan de webpagina . . . . . . . . . . . . . . . . . . . . . . 532.34 De zoekresultaten pagina . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552.35 Het notificatievenster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572.36 Een overzicht van enkele antwoorden op een event . . . . . . . . . . . . . . . 612.37 Het menu van de admin sectie . . . . . . . . . . . . . . . . . . . . . . . . . . 612.38 Het referral overzicht in Umbraco . . . . . . . . . . . . . . . . . . . . . . . . 62

Lijst van code fragmenten

2.1 Tweets ophalen uit database . . . . . . . . . . . . . . . . . . . . . . . . . . . 292.2 Flickr - Ophalen willekeurige foto’s . . . . . . . . . . . . . . . . . . . . . . . 302.3 App plugin - voorbeeld package manifest . . . . . . . . . . . . . . . . . . . . 372.4 Notificaties - Externe notificatie opslaan . . . . . . . . . . . . . . . . . . . . 582.5 Content tree structuur - Verplaatsen naar correcte folder . . . . . . . . . . . . 60

viii

Hoofdstuk1Situering

1.1 Stagebedrijf

Hoewel een stage op zich zonder een klassieke vorm van verloning is, kunnen we niet zeggen datwe na onze stage bij ABC-Groep met lege handen vertrokken zijn. Op de periode van enkelemaanden hebben we een veelheid aan kennis opgedaan door mee te mogen draaien in een IT-consultancy bedrijf met aandacht voor zijn werknemers, en bij uitbreiding dus ook stagiairs. Ditlaatste hebben we reeds eigenhandig mogen ondervinden in dochterbedrijf ACE, de ondernemingrond het .NET team van ABC-Groep. ACE is een Gold Microsoft-consultancybedrijf datzich bezighoudt met het Microsoft .NET-platform en Microsoft Dynamics-applicaties. Deondersteuning, raad en knowhow die we van de consultants van ACE kregen, was dan ooklegio. Kennis konden we ook verkrijgen door technische sessies bij te wonen die georganiseerdwerden door collega’s van ABC-Groep. Ook onze soft-skills werden na de Microsoft TeamMeeting bijgeschaafd door een gastspreker die het belang van de sales-vaardigheden van eenexterne consultant kwam aanstippen en verfijnen.

Niet enkel op gebied van ondersteuning in het project konden we rekenen op onze collega’s, maarook voor activiteiten buiten de werkuren waren we meer dan welkom. Zo organiseert ABC-Groepvoor al zijn werknemers en partners bijvoorbeeld maandelijks een movienight, waarop iedereenop kosten van de firma samen naar de bioscoop mag.

Naast een aangename ontvangst op het bedrijf was ook het project waaraan we mochten werkeneen van formaat waar we veel tijd hebben ingestoken, maar dus ook veel van hebben bijgeleerd.

1

HOOFDSTUK 1. SITUERING 2

1.2 Motivatie

1.2.1 Wouter

Ik ben iemand die heel graag bezig is met de ontwikkeling van .NET applicaties. Ik heb daaromook gezocht naar stageplaatsen die zich vooral hierop focusten. Uiteindelijk ben ik bij ABC-Groep terechtgekomen. Na een intake-gesprek en de verdere details over het project, was ikhelemaal overtuigd. Er kwamen ook nieuwe technologieen aan bod, waar ik naar uit keekom mee te leren werken. Daar het om een intranet-applicatie ging die het oude intranet vanABC-Groep moet vervangen, wist ik zeker dat de applicatie uiteindelijk in gebruik genomen zalworden. Tijdens onze opleiding hadden we meestal kleinere opdrachten of projecten om aan tewerken. De kans die ik kreeg om te mogen meewerken aan een project van veel grotere omvangwas ongetwijfeld ook een drijfveer voor mij.

1.2.2 Thomas

Bij de start van mijn studies wist ik nog niet welke richting ik uit wilde gaan met mijn verderecarriere, maar tijdens het doorlopen van de richting Elektronica-ICT is mijn interesse voor .NETdevelopment hoe langer hoe meer aangewakkerd. Bij de keuze van een stageplek was dit danook meteen de eigenschap waar ik naar op zoek ging. In de lijst met mogelijke stageplaatsenen opdrachten ben ik beginnen zoeken naar een plek waar ik naar mijn gevoel veel zou kunnenbijleren en waar waarschijnlijk een uitdagende opdracht op me zou staan wachten. Bij ABC-Groep, een Gold-partner van de opleiding, was dit hoe dan ook het geval. De mogelijkheidom ergens een volledig productieproces van een applicatie te kunnen doorlopen in teamverbandmet andere developers was ook een uitgelezen kans om een goede indruk te krijgen van hetbedrijfsleven. Na het eerste kennismakingsgesprek op kantoor was het voor mij duidelijk datik in een omgeving terecht zou komen waar ik goed opgevangen zou worden, en dat ik geenbetere stageplek zou hebben kunnen vinden in de lijst. ABC-Groep had me overtuigd, nu washet aan mij om me te bewijzen wat ik waard was.

1.2.3 Samenwerking

Zoals reeds vermeld in het dankwoord heeft Junior .NET Developer Thomas Ducheyne onszeer goed geholpen tijdens het ontwikkelen van dit project. Doordat we met 3 mensen aandit project moesten werken, was communicatie met elkaar van groot belang. Je moet rekeninghouden met iedereen zijn mening en de voor- en nadelen van elke idee afwegen. Hierdoorhadden we soms eens een kleine discussie, maar we zijn het altijd met elkaar eens geraakt. Debeslissingen die we genomen hebben zijn altijd ten goede geweest voor het project. We hebbenook steeds gezorgd dat de taken eerlijk verdeeld werden. Er waren zaken die op de frontendgedaan moesten worden en anderen in de backend. We hebben er altijd rekening mee gehouden

HOOFDSTUK 1. SITUERING 3

dat ieder wat variatie had en niet steeds met hetzelfde deel bezig was. We konden steeds bijelkaar terecht voor vragen en zochten indien nodig samen naar een oplossing. We hebben altijdgoed en in een leuke sfeer met elkaar samengewerkt.

1.3 Aanleiding en analyse

1.3.1 Huidige situatie

De huidige intranet-applicatie, die de naam “ABC-Point” draagt, was bedoeld als belangrijkstenieuwsportaal en een vorm van communicatie binnen het bedrijf. Alle nieuwsberichten enmededelingen zouden via dit portaal moeten passeren. Daardoor zouden de werknemers dezeberichten en mededelingen gemakkelijk kunnen lezen en up-to-date blijven met de laatstecourante zaken binnen het bedrijf.

ABC-Point is opgebouwd met SharePoint 2010, maar vertoont enkele gebreken waardoorwerknemers weinig tot niet naar het intranet surfen. Bijgevolg wordt er dus ook minder inhoudop het platform geplaatst. De werknemers waren nog minder gemotiveerd om naar het portaalte gaan, waardoor ABC-Point in een neerwaartse spiraal terecht kwam. Ook de documentenen zaken die reeds op ABC-Point stonden, waren zeer moeilijk terug te vinden. Daarnaast wasde structuur van de site ver zoek. Elk team gebruikte het intranet op zijn eigen manier ensommige teams helemaal niet. Op vlak van gebruiksvriendelijkheid kan er ook nog opgemerktworden dat in sommige browsers het scrollen op de site soms niet werkt, en dat niet allefunctionaliteiten steeds helemaal geladen worden. Dit zijn slechts enkele voorbeelden van demeest vooraanstaande problemen.

Vandaar dat de nood aan een nieuwe intranet-applicatie groot was. Initieel was het de bedoelingom volledig opnieuw te beginnen in SharePoint 2013, de tekortkomingen te elimineren en omenkele functionaliteiten toe te voegen. Dankzij het .NET-team is er gekozen om een applicatiein ASP.NET te maken en van het SharePoint verhaal af te stappen.

HOOFDSTUK 1. SITUERING 4

1.3.2 Doelstellingen en vereisten

De uiteindelijke doelstellingen van het nieuwe platform zijn dezelfde gebleven: een aantrekkelijkportaal aanbieden waarnaar alle werknemers gestimuleerd worden te surfen en waarop ze hetlaatste nieuws over het bedrijf kunnen bekijken. Daarbovenop is gekozen om het nieuwe intranetals doorstroomplatform voor alle andere applicaties te gebruiken. Het zal in de toekomst enkelnog mogelijk zijn om naar bijvoorbeeld de vakantie-applicatie te surfen als je door het intranetgaat. Deze manier zal wel voor veel trafiek langs het intranet zorgen, waardoor erop gerekendwordt dat zo goed als alle nieuwsberichten bekeken zullen worden.

Enkele nieuwigheden die vanuit het bedrijf gemist werden in de huidige ABC-Point warende aantrekkelijkheid van de homepagina, online social collaboration (zoals reacties plaatsen,beoordelingen geven en pagina’s delen), het taggen van content en de algemene structuur. Demeeste van deze vereisten en wensen waren reeds opgesomd in een document op onze eerstestagedag, maar dit document was verre van compleet en ging nog uit van het SharePoint-standpunt. De eerste weken van onze stage werden dus meteen opgeslokt door het herwerkenvan dit analysedocument naar een werkbare versie die volledig op punt stond en het juiste doelvoor ogen bracht. Veel paragrafen waren nog leeg of onuitgewerkt en andere zaken voldeden nietmeer aan de huidige eisen. Sommige dingen leken op het eerste zicht leuk of handig, maar nahierover van gedachten gewisseld te hebben, bleken ze vaak overbodig. Na enkele tussentijdseversies en goedkeuringen van hogeraf kwamen we uit op een document dat op punt stond omals basis te gebruiken voor de nieuwe intranet-applicatie. Wanneer er tijdens de ontwikkelingvan de applicatie aan het licht kwam dat bepaalde zaken nog efficienter of gebruiksvriendelijkeruitgewerkt konden worden, hebben we vaak geopteerd om deels af te wijken van het document.Zo zou het eindresultaat bevorderd worden. De grote lijnen en doelstellingen werden echtersteeds gerespecteerd.

In het document werden zaken besproken zoals elementen die moesten verschijnen op eenbepaalde pagina, de indeling van een pagina, eigenschappen en functionaliteiten van elementen,en manieren van aanpak. De details van dit document zullen niet apart besproken worden,aangezien deze reeds verduidelijkt zullen worden bij de uitwerking ervan.

Op de huidige versie van het intranet kunnen slechts enkele mensen berichten plaatsen enbeheren, en het zijn ook vaak dezelfde mensen die hier nog gebruik van maken. Door hetaanstellen van “Ambassadeurs” zal het de bedoeling zijn om op de nieuwe intranet-applicatiemeer content te genereren, die dan ook effectief meer lezers zal aantrekken. Doordat gebruikersonder andere op artikels reacties kunnen achterlaten, wordt er ook door de gebruikers inhoudgegenereerd en worden andere gebruikers geprikkeld om meer inhoud te gaan lezen.

Hoofdstuk2Bespreking Intranet

2.1 Verklarende woordenlijst

Online social collaboration: Meerdere personen die met elkaar samenwerken en informatiemet elkaar delen.

Content management systeem (CMS): Software applicatie waarmee mensen documentenen gegevens kunnen publiceren op het internet, zonder al te veel technische kennis te hebben.Definitie gebaseerd info van http://nl.wikipedia.org/wiki/Contentmanagementsysteem.

Object-relationele mapper (ORM): Een techniek voor het converteren van data tussentwee incompatibele type systemen. Het creeert een soort virtuele database die kan gebruiktbinnen de programmeertaal waar mee gewerkt word. Definitie gebaseerd op info van http://en.wikipedia.org/wiki/Object-relational mapping.

Framework: Een softwareframework is een geheel van softwarecomponenten dat gebruikt kanworden bij het programmeren van applicaties. Echter ook afspraken hoe die componentengebruikt worden binnen een groep ontwikkelaars en welke code-standaarden en bibliothekengebruikt worden kunnen ook onderdeel zijn van een framework.1

Application programming interface (API): Een API is een verzameling van verschillendefunctionaliteiten waarmee gecommuniceerd kan worden vanuit andere programma’s. Op dezemanier kan er data tussen de programma’s uitgewisseld worden. Definitie gebaseerd op infovan http://nl.wikipedia.org/wiki/Application programming interface.

Search engine: Een softwaresysteem dat zoekopdrachten kan uitvoeren om informatie terugte vinden. De manier waarop dit gebeurt is afhankelijk van het softwaresysteem.

1http://nl.wikipedia.org/wiki/Framework

5

HOOFDSTUK 2. BESPREKING INTRANET 6

Open source: Software waarvan de broncode beschikbaar is voor iedereen om deze tebestuderen, te bewerken en te distribueren.

Versioning system: In het Nederlands: versiebeheersysteem, is een computerprogrammawaarmee men de wijzigingen in documenten, programma’s of andere informatie bewaard incomputerbestanden kan beheren. Wijzigingen worden meestal aangeduid met een code, het“revisienummer” of “revisieniveau”. Wijzigingen kunnen vergeleken worden, hersteld en somssamengevoegd.2

Active Directory (AD): Active Directory staat beheerders toe om het beleid (rechten eninstellingen) in het netwerk van een volledig bedrijf te beheren.3

Directive: Directives zijn aanduidingen op HTML DOM elementen (zoals een attribuut, eennaam van een element, commentaar of een CSS class) die AngularJS vertellen om specifiekgedrag aan dat DOM element te koppelen of zelfs het DOM element te transformeren. Definitiegebaseerd op info van https://docs.angularjs.org/guide/directive.

Routing engine: Een systeem in ASP.NET applicaties dat bepaald wat er gebeurt bij hetsurfen naar een URL. Het ontleed de URL en afhankelijk van daarvan, samen met de URLparameters, zal de bijhorende controller aangeroepen worden. De controller zal dan op zijnbeurt de bijhorende view weergeven.

Active directory federation services (ADFS): ADFS is een softwarecomponent ontwikkelddoor Microsoft dat geınstalleerd worden op een Windows Server besturingssysteem om degebruikers single sign-on toegang te verlenen tot systemen en applicaties die hier gebruikvan maken. Definitie gebaseerd op info van http://en.wikipedia.org/wiki/Active DirectoryFederation Services.

Continuous integration (CI): CI zorgt ervoor dat alle working copies (lokale kopie van debestanden in de repository van het versiebeheersysteem) van alle ontwikkelaars samengevoegdkunnen worden, en dit meerdere keren per dag. Definitie gebaseerd op info van http://en.wikipedia.org/wiki/Continuous integration.

Deployment server software: De deployment server zorgt ervoor dat het software systeemgereed wordt gemaakt voor gebruik.

Agile development: Agile is een manier van software ontwikkelen. De vereisten enoplossingen voor het project kunnen hiermee op een eenvoudige manier beheerd worden doorhet samenwerken als een team.

Scrum: Scrum is een flexibele manier om (software)producten te maken. Er wordt gewerkt inmultidisciplinaire teams die in korte sprints, met een vaste lengte van 1 tot 4 weken, werkende(software) producten opleveren.4

2http://nl.wikipedia.org/wiki/Versiebeheersysteem3http://nl.wikipedia.org/wiki/Active Directory4http://nl.wikipedia.org/wiki/Scrum (softwareontwikkelmethode)

HOOFDSTUK 2. BESPREKING INTRANET 7

2.2 Gebruikte technologieen en werkwijzen

Bij het ontwikkelen van de intranet-applicatie maakten we gebruik van verscheidene techno-logieen en modellen. Om het project goed te organiseren maken we ook gebruik van enkelehandige tools.

2.2.1 Umbraco CMS

Umbraco CMS is een content management systeem (CMS) speciaal voor .NET applicaties. Wegebruiken Umbraco als backend voor de intranet applicatie. Umbraco is een open source pakket,wat het heel interessant maakt om te gebruiken. Hierdoor is het namelijk mogelijk Umbracouit te breiden en aan te passen aan onze noden.

Met Umbraco kan je gemakkelijk de inhoud op een website beheren en organiseren. Je kunteen nieuw item toevoegen aan de inhoud aan de hand van templates. Deze templates bestaanuit enkele eigenschappen, waar een waarde ingevuld moet worden bij het aanmaken van eennieuw item. Elke eigenschap heeft een dataype. Het datatype bepaalt welke input de gebruikerkan ingeven. Zo is er een RichTextEditor waar een hele tekst van een artikel in geschreven kanworden, een MediaPicker om mediabestanden toe te voegen of een simpele CheckBox die jeaan en uit kan vinken. Umbraco beschikt standaard al over een groot aantal datatypes, maarbiedt ook de mogelijkheid om zelf datatypes te ontwikkelen en toe te voegen.

Umbraco bestaat uit verschillende secties waar je de inhoud kan beheren en instellingen kanaanpassen. In de inhoud-sectie bijvoorbeeld kunnen alle items, die reeds zijn aangemaakt,beheerd worden. Net zoals bij datatypes kunnen er zelfontwikkelde secties toegevoegd wordenaan Umbraco.

We kunnen besluiten dat Umbraco CMS een krachtige backend is voor ASP.NET applicaties.Het bevat vele uitbreidingsmogelijkheden als je het op de juiste manier weet te gebruiken.

2.2.2 MVC4 & ASP.NET

MVC4, ofwel Model-View-Controller 4 is een .NET-framework dat gebruikt wordt om opefficiente wijze de MVC design principes ten volle te benutten. ASP.NET 5 dient om webpagina’svia een server te kunnen weergeven. ASP.NET MVC4 is dus een krachtig framework voor .NETdevelopment van webapplicaties. Tijdens het ontwikkelen van dit project gebruiken we IISManager als lokale server, waar we onze Views van het project op kunnen weergeven. Door deflexibiliteit van MVC4 kunnen we makkelijk pagina’s tonen (Views), met een bepaalde inhoud(Model) en deze data gaan opvragen en bewerken (Controller). In ASP.NET MVC4 zit eenrouting engine die ervoor zorgt dat user requests naar de controller kunnen doorgestuurd worden

5The ASP.NET Site - http://www.asp.net/mvc/mvc4

HOOFDSTUK 2. BESPREKING INTRANET 8

aan de hand van een intuıtieve URL. Hierop zal de controller een view terugsturen, waarin deuser het weergegeven model kan zien. Een van de designprincipes van MVC is het scheiden vanbusiness logica, datamodel en datapresentatie. Zo kent de controller de view en het model, maarkent de view enkel het model, en heeft het model geen weet van eventuele views. De routingengine6 zorgt door een request aan de controller dat de gevraagde view teruggegeven wordtdie gebruik maakt van een model. Wanneer bijvoorbeeld de view “News.cshtml” opgevraagdwordt, zal de bijhorende controller “NewsController.cs” een request krijgen. Deze zal data ineen “NewsModel.cs” steken, waarna de view “News” wordt teruggestuurd naar de gebruiker.De gebruiker kan dus bijvoorbeeld naar “www.website.com/News” surfen, en de routing engineop de server zal deze request afhandelen zonder extra moeite voor de gebruiker, of de developer.

Door de integratie van Umbraco met ASP.NET wordt er voor elke Document Type eenbijpassende template gemaakt, die dan mee in de project solution verschijnt. Zo word jeview eigenlijk al een beetje voorgekauwd en moet je enkel nog maar de juiste verwerking vandata in je controller zelf doen en het klaarzetten van de juiste gegevens in de model.

2.2.3 Entity Framework 6

Entity Framework (EF) 7 is een object-relationele mapper voor het .NET-framework. Hetbiedt ontwikkelaars de mogelijkheid om te werken met relationele data afkomstig van domeinspecifieke objecten. Door gebruik te maken van entity framework kan men gemakkelijk metdata werken afkomstig uit databases. Het genereert een heel model van een enkele databasedat ontwikkelaars de mogelijkheid geeft om gemakkelijk data uit te lezen en op te slaan.

De omgekeerde manier is ook mogelijk. Hier wordt er dan een database gegenereerd vanuiteen model en databasecontext die de ontwikkelaar zelf heeft geschreven. De eerste methodewordt ook wel “Database-First” genoemd, en de laatste manier “Code-First”. Beide manierenkunnen hetzelfde bereiken, maar de manier van werken verschilt wel.

2.2.4 Jira

JIRA is een softwarepakket van Atlassian8 om projecten mee te beheren. Voor ons project werdhet vooral gebruikt als agile development en scrum meeting board.

Met JIRA kan je gemakkelijk nieuwe sprints beheren van een project. Een sprint is een korteperiode, meestal 1 tot 3 weken, waarin een aantal taken afgewerkt moeten worden. Een taakbeschrijft kort wat er moet toegevoegd worden aan de applicatie en zou nooit langer dan 1werkdag (8u) mogen duren. Aan het begin van een sprint staan alle taken in de ‘To Do’ lijst.Als een ontwikkelaar aan een bepaalde taak wil werken, sleept hij deze in de ‘In Progress’ lijst

6MVC URL Routing - http://weblogs.asp.net/scottgu/asp-net-mvc-framework-part-2-url-routing7Entity Framework Documentation - https://msdn.microsoft.com/en-us/data/ee712907.aspx8Atlassian: Jira Software - https://www.atlassian.com/software/jira

HOOFDSTUK 2. BESPREKING INTRANET 9

om aan te tonen dat hij of zij met deze taak bezig is. Als de ontwikkelaar de taak voltooidheeft, zet hij deze in de ‘To Test’ lijst en duidt hij een ander persoon aan die de taak moettesten. Tijdens deze test zal deze persoon controleren of de nieuwe functie correct werkt. Alsde taak de test doorstaan heeft, kan de taak als voltooid aangeduid worden. Telkens wanneerer aan een taak gewerkt wordt, is het de bedoeling dat er werkuren gelogd worden. Voor elkuur dat er wordt gelogd, gaan deze uren van het totaal af. Zo kan men altijd zien of menop schema zit met de sprint, en hoe lang er uiteindelijk aan een bepaalde taak of zelfs hethele project gewerkt is. Met behulp van een burndown-chart kan gemakkelijk visueel wordenweergegeven hoe het ermee staat, en of men voor of achter staat op schema.

Elke ochtend wordt er een scrum meeting gehouden. Deze meeting volgt de gebeurde takenop, en eventuele problemen die een individuele developer ondervindt, kunnen zo in teamverbandaangekaart worden en met de collectieve kennis opgelost worden. Bij een scrum meeting dientelke deelnemer even kort te overlopen wat hij de vorige dag allemaal verwezenlijkt heeft, welkeproblemen hij ondervonden heeft, hoe hij deze opgelost heeft, welke problemen nog opgelostmoeten worden, en wat hem nog te doen staat. Doordat deze meeting staande gebeurt, wordtdeze ook steeds bondig gehouden. Hierdoor wordt er zo efficient mogelijk naar een oplossinggezocht.

2.2.5 TeamCity

TeamCity is een Continuous Integration en Deployment server software ontwikkelt doorJetBrains 9. De software zorgt ervoor dat applicaties die zijn toegevoegd meerdere keren per daggebouwd kunnen worden, en er wordt ook gecontroleerd of alle testen van de applicatie correctworden afgehandeld. TeamCity kan met verschillende versiebeheersystemen werken, waaronderSVN (Subversion). De TeamCity software draait op de SVN-server van ABC-Groep. Tijdensde ontwikkelingsfase van ons project dienden we telkens onze software updates te committen(uploaden) naar de server. Telkens er nieuwe code op het versiebeheersysteem gezet wordtdoor een van de ontwikkelaars van een applicatie, zal TeamCity de laatste versie ophalen en deapplicatie opnieuw proberen te bouwen. Mocht er toch iets mis gaan, dan kan de ontwikkelaardit meteen zien en een oplossing proberen te zoeken. Een systeem als dit wordt veel gebruiktbij applicaties met meerdere ontwikkelaars, omdat op deze manier heel gemakkelijk te zien isof de code van de verschillende ontwikkelaars correct met elkaar kan gemigreerd worden. Hetis natuurlijk steeds de bedoeling dat de software-build slaagt op de server, want gefaalde testenbij een build duiden op slechte code of inconsistenties. Bij ABC-Groep was het de afspraak datwie de nightly build (elke nacht wordt er een build van de laatste versie code uitgevoerd voorelke applicatie) doet falen moet trakteren op koffiekoeken.

9JetBrains: TeamCity - https://www.jetbrains.com/teamcity/

HOOFDSTUK 2. BESPREKING INTRANET 10

2.2.6 SubVersion

SubVersion is, zoals de naam het reeds doet vermoeden, een versioning-systeem 10, waaropgemakkelijk een overzicht kan worden bijgehouden van alle veranderingen aan inhoud vaneen project. Dergelijke versioningsystemen (zoals bijvoorbeeld Git 11 of Mercurial 12) zijnvoornamelijk gericht op het gebruik met software projecten, maar in principe kunnen vele soortenprojecten hierin worden opgevolgd. Voor tekstdocumenten als Word-bestanden (.doc) en nogandere soorten documenten is dit dikwijls niet zo vanzelfsprekend. Deze bestandsformaten zijngeen op tekst gebaseerde formaten en zijn dikwijls gecomprimeerd. Ze worden ook wel binairebestanden genoemd. Hierdoor is het onmogelijk de tekstuele inhoud te vergelijken. Enkel degrootte en de hash waarde van de bestanden kunnen met elkaar vergeleken worden. Wanneerer veranderingen optreden in een van deze binaire bestanden, kan het versioningsysteem welzien dat er iets veranderd is, maar niet juist wat deze veranderingen zijn.

Door dit versioning systeem (in het specifiek Tortoise SVN in ons geval) kan bijvoorbeeldzeer nauwkeurig worden bijgehouden welke veranderingen er allemaal gemaakt zijn door welkedeveloper, of welke zaken er zijn toegevoegd. Telkens iemand uit het team een noemenswaardigesoftwareverandering heeft doorgevoerd, en/of een user story heeft afgewerkt dient deze op deserver gezet te worden, waar dan de code gebuild zal worden, en alle andere gebruikers kunnenupdaten naar de volgende versie. Door gebruik te maken van een versioning systeem kan je metverschillende ontwikkelaars aan eenzelfde project werken, zonder al te veel in elkaars vaarwater tezitten. Doordat alle veranderingen die toegevoegd worden vergeleken worden met andere reedsdoorgevoerde veranderingen, krijgt een ontwikkelaar die zijn werk wil uploaden foutmeldingenindien er conflicten optreden. De developer moet dan zelf deze conflicten oplossen, alvorensdeze veranderingen naar de server kunnen. Zo worden problemen aangepakt nog voordat zeeffectief ontstaan. Het is aangeraden om steeds eerst jouw code te updaten naar de laatsteversie alvorens je veranderingen te uploaden. Zo worden problemen tot een minimum beperkt.Een andere term die vaak gebruik wordt voor dit soort beheer van broncode is Source CodeManagement 13 (SCM).

2.2.7 HipChat

HipChat is een chat applicatie gericht op bedrijven en teamwerking, en wordt bij ABC-Groepgebruikt tussen de developers van het .NET-team. Naast de gewone functionaliteit waarbij tweepersonen tegen elkaar kunnen praten en de team-chat, zijn er ook een hele hoop integratiesbeschikbaar waar ondernemingen van gebruik kunnen maken. Op de site van HipChat kan

10Apache SubVersion - https://subversion.apache.org/11Git - https://git-scm.com/12Mercurial - https://mercurial.selenic.com/13Source Code Management Systems - http://www.cio.com/article/2438652/developer/

source-code-management-systems--trends--analysis-and-best-features.html

HOOFDSTUK 2. BESPREKING INTRANET 11

je een hele reeks aan integraties 14 terugvinden die kunnen helpen bij het verhogen van deproductiviteit. Zo is de meest prominent aanwezige integratie waarvan gebruik gemaakt wordtde TeamCity integratie, die na elke build (of poging tot) een bericht stuurt in een specifiekgesprek met het resultaat van de build. Ook de nightly build die elke nacht loopt op de TeamCitybuild server stuurt een bericht uit. Voor ons team was dit doelgesprek een groepsgesprek tussenalle interne werknemers van het .NET-team. Doordat elke build gedeeld wordt is dit een extramotivatie om extra oplettendheid te bieden bij het inchecken van een stuk code op de buildserver zodat deze code zeker werkt.

2.2.8 Lucene

Lucene is een gratis opensource search engine. Lucene is oorspronkelijk geschreven in Java, maaris ook te verkrijgen in andere programmeertalen waaronder .NET15. Door zijn hoge prestatie ende vele features is het intussen de meeste gebruikte zoek engine op het internet. Het wordt ookvaak gebruikt voor lokale doeleinden. Lucene is zelf geen zoekmachine. Met een indexer kunnenvolledige teksten, alsook enkele ondersteunende documentformaten zoals PDF- en Word-documenten, geındexeerd worden. In deze index kan dan weer gezocht worden met een indexsearcher naar woorden om de data weer op te halen. Door de vele aanpassingsmogelijkhedenblijft het zeer populair bij gebruikers en ontwikkelaars.

2.2.9 AngularJS

AngularJS16, of simpelweg Angular, is een MVW Framework (Model-View-Whatever17) voorjavascript dat de laatste jaren in populariteit enorm is gestegen. Angular is open source enwordt onderhouden door vele individuele ontwikkelaars die nauw met elkaar samenwerken. OokGoogle is een van de mede-ontwikkelaars van Angular. De werking van Angular kan op eeneenvoudige manier uitgelegd worden. Als eerste wordt de HTML-pagina uitgelezen. De HTML-tags in deze pagina bevatten enkele extra attributen. Deze worden bij het uitlezen door Angularherkend en geınterpreteerd als directives. Aan de hand van deze directives kan Angular de inputof output componenten van de pagina koppelen aan het model. Dit model wordt weergegevendoor standaard JavaScript variabelen. Angular heeft reeds enkele ingebouwde directives diegebruikt kunnen worden, maar het heeft de mogelijkheid om zelfgeschreven directives toe tevoegen. Een van de belangrijkste mogelijkheden van de Angular bibliotheek is dat je op eenmakkelijk manier two-way data binding kan implementeren in je webapplicatie. Dit wil zeggendat als de waarde van een variabele in Angular verandert, de waarde in de HTML-pagina (View)ook geupdatet wordt. Andersom is dit ook het geval.

14HipChat Integraties - https://www.hipchat.com/integrations15Lucene Library voor ?.NET - https://lucenenet.apache.org/16AngularJS - Superheroic JavaScript MVW Framework - https://angularjs.org/17AngularJS: Model-View-Whatever - http://blog.orbitone.com/post/Angularjs-the-Model-View-Whatever-javascript-framework1

HOOFDSTUK 2. BESPREKING INTRANET 12

2.2.10 Glimpse

Glimpse18 is een open source webplatform voor het verzamelen van diagnostische info eninzichten van een webapplicatie. Glimpse kan je vergelijken met de developer tools in debrowsers Google Chrome, Mozilla Firefox en Internet Explorer. Het verschil hiermee is datde developer tools de HTTP requests analyseren vanuit de browser zelf, terwijl Glimpse dezerequests analyseert aan de kant van de server. Zo geeft Glimpse gedetailleerde info over deserver zelf weer. Deze info zou je normaal onmogelijk via de developer tools te weten kunnenkomen. Glimpse kan berekenen hoe lang bepaalde events tijdens een request duren, welke SQLqueries er allemaal uitgevoerd zijn, welke route van de route provider er gebruikt is en nog veelmeer. Aan de hand van deze data kan je controleren waar er nog eventuele problemen zittenin de webapplicatie en waar er het meeste tijd verloren gaat tijdens de request. Glimpse is eenheel handige tool dat door vele ontwikkelaars gebruikt wordt en zeker een aanrader is voor elkewebapplicatie.

2.3 Single sign-on

Om het gebruiksgemak van de werknemers te vergroten, en het aanmelden zo veilig mogelijkte laten verlopen werd er geopteerd om een implementatie van Single Sign On te verwerkenin het intranet. Om dit te verwezenlijken beschikt ABC-Groep over een ADFS-server (ActiveDirectory Federation Services) die gebruik maakt van gegevens in de Active Directory. Deintranet applicatie is de tweede applicatie van alle ABC-applicaties die gebruik maakt van deADFS-server, maar op termijn is het de bedoeling dat alle applicaties hiermee uitgerust worden.De vakantie-applicatie, die momenteel ook in ontwikkeling is en gebruikt zal worden voor alleverlofaanvragen en overzichten, is de tweede applicatie die er al mee uitgerust is. Ook het Java-team van ABC-Groep heeft reeds de opdracht gekregen om de implementatie in te plannen.

Single sign-on is, zoals de naam het reeds doet vermoeden, het principe dat de gebruiker zichslechts eenmaal moet aanmelden, en dan overal aangemeld is. Voor ons project betekent ditdus concreet dat wanneer een gebruiker naar het intranet surft en daarna naar de vakantie-applicatie wil gaan, hij slechts een keer zijn credentials moet invoeren. We zullen de werkingvan deze procedure duidelijk maken aan de hand van onderstaand schema.

18 Glimpse: The Diagnostics platform of the web - http://getglimpse.com/

HOOFDSTUK 2. BESPREKING INTRANET 13

Figuur 2.1: Single Sign On met Active Directory Federation Services uitgelegd

1. De gebruiker surft naar het intranet.

2. De intranet-applicatie wil weten of de gebruiker toegang mag krijgen, en schakelt hiervoorde ADFS-server in. Doordat de applicatie een vertrouwensband heeft met de ADFS-serverzal deze dan kijken of de gebruiker reeds aangemeld is of niet. Als de gebruiker reeds isaangemeld bij de ADFS, dan zal stap 3 overgeslagen worden.

3. Indien de gebruiker nog niet aangemeld is, zal de ADFS-server de gebruiker vragen omzijn login-gegevens. Als de gebruiker aangemeld is laat de server een cookie achter bij degebruiker om aan te tonen dat hij aangemeld is.

4. Wanneer de gebruiker correct is aangemeld zal de ADFS de intranet-applicatie groen lichtgeven om de gebruiker toe te laten.

Alle andere applicaties die eenzelfde vertrouwensband hebben met de ADFS-server kunnen dusraadplegen of een gebruiker aangemeld is of niet, en hem zo toegang geven zonder hem nogeens om zijn credentials te vragen. Stap 3 zal voor alle volgende bezochte applicaties dusovergeslagen worden zolang de gebruiker aangemeld is.

Als alles goed verloopt, krijgt een gebruiker zolang hij aangemeld is op de ADFS server, hetbeeld hieronder slechts een keer te zien op de eerste keer dat hij naar een applicatie gaat dievan de ADFS gebruik maakt. Gaat de gebruiker naar een andere applicatie dan mag hij gewoonbinnen zonder te moeten bewijzen wie hij is.

HOOFDSTUK 2. BESPREKING INTRANET 14

Figuur 2.2: Loginscherm van de ADFS-server van ABC-Groep

Het gebruiksgemak staat hier vrij centraal, maar ook op veiligheidsvlak is SSO met een ADFSserver een pluspunt. Door alle permissies op een plek in te stellen is het veel overzichtelijkerom na te gaan wie welke toegangsrechten heeft en wie niet. Door gebruik te maken van deActive Directory hebben meteen alle werknemers van ABC-Groep toegang tot het intranet. Enextra permissies kunnen op de AD worden ingesteld aan de hand van gebruikersgroepen. Zohebben we een groep aangemaakt voor administrators, ambassadeurs. Meer info over de userpermissions vind je in hoofdstuk 2.14.1.

Zowel de frontend (het intranet) als de backend (Umbraco) maken dus gebruik van de ADFSom gebruikers te authenticeren. In de frontend mogen alle gebruikers binnen, en in de backendmag ook iedereen binnen, maar niet met dezelfde permissies. Evenementen en nieuwsitemsposten is enkel voor admins en ambassadors, maar iedereen mag bijvoorbeeld een technologischartikel posten.

Gebruik maken van de ADFS is dus een lokale implementatie van Federated Single Sign On,waarbij de Active Directory onze Federation is. In veel hedendaagse applicaties wordt er voorgeopteerd om Facebook, Google, of een andere “Federation” te vertrouwen om gebruikers teauthenticeren.

Ook moeten gebruikers zich kunnen afmelden van de ADFS-Server. Hier is weer hetzelfdeprincipe van toepassing: wanneer een gebruiker zich afmeldt van de server, is hij meteen van

HOOFDSTUK 2. BESPREKING INTRANET 15

alle applicaties afgemeld die gebruik maken van de ADFS-server als middel van authenticatie.De procedure van het afmelden is zeer simpel, er moet gewoon naar een bepaalde URL gesurftworden, en de server handelt de rest af. Hij gaat kijken naar de cookie die hij heeft achtergelaten,en meldt de bijbehorende gebruiker af.

De gebruiker wordt dan weer naar het loginscherm verwezen, waarna hij/zij of iemand anderszich kan aanmelden. De afmeldprocedure mocht zeker niet ontbreken, want eens de gebruikeraangemeld is, zijn alle andere locaties die gebruik maken van de ADFS-server ook bereikbaar.

Om gebruikers zo veel mogelijk te stimuleren van het intranet te gebruiken, zal het Support teamer op termijn voor zorgen dat alle andere applicaties enkel bereikbaar zijn indien de gebruikerlangs het intranet gepasseerd is. Door in te stellen dat de URL’s van de andere applicaties nietmeer rechtstreeks bereikbaar zijn, wordt de gebruiker verplicht om door te klikken vanaf hetintranet. Zo kan men er vrij zeker van zijn dat alle inhoud op het intranet gezien wordt, enwordt het gebruik gestimuleerd.

2.4 PageBase en globale elementen

2.4.1 PageBase

Het intranet bestaat uit vele pagina’s die bepaalde elementen gemeenschappelijk hebben zoalsde navigatiebalk en de footer. Om al deze elementen niet telkens opnieuw toe te voegen en dewebsite makkelijk uitbreidbaar te houden, maken we gebruik van een basis HTML pagina, dePageBase. Hierin staan alle gemeenschappelijke elementen gedefinieerd. Alle andere pagina’serven dan over van deze basispagina. In de PageBase definieren we de plaats waar de contentkomt die verschilt op alle pagina’s door de ‘RenderBody’ methode aan te roepen.

Een andere manier die gebruikt wordt om de HTML code van de webpagina’s overzichtelijkte houden, is door gebruik te maken van partial views. Dit zijn afzonderlijke HTML-pagina’swaarnaar gerefereerd kan worden vanuit andere pagina’s. In deze pagina’s zullen dan dezepartial views gerenderd worden, zonder zelf de volledige HTML code nogmaals uit te schrijven.

2.4.2 Navigatie

Bovenaan alle webpagina’s staat een navigatiebalk. Hiermee kan de gebruiker navigeren naar deverschillende secties van het intranet. De navigatie wordt dynamisch opgebouwd aan de handvan de content tree in Umbraco. Om te voorkomen dat alle nieuwsberichten en technologischeartikels ook in de navigatiebalk zouden verschijnen, hebben we een extra eigenschap toegevoegdaan alle document types. Met deze eigenschap kan je aanvinken of alle ‘children’ (onderliggendeitems) van een item wel of niet getoond moeten worden in de navigatie. De navigatiebalk zal

HOOFDSTUK 2. BESPREKING INTRANET 16

steeds zijn vaste positie bovenaan behouden, ongeacht of de gebruiker met de scrollbar naar debenden scrollt.

Figuur 2.3: De navigatiebalk met breadcrumb bovenaan de website

De template waarop het design van het intranet gebaseerd is, was al heel responsive in het begin.Dit wil zeggen dat het op mobiel er even gebruiksvriendelijk uit ziet en werkt. Toch hebbenwe voor de navigatie hier wel enkele toevoegingen voor moeten toevoegen. Standaard werdende items van het menu verborgen indien deze niet meer op het scherm konden. Om er voor tezorgen dat deze items nog bereikbaar waren voor de gebruiker, hebben we een hamburger-menutoegevoegd. Deze knop komt pas tevoorschijn op kleinere schermen en bevat alle items vanhet menu, maar dan onder elkaar geplaatst. Dit menu wordt op dezelfde manier opgebouwdaan de hand van de Umbraco content tree.

Figuur 2.4: Hamburger-menu op de mobiele website

Vanaf de gebruiker naar een andere pagina navigeert dan de homepagina, zal er een breadcrumbverschijnen. Deze breadcrumb maakt aan de gebruiker duidelijk waar hij zich precies bevindt ophet intranet. Hij kan dit ook makkelijk gebruiken om terug te navigeren naar de bovenliggendeniveaus. Ook de breadcrumb wordt net zoals de navigatiebalk opgebouwd aan de hand van deUmbraco content tree.

Naast de navigatie staan er nog twee andere functies in deze balk. Aan de rechterkant bevindenzich namelijk de zoekfunctie en de notificaties.

HOOFDSTUK 2. BESPREKING INTRANET 17

2.4.3 Footer

Onderaan elke pagina hebben we onze footer welke allerlei handige links bevat. De footer isopgesplitst in 4 delen. Eerst hebben we links naar de andere interne applicaties van ABC-Groep.Hier kan de gebruiker alle andere interne applicaties terugvinden. Door op de link te klikken zalhij naar deze applicatie doorgestuurd worden. Hij hoeft zich niet opnieuw aan te melden omdatdeze applicaties aangepast zijn voor het gebruik van single sign-on. Het tweede deel van defooter toont de links naar de verschillende websites van ABC-Groep. Elk bedrijf binnen ABC-Groep heeft namelijk zijn eigen website en zal dus hier teruggevonden kunnen worden. Ookwebsites van andere initiatieven van ABC-Groep zoals ITMoov, of de vacature website kunnenaan deze lijst toegevoegd worden. Vervolgens hebben we de links naar de sociale media. ABC-Groep is actief op verschillende sociale media websites. De werknemers worden op deze maniergestimuleerd om ABC-Groep op zo veel mogelijk sociale media te volgen. Als laatste hebbenwe nog een deel met nogmaals de link naar de gebruikersinstellingen en de mogelijkheid om afte melden. Al deze links, met uitzondering van de instellingen, zijn aanpasbaar in de adminsectie in Umbraco. Meer uitleg hierover vind je terug in hoofdstuk 2.14.4.

Figuur 2.5: De footer onderaan de website

2.4.4 Zijbalk widgets

Op de overzichts- en detailpagina’s van de verschillende items was er aan de rechter zijkant nogplaats over. Om deze plaats op te vullen hebben we enkele widgets gemaakt. Om het laden vande pagina niet vertragen, halen de widgets hun data op via een API call als de pagina vollediggeladen is. De widgets zijn zo opgebouwd dat deze onafhankelijk zijn van het type van eenitem. Dezelfde widget kan dus gebruikt worden bij nieuwsberichten alsook bij technologischeartikels. Om de pagina’s overzichtelijk te houden en geen verwarring te veroorzaken, wordener wel slechts van een type items getoond. Dit gebeurt afhankelijk van de pagina die bezochtwordt. Is de gebruiker een nieuwsbericht aan het lezen, dan zullen de widget items enkelnieuwsberichten zijn. Bij een technologisch artikel zullen dan weer enkel technologische artikelsgetoond worden. Bij het toevoegen van een widget geven we een type van het item mee aan deAngular controller. Hierdoor weet deze welke API call hij moet aanroepen en zo welke items ereigenlijk opgehaald moeten worden. Het huidige item zal hier ook steeds uitgefilterd worden.De verkregen items worden dan getoond via Angular databinding.

HOOFDSTUK 2. BESPREKING INTRANET 18

2.4.4.1 Populaire items

Het eerste widget geeft de meest populaire items weer. De populariteit van een item wordtbepaald door het aantal reacties en het aantal keer dat het item bekeken is. Telkens er naar dedetailpagina van een item genavigeerd wordt, zal het aantal views verhoogd worden. Hierdoor zaleen item dus een beetje populairder worden. Het aantal reacties blijft nog wel de belangrijkstefactor die de populariteit bepaalt. De items worden uiteindelijk eerst geordend op het aantalreacties en vervolgens pas op het aantal views. Bij het ophalen van de items wordt er rekeninggehouden met de datum wanneer het item gepubliceerd is. Enkel de items die in de afgelopenmaand gepubliceerd zijn zullen worden meegerekend. Een oud item dat uitzonderlijk populairwas, zal dus niet maanden later nog steeds bovenaan staan.

Figuur 2.6: Het populaire items widget

HOOFDSTUK 2. BESPREKING INTRANET 19

2.4.4.2 Gerelateerde items

Een tweede widget geeft de gerelateerde items van het item dat op dat moment bekeken wordt.De gerelateerde items worden bepaald aan de hand van de extra tags dat een item heeft. Elkitem dat een van deze extra tags gemeenschappelijk heeft, wordt een gerelateerd item. Degerelateerde items worden getoond in een carousel.

Figuur 2.7: Het gerelateerde items widget

2.4.4.3 Recente items

Een derde widget geeft de meeste recente items weer. Enkele items die het laatst geplaatst ofgeupdatet zijn, zullen opgehaald worden. Dit kan vergeleken worden met de items die op dehomepagina getoond worden. Visueel ziet deze widget er gelijkaardig uit als de populaire itemswidget, weergegeven in figuur 2.6.

2.4.4.4 Vastgezette nieuwsberichten

De nieuwsdetailpagina heeft nog een extra widget. Deze widget toont nogmaals de vastgezettenieuwsberichten. Visueel ziet deze widget er ook gelijkaardig uit als de populaire items widget,weergegeven in figuur 2.6.

2.4.5 Reacties

Gebruikers hebben de mogelijkheid om reacties achter te laten op nieuwsberichten, technolo-gische artikels en evenementen. Met deze functie willen we interactie tussen de gebruikers ophet intranet stimuleren. Door het plaatsen van reacties kunnen gebruikers vertellen wat ze vaneen bepaald bericht of artikel vinden of er vragen over stellen. Om de structuur te behoudenbij het plaatsen van reacties, is het mogelijk om te reageren op een andere reactie. Zo blijfthet duidelijk welke reactie een antwoord was op de reactie van een andere gebruiker.

HOOFDSTUK 2. BESPREKING INTRANET 20

Figuur 2.8: Plaatsen van een reactie op een artikel

Reacties worden bijgehouden per content item van Umbraco. Elke reactie kan ook de IDvan zijn ‘parent’ bijhouden, indien beschikbaar. Deze kan dan worden gebruikt om deonderliggende reacties van een andere reactie op te halen en op de juiste plaats te tonenop de webpagina. Reacties worden recursief opgehaald. Dit betekent dat voor elke reactie nogeens alle onderliggende reacties opgehaald worden.

2.4.6 Pagina delen

Op de detailpagina’s van de verschillende items is het mogelijk andere gebruikers te selecterenwaarmee je deze pagina wil delen. Om te zoeken naar andere gebruikers en de gewenste teselecteren, maken we gebruik van een eigen Angular directive. In deze directive worden eerst allegebruikers opgehaald van een andere interne applicatie, de Peope Applicatie. Deze applicatie kanje beschouwen als een soort database van alle werknemers van ABC-Groep. Als alle werknemerszijn opgehaald, kan je in het tekstvlak de naam van de persoon typen met wie je de paginawil delen. Er zal dan gezocht worden in alle werknemers waarmee de naam of achternaamdeels overeenkomt met de zoekterm. Alle werknemers waarvan de naam overeenkomt, zullenin een lijst onder het tekstvlak getoond worden. De gebruiker kan op die manier makkelijk dejuiste persoon aanklikken. Bij het selecteren van een werknemer, zal deze in een lijst komen te

HOOFDSTUK 2. BESPREKING INTRANET 21

staan met alle reeds geselecteerde gebruikers. Zo krijgt de gebruiker de mogelijkheid meerderepersonen toe te voegen met wie hij de pagina wil delen. Bij het delen van een pagina wordt ernotificatie gestuurd naar de geselecteerde gebruikers, met een link naar de pagina.

Figuur 2.9: Pagina delen: gebruikers zoeken

Figuur 2.10: Pagina delen: gebruiker geselecteerd

HOOFDSTUK 2. BESPREKING INTRANET 22

2.4.7 Gebruikersinstellingen

Als de gebruiker voor de eerste keer aanmeldt op het nieuwe intranet, zal hij gevraagd wordenenkele instellingen in te stellen. Als eerste dient de gebruiker aan te duiden tot welk team hijof zij behoort. Er wordt reeds een suggestie gedaan aan de hand van de gegevens in de activedirectory. Indien dit niet juist is, kan de gebruiker dit wijzigen. Vervolgens kan de gebruikerhier enkele tags in te stellen die hij wil volgen. Aan de hand van deze ingestelde tags wordende nieuwsberichten op de homepagina gefilterd. Er wordt een tagcloud weergegeven met demeest populaire tags. Door op een tag te klikken, zal deze worden toegevoegd aan zijn lijstmet te volgen tags. Indien de tag niet in de tagcloud staat, kan de gebruiker deze handmatigtoevoegen door de tag in te vullen in het tekstveld. Als de gebruiker later zijn instellingen wiltwijzigen kan hij dit doen door rechtsboven of in de footer op de link naar de gebruikersinstellingte klikken.

Figuur 2.11: De gebruikersinstellingen van een gebruiker

Voor de huidige noden binnen het bedrijf was het nog niet nodig om het intranet in meerderetalen beschikbaar te maken, maar indien dit in de toekomst nodig zou zijn, is dit ook meteende goede plek om deze instelling te herbergen. Elke gebruiker zou dan voor zichzelf kunnenuitmaken in welke taal hij wil dat het intranet beschikbaar is. We hebben reeds op alle plekkenvoorzien dat er met resource files gewerkt wordt. Elke tekst (buiten de inhoud die gebruikersplaatsen natuurlijk) wordt opgehaald uit resource files. Bijgevolg is het dus makkelijk om deinterface van taal te veranderen, enkel de resource file moet vertaald worden, en de instellingmoet voorzien worden voor de gebruiker om deze keuze te maken. Aangezien dit niet tot descope van het project behoorde.

HOOFDSTUK 2. BESPREKING INTRANET 23

2.5 Inloggen

Er worden drie belangrijke taken uitgevoerd tijdens het inloggen. Als eerste worden de permissiesvan de gebruiker gecontroleerd en geupdatet. Dit doen we aan de hand van SID’s (SecurityID’s19) die bij de gebruiker in de AD (Active Directory20) staan ingesteld. Door deze SID’skunnen we makkelijk controleren wat de hoogste permissie is van de huidige aangemeldegebruiker. Vervolgens wijzigen we het gebruikerstype van de Umbraco gebruiker naar de nieuwewaarde afhankelijk van de hoogste permissie. Hierna stellen we opnieuw in tot welke Umbracosecties de gebruiker toegang heeft met deze permissies. Doordat we deze permissies telkensopnieuw instellen als de gebruiker inlogt, kunnen we snel en efficient eventuele wijzigingendoorvoeren. We moeten geen extra manuele handelingen uitvoeren om deze rechten te gaanupdaten in onze applicatie. Enkel de SID’s zullen moeten toegevoegd of verwijderd worden bijde AD gebruiker.

Om het intranet visueel aantrekkelijker te maken, tonen we op verschillende plaatsen ookprofielfoto’s van gebruikers. Dit is onder andere het geval bij reacties, co-hosts van evenementenen bij de people selector tijdens het delen van een pagina. Ook de verjaardagen en anderebasisinfo over gebruikers zijn nodig. Al deze info wordt reeds bewaard in een andere interneapplicatie, namelijk de People-applicatie. Om deze gegevens te gaan gebruiken in onze applicatiemoeten we deze gegevens eerst ophalen. Dit brengt ons bij de tweede taak die uitgevoerd moetworden bij het inloggen. Deze taak bestaat eruit om de nodige gegevens op te halen uit dePeople-applicatie en deze gegevens in onze eigen database op te slaan. We beginnen met hetophalen van alle werknemers uit de people applicatie. Dit gebeurt door een simpele API callnaar de People-applicatie. We hebben deze lijst van werknemers enkel nodig bij een nieuwegebruiker om het ID van deze gebruiker er uit te halen. Indien de gebruiker reeds bestaat,kunnen we dit ID ophalen uit onze eigen database wat iets sneller is. Met dit ID kunnen wedan alle gegevens ophalen van de gebruiker. Als de gebruiker reeds bestaat in onze database,zullen zijn gegevens geupdatet worden, anders zal er een nieuwe gebruiker aangemaakt worden.Dit alles moet ook bij elke login gebeuren zodat de gegevens up-to-date blijven met het profielop de people applicatie.

Als laatste worden de vakantiedagen van de gebruiker opgehaald. Ook hier communiceren weweer met een andere interne applicatie, namelijk de Vakantie-applicatie. Dit is de applicatiewaar gebruikers hun verlof op kunnen aanvragen en bekijken. Om de gebruiker ook zijn recentgoedgekeurde verlofdagen weer te kunnen geven gebeurt deze taak tijdens het inloggen.

Om het inloggen te versnellen, worden al deze taken in een aparte thread uitgevoerd. Deserver kan het inloggen verder uitvoeren en moet niet wachten tot bovenstaande taken vollediguitgevoerd zijn.

19Security ID vs GUID - https://technet.microsoft.com/en-us/library/cc961625.aspx20What is Active Directory? - https://msdn.microsoft.com/en-us/library/aa746492

HOOFDSTUK 2. BESPREKING INTRANET 24

2.6 Home

De homepagina is een overzicht van de belangrijkste onderdelen van het intranet. Elkegebruiker zal een gepersonaliseerde pagina voor zich krijgen. De gebruiker heeft dan meteen debelangrijkste informatie binnen handbereik die voor hem van toepassing is. De onderdelen vande homepagina zijn opgedeeld in verschillende onafhankelijke modules.

Als eerste worden er enkele van de meest recente nieuwsberichten getoond. Al de nieuwsbe-richten op deze pagina worden gefilterd aan de hand van de tags dat de gebruiker volgt entot welk team hij behoort. Dit wordt allemaal ingesteld bij de gebruikersinstellingen. Als allenieuwsberichten zichtbaar zouden zijn op de homepagina voor alle gebruikers, zou er geen goedoverzicht meer zijn. Gebruikers gaan berichten te zien krijgen die niet van toepassing zijnvoor hen en zullen andere wel belangrijke berichten missen. Indien de gebruiker toch berichtenbestemd voor andere teams wil volgen, moet hij deze teams toevoegen aan zijn te volgen tags.

Bovenaan worden de vastgezette nieuwsberichten getoond. In een andere module onderaanworden dan de laatst geplaatste nieuwsberichten weergegeven. In beide modules wordt erslechts een klein aantal berichten getoond. Een volledig overzicht van alle nieuwsberichten, kande gebruiker vinden op de overzichtspagina.

Figuur 2.12: De homepagina bovenaan

Vervolgens hebben we een knowledge center module. Deze module bevat de recentstetechnologische artikels en de afgelopen technische sessies. Ook hier worden er slechts enkeleitems getoond en kan men alle items terugvinden in het knowledge center overzicht.

We hebben ook een kleine gepersonaliseerde kalender. In deze kalender bevinden zich alleaankomende evenementen, officiele feestdagen en verlofdagen van de aangemelde gebruiker.Verlofdagen worden in het rood aangeduid. Er kunnen een of meerdere evenementen

HOOFDSTUK 2. BESPREKING INTRANET 25

plaatsvinden op een bepaalde dag. Aan de hand van een gekleurd bolletje zal er aangetoondworden wat voor soort evenement er zal plaatsvinden. In de bijhorende legende kan danopgezocht worden welke kleur bij welk type evenement hoort. Om meer te weten te komenover een evenement dat plaatsvindt op een bepaalde dag, kan er op deze dag geklikt worden.Hierdoor zal er een popover verschijnen met enkele details over de evenementen op die dag.Onder de kalender kan de gebruiker al zijn verlofdagen die hij nog over heeft in detail bekijken.Deze details zijn afkomstig uit de vakantie applicatie.

Het is belangrijk dat gebruikers zich op aan- of afwezig zetten bij deze evenementen. We hebbenhiervoor nog een aanwezigheidsmodule toegevoegd aan de homepagina. In deze module hebbenwe de onbeantwoorde en aankomende evenementen. De gebruiker kan zo op een snelle manierde evenementen bekijken waarop hij/zij is ingeschreven of zeker nog op moet antwoorden. Alseen gebruiker nog niet heeft geantwoord op bepaalde evenementen, wordt hij hiervan op dehoogte gebracht en wordt hij aangeraden hier zo snel mogelijk op te antwoorden. Indien dedeadline over minder dan 1 dag verstrijkt, zal dit nog eens extra aangeduid worden.

Enkele van de belangrijkste sociale media zijn ook geıntegreerd in het intranet. Zo hebben weeen Flickr carousel. Hierin worden enkele foto’s getoond van het account van ABC-Groep. Detweede belangrijke sociale media is Twitter. We tonen een twitterfeed op de homepagina zodatgebruikers de laatste tweets over ABC-Groep kunnen opvolgen. De sociale media worden verderin detail besproken in hoofdstuk 2.6.1.

Figuur 2.13: De homepagina onderaan

HOOFDSTUK 2. BESPREKING INTRANET 26

Als laatste hebben we nog een verjaardagenmodule. Hierin worden de aankomende verjaardagenweergegeven van de werknemers van ABC-Groep.

De homepagina heeft een lichtjes aangepaste weergave voor mobiele apparaten. De belangrijksteelementen worden bovenaan als eerste getoond. Hieronder verstaan we nieuwsberichten,kalender en evenementen. Hiervoor hebben we de Flickr carousel naar onderen verplaatst.

2.6.1 Sociale media

ABC-Groep is actief op vele sociale media websites. Om dit bij de werknemers bekender temaken, zijn er links naar de accounts van ABC-Groep geplaatst in de footer van het intranetwebsite. De belangrijkste sociale media voor ABC-Groep zijn Twitter en Flickr. Deze zijn danook geıntegreerd in het intranet.

2.6.1.1 Twitter

Om de werknemers op de hoogte te houden van de tweets die gepost worden door en naarABC-Groep, tonen we een Twitterfeed op de homepagina. Twitter heeft zelf al de mogelijkheidom een embedded tijdlijn te genereren die je op je eigen website kan plaatsen. Aanvankelijk wasdit de bedoeling, maar al snel was het duidelijk dat dit veel te beperkt was om aan de gevraagdefeatures te voldoen. Met een embedded tijdlijn is het namelijk niet eenvoudig om meerderegebruikers en tags te volgen, wat voor ons wel een vereiste was. De embedded timelines vanTwitter hebben trouwens een uniforme layout, die niet mooi zou passen binnen het design vanonze applicatie. We zouden dus de API van Twitter moeten gebruiken. Ook hier ontstond alsnel terug een probleem. De Rest API is gelimiteerd tot 180 requests per 15 min21. Op heteerste zicht lijkt dit nog veel, maar het had toch zijn nadelen. Als alle werknemers geregeldnaar het intranet gaan, zouden we onmiddellijk aan onze limiet zitten. Een mogelijke oplossingzou caching geweest zijn. We zouden dan alle tweets die we opvragen zelf op in een databaseopslaan en de database uitlezen als een gebruiker naar het intranet gaat. Maar Twitter heefthier zelf ook een alternatief voor, namelijk de Streaming API22.

Verbinding maken met de Twitter Streaming API kan je vergelijken met het maken van een heellange http verbinding. Deze verbinding staat constant open en dat voor een zeer lange tijd.Het voordeel door het gebruik van de Streaming API is dat we niet zelf continu requests moetenmaken naar de Twitter API. We maken slechts een keer verbinding met de Streaming API endeze zal ons steeds op de hoogte houden van de nieuwe tweets onmiddellijk nadat deze zijngeplaatst. Deze tweets slaan we op in onze database zodat we deze kunnen tonen in onze eigengemaakte twittermodule. Aan de hand van het ID van de tweet kunnen we dan een url vormenzodat gebruikers op de tweet kunnen doorklikken en deze kunnen bekijken op de website van

21Twitter API Rate Limits - https://dev.twitter.com/rest/public/rate-limiting22Twitter Streaming API - https://dev.twitter.com/streaming/overview

HOOFDSTUK 2. BESPREKING INTRANET 27

twitter zelf. Ook eventuele links naar andere websites die in de tweet staan, worden herkend ende gebruiker kan hier op doorklikken.

Om met de Twitter API te communiceren, maken we gebruik van Tweetinvi23. Dit is eenexterne bibliotheek die de volledige communicatie van met de Twitter API implementeert.Door gebruik te maken van deze bibliotheek, is de communicatie met de Twitter StreamingAPI veel eenvoudiger. Een constant openstaande httpconnectie implementeren is namelijk nietzo vanzelfsprekend en vraagt om geavanceerde code waar we de tijd niet voor hadden. Detwitterstream wordt telkens opgestart samen met onze intranetapplicatie. De stream kan ookhandmatig uitgeschakeld worden door een instelling in een configuratiebestand aan te passen.Ook de credentials die nodig zijn om de stream te starten worden in het configuratiebestandingesteld wegens onderhouds- en veiligheidsredenen. We beginnen met het instellen van decredentials om de applicatie te authentiseren bij de Twitter API. Vervolgens gaan we de twitter-stream definieren. Aan deze stream kunnen we enkele tracks (kernwoorden) en users toevoegen.Deze tracks en users bepalen welke tweets we willen ontvangen. Deze tracks en users zijn ookweer in te stellen via het configuratiebestand. Zo kan men later makkelijk nieuwe tracks enusers toevoegen of bestaande verwijderen. Een track met de naam ‘abcgroep’ zal ervoor zorgendat we alle tweets verkrijgen die deze track bevatten, inclusief hashtags met deze track. Na hettoevoegen van de tracks en de users die we willen volgen, kunnen we de stream starten. Dezezal asynchroon worden uitgevoerd zodat de rest van onze applicatie niet geblokkeerd wordt.

We willen natuurlijk de tweets die we ontvangen opslaan in onze eigen database zodat deze opde homepagina getoond kunnen worden. We moeten ons hiervoor abonneren op een event dataangeroepen wordt bij het ontvangen van een nieuwe tweet. In deze event handler controlerenwe allereerst of we de tweet wel degelijk nodig hebben. Tweets van de users die we hebbentoegevoegd, worden altijd opgeslagen. Is er enkel een match met een of meerdere tracks, danzal er gecontroleerd worden of deze tracks hashtags zijn of niet. Enkel tweets die de tracks alshashtag hebben zullen opgeslagen worden. Hiermee willen we voorkomen dat alle tweets die detracks gewoon als tekst bevatten ook worden opgeslagen. Iedereen kan namelijk die woordenvrij gebruiken en deze tweets zijn dus niet altijd relevant voor ons. Tegenwoordig kunnen er ookafbeeldingen aan tweets toegevoegd worden. Bij alle tweets die we opslaan, zullen we steeds deeerste afbeelding die toegevoegd is mee opslaan indien deze beschikbaar is. Nu we alle nodigecontroles hebben gedaan, kan de tweet worden opgelsagen in onze eigen database. Als er eennieuwe tweet ontvangen wordt, maken we een nieuwe Tweet aan in onze eigen database metalle eigenschappen die we nodig hebben. Zo worden de tweets achteraf makkelijker opgehaald,en staan ze steeds tot onze beschikking.

23Tweetinvi a friendly Twitter C# library - https://tweetinvi.codeplex.com/

HOOFDSTUK 2. BESPREKING INTRANET 28

Figuur 2.14: De twitter module met de recentste tweets

Om de opgeslagen tweets te tonen op de homepagina, maken we gebruik van AngularJS. Bij hetladen van de homepagina zullen de laatste 3 tweets opgehaald worden door een API call naarde Twitter UmbracoApiController. Deze controller roept op zijn beurt de GetTweets methodein de TwitterManager aan.

HOOFDSTUK 2. BESPREKING INTRANET 29

1 p u b l i c s t a t i c L i s t <TweetBase> GetTweets ( i n t ? numberToTake = n u l l ,DateTime ? s t a r t = n u l l , DateTime ? end = n u l l )

2 {3 using ( v a r c o n t e x t = new I n t r a n e t E n t i t i e s ( ) )4 {5 v a r da lTweets =6 c o n t e x t . Tweets . Where (7 x =>8 ( ! s t a r t . HasValue | | x . CreatedOn > s t a r t . Value ) &&9 ( ! end . HasValue | | x . CreatedOn < end . Value ) ) .

OrderByDescending ( x => x . CreatedOn ) ;10 i f ( numberToTake . HasValue )11 {12 da lTweets = da lTweets . Take ( numberToTake . Value ) .

OrderByDescending ( x => x . CreatedOn ) ;13 }1415 return da lTweets16 . T o L i s t ( )17 . S e l e c t ( x => TweetMapper . MapBase ( x , new TweetBase ( ) ) )18 . T o L i s t ( ) ;19 }20 }

Code 2.1: Tweets ophalen uit database

Deze methode kan 3 parameters ontvangen. De eerste parameter is het aantal tweets datteruggestuurd moet worden, in dit geval 3. Vervolgens kan men ook een startdatum meegeven.Deze datum bepaalt dat enkel de tweets opgehaald moeten worden die na deze datum geplaatstzijn. Als laatste is er ook een einddatum. Deze datum zorgt ervoor dat enkel tweets geplaatstvoor deze datum opgehaald worden. Door een combinatie van start- en einddatum kan menverschillende tweets van bepaalde perioden ophalen. Deze tweets worden dan getoond aande hand van de Angular databinding. Vanaf nu zal er elke 10 seconden een nieuwe API callgebeuren om eventuele nieuwe tweets op te halen. Zo creeren we onze eigen live stream.Onderaan de laatste tweet in de module staat er een ‘Meer’ knop. Hiermee kunnen ouderetweets die reeds in de database zitten opgehaald worden, indien gewenst door de gebruiker.

2.6.1.2 Flickr

Om het intranet een beetje op te fleuren, tonen we enkele foto’s van het Flickr account vanABC-Groep24. Deze foto’s worden getoond in een carousel. Bij het tonen van deze foto’s moeter rekening gehouden worden met het formaat en de orientatie van de foto’s. Bij liggendefoto’s kan de carousel namelijk mooi opgevuld zijn, terwijl bij staande foto’s er twee zwartebalken verschijnen naast de foto. Dit oogt niet mooi op de website en de achtergrond moestopgevuld worden. Om deze lege achtergrond op te vullen, hebben we bekeken hoe dit probleem

24ABC-Groep Flickr account - https://www.flickr.com/photos/abcgroep

HOOFDSTUK 2. BESPREKING INTRANET 30

op andere plaatsen werd opgelost zoals o.a. bij YouTube filmpjes. Bij rechtopstaande filmpjeswordt de achtergrond opgevuld met een uitgetrokken wazige versie van hetzelfde fragment. Dezemethode hebben we zelf ook toegepast. We tonen de huidige foto nogmaals op de achtergrondvan de carousel en tonen hier een extra laag over die de foto, wat donkerder maakt. Door dezedonkere laag ontstaat er een mooi contrast tussen de achtergrond en de werkelijke foto.

Met behulp van de Flickr API25 kan je foto’s van gebruikers ophalen zodat je deze kan tonen opje eigen website. Maar deze API geeft niet zomaar een rechtstreekse url naar de foto. We krijgenslechts enkele eigenschappen terug waarmee we zelf de URL naar de foto kunnen opbouwen.Het was belangrijk dat het om random foto’s ging, omdat we anders altijd foto’s zouden hebbenuit het laatste album. We wilden ook oudere foto’s tonen zodat de werknemers nog eens kondenterugdenken aan een evenement van het afgelopen jaar. Dit was niet vanzelfsprekend omdat jemet de Flickr API geen random foto’s kan ophalen. Enkel mogelijkheden die wel kunnen zijnbijvoorbeeld de foto’s per galerij, de laatste nieuwe of enkel de publieke foto’s. Daarom zochtenwe zelf naar een manier om toch foto’s uit verschillende albums te verkrijgen.

Om ervoor te zorgen dat de foto’s die getoond worden op de homepagina niet steeds de zelfdezijn, worden er elke dag of elk uur nieuwe foto’s opgehaald. Op de server zal een periodieketaak lopen die nieuwe foto’s gaat ophalen van de Flickr API. De frequentie van de taak bepaalthoe vaak de gebruikers nieuwe foto’s te zien krijgen. Telkens we een call uitvoeren naar deFlickr API, moeten we onze access token meesturen om ons te authenticeren. We beginnenmet de info op te vragen van het account van ABC-Groep. Hieruit halen we het totaal aantalfoto’s dat er op dat moment geplaatst zijn door ABC-Groep. Om nu zelf random foto’s op tehalen, gebruiken we een klein trucje.

1 v a r page = random . Next ( 1 , t o t a l P a g e s − 1) ;2 v a r g e t P h o t o s R e q u e s t = WebRequest . C r e a t e (3 ” h t t p s : / / a p i . f l i c k r . com/ s e r v i c e s / r e s t /? method= f l i c k r . p e o p l e . ge tP ho to s

” +4 ”&a p i k e y=” + C o n f i g H e l p e r . G e t C o n f i g u r a t i o n V a l u e<s t r i n g >( C o n f i g H e l p e r

. FLICKR KEY ) +5 ”&u s e r i d=” + C o n f i g H e l p e r . G e t C o n f i g u r a t i o n V a l u e<s t r i n g >( C o n f i g H e l p e r

. FLICKR USER ID ) +6 ”&p e r p a g e=” + itemsPerPage +7 ”&page=” + page +8 ”&format=j s o n&n o j s o n c a l l b a c k =1” ) ;

Code 2.2: Flickr - Ophalen willekeurige foto’s

Flickr verwacht dat je een pagina en een aantal foto’s per pagina meestuurt met de API call. Wijstellen het aantal foto’s per pagina in op 1, zodat we een pagina hebben per foto. Nu kunnenwe een getal genereren tussen 1 en het totale aantal foto’s. Dit getal duidt de pagina aan endus ook de foto dat we willen ophalen. Dit proces wordt 6 keer herhaald, zodat we 6 nieuwerandom foto’s hebben die we kunnen tonen op de homepagina. Voordat we de nieuwe foto’sopslaan in de database, gaan we eerst de reeds bestaande foto’s unpublishen. De ‘Published’

25Flickr API - https://www.flickr.com/services/api/

HOOFDSTUK 2. BESPREKING INTRANET 31

waarde wordt daarmee op false gezet in de database. Als dit gelukt is, kunnen we de nieuwefoto’s toevoegen aan de database.

Figuur 2.15: De flickr module met enkele foto’s van ABC-Groep

Om de foto’s te tonen op de homepagina maken we gebruik van Angular en de BootstrapCarousel. Met Angular voeren we een API call uit om de foto’s op te halen. Aan deze callgeven we het aantal foto’s mee dat we willen tonen. Wij zullen er steeds 6 opvragen omdat erdagelijks ook steeds 6 nieuwe foto’s opgehaald worden. Hierdoor zal de ‘GetPhotos’ methode uitin de FlickrPhotoManager aangeroepen worden. Deze methode kan een parameter ontvangen,nl. het aantal foto’s dat opgehaald moet worden. Enkel foto’s die de status published op truehebben staan zullen opgehaald worden. Na een succesvolle uitvoering van de API call, kunnenwe voor elke foto de URL vormen die verwijst naar de foto op de Flickr Servers. Met deze URLkunnen we de echte foto ophalen en tonen in de carousel op de homepagina. De gebruiker kandoorklikken op een foto om deze te bekijken op de Flickr website zelf.

HOOFDSTUK 2. BESPREKING INTRANET 32

2.7 Nieuws

Nieuwsberichten zijn een van de belangrijkste onderdelen van het intranet. Op het vorigeintranet was dit ook mogelijk, maar de functies waren beperkt en visueel was het niet aangenaamom het nieuwsbericht te lezen. Doordat het intranet minder en minder gebruikt werd, begonmen e-mails met nieuwsberichten te sturen naar de werknemers. Dit zorgde voor een overvloedaan e-mails dat de organisatie van je mailbox niet ten goede kwam. Het was dus belangrijkdat nieuwsberichten makkelijker aan de werknemers konden worden meegedeeld. Er zijn tweesoorten nieuwsberichten: vastgezette en gewone standaard nieuwsberichten.

2.7.1 Standaard nieuwsberichten

Een nieuwsbericht is een algemeen bericht dat de werknemers moet informeren over bepaaldezaken of gebeurtenissen. Deze kunnen gaan over algemene mededelingen tot leuke berichten.Om dit onderscheid tussen de verschillende categorieen te maken, moet bij elk nieuw berichteen type geselecteerd worden. Zo wordt het ook snel duidelijk voor de gebruikers over wathet nieuws gaat en of ze het al dan niet willen lezen. Elk bericht moet ook een doelpubliekhebben. Het doelpubliek kan men beschouwen als de verschillende teams binnen ABC-Groep.Deze zijn Microsoft, SharePoint, DynApps, Java, Oracle en Managed Services. Afhankelijk vantot welk doelpubliek de werknemer behoort, worden berichten al dan niet weergegeven. Indieneen bericht bestemd is voor alle werknemers, dient er bij doelpubliek ‘ABC-Groep’ geselecteerdte worden. Aan een nieuwsbericht kunnen ook tags toegevoegd worden. Aan de hand van dezetags kan de gebruiker in een oogopslag zien over welke onderwerpen het bericht zal gaan. Dezetags maken het ook makkelijker om nieuwsberichten terug te vinden via de zoekmachine.

2.7.2 Vastgezette nieuwsberichten

Bij het aanmaken van een nieuwsbericht kan de gebruiker kiezen of het bericht vastgezet moetworden voor een bepaalde tijd. Een vastgezet nieuwsbericht is in feite hetzelfde als een gewoonnieuwsbericht, met het verschil dat het altijd opvallender getoond wordt in tegenstelling tot eengewoon nieuwsbericht. Zo worden ze steeds bovenaan getoond als de gebruiker de homepaginaof het nieuwsoverzicht laadt zodat ze direct opvallen. Ze dienen gebruikt te worden als er eenbelangrijke mededeling is die van toepassing is voor alle werknemers.

HOOFDSTUK 2. BESPREKING INTRANET 33

Figuur 2.16: De nieuws overzichtspagina met bovenaan de vastgezette en onderaan de standaardberichten

2.7.3 Weergaven

In tegenstelling tot op de homepagina, worden in het nieuwsoverzicht wel alle nieuwsberichtengetoond. Hier wordt er geen rekening gehouden met de tags die ingesteld staan bij degebruikersinstellingen. Bovenaan worden de vastgezette berichten weergegeven. Er kunnenmaximaal 8 vastgezette berichten getoond worden. We kiezen hier bewust voor slechts 8berichten omdat het niet de bedoeling is dat er te veel vastgezette berichten komen. Bij teveel vastgezette berichten kunnen zij hun nut verliezen. Verder onderaan zien we een overzichtvan al de andere nieuwsberichten. Van elk bericht zal een intro weergegeven worden. Degebruiker kan zo al snel lezen waarover het bericht gaat. Er worden steeds 10 berichten perpagina getoond. De gebruiker kan gebruik maken van de navigatie onderaan om de volgende10 berichten te laden. We hebben gekozen om de berichten niet allemaal tegelijk op te halenom het laden van de website niet te vertragen. Telkens de gebruiker van pagina wisselt, zal ereen API call gebeuren die de volgende of de vorige 10 berichten gaat ophalen. Op deze manierwordt er enkel de data opgehaald die werkelijk nodig is. Er is ook een mogelijkheid om dezeberichten te sorteren. Standaard zullen de laatste nieuwe berichten eerst getoond worden, maarmen kan ook berichten per auteur of het aantal reacties sorteren. Aan de rechter zijkant tonenwe nog de meest populaire nieuwsitems. Meer info over vind je in hoofdstuk 2.4.4.1.

HOOFDSTUK 2. BESPREKING INTRANET 34

Elk nieuwsbericht heeft een eigen detailpagina. Op deze pagina kan het volledige bericht gelezenworden. De gebruiker heeft hier ook de mogelijkheid om de pagina te delen en reacties achter telaten. Aan de rechterkant staan ook weer enkele widgets waaronder de vastgezette, populaire,recente en gerelateerde berichten.

Figuur 2.17: De detailpagina van een nieuwsbericht zonder zijbalk

2.7.4 Nieuwsbericht aanmaken in Umbraco

Om een nieuwsbericht te kunnen plaatsen in Umbraco dient de gebruiker eerst en vooralaangemeld te zijn en Ambassadeursrechten te hebben. Deze rechten zijn benodigd omdatniet iedereen zomaar nieuws mag plaatsen op het intranet. Deze rechten worden toegekendin de Active Directory, zie 2.14.1 voor meer informatie omtrent de gebruikersrechten. Hetplaatsen van een nieuwsbericht zelf is allesbehalve moeilijk. De gebruiker dient een titel opte geven, een afbeelding, een intro voor het bericht, en de inhoud van het bericht. Dezeinhoud kan hij ook nog verder toelichten met behulp van extra tags. Na de inhoud dient ook

HOOFDSTUK 2. BESPREKING INTRANET 35

het hoofdpubliek van een nieuwsbericht aangeduid te worden. Dit doelpubliek bepaalt welkegebruikers het nieuws te zien krijgen op hun hoofdpagina, gebaseerd op welk doelpubliek zijhebben ingesteld bij hun gebruikersinstellingen. Een gebruiker kan andere doelpublieken en tagsook volgen door deze tags ook te kiezen. Elke gebruiker kan echter wel elk nieuwsbericht lezenop de nieuwsoverzichtspagina. Elk nieuwsbericht dient tot slotte nog een nieuwstype te krijgen,om de inhoud van het bericht verder te beschrijven. Als extra optie kan een gebruiker kiezen omhet bericht vast te zetten gedurende een bepaalde periode. De wanneer deze datum verloopt,wordt het bericht een gewoon nieuwsbericht. Bij properties kan de gebruiker nog kiezen omhet bericht pas op een bepaalde moment te publiceren, of weer te verbergen na een bepaaldtijdstip.

2.8 Knowledge Center

In een IT bedrijf als ABC-Groep worden niet enkel de laatste technologieen op de voet gevolgd,ook reeds bestaande technologieen worden er verder bestudeerd. Deze informatie wordt dangedeeld met alle consultants binnen het bedrijf. Zo kunnen zij allemaal nog iets extra bijleren.Al deze informatie wordt verzameld in het knowledge center, waar werknemers gemakkelijktechnologieen met bijhorende artikels en sessies kunnen opzoeken. Het geeft een overzicht weervan alle technologische artikels en technische sessies die geplaatst zijn.

Figuur 2.18: De knowledge center overzichtspagina met links de technologische artikels enrechts de technische sessies

HOOFDSTUK 2. BESPREKING INTRANET 36

2.8.1 Technologische artikels

Een technologisch artikel geeft meer informatie over een bepaalde technologie. Dit kan gaanvan een basis uitleg over een nieuwe technologie tot geavanceerde tutorials en “How to’s”. Alswerknemers bijvoorbeeld een probleem hebben gehad en de oplossing met de collega’s wilt delen,kan hij of zij zelf een nieuw technologische artikel aanmaken en toevoegen aan het knowledgecenter. Alle anderen kunnen dit artikel dan lezen, een beoordeling geven en reacties achterlaten.Aan de hand van deze beoordelingen en reacties kan de auteur zien hoe interessant anderen zijnartikel vonden. Als het artikel zeer populair is, kan het de auteur motiveren om gelijkaardigeartikels te schrijven. De kans bestaat dat er op het internet al een interessant artikel geschrevenis op een andere website. Om te voorkomen dat gebruikers hele artikels zouden kopieren metbronvermelding of enkel een link zouden ingeven, hebben we een apart documenttype voorzien.Hierin bieden we de gebruiker de mogelijkheid een korte intro te geven over het artikel en deURL naar het artikel te plaatsen. Doordat we hiervoor een apart documenttype hebben, kunnenwe op de frontend een rechtstreekse koppeling plaatsen naar de link zonder dat de gebruikernaar de detailpagina van het technologisch artikel moet gaan.

2.8.2 Technische sessies

Enkele keren per jaar wordt er door werknemers vrijwillig een technische sessie gegeven. Tijdenseen technische sessie wordt er een presentatie gegeven over een bepaalde technologie of hoe jeiets kan bereiken met die technologie. Je kunt het vergelijken met een interactief presentatievan een technologisch artikel. Voor technische sessies wordt er ook een pagina voorzien waaralle informatie en documenten van de sessie beschikbaar zijn. Net zoals bij technologischeartikels kunnen de gebruikers een beoordeling geven en een reactie achterlaten.

Aan een technische sessie kunnen ook hosts worden toegevoegd. Dit zijn de mensen die desessie effectief zullen geven. Omdat de organisator van het evenement niet steeds de persoonzal zijn die sessie zal geven, moest een manier voorzien worden om aan de gebruikers van hetintranet te kunnen tonen wie de sessie zal leiden. Ook was het een vereiste om de hosts vaneen sessie bewerkingen te kunnen laten doorvoeren in Umbraco. De technische sessie moetdus niet alleen bewerkt kunnen worden door de organisator, maar ook door de verschillendehosts. Om deze personen te kunnen toevoegen in de backend hebben we gebruik gemaakt vaneen custom datatype. Om een datatype in Umbraco toe te voegen maken we een App Pluginaan in het Umbraco project. Deze App Plugin is een afgezonderde functionaliteit, om hetmogelijk te maken deze bestanden gemakkelijk te kunnen exporteren naar een ander project,en het delen van deze plugin met de community te vergemakkelijken. Een datatype is inprincipe een instantie van een App Plugin. Wanneer een app plugin verschillende instellingentoelaat, kunnen dus verschillende datatypes van eenzelfde app plugin worden aangemaakt. Debestanden benodigd voor deze people picker zijn een Angular-controller, een Angular-service,een .cshtml-file voor de weergave, en een eigen stylesheet voor de styling. Daarnaast is er ooknog een package manifest. Deze laatste file specificeert de eigenschappen die getoond worden

HOOFDSTUK 2. BESPREKING INTRANET 37

in Umbraco bij het aanmaken van de datatype, waaronder bijvoorbeeld de titel die zal wordenweergegeven. Ook kunnen er enkele eigenschappen worden gespecificeerd die ingesteld kunnenworden bij het aanmaken van een datatype. Als voorbeeld kunnen we volgende waarde bekijken:

1 p r e v a l u e s : {2 f i e l d s : [3 {4 l a b e l : ” M u l t i p l e ” ,5 d e s c r i p t i o n : ” S p e c i f i e e r t e e n o f meerdere waarden d i e

g e s e l e c t e e r d kunnen worden ” ,6 key : ” m u l t i p l e ” ,7 v iew : ” b o o l e a n ”8 }9 ]

10 }

Code 2.3: App plugin - voorbeeld package manifest

Door deze property in te stellen kunnen we in Umbraco bijvoorbeeld 2 datatypes aanmaken: 1people picker die slechts 1 werknemer kan kiezen, en 1 die toelaat om meerdere werknemers teselecteren. De controle op deze eigenschap moet gebeuren in de controller van de plugin, maardoor deze in de package manifest te zetten maken we deze optie kenbaar naar Umbraco.

De service van de plugin haalt de data, de werknemers van ABC-Groep, op vanuit onze eigeninterne API die op zijn beurt de werknemers ophaalt uit de people-app van het bedrijf. Ook defoto van een werknemer wordt opgehaald om de datatype wat gebruiksvriendelijker te maken.

Figuur 2.19: De people picker in Umbraco

Bij het aanmaken van een technische sessie kan de organisator dus zoeken op de naam van eencohost en deze toevoegen. In de gezochte lijst komen de namen te staan die overeenstemmenmet de gezochte query. Naast de naam komt ook de foto van de werknemer te staan. Wanneerde organisator een gebruiker kiest wordt deze toegevoegd aan de technische sessie.

In de frontend worden deze hosts meegetoond op de technische sessie, en kunnen gebruikersdoorklikken naar het profiel van de geselecteerde host op de people-applicatie.

HOOFDSTUK 2. BESPREKING INTRANET 38

2.8.3 Weergaven

Op de homepagina worden de recentste technologische artikels getoond in een aparte module.Het aantal te tonen items is instelbaar in de admin section in de backend. Per artikel wordtde afbeelding, de titel van het artikel, de datum waarop het artikel geplaatst werd, en detechnologie-tag getoond.

Nog op de homepagina staat een aparte module voor de laatste afgelopen technische sessieste tonen. In deze module worden enkel de afgelopen technische sessies getoond, om niette veel in herhaling te vallen op dezelfde pagina. De toekomstige technische sessies zijn opde homepagina bereikbaar via hun bijbehorende evenementenpagina. Wanneer een gebruikerzich nog moet inschrijven voor een technische sessie komt het evenement hiervan bij deonbeantwoorde evenementen, en wanneer het evenement nadert, komt dit bij de toekomstigeevenementen te staan. Een aparte module voor toekomstige technische sessies zou dus nietveel verschil tonen met de evenementenmodule. Bij de afgelopen technische sessies kan eengebruiker dus terecht om de informatie van de voorbije sessie nog eens te raadplegen, geplaatstedocumenten te bekijken, of nog even verder te discussieren over het onderwerp. Net zoals bij detechnologische artikels kan de gebruiker doorklikken naar het knowledge center indien er meeritems beschikbaar zijn dan op de homepagina getoond worden.

Op de overzichtspagina van het Knowledge Center zelf worden de technologische artikels nogwat uitgebreider getoond. Per artikel staat tevens de gemiddelde rating of beoordeling vanhet artikel, alsook het aantal reacties op dit artikel. Alle tags worden getoond, en ook deintro van het artikel wordt weergegeven. De lijst van technologische artikels kan gesorteerdworden op datum, aantal reacties, beoordeling of auteur. Ook de technische sessies op dezepagina kunnen gesorteerd worden op de voorgaande eigenschappen, maar de beoordeling enkorte intro worden niet getoond. In tegenstelling tot de homepagina worden hier wel detoekomstige technische sessies nog eens apart getoond, aangezien hier geen aparte evenementenworden weergegeven. In de zijbalk op de overzichtspagina van het knowledge center worden depopulairste technologische artikels nog eens in de kijker gezet.

Voor de technische sessies en technologische artikels wordt apart geen overzichtspagina meervoorzien, om verwarring te vermijden bij de gebruiker en omdat een extra herhaling van dezelfdedata overbodig lijkt.

Een detailpagina van een technologisch artikel toont uitgebreid alle inhoud van een artikel, enonderaan bestaat nog de mogelijkheid om een nieuwe rating te geven of een reactie te plaatsen.Het spreekt voor zich dat het voor een auteur van een artikel niet mogelijk is om hier zelf eenbeoordeling op te geven. Naast het artikel wordt nog eens verwezen naar de populairste itemsalsook de recentst geplaatste artikels op het intranet. Zo kan een gebruiker snel doorklikkennaar de populairste inhoud en de nieuwste artikels.

HOOFDSTUK 2. BESPREKING INTRANET 39

Figuur 2.20: De detailpagina van een technologisch artikel zonder zijbalk

De detailpagina van een technische sessie toont zeer veel informatie. De inhoud van eensessie-pagina kan kort de inhoud van de sessie beschrijven, of een uitgebreide uitleg overhet onderwerp zijn. De gebruiker kan doorklikken naar de evenementenpagina voor meerinformatie over de waar, wanneer of eventuele afspraken omtrent het evenement, maar hetis ook mogelijk om de aanwezigheid rechtstreeks op de technische sessie pagina door te geven.Ook de belangrijkste details van waar en wanneer worden reeds op deze pagina aangegeven.Bovenaan in de zijbalk worden de verschillende hosts getoond met hun foto die opgehaald wordtvan de people-applicatie. Onderaan in de zijbalk zijn ook de populairste technische sessies ende recentste items zichtbaar. Het uitzicht van deze overzichtspagina is ongeveer hetzelfde alsde overzichtspagina van een technologisch artikel, weergegeven in figuur 2.20

HOOFDSTUK 2. BESPREKING INTRANET 40

2.9 Evenementen

Op het huidige intranet, ABC-Point, is niet meteen een functie voorzien om evenementen teorganiseren en deze in een kalender te tonen. Voorlopig is de manier van werken dus noghet sturen van mails en uitnodigingen, zodat evenementen in de Exchange kalender van hetpersoneel verschijnen als ze deze uitnodiging geaccepteerd hebben. Om de aanwezigheid op deevenementen bij te houden moet dus momenteel nog manueel een kleine boekhouding gevoerdworden waarin wordt bijgehouden wie heeft bevestigd en wie niet. Om deze gegevens op eencentrale plek te kunnen bijhouden was er behoefte aan een betere oplossing in het nieuweintranet.

2.9.1 Evenementen aanmaken en beheren

In de nieuwe en verbeterde intranetapplicatie bestaat de mogelijkheid om in Umbraco eenevenement aan te maken dat zal getoond worden aan de gebruikers op het intranet zelf.Gebruikers kunnen zich hier dan op inschrijven en de beheerder kan in de backend zien wiekomt en wie niet. Bovenop louter de vraag of iemand komt of niet, is het ook mogelijk omextra vragen mee te geven waar de gebruiker op mag of zelfs moet antwoorden. Voorbeeldenvan dergelijke vragen kunnen zijn: “Eet je mee pizza voor de technische sessie?” of “Kom jezelf met de auto?”. De vragen die gesteld worden zijn meerkeuze en de organisator kan zelfde mogelijke antwoorden instellen voor een evenement. Niet elke vraag moet verplicht zijn enhet is steeds mogelijk om extra commentaar bij een reply te geven. De organisator kan tweeverschillende vragenlijsten samenstellen: een voor wanneer de gebruiker zich op aanwezig zeten een voor wanneer hij niet kan komen. In de backend kan de organisator voor elke gebruikerde gegeven antwoorden zien, en van elke vraag een overzicht van alle gegeven antwoordenbekijken. Deze gegevens helpen de gebruiker bij het organiseren van een evenement.

Figuur 2.21: Vragen toegevoegd aan een evenement

Voor elk evenement worden verschillende eigenschappen meegegeven bij het aanmaken. Zomoet de organisator verplicht een titel, locatie, inhoud, evenementtype, start- en einddatumopgeven. Facultatief kan de organisator nog extra tags kiezen, een afbeelding uploaden, en eendeadline tot inschrijven instellen. Deze deadline is de laatste moment waarop een gebruiker zichkan inschrijven, of zijn reply aanpassen. Wanneer deze datum verstreken is, worden enkel nogje gegeven antwoorden getoond en kan je deze niet meer aanpassen.

HOOFDSTUK 2. BESPREKING INTRANET 41

Wanneer een evenement wordt aangemaakt in Umbraco, zal dit document (net als nieuwsitems,technologische artikels en technische sessies) in een hierarchische mappenstructuur wordengeplaatst. Met als verschil dat een nieuwsitem in de jaar- en maandmap wordt geplaatst van dedag waarop het nieuwsitem gepost wordt en een evenement in de map van de datum waarophet evenement gepland wordt. Hiervoor hebben we gekozen omdat het veel intuıtiever is om tedenken aan de datum van een evenement en niet aan de datum waarop een evenement gepost isop het intranet. De gebruiker plant een evenement in augustus, plaatst het onder evenementenen het evenement wordt automatisch in de map “2015” en “Augustus” geplaatst. Door ditprogrammatorisch te laten gebeuren, verkleint de kans op het per ongeluk fout plaatsen vanitems aanzienlijk.

Later in het ontwikkelingsproces van het project kwam de vraag of de evenementen mee in deExchange kalender van de gebruikers konden geplaatst worden. In deze kalender komen ook alleandere persoonlijke afspraken van de gebruiker en op deze manier zou alles centraal staan. Erzijn meerdere interne applicaties die gebruik maken van de Exchange server om afspraken in dekalender toe te voegen. Daarom werd er gevraagd om een REST service aan te maken waar alleapplicaties dan mee kunnen communiceren. Wij zijn begonnen met de ontwikkeling hiervan,maar hebben deze uiteindelijk uit handen gegeven. De service moest namelijk nog aangepasten uitgebreid worden om aan alle functies te voldoen die de andere applicaties nodig hebben.Bij het aanmaken of updaten van een evenement zal deze ook op de Exchange server in naamvan de auteur aangemaakt of geupdatet worden.

2.9.2 Weergaven

De gebruiker kan op het intranet op verschillende plekken een weergave van de evenementenzien. Aangezien evenementen een belangrijk aspect van het intranet zijn mochten deze absoluutniet over het hoofd kunnen gezien worden. Door de verschillende weergaven worden gebruikersaangemoedigd om snel te antwoorden op openstaande evenementen, worden ze gemakkelijkherinnerd aan geplande evenementen, en krijgen ze vlot en efficient een overzicht te zien van alleevenementen. De verschillende weergaven zijn: homepagina, overzichtspagina en detailpagina.

Op de homepagina staat een kleine kalender waarin een overzicht wordt gegeven van deevenementen van de huidige maand. De gebruiker kan in deze weergave op een dag klikken,en dan wordt met behulp van een popover een overzicht van de evenementen op die daggetoond, alsook de reply-status van de huidige gebruiker. Met behulp van een legende wordende verschillende evenementen verduidelijkt. Nog steeds op de homepagina wordt de gebruikerherinnerd aan de evenementen waarop hij zich heeft ingeschreven en de evenementen waarvoorhij nog niet heeft laten weten of hij komt of niet. Deze laatste staan bovenaan en trekkenmeer de aandacht, omdat de organisator natuurlijk graag snel de gastenlijst heeft zodat hijkan beginnen plannen. Deze “call-to-action” wordt verwezenlijkt door een popover die naar deonbeantwoorde evenementenmodule wijst en door een grote rode knop bij elk evenement omnaar de pagina te gaan. Deze popover wordt met behulp van JavaScript getoond vlak na hetladen van de pagina, zodat de gebruiker deze elke keer ziet staan zolang hij niet geantwoord

HOOFDSTUK 2. BESPREKING INTRANET 42

heeft. Wegklikken is dus slechts een tijdelijke oplossing. Ook wordt er per evenement eencountdown getoond tot de subscription deadline, bij wijze van waarschuwing. De evenementenwaarvoor een gebruiker zich heeft ingeschreven, worden getoond tot het evenement voorbij is.Hierdoor om de gebruiker niet te doen vergeten dat hij verwacht wordt. Deze twee modulesworden slechts getoond op de homepagina wanneer er evenementen zijn om de module op tevullen. Anders wordt het nieuws verder naar boven geschoven.

Voorts is er nog een aparte evenementenpagina waarin een uitgebreider overzicht wordt gegevenmet twee verschillende weergaven. De eerste is een grote kalender waarin van maand gewisseldkan worden en evenementen worden meteen op de juiste dag getoond. De gebruiker kandoorklikken naar elk evenement in de kalender. Onderaan de kalender wordt een legende getoondvoor elk type evenement. De tweede is een lijstweergave die gesorteerd kan worden op deverschillende eigenschappen van dat evenement. De sortering gebeurt door te klikken op dekolomhoofding van de kolom waarop je wil sorteren. Standaard worden bovenaan eerst detoekomstige evenementen getoond, de eerstvolgende bovenaan. Daaronder worden de voorbijeevenementen getoond, de recentste bovenaan.

Figuur 2.22: De lijstweergave van de evenementen

Op de kalenderweergave worden enkel de evenementen van de opgevraagde maand (en devoorgaande en eerstvolgende week) getoond. Via een date parameter in de URL wordt degewenste maand opgevraagd, met als default de huidige maand. De opgevraagde eventsworden zo door de controller in het model gestoken. In de lijstweergave dienen echter veelevenementen tegelijk te worden opgevraagd, waardoor er geopteerd is om deze lijst op te vullenmet AngularJS, om zo de gebruikerservaring te optimaliseren.

HOOFDSTUK 2. BESPREKING INTRANET 43

Figuur 2.23: De kalenderweergave van de evenementen

Op de detailpagina van een evenement kan de gebruiker alle gedetailleerde informatie van eenevenement bekijken. Naast het weergeven van de locatie, start- en eindtijd, en de deadlinetot inschrijven, kan de gebruiker zich ook effectief inschrijven voor een evenement op dezepagina. De antwoorden die de gebruiker hier geeft, kunnen door de organisator in de backendbekeken worden. Na het invoeren van een antwoord kan de gebruiker dit ook bewerken zolangde deadline tot inschrijven niet verstreken is. Na de inschrijvingsdeadline kan de gebruiker hierzijn gegeven antwoorden nog bekijken. Na het inschrijven zal dit evenement ook automatischin de Exchange kalender van de gebruiker geplaatst worden. Indien de gebruiker zich uiteindelijktoch op afwezig zet, wordt dit ook weer verwijderd uit zijn kalender.

Figuur 2.24: De details van een evenement als widget

HOOFDSTUK 2. BESPREKING INTRANET 44

Figuur 2.25: De reply widget waar de gebruiker zijn aanwezigheid kan doorgeven

Indien een evenement verbonden is aan een technische sessie, kan er ook worden doorgekliktnaar de bijbehorende technische sessie. Net als bij andere detailpagina’s kunnen gebruikers hierreacties plaatsen en discussieren over het evenement, feedback geven, of andere opmerkingenachterlaten. Ook een evenement kan gedeeld worden met collega’s via de share-knop.

2.10 Afdelingen

Elke afdeling binnen het bedrijf zal zijn eigen deel van het intranet toegekend krijgen. Deafdelingen hiervoor zijn: HR, Sales, Support, Office en Management. De afdelingen kunnenop deze manier info verstrekken aan de gebruikers. Elke afdeling zal standaard een aantalzaken kunnen aanmaken zoals een FAQ, de contactpersonen en andere lege pagina’s die de zelfopgevuld kunnen worden.

Een FAQ wordt opgedeeld in meerdere categorieen. Per categorie kunnen dan vragen enantwoorden toegevoegd worden. Enkel de FAQ zelf heeft een eigen pagina. Hierop worden eerstalle vragen opgesomd onder hun categorieen. Door op een vraag te klikken zal de webpaginanaar de bijhorende vraag en antwoord scrollen. Deze worden verder onderaan de pagina meeruitgebreid weergegeven. Bij elke vraag en antwoord staat een link die de gebruiker terug naarhet begin van de pagina brengt.

HOOFDSTUK 2. BESPREKING INTRANET 45

Figuur 2.26: Een FAQ pagina bij een afdeling

Een afdeling moet natuurlijk meer dan enkel een standaard detailpagina hebben. Informatie datniet in een FAQ past of zeer belangrijk is, verdient een eigen pagina. Het is onmogelijk om opvoorhand te bepalen welke extra pagina’s er aangemaakt moeten worden. Dit verschilt ook nogeens per afdeling en is niet efficient indien er later nog meerdere bij moeten komen. Daaromhebben we zelf een ‘lege pagina’ documenttype aangemaakt. Elke afdeling kan zo veel van dezepagina’s aanmaken als nodig. Men geeft de pagina een naam en vult de nodige informatie encontent in. Op deze manier kunnen er later steeds extra pagina’s toegevoegd worden, zonderextra documenttypes toe te gaan voegen.

Elke afdeling moet later ook de mogelijkheid krijgen om documenten te uploaden. Zo kan HRbijvoorbeeld documenten omtrent vaderschapsverlof op hun afdelingspagina posten. Supportkan dan eventueel een handleiding om de VPN-verbinding in te stellen uploaden. Deze moetenook snel en overzichtelijk teruggevonden kunnen worden. We zullen hiervoor SharePoint gaangebruiken. Het documentenbeheer staat nog niet helemaal op punt, waardoor deze functievoorlopig niet beschikbaar is.

2.10.1 Weergaven

Op de overzichtspagina van de afdelingen geven we een kort overzicht weer van al deverschillende afdelingen die bestaan. Er wordt een kleine intro getoond die kort beschrijft watde afdeling doet en wat de gebruiker daar zal terugvinden. Daarnaast worden ook reeds enkeletoppagina’s getoond. Deze worden zelf ingesteld door de beheerders van de afdeling. Dit zijnpagina’s die heel belangrijk zijn en die gebruikers het meeste nodig zullen hebben. Zo moeten

HOOFDSTUK 2. BESPREKING INTRANET 46

zij niet heel de afdeling doorzoeken naar deze info. Als laatste vinden we de contactpersonenterug per afdeling. De contactpersonen linken door naar de people applicatie, waar de info vandeze personen teruggevonden kan worden.

Figuur 2.27: De overzichtspagina met enkel afdelingen

Op de detailpagina komt een meer gedetailleerde beschrijving over de huidige afdeling. Aande linker kant staat een menu. In dit menu worden alle content pagina’s en FAQ’s van eenafdeling weergegeven. Onder het menu worden nogmaals de toppagina’s en de contactpersonengetoond.

Figuur 2.28: De detailpagina van de afdeling HR

HOOFDSTUK 2. BESPREKING INTRANET 47

2.10.2 HR Referral systeem

Sommige afdelingen hebben echter nog specifieke noden. Zo heeft HR bijvoorbeeld een nieuwsysteem nodig om referrals te beheren en ontvangen. Een referral is een kandidaat werknemerdie aangebracht wordt door een reeds bestaande werknemer. In de praktijk kan een werknemerhierdoor incentives verdienen indien een nieuwe werknemer effectief aangenomen wordt. Zo wilHR vanaf nu dit referral systeem ook kunnen beheren vanuit het intranet. De HR beheerderskunnen een extra soort pagina toevoegen aan hun afdeling, de referralpagina. Op deze paginakan een korte uitleg ingevuld worden die wat meer uitleg geeft over het referral systeem.

Na deze intro wordt er een formulier getoond waarin de gegevens van de kandidaat werknemeringevuld moeten worden. Deze gegevens bestaan uit de naam, e-mailadres en gsm-nummer vande kandidaat. De werknemer zal ook het bedrijf moeten selecteren waarvoor hij de kandidaatinstuurt. Stuurt hij een kandidaat door die graag als .NET ontwikkelaar aan de slag wil, zal hijhet ACE bedrijf moeten selecteren. De info over al deze bedrijven kan teruggevonden wordenop hun specifieke websites. Deze links kan je terugvinden in de footer. Bij het insturen vaneen referral is het ook mogelijk extra info mee door te sturen. Moesten er nog bepaalde zakenzijn waar rekening mee gehouden moet worden, dan kan dat hier worden ingevuld. Later zalhet ook de bedoeling zijn dat er een CV van de kandidaat mee geupload kan worden. Doordathet documentenbeheer nog niet volledig klaar was, is deze functie er voorlopig uitgelaten. Ditformulier is opgebouwd aan de hand van Razor MVC Forms. Hiermee kan je voor bepaaldeeigenschappen van het rendermodel enkele html inputvelden renderen zoals een tekstvlak. Dewaarde van deze inputvelden worden dan automatisch opgeslagen in de eigenschappen van hetmodel. Ook validatieberichten kunnen op deze manier makkelijk getoond worden bij het juisteinputveld. Door gebruik te maken van MVC Forms moet er ook een SurfaceController en eenmethode ervan meegegeven worden. Deze methode zal worden uitgevoerd bij het verzendenvan het formulier.

HOOFDSTUK 2. BESPREKING INTRANET 48

Figuur 2.29: Het formulier om een referral in te sturen

Aan elke eigenschap van het model kunnen validatie attributen toegevoegd worden. Dezeattributen bepalen aan welke voorwaarden de inputwaarde moet voldoen. Zo kan je eeneigenschap, en dus ook het inputveld, verplicht maken. Indien de gebruiker dit veld leeglaat, kan er een validatiebericht getoond worden dat de gebruiker hier op wijst. Men kande inputwaarde ook laten voldoen aan een bepaalde regular expression. Dit beschrijft de manierwaaraan de inputwaarde moet voldoen. Zo kan er gecontroleerd worden of de input een geldige-mailadres is door te gaan controleren op verschillende eigenschappen van het e-mailformaat.In de methode van de SurfaceController zal er eerst gecontroleerd worden of het model geldigis aan de hand van deze validatie attributen. Is dit niet geldig, dan zullen de nodige ingesteldevalidatieberichten getoond worden aan de gebruiker. Bij een geldig model, kan de nieuwe referralopgeslagen worden en kunnen de nodige notificaties verstuurd worden.

Helemaal onderaan de pagina kan de gebruiker al zijn ingestuurde referrals bekijken. De statusper referral kan op deze manier opgevolgd worden. Als een kandidaat bijvoorbeeld geaccepteerdis, weet de gebruiker dat hij een incentive kan ontvangen.

Figuur 2.30: De reeds ingestuurde referrals van een gebruiker

HOOFDSTUK 2. BESPREKING INTRANET 49

2.11 Reservaties

Bij ABC-Groep beschikken ze over 2 accounts van de website Pluralsight. Deze site is eenonline bibliotheek van trainingsfilmpjes, tutorials en lessenreeksen voor developers en iedereendie iets met IT te maken heeft. Deze accounts zijn vrij te gebruiken voor al het personeel vanABC-Groep (en zelfs stagiairs), maar dienen op voorhand gereserveerd te worden zodat er nooiteen dubbele boeking kan optreden. Op de huidige reservatiepagina staan twee kalenders naastelkaar waarin een gebruiker dan een reservering kan maken Deze kalenders zien er niet bijstermooi uit, en de pagina is ook niet makkelijk terug te vinden op de ABC-Point. Daarnaastkon een gebruiker tot op heden nergens een overzicht te zien krijgen van al zijn openstaandereserveringen. Wanneer de beslissing eventueel genomen zou worden om nog een 3de accountaan te schaffen, is het op de ABC-Point niet makkelijk om dit uit te breiden. Ook indien ereen nieuw soort account zou komen, van een andere website bijvoorbeeld, zou de weergave enoverzichtelijkheid er niet op vooruitgaan. De huidige implementatie is dus niet erg schaalbaar.Voor elke nieuwe account een kalender toevoegen is maar een primitieve oplossing. Met denieuwe intranet-applicatie hebben we dan ook getracht een oplossing te bieden voor de zonetgenoemde problemen.

Figuur 2.31: De reservatiekalender

Doordat vroeger 2 kalenders gebruikt werden (1 voor elk account) moest een gebruiker zelfkiezen welke account hij gebruikte, en deze keuze zelf doorvoeren door te kiezen in welkekalender hij zijn reservering plaatste. Door deze keuze van de gebruiker weg te nemen ishet reserveren van een account enkel maar efficienter geworden. De gebruiker moet buitenhet gewenste type account enkel nog het juiste tijdstip kiezen, en eventueel een reminder diegestuurd zal worden. Indien de reminder leeg gelaten wordt, wordt het startuur van de reservatieals reminder-tijdstip genomen. Door het type account nog te laten kiezen (hoewel dit voorlopignog enkel “Pluralsight” luidt), is de mogelijkheid open gelaten voor ABC-Groep om nog andere

HOOFDSTUK 2. BESPREKING INTRANET 50

accounts aan te schaffen. Dit nieuw type account moet worden toegevoegd in de database, endan kunnen er nieuwe accounts worden toegevoegd in Umbraco. Omdat iedereen de accountsgewoon moet kunnen gebruiken, worden gebruikersnaam en wachtwoord gewoon onderaan depagina getoond. Aangezien deze pagina’s toch enkel voor werknemers van ABC-Groep zichtbaarzijn, is dit geen probleem. Als de reservatie met succes aangevraagd is, wordt deze ook in deExchange kalender van de gebruiker geplaatst. Zie ook hoofdstuk 2.9.1.

Bij het aanmaken van een account in de backend moeten enkele basic gegevens wordenmeegegeven. Naast de gebruikersnaam en wachtwoord krijgt een account ook een titel, en erkan ook wat extra informatie worden meegegeven over de account in kwestie; dingen waarmeerekening moet worden gehouden bij het gebruiken van de account bijvoorbeeld.

Wanneer een gebruiker een tijdstip wilt reserveren wanneer er reeds een account gereserveerdis, zal de volgende account toegekend worden, en zo verder tot alle accounts van het gewenstetype geboekt zijn. Dan krijgt de gebruiker een melding dat hij een ander tijdstip zal moetenkiezen. Onderaan de pagina kan de gebruiker een lijst zien met al zijn persoonlijke openstaandereservaties. Na beeindigen van een reservatie zal deze automatisch uit deze lijst verdwijnen,maar zolang de reservering niet is afgelopen kan een reservatie ook manueel verwijderd worden.

Alle reservaties van alle gebruikers worden in de grote kalender getoond met de naam van degebruiker, de naam van de account, en het gereserveerde tijdstip. Zo kan in een oogopslagworden getoond wanneer welke account bezet is en wanneer deze nog vrij is.

Figuur 2.32: Het reservatie formulier en de toekomstige reservaties van de huidige gebruiker

HOOFDSTUK 2. BESPREKING INTRANET 51

2.12 Zoeken

De zoekfunctie is een belangrijk onderdeel van het intranet. Dit was een van de knelpunten vanhet oude intranet. Daar werkte de zoekfunctie niet zo goed. Gebruikers konden gegevens endocumenten niet onmiddellijk terugvinden, waardoor er terug mails werden gestuurd om dezeinfo te verkrijgen. Op aanraden van de andere teamleden van het .NET-team, kozen we vooreen op Lucene gebaseerde zoekmachine. Zij hadden immers al goede ervaringen met Lucenedoordat ze het in hun andere projecten ook veel hadden gebruikt. Umbraco zelf heeft al eenzoekengine gebaseerd op Lucene, Examine genaamd. Het was dus niet nodig om volledig vannul Lucene in ons project te implementeren.

2.12.1 Examine configureren

Om onze Umbraco content te laten indexeren en er vervolgens in te zoeken met behulp vanExamine, moeten we 3 benodigdheden instellen in de Web.Config file: een index provider,een index set en een search provider. De index provider definieert wat voor soort indexerwe willen aanmaken. Examine bevat al enkele index types die vooraf gedefinieerd zijn. Dezezullen bijvoorbeeld al de Umbraco content of Umbraco gebruikers toevoegen aan de index.En compleet nieuwe indexer aanmaken is ook een mogelijkheid. Hier bepaal je dan zelf debron van de data dat geındexeerd moet worden. Een ander belangrijke instelling bij de indexprovider is het bepalen van welke analyzer er gebruikt moet worden bij het indexeren. Luceneheeft verschillende soorten analyzers die de data op een bepaalde manier gaan analyseren enindexeren. Enkele voorbeelden hiervan zijn speciale analyzers voor verschillende talen of eenanalyzer dat de tekst op een bepaalde manier interpreteert. Zo heb je bijvoorbeeld een analyzerdat tekst splitst op witruimtes. Wij zullen vooral de standaard analyzer gebruiken van Lucene.Afhankelijk van het type kunnen er nog andere instellingen ingesteld worden. Deze worden lateruitgelegd waar nodig.

Een tweede item dat nodig is voor onze indexer is de index set. In de index set kunnen we zelfmee bepalen welke data er geındexeerd moet worden. Afhankelijk van het type van de indexerkunnen er meer instellingen gebeuren. Bij de vooraf gedefinieerde Umbraco content indexer kanje bijvoorbeeld instellen welke types van nodes er wel of niet mee opgenomen moeten worden.Je kan ook bepaalde kolommen van de Umbraco database negeren of net wel indexeren. Doorgebruik te maken van de index set heb je bijna volledige controle over wat een index moetbevatten.

Als laatste hebben we nog een search provider nodig. Deze zal ons helpen met het zoekenin de bijhorende index. Het type en de analyzer van de search provider is afhankelijk van deinstellingen bij de index provider. Heb je bijvoorbeeld een Umbraco content indexer ingesteld,dan zal je Umbraco search provider nodig hebben. De analyzer komt best overeen met deanalyzer van de index provider om de juiste resultaten te bekomen. Bij de search provider kanook ingesteld worden of leading wildcards toegestaan zijn. Een wildcard is een soort jokerteken

HOOFDSTUK 2. BESPREKING INTRANET 52

dat kan vervangen worden door eender welk karakter of tekst. Lucene ondersteunt standaardenkel wildcards op het einde van de zoekterm. Voor ons project zetten we de leading wildcardsstandaard aan.

2.12.2 Examine & het intranet

Voor de correcte werking van Examine in dit project hebben we twee verschillende indexersnodig. De eerste en belangrijkste is een indexer voor de content in Umbraco. Dit is een opvoorhand gedefinieerde indexer in Examine dat de content opgeslagen in de Umbraco databasegaat indexeren. Alle aangemaakte content in Umbraco zoals nieuwsberichten, technologischeartikels, technische sessies en evenementen, worden hierdoor geındexeerd. Bij dit type indexerstellen we nog twee extra eigenschappen in. Eerst zorgen we ervoor dat enkel gepubliceerdecontent geındexeerd wordt. We willen namelijk niet dat gebruikers content gaan terugvindenwaar helemaal geen pagina voor bestaat en welke ze eigenlijk helemaal nog niet mogen zien.Vervolgens zorgen we ervoor dat de index heropgebouwd wordt telkens dat een content itemgewijzigd wordt. Hiervoor abonneren we ons op de event handlers die uitgevoerd worden bijhet wijzigen van een content item. Zo voorkomen we dat verwijderde items in de index blijvensteken en zullen nieuwe items meteen toegevoegd worden. In de bijhorende index set stellen weenkele node types in die niet mee geındexeerd moeten worden. We hebben het hier over mappenen andere nodes die enkel de structuur in de Umbraco content tree overzichtelijk houden, maarvoor de rest geen specifiek nut hebben.

De tweede indexer die we nodig hebben is een compleet zelfgemaakte indexer. Met deze indexerkunnen we zelf bepalen welke datasource geındexeerd moet worden. Wij zullen deze indexernodig hebben om onze eigen tabel met tags te indexeren. Waarom we deze index nodig hebben,wordt uitgelegd bij het zoeken. Deze indexer moeten we aan een dataservice object koppelen.Dit dataservice object implementeert een methode die onze data zal indexeren. Voor elke tagdat in onze database zit, voegen we een nieuw item toe aan de index. We hebben enkel de ID ende naam van de tag nodig in onze index om hier later op te zoeken. Enkel deze eigenschappenvan een tag worden dus toegevoegd aan dit item. Doordat het opbouwen van deze indexlang kan duren als er veel tags zijn, zorgen we ervoor dat de indexer asynchroon zal wordenuitgevoerd. In de index set stellen we alle kolommen in die mee geındexeerd moeten worden.Dit zijn dezelfde kolommen waarvan we de data in de index opslaan. Nu we onze indexershebben aangemaakt, was het nog de uitdaging om de juiste zoekresultaten te verkrijgen bij hetzoeken in de index.

HOOFDSTUK 2. BESPREKING INTRANET 53

2.12.3 Zoekopdrachten uitvoeren

Er zijn twee manieren om te zoeken. De eerste meest voor de hand liggende manier is viade zoekbalk bovenaan de webpagina. Daar kan je enkele zoektermen ingeven alsook hetdomein selecteren waarin gezocht moet worden. Als je bijvoorbeeld enkel naar nieuwsitemswilt zoeken, kan je simpelweg ‘nieuws’ selecteren. Er zal dan enkel op nieuwsitems gezochtworden. De tweede manier dat een zoekopdracht zal uitvoeren, is door op een tag te klikken.Deze zoekopdracht werkt een beetje anders dan de gewone zoekfunctie. Een zoekopdracht doorop een tag te klikken zal enkel naar items zoeken die dezelfde tag hebben als waar op gezochtwordt. Hierbij wordt geen rekening gehouden met de inhoud of titel van het item. Er wordthier ook niet in een specifiek domein gezocht, maar op alle items in heel het intranet.

Figuur 2.33: De zoekbalk bovenaan de webpagina

Elke zoekopdracht begint op dezelfde manier. We vragen de bijhorende search provider op vande index waarin we willen zoeken. Vervolgens kunnen we een nieuwe zoekcriteria aanmakenwaarmee een zoekquery kunnen opstellen die door Examine zal worden uitgevoerd. Met dezequery bepalen we op wat er gezocht moet worden en in welke velden.

Indien we te maken hebben met een tag zoekopdracht, gaan we eerst de bijhorende ID vande tag opzoeken in onze index van onze tabel met tags. We hebben dit ID nodig omdat inUmbraco ook enkel de Ids van de tags worden opgeslagen bij het aanmaken van een item. Alswe dus gewoon zouden zoeken op de naam van de tag, zouden we geen resultaten krijgen. Voorhet zoeken in de tag index hebben we opnieuw de bijhorende search provider nodig. We zoekenop de volledige naam van de tag en vragen de IDs van de tags in de resultaten op. Dit zalmeestal geen of slechts 1 resultaat bevatten. Nu we de ID hebben van de tag hebben, kunnenwe zoeken naar deze ID in alle tag velden van de content items. Een veld kan je vergelijkenmet een kolom in een database, of in dit geval, in de index. Voor elke eigenschap van eenitem dat opgeslagen wordt in Umbraco, zal er een apart veld zijn in de index. Deze tag veldenzijn instelbaar via de Web.Config file in de solution, waar nog andere instelbare zaken terug tevinden zijn om het project te kunnen configureren. Moesten er later nieuwe bijkomen of anderenweggaan, moet niet heel de code aangepast worden en kunnen we vlot deze waarden aanpassenin de configuratie-file. Voor een tag zoekopdracht is de query nu compleet. De search providerzal nu de query uitvoeren en beginnen zoeken. De zoekresultaten worden geordend op de besteovereenkomst en daarna omgezet naar een model. Deze omzetting maakt het makkelijker omde data van een zoekresultaat te tonen op in de view.

Bij een standaard zoekopdracht wordt er in verschillende velden gezocht op de zoekterm,waaronder de titel en de inhoud. Sommige velden zijn belangrijker dan anderen. Ook dezevelden kunnen naar wens aangepast worden in de configuratie-file van het Intranet. Umbraco-project in de solution. Een match met de titel zou een beter resultaat moeten zijn dan dat

HOOFDSTUK 2. BESPREKING INTRANET 54

de zoekterm een keer ergens in de inhoud voor zou komen. Om dit te verwezenlijken hebbenwe een eigen event handler aangemaakt die uitgevoerd wordt tijdens het indexeren. Telkensde index heropgebouwd wordt, zullen we bepaalde velden een boost geven. Deze boost zorgtervoor dat de resultaten met een match in deze velden hoger in de ranking komen te staan vanbeste overeenkomst.

We beginnen onze zoekopdracht door te zoeken op de exacte term dat de gebruiker heeftingevuld. Alle resultaten die deze exacte term bevatten zullen nog eens een extra boost krijgen.Vervolgens zal de invoer van de gebruiker gesplitst worden in verschillende termen op basis vanspaties in de invoer. Voor elke term worden dan nog andere zoekcriteria toegevoegd aan dequery. Hierdoor kan er gezocht worden op meerdere woorden die niet nodig bij elkaar moetenstaan. Per term worden er twee voorwaarden toegevoegd aan de query. Als eerste wordt ergezocht met een fuzzy-waarde. De fuzzy-waarde bepaalt in welke mate het gezochte woordovereen moet komen met wat er in de velden staat. Door een “fuzzyness” in te stellen, zullenitems die een gelijkaardig woord bevatten of de term op een andere schrijfwijze ook aan deresultaten toegevoegd worden. Dit is vooral handig als de gebruiker een typefout maakt ofeen woord verkeerd spelt. De gebruiker zal dan toch nog de gewenste resultaten bekomen.Als tweede wordt er gezocht op de term met toelating van meerdere wildcard karakters. Metbehulp van de wildcards is het mogelijk om op delen van een woord te zoeken. Als items de termslechts gedeeltelijk bevatten en er nog andere karakters voor of na komen, zal ook dit item aande resultaten toegevoegd worden. Vervolgens zal voor elke term naar mogelijke tags gezochtworden. Dit is ongeveer hetzelfde als wat bij de tag zoekopdracht gebeurt, met uitzonderingdat ook hier een fuzzy-waarde en de toelating van meerdere wildcard karakters ingesteld wordt.Hiervoor moet de term niet exact de naam van een tag moet zijn. Voor elk van de IDs datgevonden wordt, zal er in de tag velden gezocht worden. Indien de gebruiker een bepaalddomein heeft ingesteld, wordt er nog bepaald van welk node type de items zeker moeten zijn.Nu de query voor de standaard zoekopdracht volledig is, kan ook hier de zoekopdracht wordenuitgevoerd. Alles gebeurt nu op dezelfde manier als bij een tag zoekopdracht.

2.12.4 Zoekresultaten tonen

Zoekopdrachten worden uitgevoerd door een API call van Angular. Als de Angular dezoekresultaten terugkrijgt van de server, zullen deze getoond worden met behulp vandatabinding. De resultaten worden per 10 weergegeven en dit in twee kolommen. Indiener meer als 10 resultaten zijn, kan de gebruiker naar de volgende pagina gaan door de paginatieonderaan de pagina te gebruiken. Het is ook mogelijk om de resultaten te sorteren op bepaaldeeigenschappen waaronder de auteur van het item en de meest recentste items. Standaard zullende resultaten weergegeven worden op basis van de beste overeenkomst.

HOOFDSTUK 2. BESPREKING INTRANET 55

Figuur 2.34: De zoekresultaten pagina

2.13 Notificaties

Door de vele mogelijkheden van het intranet kan er nogal snel eens iets veranderen dat degebruiker op het eerste zicht niet merkt. Zo kan er iemand een reactie gegeven hebben op eenartikel van een gebruiker. Deze gebruiker zou dan constant naar deze pagina moeten gaan omte controleren of er een nieuwe reactie is. Naarmate er meer artikels geplaatst worden, wordtdit meer en meer tijdrovend en zal de gebruiker minder het intranet gaan gebruiken. Op ditprobleem te voorkomen, hebben we een notificatiesysteem ingevoerd.

Het notificatiesysteem zorgt ervoor dat de gebruiker op een plek nieuwe meldingen kan zienover gebeurtenissen op het intranet die voor hem van toepassing zijn. Er wordt een notificatiegestuurd telkens een van de volgende acties gebeurt:

• Een reactie gegeven op een door de gebruiker gepost technologisch artikel of link,nieuwsbericht, evenement en technische sessie

• Een reactie gegeven op een andere reactie

• Een beoordeling gegeven op een door de gebruiker gepost technologisch artikel of link entechnische sessie

• Delen van pagina

• Statusverandering van een referral

• Bij het toevoegen van een nieuwe referral (enkel HR)

• Update of verwijderen van een evenement waarop gebruiker aanwezig is

HOOFDSTUK 2. BESPREKING INTRANET 56

• Gebruiker is als medeorganisator van technische sessie aangeduid

• Herinnering van een account reservatie

Bij ongelezen notificaties zal het notificatie icoon beginnen knipperen. Bij dit icoon wordt ookeen teller getoond dat het aantal ongelezen notificaties weergeeft. Zo kan de gebruiker op eensnelle manier zien of er ongelezen notificaties zijn en hoeveel dat er zijn. We willen de gebruikerheel duidelijk maken dat het belangrijk is om notificaties te lezen. Indien er ongelezen notificatiezijn zal het aantal ook nog eens in de titel van de webpagina knipperen. Deze titel is zichtbaarin het browser tabblad waardoor dit meteen opvalt als de gebruiker een ander tabblad openheeft.

Bij het sturen van een notificatie zal ook de link naar de pagina waarop de wijziging ofgebeurtenis plaatsvond mee doorgestuurd worden. Hierdoor kan de gebruiker met een simpeleklik op de notificatie de wijziging of gebeurtenis bekijken. Bij het klikken op de notificatie zaldeze ook automatisch als ‘gezien’ aangeduid worden en wordt deze verwijderd uit de lijst metnotificaties. De gebruiker heeft ook de mogelijkheid om een notificatie enkel als ‘gezien’ aante duiden zonder naar de bijhorende pagina te gaan. Om deze functie gebruiksvriendelijk tehouden is er een optie om alle notificaties als ‘gezien’ te markeren. Zo hoeft elke notificatie nietafzonderlijk aangeklikt te worden. Mocht er toch een vergissing gebeuren en heeft de gebruikereen notificatie te snel verwijderd, kan hij of zij de laatste tien notificaties terug opvragen.

ABC-Groep heeft nog een groot aantal andere interne applicatie waar de gebruiker bepaaldestatussen of meldingen kan bekijken. Zo heb je de verlofapplicatie waar de werknemers verlofkunnen aanvragen. Bij goedkeuring of afwijzing zal daar een melding van komen te staan.Omdat het intranet een centrale plek moet zijn, moeten deze meldingen ook zichtbaar zijnop het intranet bij de notificaties. Om dit te verwezenlijken, hebben we een API gemaaktdie andere applicaties kunnen aanspreken. Met deze API kunnen er notificaties aangemaaktworden vanuit de andere applicaties. Ook hier kan weer een URL meegegeven worden zodatde gebruiker toch kan doorklikken naar de andere applicatie. Zo moet de gebruiker niet steedsalle applicaties gaan nakijken om te zien of er nieuwe meldingen zijn. Enkele voorbeelden vanexterne notificaties zijn:

• Statusverandering: goed- afgekeurd verlofaanvraag

• Herinnering invullen timesheets

HOOFDSTUK 2. BESPREKING INTRANET 57

Figuur 2.35: Het notificatievenster

HOOFDSTUK 2. BESPREKING INTRANET 58

1 i f ( ! Mode lState . I s V a l i d | | e x t e r n a l N o t i f i c a t i o n == n u l l ) return Request .C r e a t e R e s p o n s e ( HttpStatusCode . BadRequest , new { ModelState }) ;

2 i f ( ! AccessTokenManager . I s A l l o w e d T o A c t i o n ( e x t e r n a l N o t i f i c a t i o n .AccessToken , P ub l i c A p i P e rm i s s i o n E n u m . W r i t e N o t i f i c a t i o n s ) ) returnRequest . C r e a t e R e s p o n s e ( HttpStatusCode . U n a u t h o r i z e d ) ;

34 v a r u s e r = UserManager . GetUserBaseByUsername ( e x t e r n a l N o t i f i c a t i o n .

Username ) ;5 i f ( u s e r == n u l l ) return Request . C r e a t e E r r o r R e s p o n s e ( HttpStatusCode .

BadRequest , new E x c e p t i o n ( ” User not found ” ) ) ;67 v a r n o t i f i c a t i o n = new N o t i f i c a t i o n B a s e ( )8 {9 T i t l e = e x t e r n a l N o t i f i c a t i o n . T i t l e ,

10 Content = e x t e r n a l N o t i f i c a t i o n . Content ,11 U r l = e x t e r n a l N o t i f i c a t i o n . Ur l ,12 N o t i f i c a t i o n T y p e I d = ( i n t ) N o t i f i c a t i o n T y p e E n u m . E x t e r n a l ,13 R e c i p i e n t U s e r I d = u s e r . U s e r I d14 } ;1516 N o t i f i c a t i o n M a n a g e r . Save ( n o t i f i c a t i o n ) ;

Code 2.4: Notificaties - Externe notificatie opslaan

2.14 Beheer van de Umbraco backend

2.14.1 User permissions

Niet elke gebruiker heeft evenveel rechten bij het gebruik van het intranet. Deze rechten wordenvooral duidelijk bij het gebruik van Umbraco in de backend. De gebruikers zijn opgedeeldin 3 groepen: gewone gebruikers, ambassadeurs en hoofdadministrators. Deze opdeling isnoodzakelijk zodat gewone gebruikers niet de meest nutteloze nieuwsberichten aanmaken ofzomaar evenementen gaan organiseren. We bespreken de rechten per gebruikersgroep.

2.14.1.1 Gewone gebruikers

De meeste werknemers zullen tot de gewone gebruikers behoren. Deze groep gebruikers heefttoegang tot de volledige frontend van het intranet, maar slechts tot enkele onderdelen van debackend. Gewone gebruikers kunnen volgende acties doen in Umbraco:

• Aanmaken van technologische artikels

• Beheren van technologische artikels door hem/haar gemaakt

• Aanmaken technische sessies

HOOFDSTUK 2. BESPREKING INTRANET 59

• Beheren van technische sessies door hem/haar gemaakt

Al de andere functies zullen niet zichtbaar zijn en kunnen zo dus ook niet gebruikt worden.

2.14.1.2 Ambassadeurs

Per bedrijf van ABC-Groep zullen er een of twee ambassadeurs zijn. Dit zijn waarschijnlijkde teamleads. Ambassadeurs hebben toegang tot alle functies waar een gewone gebruiker ooktoegang tot heeft, met nog enkele extra privileges . Ze hebben nog extra toegang tot volgendeonderdelen:

• Aanmaken van evenementen

• Beheren van evenementen die ze zelf hebben gemaakt

• Aanmaken van nieuwsartikels

• Beheren van nieuwsartikels die ze zelf hebben gemaakt

• Beheren van hun eigen afdelingspagina

◦ Instellen contactpersonen

◦ Aanmaken FAQ

◦ Instellen top pagina’s

De ambassadeur van HR heeft nog extra toegang tot de referral sectie in Umbraco, waar ze dereferrals kunnen beheren.

2.14.1.3 Hoofdadministrators

Hoofdadministrators hebben volledige controle over de backend. Ze kunnen alle nieuwsartikels,technologische artikels en evenementen bekijken en beheren, ook die van andere gebruikers. Zehebben nog extra toegang tot het beheren van de Pluralsight accounts en tot de adminsectie.Hierin kunnen bijvoorbeeld de social media links ingesteld worden of de links naar de andereinterne applicaties.

2.14.2 Content tree structuur

Alle content die aangemaakt wordt in Umbraco, wordt weergegeven in een boomstamstructuur.We hebben onze hoofditems waaronder home, nieuws, knowledge center, evenementen enafdelingen. Elk van deze items bevat dan alle bijhorende artikels en berichten. In het beginzullen al deze items nog vrij makkelijk terug te vinden zijn om bijvoorbeeld de inhoud van eenbericht te wijzigen. Na enkele maanden kan dit al een hele uitdaging worden, doordat er al

HOOFDSTUK 2. BESPREKING INTRANET 60

vele artikels en berichten geplaatst zijn. We willen natuurlijk de structuur behouden en zorgendat alles op een duidelijke manier in de content tree geplaatst wordt. Om dit te verwezenlijken,sorteren we alle items per jaar en per maand. Telkens er een nieuw item wordt aangemaakt enopgeslagen, zal dit in de bijhorende map geplaatst worden. Aan de hand van de datum kan degebruiker dan oudere berichten terugvinden.

1 . . .2 i f ( nodeToMove . Parent ( ) . I d == monthFolderNode . I d ) return ;34 //move the c r e a t e d node i n t o the c o r r e c t month f o l d e r5 c o n t e n t S e r v i c e . Move ( nodeToMove , monthFolderNode . Id , nodeToMove . C r e a t o r I d )

;6 c o n t e n t S e r v i c e . S av eA nd Pu b l i sh Wi th St at u s ( nodeToMove , nodeToMove . C r e a t o r I d ,

f a l s e ) ;

Code 2.5: Content tree structuur - Verplaatsen naar correcte folder

Standaard worden in Umbraco alle nieuwe items onderaan de lijst getoond. Dit is echter nietpraktisch wanneer er veel content gegenereerd wordt. Het is wel mogelijk om de berichtenhandmatig te sorteren, maar dat zou onbegonnen werk zijn om dit na elk bericht weer te gaandoen. Daarom hebben we besloten om dit programmatorisch aan te pakken. Elke node inde content tree van Umbraco bevat een ordernumber. Elke node onder eenzelfde parent wordtstandaard gesorteerd op dit nummer. Wanneer een nieuw item aangemaakt wordt krijgt het eennieuwe nummer, 1 groter dan het vorige geplaatste item. Omdat er geen kant en klare manieris om de items programmatorisch te sorteren, hebben we hier een beetje moeten valsspelen.Het eerste child element krijgt vanaf nu OrderNumber 99999, en voor elk nieuw item trekkenwe hier eentje af. Zo komt elk nieuw item bovenaan de lijst te staan in de boomstructuur. Invorige versies van Umbraco was hier een makkelijkere mogelijkheid toe, maar in Umbraco 7 isdit helaas nog niet geımplementeerd.

2.14.3 Antwoorden op Evenementen

Elke gebruiker kan zich op aan- of afwezig zetten bij een evenement. Hierbij kunnen ookeventuele vragen komen, waarop de gebruiker moet antwoorden. De organisator wil het aantalaan- of afwezigen met bijhorende antwoorden natuurlijk op een makkelijke manier kunnenbekijken. Al deze antwoorden kunnen bekeken worden bij het evenement in Umbraco. Erwordt snel duidelijk hoeveel mensen aanwezig zullen zijn. Ook hun bijhorende antwoorden vaneventuele vragen kunnen hier bekeken worden. Mocht een gebruiker zijn antwoord gewijzigdhebben, is het ook mogelijk om oudere antwoorden terug op te vragen indien gewenst door deorganisator.

HOOFDSTUK 2. BESPREKING INTRANET 61

Figuur 2.36: Een overzicht van enkele antwoorden op een event

2.14.4 Admin sectie

De admin sectie is een apart gedeelte in Umbraco dat enkel toegankelijk zal zijn vooradministrators. Hierin kunnen enkele instellingen gewijzigd worden zoals het aantal items die ermaximaal getoond mogen worden op de homepagina bij nieuws en het knowledge center. Verderkunnen er nog enkele instellingen ingesteld worden voor de footer. Zo is er de mogelijkheid omlinks naar de andere interne applicaties en de verschillende ABC-websites toe te voegen of teverwijderen. Men kan hier zo veel links toevoegen als nodig. Als laatste kunnen er links naar desociale media accounts van ABC-Groep ingesteld worden. Er zijn slechts enkele sociale mediabeschikbaar om in te stellen. Indien de administrator bij een sociale media geen link invult, zaldeze ook niet mee verschijnen in de footer.

Figuur 2.37: Het menu van de admin sectie

HOOFDSTUK 2. BESPREKING INTRANET 62

2.14.5 Referral sectie

Om de ingestuurde referrals te beheren, hebben we een aparte sectie aangemaakt in Umbraco.Enkel werknemers van HR en de administrators zullen toegang hebben tot deze sectie. Alde ingestuurde referrals worden weergegeven in een tabel. Enkel de basisinformatie van dereferral, zoals naam, bedrijf en status worden getoond. Je kan van elke referral meer informatietonen door er op te klikken. Dit opent een verborgen deel waar er meer gedetailleerde infostaat over de persoonlijke gegevens van de referral. Elke referral heeft een status. Bij eennieuwe ingestuurde referral zal deze status standaard op ‘Processing’ staan. Dit betekent datHR momenteel deze referral aan het verwerken is. De referral kan vervolgens geaccepteerd ofgeweigerd worden. Bij een weigering zal de kandidaat niet aangenomen worden en gebeurt ervoor de rest niets meer mee. Hij blijft nog wel in de lijst van referrals staan zodat er toch eenoverzicht blijft van alle kandidaten ongeacht de status. Een kandidaat kan ook geaccepteerdworden. In dit geval verandert zijn status naar ‘Accepted’. Dit betekent dat de kandidaat aande slag mag binnen ABC-Groep. Hoewel de referral geaccepteerd is, is deze nog niet compleet.De werknemer die deze kandidaat heeft aangebracht zal nog een incentive krijgen. Pas als dewerknemer deze incentive heeft ontvangen, mag de status van de referral naar ‘Completed’gezet worden. Ook deze voltooide referrals zullen in de lijst blijven staan. Er kan ten allen tijdeherbekeken worden wanneer de referral is ingestuurd en wanneer zijn status naar de volgendeis veranderd. Telkens als de status van een referral verandert, zal ook de werknemer die dezeheeft aangebracht ervan op de hoogte gebracht worden door middel van een notificatie. Omde lijst met referrals overzichtelijk te houden, kunnen ze gesorteerd worden op de verschillendekolommen. Standaard zal dit gebeuren op de status met ‘Processing’ als eerste. Zo kan HR opeen snelle manier zien of er nieuwe referrals zijn toegevoegd. Mochten de statussen toch niethelemaal duidelijk zijn, kan er bovenaan meer info over de statussen gevonden worden.

Figuur 2.38: Het referral overzicht in Umbraco

HOOFDSTUK 2. BESPREKING INTRANET 63

2.15 Ophalen van data

Eerder in dit document is reeds een aantal keren vermeld dat bepaalde items worden opgeslagenin de database of worden opgehaald uit de database. In deze sectie leggen we uit hoe dit procesvan opslaan en ophalen juist in zijn werk gaat. In de meeste situaties is het achterliggendeproces vrij gelijkaardig, en conform aan onderstaande uitleg. In de gevallen waar dit niet zo iswordt dan ook uitgelegd op welke manier er afgeweken wordt van dit proces.

In dit project maken we gebruik van 2 databases, een database van Umbraco en een eigendatabase. In de Umbraco database wordt alle data opgeslagen van items aangemaakt inUmbraco. Tijdens het opslaan van een item in Umbraco, slaan we ook enkele belangrijkebasiseigenschappen op in onze eigen database. Een van deze eigenschappen is de ID van hetcontent item in Umbraco. Aan de hand van dit ID kunnen we het content item opvragen uit deUmbraco database. Deze basiseigenschappen hebben we nodig om snel en effectief bepaaldedata op te halen en data met elkaar te linken. Eigenschappen die minder belangrijk zijn, zoalsde titel en de inhoud, worden enkel in de database van Umbraco opgeslagen.

Het tonen van data van een item gebeurt op de meeste plaatsen volgens hetzelfde proces.We beginnen met het ophalen van de data uit onze eigen database door onze managers inde Business Logic Layer (BLL) aan te roepen. De methodes in deze manager maken gebruikvan LINQ to SQL26. We instantieren een nieuwe databasecontext waarop we LINQ query’skunnen uitvoeren. In deze query’s kunnen we ook de items al filteren en enkel de itemsteruggeven die aan bepaalde voorwaarden voldoen. De objecten die we terugkrijgen zijn DAL(Data Access Layer) objecten. Omdat enkel de BLL toegang heeft tot de DAL, worden dezeDAL objecten door onze mapper omgezet naar BDO’s (Business domain object) dat we zelfhebben aangemaakt. Als zo’n DAL object nog andere DAL objecten bevat door een relatie inde database, zal deze ook ineens omgezet worden door de mapper naar hun overeenkomstigBDO. Deze mapped objecten worden dan aan de controller teruggegeven.

De controller kan zowel een RenderMvcController zijn of een UmbracoApiController. EenRenderMvcCotroller is de controller die het Model opvult met data en dit model meegeeft aande bijhorende View. Een UmbracoApiController wordt dan weer aangeroepen door een HttpGetof HttpPost request uit te voeren vanuit Angular of Javascript. Een API controller zal ook denodige data ophalen en deze terugsturen naar de gebruiker. Doordat in onze eigen database dusniet alle gegevens zitten, moeten we de overige data nog ophalen uit de database van Umbraco.We moeten als het ware ons BDO aanvullen. Dit doen we met de Filler. De filler werkt ongeveerhetzelfde als de Mapper. De eigenschappen van het BDO worden in een model object gestokenen de overige eigenschappen worden opgehaald uit Umbraco. Met de ContentService kunnenwe het bijhorende content item opvragen aan de hand van de UmbracoContentId dat in onzeeigen database zit. Aan de hand van de aliassen, die in het Umbraco Template staan ingesteld,kunnen we dan de bijhorende waarde van die eigenschappen opvragen. Nu we alle data en infohebben van onze items, kunnen we deze in het rendermodel steken en kan dit model aan de

26LINQ to SQL - https://msdn.microsoft.com/en-us/library/bb386976

HOOFDSTUK 2. BESPREKING INTRANET 64

view meegegeven worden. In het geval van de API controller zal deze data naar de gebruikergestuurd worden.

Werd de data opgehaald via de RenderMvcController, dan wordt het model meegegeven aan deview. In de view kunnen we specificeren welke model dat er verwacht wordt en kunnen we dedata in dit model gaan gebruiken in onze html. Als we bijvoorbeeld de titel willen plaatsen inonze html, verwijzen we gewoon naar deze property van het model. Tijdens het renderen vande webpagina worden op deze plaatsen de waarde van de eigenschappen ingevuld. Het ophalenvan data via de API controller gebeurt vrijwel altijd via Angular. In Angular kunnen we deteruggestuurde data in een variabele steken. Bestaat de data uit meerdere items of objecten,dan zal de variabele een array zijn. Aan de hand van databinding met Angular kunnen we voorelk object in de array een specifiek deel html renderen. Dit doen we door gebruik te maken vanNgRepeat. In dit stuk html kunnen we dan de waarden van de eigenschappen van een itemtonen met behulp van de databinding.

Hoofdstuk3Resultaten

Als belangrijkste opbrengst van dit project kunnen we stellen dat ABC-Groep er een betereintranet-applicatie aan overhoudt. De problemen van de vorige applicatie en de tekortkomingenop zowel gebied van gebruiksvriendelijkheid als design en structuur, hebben ertoe geleid dat devroegere ABC-Point niet meer gebruikt werd door de werknemers van het bedrijf. Een intranet-applicatie moet een platform zijn dat aan elke gebruiker een meerwaarde biedt. De eerstereflex van een gebruiker moet zijn om naar het intranet te gaan kijken om nieuwe informatie tebekomen, en niet een mail sturen naar Human Resources, Office of Support, zoals momenteelvaak het geval is.

Voor de afdelingen die overstelpt worden met e-mails van werknemers zal de nieuwe intranet-applicatie een hele verademing zijn. Door de verschillende FAQ die elke afdeling naar eigennoden kan invullen op het intranet kunnen de werknemers de meest courante vragen makkelijkterugvinden. Zo zullen de contactpersonen van elke afdeling veel minder telkens hetzelfdeantwoord op dezelfde vraag moeten geven. Wanneer ze toch een vraag binnenkrijgen, kan dezemakkelijk opgelost worden door de pagina die het antwoord bevat te delen met de informatiebehoevende werknemer.

De werknemers zelf zullen ook veel makkelijker op de hoogte kunnen blijven van recenteontwikkelingen binnen het bedrijf. Informatie is zeer snel en efficiA�nt bereikbaar op de intranet-applicatie, waardoor een werknemer bijna zijn best zal moeten doen om nog nieuws te missen.

Bij de ontwikkeling van het intranet was er buiten de lokale development omgeving ook eenacceptatie omgeving beschikbaar. Deze omgeving was steeds een release van de volledigeapplicatie. Deze release werd pas na enkele weken voor het eerst gedaan, wanneer de applicatieiets meer vorm begon te krijgen. Na deze initiA�le release werd er op geregelde tijdstippen,meestal na enkele afgeronde gehelen, een nieuwe release gedaan. De acceptatie omgeving kanhet beste omschreven worden als een werkende versie van de applicatie, die een weerspiegelingzou moeten zijn van het echte product. Deze versie werkt met zijn eigen databases en is tevensbeschikbaar op zijn eigen URL. De beschikbaarheid van deze acceptatie omgeving maakte het

65

HOOFDSTUK 3. RESULTATEN 66

voor ons mogelijk om de applicatie iets grondiger door te testen, en om de applicatie dooranderen te laten testen. De input van anderen bracht vaak nog enkele foutjes aan het lichtdie je vanuit het standpunt van developer al eens over het hoofd durft zien. Verder werd deacceptatieomgeving gebruikt bij presentaties en bij de sprint turning point meetings om devoortgang van het project te tonen aan anderen. Op deze omgeving werd dan iets uitgebreidereinhoud geplaatst die mooier toonde voor de toeschouwers.

Door het implementeren van de Single-Sign-On functionaliteit is de drempel voor de werknemersom aan te melden op het intranet sterk verlaagd. Wanneer ook alle andere applicaties hiermeeuitgerust zijn is aanmelden op alle applicaties een fluitje van een cent. Nadien zal het ook debedoeling zijn om andere applicaties enkel bereikbaar te maken als je door het intranet gaat.Deze maatregel zal geleidelijk aan ingevoerd worden zodat gebruiker kunnen wennen aan denieuwe manier van werken, maar de eerste ervaringen van gebruikers met onze applicatie, zowelna de presentatie als na tests op de acceptatie omgeving, wijzen reeds in de richting van eenvlotte overgang die positief onthaald zal worden.

Het einde van de stage was de week voor de company meeting van ABC-Groep. Op dezevergadering waarop alle werknemers van het bedrijf verplicht aanwezig moesten zijn dienden weeen preview te geven van de intranet applicatie. Na een bondige toer doorheen het volledigeproject kregen we bijna enkel lovende opmerkingen over de eerste indruk die de werknemershadden gekregen. De meesten keken er reeds naar uit om het nieuwe intranet in gebruik tenemen.

Uit alle tests, presentaties en evaluaties kunnen we opmaken dat de eerste resultatenveelbelovend zijn, en dat het project op een positieve noot afgesloten kan worden.

Hoofdstuk4Besluit

In de vroegste weken van deze stage was het niet onwaar om te zeggen dat we wat overdonderdwaren door de grootte van het project, en alle functies die geımplementeerd dienden te worden.De tijd die aan analyse gespendeerd werd maakte de zenuwen een beetje los doordat er nogsteeds geen letter code geschreven werd maar de tijd ondertussen wel lustig verder tikte. Kalmblijven was de boodschap, want een analyse is tenslotte een belangrijk element in een project.Ze begeleidt je naar het einddoel, en je hebt iets om op terug te vallen wanneer je aan ietstwijfelt. Nooit hebben we echter de moed laten zakken, en zorgen hebben we omgevormdnaar extra motivatie om het project succesvol af te ronden. Na de start van de effectieveontwikkeling kregen we beter vat op het geheel, en konden de gezonde zenuwen ventileren inde code. Wat begonnen was als een overweldigend project, begon zich nu te vertalen naareen stapsgewijze planning, iets concreet. Waar het gevraagde resultaat onhaalbaar leek, begonsteeds meer een duidelijker beeld te komen, iets waar we trots op konden zijn. In de mentaleworst case scenario’s hadden we natuurlijk geen rekening gehouden met de hoeveelheid kennisdie we op deze korte tijd zouden bijleren. Voor onszelf is wat we hebben bijgeleerd in iedergeval het belangrijkste wat we aan deze opdracht hebben overgehouden.

Na alle presentaties, demo’s en tests die we tijdens de stage gedaan hebben mogen de resultatenzeker positief genoemd worden. Wanneer we alle reacties en commentaren bekijken, kunnenwe concluderen dat het project een veelbelovend intranet zal worden voor de werknemers vanABC-Groep.

Het geeft een zeer groot gevoel van voldoening om te weten dat je zo lang aan een projectgewerkt hebt, en dat het eindresultaat uiteindelijk effectief in gebruik genomen zal worden.Voordat het project effectief in gebruik genomen kan worden zal er nog wel een productieomgeving moeten voorzien worden. Ook moet er nog bekeken worden wie de ambassadeurszullen zijn die inhoud op het intranet zullen mogen plaatsen, en zal er nog een kleine rondleidinggegeven moeten worden in de backend van het project om de werking te doorgronden. Eensalles ingesteld is en iedereen klaar is voor gebruik, is ABC-Groep klaar voor een verbeterdeervaring bij het gebruik van hun intranet.

67

BijlageAHandleiding Intranet

A.1 Aanmelden

Om het intranet en alle andere applicaties te gebruiken, dien je je aan te melden. Gebruikhiervoor jouw AD credentials. Je hoeft je maar eenmalig aan te melden om toegang te hebbentot alle applicaties.

A.2 Nieuws

Nieuwsberichten worden aangemaakt in Umbraco. In de content tree ga je onder ‘Home’ naar‘Nieuws’. Klik hier op de triple dots en selecteer ‘NewsItem’ om een nieuw nieuwsitem aan temaken. Geef een titel in voor het bericht. Vervolgens dienen volgende eigenschappen ingevuldte worden:

• Image: Selecteer een afbeelding dat getoond moet worden bij het item. Er kan ook eennieuwe afbeelding geupload worden.

• Intro: Geef een korte beschrijving waarover het nieuwsbericht gaat

• Content: Plaats hier het volledige nieuwsbericht

• Primary Audience: Selecteer een team waarvoor het bericht bestemd is. Indien het vooriedereen zichtbaar moet zijn, selecteer dan ‘ABC-Groep’

• News Type: Selecteer een nieuwstype/categorie dat het beste bij het bericht past.

• Extra Tags: Selecteer nog andere tags die het makkelijk maken om het bericht terugte vinden. Je kan gewoon beginnen typen, suggesties worden weergegeven. Indien degewenste tag nog niet bestaat, kan deze nog toegevoegd worden.

68

BIJLAGE A. HANDLEIDING INTRANET 69

• Sticky Until: Vul hier de gewenste datum in tot wanneer het nieuwsbericht sticky moetzijn. Indien het bericht geen sticky nieuwsbericht is, laat je dit veld leeg.

Klik op ‘Save and publish’ om het nieuwsbericht op te slaan en te publiceren.

A.3 Knowledge Center

Onder het knowledge center vinden we de technologische artikels en de technische sessies.

A.3.1 Technologisch artikel

Om een nieuw technologisch artikel aan te maken, ga je naar het create menu (triple dots) bij‘Techarticles’ en klik je op ‘TechArticle’. Geef een titel in voor het artikel. Vervolgens dienenvolgende eigenschappen ingevuld te worden:

• Image: Selecteer een afbeelding dat getoond moet worden bij het item. Er kan ook eennieuwe afbeelding geupload worden.

• Intro: Geef een korte beschrijving waarover het artikel gaat

• Content: Plaats hier het volledige artikel

• Technology: Selecteer een technologie die het beste samenvat waarover het artikel gaat.

• Extra Tags: Selecteer nog andere tags die het makkelijk maken om het bericht terugte vinden. Je kan gewoon beginnen typen, suggesties worden weergegeven. Indien degewenste tag nog niet bestaat, kan deze nog toegevoegd worden.

Klik op ‘Save and publish’ om het artikel op te slaan en te publiceren.

A.3.2 Extern technologisch artikel (Link)

Om een extern technologisch artikel toe te voegen, bv: een artikel op een andere website,selecteer je ‘TechArticleLink’ in het ‘Techarticles’ create menu. Geef een titel in voor hetartikel. Vervolgens dienen volgende eigenschappen ingevuld te worden:

• Image: Selecteer een afbeelding dat getoond moet worden bij het item. Er kan ook eennieuwe afbeelding geupload worden.

• Intro: Geef een korte beschrijving waarover het artikel gaat

• Link URL: Plaats hier de URL naar het volledige artikel

• Technology: Selecteer een technologie die het beste samenvat waarover het artikel gaat.

BIJLAGE A. HANDLEIDING INTRANET 70

• Extra Tags: Selecteer nog andere tags die het makkelijk maken om het bericht terugte vinden. Je kan gewoon beginnen typen, suggesties worden weergegeven. Indien degewenste tag nog niet bestaat, kan deze nog toegevoegd worden.

Klik op ‘Save and publish’ om het artikel op te slaan en te publiceren.

A.3.3 Technische sessie

Om een technische sessie aan te maken, selecteer je ‘TechSession’ in het ‘Techsessions’ createmenu. Geef een titel in voor de sessie. Vervolgens dienen volgende eigenschappen ingevuld teworden:

• Internal Hosts: Zoek en selecteer de interne werknemers die de sessie gaan geven.

• Image: Selecteer een afbeelding dat getoond moet worden bij het item. Er kan ook eennieuwe afbeelding geupload worden.

• Content: Plaats hier alle technische info over de sessie. Waarover zal deze gaan? Watkomt er aan bod? Technische requirements? Eventuele voorkennis opfrissen?

• Technology: Selecteer een technologie die het beste samenvat waarover de sessie gaat.

• Extra Tags: Selecteer nog andere tags die het makkelijk maken om het bericht terugte vinden. Je kan gewoon beginnen typen, suggesties worden weergegeven. Indien degewenste tag nog niet bestaat, kan deze nog toegevoegd worden.

Open het ‘Event’ tabblad en vul volgende eigenschappen in:

• Start Date: Selecteer de startdatum en tijdstip van de sessie

• End Date: Selecteer de datum en tijdstip wanneer de sessie zal eindigen

• Subscription Deadline: Selecteer de datum tot wanneer de werknemers zich kunneninschrijven. Laat dit veld leeg indien je geen inschrijvingsdeadline wenst. De deadlinezal dan automatisch hetzelfde zijn als de startdatum.

• Location: Geef een locatie op waar de sessie zal doorgaan

• Content: Vul hier alle algemene info over de sessie in. Waar? Hoe? Wanneer?Inschrijvingsprijs?

Indien er vragen toegevoegd moeten worden die de werknemers moeten beantwoorden bij hetinschrijven, ga je naar het ‘Reply’ tabblad. Zo niet, sla deze stap over. Er kunnen zowel vragentoegevoegd worden bij het inschrijven alsook bij het weigeren van een evenement. Om eenvraag toe te voegen, klik je op ‘Add question’. Klik op het potlood om de vraag te bewerken.Klik op het kruisje om de vraag te verwijderen. Vul de vraag in in het het tekstveld en sla dezeop door op het vinkje te klikken. Klik op ‘Add possible answer’ om een antwoord aan de vraagtoe te voegen. Bewerk ook hier weer het antwoord en vergeet niet op het vinkje te klikken

BIJLAGE A. HANDLEIDING INTRANET 71

om het antwoord op te slaan. Indien er op de vraag verplicht geantwoord moet worden, vinkje ‘Required’ aan. Selecteer daarnaast of de gebruiker slechts 1 of meerdere antwoorden magaanduiden. Herhaal bovenstaande stappen om meerdere vragen toe te voegen. In het ‘Replyoverview’ kunnen alle antwoorden van gebruikers die zich reeds hebben ingeschreven bekekenworden.

Klik op ‘Save and publish’ om de sessie op te slaan en te publiceren.

A.4 Evenementen

Om een nieuw evenement aan te maken, ga je naar het create menu van ‘Events’ en klik jeop ‘Event’. Geef een titel in voor het evenement. Vervolgens dienen volgende eigenschappeningevuld te worden:

• Image: Selecteer een afbeelding dat getoond moet worden bij het item. Er kan ook eennieuwe afbeelding geupload worden.

• Location: Geef een locatie op waar de sessie zal doorgaan

• Content: Plaats hier alle info over het evenement

• Event Type: Selecteer om wat voor evenement het hier precies gaat.

• Start Date: Selecteer de startdatum en tijdstip van het event

• End Date: Selecteer de datum en tijdstip wanneer het event zal eindigen

• Subscription Deadline: Selecteer de datum tot wanneer de werknemers zich kunneninschrijven. Laat dit veld leeg indien je geen inschrijvingsdeadline wenst. De deadlinezal dan automatisch hetzelfde zijn als de startdatum.

• Extra Tags: Selecteer nog andere tags die het makkelijk maken om het bericht terugte vinden. Je kan gewoon beginnen typen, suggesties worden weergegeven. Indien degewenste tag nog niet bestaat, kan deze nog toegevoegd worden.

• Is public event: Vink dit aan indien het om een openbaar evenement gaat. Openbareevenementen worden ook getoond op de publieke website van ABC-Groep.

Klik op ‘Save and publish’ om het event op te slaan en te publiceren.

BIJLAGE A. HANDLEIDING INTRANET 72

A.5 Accounts

Gebruikers kunnen accounts reserveren die ze dan voor een bepaalde tijd kunnen gebruiken.Om een account beschikbaar te stellen, moet je deze toevoegen in Umbraco. Onder ‘Home’klik je op ‘Reservaties’ en ga naar het create menu. Klik hier op ‘Account’ en geef een naamin voor het Account. Vul vervolgens volgende eigenschappen in:

• Username: De gebruikersnaam van het account dat gebruikt wordt om in te loggen

• Password: Het paswoord van het account dat nodig is om in te loggen

• Account type: Selecteer wat voor account je toevoegd. Standaard zal dit een Pluralsightaccount zijn.

• Other Information: Geef hier nog extra informatie in over het account. Wat voor accountis het? Zijn er bepaalde regels waar rekening mee gehouden moet worden?

A.6 Afdelingen

A.6.1 FAQ

Elke afdelingen kan meerdere FAQ’s toevoegen. Om een nieuwe FAQ toe te voegen, ga jenaar het create menu van de afdeling waar de FAQ moet komen en klik je op ‘FAQ’. Geef deFAQ een naam, bijvoorbeeld waar deze over gaat. Klik op ‘Save and publish’. Om de FAQoverzichtelijk te houden, worden alle vragen opgedeeld in categorieen. Bij de FAQ die je nethebt aangemaakt, voegen we eerst een nieuwe categorie toe. Vul een naam in voor de categorieen klik op ‘Save and publish’. Klik op de categorie die je net hebt aangemaakt. Je krijgt eenvoorlopig lege tabel te zien. Hierin komen alle vragen te staan die bij deze categorie horen.Om een nieuwe vraag aan te maken, klik je op ‘Create’ en vervolgens op ‘FAQ Question’. Vulbovenaan bij de titel de vraag in. In de texteditor bij ‘Content’ vul je het antwoord in op dezevraag. Klik op ‘Save and publish’. Herhaal de bovenstaande stappen om meerdere vragen,categorieen of een compleet nieuwe FAQ toe te voegen.

BIJLAGE A. HANDLEIDING INTRANET 73

A.6.2 Extra Content Pagina

Op een content pagina kunnen afdelingen extra info tonen aan de gebruiker over bepaaldeonderwerpen. Om een nieuwe content page toe te voegen, ga je naar het create menu van jouwafdeling en klik je op ‘Content’. Geef de pagina een naam. Onderaan bij content kan dan deinhoud van de pagina ingevoerd worden. Klik op ‘Save and publish’ om de pagina op te slaan.

A.6.3 Referral pagina (Enkel voor Human Resources)

HR kan ook nog een Pagina toevoegen waar gebruikers nieuwe referrals op kunnen versturen.Ga naar het create menu van de HR afdeling en klik op ‘Referral’. Vul een naam in voor depagina. Bij intro vul je een korte beschrijving in wat het referral program juist is en wat debedoeling ervan is. Klik op ‘Save and publish’ op de pagina op te slaan.

Bibliografie

[1] J. Palermo, J. Bogard, E. Hexter, M. Hinze, and J. Skinner, ASP. NET MVC 4 in Action.Manning Publications Co., 2012.

[2] D. Bell and M. Parr, Programmeren in C#. Pearson Education, 2012.

[3] C. A. TANASIE, “Open source web content management systems umbraco cms,” Opensource, 2010.

[4] “Wikipedia, the free encyclopedia.” http://en.wikipedia.org/.

[5] P. B. Darwin and P. Kozlowski, AngularJS web application development. Packt Publ.,2013.

[6] E. Hustad and T. VikstA l, “Implementing intranet 2.0: A study of knowledge requirementsfor external consultants in enterprise systems,” Procedia Technology, vol. 16, no. 0, pp. 694– 703, 2014.

[7] R. Bernard, Corporate intranet. John Wiley & Sons, Inc., 1997.

[8] C. P. Ruppel and S. J. Harrington, “Sharing knowledge through intranets: A study oforganizational culture and intranet implementation,” Professional Communication, IEEETransactions on, vol. 44, no. 1, pp. 37–52, 2001.

[9] D. Reifer, “Ten deadly risks in internet and intranet software development,” Software,IEEE, vol. 19, no. 2, pp. 12–14, 2002.

[10] S. Guengerich, S. McDonald, D. Graham, and M. Miller, Building the corporate intranet.John Wiley & Sons, Inc., 1996.

[11] D. Sollenberger, D. Darpel, S. Talevski, L. Shumaker, K. Meyer, J. Journey, J. Livingston,R. Nabb, N. Gimbert, et al., “Personalized intranet portal,” 2001. US Patent App.09/833,433.

[12] “Umbraco - the open source asp.net cms.” http://umbraco.com/.

74

BIBLIOGRAFIE 75

[13] “Umbraco forum: Our. the friendliest cms community on the planet.” http://our.umbraco.org/.

[14] “Angularjs - superheroic javascript mvw framework.” https://angularjs.org/.

[15] “Glimpse - the open source diagnostics platform of the web.” http://getglimpse.com/.

[16] “The asp.net site.” http://www.asp.net/mvc/mvc4.

[17] “Scottgu’s blog: Mvc url routing.” http://weblogs.asp.net/scottgu/asp-net-mvc-framework-part-2-url-routing.

[18] “Entity framework documentation.” ttps://msdn.microsoft.com/en-us/data/ee712907.aspx.

[19] “Lucene.net search engine library.” https://lucenenet.apache.org/.

[20] “Stack Overflow.” http://stackoverflow.com/.

[21] “Pluralsight - hardcore developer and it training.” http://www.pluralsight.com/.

[22] “Technet microsoft.” https://technet.microsoft.com/nl-nl/.

[23] “Twitter developers and api.” https://dev.twitter.com/.

[24] “Flickr api.” https://www.flickr.com/services/api/.

[25] “Tweetinvi.” https://tweetinvi.codeplex.com/.

[26] “Msdn: Learn to develop with microsoft developer network.” https://msdn.microsoft.com/nl-be.

[27] “Scott hanselmans blog.” http://www.hanselman.com/blog/.