Webdesign mit PHP und HTML E-Book

Max Bold

• Herausgeber: epubli
• Kategorie: Fachliteratur
• Sprache: Deutsch
• Veröffentlichungsjahr: 2012

Seitenzahl: 142

Beschreibung

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.

Leseprobe

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

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:

<?php 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:

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:

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 Parameter müssen die zu manipulierende Ressource, der Filter selbst und bis zu drei weitere Parameter übergeben werden:

Mit IMG_FILTER_BRIGHTNESS können Sie die Helligkeit eines Bildes einstellen. Der dritte Parameter ist eine Zahl zwischen -255 (dunkel) und 255 (hell). Der Wert 0 verändert das Bild nicht.

Der Filter IMG_FILTER_CONTRAST regelt den Kontrast eines Bildes. Der Wert des dritten Parameters kann hier wieder zwischen -255 und 255 variieren.

Der Filter IMG_FILTER_GRAYSCALE wandelt ein Quellbild ohne weitere Parameter in ein Graustufenbild um.

Mit IMG_FILTER_NEGATE können Sie ebenfalls ohne weitere Parameter eine Negativ eines Bildes generieren.

Der Filter IMG_FILTER_COLORIZE erzeugt eine Farbfläche, wobei Sie mit den drei folgenden Parametern die RGB-Werte der Farbe festlegen, mit der das Bild koloriert werden soll.

Ein Reliefbild können Sie mit dem Filter IMG_FILTER_EDGEDETECT ohne weitere Parameter erstellen.

Mit Hilfe des Filters IMG_FILTER_EMBOSS können Sie einem Bild einen 3D-Effekt verleihen.

Weiche Schatten erzeugen Zeichenprogramme mit Hilfe des Gaußschen Weichzeichners. Das GD-Äquivalent ist der Filter IMG_FILTER_GAUS-SIAN_BLUR.

Der Filter IMG_FILTER_SMOOTH glättet ein Bild. Den Grad können Sie mit dem dritten Parameter festlegen.

Der IMG_FILTER_MEAN_REMOVAL versieht Ihr Bild mit Effekten, wie sie typischerweise bei Zeichnungen auftreten.

Die Anwendung dieser Filter ist sehr einfach. Das folgende Beispiel holt unser Testbild und erhöht die Helligkeit um den Wert 100:

Nach diesem Schema können die anderen Filter, die GD bietet, ebenfalls eingesetzt werden. Allerdings ist eine solche Batch-Bearbeitung auf dem Server nicht gerade typisch für die Manipulation von Bildern. So richtig ihre Stärke ausspielen können diese Filter nur, wenn noch ein Schuss Interaktivität dazukommt.

Die Generierung von Thumbnails ist eine Standardaufgabe der GDLib.

»Grafik interaktiv«

Über ein HTML-Formular können zum Beispiel die Werte für die diversen Parameter interaktiv eingegeben werden. Diese Werte werden an ein PHP-Skript übergeben, das die gewünschten Manipulationen durchführt und das Ergebnis zusammen mit dem Original im Browser wieder ausgibt.

PDF-Dokumente online erstellen und ausgeben

PDF via PHP

Gerade bei dynamischen Webseiten ist häufig die On-the-Fly-Ausgabe von PDF-Daten gefragt. Es gibt eine ganze Reihe von PHP-Klassen, die das erledigen. Von Max Bold

Auf einen Blick » Der Workshop zeigt verschiedene Methoden, mit denen Sie PDF-Dokumente innerhalb Ihrer Webanwendung generieren und ausgeben können. » Sie erfahren, wie Sie mit Hilfe von PHP-Bibliotheken oder -Klassen PDF-Dokumente dynamisch generieren.

Alle gängigen Office-Applikationen sind in der Lage, PDF-Output zu generieren, vorausgesetzt die entsprechenden Treiber und Tools sind installiert. Damit lassen sich schnell Dokumente in einem Format ausgeben, das dank Adobe Reader auf vielen Plattformen ohne Probleme gelesen werden kann. Anders sieht es jedoch bei dynamischen Inhalten von Webseiten aus, die aus Datenbanken erst zum Zeitpunkt des Abrufs generiert werden. Ist hier eine Ausgabe als PDF gewünscht, muss die Konvertierung auf dem Server erfolgen.

Auch dafür gibt es diverse Werkzeuge, mit denen sich ein solcher Workflow realisieren lässt. Am einfachsten gestaltet sich die Konvertierung, wenn das verwendete Content-Management-System eine Exportfunktion für PDF integriert hat. Das ist bei zahlreichen Applikationen Standard, oder die entsprechende Funktion kann mit Extensions nachgerüstet werden. Einige CMS wie zum Beispiel Joomla oder Contenido arbeiten hier mit der PHP-Klasse TCPDF (www.tcpdf.org), die diese Arbeit innerhalb des Content-Management-Systems erledigt.

Solche PHP-Klassen kann ein PHP-Programmierer auch für individuelle Lösungen heranziehen und damit relativ komfortabel und mit wenig Codieraufwand den Output von PDF-Dokumenten aus einer Webanwendung heraus realisieren.

»Die PHP-Variante«

Der Platzhirsch auf diesem Sektor ist die Bibliothek PDFlib (www.pdflib.com), die alle notwendigen API-Funktionen für die PDF-Erstellung zur Verfügung stellt. Es handelt sich dabei um ein kommerzielles Produkt, für das bei einer kommerziellen Nutzung Lizenzgebühren fällig werden. Es gibt jedoch auch noch mit PDFlib Lite eine Open-Source-Va-riante, die einen kostenlosen Einsatz unter bestimmten Bedingungen erlaubt, allerdings nur eine Teilmenge der von PDFlib angebotenen Funktionen unterstützt. Seit der Version 6 bietet PDFlib zusätzlich zum funktionsorientierten API für PHP 4 ein objektorientiertes API für PHP 5.

Mit der PHP-Klasse EZPDF lassen sich auch ansprechende Tabellen generieren.

»Freie Alternativen«

Wem die PDFlib nicht zur Verfügung steht, der kann als Alternative zu einem in PHP implementierten Ersatz greifen. Dabei handelt es sich in der Regel um eine Klasse, die dem Webentwickler Funktionen ähnlich denen von PDFlib zur Verfügung stellt. Neben funktionalen Einschränkungen muss man bei dieser Variante eventuell auch mit einer reduzierten Performance leben.Während es sich nämlich bei PDFlib um eine echte, in C geschriebene PHP-Erweiterung handelt, muss bei einer PDF-Klasse der Interpreter die ganze Arbeit leisten.

Ein Beispiel für eine solche Klasse ist EZPDF, die unter sourceforge.net/projects/pdf-php zum kostenlosen Download zur Verfügung steht.

Installation und Nutzung sind denkbar einfach: Entpacken Sie das Archiv und legen Sie es im gewünschten Server-Verzeichnis ab. Die entscheidenden Dateien sind class, ezpdf.php und class.pdf.php.Wichtig ist auch noch das Verzeichnis mit den Schriften. Zur ersten Orientierung sieht man sich am besten das Skript readme.php an. Es generiert aus einer Textdatei das Handbuch zu der Klasse - natürlich als PDF. Ein einfaches Beispiel, bei dem eine Textdatei als PDF ausgegeben werden soll, kann so aussehen:

<?php include ('class.ezpdf.php'); $str=file_get_contents("lamp.txt") $pdf =& new Cezpdf(); $pdf->selectFont ('./fonts/Helvetica.afm'); $pdf->ezText($str,50); $pdf->ezStream(); ?>

Neben dem kompakten Code erfreut EZPDF den Entwickler noch mit ein paar netten Gimmicks: Mit ezTable kann man zum Beispiel aus den Werten eines Arrays schnell eine PDF-Tabelle erzeugen. Dabei können die Array-Werte zum Beispiel aus eine CSV-Datei oder einer Datenbankabfrage stammen. Ein konkretes Beispiel sieht etwa folgendermaßen aus:

Man kann Bilder mit ezImage einbinden oder mit Zeichenwerkzeugen operieren (line, ellipse, polygon, rectangle). Ja sogar Bezier-Kurven lassen sich zeichnen (curve).

»PDFs mit FPDF«

Eine weitere Bibliothek zum Erzeugen von PDFs aus einer Webapplikation heraus ist FPDF (www.fpdf.org). Auch hier ist die Installation sehr einfach:Aus dem entpackten Archiv kopieren Sie fpdf.phpund den Ordner fontauf Ihren Webserver Für die Arbeit mit der Bibliothek müssen Sie als Erstes die Klassendatei einbinden und definieren, wo sich die Schriften befinden. Die Ausgabe einer Textdatei kann mit dem folgenden Codefragment realisiert werden:

Zuerst muss die Klassendatei eingebunden werden.

Ein PDF mit einem Bildelement, produziert mit der PHP-Klasse FPDF.

Mit AddPage() wird eine neue Seite in das Dokument eingefügt. Der Text wird mit fgets() zeilenweise eingelesen und mit write() in das PDF eingefügt. Zuvor muss noch eine Schriftart mit SetFont() festgelegt werden. Sie können auf die Schriften im Verzeichnis fontzugreifen.Andere Schriften lassen sich auf Wunsch installieren. Mit SetFontQ können Sie durch zusätzliche Parameter den Schriftschnitt und die Schriftgröße definieren. Die Angabe der Schriftgröße erfolgt in der Maßeinheit Punkt, unabhängig von der für das Dokument festgelegten Maßeinheit.

Standardmäßig wird die zuletzt festgelegte Schriftgröße verwendet, die mit SetFontSize() oder einem vorherigen SetFont()-Aufruf gesetzt wurde. Wir keine Größe angegeben, ist die Schrift automatisch 12 Punkt groß. Der Schriftstil wird den Buchstaben U (Unterstreichung), I (kursiv) oder B (fett) definiert. Mehrere Buchstaben lassen sich auch kombinieren, um zum Beispiel einen kursiven Fettdruck zu realisieren.

»Mehrzeilige Texte«

Für den Einbau der Zeilen in das PDF-Dokument wird die Methode write() verwendet. Sie gibt einen Text ab der aktuellen Position aus. Ist der rechte Seitenrand erreicht oder taucht in dem String ein \n auf, erfolgt ein Zeilenumbruch. Am linken Seitenrand erfolgt die Ausgabe in einer neuen Zeile.

Mehrzeilige Texte lassen sich mit der Methode MultiCell() ausgeben, wobei die Texte auch über mehrere Seiten laufen können. Als Parameter gibt man der Methode die Breite und Höhe einer Zeile, den Text und optional einen Rahmen an.