PHP Tutorials, PHP lernen, PHP Forum, PHP Community and more ... MyWebsolution.de!

Sidebar

Home News Tutorials Workshops Tipps Artikel Gästebuch Sitemap Pascal Landau

Suche

Members

Forum Login Registrierung

Statistik

Statistikbereich
Jetzt1
Heute353
Gestern331
Gesamt2311169

PHP Bildergalerie - Bilderausgabe

Autor Flitze
Klicks 159010
Rating für PHP Bildergalerie
  7.6 von 10
Bewertungen118
Stand 08.10.2014
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

Amazon: PHP 5.3 und MySQL 5.1
Breadcrumb:
Workshops » PHP Bildergalerie » PHP Bildergalerie - Bilderausgabe
Seite : 1 2 3 4 5 6 7 Bewerten
Article Wizard - deutscher Article Spinner

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 :P

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_anzahl0);
        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&auml;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 />".
             
"&raquo; <a href=\"index.php?s=galerie\">Zur&uuml;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%== 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&auml;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> ".
             
"&raquo; <a href=\"index.php?s=overview&id=".$row['ID']."\">".htmlentities($row['Name'], ENT_QUOTES)."</a> ".
             
"&raquo; ".$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&uuml;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&ouml;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

»» Zurück zum Menu

Suchmaschinenoptimierung

Suchmaschinenoptimierung (SEO - Search Engine Optimization)

Ranking

Tutorials (13)

8.6
8.4
8

Workshops (3)

8.8
8.7
7.6

Tipps (12)

7.2
6.7
6.5

Artikel (32)

8.4
8
7.2

RSS Feeds

Full Feed Tutorials Workshops Tipps Artikel

Twitter

Follow me on Twitter

Partner & Links


Valid HTML 4.01 Transitional
Valid CSS
nach oben

Diese Seiten unterstützen MyWebsolution:
 
© MyWebsolution.de
2006-2024