Programmeren 3

Fric-frac realisatie: views, css en controllers maken

Doelstelling

1. In een vorige les hebben we het model gemaakt nu 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.
2. We leren het concept Masterpage in ASP.NET MVC.
3. We leren hoe je manueel views maakt in ASP.NET MVC vertrekkend van een wireframe.
4. We leren werken met Flexbox om op die manier een responsieve view te maken.
5. Tenslotte maken we kennis met de derde letter in het acronym MVC en leren we werken met controllers.

Leerpad

1. Ik ga ervan uit dat je het model voor de Fric-Frac app reeds gemaakt hebt. Uitleg hierover vind je op EF Core - Fric-frac model op basis van bestaande database.
2. Filmpje: Fric-frac Views en Controllers toevoegen
3. 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
4. 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
5. 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 de views voor de volgende entiteiten:
   1. Role
   2. EventCategory
   3. EventTopic
2. Maak de Controller klasse voor:
   1. Role
   2. EventCategory
   3. EventTopic
3. Maak in de Controller klasse de volgende methoden:
   1. Index
   2. InsertingOne
   3. ReadingOne
   4. UpdatingOne
4. Maak de CSS voor de views van de volgende entiteiten:
   1. Role
   2. EventCategory
   3. EventTopic
5. Deze opdracht maakt deel uit van het eindexamen. Deadline dag van het examen.
6. Synchroniseer je lokale map met Bitbucket. In de commit commentaar plaats je "Les Fric-frac realisatie: views, css en controllers maken".