Opleiding | Project - Javascript MVC

Opleiding | Javascript | project - MVC
Gepost op
vrijdag 27 april 2018 om 09:29
Gepost door
admin@nimor

Dit was het eindproject voor de module Javascript (Object Orientated Programming).

De opdracht was volgende:

Bestudeer de startcode en zorg dat je deze begrijpt vooraleer je begint om te zetten naar MVC (Model, View, Controller).

De opdracht bestaat uit 2 delen. Maak best eerst het eerste deel voordat je begint aan het tweede.

Meer info

Deel 1 (60%)

 

De omzetting:

Voorzie een IIFE voor al de code.

Voorzie een var voor zowel de model, de view als de controller.

 

Het model bevat volgende properties:

  • init: deze controleert of de localstorage al bestaat en indien niet maakt de method de localstorage "formulier" aan als een object: JSON.stringify({})
  • constructor method PersoonGegevens
  • save: method die een object instantie aankrijgt en dit bewaard in localstorage met naam "formulier".

 

De view bevat volgende properties:

  • setError method
  • showOkMessage method: dit is een nieuwe method die opgeroepen moet worden nadat de gegevens gesaved en verstuurd zijn. Hierin wordt een nieuwe paragraaf tag aangemaakt, met de tekst "Inschrijving is ok, dank u!". Deze paragraaf wordt onder de knop getoond.
  • clearInputs: method die de inputs terug leeg maakt

 

De controller bevat volgende properties:

  • data object dat allesCorrectIngevuld propertie bevat, standaard waarde is true
  • init method: eventListener toevoegen aan de knop en al de txt properties invullen via de getValue()
  • method leegVeldControle
  • method getValue
  • method checkEmail
  • method controleWw
  • method verstuur: deze bevat ook het saven van de localstorage, clearen van de inputs en de ok boodschap tonen
  • method mail die een object instantie aankrijgt. Let op: de mail method is dus geen method meer van de constructor method.

 

Autofill formulier:

Om het uittesten gemakkelijker en sneller te maken kan je gebruik maken van een autofill plugin in chrome. Deze zal automatisch het formulier invullen.

Werk in de localhost hiervoor.

registratieformulier

 

Deel 2 (40%)

Je gaat in dit deel het automatisch invullen m.b.v. de extensie zelf programmeren. Je kan dus niet meer werken met de extensie, schakel deze uit.

 

Volgens acties moeten toegevoegd worden in het formulier:

html buttons

Laad dummy gegevens: hiervoor maak je een leeg dummyData object aan. De gegevens hiervoor zitten in dummyData.json. Indien het inlezen lukt kan er dus via deze knop de dummy data automatisch ingevuld worden in de inputs. Maak deze eerst zodat je altijd automatisch gegevens kan laten invullen. Ga daarna verder met de punten hieronder.

  • Laad gegevens: als er gegevens bewaard zijn in de localstorage moeten deze getoond worden in de inputs.
  • Wis gegevens: Verwijder de gegevens uit de localstorage
  • Bij het versturen moet ook de localstorage geschreven worden

 

Voeg volgende knoppen toe:

  • <input type="button" value="Laad dummy gegevens" id="knop_laad_dummy" >
  • <input type="button" value="Laad gegevens" id="knop_laad" >
  • <input type="button" value="Wis gegevens" id="knop_wis" >

 

De inhoud van dummyData.json:

{

"voornaam" : "Java",

"achternaam" : "script",

"straat" : "scriptlaan",

"straatnummer" : "01",

"postcode" : "1010",

"gemeente" : "Brussel",

"email" : "javascript@mail.com",

"wachtwoord" : "mvcrocks1",

"wachtwoordBevestiging" : "mvcrocks1"

}

 

Model

Voeg een leeg dummyData object toe.

Breidt de init() method uit met het inlezen van de dummyData.json en dit dan invullen in het  dummyData object. Bouw ook een errormelding in indien de json niet gevonden wordt. Het model mag echter niet rechtstreeks met de view communiceren. Dus hiervoor wordt dus een method uit de controller opgeroepen: controller.errorLoadJson(); die vervolgens de view method showErrorLoadDummy oproept. Test uit met een foutieve json naam, bv. “geenData.json”

Voeg een load method toe om de gegevens uit de localstorage in te lezen. Start met gewoon de gegevens te returnen.

Als je hele script werkt kan je hier een controle bij invoegen. Hierbij controleer je of de localstorage wel echt iets bevat. Indien er een leeg object in staat return je false, indien er echt gegevens in staan return je die gegevens. Om te controleren of een object leeg is kan je de info op deze pagina gebruiken: https://coderwall.com/p/_g3x9q/how-to-check-if-javascript-object-is-empty

 

View

Voeg een setInputs method toe die een object aankrijgt en daarmee de inputs invult.

Voeg een showErrorLoadData method toe die onder de knoppen een foutmelding toont indien de gebruiker op de “Laad gegevens” knop klikt, maar er geen gegevens gevonden worden. De foutmelding wordt toegevoegd via javascript: een paragraaf onderaan. Deze foutmelding moet na 1s automatisch terug verdwijnen. Zorg ook dat indien de gebruiker snel en herhaaldelijk op de knop klikt er toch maar 1 foutmelding zal staan.

geen data

showErrorLoadDummy method: errormelding tonen en knop deactiveren.  De foutmelding wordt toegevoegd via javascript: een paragraaf onderaan met de melding “Geen dummy data gevonden!”. Deze melding moet blijven staan. Ook wordt de knop zelf gedeactiveerd.

geen data html buttons

 

Controller

  • Voeg een laadDummyGegevens method toe.
  • Voeg een laadGegevens method toe. Enkel als er echte gegevens zijn in de localstorage, mogen die getoond worden.
  • Voeg een wisGegevens method toe. Zorg dat ook de localstorage gewist wordt.
  • Voeg een errorLoadJson method toe, deze roept view.showErrorLoadDummy() op.
evaluatieresultaat voor javascript OOP - MVC

Geslaagd met 100% van het eindtotaal