Bildergalerie

Gebe die HTML-Struktur für eine Bildergalerie mit einem Loop aus. Trenne Daten und Logik von der Darstellung, so dass du mit wenigen Zeilen Code auskommst, egal wie viele Bilder es anzuzeigen gilt.

Der Hintergrund

Wenn wir mit PHP Arbeiten, können wir die Ausgabe von sich wiederholenden Elementen mit einem Loop so automatisieren, dass wir den sich wiederholenden Teil nur noch einmal schreiben müssen. Denke nicht mehr nur an "die Seite", sondern teile deinen Content in Layout und Daten auf. Daten sind das, was du übermitteln willst, Layout sind die HTML-Tags, die dazu dienen, die Daten übersichtlich darzustellen. Bei sich wiederholenden Elementen ist das einfach zu erkennen - die Bildergalerie besteht aus einer HTML-Struktur wie z.B. DIV Containern mit jeweils einem IMG Tag. Deren Darstellung ist für jedes Bild gleich, was sich jedoch bei jedem Bild unterscheidet, ist deren URL. Das heisst: die Bild-URL's sind Daten (wir können beliebig viele, unterschiedliche anzeigen wollen), der Rest ist Layout (es ist immer gleich für jedes Bild):

<div class="row mt-4">
	<div class="col-12 col-sm-6 col-md-3">
		<img src="/media/Business-20.png">
	</div>
	<div class="col-12 col-sm-6 col-md-3">
		<img src="/media/eaef_Blurr-402x.jpg">
	</div>
	<div class="col-12 col-sm-6 col-md-3">
		<img src="/media/Pompeo.jpg">
	</div>
	<div class="col-12 col-sm-6 col-md-3">
		<img src="/media/biznus.jpg">
	</div>
</div>

Um bei dieser regelmässigen Struktur die Daten zu extrahieren, würde demnach ein Array ausreichen, in dem die Bildnamen stehen. Alles andere bleibt gleich und muss daher dank Loop nur einmal erzeugt werden.

$bildDaten = array(
	"Business-20.png",
	"eaef_Blurr-402x.jpg",
	"Pompeo.jpg",
	"biznus.jpg",
);

Möchte man zu jedem Bild nun noch Metadaten ausgeben, braucht es eine mehrdimensionale Array-Struktur (s. Arrays und Loops). Dann könnte die Arraystruktur z.B. so aussehen:


$bildDaten = array(
	array(
		"url" => "Business-20.png",
		"titel" => "Business Template"
	),
	array(
		"url" => "eaef_Blurr-402x.jpg",
		"titel" => "Blurr Projekt"
	),
	array(
		"url" => "Pompeo.jpg",
		"titel" => "Pompeo Portal"
	),
	array(
		"url" => "biznus.jpg",
		"titel" => "Biznus Webseite"
	)
);

Vorbereitung auf die Arbeit mit Datenbanken

Dieses Konzept, bei dem wir Daten und Layout trennen, ist ein wichtiger Schritt in Richtung Datenbank-basierter Applikation. Beim Einsatz einer Datenbank werden die Daten über ein Admintool verwaltet und in die Datenbank geschrieben. Die Verwaltung der Daten ist also vom Layout komplett unabhängig. Das Array kann hier als temporäre "Mini-Datenbank" verstanden werden. Und tatsächlich ist es so, dass Daten, die aus der Datenbank gelesen werden, dem PHP-Skript auch in mehrdimensionalen Arrays (zweites Beispiel) zur verfügung gestellt werden. Du kannst diesen Vorrgang also später direkt weiterverwenden.

So geht's

Bildergalerie aus einem Ordner auslesen

lade dir die Vorlage galerie.zip herunter und speichere die Dateien in deinem Server. Sie enthält die HTML-Struktur sowie den Bilderordner, in dem die Bilder enthalten sind.
Erstelle dir dafür zwei Variablen in PHP oberhalb der HTML-Struktur - eine Variable für den Bilder-Ordner (damit das Script später einfach zu konfigurieren ist) und eine weitere Variable mit einem Array, in dem die Bildnamen enthalten sind:
```
$bilderOrdner = "media";
$bildDaten = array(
	"Business-20.png",
	"eaef_Blurr-402x.jpg",
	"Pompeo.jpg",
	"biznus.jpg",
);
```
Schau dir nun als erstes die HTML-Struktur an - es gibt einen Teil, der sich wiederholt, nämlich der Container mit dem Bild drin. Behalte davon nur einen davon (als "Vorlage") und lösche die anderen heraus. Um diesen HTML-Teil bauen wir nun den Loop.
```
<div class="row mt-4">
	
	<div class="col-12 col-sm-6 col-md-3">
		<img src="/media/Business-20.png">
	</div>
	
</div>
```

Erstelle nun den Loop so, dass er die "Vorlage" für ein Bild umschliesst:

<div class="row mt-4">
	<?php foreach($bildDaten as $bild) { ?>
	<div class="col-12 col-sm-6 col-md-3">
		<img src="/media/Business-20.png">
	</div>
	<?php } ?>
</div>

In der Variablen $bild ist nun bei jedem Durchlauf des Loops ein anderer Bild-URL enthalten. Gebe diesen nun noch im HTML innerhalb des Loops aus. Dazu verwendest du die anfangs erstellte Variable $bilderOrdner und die im Loop erzeugte, sich ändernde Variable $bild, um den kompletten Pfad dynamisch auszugeben:
```
<div class="row mt-4">
	<?php foreach($bildDaten as $bild) { ?>
	<div class="col-12 col-sm-6 col-md-3">
		<img src="/<?php echo $bilderOrdner.'/'.$bild; ?>">
	</div>
	<?php } ?>
</div>
```

Tips und Links

Wenn du die verschiedenen Loops for() und foreach() vergleichen möchtest, baue die übung mit beiden Loops parallel auf
Setze stattdessen ein mehrdimensinales Array ein, um auch noch Metadaten auszugeben. Dafür musst du die Ausgaben innerhalb des Loops ein wenig anpassen, da dann in $bild kein String mehr, sondern ein Array mit mehreren Werte enthalten ist.

Start

Output "automatisieren"

Nutze Arrays und Loops, um Redundanz zu vermeiden.