PHP Bildergalerie - Bilderausgabe
Autor
Flitze
Klicks 161664
Keywords:
PHP Bildergalerie Tutorial, PHP Bildergalerie erstellen, PHP MySQL Bildergalerie, PHP Thumbnails erstellen, PHP Bilder speichern, Tutorial PHP Bildergalerie, Bilderausgabe, Bildergalerie, PHP, MySQL, Anezeige der Bilder
Klicks 161664
Rating für PHP Bildergalerie
7.6 von 10
Bewertungen118
Stand
08.10.2014
7.6 von 10
Bewertungen118
Keywords:
PHP Bildergalerie Tutorial, PHP Bildergalerie erstellen, PHP MySQL Bildergalerie, PHP Thumbnails erstellen, PHP Bilder speichern, Tutorial PHP Bildergalerie, Bilderausgabe, Bildergalerie, PHP, MySQL, Anezeige der Bilder
Breadcrumb:
Workshops » PHP Bildergalerie » PHP Bildergalerie - Bilderausgabe
Bilderausgabe (Albenübersicht, Bilderübersicht, Einzelbilddarstellung)
[ADSENSE_LINE]Nachdem die Programmierung der Administrationsebene abgeschlossen ist, komme ich nun zur Darstellung der Alben und Bilder. Funktionieren soll das Ganze so, dass der Benutzer erstmal eine Übersicht aller Alben mit deren Infos (Datum, Fotos im Album, Beschreibung) bekommt (galerie.php). Die Albennamen werden als Links dargestellt, die als Ziel auf ein Skript verweisen (overview.php), das eine Übersicht der Fotos des Albums als Thumbnails anzeigt. Diese Thumbnails werden wiederum als Links dargestellt und verweisen auf ein Skript, das eine Detailansicht des Fotos zeigt (detail_screen.php). In dieser Detailansicht kann der Administrator die Bilder dann löschen und bearbeiten. Soviel zu unserem Plan, lasset uns nun beginnen
Galerie aller Alben (galerie.php)
Zuerst lese ich die Daten aller Alben in der Datenbank aus und gebe eine Meldung aus, falls keine Alben vorhanden sind. Danach zähle ich die Fotos, die zu diesem Album gehören und erstelle die Links zur Übersichtsseite.PHP:
<?php
error_reporting(E_ALL);
echo "<h1>Galerie</h1>\n";
$sql = "SELECT
ID,
Name,
Beschreibung,
DATE_FORMAT(Datum, '%d.%m.%Y') as Datum
FROM
Alben
ORDER BY
Datum DESC
";
$result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
if(!mysql_num_rows($result)){
echo "<p>\n".
"Es befinden sich keine Alben in der Datenbank\n".
"</p>\n";
}
while($row = mysql_fetch_assoc($result)){
$sql = "SELECT
COUNT(*)
FROM
Fotos
WHERE
Alben_ID = '".$row['ID']."'
";
$result_anzahl = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
$anzahl_fotos = mysql_result($result_anzahl, 0);
echo "<dl>\n".
"<dt><a href=\"index.php?s=overview&id=".$row['ID']."\">".htmlentities($row['Name'], ENT_QUOTES)."</a> (".$row['Datum']." - ".$anzahl_fotos." Fotos)</dt>\n".
"<dd>".htmlentities($row['Beschreibung'], ENT_QUOTES)."</dd>\n".
"</dl>\n";
}
?>
Codetechnisch gibt’s eigentlich nix zu erwähnen. Ungewöhnlich sind höchstens die Definitionslisten-Tags <dl>, <dt> und <dd>. Infos dazu sind wie immer auf SELFHTML unter SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen zu finden.
Übersicht der Fotos eines einzelnen Albums (overview.php)
Diese Seite soll nur über unsere Galerie-Seite aufgerufen werden können. Dazu muss die ID eines Albums übergeben werden, mit deren Hilfe wir die einzelnen Bilder des Albums anzeigen können. Da die ID allerdings übergeben wird, also vom User beeinflussbar ist, müssen wir sie vorher ausreichend validieren. Das mache ich wie folgt:PHP:
<?php
error_reporting(E_ALL);
echo "<h1>Albenübersicht</h1>\n";
$error = '';
// Prüfen ob ID übergeben wurde und numerisch ist
if(!isset($_GET['id']) OR !is_numeric($_GET['id'])){
$error = "Sie haben kein Album ausgewählt.<br />\n".
"Bitte benutzen Sie einen Link aus der <a href=\"index.php?s=galerie\">Galerie</a>\n";
}
else{
// $_GET_Wert sichern
$_GET['id'] = (int)mysql_real_escape_string($_GET['id']);
// Prüfen ob ein Album zur ID existiert
$sql = "SELECT
Name,
Beschreibung,
DATE_FORMAT(Datum, '%d.%m.%Y') as Datum
FROM
Alben
WHERE
ID = '".$_GET['id']."'
";
$result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
$anzahl = mysql_num_rows($result);
if(!$anzahl)
$error = "Dieses Album existiert nicht.<br />\n".
"Bitte benutzen Sie einen Link aus der <a href=\"index.php?s=galerie\">Galerie</a>\n";
}
if($error != '')
echo $error;
else{
// Albeninfos und Bilder anzeigen
?>
Erstmal mit isset() prüfen, ob $_GET['id'] überhaupt übergeben wurde. Danach prüfe ich mit is_numeric(), ob es sich um eine Zahl handelt, schließlich sind unsere IDs Zahlen. Wenn wir diese Fehler ausschließen können, sichere ich den Wert mit mysql_real_escape_string() für die folgenden Queries und caste ihn als int. Also, selbst wenn sich irgendwas SQL-Injection-mäßiges an is_numeric() vorbei schleicht, dann wird es durch das escapen unschädlich gemacht. Wenn der Wert OK ist, dann suche ich das dazu gehörende Album. Gibt’s keins -> Fehlermeldung.
Für die Fehlermeldungen benutze ich dieses mal kein Array sondern eine normale Variable. Das liegt daran, dass sich die Fehlermeldungen nicht überlappen können, denn wenn z.B. gar keine ID übergeben wurde, dann brauch ich auch nicht zu überprüfen, ob es dazu ein Album gibt.
Wenn die übergebene ID soweit in Ordnung ist, zeige ich Infos zum Album und natürlich die Bilder an:
PHP:
<?php
else{
// Albeninfos und Bilder anzeigen
// Daten des Albums in $row speichern
$row = mysql_fetch_assoc($result);
$sql = "SELECT
ID,
Name
FROM
Fotos
WHERE
Alben_ID = '".$_GET['id']."'
ORDER BY
Datum ASC
";
$result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
$anzahl_fotos = mysql_num_rows($result);
echo "Name: ".htmlentities($row['Name'], ENT_QUOTES)."\n<br />".
"Beschreibung: ".htmlentities($row['Beschreibung'], ENT_QUOTES)."\n<br />".
"Datum: ".$row['Datum']."\n<br />".
"Fotos: ".$anzahl_fotos."\n<br />".
"<br />".
"» <a href=\"index.php?s=galerie\">Zurück zur Galerie</a><br />\n";
echo "<br />\n";
if(!$anzahl_fotos){
echo "<p>\n".
"Es befinden sich keine Fotos in diesem Album.\n".
"</p>\n";
}
else{
$i=1;
while($row = mysql_fetch_assoc($result)){
$float = 'left';
$br = "\n";
if($i%4 == 0){
$br .= "<br style=\"clear:both;\" />\n";
$float = 'none';
}
echo "<a href=\"index.php?s=detail_screen&id=".$row['ID']."\">".
"<img style=\"float:".$float.";\" src=\"".TN_FOLDER."/TN".substr($row['Name'],3)."\" alt=\"".$row['Name']."\" />".
"</a>";
echo $br;
$i++;
}
echo "<br style=\"clear:both;\"/>\n";
}
}
?>
Für die Anzeige der Fotos verwende ich die obige while-Schleife. Dabei lasse ich die Zählvariable $i mitlaufen, denn so kann ich mittels des Modulo-Operators (%) beeinflusse, wie viele Bilder in einer Reihe angezeigt werden sollen (in diesem Fall 4). Die float-Eigenschaft left bewirkt dabei eine nebeneinander ausgerichtete Anordnung der Bilder.
Auf diesen Teil möchte ich noch kurz eingehen
PHP:
<?php
echo "<a href=\"index.php?s=detail_screen&id=".$row['ID']."\">".
"<img style=\"float:".$float.";\" src=\"".TN_FOLDER."/TN".substr($row['Name'],3)."\" alt=\"".$row['Name']."\" />".
"</a>";
?>
Der Link ist noch einfach nachvollziehbar. Er verweist auf das Skript für die Einzeldarstellung des Fotos und übergibt die Foto ID. Interessanter ist der src-Teil des Fotos, denn dabei verwende ich die Funktion substr(). Das hat den einfachen Grund, dass die Namen der Bilder als PIC_asdfgasdf12323454567.jpg oder ähnlich in der Datenbank gespeichert sind. Das Thumbnail zu diesem Bild hat aber den Namen TN_asdfgasdf12323454567.jpg, deshalb entferne ich das PIC mit substr().
Als kleine Anmerkung möchte ich noch drauf hinweisen, dass man den 'blauen Rahmen' um das Bild wegbekommt, wenn man im style-Attribut des <img>-Tags border:none; notiert.
Detailansicht eines Fotos (detail_screen.php)
An die Detailansicht stelle ich den Anspruch, dass sie:- eine Groß-Ansicht des Fotos
- die Beschreibung des Fotos
- Links zum vorigen und nächsten Bild
- Link zum Löschen und Bearbeiten für den Administrator
zeigt. Als Code sieht’s so aus:
PHP:
<?php
error_reporting(E_ALL);
echo "<h1>Detailansicht</h1>\n";
$error = '';
// Prüfen ob ID übergeben wurde und numerisch ist
if(!isset($_GET['id']) OR !is_numeric($_GET['id'])){
$error = "Sie haben kein Foto ausgewählt.<br />\n".
"Bitte benutzen Sie einen Link aus der <a href=\"index.php?s=galerie\">Galerie</a>\n";
}
else{
// $_GET_Wert sichern
$_GET['id'] = (int)mysql_real_escape_string($_GET['id']);
// Prüfen ob ein Foto zur ID existiert
$sql = "SELECT
Name,
Beschreibung,
Alben_ID
FROM
Fotos
WHERE
ID = '".$_GET['id']."'
";
$result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
$anzahl = mysql_num_rows($result);
if(!$anzahl)
$error = "Dieses Foto existiert nicht.<br />\n".
"Bitte benutzen Sie einen Link aus der <a href=\"index.php?s=galerie\">Galerie</a>\n";
}
if($error != '')
echo $error;
else{
// Alben_ID, Bildname und Beschreibung in $pic speichern
$pic = mysql_fetch_assoc($result);
// Albenname + ID für den Link zurück zur Übersicht auslesen
$sql = "SELECT
ID,
Name
FROM
Alben
WHERE
ID = '".$pic['Alben_ID']."'
";
$result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
$row = mysql_fetch_assoc($result);
// Zurück-Link ausgeben
echo "<p>\n".
"<a href=\"index.php?s=galerie\">Galerie</a> ".
"» <a href=\"index.php?s=overview&id=".$row['ID']."\">".htmlentities($row['Name'], ENT_QUOTES)."</a> ".
"» ".$pic['Name']."\n".
"</p>\n";
// Bild anzeigen
echo "<img src=\"".PIC_FOLDER.$pic['Name']."\" alt=\"".$pic['Name']."\" />\n";
echo "<br />\n";
// Beschreibung ausgeben
echo "<p>\n".
htmlentities($pic['Beschreibung'], ENT_QUOTES).
"</p>\n";
// vorigen Datensatz auslesen
$sql = "SELECT
ID,
Name
FROM
Fotos
WHERE
Alben_ID = '".$row['ID']."' AND
ID < '".$_GET['id']."'
ORDER BY
ID DESC
LIMIT
1
";
$result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
if(mysql_num_rows($result)){
$prev = mysql_fetch_assoc($result);
echo "<a href=\"index.php?s=detail_screen&id=".$prev['ID']."\">Zurück</a>\n";
}
echo " -- ";
// nächsten Datensatz auslesen
$sql = "SELECT
ID,
Name
FROM
Fotos
WHERE
Alben_ID = '".$row['ID']."' AND
ID > '".$_GET['id']."'
ORDER BY
ID ASC
LIMIT
1
";
$result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
if(mysql_num_rows($result)){
$next = mysql_fetch_assoc($result);
echo "<a href=\"index.php?s=detail_screen&id=".$next['ID']."\">Weiter</a>\n";
}
echo "<br />\n";
echo "<br />\n";
// Link zum Löschen / Bearbeiten
echo "<a href=\"index.php?s=edit&id=".$_GET['id']."\">Bearbeiten</a>\n ".
"--\n ".
"<a href=\"index.php?s=delete&id=".$_GET['id']."\">Löschen</a>\n";
}
?>
Erstmal wird die ID wieder auf Gültigkeit geprüft. Das geht im Grunde genauso wie zuvor in der overview.php. Danach wird ein Navigationslink angezeigt, über den man zurück zur Übersicht gelangt. Danach folgt die Ausgabe des Originalbildes und dessen Beschreibung.
Bis dahin kommt noch nichts Ungewöhnliches vor.
Interessant wird beim Auslesen des vorigen bzw. nächsten Datensatzes. Vergeblich such man nach einer Funktion mittels der man MySQL begreiflich macht, dass man gern den „Datensatz vor diesem“ auslesen möchte. Aus diesem Grund benötigen wir 2 neue Queries die diese Funktion übernehmen. Der erste ist dieser:
PHP:
<?php
// vorigen Datensatz auslesen
$sql = "SELECT
ID,
Name
FROM
Fotos
WHERE
Alben_ID = '".$row['ID']."' AND
ID < '".$_GET['id']."'
ORDER BY
ID DESC
LIMIT
1
";
?>
Erstmal sage ich, dass nur die Bilder des aktuellen Albums ausgelesen werden sollen. Außerdem will ich nur die Bilder mit einer kleineren ID als der Aktuellen haben, denn die ID ist ja als Auto_Increment definiert, so dass das vorige Foto auf jeden Fall eine kleinere ID haben muss. Sortiert wird das ganze demnach auch nach der ID absteigend. Theoretisch könnte ich das ganze auch über das Datum laufen lassen, aber darin werden leider nur sekundengenaue Werte gespeichert und wenn ich Fotos über ein Zip-Archiv hochlade, dann haben diese eventuell das gleiche Datum gespeichert. Wie auch immer, da ich nur genau einen Datensatz suche, kommt ans Ende noch ein LIMIT 1.
Das gleiche mache ich jetzt für den folgenden Datensatz:
PHP:
<?php
// nächsten Datensatz auslesen
$sql = "SELECT
ID,
Name
FROM
Fotos
WHERE
Alben_ID = '".$row['ID']."' AND
ID > '".$_GET['id']."'
ORDER BY
ID ASC
LIMIT
1
";
?>
Unterschied ist nur, dass ich jetzt alle Fotos mit einer ID größer der aktuellen heraussuche und diese in aufsteigender Reihenfolge sortieren lasse.
So die Ausgabe wäre damit soweit fertig. Am Ende stehen jetzt noch Links zum Löschen und Bearbeiten des Fotos, die jeweils die aktuelle Bild-ID übergeben.
Zurück zur vorigen Seite:
PHP Bildergalerie - Foto Upload und Mehrfach Upload Weiter zur nächsten Seite:
PHP Bildergalerie - Bilder bearbeiten und löschen
Suchmaschinenoptimierung (SEO - Search Engine Optimization)
