Tutorial Fotoalbum mit direkter Upload Funktion und SQLite Datenbank

von Werner-Zenk.de - Version vom 20.10.2016 - hier als Beispiel verwendet mit den Skripten dieser Version.

Es ist ein Bildklickzähler für die Fotos, den man im Editor der Anwendung sehen kann und eine einstellbare, maximale Anzahl der anzuzeigenden Fotos in der Diashow hinzugekommen. In der neuen Version vom 26.01.2017 ist noch eine automatische Fadeshow sowie einige Optionen hinzugekommen.

Bitte lest aufmerksam die Datei lies_mich.txt mit Anweisungen zu dieser Anwendung. Voraussetzung ist PHP 5.4 oder höher und der Zeichensatz UTF-8.

Diese Anwendung erlaubt das direkte Hochladen im Browser von Bildern im JPG-Format in ein Verzeichnis auf Euren Server. Der Administrator-Bereich ist passwortgeschützt. Es können beliebig viele zusätzliche Benutzer für den Upload eingestellt werden, die ihre eigenen Zugangsdaten erhalten. Die zusätzlichen Benutzer können nur ihre selbst hochgeladenen Bilder editieren, freischalten oder löschen. Der Administrator hat Zugang zu allen Bildern. Die Anwendung verwendet eine portable SQLite-Datenbank, die mittels .htaccess nach außen geschützt ist. Optional kann eine MySQL-Datenbank verwendet werden.

Das Original-Fotoalbum ist für mobile Geräte responsive gestaltet und optimiert. Ihr könnt z.B. auch vom Smartphone Bilder aus der Galerie oder auch Bilder direkt aus der Kamera hochladen. Die Größe der Bilder kann in den Einstellungen angepasst werden und diese wird beim Upload hier z.B. auf ca. 10% der Original-Auflösung reduziert, weil Benutzer meist sehr hoch auflösende Fotos am Smartphone machen.

Ihr könnt diese Anwendung in einem Iframe anzeigen lassen oder auch direkt in NOF einbinden. Ich habe hier nur drei Seiten in NOF eingebunden, die das Fotoalbum zeigen und die Administrator-Seiten im Original belassen, damit diese auch optimal am Smartphone zu bedienen sind.

Einbau in NOF:

Der Einbau in NOF ist nur für fortgeschrittene Benutzer zu empfehlen. Ich beschreibe hier den Einbau von den Original-Seiten “fotoalbum.php”,
anzeige.php” und “diashow.php” direkt in NOF. Ich zeige hier meine teilweise etwas modifizierten Skripte und meine angepasste CSS-Datei.

Zunächst ladet Ihr Euch die Datei “fotoalbum.zip” bei Werner-Zenk.de herunter. Entpackt diese Datei und Ihr erhaltet folgende Verzeichnisse und Dateien:

Fotoalbum Dateien

Natürlich muss die NOF-Seite, auf der Ihr das einbaut, die Datei-Erweiterung .php erhalten. Stellt den Zeichensatz auf “UTF-8”.

Zunächst habe ich meine Publizierungs-Struktur für dieses Projekt auf “Unstrukturiert” umgestellt, damit ich keine relativen Pfadangaben in den Skripten vom Werner ändern muss.

> großer Button “Publizieren” > Menü oben “Publizieren” > “Dateien anordnen” > “Unstrukturiert

Dann habe ich die CSS-Datei vom Werner “style.css” umbenannt in “stylealbum.css” und entsprechend die Verlinkung in allen Skripten vom Werner geändert, da ich mir sonst die NOF-eigene “style.css” überschreiben würde, da nun sämtliche Dateien in meinem Stammverzeichnisses dieses Projektes liegen.

Dann habe ich mir eine eigene CSS-Datei für die Anzeige in meinen NOF-Seiten erstellt, die ich “fotostyle.css” genannt habe.

Ihr könnt Euch meine CSS-Datei natürlich gerne, mit der rechten Maustaste (Ziel speichern unter), am Link oben downloaden. Ich habe dort lediglich die Farben an meine Seite angepasst.

Ich habe also dementsprechend meine CSS-Datei dann in der Assets-Verwaltung in NOF eingelesen, damit NOF diese sogleich mit publiziert und einen Verweis auf diese Datei auf meiner Startseite am “Beginn des Haupttextes” (nach <body>) geschrieben.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn des Haupttextes

<link rel="stylesheet" type="text/css" href="./fotostyle.css">

Bitte öffnet und editiert die Skripte vom Werner mit einem vernünftigen Editor. Ich verwende dafür Notepad++.

Als erstes nehmt Ihr Eure Einstellungen in der Datei “einstellungen.php” vor. Dort tragt Ihr den Benutzer-Namen und Passwort ein. Weitere Einstellungen sind kommentiert, wie z.B. die Sortierung der Anzeige der Thumbnails vom Fotoalbum oder auch die erlaubte Größe der Bilder. Kopiert sämtliche Verzeichnisse und Dateien dann mit dem FTP-Programm in das Verzeichnis auf Euren Server, in dem Ihr diese Anwendung anzeigen lassen wollt.

Für die Anzeige des Fotoalbums (hier auf meiner Startseite) habe ich den PHP-Teil aus dem Skript “fotoalbum.php” vom Werner kopiert. Dabei habe ich die Verlinkung zu der Seite “anzeige.php” auf meinen NOF-Seitennamen “fotoanzeige.php” geändert. Diese 2. Seite zeigt dann die großen Bilder an.

Dieses PHP-Skript gehört an den Beginn der Seite (keine Leerzeile lassen)

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn der Seite

<?php
/*
 * Fotoalbum - fotoalbum.php (utf-8)
 * - https://werner-zenk.de
 */

include "einstellungen.php";

$output = "";

// Anzahl der Datensätze
$select = $db->query("SELECT `id` FROM `fotoalbum` WHERE `view` = '1'");
$countDataRecord = count($select->fetchAll(PDO::FETCH_OBJ));

// Aktuelle Seite
$pageNumbers = ceil($countDataRecord / $photoPage);
$currentPage = isset($_GET["page"]) ? $_GET["page"] : 1;
$currentPage = ctype_digit($currentPage) ? $currentPage : 1;
$currentPage = $currentPage < 1 || $currentPage > $pageNumbers ? 1 : $currentPage;
$offset = $currentPage * $photoPage - $photoPage;

// Fotos auslesen
$orderBy = [1=>'`photo` DESC', '`date` DESC', '`text` ASC',  '`hits` DESC'];
$select = $db->query("SELECT `id`, `text`, `photo`
                                FROM `fotoalbum`
                                WHERE `view` = '1'
                                ORDER BY " . $orderBy[$sortingPhoto] . "
                                LIMIT "  . $offset . ", " . $photoPage);
$photos = $select->fetchAll(PDO::FETCH_OBJ);

if ($countDataRecord > 0) {

 // Diabox - Größe ermitteln
 $w = 0; $h = 0;
 foreach ($photos as $photo) {
  $i = getimagesize($directoryThump . '_' . $photo->photo);
  $w = $i[0] > $w ? $i[0] : $w;
  $h = $i[1] > $h ? $i[1] : $h;
 }

 // Fotos anzeigen
 foreach ($photos as $photo) {
  $output .= '<figure class="diabox" style="width: ' . ($w+15) . 'px; height: ' . ($h+30) . 'px;"
   onClick="window.location.href=\'fotoanzeige.php?id=' . $photo->id . '&c' . '\'" title="' . $photo->text . '">
   <img class="thumbnail" src="' . $directoryThump . '_' . $photo->photo . '" alt="Foto">
   <figcaption>' . $photo->text .'</figcaption>
  </figure>';
 }

 // Navigation
 $output .= '<div id="navigation">' .
  (($currentPage - 1) > 0 ?
  '<a href="?page=' . ($currentPage - 1) . '" class="button">&laquo;</a> ' :
  ' <span class="button_none">&laquo;</span> ') .
  $currentPage . '/' . $pageNumbers .
  (($currentPage + 1) <= $pageNumbers ?
   ' <a href="?page=' . ($currentPage + 1) . '" class="button">&raquo;</a>' :
   ' <span class="button_none">&raquo;</span> ') .
 '</div>';
}
else {
 $output = '<p>Keine Fotos vorhanden!<br><a href="anmeldung.php">Zur Anmeldung</a></p>';
}
?>

Für die Darstellung des Fotoalbums fügt Ihr den PHP-Code unten in den HTML-Code Editor eines Textfeldes ein.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen

<?=$output?>

Für die Anzeige der großen Fotos, auf meiner NOF-Seite “fotoanzeige.php”, bin ich ebenso vorgegangen. Also wieder den Verweis auf meine CSS-Datei in die HTML des Layouts “Beginn des Haupttextes” kopiert und dann den PHP-Teil aus der Datei “anzeige.php” vom Werner kopiert.

Hier habe ich lediglich den Link zu meiner NOF-Seite “diaanzeige.php” mit der Diashow geändert.

Dieses PHP-Skript gehört dann auch wieder an den Beginn der Seite (keine Leerzeile lassen)

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn der Seite

<?php
/*
 *  Fotoalbum - Fotoanzeige - anzeige.php (utf-8)
 * - https://werner-zenk.de
 */

include "einstellungen.php";

$output = "";

if (isset($_GET["id"])) {
 // DB auslesen und Foto anzeigen
 $select = $db->prepare("SELECT `user`, `text`, `photo`, `date`
                                 FROM `fotoalbum`
                                 WHERE `id` = :id");
 $select->execute([":id" => $_GET["id"]]);
 $photo = $select->fetch();
 if (count($photo) == 8) {
  sscanf($photo["date"], "%4s-%2s-%2s %2s:%2s", $year, $month, $day, $hour, $minute);
  $info = $userView == "ja" ? ' &nbsp; <dfn> [' . $photo["user"] . ']</dfn>' : '';
  $info .= $viewDate == "ja" ? '<br><dfn>' . $day . '.' . $month . '.' . $year . ' - ' . $hour . ':' . $minute . ' Uhr</dfn>' : '';
  $output = '<figure onClick="history.back();">
   <img class="photo" src="' . $directory . $photo["photo"] . '" alt="Foto">
   <figcaption>' . $photo["text"] . $info . '</figcaption>
  </figure>';
 }
 else {
  $output = '<p>Foto nicht (mehr) vorhanden!</p>';
 }

 // Hits speichern
 if ($photoHits == "ja" &&
     isset($_GET["c"])) {
  $update = $db->prepare("UPDATE `fotoalbum`
                                 SET `hits` = `hits` + 1
                                 WHERE `id` = :id");
  $update->execute([":id" => $_GET["id"]]);
 }
}
$output .= $diashowView == "ja" ? '<p><a href="diaanzeige.php">Diashow starten</a></p>' : '';
?>

Für die Darstellung des Fotos fügt Ihr dann wieder den PHP-Code unten in den HTML-Code Editor eines Textfeldes ein, um den ich zusätzlich noch ein ‘center’ gesetzt habe, um das Einzelfoto und den Inhalt dieser PHP-Variable auf meiner Seite zu zentrieren.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen

<center><?=$output?></center>

Für die Anzeige der Diashow, auf meiner NOF-Seite “diaanzeige.php”, bin ich ebenso vorgegangen. Zunächst gehört, aus der Datei “diashow.php”, dieses PHP-Skript, zum Auslesen der Fotos, an den Beginn der Seite.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn der Seite” (keine Leerzeile lassen)

<?php
/*
 * diashow.php (utf-8)
 * - https://werner-zenk.de
 */

// Fotos auslesen
if (isset($_GET["show"])) {
 include "einstellungen.php";
 $orderBy = [1=>'`photo` DESC', '`date` DESC', '`text` ASC'];
 $select = $db->query("SELECT `id`, `text`, `photo`
                                 FROM `fotoalbum`
                                 WHERE `view` = '1'
                                 ORDER BY " . $orderBy[$sortingPhoto]);
 $photos = $select->fetchAll(PDO::FETCH_OBJ);
 foreach ($photos as $photo) {
  $arr[] = ['photo'=>$directory . $photo->photo, 'txt'=>$photo->text];
 }
 echo json_encode($arr);
 exit;
}
?>

... weiterhin gehört dieses JavaScript für die Funktionen der Diashow sowie diese zusätzliche Style-Anweisung ebenfalls in die HTML des Layouts

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

<script>
  // Diashow

  "use strict";
  var photo = [], txt = [], aktuell = 0;

  // Eventhandler setzen
  window.addEventListener("load", function () {
   document.getElementById("prev").addEventListener("click", function(){blaettern(-1)});
   document.getElementById("next").addEventListener("click", function(){blaettern(1)});

   // Fotos holen
    var xhr = new XMLHttpRequest();
    xhr.open("GET", document.URL+"?show");
    xhr.send(null);
    xhr.onreadystatechange = function () {
     if (xhr.readyState == 4 &&
         xhr.status == 200) {
      var obj = JSON.parse(xhr.responseText);
      for (var counter = 0; counter < obj.length; counter++) {
       photo[counter] = obj[counter].photo;
       txt[counter] = obj[counter].txt;
      }
 
      // Erstes Foto mit Beschreibung
      document.getElementById("photo").setAttribute("src", photo[0]);
      document.getElementById("figcaption").innerHTML = "(1/" + photo.length + ") " + txt[0];
      // Koordinaten setzen
      window.setTimeout(function () {
       document.getElementById("prev").coords = "0,0," + Math.round(document.getElementById("photo").width/2) + "," +
 document.getElementById("photo").height;
       document.getElementById("next").coords = Math.round(document.getElementById("photo").width/2 + 1) + ",0," +
 document.getElementById("photo").width + "," + document.getElementById("photo").height;
      }, 500);
     }
    }
  });

  // Blaettern
  function blaettern(richtung) {
   var ende = photo.length;
   if (aktuell+richtung >= 0 &&
       aktuell+richtung < ende) {
    aktuell += richtung;
    // Foto mit Beschreibung
    document.getElementById("photo").src = photo[aktuell];
    document.getElementById("figcaption").innerHTML = "(" + (aktuell+1) + "/" + photo.length + ") " + txt[aktuell];
    // Koordinaten setzen
    window.setTimeout(function () {
     document.getElementById("prev").coords = "0,0," + Math.round(document.getElementById("photo").width/2) + "," +
 document.getElementById("photo").height;
     document.getElementById("next").coords = Math.round(document.getElementById("photo").width/2 + 1) + ",0," +
 document.getElementById("photo").width + "," + document.getElementById("photo").height;
    }, 500);
   }
  }

  // Koordinaten setzen (bei Aenderung der Fenstergroesse)
  window.addEventListener("resize", function () {
   document.getElementById("prev").coords = "0,0," + Math.round(document.getElementById("photo").width/2) + "," +
 document.getElementById("photo").height;
   document.getElementById("next").coords = Math.round(document.getElementById("photo").width/2 + 1) + ",0," +
 document.getElementById("photo").width + "," + document.getElementById("photo").height;
  });
</script>

<style>
  @media screen and (max-width: 45rem) {
   body, figure {
    margin: 0;
   }
  }

  figure {
   text-align: Center;
  }

  map > area {
   cursor: Pointer;
  }

  p {
   text-align: Center;
  }
</style>

Für die Anzeige der Diashow, auf meiner NOF-Seite “diaanzeige.php”, bin ich ebenso vorgegangen. Also wieder den Verweis auf meine CSS-Datei in die HTML des Layouts “Beginn des Haupttextes” kopiert und dann den Teil, der zwischen den Tags <body> und </body> steht, aus der Datei “diashow.php” vom Werner kopiert. Hier habe ich den Link zu meinem Fotoalbum auf meine Startseite index.php geändert.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen

            <figure>
             <img id="photo" class="photo" usemap="#photo" alt="Foto"><br><br>
             <figcaption id="figcaption"></figcaption>
            </figure>

            <map name="photo">
             <area id="prev" shape="rect" coords="0,0,0,0" title="Zum vorherigen Foto">
             <area id="next" shape="rect" coords="0,0,0,0" title="Zum nächsten Foto">
            </map>

            <p><dfn>Klicke auf das Foto, rechts und links, um zu blättern.</dfn><br>
            <a href="index.php">Diashow beenden</a></p>

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik