Webdesign mit PHP und HTML: Code-Snippets und Praxistipps für das Webdesign mit PHP, JavaScript, HTML und CSS

Von Max Bold

Bei der Programmierung von Web-Applikationen ist der Trend in Richtung PHP unvermindert vorhanden. Durch die wachsende Zahl von mobilen Endgeräten mit denen auf das Web zugegriffen wird, hat Java jedoch mächtig aufgeholt. Wenn es aber um klassische dynamische Webanwendungen geht, hat PHP nach wie vor die Na- se weit vorn. Die professionellen Marktbeobachter warten in regelmäßiger Abfolge mit neuen Erfolgszahlen auf.
"Webdesign mit PHP und HTML" soll Ihnen auf 50 Seiten die besten Praxistipps und Codesnippets zur Verfügung stellen - jeweils anschaulich an Beispielen präsentiert. Ob Twitter-API oder die besten CSS-Tipps - "Webdesign mit PHP und HTML" bietet Ihnen einen umfassenden Einblick in die Web-Entwicklung.

• Sprache: Deutsch
• Herausgeber: epubli
• Erscheinungsdatum: 13. Apr. 2012
• ISBN: 9783844218954

Buchvorschau

EDITORIAL

Webdesign mit PHP und HTML

Bei der Programmierung von Web-Applikationen ist der Trend in Richtung PHP unvermindert vorhanden. Durch die wachsende Zahl von mobilen Endgeräten mit denen auf das Web zugegriffen wird, hat Java jedoch mächtig aufgeholt. Wenn es aber um klassische dynamische Webanwendungen geht, hat PHP nach wie vor die Nase weit vorn. Nicht nur, dass die professionellen Marktbeobachter in regelmäßiger Abfolge mit neuen Erfolgszahlen aufwarten können. Die Erfolgsstory von PHP lässt sich auch an anderen Gradmessern festmachen. So wächst die Zahl der auf der Basis von PHP erstellten Web-Applikationen - natürlich überwiegend auf Open-Source-Basis - kontinuierlich. 

»Bei der Programmierung von WebApplikationen hat PHP die Nase vorn«

Und nicht nur das: Auch der qualitative Fortschritt ist unverkennbar. Die Open-Source-Produkte auf PHP-Basis werden immer professioneller, und die früher typischen Code-Ansammlungen ohne Dokumentation und Installationsroutinen sind signifikant weniger geworden. Heute präsentiert sich eine Forums- oder Weblog-Applikation in erfreulich vielen Fällen als ein komplettes Package mit umfangreicher Dokumentation, selbsterklärender Setup-Routine und Lokalisierungen in den gängigsten Sprachen.

LINK ZUM THEMA

Wie kein anderes Open-Source-Projekt hat PHP einen Riesenfundus an Skripts und Applikationen für Webanwendungen hervorgebracht.

Wer die virtuelle Schatztruhe voll mit Programmen, Applikationen und Routinen nutzen will, steht jedoch vor einem anderen Problem, nämlich ohne viel Aufwand das zu finden, was er gerade benötigt. Einige Sites im Web haben es sich zur Aufgabe gestellt, diese Grauzone etwas auszuleuchten und den Interessenten den riesigen PHP-Fundus via Suchmaschinen und Webkatalogen zu erschließen. Eine Topadresse ist hier ohne Zweifel Hotscripts.com (www. hotscripts.com).

IMPRESSUM

Imprint

Webdesign mit PHP und HTML Max Bold

published by: epubli GmbH, Berlin, www.epubli.de

Copyright: © 2012 Max Bold

ISBN: 978-3-8442-1895-4

INHALT

Bildbearbeitung mit PHP und der GD-Library

Die GD-Library bietet Funktionen zur Bildbearbeitung auf dem Server

PDF-Dokumente online erstellen und ausgeben

Bei dynamischen Webseiten ist häufig die On-the-Fly-Ausgabe von PDF-Daten gefragt

Bildergalerien mit Lightbox

Mit dem Lightbox-Effekt lassen sich Bilder mit interessanten Effekten auf Webseiten präsentieren

E-Mail-Newsletter mit PHP verwalten

Der PHPList-Manager ist ein ideales Instrument für Administratoren und Entwickler für die Massenabfertigung von Newslettern

Fluent Interfaces

Ein sogenanntes Fluent Interface kann den Code übersichtlicher gestalten

PHP Twitter Class

Der Internet-Dienst Twitter stellt eine Schnittstelle für Fremdanwendungen zur Verfügung

Bildergalerie Minishowcase

Mit Minishowcase lässt sich schnell eine Bildergalerie mit AJAX-Features installieren

Menüs mit PHP und der GD-Library

Eine grafische Navigation für eine Website mit Hilfe von PHP und der GD-Library realisieren

CMS mit SQLite

PhpSQLiteCMS ist ein kompaktes CMS, das mit der SQLite-Datenbank zusammenarbeitet

Datenbankprogrammierung mit SQLite

Die Datenbank SQLite bietet hervorragende Möglichkeiten für schnelle PHP-Applikationen

XML-Daten mit CSS und PHP formatieren

XML-Daten lassen sich auch mit Hilfe von CSS und PHP für das Web aufbereiten

Formularverarbeitung mit PHP

Über Formulare lassen sich Informationen vom Benutzer erfassen, an Skripts übergeben und dort weiterverarbeiten

Zeitgesteuertes Einblenden von Inhalten

Mit wenigen Zeilen Code kann man zeitgesteuert oder per Zufall Elemente und Inhalte auf Webseiten platzieren

Excel-Tabellen mit PHP bearbeiten

Wie man mit ein paar Zeilen PHP-Code aus Excel-Tabellen ansprechende HTML-Ausgaben generieren kann

CSS-Tipps für die Gestaltung von Tabellen

Für die Darstellung von formatierten Daten auf Webseiten eignen sich Tabellen und Listen sehr gut

Zusatzinformationen per Tooltipps

Mit Hilfe einer Javascript-Bibliothek zaubern Sie informative Tooltipps auf Webseiten

Navigation mit Hilfe von Bildern

Imagemaps sind Navigationshilfen, die über verweissensitive Bereiche auf einem Bild realisiert werden

Bildbearbeitung mit PHP und der GD-Library

Manipulation

Die GD-Library bietet Funktionen zur Bildbearbeitung und für Grafikoperationen auf dem Server. Der Workshop zeigt an Hand einiger Beispiele, wie Sie das Potenzial dieser Bibliothek nutzen. Von Max Bold

Auf einen Blick

» Der Workshop richtet sich an alle Entwickler, die PHP und die GD-Library zur Bildbearbeitung auf dem Server einsetzen wollen.

» Er stellt die neuesten Funktionen zur Bildmanipulation, die PHP 5 mit integrierter GDLi-brary bietet, an konkreten Beispielen vor.

Das brauchen Sie

» Webspace oder Server mit PHP-5-Unterstützung

Neben vielen anderen Fähigkeiten verfügt PHP auch über durchaus beeindruckende Grafikfähigkeiten. Die Grundlage dafür bietet die GD-Library, die ab PHP 4.3 zum Standardumfang der Skriptsprache gehört. In der Version 5 der Skriptsprache PHP sind noch ein paar Funktionen dazugekommen, mit denen sich jetzt auch Manipulationen an vorhandenen Bitmap-Dateien durchführen lassen.

Bei der GD-Library handelt es sich um eine in C geschriebene Bibliothek, die diverse Funktionen zur Bildbearbeitung und Grafikmanipulation auf dem Server zur Verfügung stellt. So kann man etwa Daten jederzeit aktuell in Diagrammen darstellen, Bilder direkt auf dem Webserver manipulieren oder beispielsweise auch grafische Menüs dynamisch generieren und damit eine Navigation für eine Website generieren.

Die Liste der GD-Funktionen ist lang und im PHPMa-nual ausführlich dokumentiert (de2.php.net/image). An einigen konkreten Beispielen soll nachfolgend der Variantenreichtum der GD-Library insbesondere bei der Bildmanipulation demonstriert werden.Am Anfang ist es sicher ganz sinnvoll, zu ermitteln, mit welcher Version der Bibliothek der genutzte Webspace oder Server ausgestattet ist. Man kann dies zum einen in der php.ini nachlesen oder mit der Funktion gd_info gezielt abfragen. Zum Beispiel mit folgendem Mini-Skript:

var_dump(gd_info());

?>

Es liefert nicht nur die Versionsnummer der GD-Library zurück, sondern auch, welche Formate und Fonts unterstützt werden.

»Basis-Operationen«

Zu den Basisfunktionen der GD-Library gehören die klassischen Dateioperationen wie Öffnen und Speichern. Für jedes unterstützte Bildformat wird dazu eine passende Funktion bereitgestellt. Um ein existierendes Bild zu öffnen, wird die zum Format passende Funktion verwendet. Für JPEG-Bilder beispielsweise imageCreateFromJpeg. Folgende weitere Funktionen für bekannte Formate stehen zur Verfügung: imageCreateFromGif (GIF-Grafiken), image-CreateFromPNG (PNG-Grafiken) sowie imageCreate-FromBMP (Bitmap- Grafiken).

Der Dateiname der Grafik wird den Funktionen als Parameter übergeben.Alle Funktionen geben ein Handle auf die Grafik zurück, das für alle weiteren Operationen notwendig ist. Nachdem die Bearbeitung abgeschlossen ist, sollten Sie die Grafiken erst einmal speichern. Dabei können Sie die Formate GIF, PNG und JPEG verwenden. imagePNG speichert die Grafik als PNG, imageJPEG als JPEG und imageGIF als GIF. Diesen drei Funktionen müssen Sie zuerst das Grafik-Handle übergeben und wahlweise einen Dateinamen, ansonsten wird die Grafik direkt an den Browser ausgegeben. Bei imageJPEG können Sie als dritten Parameter auch noch die Kompressionsrate als Zahl angeben. Nach dem Speichern geben Sie das Grafik-Handle mit imageDestroy wieder frei. Ein konkretes Beispiel kann so aussehen:

$bild = imagecreatefromjpeg('test.jpg');

imagepng($bild,'neu.png');

imagedestroy($bild);

?>

neu.png border=0>

Damit erzeugen Sie aus dem Bild test.jpgeine neue Datei neu.png und geben diese auf einer HTML-Seite aus. Diese Format-Umwandlung stellt eine einfache Form einer Bildmanipulation dar, die aber die grundsätzliche Vorgehensweise gut illustriert.

Bei den weiteren Beispielen muss man unterscheiden zwischen Funktionen, die auch in älteren GD-Versionen zur Verfügung stehen, und den fortgeschrittenen Varianten, die mit Filtern arbeiten. Diese stehen nur in der PHP 5-Version mit integrierter GD-Library zur Verfügung.

Helligkeitsregelung mit Hilfe von GD-Funktionen.

»Thumbnails erstellen«

Eine Art Standardszenario für den Einsatz von GD ist die Veränderung der Bildgröße. Damit können Sie zum Beispiel aus einem Bilderfundus, den Sie per FTP auf den Server geladen haben, sehr schnell eine Thumbnail-Ga-lerie erzeugen. Realisiert wird dies mit der Funktion imageCopyResized. Mit dem in der vorgestellten Basisfunktion genutzten Bildmaterial sieht die Thumbnail-Generierung so aus:

$file = 'test.jpg';

$dstfn = 'test_thumb.jpg';

// Bildgröße ermitteln

$groeße = getimagesize($file);

$breite = $groeße[0];

$hoehe = $groeße[1];

// Bild laden

$bild = imagecreatefromjpeg($file);

// Thumbnail erstellen

$neue_breite = 50;

$neue_hoehe = intval($hoehe *

$neue_breite / $breite);

$thumbnail =

imagecreatetruecolor($neue_breite,

$neue_hoehe);

imageCopyResized($thumbnail,$bild,0,

0, 0, 0, $neue_breite, $neue_hoehe,

$breite, $hoehe);

imageJpeg($thumbnail,$dstfn);

?>

test.jpg border=0>

test_thumb.jpg

border=0>

Zuerst werden die Dimensionen des Quellbildes ermittelt und dann wird es geladen. Anschließend wird aus der vorgegebenen Breite des Thumbnails dessen proportional richtige Höhe berechnet. Rufen Sie dann die Funktion imageCreateTrueColor auf und übergeben Sie ihr als Parameter die Größe der neuen Grafik in der Reihenfolge Breite und Höhe.

Anschließend können Sie das Bild mit imageCopyResized kopieren, in die gewünschte Größe skalieren und in die Zielgrafik einfügen. In folgender Reihenfolge müssen die Parameter dabei übergeben werden:Handle Zielgrafik, Handle Quellgrafik, Zielpunkt-X, Zielpunkt-Y, Quellpunkt-X, Quell-punkt-Y, Ziel-Breite, Ziel-Höhe, Quell-Breite, Quell-Höhe).Abschließend speichern Sie das Thumbnail und geben Quell- und Thumbnail-Bild im Browser aus. Erweitern können Sie dieses Basis-Skript in vielfältiger Weise. Für eine Bildergalerie interessant ist vor allem die Massenumwandlung vorhandener Quellbilder in Thumbnails. Dazu kann man zum Beispiel die Dateinamen aus einem Verzeichnis, in dem sich die Bilder befinden, in ein Array auslesen (opendir und readdir). In einer Foreach-Schleife wird anschließend für jede ermittelte Bilddatei analog zu dem vorgestellten Beispiel ein Thumbnail generiert.

Eine andere Erweiterung könnte zum Beispiel mit einem Upload-Formular verknüpft werden. User könnten auf diesem Weg eigene Bilder in eine Galerie hochladen, und aus dem Upload würde automatisch ein Thumbnail generiert werden.

»Echte Bildmanipulation«

Mit PHP 5 wurde die GD-Biblio-thek wie erwähnt um echte Funktionen zur Bildmanipulation erweitert. Negative und Graustufenbilder, bisher mit einer aufwendigen Rechnerei verbunden, lassen sich jetzt mit einem einzigen Funktionsaufruf realisieren. Damit jedoch nicht genug: Die neue Funktion imagefilter bietet eine ganze Reihe weiterer Manipulationsvarianten.

Als