PHP Intermediate
Ronald Kerssies | Mar 24, 2023

Image-gallery function

Voorkennis

  • Basiskennis programmeren in php

Dit ga je leren

  • Functies maken en gebruiken
  • Parameters meegeven aan een functie
  • Een waarde teruggeven uit een functie.
functions

Opdracht

Je gaat een gallery maken met afbeeldingen in php zoals in dit voorbeeld Je mag zelf bepalen welke afbeeldingen je gebruikt.
Gebruik een image-editor (paint.net of photoshop) om van de afbeeldingen een uitsnede te maken en op te slaan in een geschikt formaat. (bijv. 300 x 400 px.).

  1. Maak een map 'images' met daarin de afbeeldingen.
  2. Maak een php-pagina met daarin een functie waarin de paden van alle afbeeldingen in de map 'images' worden verzameld in een array. Bijvoorbeeld met scandir of glob.
  3. Maak in diezefde functie een lus waarbij de array met image-paden wordt doorlopen
  4. Combineer (render) de paden met html zodat de afbeeldingen worden weergegeven.
  5. Geef de complete html-code terug uit de functie
    • image-tags
    • een attribute 'class' die verwijst naar een css-class voor de opmaak
    • een attribute 'src' met het pad naar de afbeelding
  6. Roep de functie aan en toon het resultaat.

Uitleg

Signatuur van de functie:

<?php
   /*
   * @param array $map
   * @return string
   * 
   * /
   function showPictures($path) {

      // code om alle afbeeldingen in $path toe te voegen aan een array
      // foreach-loop met code om afbeeldingen in '$path' weer te geven
      
      return $html;
   }
 
 <html> 
   <body>
       <?php echo showPictures("/map/afbeeldingen/"); ?>
   </body> 
</html>

Output resulaat zichtbaar in de browser:

 <html> 
   <body>
      <img class="image-class" src="/path/to/image1.png" alt="image image1.png">
      <img class="image-class" src="/path/to/image2.png" alt="image image2.png">
      <img class="image-class" src="/path/to/image3.png" alt="image image3.png">
      ...
   </body> 
</html>

Resultaat

  • Een PHP-pagina met daarin html-code en één PHP-functie.
  • Functionaliteit volgens de beschrijving in de opdracht.

Evaluatie

Vraag om een code-review om feedback en tips voor best-practices op jouw aanpak te krijgen.