%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% LATEX-TEMPLATE TECHNISCH RAPPORT
%-------------------------------------------------------------------------------
% Voor informatie over het technisch rapport, zie
% http://practicumav.nl/onderzoeken/rapport.html
% Voor readme en meest recente versie van het template, zie
% https://gitlab-fnwi.uva.nl/informatica/LaTeX-template.git
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%-------------------------------------------------------------------------------
%	PACKAGES EN DOCUMENT CONFIGURATIE
%-------------------------------------------------------------------------------

\documentclass{uva-inf-article}
\usepackage[dutch]{babel}
\usepackage{textcomp}
\usepackage{graphicx}

% Relevant voor refereren vanaf blok 5
%\usepackage[style=authoryear-comp]{biblatex}
%\addbibresource{bib}

%-------------------------------------------------------------------------------
%	GEGEVENS VOOR IN DE TITEL
%-------------------------------------------------------------------------------

% Vul de naam van de opdracht in.
\assignment{Openbare agenda}
% Vul het soort opdracht in.
\assignmenttype{Technische Rapport}
% Vul de titel van de eindopdracht in.
\title{OggleCalendar}

% Vul de volledige namen van alle auteurs in.
\authors{Pim Paardekooper; York Broekhuizen; Sam van Kampen; Ralph Erkamps}
% Vul de corresponderende UvAnetID's in.
\uvanetids{11670819; 10617787; 11874716; 11714778}

% Vul altijd de naam in van diegene die het nakijkt, tutor of docent.
\tutor{Robin Klusman}
% Vul eventueel ook de naam van de docent of vakcoordinator toe.
\docent{Willem Vermeulen}
% Vul hier de naam van de PAV-groep in.
\group{webdb2018-in17}
% Vul de naam van de cursus in.
\course{Webprogrammeren en Databases}
% Te vinden op onder andere Datanose.
\courseid{}

% Dit is de datum die op het document komt te staan. Standaard is dat vandaag.
\date{\today}

%-------------------------------------------------------------------------------
%	VOORPAGINA
%-------------------------------------------------------------------------------

\begin{document}
\maketitle

%-------------------------------------------------------------------------------
%	INHOUDSOPGAVE EN ABSTRACT
%-------------------------------------------------------------------------------

% Niet doen bij korte verslagen en rapporten
\newpage
\tableofcontents
%\begin{abstract}
%\lipsum[13]
%\end{abstract}

%-------------------------------------------------------------------------------
%	INTRODUCTIE
%-------------------------------------------------------------------------------

\section{Introductie}
In het project hebben we een website gemaakt. Deze website is een openbare agenda. De website kan evenementen delen tussen een grote groep mensen. Door alle evenementen te labelen kunnen gebruikers afstellen wat voor evenementen ze te zien krijgen. Niet iedereen kan zomaar alle evenementen zien je moet wel je registreren en goedgekeurd worden door een redactie. Als je niet bent ingelogd kun je alleen de openbare evenementen en labels gebruiken.  

%-------------------------------------------------------------------------------
%	ONTWERP
%-------------------------------------------------------------------------------


\section{Ontwerp}
De hoofdpagina van de website bestaat uit een agenda, een zijbalk met filteropties en de mogelijkheid om labels aan de user toe te kennen. Verder is er een bovenbalk met de titel 'OggleCalendar' naast enkele knoppen, een om in te loggen en een om de Settings te openen. In de agenda zijn standaard alle events te zien die als openbaar zijn gelabeld,
zonder dat een valide log-in vereist is.
Een gebruiker kan registreren en inloggen met een zelfgemaakte log-in systeem, waarna
de gebruiker suggesties voor evenementen kan maken. Deze moeten worden goedgekeurd
door gebruikers met een status van redacteur, voordat deze evenementen zichtbaar zijn in de agenda. Als de gebruiker redacteur- of administrator-status heeft zijn extra knoppen beschikbaar
in het opties-menu, waarmee gebruikers beheerd kunnen worden en events goed- of afgekeurd kunnen worden.
\\

\subsection{Gesprekken}
De gesprekken met de opdrachtgever hebben tot een aantal van de kerne features van de website geleid. Een van de eerste dingen die aan bod kwam was dat anonieme gebruikers alles konden doen omdat het log-in systeem nog niet compleet was. Toen het log-in systeem werkte gingen we in gesprek over het rechten systeem en hoe dat ingericht zou kunnen worden. Daar is een systeem met vier rangen uit gekomen, namelijk een administrator, een redactielid, een googekeurde gebruiker en een anonieme gebruiker. Met dit rechtensysteem waren aan alle eisen van de opdracht voldaan en konden alle verdere benodigde features geimplementeerd worden.
\\
Dit zijn features zoals de mogelijkheid om evenementen te laten goed- of afkeuren voordat ze zichtbaar worden in de agenda, een administratie pagina om gebruikersbeheer te bedienen, en een limiet op welke evenementen een bepaalde gebruiker mag zien. Zonder behulp van een vierde rang in het systeem voor de redactie waren veel van de huidige features niet mogelijk en was de openbare agenda niks meer dan een kale dagboek.

Verder bestaat er ook de mogelijkheid om anderen uit te nodigen om te registreren via een invite link uit de gesprekken met de opdrachtgever gekomen. Dit kwam uit een gesprek over e-mail invites en heeft er toe geleid dat er nu een invite link systeem geimplementeerd is. Dankzij het discussieren en ook het testen van het product door de opdrachtgever zijn dus een aantal belangrijke features en ook heel veel bug fixes gekomen; de opdrachtgever wist heel goed waar veel bugs te vinden waren.

\subsection{Datamodel}
Het datamodel van het project wordt natuurlijk gedicteerd door de functionaliteit van de website. Hier beschrijven we per functie welke tabellen we toegevoegd hebben. Figuur \ref{fig:datamodel} geeft een schematische weergave.

\begin{figure}
\begin{center}
\includegraphics[width=0.9\textheight,angle=90]{datamodel.png}
\caption{Een schema van alle tabellen in de database.}
\label{fig:datamodel}
\end{center}
\end{figure}

\paragraph{Labels}
Om labels te implementeren is een \texttt{Labels}-tabel nodig waarin de naam van een label staat. Om labels kleuren te geven is een tweede tabel nodig, genaamd \texttt{Colors}. Hierin staat de naam en hex-code van een kleur, en een bijbehorende tekstkleur. In de \texttt{Labels}-tabel staat een \textit{foreign key} die een label aan een kleur verbindt.

\paragraph{Gebruikers}
Om gebruikers te implementeren is het natuurlijk nodig om een tabel met gebruikersinfo te hebben, zoals gebruikersnaam, wachtwoordhash, en e-mail.

De ene gebruiker is de andere echter niet, en dus is het ook nodig om de \texttt{User\_Privileges}-tabel te hebben. Om gebruikers actief of inactief te maken is ook nog een tabel nodig. Om een gebruiker zijn wachtwoord te laten veranderen is nog een tabel nodig, \texttt{Password\_tokens}, die een token opslaat en linkt aan een gebruikers-id.

Gebruikers zijn ook deel van bepaalde labels. Om gebruikers aan labels te linken wordt de \texttt{User\_labels}-tabel gebruikt.

\paragraph{Invite-links}
Als een gebruiker registreert is het normaliter nodig dat een administrator zijn registratie goed- of afkeurt. Dit kan vermeden worden door gebruik te maken van invite links, die ervoor zorgen dat iemand kan registreren met een bepaald privilege en dan automatisch goedgekeurd kan worden. Hiervoor wordt een invite token gegenereerd, die in de \texttt{Invites}-tabel staat. De tabel bevat ook een privilege-level, een \textit{foreign key} die wijst naar het desbetreffende level in de privilege-tabel.


\paragraph{Evenementen}
Evenementen hebben een titel, start- en eindtijd, 'gehele dag'-boolean en omschrijving. Ook hebben zij een maker, een \textit{foreign key} die wijst naar de gebruiker die het evenement heeft aangemaakt. Omdat evenementen goedgekeurd moeten worden, is er eenzelfde tabel gebruikt als om gebruikers goed te keuren.

Evenementen kunnen meerdere labels hebben. Hiervoor is een \textit{linking table} gebruikt, die events en labels linkt.


%-------------------------------------------------------------------------------
%	IMPLEMENTATIE
%-------------------------------------------------------------------------------


\section{Implementatie}
\subsection{Code-plaatsing}
Onze website kun je opdelen in een paar delen, we hebben een div content waar standaard een sidebar en bovenbalk in wordt geladen. Ook staat er een div main-content. In deze div wordt de agenda geladen, maar als je naar de admin of redactie pagina gaat dan wordt in die div de informatie van de admin of redactie pagina  geladen. Alle PHP pagina\textquotesingle s voor de standaard content en de agenda staan in de root. De bestandsnaam geeft aan of het om de login, het registreren of de agenda gaat. In de root zit een mapje assets die de javascript voor deze bestanden bevat. De redactie en admin pagina zitten in het mapje redactie. Dit mapje is opgedeeld in evenementen\_overzicht, gebruikers, screen\_gebruikers, label\_management, screen\_evenementen en hulp\_files. Dit zijn pagina\textquotesingle s die geladen kunnen worden vanuit de settings in de sidebar. De hulp\_files bevat PHP en HTML code, die de pagina\textquotesingle s in de redactie folder gemeen hebben. Al de andere mappen zijn opgedeeld in een bestand die een filter form laadt, een post pagina die alle informatie afhandelt die aan een form meegegeven wordt, een javascript bestand en een bestand die al die bestanden aan elkaar koppelt. Het bestand dat alles koppelt wordt door index.php aangeroepen om de pagina\textquotesingle s in de main-content div te laden. Index.php staat ook in de root en is de pagina waarvan uit alles wordt aangeroepen.

\subsection{Code-structuur}
\noindent
Onze code bestaat uit HTML, CSS, PHP en javascript. Per programmeertaal laten we zien wat voor structuur we hebben gebruikt en waarom we voor deze structuur gekozen hebben. \\\\
\noindent
\textbf{CSS.}\\
Alle CSS wordt in een bestand gezet. Wat voor meerdere pagina\textquotesingle s geldt staat bovenaan. Geldt het voor een groep van de pagina\textquotesingle s komt het er onder en geldt het voor een klein stukje van de pagina daar weer onder. Door alles in een bestand te zetten wordt alle pagina\textquotesingle s met dezelfde CSS gestyled. Door in de HTML code de juiste classes mee te geven, zien alle pagina\textquotesingle s er voor het grootste gedeelte hetzelfde uit. Door wat voor de meeste bladzijde's geldt bovenaan te zetten worden afwijkingen van de hoofd stijl niet overschreden.  \\\\

\noindent
\textbf{PHP/HTML.}\\
We hebben een main PHP bestand die alle andere PHP bestanden laadt. Op deze pagina staat de sidebar en de bovenbalk gedenfinieerd die door de gehele site nauwelijks veranderen. In de sidebar kunnen labels en linken naar redactie, admin en andere pagina\textquotesingle s worden geladen. 

\noindent
\textbf{Javascript}\\
Elke pagina krijgt een aparte javascript bestand, die wordt geimporteerd waarneer het bestand in de main page wordt ingeladen. Behalve als het functies zijn die de sidebar, de bovenbalk of de inhoud main-content vlak beïnvloeden. Dit staat dan in de assets folder en bovenaan bij index.php. \\\\ 

\subsection{Beveiliging}
De website is beveiligd voor XSS-aanvallen door op plekken waar gebruikersdata de database in of uitkomt de PHP-functies \texttt{strip\_tags} en \texttt{htmlspecialchars} te gebruiken. Om SQL-injectie te voorkomen wordt gebruik gemaakt van prepared statements.

Om te voorkomen dat gebruikers bijvoorbeeld de verkeerde evenementen kunnen verwijderen wordt hun \texttt{privilege\_id} in \texttt{\$\_SESSION} geplaatst, en gecheckt of het evenement gemaakt is door de desbetreffende gebruiker

\noindent
\subsection{Hoe code DRY is gehouden.} 
Om alle code zo DRY mogelijk te houden hebben we veel functies geschreven die ervoor zorgen dat de we niet twee keer dezelfde code schrijven, maar inplaats daarvan functies aanteroepen. Deze functies worden vooral in javascript geschreven.  \\

\noindent
\textbf{HTML/PHP.}\\
De HTML wordt door de PHP gecreee?rt als er van hetzelfde stukje meer nodig is dan wordt dit stukje in een appart PHP bestand gezet waardoor door het includen van dit bestand het stukje code vaker gebruikt kan worden.   \\

\noindent
\subsection{Belangrijke queries}
Een belangrijke query die in de admin en redactie pagina gebruikt wordt is die voor het ophalen van data die in tabellen wordt gezet. De query wordt aangepast naar wat de gebruiker wilt zien. Door te filteren wordt deze query verandert, maar ook het bladeren en het filteren van de tabellen wordt door deze ene query geregeld. Voor de admin en redactie pagina worden ook query gemaakt voor het updaten van de tabellen met informatie die de gebruiker aan deze pagina\textquotesingle s heeft gegeven. In de main pagina is een belangrijke query degene die in events.php staat. Deze query haalt alle evenementen in een keer op en deze data wordt dan in de agenda weer gegeven. Deze query wordt om de paar seconde aangeroepen met een ajax call. Verder wordt er een query aangeroepen als er een event geupdate moet worden. Dan kijkt hij welk event\_id het event heeft die je wilt wijzigen en neemt deze informatie over en zet het alvast in het formulier. Ook is er een querie om labels als admin toe te kunnen voegen of te verwijderen.    \\

\subsection{Gebruiksvriendelijkheid}
Gedurende het project is er veel mogelijkheid en ook benodigheid geweest om de website te testen. Elke keer dat de website bekeken werd om een nieuwe functionaliteit te testen werd er eigenlijk ook op gebruikersvriendelijkheid getest. Aldus zijn er heel veel momenten geweest om het gevoel van de website en  de navigatie tussen verschillende pagina's te ervaren. Hieruit zijn veel aanpassingen gekomen die ook voor het testen van de website heel handig waren naast een verbeterde gebruikersvriendelijkheid.

De voornoemde aanpassingen zijn vooral de CSS van veel verschillende onderdelen van de website; elementen zoals de \textit{div} bij creatie van een evenement, aanpassen van een evenement, of bekijken van een evenement. Ook is de werking van de sidebar meerdere malen aangepast tot dat hij naar tevredenheid te bedienen was. De labels worden gesorteerd en zijn makkelijk om allemaal tegelijk te selecteren door middel van de \textit{select all labels} knop.

Een van de belangrijkste punten van aandacht voor de gebruikersvriendelijkheid is het gebruik van minimalistiche tekst en veel iconen. Door niet te veel tekst te tonen voelt de pagina heel schoon en is er geen chaos. De iconen worden op allerlei plekken gebruikt van de voornoemde \textit{div} elementen voor de evenementen tot aan de beheerders pagina's voor evenementen en gebruikers.

Tenslotte zijn de log-in en registratie windows ook met aandacht op gebruikersvriendelijkheid gemaakt. Het is een simpel registratieformulier met weinig velden en overzichtelijke eisen voor elke veld. Ook is er een \textit{re-CAPTCHA} om bots tegen te gaan terwijl de gebruikersvriendelijkheid gewaarborgd wordt. 

\subsection{Beveiliging}
Alle gebruikersinvoer wordt met een strip?tags onschadelijk gemaakt. \\
Cross-scripting wordt tegen gegaan door: \\
En we beveiligen elke login door de https te gerbuiken en alle wachtwoorden te encrpten.

%-------------------------------------------------------------------------------
%	RESULTATEN
%-------------------------------------------------------------------------------

\section{Resultaten}
-screenshots\\

%-------------------------------------------------------------------------------
%	DISCUSSIE
%-------------------------------------------------------------------------------

\section{Discussie}
Een agenda kan je zo uitgebreid maken als je zelf wilt. Er is altijd wel een nieuwe functie die je toe wilt voegen of wat stijl die je kan veranderen. In het begin hadden we dan ook meer dan genoeg ideeën voor onze agenda. Van deze ideeën hebben we de meest essentiële gekozen die voor een agenda nodig zijn. Wat een groter obstakel was dan we eerst inschatten was hoeveel dingen eigenlijk toch nog nodig waren voor een mooie en praktische agenda. Sommige functionaliteit is pas zeer laat toegevoegd aan onze agenda en er zijn nog steeds bepaalde functies die we niet hebben kunnen implementeren. Voorbeelden hiervan zijn herhaalbare events of events waarin je gebruikers kunt \textit{taggen}. We hadden hier in het begin beter moeten plannen. We begonnen al met het schrijven van code voordat we onze agenda volledig uitgedacht hadden. Dit had als gevolg dat wanneer we later bedachten dat bepaalde functies toch wel best handig waren, we ze moeilijk konden toevoegen. Het toevoegen van nieuwe functies ging moeizaam omdat we tijdens het schrijven van onze code geen rekening hielden met het feit dat we later ook nog deze andere functies moesten toevoegen. Wat we dus ook beter hadden kunnen doen was onze code zo schrijven dat er makkelijk iets aan toegevoegd kon worden. Dit was gelukkig vaker niet het geval dan wel maar het had voorkomen kunnen worden met goede planning en nette code.\\\\
De site had op een moment veel last van vervelende bugs. Dit kwam voornamelijk doordat mensen code toevoegden die indirect andere code beinvloedde en uitbreidingen van bestaande code. Het oplossen van deze bugs heeft veel tijd gekost en het was zeer gunstig geweest als dit in mindere mate of niet had gehoeven. Achteraf gezien hadden we dit kunnen voorkomen met betere communicatie en documentatie. Met communicatie door aan elkaar lastige code uit te leggen en met documentatie zodat mensen de code makkelijker begrijpen.\\\\
Omdat in het begin weinig gelet werd op mogelijke uitbreidingen later was de code moeilijk te onderhouden en onoverzichtelijk. Later, toen we deze code moesten uitbreiden en zagen dat dat erg moeizaam ging, hebben we onze code geherstructureerd. Javascript in aparte bestanden, aparte php bestanden en bestanden gesorteerd op functie. Dit zorgde ervoor dat onze code een stuk beter te onderhouden was. Achteraf gezien zijn we niet helemaal grondig geweest en kom je nog op verschillende onlogische plaatsen bepaalde code tegen. Achteraf was het natuurlijk beter geweest als we dit vanaf het begin hadden gedaan.

\subsection{Conclusie}
Het oorspronkelijke idee van een website waar verschillende groepen hun eigen agenda konden aanvragen hebben we helaas niet kunnen maken. Voornamelijk door een gebrek aan tijd. Wat wel goed gelukt is, is de agenda zelf. Deze heeft bijna alle belangrijke functies die we in gedachten hadden. De database werkt goed samen met onze webpagina hoewel we het niet hebben getest bij grotere hoeveelheden data. Onze site is beveiligd op SQL-injection, html-injection en cross-site scripting. Dit hebben we alleen niet uitgebreid kunnen testen wegens te weinig tijd.\\
Aan andere groepen die ook een openbare agenda willen maken willen wij aanraden om eerst te focussen op de belangrijkste functies van een agenda. Dat is de grootste uitdaging bij ons geweest tijdens dit project. Bij het implementeren van deze functies is het ook belangrijk om ze van te voren goed uit te denken.\\
Communicatie heeft ook een grootte rol gespeeld tijdens dit project. Wanneer iets onduidelijk was werd het altijd snel uitgelegd. Zo kon iedereen altijd efficient werken aan de opdracht en hebben we een eindproduct geleverd waar we tevreden mee zijn maar nog veel dingen aan hadden kunnen verbeteren.

\pagebreak
\subsection{Bronvermelding}

%---------------jj----------------------------------------------------------------
%	REFERENTIES
%-------------------------------------------------------------------------------

%\printbibliography

%-------------------------------------------------------------------------------
%	BIJLAGEN EN EINDE
%-------------------------------------------------------------------------------

%\section{Bijlage A}
%\section{Bijlage B}
%\section{Bijlage C}
\end{document}
\grid
