Productpagina maken en designen

Nu je weet hoe je jouw content dynamisch maakt, gaan we nu een productpagina maken!

Hoe maken we een productpagina?

Eerst maken we een duidelijk overzicht in stappen hoe je een productpagina maakt.

1. Maak een view aan
2. Maak een controller aan
3. Link de controller aan de routes 

Opdracht: maak jouw productpagina

1. Maak eerst een view aan. Zorg ervoor dat je @extends('reusefile') en @section('content') toevoegt!
2. Als de view aangemaakt is, maak je een controller aan voor de productpagina. Ik zou het zelf ProductController noemen. Vergeet niet om hiervoor de terminal te gebruiken om een controller te maken!
   1. Zorg ervoor dat je in jouw controller een function maakt. Daarin return je jouw view
3. Ga daarna naar de routes. Maak een nieuwe route aan en zorg ervoor dat /products naar de ProductController gaat.
   

Nu jouw productpagina gelinkt is aan /products, gaan we nu designen in Bootstrap!

Bootstrap Cards

Een productpagina worden vaak gemaakt in productkaarten. En nu vraag je je af: moet ik nu hele productkaart maken zoals dit?!

Antwoord: nee! Gelukkig heb je hier Bootstrap voor! Het plaatje hierboven is dus gemaakt in Bootstrap. Zie de documentatie: Cards · Bootstrap v5.2 (getbootstrap.com)

Opdracht: maak een productkaart

Probeer nu een productkaart te maken met Bootstrap:

1. Maak gebruik van het Bootstrap gridsysteem en maak een container, row en een col-3.
2. Voeg een card-body toe
3. Voeg in de card-body een card-title toe en bedenk een titel
4. Voeg in de card-body een card-subtitle toe en bedenk een prijs
5. Voeg in de card-body een card-text toe en bedenk een beschrijving voor jouw product
6. Maak een knopje met de tekst 'Koop' in een blauwe Bootstrap kleur
7. Kopiëer de kolom met de card en paste een paar keer naast elkaar.
8. Verander de teksten van de andere productkaarten

Design nog in jouw eigen smaak!

Wat lever je in?

• Een screenshot van jouw browser met jouw producten
• Screenshots van jouw code waarvan
  
  • Jouw ProductController.php file
  • Jouw productpagina view
  • Jouw routes.php