Mikmak UnitBase CRUD use cases implementeren

Het is m.i. belangrijk de code te ontwikkelen op basis van de gemaakte use cases. Dit

bevordert de communicatie tussen de klant, de analist en de programmeur;
zorgt ervoor dat iedere betokken partij het overzicht behoudt;
geeft een betere garantie dat de code volledig is en geen stukken vergeten worden te implementeren;

Editing

Op basis van de wireframes, die we reeds gemaakt hebben, maken we de views. We beginnen met Mikmak UnitBase Editing wireframe omzetten naar HTML.
Om de UnitBase Editing view te kunnen navigeren maken we vervolgens de controller. Alle interactie met de gebruiker i.v.m. de UnitBase entiteit vangen we op in een UnitBaseController. We maken daarom een klassenbestand voor de UnitBase Controller met daarin een actie-methode om de Editing pagina te tonen.
De Editing actie-methode in de controllerklasse heeft het model en stuurt het naar de view, In Mikmak View UnitBase Editing pagina leer je
1. welke code je moet toevoegen om de data in het model aan de gebruiker te tonen en
2. hoe je de use cases, die de gebruiker in deze view verder kan uitvoeren, implementeert.

Inserting

Op basis van de wireframes, die we reeds gemaakt hebben, maken we de views. We gaan verder met Mikmak UnitBase Inserting wireframe omzetten naar HTML.
Om naar de UnitBase Inserting view te kunnen navigeren maken we vervolgens de controller. Alle interactie met de gebruiker i.v.m. de UnitBase entiteit vangen we op in een UnitBaseController. We voegen daarom in het klassenbestand voor de UnitBase Controller een actie-methode om de Inserting pagina te tonen toe.
De Inserting actie-methode in de controllerklasse heeft het model 'gevuld' en stuurt het naar de view, In Mikmak View UnitBase Inserting pagina leer je
1. welke code je moet toevoegen om de data in het model aan de gebruiker te tonen en
2. hoe je de use cases, die de gebruiker in deze view verder kan uitvoeren, implementeert.

Insert

De UnitBase Insert methode bezigt dezelfde view als de UnitBase Inserting use case. We moeten wel nog het een en ander aanpassen.

Nu is de Insert knop een link. Maar zoals je weet activeert een link de form niet. Die stuurt gewoon een GET request. We moeten die link wijzigen in een HTML submit knop:

<div id="command-panel" class="command-panel">
    <button type="submit" name="action" id="Insert" value="Insert" class="tile">
        <span class="icon-disk"></span>
        <span class="screen-reader-text">Insert</span>
    </button>
    <a href="/UnitBase/Cancel" class="tile">
        <span class="icon-close"></span>
        <span class="screen-reader-text">Annuleren</span>
    </a>
</div>

We wijzigen de waarden van het name attribuut van de input velden en van het for attribuut van de labels. De afspraak is dat de schrijfwijze moet overeenkomen met de properties van een model klasse, dus pascalnotatie. Daarnaast prefixen we de eigenschapsnamen met de naam van de entiteit.

<div class="detail">
    <fieldset>
        <div>
            <label for="UnitBaseCode">Code</label>
            <input id="UnitBaseCode" name="UnitBaseCode" class="text"
                    style="width: 22.5%;" type="text" value="" required />
        </div>
        <div>
            <label for="UnitBaseName">Nom</label>
            <input id="UnitBaseName" name="UnitBaseName" class="text"
                    style="width: 32.5%;" type="text" value="" required />
        </div>
    </fieldset>
    <div class="feedback">
    </div>
</div>

We voegen nog een html textarea veld toe voor het intypen van de beschrijving van de basiseenheid in de form:

<div>
    <label for="UnitBaseDescription">Nom</label>
    <textarea id="UnitBaseDescription" name="UnitBaseDescription" class="text"
                style="width: 32.5%;" type="text" value=""></textarea>
</div>

Als de gebruiker op de Insert submit knop klikt, die op de Inserting View pagina staat, moeten de nieuw ingetypte gegevens van de basiseenheid in de UnitBase tabel worden opgeslagen. Daarvoor:
1. maken we een methode met de naam Insert in de UnitBaseController klasse;
2. en keren we naar Inserting View pagina terug omdat in de use case staat dat we na het inserten moeten terugkeren naar Inserting View Pagina; deze vernieuwt de lijst met basiseenheden en de nieuw toegevoegde eenheid verschijnt in de lijst;
3. meer hierover in Mikmak EF UnitBase Controller;

De annuleren knop moet geen gegevens van uit de form naar de server sturen. Een GET request volstaat hiervoor. We kunnen dus een link html element gebruiken met als url /UnitBase/InsertingCancel. We passen de html van de Inserting View page aan:

<div id="command-panel" class="command-panel">
    <button type="submit" name="action" id="Insert" value="Insert" class="tile">
        <span class="icon-disk"></span>
        <span class="screen-reader-text">Insert</span>
    </button>
    <a href="/UnitBase/InsertingCancel" class="tile">
        <span class="icon-close"></span>
        <span class="screen-reader-text">Annuleren</span>
    </a>
</div>

Hoe je een InsertingCancel actiemethode aan de UnitBaseController klasse toevoegt, lees je in Mikmak EF UnitBase Controller.
We passen de Insert actiemethode van UnitBaseController klasse en de Inserting View pagina aan om de feedback te kunnen tonen. Dat lees je in Mikmak validatie implementeren.

Refactoren met Partial Views

In de Editing en Inserting view is de html en Razor code om de rijen uit de UnitBase tabel te presenteren als een html table precies dezelfde. Straks maken we de Updating en ReadingOne view en mogen we die code nog eens overtypen. Ten eerste vind ik het vervelend nog eens dezelfde code te typen of te kopiëren en ten tweede is het lastig om nog iets in die code te wijzigen. Want dan moet je de wijzigingen op vier plaatsen gaan aanbrengen. Dat kan niet de bedoeling zijn. Er bestaat hiervoor zelfs een acroniem DRY dat staat voor don't repeat yourself.
We hebben al geleerd hoe je html en Razor code, die op alle pagina's staat, beter in een lay-out pagina steekt. Maar de lijst met UnitBase rijen moet niet op alle pagina's getoond worden, enkel op de CRUD pagina's voor de UnitBase entiteit.
Het MVC framework heeft hiervoor een elegante oplossing, namelijk partial views. En hoe je dat gebruikt, leren we in deze les.
Om het DRY principe toe te passen is het nodig de code te refactoren. In deze les leer je aan de hand van een praktisch voorbeeld wat refactoring is.
We leren eerst hoe je partial views gebruikt in ASP.NET MVC:
1. ASP.NET MVC Partial Views
2. ASP.NET MVC Partial View via Controller
Hoe je deze kennis toepast op de webwinkel lees je in Mikmak validatie implementeren. Hoe ik heb dat heb aangepakt kan je zien in het filmpje Mikmak Webwinkel Refactoring met Partial View. Je leest wel beter eerst het lesmateriaal van hierboven vooraleer het filmpje te bekijken.
Maak de voorbeeldoefeningen zelf.
Wat moet je tot nu toe al hebben:
1. je Webwinkel project implementeert reeds de volgende use cases :
  1. Editing
  2. Inserting
  3. Insert
2. je hebt refactoring gebruikt en zo de lijst met Basiseenheden als een afzonderlijke deelview geïmplementeerd.

ReadingOne

We herhalen steeds dezelfde procedure, te beginnen met de View, de Controller, de View, CSS
We zetten de wireframe om naar html in Mikmak UnitBase ReadingOne wireframe omzetten naar HTML.
Om naar de UnitBase ReadingOne view te kunnen navigeren maken we vervolgens de controller. Alle interactie met de gebruiker i.v.m. de UnitBase entiteit vangen we op in een UnitBaseController. We voegen daarom in het klassenbestand voor de UnitBase Controller een actie-methode om de ReadingOne pagina te tonen toe.
De ReadingOne actie-methode in de controllerklasse heeft het model 'gevuld' met de gegevens van de gekozen rij en stuurt het naar de view, In Mikmak View UnitBase ReadingOne View leer je
1. welke code je moet toevoegen om de data in het model aan de gebruiker te tonen en
2. hoe je de use cases, die de gebruiker in deze view verder kan uitvoeren, implementeert.
De CSS is al gemaakt. Dat deden voor de Inserting view.

Updating

We herhalen steeds dezelfde procedure, te beginnen met de View, de Controller, de View, CSS
We zetten de wireframe om naar html. Dat is net dezelfde html als voor Inserting pagina. Alleen de Razor code en html attributen worden lichtes gewijzigd. Maar dat zien we seffens.
Om naar de UnitBase Updating view te kunnen navigeren maken we vervolgens de actiemethode Updating in de UnitBaseCotroller klasse.We voegen daarom in het klassenbestand voor de UnitBase Controller een actie-methode om de Updating pagina te tonen toe.
De Updating actie-methode in de controllerklasse heeft het model 'gevuld' met de gegevens van de gekozen rij en stuurt het naar de view, In Mikmak View UnitBase Updating View leer je
1. welke code je moet toevoegen om de data in het model aan de gebruiker te tonen en
2. hoe je de use cases, die de gebruiker in deze view verder kan uitvoeren, implementeert.
De CSS is al gemaakt. Dat deden voor de Inserting view.

Update

We maken een actiemethode in de UnitBaseController klasse die als de gebruiker op de Update knop klikt de gegevens in de tabel updatet. Deze update knop moet een html buttton zijn omdat we gegevens naar de server moeten sturen. Dat doen we beter met een post en niet met een get om niet alle gegevens in de url zichtbaar te maken.
De code voor Update knop op de Updating pagina vind je in Mikmak View UnitBase Updating View.
De actiemethode in de controller vind je in Mikmak EF actiemethode Update in UnitBase Controller.

Delete

We kijken nog eens naar de link waarmee we een rij kunnen deleten. Die vind je op Mikmak View UnitBase ReadingOne View.
Hoe je Delete actiemethode in de UnitBaseController klasse schrijft, lees je in Mikmak EF UnitBase Controller.

2016-12-10 14:09:19