Programmeren 3

Fric-frac realisatie: Model, View, Controller

Doelstelling

1. Model
   Zoals de MVC benaming aangeeft beginnen met het model. We baseren ons op Fric-frac Analyse om het model van de Fric-frac app te maken. Het model bestaat uit C# klassen die een OO voorstelling zijn van de tabellen en de kolommen uit de Fric-frac database.
   1. Het Entity Framework is een Object-Relational mapping-technologie (ORM), waarmee gegevens uit een relationele database kunnen worden omgezet in objecten met gegevens die door objectgeörienteerde programmeertalen gebruikt kunnen worden.
      Een belangrijke functie binnen het framework is het automatiseren van taken. Ontwikkelaars moeten niet meer zelf in hun code de conversieslag tussen database en applicatie maken. Het Entity Framework zorgt ervoor dat data op een eenduidige wijze aan de ontwikkelaar ter beschikking wordt gesteld zodat er op een abstractere manier mee gewerkt kan worden. In deze les:
      1. installeren we het Entity Framework
      2. en leren we er mee werken.
   2. We leren hoe je een model maakt vertrekkend van de Fric-frac database.
   3. We leren hoe je het gegenereerde model aanpast om validatie-regels toe te voegen.
   4. Tenslotte leer je wat migratie in EF Core is.
2. View
   Nu het model gemaakt is maken we de views, wat overeenkomt met de tweede letter in het acronym MVC. De HTML en CSS die we gaan maken is gebaseerd op Fric-frac Wireframes. De views bestaan uit HTML, CSS en C# en worden opgeslagen in de map Views en hebben een cshtml extensie waarmee wordt aangegeven dat die bestanden zowel HTML, CSS als C# code kunnen bevatten.
   1. We leren het concept Masterpage in ASP.NET MVC.
   2. We leren hoe je manueel views maakt in ASP.NET MVC vertrekkend van een wireframe.
   3. We leren werken met Flexbox om op die manier een responsieve view te maken.
3. Controller
   Tenslotte maken we kennis met de derde letter in het acronym MVC en leren we werken met controllers.

Leerpad

1. Fric-frac webapp project opstarten in Visual Studio. De leerstof is gemaakt in .DOT Core 2.2. Als je 3.0 gebruikt kan het zijn dat je bepaalde zaken moet aanpassen. Het zou goed zijn deze aanpassingen te delen op het forum.
   1. Stappenplan De Fric-frac MVC web app aanmaken
   2. Filmpje: Fric-frac MVC web app maken in Visual Studio
   3. Filmpje: Fric-frac MVC web app uitproberen in Visual Studio
   4. Stappenplan: Een About Me pagina toevoegen
   5. Filmpje: Een About Me pagina toevoegen aan Fric-frac
2. Model maken
   1. Filmpje: EF Core - Fric-frac model op basis van bestaande database
   2. Tekst en uitleg: Fric-frac model op basis van bestaande database
   3. Ik ga ervan uit dat je het volgende reeds hebt uitgevoerd:
      1. de DDL voor Fric-frac (Fric-frac MySQL Data Definition Language).
      2. de DML voor Fric-frac (voor een voorbeeld voor één tabel zie: Fric-frac MySQL DML EventCategory).
   4. In het voorbeeld wordt er gevraagd het EF te installeren in een console project met de naam LerenWerkenMetEF. Dat hoef je niet te doen. Je installeert EF hier in het Fric-Frac project dat je reeds in een vorige les hebt gemaakt. Zorg ervoor dat je de laatste versie installeert. Dit is op heden v6.10.5. EF Core - installeren
   5. Waarom heet dit framework Entity Framework? Om daarop te kunnen antwoorden moet je het verband tussen tussen een entiteit - een begrip uit ERD - en model - een begrip uit MVC: EF Core - entiteit en model.
   6. Hoe je het model voor de Fric-Frac app maakt en dan wijzigt leer je in Fric-frac model op basis van bestaande database.
3. Filmpje: Fric-frac Views en Controllers toevoegen
4. De views maken we volgens het design uitgetekend in de Fric-frac Wireframes:
   1. Fric-frac master page
   2. Fric-frac Website Index wireframe naar HTML
   3. Fric-frac Admin Index wireframe naar HTML
   4. Fric-frac Person Index wireframe omzetten naar HTML
   5. Fric-frac Person InsertingOne wireframe omzetten naar HTML
   6. Fric-frac Person ReadingOne wireframe omzetten naar HTML
   7. Fric-frac Person UpdatingOne wireframe omzetten naar HTML
5. We hebben nu de views gemaakt maar kunnen ze niet uitproberen. Daarvoor moeten we de Controllers toevoegen:
   1. Fric-frac HomeController
   2. Fric-frac AdminController
   3. Fric-frac PersonController
6. Opmaak
   1. Leerpad voor Flexbox.
   2. Ik ga ervan uit dat je de views voor de Fric-Frac app reeds gemaakt hebt. Uitleg hierover vind je op Programmeren 3 Les 20 Fric-frac realisatie Views en Controllers maken.
   3. Filmpje: Fric-frac realisatie CSS
   4. Om de CSS te maken volgen we het tower pattern.
   5. De CSS maken we in stappen:
      1. tower-pattern tower
      2. tower-pattern floor
      3. tower-pattern control-panel
      4. Icon font knoppen
      5. tower-pattern control-panel responsieve icoon-tegel
      6. tower-pattern show-room responsieve teksttegel liggend
      7. tower-pattern show-room responsieve teksttegel staand
      8. tower-pattern responsieve show-room voor entiteit liggend

Opdracht

1. Maak een project met de naam Fric-frac
2. Maak een About Me pagina waarin je jezelf kort voorstelt. Op de pagina staat je naam en minstens drie paragrafen tekst en drie foto's zoals in het lesvoorbeeld. Wil je niets over jezelf zeggen, maak dan een korte biografie over een bekend figuur:
   1. AboutMe.cshtml
   2. HomeController.cs aanpassen
   3. _Layout.cshtml aanpassen
   4. minimale css toevoegen in een bestand met de naam app.css
3. Maak het model voor de Fric-frac applicatie en voeg de kolom Desc toe aan de Country tabel.
   1. De tabellen maak je aan op de remote database.
4. Maak de views voor de volgende entiteiten:
   1. Role
   2. EventCategory
   3. EventTopic
5. Maak de Controller klasse voor:
   1. Role
   2. EventCategory
   3. EventTopic
6. Maak in de Controller klasse de volgende methoden:
   1. Index
   2. InsertingOne
   3. ReadingOne
   4. UpdatingOne
7. Maak de CSS voor de views van de volgende entiteiten:
   1. Role
   2. EventCategory
   3. EventTopic
8. Deze opdracht is het tweede deel van het examen. Deadline 20 december 2019.
9. Stuur een zip bestand (naam: Fric-frac-opdracht2.zip) door met alleen *.cs, *.cshtml, *.css bestanden in de respectivelijke mappen van het Fric-frac project via onderstaande link op Digitap.
10. Synchroniseer je lokale map met Bitbucket. In de commit commentaar plaats je "Les Fric-frac realisatie: model, views en controllers maken".