User stories¶
Deze user stories staan op volgorde. Als je ze van boven naar beneden uitvoert, zou je nooit vast moeten lopen qua werkzaamheden.
De “OOP Refactor”-user stories doe je pas als je ook daadwerkelijk begint met objectgeoriënteerd programmeren en kun je voor die tijd overslaan.
Evenementen - Toevoegen¶
Voor het toevoegen van evenementen is alleen een naam (string), beschrijving (string) en datum (Date) nodig. Hierbij is beschrijving als enige optioneel.
Er is een opslaan-knop. Indien er geen gegevens of verkeerde gegevens worden ingevuld, dan toont de pagina een duidelijke foutmelding om de gebruiker hierop te attenderen.
Er is een annuleren-knop om terug te gaan naar het evenementenoverzicht.
Paper Prototype¶
Evenementen - Overzicht¶
Op deze pagina zie je een lijst van alle door de gebruiker aangemaakte evenementen.
Je ziet per evenement in ieder geval de naam en beschrijving. Zo ook knoppen om deze specifiek te kunnen bewerken of verwijderen. Als je op een evenement klikt, kom je op de detail-pagina van het evenement terecht.
De evenementen zijn aflopend op datum gesorteerd, de meest recente staat dus bovenaan.
Op de pagina zelf staat ook een knop om een evenement toe te voegen.
Paper Prototype¶
Evenementen - Bewerken¶
Dit is vrijwel dezelfde pagina als toevoegen, het enige verschil is dat hier ook een checkbox bij komt om te archiveren (boolean).
Alle velden zijn van te voren ingevuld met de data die al bekend is.
Er is een opslaan-knop. Indien er geen gegevens of verkeerde gegevens worden ingevuld, dan toont de pagina een duidelijke foutmelding om de gebruiker hierop te attenderen.
Er is een annuleren-knop om terug te gaan naar de detail-pagina van het evenement.
Paper Prototype¶
Evenementen - Verwijderen¶
Op deze pagina wordt de gebruiker gevraagd om het verwijderen te bevestigen. In de tekst wordt de naam van het evenement genoemd.
Er is een verwijderen-knop om het verwijderen te bevestigen.
Er is een annuleren-knop om terug te gaan naar de detail-pagina van het evenement.
Paper Prototype¶
Evenementen - Detail¶
Op deze pagina kun je veel verschillende kanten op.
Als gebruiker zie je in ieder geval de naam, beschrijving en datum van het evenement.
Er is een knop om naar:
- evenement bewerken te gaan
- evenement verwijderen te gaan
- deelnemersoverzicht te gaan
- uitgavenoverzicht te gaan
- betalingenoverzicht te gaan
- evenementenoverzicht te gaan
Paper Prototype¶
Inloggen¶
Voor inloggen heeft een gebruiker alleen een e-mailadres (string) en een wachtwoord (string) nodig.
Er is een inloggen-knop. Indien er geen gegevens of verkeerde gegevens worden ingevuld, dan toont de pagina een duidelijke foutmelding om de gebruiker hierop te attenderen.
De pagina bevat ook een link naar de Registreren pagina.
Paper Prototype¶
Registreren¶
Voor registreren heeft een gebruiker alleen een naam (string), e-mailadres (string) en wachtwoord (string) nodig.
Er is een registreren-knop. Indien er geen gegevens of verkeerde gegevens worden ingevuld, dan toont de pagina een duidelijke foutmelding om de gebruiker hierop te attenderen.
De pagina bevat ook een link naar de Login-pagina.
Paper Prototype¶
Refactor: Evenement aan een gebruiker koppelen¶
Een evenement moet gekoppeld kunnen worden aan een gebruiker. Het evenementenoverzicht toont dan enkel de evenementen die aan de ingelogde gebruiker gekoppeld zijn.
Homepagina¶
De homepagina verwelkomt nieuwe gebruikers door ze naar Inloggen of Registreren te sturen.
Indien een gebruiker is ingelogd, toont de homepage een link naar het meest recent toevoegde evenement.
Paper Prototype: Uitgelogd¶
Paper Prototype: Ingelogd¶
Navigatie¶
De navigatie bestaat uit de volgende onderdelen:
- Een logo
- Links:
- Home
- Evenementen
- Inloggen
- Registeren
- Uitloggen
Inloggen en Registreren zijn alleen zichtbaar als er niet is ingelogd, na inloggen verdwijnen deze en komt Evenementen en Uitloggen beschikbaar.
Eventueel kan het logo ook een link naar Home zijn.
Paper Prototype: Uitgelogd¶
Paper Prototype: Ingelogd¶
Refactor: Van JavaScript naar TypeScript¶
Bij de overstap naar duo’s zul je ook moeten overstappen van JavaScript naar TypeScript. Eerder geschreven code kan met wat kleine aanpassingen alsnog werken, maar daar moet je wel even tijd voor maken.
OOP Refactor: Controller-class¶
Voeg een abstracte Controller-class toe waarvan alle andere controllers kunnen overerven.
OOP Refactor: Eén plek voor het beheer van de navigatie¶
De beste plek hiervoor is om de Controller-class van een renderNav-functie te voorzien.
OOP Refactor: Inloggen en Registeren¶
Voor deze functionaliteit is het goed om een User-model te introduceren met een bijbehorende UserRepository en benodigde functies voor toegang tot de database vanuit de UserController.
De repository maakt gebruik van de HBO-ICT.Cloud API om te koppelen met een database, je zult dus ook een database-tabel moeten maken met de juiste relaties.
Wanneer je deze of een andere repository in de controller wilt gebruiken, moeten je deze in de constructor van de controller instantiëren.
OOP Refactor: Evenementen¶
Voor deze functionaliteit is het goed om een Event-model te introduceren met een bijbehorende EventRepository en benodigde functies voor toegang tot de database vanuit de EventController.
De repository maakt gebruik van de HBO-ICT.Cloud API om te koppelen met een database, je zult dus ook een database tabel moeten maken met de juiste relaties.
Wanneer je deze of een andere repository in de controller wilt gebruikten, moeten je deze in de constructor van de controller instantiëren.
Deelnemers - Toevoegen¶
Voor het toevoegen van deelnemers is alleen een naam (string) en aandeel (number) nodig. Hierbij is aandeel als enige optioneel, deze wordt bij opslaan op 0 gezet.
Je ziet aan welk evenement je momenteel een deelnemer gaat toevoegen.
Er is een toevoegen-knop. Indien er geen gegevens of verkeerde gegevens worden ingevuld, dan toont de pagina een duidelijke foutmelding om de gebruiker hierop te attenderen.
Er is een annuleren-knop om terug te gaan naar het deelnemers overzicht van het huidige evenement.
Paper Prototype¶
Deelnemers - Overzicht¶
Op deze pagina zie je een lijst van alle door de gebruiker toegevoegde deelnemers voor het huidige evenement.
Je ziet van welk evenement je momenteel de deelnemers bekijkt. De deelnemers zijn alfabetisch gesorteerd.
Je ziet per deelnemer de naam en hun aandeel. Zo ook knoppen om deze specifiek te kunnen bewerken of verwijderen.
Er is een toevoegen-knop om een nieuwe deelnemer toe te voegen.
Er is een terug-knop om terug te gaan naar de detail-pagina van het evenement.
Paper Prototype¶
Deelnemers - Bewerken¶
Dit is vrijwel dezelfde pagina als toevoegen. Alle velden zijn van te voren ingevuld met de data die al bekend is.
Je ziet van welk evenement je momenteel een deelnemer gaat bewerken.
Er is een opslaan-knop. Indien er geen gegevens of verkeerde gegevens worden ingevuld, dan toont de pagina een duidelijke foutmelding om de gebruiker hierop te attenderen.
Er is een annuleren-knop om terug te gaan naar het deelnemers overzicht van het huidige evenement.
Paper Prototype¶
Deelnemers - Verwijderen¶
Op deze pagina wordt de gebruiker gevraagd om het verwijderen te bevestigen. In de tekst wordt de naam van de deelnemer genoemd.
Je ziet van welk evenement je momenteel een deelnemer gaat verwijderen.
Er is een verwijderen-knop om het verwijderen te bevestigen.
Er is een annuleren-knop om terug te gaan naar het deelnemers overzicht van het huidige evenement.
Paper Prototype¶
OOP Refactor: Deelnemers¶
Voor deze functionaliteit is het goed om een Participant-model te introduceren met een bijbehorende ParticipantRepository en benodigde functies voor toegang tot de database vanuit de ParticipantController.
De repository maakt gebruik van de HBO-ICT.Cloud API om te koppelen met een database, je zult dus ook een database-tabel moeten maken met de juiste relaties.
Wanneer je deze of een andere repository in de controller wilt gebruikten, moet je deze in de constructor van de controller instantiëren.
Uitgaven - Toevoegen¶
Voor het toevoegen van een uitgave is alleen een naam (string), beschrijving (string) en een bedrag (number) nodig. Hierbij is beschrijving als enige optioneel, bedrag accepteert ook decimalen.
Je ziet aan welk evenement je momenteel een uitgave gaat toevoegen.
Er is een toevoegen-knop. Indien er geen gegevens of verkeerde gegevens worden ingevuld, dan toont de pagina een duidelijke foutmelding om de gebruiker hierop te attenderen.
Er is een annuleren-knop om terug te gaan naar het uitgavenoverzicht van het huidige evenement.
Paper Prototype¶
Uitgaven - Overzicht¶
Op deze pagina zie je een lijst van alle door de gebruiker toegevoegde uitgaven van het huidige evenement.
Je ziet van welk evenement je momenteel de uitgaven bekijkt. De uitgaven zijn alfabetisch gesorteerd.
Je ziet per uitgave naam, bedrag, beschrijving en door wie de uitgave is gedaan. Zo ook knoppen om deze specifiek te kunnen bewerken of verwijderen. Indien er geen beschrijving is ingevuld zie je “Geen beschrijving”.
Er is een toevoegen-knop om een nieuwe uitgave toe te voegen.
Er is een terug-knop om terug te gaan naar de detail-pagina van het evenement.
Paper Prototype¶
Uitgaven - Bewerken¶
Dit is vrijwel dezelfde pagina als toevoegen. Alle velden zijn van te voren ingevuld met de data die al bekend is.
Je ziet van welk evenement je momenteel een uitgave gaat bewerken.
Er is een opslaan-knop. Indien er geen gegevens of verkeerde gegevens worden ingevuld, dan toont de pagina een duidelijke foutmelding om de gebruiker hierop te attenderen.
Er is een annuleren-knop om terug te gaan naar het uitgavenoverzicht van het huidige evenement.
Paper Prototype¶
Uitgaven - Verwijderen¶
Op deze pagina wordt de gebruiker gevraagd om het verwijderen te bevestigen. In de tekst worden de naam, beschrijving, en het bedrag genoemd.
Je ziet van welk evenement je momenteel een uitgave gaat verwijderen.
Er is een verwijderen-knop om het verwijderen te bevestigen.
Er is een annuleren-knop om terug te gaan naar het uitgavenoverzicht van het huidige evenement.
Paper Prototype¶
OOP Refactor: Uitgaven¶
Voor deze functionaliteit is het goed om een Expense-model te introduceren met een bijbehorende ExpenseRepository en benodigde functies voor toegang tot de database vanuit de ExpenseController.
De repository maakt gebruik van de HBO-ICT.Cloud API om te koppelen met een database, je zult dus ook een database-tabel moeten maken met de juiste relaties.
Wanneer je deze of een andere repository in de controller wilt gebruikten, moet je deze in de constructor van de controller instantiëren.
Betalingen - Toevoegen¶
Voor het toevoegen van een betaling is een eerder aangemaakte deelnemer, type betaling (betaald of ontvangen), een eerder aangemaakte uitgave, bedrag (number) en datum (Date) nodig. Hierbij is de uitgave een optioneel veld, het bedrag accepteert ook decimalen.
Je ziet aan welk evenement je momenteel een betaling gaat toevoegen.
De eerder aangemaakte deelnemer kun je middels een combobox kiezen. Voor het type betaling gebruik je twee radiobuttons: Betaald en Ontvangen. De eerder aangemaakte uitgave kun je middels een combobox kiezen. Er is altijd de optie om “Geen” te selecteren. De datum is standaard ingevuld op de datum van vandaag.
Er is een toevoegen-knop. Indien er geen gegevens of verkeerde gegevens worden ingevuld, dan toont de pagina een duidelijke foutmelding om de gebruiker hierop te attenderen.
Er is een annuleren-knop om terug te gaan naar het betalingenoverzicht van het huidige evenement.
Paper Prototype¶
Betalingen - Overzicht¶
Op deze pagina zie je een lijst van alle door de gebruiker toegevoegde betalingen voor het huidige evenement.
Je ziet van welk evenement je momenteel de betalingen bekijkt. De uitgaven zijn oplopend gesorteerd op datum. Indien de datums hetzelfde zijn, wordt de naam van de deelnemer gebruikt.
Je ziet per betaling:
- Het bedrag
- Door welke deelnemer de betaling is gedaan
- Eventueel voor welke uitgave de betaling is gedaan
- Of de gekozen deelnemer en betaler of ontvanger is
- De datum waarop de betaling is gedaan
Er is een toevoegen-knop om een nieuwe betaling toe te voegen.
Er is een terug-knop om terug te gaan naar de detail pagina van het evenement.
Paper Prototype¶
Betalingen - Bewerken¶
Dit is vrijwel dezelfde pagina als toevoegen. Alle velden zijn van te voren ingevuld met de data die al bekend is.
Je ziet van welk evenement je momenteel een betaling gaat bewerken.
Er is een opslaan-knop. Indien er geen gegevens of verkeerde gegevens worden ingevuld, dan toont de pagina een duidelijke foutmelding om de gebruiker hierop te attenderen.
Er is een annuleren-knop om terug te gaan naar het betalingenoverzicht van het huidige evenement.
Paper Prototype¶
Betalingen - Verwijderen¶
Op deze pagina wordt de gebruiker gevraagd om het verwijderen te bevestigen. In de tekst worden het bedrag, de naam van de deelnemer, de naam van de uitgave (indien aanwezig) en datum genoemd.
Je ziet van welk evenement je momenteel een betaling gaat verwijderen.
Indien het type betaling “betaald” is, zie je “Betaald door”, “Betaald voor”, enzovoorts. Indien het type betaling “ontvangen” is, zie je “Ontvangen door”, “Ontvangen voor”, enzovoorts.
Er is een verwijderen-knop om het verwijderen te bevestigen.
Er is een annuleren-knop om terug te gaan naar het betalingenoverzicht van het huidige evenement.
Paper Prototype - Betaler¶
Paper Prototype - Ontvanger¶
OOP Refactor: Betalingen¶
Voor deze functionaliteit is het goed om een Payment-model te introduceren met een bijbehorende PaymentRepository en benodigde functies voor toegang tot de database vanuit de PaymentController.
De repository maakt gebruik van de HBO-ICT.Cloud API om te koppelen met een database, je zult dus ook een database tabel moeten maken met de juiste relaties.
Wanneer je deze of een andere repository in controller wilt gebruikten, moeten je deze in de constructor van de controller instantiëren.
OOP Refactor: Enumeration voor type betaling¶
Voor het type betaling is het mooi om gebruik te maken van een enumeration, zodat je consistent op meerdere plekken in de logica de juiste checks kan uitvoeren.
Evenement - Detail - Balans: Uitgegeven en Aandeel¶
Op de detailpagina van een evenement kun je als gebruiker zien hoeveel er voor dit evenement totaal is uitgegeven en wat het opgetelde aandeel van alle deelnemers bij elkaar is.
Indien deze beide op hetzelfde aantal uitkomen, dan toon je de gebruiker een bericht dat deze waardes in balans zijn, anders toon je een foutmelding dat de waardes niet in balans zijn.
Paper Prototype - Niet in balans¶
Paper Prototype - Wel in balans¶
Evenement - Detail - Balans: Deelnemers¶
Op de detailpagina van een evenement kun je als gebruiker zien wat de balans van alle betalingen is ten aanzien van het aandeel van elke deelnemer.
Je toont per deelnemer de volgende gegevens:
- Naam
- Aandeel
- Totaal betaald
- Totaal ontvangen
Bereken per deelnemer met de drie waardes een balans:
- Is deze waarde 0, dan is de deelnemer in balans.
- Is deze waarde hoger dan 0, dan moet de deelnemer nog geld betalen.
- Is deze waarde lager dan 0, dan moet de deelnemer nog geld ontvangen.
Indien deze beide op hetzelfde aantal uitkomen, dan toon je de gebruiker een bericht dat de waardes in balans zijn, anders toon je een foutmelding dat de waardes niet in balans zijn.
Paper Prototype - Niet in balans #1¶
Paper Prototype - Niet in balans #2¶
Paper Prototype - Wel in balans¶
Refactor: Automatisch voorstel voor aandeel¶
Momenteel moet je handmatig een aandeel voor een deelnemer invullen, dit verandert niet. Het is echter wel handig een mogelijkheid te hebben om op basis van het totaal uitgegeven bedrag het eerlijk verdeelde aandeel voor alle gebruikers in één keer in te stellen.
Voeg op het deelnemersoverzicht de mogelijkheid toe om een bedrag (number) in te vullen. De standaardwaarde van dit bedrag is het totaal uitgegeven bedrag.
Na het indrukken van een “Bedrag verdelen”-knop wordt dit bedrag eerlijk verdeeld over alle aangemaakte deelnemers binnen het huidige evenement.
Paper Prototype¶
Evenement - Archiveren¶
Als alle betalingen voor een evenement zijn voldaan, dan kan het evenement afgesloten worden door deze te archiveren.
Wanneer een evenement gearchiveerd is, kunnen de deelnemers de uitgaves en betalingen niet meer aanpassen. Ook de velden van het evenement zelf kunnen niet meer bewerkt worden. Je kunt het evenement wel weer uit het archief halen of verwijderen.
Vervolgens toon je in het evenementenoverzicht de gearchiveerde evenementen altijd onder de actieve evenementen en maak je dit ook visueel duidelijk aan de gebruiker.
Paper Prototype¶
Refactor: Beveiliging van pagina’s¶
Met uitzondering van de Homepagina, Inloggen en Registreren, kun je alle andere pagina’s alleen benaderen als je bent ingelogd.
Indien een gebruiker iets probeert te bekijken of bewerken wat niet bij de gebruiker hoort, dan moet dit geweigerd worden.
Refactor: Verkeerde toegang tot pagina’s¶
Vrijwel alle pagina’s maken gebruik van queryString argumenten om te bepalen wat ze moeten doen, bijvoorbeeld participant met ID 1 bewerken.
Indien een gebruiker met de URL gaat rommelen, wil je een foutmelding tonen en deze persoon ergens anders heen sturen, bijvoorbeeld het evenementenoverzicht. Doe daarom altijd een userId-check op id’s die uit de queryString komen!
OOP Refactor: Beveiliging van pagina’s¶
De beste plek hiervoor is om de Controller-class van een checkLoggedIn-functie te voorzien en deze in elke render-functie aan te roepen.
Refactor: Verder gaan na inloggen of registreren¶
Het is handig om een returnTo attribuut in de queryString mee te geven (met encodeURIComponent) aan de inloggen of registreren pagina, zodat de gebruiker na het inloggen/registreren weer teruggestuurd kan worden naar waar deze vandaan kwam.
Refactor: Beveiling van wachtwoorden¶
Het is gebruikelijk om wachtwoorden niet leesbaar (plain text) in een database te zetten, maar gehashed. Zorg ervoor, met gebruik van enkel SQL queries, dat wachtwoorden op deze manier worden opgeslagen.
Refactor: Voorkomen van dubbele code bij Add/Edit functionaliteit¶
Op de meeste pagina’s lijken toevoegen en bewerken qua code heel veel op elkaar. Pas de individuele controller zo aan dat er zo min mogelijk dubbele code is.
Extra: Aanpassen van gebruikersaccount¶
Voeg de mogelijkheid toe voor een ingelogde gebruiker om zijn naam, e-mailadres en wachtwoord aan te passen.
Extra: Wachtwoord vergeten¶
Het komt voor dat gebruikers hun wachtwoord vergeten, voeg daarom een wachtwoord-vergeten functionaliteit aan het inlogscherm toe.
Op een apart scherm kan de gebruiker zijn e-mailadres invoeren. Indien het e-mailadres bestaat zal de gebruiker een e-mail met een reset-link ontvangen. Na het aanklikken van deze link, kan de gebruiker een nieuw wachtwoord instellen.
Zorg ervoor dat de link maar één keer bruikbaar is en na 10 minuten verloopt.
Extra: Datum van betaling niet in de toekomst¶
Voeg een controle toe zodat het aanmaken van betalingen niet in de toekomst kan.
HIC API Refactor: Localization¶
De HBO-ICT.Cloud API ondersteunt meertaligheid. Het is voor de gebruikers fijn om de website in zowel het Engels, Nederlands en mogelijk andere talen te kunnen gebruiken.
HIC API Refactor: Session¶
De HBO-ICT.Cloud API ondersteunt sessiebeheer. Dit is een mooi alternatief voor het gebruik van localStorage.
HIC API Refactor: URLs¶
De HBO-ICT.Cloud API ondersteunt URL manipulatie. Dit is een mooi alternatief voor het gebruik van window.location.href en het doorgeven van argumenten via de queryString.
HIC API Refactor: E-mails versturen¶
De HBO-ICT.Cloud API ondersteunt het versturen van e-mails. Je kunt ervoor kiezen deelnemers uit te breiden met een e-mailadres, zodat je ze op de hoogte kan stellen van veranderingen binnen een evenement qua betalingen.
HIC API Refactor: CI/CD¶
Het startproject heeft ondersteuning voor het automatisch builden en releasen van je website naar de HBO-ICT.Cloud, het is goed om dit zo snel mogelijk in te richten zodat je ten alle tijden een omgeving hebt buiten je eigen computer om de website te testen.
Testing¶
Het startproject heeft ondersteuning voor het schrijven van tests. Het is een leuke uitdaging om een paar van je pagina’s, controllers en repositories automatisch te testen.
Styling¶
De focus van deze opdracht ligt niet op het design, maar op het functionele. Toch wil het oog ook wat. Besteed als de website redelijk werkt wat tijd en energie in het opfrissen van het design met gebruik van CSS.