OOP, relaties en MVC

• UML
• MBO
• Studiejaar 2

OOP, relaties & MVC

Wat kun je ermee?

Lesdoelen

• Aan het einde van de les kan jij relaties uitleggen tussen de verschillende klassen in een klassendiagram.
• Aan het einde van de les kan jij uitleggen wat een design pattern is.
• Aan het einde van de les pas jij een design pattern toe in een programma.

Refresher slide

Klassen gemaakt

Sub-klassen gemaakt

Overgeërfd

Beschrijf wat de 3 onderdelen zijn in dit plaatje

Maak en class genaamd Car.
Maak 2 sub-classes.
Zorg dat de sub-classes overerven en trek pijltjes.
Alle classes moeten attributes en methods hebben.

Teken een UML diagram.

Probleem

We hebben het volgende probleem. Er zijn twee sub-classes gemaakt hiervoor. Stel dat deze twee sub-classes 'cabrio' en 'SUV' zijn.

Cabrio

SUV

Probleem

Hoe moeten wij programmaturisch dit instantiëren?

Hoe kunnen wij de computer laten bepalen of hij:

const auto = new Suv();

of

const auto = new Cabrio();

Design pattern

Wat is een design pattern?

Factory design pattern

Voorbeelden van design patterns:

Laat het programma kiezen welk object het aanmaakt (Factory pattern).

www.dofactory.com

Link naar een website over de factory pattern.

Factory design pattern

Probeer toe te passen wat jij in de website hiervoor hebt gezien in het voorbeeld van de auto's.

Maak een screenshot van je code en plak hier jouw factory design pattern oplossing.

Wie weet nog meer design patterns te noemen?

MVC design pattern

MVC design pattern

Het voorgaande plaatje hebben wij nu bestudeerd.

Bekijk de volgende vragen.

alexatnet.com

Er moet informatie opgehaald worden uit de database. Welk gedeelte van MVC is daar verantwoordelijk voor?

1. Controller
2. Model
3. View
4. Database

Welk onderdeel stuurt de andere twee aan?

1. Controller
2. Model
3. View
4. Geen, alle drie zijn gelijk

Welk onderdeel heeft sterkte relatie met de HTML code?

1. Controller
2. Model
3. View
4. Geen, alle drie zijn gelijk

5 minuten pauze

• Je kan even naar het toilet
• Je mag even je telefoon checken
• Je mag even de bijpraten
• Je mag ook iets lekkers halen voor de docent(e) 🥤

MVC oefenen

Pak je auto voorbeeld erbij.

Pak je auto voorbeeld

Er moet een website gemaakt worden met enkel twee knoppen.

1 knop genaamd 'cabrio' laat een plaatje van een cabrio zien.

1 knop genaamd 'SUV' laat een plaatje van een SUV zien.

1 tekst veld met een knop ernaast waarmee je een nieuwe snelheid kan toevoegen voor de cabrio of SUV.

Er moet een kleine DB gemaakt worden met 1 tabel. Daarin moet de maximum snelheid, het gewicht en de kleur van de auto in staan. 

Foutje

Als je nu op de knop Cabrio drukt dan moet je een Miyata zien met een hard top.

De andere knoppen moeten weg.

Pas dit aan.

Opnieuw foutje

Zet alles terug naar de eerste opdracht.

Wat valt je op aan deze fouten?

1. Het kost veel tijd om het ad-hoc te veranderen
2. Je kan makkelijk fouten maken
3. Het is niet modulair op deze manier
4. Waarom helpt MVC mij niet 😭

Waarom gebruiken wij MVC?

Lesdoelen

1. Aan het einde van de les kan jij relaties uitleggen tussen de verschillende klassen in een klassendiagram.
2. Aan het einde van de les kan jij uitleggen wat een design pattern is.
3. Aan het einde van de les pas jij een design pattern toe in een programma.

Wie vond deze les moeilijk te volgen of snel gaan?

Ik heb de les goed kunnen volgen

Het ging nog net. Ik moet het laten bezinken.

Het ging te snel/moeilijk.