Photoshop
Cinema 4d
HTML / CSS
JavaScript
PHP
Flash
Fotografie
Terragen
Webserver
Informatik
Sonstige
Galeriescript, Upload und Bildmanipulation mit der GD-Library (Php Tutorial)
Tutorial erstellt von Dac-XP, letzte Änderung am 13.07.2007
Hallo!
Hier erkläre ich, wie man eine komplette Galerie in HTML, PHP und MySQL programmiert. Ich setzte bei diesem Tutorial vorraus, dass allgemeine Kenntnisse in allen vier Gebieten vorhanden sind. Natürlich könnte man einfach die Scripte kopieren, und nach Wünschen verändern und einsetzten. Damit würde dieses Tutorial aber sicher seinen Zweck verfehlen.
Hier zunächst die Einteilung des Tutorials:
1.) Indexseite -> Über diese Seite kann man alle Funktionen erreichen.
2.) Bild hochladen (Formular) -> Eingabemaske für die Bildeinstellungen.
3.) Bild hochladen (Script) -> Eigentlichen Hochladevorgang und Bildmanipulation (Schritzug, Rahmen, Thumbnail).
4.) Galerie -> Auflistung aller Bilder (Thumbnails) in einer Galerie.
5.) Detailansicht -> Großansicht eines angeklickten Bildes.
Es wurden jetzt viele kleine Funktionen, die das Tutorial komplettieren sollen nicht genannt. So wird zum Beispiel noch ein Klickcounter eingerichtet.
Was den Rahmen dieses ohnehin schon sehr großen Tutorials sprengen würde, wäre eine komplette Bilderverwaltung, mit deren Hilfe man zum Beispiel die Bilder wieder löschen könnte, oder einen Kommentar zu den Bildern geben könnte.
Aber genug um den heißen Brei herum geredet! Schließlich wollen wir ja auch was lernen.
Die Indexseite ist eher eine Bequemlichkeit, als ein wirkliches Lernobjekt. Die machen wir nur dafür, damit wir nicht immer die URL eingeben müssen. Dazu gibt es eigentlich auch nicht viel zu erklären.
Code:
Hier werden halt nur zwei zentrierte Textlinks auf die wichtigsten Dateien erstellt.
Das wars auch eigentlich schon für die Startseite. Wer will kann natürlich noch formatieren, was ich allerdings für sinnlos halte.
Weiter geht es mit dem Formular, mit dessen Hilfe wir das Bild auswählen, das hochgeladen werden soll, die Rahmenart bestimmen, sowie den Schriftzug und seine Eigenschaften festlegen.
Fangen wir also wieder mit dem HTML-Grundgerüst an:
Code:
Jetzt ist es an der Zeit das Formular anzufangen. Da es sich um ein spezielles Formular handelt, weil hier Dateien hochgeladen werden, müssen wir eine spezielle Eigenschaft festlegen.
Code:
Das enctype="multipart/form-data" ist die Eigenschaft, die es uns erlaubt mit dem Formular Dateien hochzuladen.
Weiterhin legen wir auch den Namen des Folgescripts fest (addpic_script.php).
Und es ist darauf zu achten, dass das Formular zwischen die beiden body-Tags geschrieben wird.
Weiter geht es mit einer Tabelle (DIVs würde auch gehen), in der die Eingebefelder des Formulars vorhanden sind.
Angefangen wird mit dem Dateifeld:
Code:
Das Eingabefeld mit dem Namen „img_file“ ist, wie man unschwer erkennen kann vom Typ „file“. Das heißt, dass man mit diesem Feld automatisch den Öffnen-Dialog aufrufen kann.
Die weiteren Felder sind alles Standardfelder, weshalb ich die eben zusammenfassen möchte:
Code:
Das Script dürfe soweit eigentlich nicht schwer zu verstehen sein.
Wer bis hierhin nicht folgen kann, sollte lieber erst mal weniger schwere Tutorials über HTML durchgehen.
Achtung!
Die Fonts, die man oben in die „Select“-Box geschrieben hat (hier: Arial, Times New Roman und Verdana) muss man in das Verzeichniss des Folgescriptes (hier: newpic_script.php) kopieren, damit das Script später funktioniert.
Hier sollte man vielleicht mal eine Pause einlegen, und sein bisheriges Ergebnis begutachten.
Denn wie mache sicher schon ahnen, ist der zweite Teil des Tutorials hiermit auch erledigt. Was jetzt folgt ist endlich der PHP-Teil des Tutorials, in dem Thumbnails gebildet werden, der Rahmen gelegt und der Schriftzug generiert wird. Was jetzt folgt ist nämlich der eigentliche Teil des Tutorials.
Wie eben schon erwähnt erstellen wir jetzt unser Script zum Upload und zur Manipulation des Bildes.
Ab hier wird vorrausgesetzt, dass eine MySQL-Datenbank vorhanden ist.
In diese tragen wir nämlich eine Tabelle ein, in die wir nachher die wichtigen Daten schreiben und wieder auslesen können.
Code:
Das ist das Script, um die Tabelle zu erzeugen, die wir brauchen. Die 4 Spalten enthalten alle nötigen Informationen. Eine kurze Erklärung:
pic_id ist die Identifikationsnummer des Datensatzes. Die ID wird automatisch erstellt und inkrementiert sich selber.
pic_dat ist das Feld für den Dateinamen mit einer maximalen Länge von 50 Zeichen
pic_date speichert den Timestamp zur Zeit des Uploads
pic_klicks enthält die Anzahl der Klicks, die auf das Bild getätigt wurden
Dies dürfte eigentlich soweit zur Erklärung der Tabelle reichen.
Fangen wir also (endlich) mit dem eigentlichem Script an. ;)
Zuerst erstellen wir ein neues Dokument und speichern dieses unter addpic_script.php ab. Fangen wir damit an, zu unserer Datenbank eine Verbindung herzustellen:
Code:
Damit speichern wir alle relevanten Daten in Variablen, und benutzen diese, um zur entsprechenden Datenbank eine Verbindung herzustellen.
Die Variablen müssen mit eigenen Daten gefüllt werden!
Weiter geht es mit der Bildüberprüfung. Hier gibt es mit Sicherheit eine Menge an Möglichkeiten, wobei ich die folgende bevorzuge.
Code:
Hier haben wir alle für uns relevanten Daten in Variablen gespeichert. Da der eigentliche Upload nicht per PHP geschieht, sondern schon über das eigentliche HTML-Formular geschehen ist, wurde eine temporäre Datei erzeugt, die nach dem Beenden des Scriptes automatisch wieder gelöscht wird. Weiterhin speichern wir den wirklichen Namen, den Dateityp und die Größe in Variablen. Anschließend werden Dateityp und Größe überprüft. Falls das Bild kein GIF oder JPG ist, bzw. die Dateigröße 5MB überschreitet wird eine entsprechende Fehlermeldung in ein Array geschrieben.
Wir machen wie folgt weiter:
Code:
Diese Abfrage prüft, ob kein Fehler aufgetreten ist, und kopiert das Bild nun an den gewünschten Pfad. Sollte dabei ein Fehler auftreten, wird dieser in das Array geschrieben. Mehr wird bis hierhin eigentlich gar nicht gemacht.
Das heißt, dass der eigentliche Upload nun volzogen ist, und wir mit der Manipulation des Bildes und der Speicherung in die Datenbank fortfahren können.
Dafür speichern wir das Bild erstmal in die Datenbank ab, was ebenfalls recht schnell geschieht.
Code:
Hier wird genau wie vorher überprüft, ob mittlerweile ein Fehler aufgetreten ist, und wenn nicht wird versucht die entsprechenden Werte in die Tabelle zu speichern. Auch hier wird ein eventueller Fehler in das Fehler-Array geschrieben.
Kommen wir nun zum spannendstem Teil des Tutorials. Dem Manipulieren des Bildes mithilfe der GD-Library.
Achtung!
Die GD-Library ist nicht standardmäßiger Bestandteil von PHP, und muss eventuell hinzuinstalliert werden.
Schaut euch hierzu die PHP-Info an!
Als erstes erzeugen wir ein ganz normales Thumbnail des Bildes. Hier sollte man sich entscheiden, ob man die Breite oder die Höhe als festes Verhältnissmaß für das Thumbnail haben möchte. Ich beschreibe die Vorgehensweise hier an Hand der Breite des Bildes.
Code:
Hier wird das Bild (falls es vom Typ „Gif“ ist geöffnet. Der Befehl imagecreatefromgif() erstellt ein neues Bild, das aus einem vorhandenem Gif-Bild geladen wird. In unserem Fall ist der Dateiname noch in der Variable $name gespeichert.
Code:
Das Selbe muss man natürlich für den Fall machen, dass das Bild ein JPEG ist. Da beide Bilder verschiedene Eigenschaften haben, wird auch in PHP zwischen den Bildtypen unterschieden.
Zur Verständniss: Das Bild ist jetzt praktisch in der Variable $picture gespeichert. Das sollte man nicht wörtlich nehmen, aber so kann man es sich vorstellen.
Machen wir weiter im Text! Nachdem wir das Bild geladen haben, müssen wir die Breite und die Höhe bestimmen, sowie die neuen Maße des Bildes.
Da ich die Breite hier als maßgebend bestimmt habe, können wir eine feste Thumbnailbreite von beispielsweise 100px festlegen.
Code:
Die Funktion getimagesize() füllt ein Array mit 4 Elementen:
[0] = Bildbreite
[1] = Bildhöhe
[2] = Bildtyp (1=GIF, 2=JPG, 3=PNG, 4=SWF)
[3] = HTML-Ausgabe der Breite und Höhe (recht uninteressant)
$new_width stellt die festgelegte Breite fest. Die Formel für $new_height berechnet die korrekte Höhe des Thumbnails laut der Verhältnissformel x / y = x² / y²
Jetzt, wenn wir die Maße des Orignalbilds und die des Thumbnails haben, ist es kein Problem mehr, das Thumbnail zu bilden.
Code:
Hier sind einige neue Funktionen vertreten.
imagecreatetruecolor() erstellt ein neues Bild mit den Größen, die als Parameter angegeben sind (Breite x Höhe)
imagecopyresized() kopiert ein vorhandenes Bild mit veränderter Größe in ein Anderes. Als Parameter werden zuerst das Zielbild, dann das Quellbild angegeben. Darauf folgen: Ziel-X-Koordinate, Ziel-Y-Koordinate, Quell-X-Koordinate, Quell-Y-Koordinate, Zielbreite, Zielhöhe, Quellhöhe und Quellbreite.
Damit wäre das Thumbnail schon in einer Variable ($thumbnail) vorhanden, so dass man dieses jetzt nur noch abspeichern muss.
Code:
Der ausschlaggebende Befehl hier ist natürlich imagejpeg(). Das Bild, das als erster Parameter ($thumbnail) genannt ist, wird in die darauffolgende Datei gespeichert. Man hat auch noch die Möglichkeit, die Qualität des Thumbnails anzugeben, falls man ein bisschen Platz sparen will. ;)
Wenn man das Script jetzt ausführt und ein Bild hochlädt, kann man im Verzeichniss schon das Thumbnail in der Größe 100 x Y² finden.
Weiter geht es jetzt mit dem Rahmen, der um das Bild gezeichnet werden kann.
Code:
Zuerst wird hier mit imagecolorallocate() ein Zahlenwert aus den RGB-Angaben in den Parametern der Funktion gebildet, da PHP eigene Farbcodes verwendet.
Dann wird überprüft, ob die Option img_border_top im Formular angeklickt wurde. Weiterhin wird die Randgröße in Prozent (10) angegeben, und daraus die Randhöhe errechnet (einfacher Dreisatz). Zum Schluss wird dann ein Rechteck auf das Bild gezeichnet.
Die Parameter des Befehls imagerectangle():
$picture -> Die Variable mit dem Bild
0, 0 -> X und Y Koordinaten der oberen, linken Ecke
$orig_width, $border_height -> X und Y Koordinaten des unteren, rechten Ecke
$color -> Die Farbe des Rechteckes
Jetzt muss man diese Operation viermal je nach Rahmenart anwenden. Wie das aussieht, ist im folgendem Codeabschnitt gezeigt.
Code:
Hier werden nach dem Schema des ersten Rahmen die weiteren drei Rahmen hinzugefügt, falls diese ausgewählt wurden.
Jetzt speichern wir das Bild noch, und schon haben wir beim Upload automatisch einen Rahmen gezeichnet.
Code:
Diesen befehl haben wir ja schon beim Thumbnail kennengelernt, weshalb ich mal von einer Erklärung absehe. :D
Wir haben jetzt alles erstellt, bis auf den Titel, den wir noch auf das Bild malen wollen.Fangen wir zuerst mit der Überprüfung der einzelnen Werte an:
Code:
Hier werden einfach die ganzen ausgewählten Werte aus dem Formular, die die Formatierung der Schrift betreffen in Variablen gespeichert.
Code:
Wie man unschwer erkennen kann, ist der Mittelpunkt hier der Befehl imagettftext(). Diese Funktion „malt“ den Schriftzug auf das Bild. Die Parameter der Funktion sind eigentlich selbsterklärend, ich möchte diese aber trotzdem nochmal nennen:
$picture -> Das Bild, auf das der Schriftzug geschrieben werden soll.
$text_size -> Die Schriftgröße
0 -> Der Winkel, in dem die Schrift stehen soll
$text_X, $text_Y -> Position des Schiftzuges
$color -> Schriftfarbe
$text_font -> Schrifttyp des Schriftzugs ;)
$text_title -> Die Zeichenkette, die auf das Bild gepinselt werden soll.
Achtung!
Die Y-Koordinate sollte immer ein bisschen tiefer gewählt werden, da der Schriftzug sonst über den oberen Rand hinausragen könnte.
Nachdem das Bild nun gespeichert wurde, sind wir mit dem Script eigentlich fertig. Und trotzdem sollten wir das Script noch wie folgt abschließen:
Code:
Hiermit werden die gesammelten Fehlermeldungen ausgegeben werden (auch wenn es immer nur ein oder zwei auf einmal gibt, da wir vor jedem Absatz überprüfen, ob ein Fehler aufgetreten ist.
Damit wären wir mit dem dritten Teil fertig. Jetzt haben wir das komplette Upload- und Manipulationsscript fertig. Jedes Bild, das wir jetzt hochladen wird als Datei mit Rahmen und Schriftzug gespeichert. Weiterhin wird ein Thumbnail angelegt.
Hinweis
Je nachdem, wie man die ganzen If-Blöcke sortiert, kann man auch einen Rahmen auf das Bild legen, bevor ein Thumbnail erzeugt wird, um den Rahmen auch auf dem Thumbnail zu sehen. Gleiches funktioniert natürlich auch mit dem Schriftzug
Jetzt, wo wir den Upload hinter uns haben, kann es an die eigentliche Galerieseite gehen.
Das Script ist im gegensatz zum vorherigem Teil recht einfach gehalten, und benötigt nicht so viel Erklärung.
An dieser Stelle möchte ich aber nochmal darauf hinweisen, dass man verstehen sollte, wie man mit PHP MySQL-Tabellen ausliest und ausgibt.
Dafür erstellen wir erst mal eine neue Datei, die wir als showgalerie.php speichern.
Code:
So beginnt unser Script. Die Variable $pics_per_row stellt wie der Name schon sagt die Anzahl der Bilder pro Reihe ein. Alles Andere dürfte aus den vorherigen Erklärungen hervorgehen bzw. werden als schon bekannt vorrausgestzt.
Weiter geht es dann mit dem Auslesen der Datensätze aus der Tabelle und der Ausgabe der einzelnen Bilder.
Code:
Um hier bei der Ausgabe der Bilder die Zeile zu wechseln, wird ein Zähler ($cnt) benutzt, der bis drei hochgezählt wird. Sobald der Zähler den Wert drei erreicht, wird die aktuelle Tabellenzeile beendet und eine neue angefangen. Selbstverständlich muss der Zähler wieder auf Null gesetzt werden.
Wer das Script jetzt ausprobiert wird jedes bisher eingetragene Bild in der Vorschau sehen!
Achtung!
Wenn man die Bilder im Verzeichniss nach dem Rumprobieren wieder gelöscht hat, sind diese immer noch in der Tabelle vorhanden, was zu Fehldarstellungen führen kann.
Zum Schluss schreiben wir uns noch ein einfaches Script, um die Bilder in ihrer vollen Pracht genießen zu können. Sprich: Bei einem Klick auf ein Thumbnail soll sich das (manipulierte) Originalbild öffnen, und die Klicks in der Tabelle hochgezählt werden.
Code:
Hier werden zuerst die benötigten Daten in eine Variable geladen, die Klicks um eins erhöht und wieder in die Tabelle gespeichert. Anschließend wird das Bild ausgegeben. Diese Datei wird als showpic.php gespeichert.
Wer alles richtig gemacht hat, hat jetzt eine komplette Galerie mit Uploadscript und einigen praktischen Gimmiks.
Ich hoffe, dass das Tutorial halbwegs verständlich war.
Mit freundlichen Grüßen Dac-XP! ;)
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
Hier erkläre ich, wie man eine komplette Galerie in HTML, PHP und MySQL programmiert. Ich setzte bei diesem Tutorial vorraus, dass allgemeine Kenntnisse in allen vier Gebieten vorhanden sind. Natürlich könnte man einfach die Scripte kopieren, und nach Wünschen verändern und einsetzten. Damit würde dieses Tutorial aber sicher seinen Zweck verfehlen.
Hier zunächst die Einteilung des Tutorials:
1.) Indexseite -> Über diese Seite kann man alle Funktionen erreichen.
2.) Bild hochladen (Formular) -> Eingabemaske für die Bildeinstellungen.
3.) Bild hochladen (Script) -> Eigentlichen Hochladevorgang und Bildmanipulation (Schritzug, Rahmen, Thumbnail).
4.) Galerie -> Auflistung aller Bilder (Thumbnails) in einer Galerie.
5.) Detailansicht -> Großansicht eines angeklickten Bildes.
Es wurden jetzt viele kleine Funktionen, die das Tutorial komplettieren sollen nicht genannt. So wird zum Beispiel noch ein Klickcounter eingerichtet.
Was den Rahmen dieses ohnehin schon sehr großen Tutorials sprengen würde, wäre eine komplette Bilderverwaltung, mit deren Hilfe man zum Beispiel die Bilder wieder löschen könnte, oder einen Kommentar zu den Bildern geben könnte.
Aber genug um den heißen Brei herum geredet! Schließlich wollen wir ja auch was lernen.
1.) Die Indexseite
Die Indexseite ist eher eine Bequemlichkeit, als ein wirkliches Lernobjekt. Die machen wir nur dafür, damit wir nicht immer die URL eingeben müssen. Dazu gibt es eigentlich auch nicht viel zu erklären.
Code:
<html>
<head>
<title>
Das unglaubliche Galerie-Tutorial | by Dac-XP.de
</title>
</head>
<body>
<div align="center">
<a href="showgalerie.php">Galerie zeigen</a><br>
<a href="addpic.php">Bild hinzufügen</a>
</div>
</body>
</html>
<head>
<title>
Das unglaubliche Galerie-Tutorial | by Dac-XP.de
</title>
</head>
<body>
<div align="center">
<a href="showgalerie.php">Galerie zeigen</a><br>
<a href="addpic.php">Bild hinzufügen</a>
</div>
</body>
</html>
Hier werden halt nur zwei zentrierte Textlinks auf die wichtigsten Dateien erstellt.
Das wars auch eigentlich schon für die Startseite. Wer will kann natürlich noch formatieren, was ich allerdings für sinnlos halte.
Das Formular zum Bildupload
Weiter geht es mit dem Formular, mit dessen Hilfe wir das Bild auswählen, das hochgeladen werden soll, die Rahmenart bestimmen, sowie den Schriftzug und seine Eigenschaften festlegen.
Fangen wir also wieder mit dem HTML-Grundgerüst an:
Code:
<html>
<head>
<title>
Das unglaubliche Galerie-Tutorial | by Dac-XP.de
</title>
</head>
<body>
</body>
</html>
<head>
<title>
Das unglaubliche Galerie-Tutorial | by Dac-XP.de
</title>
</head>
<body>
</body>
</html>
Jetzt ist es an der Zeit das Formular anzufangen. Da es sich um ein spezielles Formular handelt, weil hier Dateien hochgeladen werden, müssen wir eine spezielle Eigenschaft festlegen.
Code:
<form enctype="multipart/form-data" action="addpic_script.php" method="post">
</form>
</form>
Das enctype="multipart/form-data" ist die Eigenschaft, die es uns erlaubt mit dem Formular Dateien hochzuladen.
Weiterhin legen wir auch den Namen des Folgescripts fest (addpic_script.php).
Und es ist darauf zu achten, dass das Formular zwischen die beiden body-Tags geschrieben wird.
Weiter geht es mit einer Tabelle (DIVs würde auch gehen), in der die Eingebefelder des Formulars vorhanden sind.
Angefangen wird mit dem Dateifeld:
Code:
<table align="center">
<tr>
<td align="right">
Datei:
</td>
<td>
<input type="file" name="img_file">
</td>
</tr>
<tr>
<td align="right">
Datei:
</td>
<td>
<input type="file" name="img_file">
</td>
</tr>
Das Eingabefeld mit dem Namen „img_file“ ist, wie man unschwer erkennen kann vom Typ „file“. Das heißt, dass man mit diesem Feld automatisch den Öffnen-Dialog aufrufen kann.
Die weiteren Felder sind alles Standardfelder, weshalb ich die eben zusammenfassen möchte:
Code:
<tr>
<td align="right">
Schriftzug (Titel):
</td>
<td>
<input type="text" name="img_title" size="37" maxlength="50">
</td>
</tr>
<tr>
<td align="right">
Schriftart:
</td>
<td>
<select name="img_title_font">
<option value="arial.ttf">Arial</option>
<option value="times.ttf">Times New Roman</option>
<option value="verdana.ttf">Verdana</option>
</select>
</td>
</tr>
<tr>
<td align="right">
Schriftgröße:
</td>
<td>
<input type="text" name="img_title_size" size="4" maxlength="3" value="20">
</td>
</tr>
<tr>
<td align="right">
Farbe:
</td>
<td>
<select name="img_title_color">
<option value="1">Schwarz</option>
<option value="2">Weiß</option>
<option value="3">Blau</option>
<option value="4">Gelb</option>
<option value="5">Grün</option>
</select>
</td>
</tr>
<tr>
<td align="right">
Schriftposition (x/y):
</td>
<td>
<input type="text" name="img_title_x" size="5" maxlength="5" value="0"> /
<input type="text" name="img_title_x" size="5" maxlength="5" value="0">
</td>
</tr>
<tr>
<td align="right" valign="top">
Rahmenart:
</td>
<td>
<input type="checkbox" name="img_border_top" value="1"> Oben <br>
<input type="checkbox" name="img_border_bottom" value="1"> Unten <br>
<input type="checkbox" name="img_border_left" value="1"> Links <br>
<input type="checkbox" name="img_border_right" value="1"> Rechts
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Hochladen">
</td>
</tr>
</table>
<td align="right">
Schriftzug (Titel):
</td>
<td>
<input type="text" name="img_title" size="37" maxlength="50">
</td>
</tr>
<tr>
<td align="right">
Schriftart:
</td>
<td>
<select name="img_title_font">
<option value="arial.ttf">Arial</option>
<option value="times.ttf">Times New Roman</option>
<option value="verdana.ttf">Verdana</option>
</select>
</td>
</tr>
<tr>
<td align="right">
Schriftgröße:
</td>
<td>
<input type="text" name="img_title_size" size="4" maxlength="3" value="20">
</td>
</tr>
<tr>
<td align="right">
Farbe:
</td>
<td>
<select name="img_title_color">
<option value="1">Schwarz</option>
<option value="2">Weiß</option>
<option value="3">Blau</option>
<option value="4">Gelb</option>
<option value="5">Grün</option>
</select>
</td>
</tr>
<tr>
<td align="right">
Schriftposition (x/y):
</td>
<td>
<input type="text" name="img_title_x" size="5" maxlength="5" value="0"> /
<input type="text" name="img_title_x" size="5" maxlength="5" value="0">
</td>
</tr>
<tr>
<td align="right" valign="top">
Rahmenart:
</td>
<td>
<input type="checkbox" name="img_border_top" value="1"> Oben <br>
<input type="checkbox" name="img_border_bottom" value="1"> Unten <br>
<input type="checkbox" name="img_border_left" value="1"> Links <br>
<input type="checkbox" name="img_border_right" value="1"> Rechts
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Hochladen">
</td>
</tr>
</table>
Das Script dürfe soweit eigentlich nicht schwer zu verstehen sein.
Wer bis hierhin nicht folgen kann, sollte lieber erst mal weniger schwere Tutorials über HTML durchgehen.
Achtung!
Die Fonts, die man oben in die „Select“-Box geschrieben hat (hier: Arial, Times New Roman und Verdana) muss man in das Verzeichniss des Folgescriptes (hier: newpic_script.php) kopieren, damit das Script später funktioniert.
Hier sollte man vielleicht mal eine Pause einlegen, und sein bisheriges Ergebnis begutachten.
Denn wie mache sicher schon ahnen, ist der zweite Teil des Tutorials hiermit auch erledigt. Was jetzt folgt ist endlich der PHP-Teil des Tutorials, in dem Thumbnails gebildet werden, der Rahmen gelegt und der Schriftzug generiert wird. Was jetzt folgt ist nämlich der eigentliche Teil des Tutorials.
3.) Upload und Manipulation des Bildes
Wie eben schon erwähnt erstellen wir jetzt unser Script zum Upload und zur Manipulation des Bildes.
Ab hier wird vorrausgesetzt, dass eine MySQL-Datenbank vorhanden ist.
In diese tragen wir nämlich eine Tabelle ein, in die wir nachher die wichtigen Daten schreiben und wieder auslesen können.
Code:
CREATE TABLE `gal_pics` (
`pic_id` int(11) NOT NULL,
`pic_dat` varchar(50) NOT NULL,
`pic_date` int(11) NOT NULL,
`pic_klicks` int(11) NOT NULL,
PRIMARY KEY (`pic_id`)
) TYPE=MyISAM AUTO_INCREMENT=1 ;
`pic_id` int(11) NOT NULL,
`pic_dat` varchar(50) NOT NULL,
`pic_date` int(11) NOT NULL,
`pic_klicks` int(11) NOT NULL,
PRIMARY KEY (`pic_id`)
) TYPE=MyISAM AUTO_INCREMENT=1 ;
Das ist das Script, um die Tabelle zu erzeugen, die wir brauchen. Die 4 Spalten enthalten alle nötigen Informationen. Eine kurze Erklärung:
pic_id ist die Identifikationsnummer des Datensatzes. Die ID wird automatisch erstellt und inkrementiert sich selber.
pic_dat ist das Feld für den Dateinamen mit einer maximalen Länge von 50 Zeichen
pic_date speichert den Timestamp zur Zeit des Uploads
pic_klicks enthält die Anzahl der Klicks, die auf das Bild getätigt wurden
Dies dürfte eigentlich soweit zur Erklärung der Tabelle reichen.
Fangen wir also (endlich) mit dem eigentlichem Script an. ;)
Zuerst erstellen wir ein neues Dokument und speichern dieses unter addpic_script.php ab. Fangen wir damit an, zu unserer Datenbank eine Verbindung herzustellen:
Code:
<?php
$server = "localhost";
$database = "galerietut";
$user = "root";
$password = "";
mysql_connect("$server", "$user", "$password");
mysql_select_db("$database");
$server = "localhost";
$database = "galerietut";
$user = "root";
$password = "";
mysql_connect("$server", "$user", "$password");
mysql_select_db("$database");
Damit speichern wir alle relevanten Daten in Variablen, und benutzen diese, um zur entsprechenden Datenbank eine Verbindung herzustellen.
Die Variablen müssen mit eigenen Daten gefüllt werden!
Weiter geht es mit der Bildüberprüfung. Hier gibt es mit Sicherheit eine Menge an Möglichkeiten, wobei ich die folgende bevorzuge.
Code:
$tempname = $_FILES['img_file']['tmp_name'];
$name = $_FILES['img_file']['name'];
$type = $_FILES['img_file']['type'];
$size = $_FILES['img_file']['size'];
if($type != "image/gif" && $type != "image/jpeg")
{
$err[] = "Unzulässiger Datentyp!";
}
if($size > "5000000")
{
$err[] = "Maximale Dateigröße überschritten!";
}
$name = $_FILES['img_file']['name'];
$type = $_FILES['img_file']['type'];
$size = $_FILES['img_file']['size'];
if($type != "image/gif" && $type != "image/jpeg")
{
$err[] = "Unzulässiger Datentyp!";
}
if($size > "5000000")
{
$err[] = "Maximale Dateigröße überschritten!";
}
Hier haben wir alle für uns relevanten Daten in Variablen gespeichert. Da der eigentliche Upload nicht per PHP geschieht, sondern schon über das eigentliche HTML-Formular geschehen ist, wurde eine temporäre Datei erzeugt, die nach dem Beenden des Scriptes automatisch wieder gelöscht wird. Weiterhin speichern wir den wirklichen Namen, den Dateityp und die Größe in Variablen. Anschließend werden Dateityp und Größe überprüft. Falls das Bild kein GIF oder JPG ist, bzw. die Dateigröße 5MB überschreitet wird eine entsprechende Fehlermeldung in ein Array geschrieben.
Wir machen wie folgt weiter:
Code:
if(empty($err))
{
//Datei kopieren
if(@copy("$tempname", "$name"))
echo "$name erfolgreich hochgeladen.";
else
$err[] = "Datei konnte nicht hochgeladen werden!";
}
{
//Datei kopieren
if(@copy("$tempname", "$name"))
echo "$name erfolgreich hochgeladen.";
else
$err[] = "Datei konnte nicht hochgeladen werden!";
}
Diese Abfrage prüft, ob kein Fehler aufgetreten ist, und kopiert das Bild nun an den gewünschten Pfad. Sollte dabei ein Fehler auftreten, wird dieser in das Array geschrieben. Mehr wird bis hierhin eigentlich gar nicht gemacht.
Das heißt, dass der eigentliche Upload nun volzogen ist, und wir mit der Manipulation des Bildes und der Speicherung in die Datenbank fortfahren können.
Dafür speichern wir das Bild erstmal in die Datenbank ab, was ebenfalls recht schnell geschieht.
Code:
if(empty($err))
{
$timestamp = time();
$query = "INSERT INTO gal_pics (pic_dat, pic_date) VALUES ('$name', '$timestamp')";
if(@mysql_query($query))
echo "$name in die Datenbank eingetragen";
else
$err[] = "Bild konnte nicht in die Datenbank eingetragen werden!";
}
{
$timestamp = time();
$query = "INSERT INTO gal_pics (pic_dat, pic_date) VALUES ('$name', '$timestamp')";
if(@mysql_query($query))
echo "$name in die Datenbank eingetragen";
else
$err[] = "Bild konnte nicht in die Datenbank eingetragen werden!";
}
Hier wird genau wie vorher überprüft, ob mittlerweile ein Fehler aufgetreten ist, und wenn nicht wird versucht die entsprechenden Werte in die Tabelle zu speichern. Auch hier wird ein eventueller Fehler in das Fehler-Array geschrieben.
Kommen wir nun zum spannendstem Teil des Tutorials. Dem Manipulieren des Bildes mithilfe der GD-Library.
Achtung!
Die GD-Library ist nicht standardmäßiger Bestandteil von PHP, und muss eventuell hinzuinstalliert werden.
Schaut euch hierzu die PHP-Info an!
Als erstes erzeugen wir ein ganz normales Thumbnail des Bildes. Hier sollte man sich entscheiden, ob man die Breite oder die Höhe als festes Verhältnissmaß für das Thumbnail haben möchte. Ich beschreibe die Vorgehensweise hier an Hand der Breite des Bildes.
Code:
if(empty($err))
{
if($type == "image/gif")
{
$picture = @imagecreatefromgif($name);
if($picture)
echo "$name erfolgreich geladen";
else
$err[] = "Bild konnte nicht geöffnet werden!";
}
{
if($type == "image/gif")
{
$picture = @imagecreatefromgif($name);
if($picture)
echo "$name erfolgreich geladen";
else
$err[] = "Bild konnte nicht geöffnet werden!";
}
Hier wird das Bild (falls es vom Typ „Gif“ ist geöffnet. Der Befehl imagecreatefromgif() erstellt ein neues Bild, das aus einem vorhandenem Gif-Bild geladen wird. In unserem Fall ist der Dateiname noch in der Variable $name gespeichert.
Code:
if(empty($err))
{
if($type == "image/jpeg")
{
$picture = @imagecreatefromjpeg($name);
if($picture)
echo "$name erfolgreich geladen";
else
$err[] = "Bild konnte nicht geöffnet werden!";
}
{
if($type == "image/jpeg")
{
$picture = @imagecreatefromjpeg($name);
if($picture)
echo "$name erfolgreich geladen";
else
$err[] = "Bild konnte nicht geöffnet werden!";
}
Das Selbe muss man natürlich für den Fall machen, dass das Bild ein JPEG ist. Da beide Bilder verschiedene Eigenschaften haben, wird auch in PHP zwischen den Bildtypen unterschieden.
Zur Verständniss: Das Bild ist jetzt praktisch in der Variable $picture gespeichert. Das sollte man nicht wörtlich nehmen, aber so kann man es sich vorstellen.
Machen wir weiter im Text! Nachdem wir das Bild geladen haben, müssen wir die Breite und die Höhe bestimmen, sowie die neuen Maße des Bildes.
Da ich die Breite hier als maßgebend bestimmt habe, können wir eine feste Thumbnailbreite von beispielsweise 100px festlegen.
Code:
if(empty($err))
{
$imgdatas = getimagesize($name);
if($imgdatas)
{
$orig_width = $imgdatas[0];
$orig_height = $imgdatas[1];
$new_width = 100;
$new_height = $new_width / ($orig_width / $orig_height);
echo "Größen erfolgreich ermittelt<br>";
}
else
$err[] = "Größen konnten nicht ermittelt werden!";
}
{
$imgdatas = getimagesize($name);
if($imgdatas)
{
$orig_width = $imgdatas[0];
$orig_height = $imgdatas[1];
$new_width = 100;
$new_height = $new_width / ($orig_width / $orig_height);
echo "Größen erfolgreich ermittelt<br>";
}
else
$err[] = "Größen konnten nicht ermittelt werden!";
}
Die Funktion getimagesize() füllt ein Array mit 4 Elementen:
[0] = Bildbreite
[1] = Bildhöhe
[2] = Bildtyp (1=GIF, 2=JPG, 3=PNG, 4=SWF)
[3] = HTML-Ausgabe der Breite und Höhe (recht uninteressant)
$new_width stellt die festgelegte Breite fest. Die Formel für $new_height berechnet die korrekte Höhe des Thumbnails laut der Verhältnissformel x / y = x² / y²
Jetzt, wenn wir die Maße des Orignalbilds und die des Thumbnails haben, ist es kein Problem mehr, das Thumbnail zu bilden.
Code:
if(empty($err))
{
$thumbnail = @imagecreatetruecolor($new_width, $enw_height);
$cpy = imagecopyresized($thumbnail, $picture, 0, 0, 0, 0, $new_width, $new_height, $orig_width, $orig_height);
if($thumbnail && $cpy)
echo "Thumbail von $name konnte erstellt werden.<br>";
else
$err[] = "Thumbnail des Bildes konnte nicht erstellt werden!";
}
{
$thumbnail = @imagecreatetruecolor($new_width, $enw_height);
$cpy = imagecopyresized($thumbnail, $picture, 0, 0, 0, 0, $new_width, $new_height, $orig_width, $orig_height);
if($thumbnail && $cpy)
echo "Thumbail von $name konnte erstellt werden.<br>";
else
$err[] = "Thumbnail des Bildes konnte nicht erstellt werden!";
}
Hier sind einige neue Funktionen vertreten.
imagecreatetruecolor() erstellt ein neues Bild mit den Größen, die als Parameter angegeben sind (Breite x Höhe)
imagecopyresized() kopiert ein vorhandenes Bild mit veränderter Größe in ein Anderes. Als Parameter werden zuerst das Zielbild, dann das Quellbild angegeben. Darauf folgen: Ziel-X-Koordinate, Ziel-Y-Koordinate, Quell-X-Koordinate, Quell-Y-Koordinate, Zielbreite, Zielhöhe, Quellhöhe und Quellbreite.
Damit wäre das Thumbnail schon in einer Variable ($thumbnail) vorhanden, so dass man dieses jetzt nur noch abspeichern muss.
Code:
if(empty($err))
{
$quality = 100;
$sav = @imagejpeg($thumbnail, "thumb_$name", $quality);
if($sav)
echo "thumb_$name wurde gespeichert<br>";
else
$err[] = "Thumbnail konnte nicht gespeichert werden!";
}
{
$quality = 100;
$sav = @imagejpeg($thumbnail, "thumb_$name", $quality);
if($sav)
echo "thumb_$name wurde gespeichert<br>";
else
$err[] = "Thumbnail konnte nicht gespeichert werden!";
}
Der ausschlaggebende Befehl hier ist natürlich imagejpeg(). Das Bild, das als erster Parameter ($thumbnail) genannt ist, wird in die darauffolgende Datei gespeichert. Man hat auch noch die Möglichkeit, die Qualität des Thumbnails anzugeben, falls man ein bisschen Platz sparen will. ;)
Wenn man das Script jetzt ausführt und ein Bild hochlädt, kann man im Verzeichniss schon das Thumbnail in der Größe 100 x Y² finden.
Weiter geht es jetzt mit dem Rahmen, der um das Bild gezeichnet werden kann.
Code:
if(empty($err))
{
$color = imagecolorallocate($picture, 0, 0, 0);
if($_POST['img_border_top'])
{
$bd_perc = 10;
$border_height = ($orig_height * $bd_perc) / 100;
$rect = @imagefilledrectangle($picture, 0, 0, $orig_width, $border_height, $color);
}
{
$color = imagecolorallocate($picture, 0, 0, 0);
if($_POST['img_border_top'])
{
$bd_perc = 10;
$border_height = ($orig_height * $bd_perc) / 100;
$rect = @imagefilledrectangle($picture, 0, 0, $orig_width, $border_height, $color);
}
Zuerst wird hier mit imagecolorallocate() ein Zahlenwert aus den RGB-Angaben in den Parametern der Funktion gebildet, da PHP eigene Farbcodes verwendet.
Dann wird überprüft, ob die Option img_border_top im Formular angeklickt wurde. Weiterhin wird die Randgröße in Prozent (10) angegeben, und daraus die Randhöhe errechnet (einfacher Dreisatz). Zum Schluss wird dann ein Rechteck auf das Bild gezeichnet.
Die Parameter des Befehls imagerectangle():
$picture -> Die Variable mit dem Bild
0, 0 -> X und Y Koordinaten der oberen, linken Ecke
$orig_width, $border_height -> X und Y Koordinaten des unteren, rechten Ecke
$color -> Die Farbe des Rechteckes
Jetzt muss man diese Operation viermal je nach Rahmenart anwenden. Wie das aussieht, ist im folgendem Codeabschnitt gezeigt.
Code:
if($_POST['img_border_bottom'])
{
$bd_perc = 10;
$border_height = ($orig_height * $bd_perc) / 100;
$rect = @imagefilledrectangle($picture, 0, $orig_height-$border_height, $orig_width, $orig_height, $color);
}
if($_POST['img_border_left'])
{
$bd_perc = 5;
$border_width = ($orig_width * $bd_perc) / 100;
$rect = @imagefilledrectangle($picture, 0, 0, $border_width, $orig_height, $color);
}
if($_POST['img_border_right'])
{
$bd_perc = 5;
$border_width = ($orig_width * $bd_perc) / 100;
$rect = @imagefilledrectangle($picture, $orig_width-$border_width, 0, $orig_width, $orig_height, $color);
}
{
$bd_perc = 10;
$border_height = ($orig_height * $bd_perc) / 100;
$rect = @imagefilledrectangle($picture, 0, $orig_height-$border_height, $orig_width, $orig_height, $color);
}
if($_POST['img_border_left'])
{
$bd_perc = 5;
$border_width = ($orig_width * $bd_perc) / 100;
$rect = @imagefilledrectangle($picture, 0, 0, $border_width, $orig_height, $color);
}
if($_POST['img_border_right'])
{
$bd_perc = 5;
$border_width = ($orig_width * $bd_perc) / 100;
$rect = @imagefilledrectangle($picture, $orig_width-$border_width, 0, $orig_width, $orig_height, $color);
}
Hier werden nach dem Schema des ersten Rahmen die weiteren drei Rahmen hinzugefügt, falls diese ausgewählt wurden.
Jetzt speichern wir das Bild noch, und schon haben wir beim Upload automatisch einen Rahmen gezeichnet.
Code:
$quality = 100;
$sav_bd = @imagejpeg($picture, $name, $quality);
if($rect && $sav_bd)
echo "$name wurde mit Rahmen gespeichert.<br>";
else
$err[] = "Rahmen konnte nicht erzeugt werden!";
}
$sav_bd = @imagejpeg($picture, $name, $quality);
if($rect && $sav_bd)
echo "$name wurde mit Rahmen gespeichert.<br>";
else
$err[] = "Rahmen konnte nicht erzeugt werden!";
}
Diesen befehl haben wir ja schon beim Thumbnail kennengelernt, weshalb ich mal von einer Erklärung absehe. :D
Wir haben jetzt alles erstellt, bis auf den Titel, den wir noch auf das Bild malen wollen.Fangen wir zuerst mit der Überprüfung der einzelnen Werte an:
Code:
if(empty($err))
{
if($_POST['img_title'])
{
$text_title = $_POST['img_title'];
$text_size = $_POST['img_title_size'];
$text_font = $_POST['img_title_font'];
$text_color = $_POST['img_title_color'];
$text_X = $_POST['img_title_x'];
$text_Y = $_POST['img_title_y'];
if($text_color == "1")
$color = imagecolorallocate($picture, 0, 0, 0);
if($text_color == "2")
$color = imagecolorallocate($picture, 255, 255, 255);
if($text_color == "3")
$color = imagecolorallocate($picture, 0, 0, 255);
if($text_color == "4")
$color = imagecolorallocate($picture, 255, 255, 0);
if($text_color == "5")
$color = imagecolorallocate($picture, 0, 255, 0);
{
if($_POST['img_title'])
{
$text_title = $_POST['img_title'];
$text_size = $_POST['img_title_size'];
$text_font = $_POST['img_title_font'];
$text_color = $_POST['img_title_color'];
$text_X = $_POST['img_title_x'];
$text_Y = $_POST['img_title_y'];
if($text_color == "1")
$color = imagecolorallocate($picture, 0, 0, 0);
if($text_color == "2")
$color = imagecolorallocate($picture, 255, 255, 255);
if($text_color == "3")
$color = imagecolorallocate($picture, 0, 0, 255);
if($text_color == "4")
$color = imagecolorallocate($picture, 255, 255, 0);
if($text_color == "5")
$color = imagecolorallocate($picture, 0, 255, 0);
Hier werden einfach die ganzen ausgewählten Werte aus dem Formular, die die Formatierung der Schrift betreffen in Variablen gespeichert.
Code:
imagettftext($picture, $text_size, 0, $text_X, $text_Y, $color, $text_font, $text_title);
$quality = 100;
$sav_bd = @imagejpeg($picture, $name, $quality);
$quality = 100;
$sav_bd = @imagejpeg($picture, $name, $quality);
Wie man unschwer erkennen kann, ist der Mittelpunkt hier der Befehl imagettftext(). Diese Funktion „malt“ den Schriftzug auf das Bild. Die Parameter der Funktion sind eigentlich selbsterklärend, ich möchte diese aber trotzdem nochmal nennen:
$picture -> Das Bild, auf das der Schriftzug geschrieben werden soll.
$text_size -> Die Schriftgröße
0 -> Der Winkel, in dem die Schrift stehen soll
$text_X, $text_Y -> Position des Schiftzuges
$color -> Schriftfarbe
$text_font -> Schrifttyp des Schriftzugs ;)
$text_title -> Die Zeichenkette, die auf das Bild gepinselt werden soll.
Achtung!
Die Y-Koordinate sollte immer ein bisschen tiefer gewählt werden, da der Schriftzug sonst über den oberen Rand hinausragen könnte.
Nachdem das Bild nun gespeichert wurde, sind wir mit dem Script eigentlich fertig. Und trotzdem sollten wir das Script noch wie folgt abschließen:
Code:
if(!empty($err))
{
foreach($err as $error)
{
echo "$error<br>";
}
}
mysql_close();
?>
{
foreach($err as $error)
{
echo "$error<br>";
}
}
mysql_close();
?>
Hiermit werden die gesammelten Fehlermeldungen ausgegeben werden (auch wenn es immer nur ein oder zwei auf einmal gibt, da wir vor jedem Absatz überprüfen, ob ein Fehler aufgetreten ist.
Damit wären wir mit dem dritten Teil fertig. Jetzt haben wir das komplette Upload- und Manipulationsscript fertig. Jedes Bild, das wir jetzt hochladen wird als Datei mit Rahmen und Schriftzug gespeichert. Weiterhin wird ein Thumbnail angelegt.
Hinweis
Je nachdem, wie man die ganzen If-Blöcke sortiert, kann man auch einen Rahmen auf das Bild legen, bevor ein Thumbnail erzeugt wird, um den Rahmen auch auf dem Thumbnail zu sehen. Gleiches funktioniert natürlich auch mit dem Schriftzug
4.) Galerieseite
Jetzt, wo wir den Upload hinter uns haben, kann es an die eigentliche Galerieseite gehen.
Das Script ist im gegensatz zum vorherigem Teil recht einfach gehalten, und benötigt nicht so viel Erklärung.
An dieser Stelle möchte ich aber nochmal darauf hinweisen, dass man verstehen sollte, wie man mit PHP MySQL-Tabellen ausliest und ausgibt.
Dafür erstellen wir erst mal eine neue Datei, die wir als showgalerie.php speichern.
Code:
<html>
<head>
<title>
Das unglaubliche Galerie-Tutorial | by Dac-XP.de
</title>
</head>
<body>
<div align="center">
<?php
$server = "localhost";
$database = "galerietut";
$user = "web6";
$password = "bfc37g";
mysql_connect("$server", "$user", "$password");
mysql_select_db("$database");
$pics_per_row = 3;
<head>
<title>
Das unglaubliche Galerie-Tutorial | by Dac-XP.de
</title>
</head>
<body>
<div align="center">
<?php
$server = "localhost";
$database = "galerietut";
$user = "web6";
$password = "bfc37g";
mysql_connect("$server", "$user", "$password");
mysql_select_db("$database");
$pics_per_row = 3;
So beginnt unser Script. Die Variable $pics_per_row stellt wie der Name schon sagt die Anzahl der Bilder pro Reihe ein. Alles Andere dürfte aus den vorherigen Erklärungen hervorgehen bzw. werden als schon bekannt vorrausgestzt.
Weiter geht es dann mit dem Auslesen der Datensätze aus der Tabelle und der Ausgabe der einzelnen Bilder.
Code:
$query = "SELECT pic_id, pic_dat FROM gal_pics ORDER BY pic_date";
$result = mysql_query($query);
echo "<table><tr>";
$cnt = 0;
while($obj = mysql_fetch_object($result))
{
echo "<td>
<a href='showpic.php?pic_id=$obj->pic_id'><img src='thumb_$obj->pic_dat' border='0'></a>
</td>";
$cnt++;
if($cnt >= $pics_per_row)
{
echo "</tr><tr>";
$cnt = 0;
}
}
echo "</tr></table>";
?>
</div>
</body>
</html>
$result = mysql_query($query);
echo "<table><tr>";
$cnt = 0;
while($obj = mysql_fetch_object($result))
{
echo "<td>
<a href='showpic.php?pic_id=$obj->pic_id'><img src='thumb_$obj->pic_dat' border='0'></a>
</td>";
$cnt++;
if($cnt >= $pics_per_row)
{
echo "</tr><tr>";
$cnt = 0;
}
}
echo "</tr></table>";
?>
</div>
</body>
</html>
Um hier bei der Ausgabe der Bilder die Zeile zu wechseln, wird ein Zähler ($cnt) benutzt, der bis drei hochgezählt wird. Sobald der Zähler den Wert drei erreicht, wird die aktuelle Tabellenzeile beendet und eine neue angefangen. Selbstverständlich muss der Zähler wieder auf Null gesetzt werden.
Wer das Script jetzt ausprobiert wird jedes bisher eingetragene Bild in der Vorschau sehen!
Achtung!
Wenn man die Bilder im Verzeichniss nach dem Rumprobieren wieder gelöscht hat, sind diese immer noch in der Tabelle vorhanden, was zu Fehldarstellungen führen kann.
5.) Bild komplett anzeigen
Zum Schluss schreiben wir uns noch ein einfaches Script, um die Bilder in ihrer vollen Pracht genießen zu können. Sprich: Bei einem Klick auf ein Thumbnail soll sich das (manipulierte) Originalbild öffnen, und die Klicks in der Tabelle hochgezählt werden.
Code:
<html>
<head>
<title>
Das unglaubliche Galerie-Tutorial | by Dac-XP.de
</title>
</head>
<body>
<div align="center">
<?php
$server = "localhost";
$database = "galerietut";
$user = "web6";
$password = "bfc37g";
mysql_connect("$server", "$user", "$password");
mysql_select_db("$database");
if($_GET['pic_id'])
$pic_id = $_GET['pic_id'];
else
$err[] = "Keine ID übergeben";
if(empty($err))
{
$query = "SELECT pic_dat, pic_klicks FROM gal_pics WHERE pic_id = '$pic_id'";
$result = mysql_query($query);
$obj = mysql_fetch_object($result);
$new_klicks = $obj->pic_klicks + 1;
$query = "UPDATE gal_pics SET pic_klicks = '$new_klicks' WHERE pic_id = '$pic_id'";
$result = mysql_query($query);
echo "<img src='$obj->pic_dat'>";
}
?>
</div>
</body>
</html>
<head>
<title>
Das unglaubliche Galerie-Tutorial | by Dac-XP.de
</title>
</head>
<body>
<div align="center">
<?php
$server = "localhost";
$database = "galerietut";
$user = "web6";
$password = "bfc37g";
mysql_connect("$server", "$user", "$password");
mysql_select_db("$database");
if($_GET['pic_id'])
$pic_id = $_GET['pic_id'];
else
$err[] = "Keine ID übergeben";
if(empty($err))
{
$query = "SELECT pic_dat, pic_klicks FROM gal_pics WHERE pic_id = '$pic_id'";
$result = mysql_query($query);
$obj = mysql_fetch_object($result);
$new_klicks = $obj->pic_klicks + 1;
$query = "UPDATE gal_pics SET pic_klicks = '$new_klicks' WHERE pic_id = '$pic_id'";
$result = mysql_query($query);
echo "<img src='$obj->pic_dat'>";
}
?>
</div>
</body>
</html>
Hier werden zuerst die benötigten Daten in eine Variable geladen, die Klicks um eins erhöht und wieder in die Tabelle gespeichert. Anschließend wird das Bild ausgegeben. Diese Datei wird als showpic.php gespeichert.
Wer alles richtig gemacht hat, hat jetzt eine komplette Galerie mit Uploadscript und einigen praktischen Gimmiks.
Ich hoffe, dass das Tutorial halbwegs verständlich war.
Mit freundlichen Grüßen Dac-XP! ;)
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
