De homepage van de webshop met overzicht van producten dynamisch maken.

Voor deze opdracht heb je een aantal dingen nodig (zie weekopdracht 0 );

1. Je werk van de vorige module: Module 3.1 Webshop Front-end Statisch
2. Je github classroom repository voor deze hele module:

<aside> 💡

https://classroom.github.com/a/Yf5spGHV

</aside>

Eisen

• Gebruik includes voor stukken code die vaker gebruikt worden:
  • Zorg er voor dat je de bovenkant van je HTML-code in een bestand met de naam header.php zet.
  • Zorg er voor dat je de onderkant van je HTML-code in een bestand met de naam footer.php zet.
  • Zorg er voor dat je de sidebar van je HTML-code in een bestand met de naam sidebar.php zet.
  • include deze bestanden in de pagina’s van de webshop.

<aside> 👉

zie Challenge 1 voor uitleg over includes

</aside>

• Gebruik arrays en foreach-loops voor de producten:
  • Maak een product-array van al je producten en zet deze in een file met de naam products.php.
  • Koppel deze file met je product-overzicht pagina (index.php).
  • Loop over de producten in de product-array met een foreach en zorg ervoor dat alle gegevens van de producten in beeld komen (merk, prijs, categorie, enz)

<aside> 💡

zie Challenge 2 voor uitleg over het gebruik van arrays

</aside>

• Breng de foto’s per product in beeld

  Dit kan op verschillende manieren:

  • typ de namen van de foto’s per product in je eigen product-array.
  • of gebruik de PHP-functie readdir om bestandsnamen te lezen in de map met foto’s, en de juiste foto’s bij de bijbehorende producten in beeld te brengen (bijv: 1a.jpg en 1b.jpg horen bij product met id 1, foto’s 2a.jpg en 2b.jpg en 2c.jpg horen bij product 2)

Bonus:

Maak de filters op de product-overzichtspagina werkend (bijv. een filter op merk, categorie of prijs).