This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
2-6496.book Page 1 Tuesday, November 19, 2002 3:47 PM
Website Deluxe mit PHP & Co
2-6496.book Page 3 Tuesday, November 19, 2002 3:47 PM
Jochen Naumann
Website Deluxe mit PHP & Co 11 Workshops
Markt+Technik Verlag
2-6496.book Page 4 Tuesday, November 19, 2002 3:47 PM
Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar.
Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Softwarebezeichnungen, die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene Marken oder sollten als solche betrachtet werden. Umwelthinweis: Dieses Buch wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus umweltverträglichem und recyclingfähigem PE-Material.
2-6496.book Page 9 Tuesday, November 19, 2002 3:47 PM
Die CD-ROM zum Buch Die CD-ROM zum Buch Die dem Buch beiliegende CD-ROM enthält ausser PHP, MySQL und Apache das Tool PHPTriad, Texteditoren und alle vorgestellten Skripte.
\software AdvancedPoll Apache
Skript für Umfragen Apache Webserver (Windows)
CounterCaffee Gallery JpGraph
Script für Besucherstatistiken Fotoalbum Script für Diagramme
MySQL PGB Phorm
MySQL-Datenbank (Windows) Script für Gästebuch Formularauswertung
Phorum PHP PHP Triad
Script für Foren PHP Scriptprozessor (Windows) PHP, MySQL und Apache für Windows
2-6496.book Page 10 Tuesday, November 19, 2002 3:47 PM
2-6496.book Page 11 Tuesday, November 19, 2002 3:47 PM
Vorwort Vorwort
Die eigene Homepage íst heutzutage nichts Besonderes mehr. Wenn Ihre Homepage aus dem Einheitsbrei herausstechen soll, müssen Sie schon ein bisschen mehr bieten als die anderen. Dynamische Aspekte sind gefragt, ob nun ein einfacher Seitenzähler, ein Chat oder ein Fotoalbum mit den Bildern Ihres letzten Urlaubs. Aber gerade solche dynamischen Komponenten sind nicht ohne weiteres zu realisieren. Normalerweise müssen Sie profunde Kenntnisse in einer Skriptsprache wie Perl, PHP oder ASP haben. Außerdem wird oft noch eine Datenbankanbindung benötigt, also gesellt sich zu den erforderlichen Kenntnissen noch SQL, die Datenbankabfragesprache, hinzu. Vielleicht gehören Sie zu den Leuten, die sagen: „Das Leben ist zu kurz, um dies alles zu lernen.“ Prima, dann sind Sie eine der möglichen Zielgruppen dieses Buches, denn es werden lediglich HTML-Kenntnisse vorausgesetzt, und selbst die sind nicht absolut notwendig.
erstellt von ciando
Für jeden Workshop in diesem Buch finden Sie auf der CD-ROM ein fertiges Skript, das Sie nur noch installieren und geringfügig anpassen müssen, und schon können Sie loslegen! Zu verdanken haben Sie das der Open-Source-Bewegung, die es sich zum Ziel gemacht hat, gute Software umsonst – ja, Sie haben richtig gelesen: gratis – zur Verfügung zu stellen. Gerade im Bereich Webtechnologien gibt es eine große Vielfalt an frei erhältlicher Software, die aber oftmals einen Haken hat: Die Dokumentation ist nicht so gut, daher ist es für Laien schwierig, diese Software zu benutzen. Dieses Problem möchte ich beheben, indem ich Ihnen in den nächsten 11 Workshops freie Software vorstelle und Sie bei Ihren ersten Schritten mit dieser Software begleite. Ich wünsche Ihnen viel Spaß dabei und steigende Besucherzahlen auf Ihrer Homepage! Jochen Naumann Oktober 2002 [email protected]
2-6496.book Page 12 Tuesday, November 19, 2002 3:47 PM
Über den Autor
Über den Autor Jochen Naumann studierte Informatik an der TU Darmstadt und ist seit vielen Jahren als Trainer, Dozent und Berater im Bereich Webtechnologien unterwegs. Zu seinem Kundenkreis zählen namhafte Unternehmen wie die ESA, Telekom, Siemens, Accenture, ZDF und andere. Neben der Schulungstätigkeit schreibt er Informatik-Lehrhefte für ein Fernlehrinstitut. Seine Freizeit verbringt er am liebsten mit seiner Familie und spielt mit seiner kleinen Tochter Maja. Ab und zu versucht er zu joggen oder zu saunieren. Manchmal klappt es auch. Durch seine positiven Erfahrungen mit OpenSource-Software auch bei größeren Projekten ist er überzeugter Verfechter von „freier“ Software. Der Markt+Technik Verlag gab ihm jetzt Der Autor in seiner Werkstatt die Chance, sein Wissen und seine Überzeugung einem breiten Publikum in Buchform zur Verfügung zu stellen.
Schreiben Sie uns! Autor und Verlag sind immer bemüht Ihnen, unseren Kunden und Lesern die optimale Information zum Thema zu bieten. Scheuen Sie sich deshalb nicht, uns über Fehler und andere Ärgernisse zu informieren. Nur so können wir laufend an der Verbesserung unserer Bücher arbeiten. Aber auch Lob, Erfolgserlebnisse und Ihre Ergebnisse interessieren uns. Schreiben Sie uns unter [email protected]. Ihre Mails werden sofort an den Autor weitergeleitet! Ihr Markt+Technik-Buchlektorat Jürgen Bergmoser [email protected]
12
2-6496.book Page 13 Tuesday, November 19, 2002 3:47 PM
Workshop 1 Der dynamische Dreikampf: PHPTriad PHP, MySQL und Apache – das Gewinnerteam ! Sie benutzen im weiteren Verlauf dieses Buches ein Softwaretrio namens PHPTriad, dessen Mitglieder zu dem Besten zählen, was auf dem Markt erhältlich ist. Nebenbei ist es auch noch völlig kostenlos! Wo ist der Haken, fragen Sie? Es gibt keinen. PHPTriad ist durch und durch empfehlenswert und wird vielfach auch im professionellen Bereich eingesetzt. In diesem ersten Kapitel erfahren Sie mehr über das Gewinnerteam PHPTriad, seine Bestandteile, den Sinn und Zweck, die Installation und den Gebrauch.
1.1 PHPTriad – was ist das? Wenn Sie Webseiten mit dynamischen Inhalten erzeugen wollen, brauchen Sie drei Komponenten: ■ eine Datenbank, in der Inhalte abgelegt sind ■ eine Programmiersprache, die die Inhalte aus der Datenbank liest und in eine HTML-Seite einbaut ■ einen Webserver, der die erzeugte HTML-Seite an einen Browser schickt Für jede dieser Komponenten gibt es eine Vielzahl an Software: Als Webserver können Sie zum Beispiel den IIS von Microsoft einsetzen, als Programmiersprache Java und als Datenbank Oracle.
2-6496.book Page 14 Tuesday, November 19, 2002 3:47 PM
Der dynamische Dreikampf: PHPTriad
Nun existiert aber eine Kombination aus Produkten, die ein eingespieltes und in der Praxis erprobtes Team bilden: ■ die Datenbank MySQL (mehr Infos unter http://www.mysql.org) ■ die Programmiersprache PHP (http://www.php.net)
PROFITIPP
■ der Webserver Apache (http://www.apache.org)
Sie sind nicht auf genau diese Kombination angewiesen. Insbesondere die Art des Webservers ist für die Workshops in diesem Buch unerheblich. Auch die Datenbank könnten sie theoretisch austauschen, allerdings muss dann einiges an den fertigen Programmen auf der CD geändert werden. Unabdingbar ist nur, dass Sie PHP benutzen.
Sie können sich jetzt viel Arbeit machen und jede Software einzeln besorgen und nacheinander installieren. Allerdings ist es recht aufwändig, die Komponenten so zu konfigurieren, dass sie später reibungslos zusammenarbeiten. Doch zum Glück für Sie haben sich schon andere Leute die Mühe gemacht und genau die oben erwähnte Kombination aus Produkten zusammengefasst. Das Ganze nennt sich PHPTriad. Mit PHPTriad müssen Sie nur eine Installationsroutine aufrufen und die einzelnen Komponenten sind auch schon für den gemeinsamen Einsatz vorkonfiguriert. Wie gut, dass es so viele Leute gibt, die aus Idealismus und Spaß an der Sache solche Projekte ermöglichen: PHPTriad ist kostenlos.
PROFITIPP
Wenn Sie mehr über PHPTriad erfahren wollen, besuchen Sie die Homepage unter http://sourceforge.net/projects/phptriad.
14
PHPTriad gibt es nur für Windows. Sollten Sie unter Linux arbeiten, müssen sie die Komponenten einzeln installieren. Die dazu nötige Software ist bei den gängigen Linux-Distributionen wie SuSE enthalten und wird bei der Installation meist auch korrekt konfiguriert. Des weiteren sollte man beachten, dass man mit PHPTriad nicht die neuesten Versionen der darin beinhalteten Programme bekommt und dass PHPTriad noch Beta-Status hat, dass heißt noch nicht ganz ausgereift ist. Alle Skripte in diesem Buch laufen aber unter PHPTriad.
2-6496.book Page 15 Tuesday, November 19, 2002 3:47 PM
Die Installation
1.2 Die Installation Die Installation gestaltet sich sehr einfach, aber leider auch unflexibel. Die gesamte Software wird im Ordner c:\apache installiert, was nicht änderbar ist. Dafür müssen Sie lediglich das Setup-Programm starten und warten, bis die Installation beendet ist – ohne nervige Fragen zwischendurch. So gehen Sie Schritt für Schritt vor, um PHPTriad zu installieren:
1
Legen Sie die zum Buch gehörige CD-ROM ein und wechseln Sie in das Verzeichnis software.
2
Doppelklicken Sie auf die Datei phptriad2-2-1.exe.
3
Es öffnet sich ein Fenster, in dem Sie gebeten werden, die Nutzungsbedingungen zu akzeptieren. Klicken Sie auf I Agree.
4
Die Installation startet nun. Wenn Sie die Schaltfläche Details drücken, können Sie mitverfolgen, was gerade passiert (Abbildung 1.1).
Abbildung 1.1: Installation von PHPTriad
5
Sobald das Setup-Programm alle Schritte ausgeführt hat, klicken Sie auf die Schaltfläche Close. Die Software ist nun fertig installiert und einsatzbereit.
15
2-6496.book Page 16 Tuesday, November 19, 2002 3:47 PM
Der dynamische Dreikampf: PHPTriad
1.3 Achtung, fertig, los! Nachdem die Installation erfolgreich war, brennt es Ihnen sicherlich schon unter den Nägeln, die Software zu testen. Da die Komponenten aufeinander aufbauen, probieren wir sie erst der Reihe nach aus und lassen sie dann alle zusammen eine erste datenbankgestützte Webseite produzieren. Los geht’s.
Go, Apache! Um den Webserver Apache zu benutzen, muss er zunächst gestartet werden. Bei der Installation von PHPTriad wird ein neuer Menüpunkt Programs zum Windows-Startmenü hinzugefügt. Darunter finden Sie den Eintrag PHPTriad und hier schließlich einige Hilfsprogramme zum Bedienen der Software. Zum Starten des Webservers gehen Sie wie folgt vor:
1
Wählen Sie im Startmenü unter Programs/PHPTriad/Apache Console den Eintrag Start Apache (Abbildung 1.2).
Abbildung 1.2: Starten des Webservers
2
Es öffnet sich ein Konsolenfenster, in dem der erfolgreiche Start des Webservers bestätigt wird (Abbildung 1.3). In diesem Fenster werden auch eventuelle Fehler angezeigt, die während des Betriebs von Apache auftreten können.
Abbildung 1.3: Apache-Konsolenfenster
16
2-6496.book Page 17 Tuesday, November 19, 2002 3:47 PM
VORSICHT!
Achtung, fertig, los!
Schließen Sie dieses Fenster nicht direkt, denn dadurch beenden Sie den Webserver auf unsanfte Weise. Wenn Sie Apache wirklich beenden wollen, benutzen Sie dazu den Befehl Stop Apache unter Programs/PHPTriad/Apache Console im Windows-Startmenü.
Laut Apache-Konsolenfenster ist der Webserver jetzt gestartet. Aber Vertrauen ist gut, Kontrolle ist besser! Öffnen Sie zum Testen einen Browser und tippen Sie in die URLLeiste http://localhost. Localhost ist ein Synonym für den eigenen Rechner, Sie verbinden sich also mit Ihrem Computer. Sollte alles gut gehen, sehen Sie eine Begrüßungsmeldung von PHPTriad (Abbildung 1.4).
VORSICHT!
Abbildung 1.4: Testen des Webservers
Stellen Sie sicher, dass nicht der IIS-Webserver von Microsoft oder ein anderer Webserver auf Ihrem System bereits gestartet ist. Dies könnte unter Windows NT oder Windows 2000 Server der Fall sein. Apache würde dann nicht korrekt funktionieren. Sie müssten entweder den zweiten Webserver beenden oder den Webservern unterschiedliche TCP-Ports zuweisen. Dies können Sie unter Windows 2000 erreichen, indem Sie den Interdienste-Manager aufrufen im Startmenü unter Programme-Verwaltung.
17
2-6496.book Page 18 Tuesday, November 19, 2002 3:47 PM
Der dynamische Dreikampf: PHPTriad
Go, PHP! Nachdem wir festgestellt haben, dass die erste Komponente funktioniert, testen wir jetzt die Skriptsprache PHP. Eine Testseite mit PHP-Anweisungen ist in dem komfortablen Paket PHPTriad natürlich auch schon vorhanden, wir müssen sie nur noch mit dem Browser aufrufen. Geben Sie dazu die URL http://localhost/phpinfo.php ein. Sie sollten eine Seite wie in Abbildung 1.5 gezeigt erhalten.
Abbildung 1.5: Testen von PHP
Diese Testseite gibt Ihnen viele Informationen zur PHP-Installation, zum Beispiel, welche Version sie benutzen oder welche Module mitgeliefert wurden.
Go, MySQL! Kommen wir nun zur Datenbank. Auch hier muss wie beim Webserver zunächst der entsprechende Hintergrundprozess gestartet werden: der Datenbankserver. Sie finden dazu im Startmenü unter Programs/PHPTriad/MySQL zwei Einträge: MySQL-D und MySQL-D-NT. ■ MySQL-D benutzen Sie für Windows 95/98/Me. ■ MySQL-D-NT benutzen Sie für Windows NT, Windows 2000 oder XP.
18
2-6496.book Page 19 Tuesday, November 19, 2002 3:47 PM
Achtung, fertig, los!
PROFITIPP
Wenn Sie einen passenden Eintrag ausgewählt haben, erscheint kurz ein Konsolenfenster, das aber gleich wieder verschwindet. Keine Sorge, das ist normal und richtig so. Der Datenbankserver sollte jetzt laufen. Der Hintergrundprozess, den Sie soeben gestartet haben, nennt sich mysqld.exe bzw. mysqld-nt.exe. Sie können überprüfen, ob dieses Programm läuft, indem Sie sich die Prozessliste im Windows Task Manager anschauen (Abbildung 1.6). Dort finden Sie übrigens auch den Prozess für den Webserver mit dem Namen Apache.exe. Wollen Sie ohne einen Neustart Ihres Rechners den Datenbankserver beenden, verwenden Sie dazu im Task Manager die Schaltfläche Prozess beenden.
Abbildung 1.6: MySQL-Hintergrundprozess
Um sich mit einer Datenbank zu unterhalten, wird entweder ein grafisches Tool benutzt, wie Sie es vielleicht von Microsoft Access kennen, oder die Datenbanksprache SQL (Standard Query Language). MySQL ist zwar eine ausgezeichnete Datenbank, hat aber von Haus aus nicht den Benutzungskomfort von Access. Also greifen wir zum Testen zunächst auf SQL zurück. Im nächsten Abschnitt werden Sie dann sehen, wie man MySQL noch einfacher und benutzerfreundlicher bedienen kann.
19
2-6496.book Page 20 Tuesday, November 19, 2002 3:47 PM
Der dynamische Dreikampf: PHPTriad
Zum Testen des Datenbankservers gehen Sie wie folgt vor:
1
Öffnen sie ein Konsolenfenster (im Windows-Startmenü unter Programme/ Zubehör/Eingabeaufforderung ).
2
Geben Sie cd \apache\mysql\bin ein, um in das Verzeichnis zu wechseln, in dem die ausführbaren MySQL-Dateien gespeichert sind.
3
Geben sie mysql ein, um den interaktiven MySQL-Monitor zu starten, mit dessen Hilfe Sie SQL-Befehle an die Datenbank schicken können.
4
Wenn Sie nun die Willkommensmeldung von MySQL (Abbildung 1.7) erscheint, ist alles in Ordnung.
5
Lassen Sie uns zum Test noch einen SQL-Befehl absetzen. Geben Sie show databases ein. Dieser Befehl zeigt die vorhandenen Datenbanknamen.
Abbildung 1.7: Testen von MySQL
6
Geben Sie quit ein, um den SQL-Monitor zu verlassen.
7
Schließen Sie das Konsolenfenster.
Und jetzt alle zusammen ... Jetzt kommt der große Augenblick: Die Triade soll zum ersten Mal gemeinsam agieren. Zum Testen nehmen wir ein webbasiertes Tool, das in PHP geschrieben ist und die benutzerfreundliche Bedienung von MySQL über einen Browser ermöglicht. Dieses Tool mit Namen phpMyAdmin ist Bestandteil von PHPTriad, was erneut die Vielseitigkeit dieses Softwarepakets beweist.
20
2-6496.book Page 21 Tuesday, November 19, 2002 3:47 PM
Achtung, fertig, los!
Im Prinzip ist phpMyAdmin nichts anderes als eine Sammlung von Webseiten mit PHP-Skripten, die sich mit der Datenbank verbinden und diverse SQL-Kommandos ausführen. Sie können phpMyAdmin benutzen, um neue Datenbanktabellen anzulegen, sie mit Inhalt zu füllen und vieles mehr. Genug der Vorrede, geben Sie nun im Browser die URL http://localhost/phpmyadmin/ ein, um auf die Startseite dieses sagenhaften Tools zu kommen. Wenn Sie keine Fehlermeldung bekommen und eine Seite ähnlich der in Abbildung 1.8 angezeigt wird, hat PHPTriad den Test bestanden. Was genau ist dabei passiert? ■ Der Browser hat die URL der Seite, die angezeigt werden soll, dem Webserver übermittelt. ■ Apache hat erkannt, dass es sich nicht um eine normale HTML-Seite, sondern um eine Seite mit PHP-Befehlen handelt. ■ Die PHP-Bestandteile wurden an den PHP-Interpreter gesendet, der die Befehle ausgeführt und eine Verbindung mit MySQL aufgebaut hat. ■ MySQL führt die von PHP übergebenen SQL-Anweisungen aus und liefert die Resultate an PHP zurück. ■ PHP übergibt dem Webserver die fertige Seite. ■ Apache übermittelt schließlich die Seite mit Inhalten aus der Datenbank an den Browser.
Abbildung 1.8: Startseite von phpMyAdmin
21
2-6496.book Page 22 Tuesday, November 19, 2002 3:47 PM
Der dynamische Dreikampf: PHPTriad
1.4 Webspace im Internet Meine Seiten sollen ins Netz! Ihre dynamische Website ist fertig und läuft bei Ihnen zu Hause auch wunderbar. Was ist der nächste Schritt? Die Seiten müssen ins Internet, damit jeder sie bewundern kann. Dazu brauchen Sie so genannten Webspace, Speicherplatz auf einem Rechner im Internet, wo Sie Ihre Daten und Seiten ablegen können. Anbieter von Webspace nennt man auch Hoster.
PROFITIPP
Nun können Sie nicht jeden beliebigen Hoster nehmen, denn Ihre Website benötigt ja PHP und MySQL, die beide auch beim Hoster installiert sein müssen. Zum Glück ist PHP in Kombination mit MySQL aber sehr weit verbreitet in Bezug auf Skriptsprachen und Datenbanken im Internet, daher bieten inzwischen nahezu alle Hoster ein entsprechendes Paket an. Achten Sie auch darauf, dass der Hoster einen Zugang zur Datenbank über das Tool phpMyAdmin anbietet, da dies der komfortabelste Weg ist, MySQL zu bedienen.
Wenn Sie sich über einen großen Provider wie T-Online oder AOL ins Internet einwählen, haben Sie in der Regel zwar Webspace kostenlos zur Verfügung, aber keine PHP/MySQL-Unterstützung. Sie müssen sich also zusätzlichen Webspace besorgen.
Die Angebote für Webspace mit PHP/MySQL-Unterstützung schwanken preislich sehr. In Abbildung 1.9 sehen Sie ein Beispiel des Anbieters hostweb, das Ihnen als Anhaltspunkt für eigene Preisrecherchen dienen soll.
22
2-6496.book Page 23 Tuesday, November 19, 2002 3:47 PM
Webspace im Internet
Abbildung 1.9: Beispielangebot für Webspace mit PHP/MySQL
Inzwischen können Sie PHP/MySQL-Webspace sogar kostenlos bekommen (Abbildung 1.10). Der Anbieter Tripod bietet seit Anfang 2002 auf seinem kostenlosen Webspace auch PHP und MySQL ohne zusätzliche Kosten an. Allerdings bekommen Besucher Ihrer Seiten dann lästige Werbeeinblendungen auf ihren Bildschirm. Wenn Sie das nicht stört und Sie Ihre Seiten nur für private Zwecke einsetzen, könnte Tripod eine Alternative für Sie sein.
Abbildung 1.10: Kostenloser Webspace von Tripod
23
2-6496.book Page 24 Tuesday, November 19, 2002 3:47 PM
Der dynamische Dreikampf: PHPTriad
Um Ihnen eine Starthilfe bei der Suche nach Webspace zu geben, sind nachfolgend ein paar URLs von bekannten Anbietern aufgeführt: ■ http://www.einsundeins.de ■ http://www.schlund.de ■ http://www.strato.de ■ http://www.hostweb.de ■ http://tripod.lycos.de
Wie werden meine Daten übertragen? Wenn Sie einen passenden Hoster gefunden haben, müssen Sie Ihre Daten und Dateien noch übertragen. Dateien werden im Normalfall über FTP auf den Webserver kopiert. Dazu benötigen Sie einen so genannten FTP-Client. Auf der beiliegenden CD-ROM finden Sie ein solches kostenloses Programm mit dem Namen SmartFTP. Die Installation ist unproblematisch:
24
1
Wechseln Sie in das Verzeichnis software auf der CD-ROM.
2
Das Installationsprogramm benötigt eine Datei aus dem Internet. Stellen Sie also sicher, dass Sie ins Internet eingewählt sind.
3
Doppelklicken Sie auf die Datei SFTPSetup.exe. Das Setup-Programm startet mit dem Download einer benötigten Datei und zeigt dann eine Begrüßungsmeldung. Wenn Sie möchten, können Sie jetzt die Internet-Verbindung wieder beenden. Klicken Sie auf die Schaltfläche Next.
4
Bestätigen sie, dass Sie mit den Lizenzbestimmungen einverstanden sind und klicken Sie wieder auf Next.
5
Wählen Sie im nächsten Bildschirm die Option Typical (Abbildung 1.11).
2-6496.book Page 25 Tuesday, November 19, 2002 3:47 PM
Webspace im Internet
Abbildung 1.11: Installation von SmartFTP
6
Klicken sie noch einmal auf Next, um die Installation zu starten.
Wenn die Installation beendet ist, können Sie SmartFTP starten, indem Sie im Windows-Startmenü unter Programme\SmartFTP den Eintrag SmartFTP wählen. Das Programm ist in englischer Sprache verfasst, aber auf der Homepage finden Sie auch eine Möglichkeit, deutsche Sprachunterstützung nachzuinstallieren: http:// www.smartftp.com/localization/projects/german/ Um nun Dateien auf Ihren Webspace zu kopieren, gehen Sie wie folgt vor:
1
Starten Sie SmartFTP. Beim ersten Start erscheint zunächst ein Fenster, in dem Sie SmartFTP konfigurieren können. Die Standardeinstellungen können Sie zunächst ohne Änderung übernehmen, klicken sie also auf OK.
2
Es öffnet sich das Hauptfenster von SmartFTP. Um sich nun mit Ihrem Webspace über FTP zu verbinden, tippen Sie in die Adresszeile die URL Ihres FTPZugangs sowie Ihren Benutzernamen und Passwort in die entsprechenden Felder Login und Password ein. Die dafür benötigten Informationen haben Sie von Ihrem Hoster bekommen. Drücken Sie danach die (¢)-Taste. SmartFTP versucht daraufhin, eine Verbindung aufzubauen. Auch hierzu müssen Sie natürlich ins Internet eingewählt sein. Wenn alles klappt, bekommen Sie eine Übersicht, welche Dateien und Ordner schon auf Ihrem Webspace zu finden sind (Abbildung 1.12).
25
2-6496.book Page 26 Tuesday, November 19, 2002 3:47 PM
Der dynamische Dreikampf: PHPTriad
Abbildung 1.12: Der FTP-Client SmartFTP
3
Öffnen Sie jetzt den Windows-Explorer und navigieren sie zu den Inhalten, die Sie übertragen möchten. Sie können per Drag&Drop Dateien oder Ordner aus dem Explorer-Fenster in das SmartFTP-Dateifenster ziehen. Sobald Sie die Maustaste loslassen, startet der Dateitransfer. Einfach, nicht wahr?
4
Wollen Sie Inhalte Ihres Webspaces löschen oder umbenennen, können Sie im Dateifenster von SmartFTP so vorgehen, wie Sie es vom Windows-Explorer gewohnt sind. Haben sie alles übertragen und eventuelle Änderungen vorgenommen, können sie SmartFTP wieder schließen.
Wenn Sie alle Dateien kopiert haben, ist das aber erst die halbe Miete. Der nächste Schritt besteht darin, die Inhalte aus Ihrer MySQL-Datenbank in die Datenbank Ihres Webspaces zu übertragen. Dazu können Sie phpMyAdmin auf beiden Seiten (Ihrem Rechner und dem Internet-Rechner) benutzen. Gehen Sie dabei wie folgt vor:
26
1
Verbinden Sie sich mit phpMyAdmin auf Ihrem lokalen Rechner: http://localhost/phpMyAdmin/
2
Am linken Bildschirmrand werden alle Datenbanken angezeigt, die von MySQL angelegt wurden. Klicken Sie auf die Datenbank, die Sie kopieren möchten.
2-6496.book Page 27 Tuesday, November 19, 2002 3:47 PM
Webspace im Internet
Scrollen Sie etwas nach unten, bis Sie die Funktion Dump (Schema) der Datenbank anzeigen finden (Abbildung 1.13). Hier wählen Sie die Option Struktur und Daten und aktivieren das Kontrollkästchen Senden.
Abbildung 1.13: Dump einer Datenbank
Klicken Sie auf OK. Sie werden dann aufgefordert, den Speicherort für den so genannten Datenbankdump anzugeben. Wählen Sie ein beliebiges Verzeichnis.
4
Verbinden Sie sich mit dem phpMyAdmin-Tool Ihres Webspaces. Die URL hierfür erhalten Sie von Ihrem Hoster.
PROFITIPP
3
5
Sollte Ihr Hoster wider Erwarten kein phpMyAdmin anbieten, muss er eine Alternative anbieten, wie Sie Daten übertragen können. Entsprechende Informationen wird er Ihnen bereitstellen.
Auf der Startseite von phpMyAdmin finden Sie die Funktion Neue Datenbank erzeugen (Abbildung 1.14). Tragen Sie den Namen der Datenbank, die Sie kopieren wollen, ein und klicken Sie auf Erzeugen.
Abbildung 1.14: Neue Datenbank erzeugen
6
Sie befinden sich jetzt auf der Verwaltungsseite der neu angelegten Datenbank. Dort finden Sie die Funktion, um SQL Befehle aus einer Datei auszuführen. Kli-
27
2-6496.book Page 28 Tuesday, November 19, 2002 3:47 PM
Der dynamische Dreikampf: PHPTriad
cken Sie auf Durchsuchen, um die Datei auf Ihrer Festplatte auszuwählen, die Sie in Schritt 3 gespeichert haben. Bestätigen Sie anschließend Ihre Auswahl mit OK.
Abbildung 1.15: SQL-Befehle aus Datei ausführen
7
Je nach Umfang der Daten müssen Sie einen Augenblick warten. Sie sollten dann aber die Rückmeldung erhalten, dass die Befehle erfolgreich ausgeführt und der Inhalt der Datei eingefügt wurde. Überprüfen Sie, ob die Datenbank korrekt kopiert wurde.
PROFITIPP
Das war’s, jetzt sollte Ihre dynamische Website im Internet genauso funktionieren wie zu Hause auf Ihrem Testsystem.
Wenden Sie sich bei Problemen mit phpMyAdmin, MySQL oder PHP an den Support Ihres Hosters. Oftmals gibt es auch eine Webseite, die immer wieder auftauchende Probleme und deren Lösungen beschreibt, so genannte FAQs (Frequently asked questions – häufig gestellte Fragen).
1.5 Für Neugierige Sie fühlen sich angesprochen? Gut, denn in diesem Abschnitt bekommen Sie ein paar Hintergrundinformationen zu PHP und MySQL, die Sie zur weiteren Lektüre des Buches nicht unbedingt brauchen. Trotzdem ist es interessant zu erfahren, was zum Beispiel die Abkürzung PHP bedeutet oder warum MySQL so erfolgreich ist.
Ein paar Details zu PHP PHP steht für PHP: Hypertext Preprocessor Der Name deutet schon an, dass PHP eine Skriptsprache zur Programmierung von dynamischen Webseiten ist. PHP ist dabei besonders aufgrund zweier Eigenschaften interessant.
28
2-6496.book Page 29 Tuesday, November 19, 2002 3:47 PM
Für Neugierige
■ Das Programm ist kostenlos als Open-Source-Projekt erhältlich. Beim Einsatz von PHP müssen Sie keinerlei Lizenzgebühren bezahlen. Außerdem können Sie den gesamten Quellcode bekommen; eigene Änderungen sind also theoretisch bei entsprechendem Fachwissen möglich, dann sollte man sich aber der Entwicklergemeinde im Internet anschliessen. ■ Aufgrund der großen Entwicklergemeinde von PHP existiert bereits eine große Zahl an kostenlos verfügbaren Erweiterungen und Applikationen. Besonders hervorzuheben sind hier die Funktionen zum Zugriff auf zahlreiche Datenbanksysteme. Aber auch für andere Bereiche finden sich viele fertige Produkte, die Sie zum Teil in den nächsten Kapiteln vorgestellt bekommen. Die freie Verfügbarkeit von PHP und Erweiterungen zu PHP sowie die Einfachheit der Sprache haben in den letzten Jahren zu einer rasanten Verbreitung geführt (Abbildung 1.16). So ist PHP laut Netcraft-Statistik im Juli 2002 auf 1,2 Millionen Webservern und 9,3 Millionen Domains im Einsatz.
Abbildung 1.16: Verbreitung von PHP
Interessant ist auch die so genannte Marktdurchdringung, also wie häufig PHP im Gegensatz zu Konkurrenzprodukten verwendet wird (Abbildung 1.17).
Abbildung 1.17: PHP-Marktdurchdringung
29
2-6496.book Page 30 Tuesday, November 19, 2002 3:47 PM
Der dynamische Dreikampf: PHPTriad
Mehr Statistiken und Informationen finden Sie unter: ■ http://www.netcraft.com ■ http://www.securityspace.com/s_survey
Die Zukunft von MySQL MySQL wird zurzeit in Version 3.23 angeboten. Es gibt viele Gründe, warum man MySQL in dieser Version einsetzt: ■ Es ist Open-Source-Software, das heißt, der Quellcode ist einsehbar und es fallen keine Lizenzgebühren an. Im Vergleich dazu kann eine Lizenz für das Datenbanksystem Oracle bis zu 50.000 € kosten. ■ MySQL ist sehr schnell, besonders im webbasierten Einsatz. Im Vergleich zu anderen kommerziellen Datenbanksystemen wie Oracle braucht es sich nicht zu verstecken. ■ MySQL gibt es für eine Vielzahl von Betriebsystemen, z.B. Linux, Windows, FreeBSD, Solaris oder OS/2. ■ Es arbeitet hervorragend mit PHP zusammen und ist zu einem De-facto-Standard für webbasierten Datenbankzugriff mit PHP geworden. Man darf allerdings nicht die Nachteile verschweigen: ■ MySQL unterstützt von Haus aus keine Transaktionen, man muss Zusatztools dafür benutzen. Transaktionen werden benötigt, damit Daten bei fehlerhaften Operationen nicht verloren gehen. ■ Wenn ein Benutzer auf eine Tabelle zugreift, wird diese für alle anderen Benutzer gesperrt. Bei hohen Zugriffszahlen leidet so die Geschwindigkeit, da viel Zeit mit Warterei vertan wird. Andere Datenbanksysteme arbeiten feiner, dort ist es möglich, nur Tabellenzeilen zu sperren. ■ MySQL bietet keine grafische Umgebung zum Bedienen und Administrieren der Datenbank. Aber wie Sie schon gesehen haben und noch sehen werden, wird dieser Nachteil durch das hervorragende Tool phpMyAdmin relativiert. Die Entwicklergemeinde von MySQL hat sich zum Ziel gesetzt, die beste Datenbank kostenlos anzubieten. Deshalb hat man für die neue Version 4, die schon zum Download bereitsteht, die größten Nachteile aus dem Weg geräumt. MySQL 4.0 bietet Transaktionsmanagement und zeilenweises Sperren. Damit dürfte MySQL 4.0 der teuren Konkurrenz das Fürchten lehren.
30
2-6496.book Page 31 Tuesday, November 19, 2002 3:47 PM
Workshop 2 Sherlock Holmes und Dr. PHP Wie Ihnen PHP-Scripts helfen, nützliche Informationen zu gewinnen. In diesen und den restlichen Kapiteln des Buches werden Sie fertige Scripts kennen lernen, die die Fähigkeiten von PHP und MySQL nutzen. Alle Scripts sind Freeware, das heißt, sie können Sie kostenfrei benutzen. Ist das nicht wunderbar? Willkommen in der Welt von Open-Source-Software! Als Einstieg möchte ich Ihnen zwei Scripts vorstellen, die Informationen über die Besucher Ihrer Homepage herausfinden. Mithilfe des ersten Scripts mit Namen xCount können Sie einen Seitenzähler in Ihre Homepage einbauen. Das zweite Script trägt den Namen CounterCaffe und kann schon etwas mehr. Es zeigt komplette Statistiken, wer wann welche Seite wie oft aufgerufen hat. Big Brother is watching you!
2-6496.book Page 32 Tuesday, November 19, 2002 3:47 PM
Sherlock Holmes und Dr. PHP
Ergebnis dieses Workshops Als Ergebnis dieses Workshops erhalten Sie zweierlei: erstens die Möglichkeit, einen grafischen Seitenzähler auf beleibige Seiten einzubauen und zweitens eine umfassende Statistik über die Nutzung Ihrer Website.
2.1 Ein einfacher Seitenzähler Wir beginnen ganz einfach – mit einem Seitenzähler. Das haben Sie sicher schon auf vielen Seiten gesehen. Oftmals sieht der Zähler aus wie ein Tachometer und zeigt an, wie viele Besucher diese Seite schon hatte. Damit auch Sie in den Genuss eines solchen Zählers kommen können, müssen Sie zunächst das Script, das Sie schon fertig geliefert bekommen, installieren. Für das Script namens xCount – wie für alle weiteren Scripts im Buch – müssen zwei verschiedene Installationen unterschieden werden: Die Installation auf Ihrem lokalen Testsystem mit PHPTriad und die Installation auf Ihrem Webspace im Internet. Die Installation auf dem Webspace gestaltet sich als schwieriger, da man die Dateien zunächst über ein FTP-Programm übertragen muss und es mehr Fehlerquellen gibt. Außerdem hat man meistens auf die Konfiguration von PHP und MySQL keinen Einfluss. Ein paar Fallstricke können Sie im Anhang über Troubleshooting nachlesen.
32
2-6496.book Page 33 Tuesday, November 19, 2002 3:47 PM
Ein einfacher Seitenzähler
Die Installation Ich stelle Ihnen exemplarisch beide Installationen vor, damit Sie sich ein Bild von den Unterschieden machen können.
AUF DER
CD-ROM
Zuerst die Installation auf Ihrem lokalen Testsystem:
Die notwendige Archivdatei finden Sie auf der CD-ROM im Verzeichnis \software\xCount. Sie hat den Namen xCount.zip. Im Internet finden Sie die aktuelle Version unter http://www.x-gfx.de.
1
Legen Sie einen Unterordner namens counter im Dokumentenordner Ihres Webservers an. Im Fall des Testsystems mit PHPTriad ist das c:\apache\htdocs.
2
Extrahieren Sie die Datei xCount.zip in das neu angelegte Verzeichnis. Die Ordnerstruktur sollte dann wie in Abbildung 2.1 aussehen.
Abbildung 2.1: Die xCount-Dateien
Das war’s schon. Um die Funktionalität zu testen, probieren Sie die enthaltene Testdatei sample.php aus, die den Zähler integriert hat. Öffnen Sie dazu einen Browser wie den Internet Explorer und wechseln Sie zur URL http://localhost/counter/sample.php.
33
2-6496.book Page 34 Tuesday, November 19, 2002 3:47 PM
Sherlock Holmes und Dr. PHP
Wenn Sie eine Seite wie in Abbildung 2.2 sehen, ist das die halbe Miete. Um die volle Funktionalität zu testen, klicken Sie auf den Link Refresh/Count. Der Zähler sollte pro Klick eins hochzählen.
Abbildung 2.2: Eine Testseite
Und nun die Installation auf Ihrem Webspace:
34
1
Erstellen Sie ein temporäres Verzeichnis auf Ihrer Festplatte, zum Beispiel c:\temp\counter.
2
Extrahieren Sie die Archivdatei xCount.zip in dieses Verzeichnis.
3
Benutzen Sie das in Kapitel 1 vorgestellte FTP-Programm SmartFTP, um das komplette Verzeichnis counter auf Ihren Webspace zu übertragen.
4
Achten Sie darauf, dass die Datei counter.dat zum Schreiben freigegeben ist. Klicken Sie dazu im SmartFTP-Fenster mit der rechten Maustaste auf die Datei counter.dat und wählen aus dem Kontextmenü den Eintrag Properties/CHMOD. Stellen Sie die Schreibrechte analog zu Abbildung 2.3 ein.
2-6496.book Page 35 Tuesday, November 19, 2002 3:47 PM
Ein einfacher Seitenzähler
Abbildung 2.3: Dateirechte ändern
Jetzt sollte es auch auf Ihrem Webspace funktionieren. Probieren Sie wieder die Testseite sample.php, indem Sie mit einem Browser zur URL http://meinWebspace.de/counter/sample.php wechseln. meinWebspace.de ersetzen Sie natürlich mit dem Namen Ihrer Domain.
Einbau des Zählers Dass die Testseite funktioniert ist zwar schön, aber wir wollen den Zähler natürlich auf eigenen Seiten benutzen. Wie das geht, erfahren Sie in diesem Abschnitt. Lassen Sie uns dazu eine einfache HTML-Seite schreiben, die wir dann mit dem Zähler bestücken. Der Code der Seite ist:
Testseite
Speichern Sie die Seite unter dem Namen Testseite.php in Ihrem counter-Verzeichnis ab.
35
2-6496.book Page 36 Tuesday, November 19, 2002 3:47 PM
PROFITIPP
Sherlock Holmes und Dr. PHP
Die Datei hat die Endung .php, da der Zähler, den wir später einbauen wollen, ein PHP-Script ist. Damit PHP-Scripts vom Webserver als solche erkannt werden, müssen Sie die entsprechende Endung – nämlich .php – haben.
Um nun den Zähler einzubauen, fügen Sie folgenden Code in Zeile 3 ein:
Der gesamte Code lautet dann also:
Testseite
Das Ergebnis sehen Sie in Abbildung 2.4.
VORSICHT!
Abbildung 2.4: Zähler auf eigener Seite
36
Falls die Seite, in die Sie den Zähler einbauen, nicht im gleichen Verzeichnis liegt wie das counter-Script, müssen Sie die include-Anweisung modifizieren. Als Parameter bekommt die include-Anweisung den Ort des counter-Scripts. Nehmen wir einmal an, Sie wollen den Zähler in eine Seite einbauen, die in einem Verzeichnis beliebigen Namens in Ihrem Dokumentenverzeichnis des Webservers liegt. Dann müsste die include-Anweisung lauten: include("../counter/counter.php").
2-6496.book Page 37 Tuesday, November 19, 2002 3:47 PM
Ein einfacher Seitenzähler
Ihnen ist bestimmt schon aufgefallen, dass der Zähler nicht bei 0 anfängt. Das können wir schnell beheben. Öffnen Sie die Datei counter.dat im counter-Installationsverzeichnis mit Hilfe eines Texteditors. In dieser Datei wird die Anzahl der Zugriffe gespeichert. Ändern Sie die Zahl einfach ab und speichern Sie die Datei.
Kosmetik Ich weiß nicht, wie es Ihnen geht, aber ich finde die mitgelieferten Grafiken für den Zähler nicht besonders gut lesbar. Zum Glück kann man hier eigene Grafiken einbinden. Schauen Sie einmal in den Ordner img im counter-Installationsverzeichnis. Dort existiert für jede Zahl eine eigene Grafik, die Sie auch ändern können. Nun ist es relativ viel Arbeit, eigene Ziffern für den Zähler zu entwerfen. Aber es haben sich schon viele andere die Arbeit gemacht und waren so nett, die Ergebnisse im Internet frei bereitzustellen. Eine große Sammlung von Zählerziffern bekommen Sie auf der Seite http://www.counterart.com. Wählen Sie einfach die gewünschte Rubrik und klicken Sie dann auf einen Zähler, der Ihnen gefällt. Auf der Download-Seite wählen Sie dann das Zip-Archiv (Abbildung 2.5).
Abbildung 2.5: Download eines Ziffernsets
37
2-6496.book Page 38 Tuesday, November 19, 2002 3:47 PM
Sherlock Holmes und Dr. PHP
Damit Sie die neuen Ziffern benutzen können, gehen sie folgendermaßen vor:
1
Legen Sie einen neuen Ordner für die Ziffern im counter-Installationsverzeichnis an, zum Beispiel mit dem Namen meineZiffern.
2
Extrahieren Sie das heruntergeladene Archiv in das neue Verzeichnis meineZiffern.
3
Ändern Sie die Dateinamen der Ziffern um, wie in Abbildung 2.6 gezeigt.
Abbildung 2.6: Ändern der Dateinamen
4
Öffnen Sie die Datei counter.php in einem Texteditor and ändern Sie den Eintrag in Zeile 46 um in:
PROFITIPP
$img_url = "./meineZiffern";
38
Falls Sie keinen Texteditor besitzen, können sie den auf der CD-ROM mitgelieferten Textpad oder JEdit installieren. Sie finden die Programme im Verzeichnis \software\Texteditoren. Für JEdit benötigen Sie allerdings eine Java-Laufzeitumgebung (erhältlich bei http:// java.sun.com), dafür kann er wesentlich mehr als Textpad.
2-6496.book Page 39 Tuesday, November 19, 2002 3:47 PM
Besucherstatistiken
5
Speichern Sie die Datei und testen Sie Ihre neuen Ziffern mit der Testseite (Abbildung 2.7).
Abbildung 2.7: Die neuen Ziffern
2.2 Besucherstatistiken Da Sie das erste Unterkapitel unbeschadet überstanden haben – schließlich lesen Sie weiter –, erhöhen wir den Schwierigkeitsgrad ein wenig. In diesem Unterkapitel möchte ich Ihnen ein Script vorstellen, das mithilfe von PHP und der MySQL-Datenbank eine Besucherstatistik erstellt. Folgende Informationen werden dabei bereitgestellt: ■ Welche Seiten wurden aufgerufen? ■ Wie oft wurde eine Seite aufgerufen? ■ Von welchem Rechner wurden Seiten aufgerufen? ■ Welcher Browser und welches Betriebssystem wurden auf den Besucherrechnern benutzt ?
AUF DER
CD-ROM
Vielleicht fragen Sie sich, woher alle diese Informationen kommen? Die Antwort ist, dass sie standardmäßig vom Browser bei jedem Seitenaufruf an den Webserver gesendet werden. Das heißt, die Informationen sind immer da, ein Script muss Sie nur entsprechend auslesen und auswerten. Genau das erledigt das Script mit dem Namen CounterCaffe.
CounterCaffe finden Sie auf der CD-ROM im Verzeichnis \software\ CounterCaffe. Die Archivdatei nennt sich CounterCaffe1.1.zip. Im Internet finden Sie die aktuelle Version unter http://counter.gonafish.com
39
2-6496.book Page 40 Tuesday, November 19, 2002 3:47 PM
Sherlock Holmes und Dr. PHP
Die Installation von CounterCaffe Um CounterCaffe zu installieren, gehen Sie folgendermaßen vor:
1
Legen Sie ein neues Verzeichnis namens statistik im Dokumentenordner des Webservers an (c:\apache\htdocs) an.
2
Extrahieren Sie die Archivdatei CounterCaffe1.1.zip in das neue Verzeichnis.
3
Öffnen Sie die Datei param.inc.php in einem Texteditor wie Textpad.
4
Ändern Sie die Einstellungen ab wie in Abbildung 2.8 gezeigt.
Abbildung 2.8: Konfiguration von CounterCaffe
Die ersten vier Parameter sind die Datenbankeinstellungen. Wir haben als Datenbankbenutzer donald angegeben und als Datenbankname db1. Woher kommen diese Werte? Um ehrlich zu sein, es gibt sie noch gar nicht. Wir müssen den neuen Datenbankbenutzer und die Datenbank db1 erst noch erstellen. Dazu gehen Sie wie folgt vor:
40
1
Öffnen Sie einen Browser und wechseln Sie zur MySQL-Administrationsseite: http://localhost/phpmyadmin.
2
Klicken Sie auf den Link Benutzer (ganz unten).
2-6496.book Page 41 Tuesday, November 19, 2002 3:47 PM
Besucherstatistiken
3
Scrollen Sie etwas nach unten bis zur Rubrik Neuen Benutzer hinzufügen und geben Sie als Name und Passwort donald an (Abbildung 2.9). Klicken Sie außerdem auf den Link Alle auswählen in der Rubrik Rechte.
Abbildung 2.9: Neuen Benutzer anlegen
Bestätigen Sie Ihre Eingaben mit Klick auf die Schaltfläche OK. Damit ist der neue Benutzer donald erstellt.
PROFITIPP
4
5
In der MySQL-Datenbank Ihres Webspaces können sie diese Prozedur vermutlich nicht ausführen, da Ihnen dazu die Rechte fehlen. Sie haben aber wahrscheinlich eine MySQL-Benutzerkennung von Ihrem Hoster erhalten. Benutzen Sie einfach diese Kennung anstatt donald.
Kehren Sie zurück zur Startseite durch Klick auf den Link Home im linken Menü ganz oben.
41
2-6496.book Page 42 Tuesday, November 19, 2002 3:47 PM
Sherlock Holmes und Dr. PHP
6
Geben Sie in das Textfeld unter der Rubrik Neue Datenbank erzeugen den Text db1 ein und klicken Sie auf die Schaltfläche Erzeugen, um die neue Datenbank zu erstellen (Abbildung 2.10).
Abbildung 2.10: Neue Datenbank erzeugen
Nach dieser notwendigen Vorarbeit können wir jetzt die Installation von CounterCaffe abschließen:
42
1
Wechseln Sie zur URL http://localhost/statistik/.
2
Loggen Sie sich mit der in der Datei param.inc.php eingestellten AdministratorKennung goofy, Passwort auch goofy, ein (Abbildung 2.11). Der Zugang zur Statistikseite ist geschützt, damit nicht jeder beliebige Internetsurfer Ihre Statistiken ansehen kann.
2-6496.book Page 43 Tuesday, November 19, 2002 3:47 PM
Besucherstatistiken
Abbildung 2.11: CounterCaffe-Login
3
Klicken Sie auf den Link Create Table im oberen rechten Menü. Sie bekommen eine Bestätigung, dass die notwendigen Datenbanktabellen erzeugt wurden (Abbildung 2.12).
Abbildung 2.12: Datenanktabellen erstellen
Damit ist CounterCaffe einsatzbereit. Die Spannung steigt...
43
2-6496.book Page 44 Tuesday, November 19, 2002 3:47 PM
Sherlock Holmes und Dr. PHP
Erstellen von Statistiken Jede Seite Ihrer Homepage, für die eine Statistik geführt werden soll, muss folgenden Eintrag am Ende der Datei haben:
PROFITIPP
Als Quelle des Bildes müssen Sie die URL zu einer CounterCaffe-Scriptdatei namens counter.php angeben (hier http:// localhost/statistik/counter.php). CounterCaffe benutzt einen Trick, um die Statistiken zu erzeugen. Normalerweise wird jedes Bild einer Internetseite einzeln vom Webserver angefordert. Es ist also nicht Bestandteil des Seitentextes. Jetzt wird im oben stehenden Code aber als Quelle des Bildes keine Bilddatei, sondern ein PHP-Script angegeben. Für den Webserver bedeutet das, dass er die Scriptdatei ausführt und somit werden die notwendigen Daten für die Statistik in die Datenbank übernommen.
Lassen Sie uns eine Testseite erstellen, die die Funktionalität von CounterCaffe demonstriert:
1
Legen Sie im Dokumentenverzeichnis Ihres Webservers (c:\apache\htdocs) einen neuen Ordner namens homepage an. Hier wollen wir die Testdatei speichern.
2
Schreiben Sie eine Testdatei mit folgenden einfachen HTML-Code:
3
Damit eine Statistik für diese Seite geführt wird, fügen Sie den notwendigen Code hinzu:
Testseite
Testseite
4
44
Speichern Sie die Datei im Ordner homepage.
2-6496.book Page 45 Tuesday, November 19, 2002 3:47 PM
Besucherstatistiken
5
Öffnen Sie einen Browser und schauen Sie sich die HTML-Datei an: http://localhost/homepage/Testseite.html.
6
Öffnen Sie eine andere Browserinstanz und wechseln Sie zur URL von CounterCaffe: http://localhost/statistik/. Loggen Sie sich wieder mit goofy ein. Sie sollten jetzt Statistikdaten sehen (Abbildung 2.13).
Abbildung 2.13: Statistik
Unter der Rubrik Referer sehen sie die Seiten, die bisher aufgerufen wurden, und die Anzahl der Aufrufe. In der Rubrik Host sehen Sie die IP-Adressen bzw. Namen der Rechner (Hosts), die Seiten aufgerufen haben, sowie deren Browser und Betriebssystem. Im Beispiel ist das MSE 5 (Microsoft Internet Explorer Version 5) und Windows NT 5 (Synonym für Windows 2000).
VORSICHT!
Greifen Sie erneut auf die Seite zu. Sie werden sehen, wie sich die Statistik entsprechend ändert. Vielleicht haben Sie ja auch die Möglichkeit, über einen anderen Rechner auf die Testseite zuzugreifen, um einen weiteren Eintrag in der Host-Rubrik zu bekommen. Das Statistik-Script ist so ausgelegt, dass es nur Hosts zählt, die einen Namen haben. Besser wäre es allerdings, wenn auch Hosts gezählt würden, die nur IP-Adressen haben. Um das zu erreichen, müssen Sie das Script ein wenig abändern. Öffnen Sie dazu die Datei counter.php in einem Editor und fügen Sie folgenden Code in Zeile 19 ein: if ($REMOTE_HOST == "") {$REMOTE_HOST = $REMOTE_ADDR;}
45
2-6496.book Page 46 Tuesday, November 19, 2002 3:47 PM
Sherlock Holmes und Dr. PHP
Über den Link Report in der oberen rechten Menüleiste können sie einen zum Ausdrucken geeigneten Bericht erstellen lassen (Abbildung 2.14).
Abbildung 2.14: Bericht ansehen
Jetzt müssen Sie nur noch den Code zum Aktivieren der Statistikfunktion in alle Seiten einfügen, die Sie in die Statistik mit aufnehmen wollen. Ich wünsche Ihnen zahlreiche Besucher und damit auch zahlreiche Einträge in der Statistikdatenbank!
46
2-6496.book Page 47 Tuesday, November 19, 2002 3:47 PM
Besucherstatistiken
Ergebnis dieses Workshops Sie haben in diesem Workshop gelernt, wie Sie einen einfachen grafischen Seitenzähler in Ihre Seiten einbauen können. Des weiteren haben sie das Skript CounterCaffe kennen gelernt, dass es Ihnen ermöglicht, Berichte über die Nutzung Ihrer Website zu erstellen.
47
2-6496.book Page 48 Tuesday, November 19, 2002 3:47 PM
2-6496.book Page 49 Tuesday, November 19, 2002 3:47 PM
Workshop 3 Beehren Sie uns bald wieder Wie Sie mit einem Gästebuch in Kontakt mit den Besuchern Ihrer Seite kommen Gästebücher werten eine Seite auf. Besucher können Ihre Meinung zur Website loswerden und Sie erhalten so wertvolles Feedback. Außerdem gibt ein Gästebuch einer Website einen persönlichen Touch. In diesem Kapitel werde ich Ihnen ein Gästebuch auf PHP-Basis vorstellen, das seine Einträge in einer MySQL-Datenbank speichert. Es ist für nicht-kommerzielle Zwecke kostenlos und nennt sich einfach nur pgb (php Gästebuch).
Ergebnis dieses Workshops Als Ergebnis erhalten Sie ein komfortables Gästebuch mit vielen Funktionen, dass an das Design Ihrer Homepage angepasst ist.
2-6496.book Page 50 Tuesday, November 19, 2002 3:47 PM
Beehren Sie uns bald wieder
3.1 Installation Ich erläutere Ihnen die Installation zunächst für das lokale Testsystem mit PHPTriad und dann für Ihren Webspace im Internet. In den folgenden Kapiteln werde ich die Installation auf Ihrem Webspace nicht mehr erläutern, der prinzipielle Mechanismus ist immer der gleiche. Zunächst widmen wir uns der Installation auf Ihrem lokalen Rechner:
1
Entpacken Sie die Archivdatei in das Dokumentenverzeichnis Ihres Webservers. Falls Sie PHPTriad benutzen, lautet der Pfad c:\apache\htdocs.
Das war’s schon. Jetzt die Installation auf Ihrem Webspace: Erstellen sie auf ihrem Webserver ein beliebiges Verzeichnis, in dem sie das Gästebuch betreiben wollen.
2
Entpacken sie alle Dateien aus der .zip-Datei und übertragen diese mit ihrem FTP-Programm in dieses Verzeichnis auf den Webserver.
VORSICHT!
1
Stellen Sie sicher, dass die Bilder (.gif) im Binärmodus übertragen werden. Bei Webservern auf Linux/Unix-Basis achten Sie auf die korrekte Groß-/Kleinschreibung der Files.
Damit ist die Installation beendet. Jetzt muss pgb noch an Ihre Gegebenheiten angepasst werden. Öffnen sie dazu in einem Texteditor die Datei config.inc.php im Installationsverzeichnis. In der Datei config.inc.php finden sie alle relevanten Parameter, um das Gästebuch an ihre MySQL-Datenbank anzubinden und einzustellen. Beachten Sie, dass alle Werte in "" eingeschlossen sind und am Ende der Zeile ein Semikolon steht. In der nachfolgenden Tabelle finden Sie einige wichtige Parameter.
50
Parameter
Beschreibung
$database
Name Ihrer Datenbank auf dem MySQL-Server
$sqlhost
Hostname, auf dem die MySQL-Datenbank läuft. Meistens : "localhost"
$sqluser
Username für die Datenbank
$sqlpass
Passwort für die Datenbank
2-6496.book Page 51 Tuesday, November 19, 2002 3:47 PM
Installation
Parameter
Beschreibung
$tab_data
Tabellenname für die Einträge (SQL-fähiger Name!)
$tab_kom
Tabellenname für die Kommentare (SQL-fähiger Name!)
$adminpass
Passwort zum Löschen von Einträgen
$adminemail
E-Mail-Adresse des Administrators, an die bei $notify=1 die neuen Einträge geschickt werden
$notify
Wenn $notify = 1 werden neue Einträge via E-Mail an den Admin verschickt.
$time_offset
Zur Anpassung an verschiedene Zeitzonen; 3600 pro Stunde
$glowstyle
Dieses Tag ermöglicht es, das Glühen des Autornamens anzupassen
Tragen Sie für Ihr lokales Testsystem die Werte analog zu Abbildung 3.1 ein und speichern Sie die Datei.
Abbildung 3.1: Anpassen der pgb-Konfiguration
51
2-6496.book Page 52 Tuesday, November 19, 2002 3:47 PM
Beehren Sie uns bald wieder
Nach der Anpassung der Parameter $database, $sqlhost, $sqluser und $sqlpass haben Sie bereits Zugang zur Datenbank. Die Tabellennamen $tab_data und $tab_kom müssen nicht geändert werden. Diese bieten aber die Möglichkeit, auf einer Datenbank zwei verschiedene Gästebücher zu installieren, indem man die Tabellennamen einfach entsprechend ändert.
VORSICHT!
Bei $adminemail tragen sie Ihre E-Mail-Adresse ein, an die Benachrichtigungen über neue Gästebucheinträge geschickt werden, wenn $notify auf 1 steht.
Unterstützt der Webserver kein Versenden von E-Mails, muss diese Option auf 0 stehen, ansonsten erscheint beim Eintragen ins Gästebuch eine Fehlermeldung.
$time_offset gibt den Zeitunterschied des Gästebuchs zur Serverzeit an. Somit kann man das Gästebuch genau an eine Zeitzone anpassen. Der Wert gibt den Unterschied in Sekunden an. +3600 steht für +1 Stunde, -3600 steht für -1 Stunde. Die benötigten Datenbanktabellen für das Gästebuch erstellen sie automatisch mit dem mitgelieferten Script pgb_createdb.php: Öffnen Sie einen Browser und wechseln Sie zur URL http://localhost/gb/pgb_createdb.php. Die Datenbanktabellen werden nun erstellt. Beachten sie, dass die Datenbank db1 und der Benutzer donald existieren müssen (wurde in Kapitel 2 erstellt).
Abbildung 3.2: Skript zum Anlegen der Datenbanktabellen
52
2-6496.book Page 53 Tuesday, November 19, 2002 3:47 PM
Handhabung
Nun ist es Zeit für einen ersten Test des Gästebuchs. Klicken Sie auf den Link Start, um auf die Startseite des zurzeit noch leeren Gästebuchs zu kommen. Wenn alles funktioniert hat, sieht das wie in Abbildung 3.3 aus.
Abbildung 3.3: Die Startseite
3.2 Handhabung So, dann wollen wir mal einen ersten Eintrag einfügen. Auf der Startseite finden Sie dazu die Rubrik Eintrag hinzufügen . Füllen Sie die Felder analog zu Abbildung 3.4 und klicken Sie auf die Schaltfläche Eintragen.
53
2-6496.book Page 54 Tuesday, November 19, 2002 3:47 PM
Beehren Sie uns bald wieder
Abbildung 3.4: Eintrag erstellen
Es erscheint eine Bestätigungsmeldung. Klicken Sie auf den Link Zurück , um wieder zur Startseite zu gelangen. Der neue Beitrag erscheint dort (Abbildung 3.5).
Abbildung 3.5: Der neue Eintrag
54
2-6496.book Page 55 Tuesday, November 19, 2002 3:47 PM
Handhabung
Zu jedem Eintrag können alle Benutzer Kommentare abgeben. Klicken Sie dazu auf den Link Kommentare unterhalb des Autornamens. Tragen Sie etwas ein und speichern Sie Ihre Eingabe durch Klick auf die Schaltfläche Kommentar Abschicken.
Abbildung 3.6: Kommentar abgeben
Ihr Kommentar wird jetzt angezeigt. Sie befinden sich immer noch auf der Kommentarseite. Um zurück zur Hauptseite des Gästebuchs zu gelangen, benutzen Sie den Link Zurück ins Gästebuch am Ende der Seite. Dort werden Kommentare nicht direkt angezeigt, aber die Anzahl der Kommentare zu einem Beitrag. Wenn das Gästebuch sehr viele Beiträge umfasst, kann es nützlich sein, die Suchfunktion zu benutzen. Man kann damit nach Autoren suchen, wobei man nicht den vollständigen Namen kennen muss, sondern auch nur nach einzelnen Buchstaben oder Silben, die an beliebiger Stelle im Namen auftauchen, suchen lassen kann. Es werden dann alle Beiträge der Autoren angezeigt, die diesem Suchkriterium entsprechen. In Abbildung 3.7 sehen Sie, dass ich als Suchkriterium nur den Vornamen des Autors eingeben habe. Es würden alle Beiträge der Autoren, in deren Namen Arnold vorkommt, angezeigt.
55
2-6496.book Page 56 Tuesday, November 19, 2002 3:47 PM
Beehren Sie uns bald wieder
Abbildung 3.7: Die Suchfunktion
3.3 Administration Es kann vorkommen, dass ein Surfer irgendwelchen Müll in das Gästebuch schreibt. Als normaler Benutzer können Sie nichts dagegen unternehmen und auch den Eintrag nicht löschen. Aber es gibt einen speziellen Benutzer: den Verwalter des Gästebuchs. Er wird Admin-User, Administrator oder einfach nur Admin genannt. Um sich als Admin einzuloggen, klicken Sie auf den Link Admin am Anfang der Seite. Loggen Sie sich mit dem Usernamen admin und Passwort admin ein und sie gelangen zur Administrationsseite (Abbildung 3.8).
Abbildung 3.8:Die Administrationsseite
56
2-6496.book Page 57 Tuesday, November 19, 2002 3:47 PM
VORSICHT!
Administration
Sie sollten das Passwort des Admin-Users verändern, da jeder, der pgb kennt, ebenfalls die Standardeinstellung (User: admin, Passwort: admin) kennt und so in Ihrem Gästebuch Änderungen vornehmen kann. Um das Benutzerkonto zu verändern, klicken Sie auf den Link Admin in der oberen Menüzeile. Geben Sie auf der dann angezeigten Seite ein neues Passwort an und klicken Sie auf die Schaltfläche Bearbeiten. Merken Sie sich das neue Passwort gut!
Auf der Administrationsseite bekommen Sie alle Einträge des Gästebuchs in verkürzter Form übersichtlich angezeigt. Unter der Spalte Edit finden Sie drei Schaltflächen: ■ die erste zum Bearbeiten des Eintrags ■ die zweite zum Löschen ■ und die dritte, um den Beitrag als wichtigen Eintrag (VIP – very important person) zu markieren.
Abbildung 3.9: Eintrag bearbeiten
57
2-6496.book Page 58 Tuesday, November 19, 2002 3:47 PM
Beehren Sie uns bald wieder
Sie haben somit die Kontrolle über den Inhalt Ihres Gästebuchs. In Abbildung 3.9 wird die Seite dargestellt, die erscheint, wenn Sie die Bearbeiten-Schaltfläche anklicken. Sie können alles verändern, sogar den Autornamen.
3.4 Anpassen von Layout und Design Damit sich das Gästebuch nahtlos in Ihre eigene Homepage einfügt, sollte es vom Design an Ihre Homepage angepasst werden. Dies ist zum Glück möglich. Sie müssen allerdings Kenntnisse in HTML und optimalerweise auch in CSS (Cascading Style Sheets) mitbringen, um diese Möglichkeit effizient nutzen zu können. Aber vielleicht helfen Ihnen auch ohne Vorkenntnisse die nachfolgenden Beispiele weiter, die Sie in leicht abgewandelter Form verwenden können. Zunächst möchte ich Ihnen zeigen, wie Sie den Seitenkopf anpassen können, sodass eine individuelle Überschrift erscheint. Außerdem werden wir die etwas lange Begrüßung „Willkommen in meinem Gästebuch, ihr könnt hier ....“ am Beginn der Seite etwas kürzen. Die Datei, die dazu geändert werden muss, heißt kopf.php und befindet sich im pgbInstallationsverzeichnis. Gehen Sie folgendermaßen vor:
1
Öffnen Sie die Datei kopf.php in einem Texteditor wie Textpad.
2
Fügen Sie in Zeile 9 folgenden HTML-Code ein:
Peters tolle Homepage
58
3
Ersetzen Sie die lange Begrüßungsmeldung in Zeile 14 durch eine kürzere (Abbildung 3.10).
4
Speichern Sie die Änderungen.
2-6496.book Page 59 Tuesday, November 19, 2002 3:47 PM
Anpassen von Layout und Design
Abbildung 3.10: Änderungen in kopf.php
Die Änderungen bewirken ein Erscheinungsbild wie in Abbildung 3.11.
Abbildung 3.11: Veränderter Seitenkopf
Der nächste wichtige Faktor sind natürlich die Farben. Vielleicht ist Ihre Homepage zufällig in Blautönen gestaltet, sodass das Gästebuch passt. Aber das ist eher unwahrscheinlich. Schauen wir uns also die Möglichkeit an, wie Sie die Farben, die in dem Gästebuch benutzt werden, definieren können.
59
2-6496.book Page 60 Tuesday, November 19, 2002 3:47 PM
Beehren Sie uns bald wieder
Die dazu notwendige Datei lautet default.css und ist das Standard-Stylesheet, das für alle Seiten des Gästebuchs verwendet wird. Die Datei befindet sich ebenfalls im pgbInstallationsverzeichnis. Wenn Sie CSS nicht kennen, ist das nicht tragisch. Schauen Sie einfach nach Einträgen mit dem Namen color oder background-color und spielen Sie ein bisschen mit verschiedenen Farbwerten. Eine Liste von Farbwerten finden Sie im Anhang. Ich möchte Ihnen beispielhaft zeigen, wie Sie die Schrift- und Hintergrundfarbe der kompletten Seite sowie die Farben für diverse Tabellenelemente ändern können. Öffnen Sie die Datei default.css in einem Texteditor.
2
Als Erstes wollen wir die Schriftfarbe auf der Seite (nicht in der Tabelle) von zurzeit Schwarz in Weiß ändern. Ersetzen Sie dazu den Wert von color in Zeile 13 durch #FFFFFF.
PROFITIPP
1
60
#FFFFFF ist die hexadezimale Codierung für die Farbe Weiß. Vielleicht ist Ihnen diese Schreibweise schon aus HTML bekannt. Im Anhang finden Sie eine Farbtabelle mit entprechenden Werten.
3
Da weiße Schrift auf weißem Hintergrund nicht sonderlich gut zu lesen ist, wollen wir die Farbe des Seitenhintergrunds ändern, und zwar von Weiß auf Schwarz. Ersetzen Sie dafür den Wert von background-color in Zeile 16 durch #000000.
4
Um den Hintergrund der Tabellenzeilen, die als Überschrift dienen, anders einzufärben, müssen Sie den Wert von background-color in Zeile 55 ändern, zum Beispiel in #AAAAAA für Grau.
5
Als Letztes ändern Sie die Hintergrundfarbe für die Gästebucheinträge. Ersetzen Sie hierfür den Wert von background-color in Zeile 68 und 69 durch #CCCCCC bzw. #FFFFFF.
6
Speichern Sie die Datei und schauen Sie sich das Ergebnis im Browser an: http:// localhost/gb/ (Abbildung 3.12). Zugegeben, wir gewinnen damit keinen DesignWettbewerb, aber mit etwas Geduld kann man die Farbkombinationen so wählen, dass sie zum Gesamt-Farbschema Ihrer Homepage passen.
2-6496.book Page 61 Tuesday, November 19, 2002 3:47 PM
Anpassen von Layout und Design
Abbildung 3.12: Veränderte Farben
Eine weitere Scriptdatei, die den Seitenfuß darstellt, nennt sich fuss.php. Auch hier können Sie wie bei der Kopfdatei eigenen HTML-Code unterbringen, um Text oder andere HTML-Elemente einzubinden, die am Ende jeder Seite des Gästebuchs angezeigt werden sollen. In Abbildung 3.13 sehen Sie den HTML-Code, den Sie hinzufügen müssten, um einen Link zu einer E-Mail-Adresse im Fuß jeder Seite anzeigen zu lassen.
Abbildung 3.13: Veränderte Fußdatei
61
2-6496.book Page 62 Tuesday, November 19, 2002 3:47 PM
Beehren Sie uns bald wieder
Ergebnis dieses Workshops In diesem Workshop haben Sie das kostenlose Skript pgb kennen gelernt, mit dessen Hilfe Sie ein Gästebuch in Ihre Homepage integrieren können.
62
2-6496.book Page 63 Tuesday, November 19, 2002 3:47 PM
Workshop 4 Was mache ich mit all den Daten? Formulardaten prüfen, weitersenden und in der Datenbank ablegen Eine klassische Anwendung von Scripts seit den Anfängen mit CGI/Perl ist das Weiterverarbeiten von Formulardaten mit so genannten FormProcessors. Hierfür gibt es eine ganze Reihe fertiger anpassbarer Scripts auf PHP-Basis, von denen Sie in diesem Kapitel einen exzellenten Vertreter dieser Gattung vorgestellt bekommen. Das Script nennt sich Phorm und ist natürlich wieder kostenlos – der Autor bittet aber um eine freiwillige Registrierung für 10 Dollar. Also, wenn Ihnen das Script gefällt und Sie in Geberlaune sind ...
Ergebnis dieses Workshops In diesem Workshop werden Sie ein Beispielformular entwerfen, dessen Daten Sie dann per Email zugeschickt bekommen. Sie werden ausserdem die Daten in eine MySQLDatenbank ablegen.
2-6496.book Page 64 Tuesday, November 19, 2002 3:47 PM
Was mache ich mit all den Daten?
4.1 Was bietet Phorm? Stellen Sie sich vor, Sie haben ein Feedback-Formular auf Ihrer Homepage, mit dem Surfer Ihnen mitteilen können, wie ihnen die Website gefällt. Ein Benutzer füllt das Formular aus und lobt die Seiten, klickt auf Abschicken und ... was soll mit den Daten passieren, die der Benutzer eingegeben hat? Vielleicht sollen Sie an Ihre E-Mail-Adresse geschickt werden oder in einer Datenbank gespeichert werden. Genau dies ist mit Phorm möglich. Zusätzlich gibt es folgende Möglichkeiten: ■ Versenden von Daten an mehrere E-Mail-Adressen ■ Überprüfen von Formulardaten auf Richtigkeit und gegebenenfalls Ablehnung ■ Anzeigen einer Bestätigungsseite mit den erhaltenen Daten ■ Versenden einer Bestätigungs-E-Mail an den Sender Dies alles wäre nur mit viel Programmieraufwand zu realisieren, aber zum Glück gibt es Phorm!
4.2 Vorbereiten des Testsystems Damit PHP E-Mails verschicken kann, muss es entsprechend konfiguriert sein. Auf Ihrem Webspace sollte das der Fall sein, ansonsten beschweren Sie sich! Auf unserem Testsystem, für die meisten Leser PHPTriad unter Windows, müssen Sie PHP selbst konfigurieren. Aber das ist nicht schwierig, denn Sie brauchen als Information lediglich den Namen ihres SMTP-Servers. Der SMTP-Server sorgt dafür, dass Ihre E-Mails verschickt werden. Für T-Online-Kunden zum Beispiel heißt er smtp.t-online.de. Sie können den Namen herausfinden, indem Sie in Ihrem E-Mail-Client-Programm (wie Outlook) in die Eigenschaften ihres E-Mail-Kontos schauen. Im Feld Postausgang (SMTP) auf der Registerkarte Server finden Sie die gesuchte Information (Abbildung 4.1).
64
2-6496.book Page 65 Tuesday, November 19, 2002 3:47 PM
Vorbereiten des Testsystems
Abbildung 4.1: E-Mail-Serverinformationen
Gewappnet mit dem Namen des SMTP-Servers können Sie nun PHP konfigurieren. Öffnen Sie dazu die PHP-Konfigurationsdatei php.ini im Verzeichnis c:\apache\php. In Zeile 476 können Sie den Servernamen eintragen und in Zeile 479 die AbsenderE-Mail-Adresse (Abbildung 4.2).
Abbildung 4.2: E-Mail-Einstellungen von PHP
Speichern Sie die Datei. Ab sofort kann PHP auch E-Mails verschicken!
65
2-6496.book Page 66 Tuesday, November 19, 2002 3:47 PM
Was mache ich mit all den Daten?
AUF DER
CD-ROM
4.3 Installation von Phorm Phorm finden Sie als Zip-Archiv auf der CD-ROM im Verzeichnis \software\Phorm. Im Internet finden Sie die aktuelle Version unter http://www.phorm.com.
Die Installation gestaltet sich unkompliziert:
1
Legen Sie ein neues Unterverzeichnis mit dem Namen Phorm im Dokumentenverzeichnis Ihres Webservers an. Unter Windows mit PHPTriad ist es das Verzeichnis c:\apache\htdocs, bei Linux meist /usr/local/httpd/htdocs.
2
Entpacken Sie das Archiv phorm.zip von der CD-ROM in den neu erstellten Ordner.
3
Öffnen Sie die Datei phormconfig.php3 in einem Texteditor und tragen Sie folgende Informationen ein (Abbildung 4.3): ■ Die E-Mail-Adresse, an die Fehlermeldungen von Phorm geschickt werden: $PHORM_ALERTTO = "[email protected]";
■ Die E-Mail-Adresse, an die die Formulardaten geschickt werden soll: $PHORM_TO
■ Den Inhalt der Betreffzeile der gesendeten E-Mails: $PHORM_SUBJECT = "Formulardaten";
Abbildung 4.3: Die Konfigurationsdatei
66
2-6496.book Page 67 Tuesday, November 19, 2002 3:47 PM
Ein einfaches Beispiel
4
Speichern Sie die Datei.
Für eine ganz einfache Formularbehandlung reicht das schon aus, wie Sie im nächsten Unterkapitel anhand eines Beispiels sehen werden. Später werden wir allerdings noch viel mehr machen, es wird also spannend!
4.4 Ein einfaches Beispiel Nun wollen wir Phorm darauf testen, ob es denn hält, was es verspricht. Dazu müssen wir eine kleine HTML-Testdatei mit einem Formular anlegen (Abbildung 4.4).
Abbildung 4.4: Erstes Testformular
Der Quellcode dazu sieht folgendermaßen aus:
Sie sehen, dass ich im action-Attribut des Formulars die URL des Phorm-Scripts angegeben habe. Probieren Sie es aus! Legen Sie eine Datei test.html im Dokumentenverzeichnis des Webservers (c:\apache\htdocs) an. Rufen Sie die Datei in einem Browser auf, füllen Sie das Formular aus und schicken Sie es ab. Wenn alles funktioniert, bekommen Sie eine E-Mail mit den Angaben zu Vorname und Alter. Außerdem bekommen Sie eine Bestätigungsseite angezeigt (Abbildung 4.5).
67
2-6496.book Page 68 Tuesday, November 19, 2002 3:47 PM
Was mache ich mit all den Daten?
Abbildung 4.5: Die Bestätigungsseite
4.5 Alles O.k.? So weit, so gut. Die Grundfunktionalität ist gegeben, aber damit geben wir uns natürlich nicht zufrieden. Phorm kann schließlich viel mehr! Als Nächstes wollen wir die übermittelten Formulardaten überprüfen. Es macht bei unserem Beispiel keinen Sinn, ein Alter unter 3 und über 120 einzugeben (es sei denn, Sie sind ein Wunderkind oder ein indischer Yogi). Formulare mit einem unsinnigen Alter sollen nicht verschickt werden. Wir möchten aber einem Benutzer, der ein solches unsinniges Alter eingibt, die Möglichkeit geben, seine Eingabe zu wiederholen. Um das zu erreichen, müssen wir zunächst die Regeln definieren, wann Formulareingaben ungültig sind. Legen Sie dazu im phorm-Verzeichnis eine Datei namens regeln.txt mit folgendem Inhalt an : FILES fehler.html RULES RANGE 3 120 Alter 1 Das eingebene Alter kauf ich Ihnen nicht ab! ###
Diese Datei besteht aus zwei Sektionen: FILES und RULES. Unter FILES gibt man die Datei an, die dem Benutzer bei einem Fehler angezeigt wird. Unter RULES kann man Regelsätze angeben, die einem starren Aufbau folgen müssen: Kriterium Formularfeld Level
In unserem Fall lautet das Kriterium: RANGE 3 120
68
2-6496.book Page 69 Tuesday, November 19, 2002 3:47 PM
Alles O.k.?
Dies bedeutet, dass der Inhalt des Formularfelds Alter im Bereich zwischen 3 und 120 liegen muss.
VORSICHT!
Jeder Regelsatz – einer pro Formularfeld, das überprüft werden soll – wird mit den Zeichen ### abgeschlossen.
Der Regelsatz muss genau dem beschriebenen Aufbau folgen, sonst funktioniert es nicht. Achten Sie also bei unserem Beispiel darauf, dass Sie zwischen dem Wort RANGE, den Zahlen 3 und 120 jeweils ein Leerzeichen getippt haben und zwischen 120, Alter und 1 die (ÿ)Taste.
Es gibt viele Regelkriterien in Phorm. Eine Liste möglicher Werte können Sie im Handbuch nachlesen (Datei docs.rtf im phorm-Verzeichnis). Es folgt eine Auswahl mit kurzer Beschreibung:
PROFITIPP
REQ
Das Feld darf nicht leer sein.
EMAIL CCARD
Das Feld muss eine gültige E-Mail-Adresse beinhalten. Das Feld muss eine gültige Kreditkartennummer beinhalten. ALPHA Das Feld enthält nur Buchstaben. NUMERIC Das Feld enthält nur Ziffern, Kommas oder Punkte. RANGE
Das Feld enthält einen spezifizierten Bereich von Zahlen oder Buchstaben.
GT LT EQ
Der Inhalt des Feldes ist größer als der spezifizierte Wert. Der Inhalt des Feldes ist kleiner als der spezifizierte Wert. Der Inhalt des Feldes ist gleich dem spezifizierten Wert.
NE
Der Inhalt des Feldes ist ungleich dem spezifizierten Wert.
O.k., die Regeln kennen wir nun. Jetzt müssen wir Phorm nur noch mitteilen, dass es die Regeln auch anwenden soll. Öffnen Sie dazu die Konfigurationsdatei phormconfig.php3 und fügen Sie eine Zeile zu den Variablendefinitionen hinzu: $PHORM_VALDEFS = "regeln.txt";
Das war’s, Sie können die Datei speichern und wieder schließen.
69
2-6496.book Page 70 Tuesday, November 19, 2002 3:47 PM
Was mache ich mit all den Daten?
Eines fehlt noch: die Datei fehler.html, die wir in den Regeln angegeben haben und die dem Surfer im Falle einer regelwidrigen Eingabe angezeigt wird. Legen Sie also die Datei mit folgendem Inhalt im phorm-Verzeichnis an: Ein Fehler ist aufgetreten:
Interessant ist hierbei die Zeile , die bewirkt, dass an dieser Stelle die Fehlermeldungen ausgegeben werden, die in der Regeldatei definiert wurden. In unserem Beispiel erscheint also bei einem ungültigen Alter die folgende Meldung: Das eingebene Alter kauf ich Ihnen nicht ab!
Zeit zum Testen! Rufen Sie die Formulardatei test.html auf, geben Sie ein ungültiges Alter ein und klicken Sie auf Los!. Wenn alles gut geht, erhalten Sie eine Ausgabe wie in Abbildung 4.6.
Abbildung 4.6: Die Fehlerseite
4.6 Ab in die Datenbank! Als Nächstes wollen wir die Formulardaten an MySQL schicken, um Sie dort dauerhaft in einer Datenbank zu speichern. Dazu ist ein wenig Vorarbeit nötig, da wir auf der Datenbankseite zuerst die nötige Infrastruktur schaffen müssen: die Tabellen, in die die Daten gespeichert werden sollen. Im einfachsten Fall benötigen Sie eine Tabelle, deren Spalten die Formularfelder angeben. In unserem Fall wären das die Spalten Vorname und Alter. Da jede Tabelle einer relationalen Datenbank einen so genannten Primärschlüssel benötigt, der einen Datensatz eindeutig identifiziert, fügen wir noch eine Spalte Zeit hinzu. Hier soll gespeichert werden, wann das Formular abgeschickt wurde.
70
2-6496.book Page 71 Tuesday, November 19, 2002 3:47 PM
Ab in die Datenbank!
Wenn man eine Datenbanktabelle modelliert, muss man sich überlegen, welcher Datentyp in einer Spalte vorkommt. Datentypen können sein: Zahlen, Zeichenketten, Binärdaten usw. Für unser Beispiel benötigen wir die Datentypen varchar (Zeichenkette variabler Länge) für den Vornamen und Integer (Ganzzahl) für das Alter und die Zeit. Die Zeit wollen wir in einem unter UNIX üblichen Format speichern: als die Anzahl verstrichener Millisekunden seit dem 1.1.1970. Lassen Sie uns nach diesen grundsätzlichen Überlegungen die Tabelle mittels phpMyAdmin anlegen:
1
Öffnen Sie einen Browser und gehen Sie zur Startseite von phpMyAdmin: http://localhost/phpmyadmin.
2
Erzeugen Sie für unsere Testzwecke eine neue Datenbank namens phorm (Abbildung 4.7).
Abbildung 4.7: Erzeugen einer neuen Datenbank
3
Scrollen Sie etwas nach unten zur Rubrik Neue Tabelle erstellen. Erzeugen Sie eine neue Tabelle mit dem Namen Formulardaten. Geben Sie als Feldanzahl 3 ein (Abbildung 4.8), da wir drei Spalten benötigen: Zeit, Vorname und Alter.
71
2-6496.book Page 72 Tuesday, November 19, 2002 3:47 PM
Was mache ich mit all den Daten?
Abbildung 4.8: Neue Tabelle erstellen
4 5
Klicken Sie auf OK, um mit der Definition der Spalten fortzufahren. Füllen Sie die Felder wie in Definition der Tabellenspalte gezeigt. Kreuzen Sie für das Feld time noch das Kontrollkästchen Primärschlüssel an, das Sie nur dann auf dem Bildschirm sehen, wenn Sie etwas nach rechts scrollen.
Abbildung 4.9: Definition der Tabellenspalten
6 72
Klicken Sie auf die Schaltfläche Speichern.
2-6496.book Page 73 Tuesday, November 19, 2002 3:47 PM
Ab in die Datenbank!
Damit haben Sie die Grundlage geschaffen, um Daten ablegen zu können. Wie erkennt Phorm, in welche Datenbank, Tabelle und in welche Spalten bestimmte Formularfelder gespeichert werden sollen? Dies wird wieder über Variablen in der Konfigurationsdatei gesteuert. Öffnen Sie die Konfigurationsdatei phormconfig.php3 und fügen Sie folgende Zeilen hinzu: $DHost $DUser $DPass $DBase
= = = =
"localhost"; "donald"; "donald"; "phorm";
Damit weiß Phorm, wie es sich mit MySQL verbinden soll und in welche Datenbank die Daten gehören. Jetzt fehlt nur noch die Zuordnung zu den Spalten einer Tabelle. Fügen Sie dazu folgende Zeilen hinzu: $PHORM_MYTABLE = "Formulardaten"; $PHORM_MYVARS = "time=Zeit, name=Vorname, age=Alter";
Die erste Zeile ist klar: Hier wird die Tabelle angegeben. In der zweiten Zeile wird dann die Zuordnung von Spaltennamen zu Formularfeldern vorgenommen. Speichern Sie die Konfigurationsdatei. Um zu erfahren, wann das Formular abgeschickt wurde, müssen wir nun nur noch die Formularseite test.html verändern. Öffnen Sie die Datei und fügen Sie die folgenden Zeilen zwischen die form-Tags ein:
Dieser Code bewirkt ein für den Benutzer unsichtbares Formularfeld, das als Wert das Resultat einer PHP-Anweisung hat: echo time();. Die Funktion time() liefert die aktuelle Zeit zurück und echo schreibt diese in das HTML-Dokument. Der Quellcode sieht dann insgesamt folgendermaßen aus:
73
2-6496.book Page 74 Tuesday, November 19, 2002 3:47 PM
Was mache ich mit all den Daten?
Speichern Sie die Datei unter dem Namen test.php. Die Endung .php muss angegeben werden, damit die in der Datei enthaltene PHP-Anweisung ausgeführt wird. Rufen Sie zum Testen die veränderte Datei im Browser auf, geben Sie Testwerte ein (diesmal ein korrektes Alter) und schicken Sie das Formular ab. Um zu sehen, ob die Daten in der Datenbank gespeichert wurden, verwenden Sie wieder phpMyAdmin. Wählen Sie aus der linken Menüleiste die Datenbank phorm aus und dann die Tabelle Formulardaten (Abbildung 4.10).
Abbildung 4.10: Auswählen der Tabelle
Klicken Sie jetzt auf den Link Anzeigen in der oberen Menüzeile, um die Einträge der Tabelle sehen zu können (Abbildung 4.11). Sollte der Link nicht aktiv sein, hat irgendetwas nicht funktioniert.
74
2-6496.book Page 75 Tuesday, November 19, 2002 3:47 PM
Anpassen der Bestätigungsseite
PROFITIPP
Abbildung 4.11: Tabellendaten anzeigen
Wenn etwas nicht funktioniert, schauen Sie sich Ihre E-Mails an. Die Fehlermeldungen werden von Phorm an die E-Mail-Adresse geschickt, die Sie in phormconfig.php3 in der Variable $PHORM_ALERTTO angegeben haben.
4.7 Anpassen der Bestätigungsseite Ihnen ist sicher schon störend aufgefallen, dass die Bestätigungsseite in Englisch verfasst ist. Das wollen wir ändern. Auch die Schmetterlingsgrafik passt uns nicht, wir wollen etwas Eigenes. Kein Problem, Phorm bietet umfangreiche Anpassungsmöglichkeiten. Erstellen Sie eine neue Datei im phorm-Verzeichnis mit dem Namen bestaetigung.html und mit folgendem Inhalt: Vielen Dank, {{Vorname}}! Wir haben deine Daten erhalten.
75
2-6496.book Page 76 Tuesday, November 19, 2002 3:47 PM
Was mache ich mit all den Daten?
Der Ausdruck {{Vorname}} wird beim Anzeigen der Seite durch den Inhalt des Formularfelds Vorname ersetzt, sodass der Benutzer eine individuelle Meldung bekommt und sich persönlich angesprochen fühlt. Damit die neu erstellte Bestätigungsdatei auch benutzt wird, muss in der Konfigurationsdatei phormconfig.php3 eine neue Variable definiert werden: $PHORM_ACK = "bestaetigung.html";
Nun können Sie die Funktionalität testen. Nach dem Abschicken des Formulars sollten Sie eine Seite wie in Abbildung 4.12 erhalten.
Abbildung 4.12: Die neue Bestätigungsseite
Damit haben Sie den Grundkurs in Phorm absolviert. Herzlichen Glückwunsch!
4.8 Der Umgang mit mehreren Formularen Vielleicht ist es Ihnen schon aufgefallen: Wir haben bisher immer mit demselben einfachen Formular gearbeitet. Häufig gibt es auf einer Website aber mehrere Formulare. Jedes dieser Formulare kann eigene Regeln und unterschiedliche Bestätigungsseiten haben. Um dieses Problem zu lösen, kann man Unterverzeichnisse erstellen, die dann die jeweils notwendigen Dateien enthalten. Natürlich muss man Phorm vorgeben, für welches Formular es welche Unterverzeichnisse benutzen soll. Das folgende Beispiel soll dies verdeutlichen: Nehmen wir an, Sie möchten Ihrer Website ein weiteres Formular hinzufügen, das einem Benutzer erlaubt, Informationsmaterial anzufordern (Abbildung 4.13).
76
2-6496.book Page 77 Tuesday, November 19, 2002 3:47 PM
Der Umgang mit mehreren Formularen
AUF DER
CD-ROM
Abbildung 4.13: Formular zum Anfordern von Informationen
Den Quellcode für alle Beispiele dieses Unterkapitels finden Sie auf der CD-ROM im Verzeichnis \software\phorm\Info-Formular.
Gehen Sie folgendermaßen vor:
1
Erstellen Sie ein Unterverzeichnis info-formular in Ihrem phorm-Verzeichnis. Alle weiteren Dateien legen Sie in diesem Ordner an.
2
Erstellen Sie eine Datei formular.html mit folgendem Inhalt oder kopieren Sie sie von der CD-ROM:
Informationsmaterial anfordern
Beachten Sie die Zeilen
Damit wird dem Formular ein Name gegeben, der dann von Phorm ausgewertet wird, um in ein Verzeichnis zu wechseln, in dem dann die spezifizierte Konfigurationsdatei (im Beispiel infoconfig.php3) steht. Mithilfe der Konfigurationsdatei werden dann die zugehörige Regeldatei, die Fehlerseite und die Bestätigungsseite festgelegt.
3
Erstellen Sie eine Konfigurationsdatei infoconfig.php3 für dieses Formular. Der einzige Unterschied zu der schon bekannten phormconfig.php3 ist, dass die neue Datei in einem Unterverzeichnis steht. Der Inhalt ist aber nahezu identisch:
78
2-6496.book Page 79 Tuesday, November 19, 2002 3:47 PM
Der Umgang mit mehreren Formularen
Neu für Sie ist hier die Zeile $PHORM_TMPL = email_tpl.txt. Damit wird eine Vorlage für die zu sendende E-Mail festgelegt. Wir werden die Vorlage in einem späteren Schritt erstellen.
4
Als Nächstes erstellen wir die Regeldatei regeln.txt. Wir legen fest, dass der Name aus Buchstaben bestehen muss, PLZ eine Zahl ist und unter E-Mail eine gültige E-Mail-Adresse angegeben ist: FILES fehler.html RULES ALPHA Name 1 Im Feld Namen sind nur Buchstaben erlaubt. ### NUMERIC PLZ 1 Als Postleitzahl sind nur Zahlen gültig. ### EMAIL Email 1 Sie haben eine ungültige E-Mail-Adresse eingegeben. ### REQ Email 1 Bitte geben Sie eine E-Mail-Adresse an. ###
5
Kopieren Sie die Bestätigungsseite bestaetigung.html und die Fehlerseite fehler.html von der CD-ROM.
6
Es fehlt noch die Vorlagendatei für die E-Mail, der wir in Schritt 3 den Namen email_tpl.txt gegeben haben: Sehr geehrte Damen und Herren, bitte schicken Sie mir Informationsmaterial. Name: {{Name}} Straße: {{Straße}} PLZ: {{PLZ}} Ort: {{Ort}} Für Rückfragen können Sie mich unter folgender E-MailAdresse erreichen: {{E-Mail}}
7
Als Letztes müssen wir Phorm noch mitteilen, dass es für dieses Formular in ein anderes Verzeichnis wechseln soll. Dazu verändern wir eine Datei namens phormbase.php3, die im phorm-Verzeichnis zu finden ist. Öffnen Sie die Datei in einem Editor und fügen Sie folgende Zeile hinzu:
79
2-6496.book Page 80 Tuesday, November 19, 2002 3:47 PM
Was mache ich mit all den Daten?
infos
info-formular
PROFITIPP
Achten Sie darauf, dass Sie als Trennung zwischen beiden Wörtern die (ÿ)-Taste verwenden. Phorm liest trotzdem noch die globale Konfigurationsdatei phormconfig.php3 ein. Da wir dort festgelegt haben, dass Formulardaten in die MySQL-Datenbank geschrieben werden sollen, versucht es Phorm auch mit dem Info-Formular. Das kann aber nicht funktionieren, da es vollkommen andere Felder benutzt. Um eine Fehler-E-Mail zu umgehen, löschen Sie die Datenbankkonfiguration aus phormconfig.php3. Wenn Sie die Daten des Info-Formulars in die Datenbank schreiben wollen, müssen Sie entsprechende Variablen in der Datei infoconfig.php3 anlegen.
Ergebnis dieses Workshops Das war viel, aber es hat sich gelohnt ! Sie haben in diesem Workshop ein Skript namens Phorm kennen gelernt, dass Formulardaten entgegennimmt und weiterverarbeitet. Damit können Sie sich Daten per Email zuschicken und sogar in eine Datenbank schreiben lassen. Geben Sie Testdaten in das Formular ein (Abbildung 4.14).
Abbildung 4.14: Formular mit Testdaten
80
2-6496.book Page 81 Tuesday, November 19, 2002 3:47 PM
Der Umgang mit mehreren Formularen
Klicken Sie auf die Schaltfläche anfordern, um das Formular abzuschicken. Sie sollten eine E-Mail wie in Abbildung 4.15 erhalten.
Abbildung 4.15: Die E-Mail
81
2-6496.book Page 82 Tuesday, November 19, 2002 3:47 PM
2-6496.book Page 83 Tuesday, November 19, 2002 3:47 PM
Workshop 5 Jetzt wird es bunt! Wie Sie Grafiken dynamisch erzeugen können Was wäre eine Webseite heutzutage ohne Bilder? Langweilig! Daher werden fast immer Grafiken und Fotos eingebaut. Diese sind aber meist schon vorher erstellt worden und liegen als Gif- oder Jpeg-Dateien auf der Festplatte. Es geht aber auch anders: Grafiken lassen sich „on the fly“ – also während ein PHP-Skript abläuft so nebenbei – erzeugen. Das ist insbesondere dann sinnvoll, wenn sich das Aussehen der Grafik im Laufe der Zeit oder in Abhängigkeit von Benutzerdaten ändert. Alle Arten von Diagrammen fallen zum Beispiel in diese Kategorie. Ein hervorragendes Tool hierfür ist JpGraph, dessen Funktionsvielfalt seinesgleichen sucht. Ich werde Ihnen in diesem Kapitel JpGraph näher bringen.
Ergebnis dieses Workshops In diesem Workshop werden Sie Diagramme erstellen, die Sie dann in Ihre Homepage integrieren können. Die Diagramme werden Sie dynamisch von JpGraph erzeugen lassen. So können Sie Daten, die Sie zum Beispiel in einer Datenbank abgelegt haben, ansprechend präsentieren.
2-6496.book Page 84 Tuesday, November 19, 2002 3:47 PM
Jetzt wird es bunt!
5.1 Die Installation
AUF DER
CD-ROM
Vor dem Vergnügen steht wie immer die Arbeit: die Installation des JpGraph-Programmpakets und seine Konfiguration. Übrigens: JpGraph ist für nicht-kommerzielle Zwecke kostenlos zu haben.
Die Archivdatei jpgraph1.8.tar.gz finden Sie auf der CD-ROM im Verzeichnis \software\JpGraph. Im Internet finden Sie eine aktuelle Version unter http://www.aditus.nu/jpgraph/.
Entpacken Sie die Archivdatei in den Dokumentenordner Ihres Webservers. Wenn Sie PHPTriad benutzen, ist das c:\apache\htdocs. Prinzipiell ist JpGraph nun bereits einsatzbereit. Bei einer Standardinstallation von PHPTriad muss allerdings noch ein PHP-Modul eingebunden werden, dass Befehle zum Erstellen und Manipulieren von Bildern ermöglicht: das so genannte GD-Modul. Gehen Sie dazu folgendermaßen vor: Öffnen Sie in einem Texteditor die PHP-Konfigurationsdatei php.ini im Verzeichnis c:\apache\php.
2
Suchen Sie den Abschnitt Windows Extensions (Zeile 414, siehe Abbildung 5.1). Darunter sind alle verfügbaren Module von PHP aufgelistet. Beachten Sie das Semikolon am Anfang der Zeile. Es bedeutet, dass das Modul inaktiv ist, also nicht benutzt wird. Entfernen Sie das Semikolon vor dem Eintrag extension=php_gd.dll, um die GD-Funktionsbibliothek einzubinden.
VORSICHT!
1
84
Wenn Sie nicht mit PHPTriad arbeiten, müssen Sie gegebenenfalls noch den Pfad konfigurieren, in dem Ihre Extension-Dateien zu finden sind. Auch das machen Sie in der Datei php.ini im Abschnitt Extensions.
2-6496.book Page 85 Tuesday, November 19, 2002 3:47 PM
Die Installation
Abbildung 5.1: Ändern der PHP-Konfigurationsdatei
Speichern Sie die Datei. Beim nächsten Aufruf eines PHP-Scripts werden die neuen Einstellungen übernommen.
VORSICHT!
3
Auf Ihrem Webspace können Sie in den meisten Fällen die PHPKonfiguration nicht ändern. Fragen Sie also nach, ob die GD-Bibliothek und TrueType-Fonts vorhanden sind.
Damit Sie JpGraph optimal ausnutzen können, sollten Sie noch ein paar JpGraphParameter einstellen. Öffnen Sie dazu die Datei jpgraph.php im Unterverzeichnis src der JpGraph-Installation. Im Abschnitt Directories können Sie die Einträge an Ihre Gegebenheiten anpassen (Abbildung 5.2).
85
2-6496.book Page 86 Tuesday, November 19, 2002 3:47 PM
Jetzt wird es bunt!
Abbildung 5.2: Anpassen von JpGraph
Jetzt sind wir so weit und können JpGraph in Aktion sehen! Öffnen Sie einen Browser und wechseln Sie zur URL http://localhost/jpgraph-1.8/src/ Examples/example0.php. Wenn alles gut geht, sehen Sie ein Diagramm wie in Abbildung 5.3.
Abbildung 5.3: Ein Beispieldiagramm
86
2-6496.book Page 87 Tuesday, November 19, 2002 3:47 PM
Die Installation
Um einen Überblick über die vielfältigen Möglichkeiten von JpGraph zu bekommen, können sie die URL http://localhost/jpgraph-1.8/src/Examples/testsuit.php aufrufen (Abbildung 5.4). Das Laden der Seite dauert allerdings sehr lange, da über 200 Diagramme erzeugt werden.
Abbildung 5.4: Die JpGraph-Testseite
Jetzt brennen sie bestimmt schon darauf, selbst Grafiken erstellen zu lassen. Dann lesen Sie schnell weiter!
87
2-6496.book Page 88 Tuesday, November 19, 2002 3:47 PM
Jetzt wird es bunt!
5.2 Do it yourself Eine schlechte Nachricht vorab: Um Grafiken erzeugen zu lassen, müssen Sie programmieren. Aber keine Angst, ich zeige Ihnen genau, was Sie machen müssen. Wenn Sie mehr Hintergrundinformationen brauchen, lesen Sie im Anhang den Abschnitt über PHP und seine Programmierkonzepte. Wir fangen ganz einfach an, mit einem Code-Gerüst, das für alle folgenden Beispiele gültig sein wird. Erstellen Sie die Datei mit dem Namen beispiel1.php im JpGraphInstallationsverzeichnis (c:\apache\htdocs\jpgraph-1.8). Als Erstes muss die JpGraph-Grundfunktionalität eingebunden werden: include ("src/jpgraph.php");
PROFITIPP
1
Unsere Beispiele sollen im JpGraph-Installationsverzeichnis liegen, daher genügt der relative Pfad zu der jpgraph-Datei. Sollten sich Ihre Dateien an anderer Stelle befinden, müssen sie den Pfad entsprechend anpassen. Wenn Sie Ihre Dateien zum Beispiel im Verzeichnis c:\apache\ htdocs\test anlegen, müsste die obige Zeile lauten: include ("c:/apache/htdocs/jpgraph-1.8/src/ jpgraph.php");
oder wieder relativ: include ("../jpgraph-1.8/src/jpgraph.php");
2
Als Nächstes muss man sich entscheiden, welche Art von Diagramm oder Grafik man erzeugen möchte. Daraus ergibt sich nämlich das JpGraph-Modul, dass eingebunden werden muss. Wir wollen eine Line-Chart erzeugen, daher lautet der Befehl: include ("src/jpgraph_line.php");
3
Die Daten, die dargestellt werden sollen (Punkte auf der y-Achse) geben wir in einem so genannten Array an: $ydata = array(11,3,8,12,5,1,9,13,5,7);
4
88
Jetzt erzeugen wir die zunächst noch leere Grafik in der Größe 350 x 250 Pixel: $graph = new Graph(350,250,"auto"); $graph->SetScale("textlin");
2-6496.book Page 89 Tuesday, November 19, 2002 3:47 PM
Do it yourself
5
In diese leere Grafik soll nun ein Liniendiagramm eingefügt werden. Dazu erzeugen wir ein Liniendiagramm mit der folgenden Anweisung: $plot=new LinePlot($ydata);
Beachten Sie, dass der Befehl als Parameter unser Datenarray $ydata bekommt.
6
Jetzt fügen wir das Liniendiagramm der Grafik hinzu:
7
Schließlich lassen wir die fertige Grafik zeichnen:
$graph->Add($plot);
$graph->Stroke();
Das war’s. Und hier noch einmal das komplette Listing: SetScale("textlin"); $plot=new LinePlot($ydata); $graph->Add($plot);
AUF DER
CD-ROM
$graph->Stroke(); ?>
Dieses erste Beispiel finden Sie auf der CD-ROM im Verzeichnis \software\JpGraph. Es trägt den Namen beispiel1.php. Die nächsten drei Beispiele finden Sie ebenfalls dort.
89
2-6496.book Page 90 Tuesday, November 19, 2002 3:47 PM
Jetzt wird es bunt!
Wechseln Sie im Browser zur URL http://localhost/jpgraph-1.8/beispiel1.php, um das Ergebnis zu sehen (Abbildung 5.5).
Abbildung 5.5: Ergebnis des ersten Beispielcodes
Die Art des Diagramms lässt sich in einfacher Weise ändern. Sie müssen lediglich das entsprechende Modul einbinden und eine Programmzeile ändern: Schreiben Sie statt include ("src/jpgraph_line.php");
die Anweisung include ("src/jpgraph_bar.php");
um das Balkendiagramm-Modul einzubinden. Ändern sie die Zeile $plot=new LinePlot($ydata);
um in: $plot=new BarPlot($ydata);
90
2-6496.book Page 91 Tuesday, November 19, 2002 3:47 PM
Do it yourself
Nun erhalten Sie statt des Liniendiagramms ein Balkendiagramm (Abbildung 5.6).
Abbildung 5.6: Balkendiagramm
Wenn Sie lieber ein Tortendiagrammanzeigen lassen möchten, ändern Sie die includeAnweisung ab in: include ("src/jpgraph_pie.php");
Die Code-Zeile ändern Sie ebenfalls ab in: $plot=new PiePlot($ydata);
Ersetzen Sie jetzt noch die Zeile $graph = new Graph(350,250,"auto");
durch $graph = new PieGraph(350,250,"auto");
und schon erhalten Sie einen leckeren Kuchen (Abbildung 5.7).
91
2-6496.book Page 92 Tuesday, November 19, 2002 3:47 PM
Jetzt wird es bunt!
Abbildung 5.7: Tortendiagramm
Als letztes Beispiel möchte ich Ihnen noch eine ausgefallene Diagrammart zeigen: das Radardiagramm. Das Listing sieht folgendermaßen aus: SetScale("lin"); $plot=new RadarPlot($ydata); $graph->Add($plot); $graph->Stroke(); ?>
92
2-6496.book Page 93 Tuesday, November 19, 2002 3:47 PM
Weitere Extras
Das Ergebnis sehen Sie in Abbildung 5.8.
Abbildung 5.8: Radardiagramm
5.3 Weitere Extras Das war natürlich noch lange nicht alles, was JpGraph kann. Insbesondere die kleinen Details machen aus einem langweiligen Diagramm ein optisch ansprechendes, wie Sie in Abbildung 5.9 sehen können.
Abbildung 5.9: Balkendiagramm
93
2-6496.book Page 94 Tuesday, November 19, 2002 3:47 PM
Jetzt wird es bunt!
Hier hat sich im Vergleich zu Beispiel 2 aus dem letzten Abschnitt viel geändert. Die X-Achse ist beschriftet, es gibt eine Überschrift, die Balken sind breiter und haben einen Farbverlauf. Der dazugehörige Code lautet: SetScale("textlin"); $graph->img->SetMargin(60,20,30,50); $graph->SetMarginColor("silver"); $graph->SetShadow(); $graph->title->Set("Balkendiagramm"); $graph->title->SetColor("darkred"); $graph->xaxis->SetTickLabels($datax); $bplot = new BarPlot($datay); $bplot->SetWidth(0.8); $bplot->SetFillGradient("navy","lightblue",GRAD_MIDVER); $graph->Add($bplot);
AUF DER
CD-ROM
$graph->Stroke(); ?>
Das Beispiel finden Sie auf der CD-ROM im Verzeichnis \software\ JpGraph. Die Datei lautet extral.php.
Was passiert hier? Zunächst kommen wieder die Ihnen schon bekannten include-Anweisungen: include ("src/jpgraph.php"); include ("src/jpgraph_bar.php");
94
2-6496.book Page 95 Tuesday, November 19, 2002 3:47 PM
Weitere Extras
Dann werden Datenpunkte für die Y-Achse festgelegt: $datay=array(13,25,21,35,31,6);
Neu ist, dass für diese Datenpunkte zugehörige Beschriftungen für die X-Achse definiert werden: $datax=array("Jan","Feb","Mär","Apr","Mai","Jun");
Als Nächstes wird eine leere Grafik der Größe 400 x 200 Pixel erzeugt:
PROFITIPP
$graph = new Graph(400,200,"auto");
Das "auto" bewirkt, dass das Bildformat automatisch gewählt wird. Wenn möglich wird png benutzt, ansonsten gif oder jpeg.
Die folgende Anweisung bewirkt, dass die X-Achse eine Textskala erhält und die YAchse eine lineare Zahlenskala: $graph->SetScale("textlin");
Nun wird der Rahmen festgelegt, also der Bereich zwischen Grafikrand und Diagrammrand. Die Reihenfolge der Parameter ist: linker Rand, rechter Rand, oberer Rand, unterer Rand. $graph->img->SetMargin(60,20,30,50);
Die Randfarbe wird auf Silber eingestellt: $graph->SetMarginColor("silver");
Die nächste Anweisung fügt der Grafik einen Schatten zu, sodass es so wirkt, als ob sie ein wenig oberhalb des Untergrunds schweben würde: $graph->SetShadow();
Jetzt wird die Überschrift und ihre Farbe definiert: $graph->title->Set("Balkendiagramm"); $graph->title->SetColor("darkred");
Damit die X-Achse Ihre Beschriftung erhält, wird folgender Code verwendet: $graph->xaxis->SetTickLabels($datax);
Die nächste Anweisung kennen Sie bereits aus den einfachen Beispielen. Sie dient dazu, ein Balkendiagramm zu erzeugen: $bplot = new BarPlot($datay);
95
2-6496.book Page 96 Tuesday, November 19, 2002 3:47 PM
Jetzt wird es bunt!
Die Dicke der Balken lässt sich im Bereich von 0–1 festlegen: $bplot->SetWidth(0.8);
Jetzt fehlt nur noch der Farbverlauf: $bplot->SetFillGradient("navy","lightblue",GRAD_MIDVER);
Diese etwas komplexere Anweisung setzt die äußere Farbe der Balken auf Navy-Blau (navy) und die innere auf Hellblau (lightblue). Die Zwischentöne werden dann errechnet. Der letzte Parameter (GRAD_MIDVER) setzt die Art des Farbverlaufs – in unserem Fall von außen zur Mitte hin. Probieren Sie statt GRAD_MIDVER auch einmal den Wert GRAD_HOR oder GRAD_VER. Die nächsten beiden Anweisungen fügen das Diagramm der Grafik hinzu und zeichnen die Grafik.
5.4 MySQL als Datenquelle Nehmen wir an, sie wollten folgende Tabelle mit den Daten einer Bundestagswahl als Tortendiagramm darstellen (Abbildung 5.10): SPD 38,5 % CDU 38,5% Grüne 9 % FDP 7,5 % PDS 4 % Sonstige 3,5 %
Abbildung 5.10: Wahlergebnisse als Tortendiagramm
96
2-6496.book Page 97 Tuesday, November 19, 2002 3:47 PM
MySQL als Datenquelle
Dazu benötigen wir folgenden Code: SetShadow(); $graph->title->Set("Wahlergebnisse"); $p1 = new PiePlot3D($data); $p1->SetAngle(40); $p1->SetSize(0.5); $p1->SetCenter(0.45); $p1->SetLegends($legende); $p1->SetSliceColors($farben);
AUF DER
CD-ROM
$graph->Add($p1); $graph->Stroke(); ?>
Das Beispiel finden Sie auf der CD-ROM im Verzeichnis \software\ JpGraph. Die Datei lautet wah1l.php.
Nun wäre es doch sehr praktisch, wenn Sie die Datenwerte aus einer Tabelle in der MySQL-Datenbank lesen und daraus das Diagramm erzeugen könnten. Kein Problem, ich zeige Ihnen wie das geht. Dazu legen wir zunächst die Tabelle in der MySQL-Datenbank an.
97
2-6496.book Page 98 Tuesday, November 19, 2002 3:47 PM
Jetzt wird es bunt!
1
Wechseln Sie im Browser auf die MySQL-Administrationsseite (http://localhost/ phpmyadmin).
2
Schreiben Sie in das Feld Neue Datenbank erzeugen den Namen wahl und klicken Sie auf Erzeugen.
3
Scrollen Sie zum Bereich Neue Tabelle erstellen und geben Sie als Namen ergebnisse und als Anzahl Felder 2 ein (Abbildung 5.11).
Abbildung 5.11: Neue Tabelle erzeugen
4
Füllen Sie die Felder wie in Abbildung 5.12 gezeigt und klicken Sie auf Speichern.
Abbildung 5.12: Spalten definieren
98
2-6496.book Page 99 Tuesday, November 19, 2002 3:47 PM
MySQL als Datenquelle
5
Jetzt ist die Tabelle mit zwei Spalten angelegt und wir können sie mit Werten füllen. Klicken sie dazu auf den Link Einfügen im oberen Menü.
6
Füllen Sie die Felder analog zu Abbildung 5.13 und klicken Sie auf OK. Wenn Sie die Option Neuen Datensatz einfügen aktiviert haben, können Sie gleich mit dem nächsten Datensatz weitermachen. Verfahren Sie so für alle Parteien.
Abbildung 5.13: Werte eintragen
7
Aktivieren Sie beim letzten Datensatz die Option zurück , um wieder auf die Hauptseite der Tabelle zu gelangen. Klicken Sie hier auf den Link Anzeigen, um die Tabelleneinträge zu überprüfen. Sie sollten ein Ergebnis wie in Abbildung 5.14 erhalten.
Das war die Vorarbeit. Die Daten befinden sich nun in einer Datenbank. Diese Daten können natürlich auch aus einer Online-Umfrage kommen und dann in dieser Tabelle gespeichert werden.
99
2-6496.book Page 100 Tuesday, November 19, 2002 3:47 PM
Jetzt wird es bunt!
Abbildung 5.14: Anzeigen des Tabelleninhaltes
AUF DER
CD-ROM
Wie bekommen wir jetzt die Daten als Werte in ein Diagramm? Dazu habe ich Ihnen ein PHP-Script geschrieben, das Ihnen alle lästigen Details abnimmt.
Das Script finden Sie auf der CD-ROM im Verzeichnis \software\ JpGraph unter dem Namen dataFromDB.php.
Die Funktionalität des Scripts können Sie über die folgende Anweisung einbinden: include ("dataFromDB.php");
Um sich mit der MySQL-Datenbank zu verbinden, geben Sie folgenden Code ein: connectToDB("localhost", "donald", "donald", "wahl");
100
2-6496.book Page 101 Tuesday, November 19, 2002 3:47 PM
MySQL als Datenquelle
Die Parameter sind – der Reihe nach – der Name des Datebankrechners (in den allermeisten Fällen localhost), der Benutzername, das Passwort und die Datenbank, mit der man sich verbinden möchte. Um dann ein Daten-Array aus einer Tabelle zu erhalten, schreiben Sie: $data = dataFromTable("ergebnisse", "prozente");
Als Parameter erwartet die Funktion den Namen der Tabelle und den Namen der Spalte, aus der die Werte genommen werden sollen. Wenn alle Daten aus der Datenbank geholt wurden, sollten Sie die Datenbankverbindung mit folgendem Befehl wieder schließen: closeConToDB();
Insgesamt sieht unser Script zur Erzeugung eines Tortendiagramms folgendermaßen aus:
("src/jpgraph.php"); ("src/jpgraph_pie.php"); ("src/jpgraph_pie3d.php"); ("dataFromDB.php");
2-6496.book Page 102 Tuesday, November 19, 2002 3:47 PM
AUF DER
CD-ROM
Jetzt wird es bunt!
Das Script finden Sie auf der CD-ROM unter dem Namen wahl2.php im Verzeichnis \software\JpGraph.
5.5 Hilfe Dieses Kapitel war nur ein Crashkurs in JpGraph. Wenn Sie die vielen Funktionen von JpGraph wirklich nutzen wollen (und die englische Sprache beherrschen), gibt es viele Dokumente und Webseiten, die Ihnen weiterhelfen. Zu nennen ist zunächst die Webseite von JpGraph: http://www.aditus.nu/jpgraph/ (Abbildung 5.15)
Abbildung 5.15: JpGraph-Homepage
102
2-6496.book Page 103 Tuesday, November 19, 2002 3:47 PM
Hilfe
Wenn Sie JpGraph installieren, bekommen Sie ein Handbuch mitgeliefert. Sie können es sich unter folgender URL ansehen: http://localhost/jpgraph-1.8/docs/manual/html/ (Abb. 5.16)
Abbildung 5.16: Das JpGraph-Handbuch
Das Handbuch wird Ihnen allerdings nur dann eine Hilfe sein, wenn Sie die Grundkonzepte des Programmierens kennen.
103
2-6496.book Page 104 Tuesday, November 19, 2002 3:47 PM
Jetzt wird es bunt!
Ergebnis dieses Workshops Sie haben in diesem Workshop gelern, wie Sie dynamisch Diagramme erzeugen können, die auf Daten basieren, die in einer Datenbank abgelegt sein können. Nutzen Sie JpGraph, um Ihre Seite aufzuwerten !
104
2-6496.book Page 105 Tuesday, November 19, 2002 3:47 PM
Workshop 6 Einladung zum Diaabend Wie Sie Ihre Freunde mit den letzten Urlaubsbildern entzücken Eines der häufigsten Anwendungsgebiete von privaten Homepages ist sicherlich das Veröffentlichen von Fotos. Wie verfährt man jedoch bei einer großen Anzahl an Fotos? Die Fotos müssen strukturiert abgelegt werden und vielleicht soll nicht jeder beliebige Surfer alle Bilder sehen können. Außerdem ist eine Übersicht über die Fotos hilfreich. Diese und andere Anforderungen erfüllen Web-Fotoalben. Ein besonders gutes und kostenloses Exemplar dieser Gattung nennt sich Gallery. Es ermöglicht Ihnen, eine Fotogalerie ins Netz zu stellen, die aus verschiedenen Fotoalben bestehen kann. Sie werden Gallery in diesem Kapitel kennen und vermutlich auch lieben lernen.
2-6496.book Page 106 Tuesday, November 19, 2002 3:47 PM
Einladung zum Diaabend
Ergebnis dieses Workshops In diesem Workshop werden Sie alles nötige lernen, damit Sie ein Fotoalbum ins Internet stellen können, so dass man Ihre Bilder auf der ganzen Welt bestaunen kann.
6.1 Installation
AUF DER
CD-ROM
Schreiten wir direkt zur Tat und beginnen mit der Installation von Gallery.
106
Die notwendigen Dateien zur Installation von Gallery finden Sie auf der CD-ROM unter \software\Gallery. Eine aktuelle Version bekommen Sie im Internet unter http://gallery.menalto.com.
1
Entpacken Sie das Archiv gallery-1.3.1.tar.gz in Ihr Dokumentenverzeichnis des Webservers (c:\apache\htdocs). Die Dateien im Archiv befinden sich bereits in einem Unterverzeichnis namens gallery, Sie brauchen also keines vorher anzulegen.
2
Entpacken Sie das Archiv netpbm1.1-gallery1.0-win32.tgz in das neu entstandene Verzeichnis gallery.
2-6496.book Page 107 Tuesday, November 19, 2002 3:47 PM
PROFITIPP
Installation
NetPBM ist eine Funktionsbibliothek zur Manipulation von Bildern. Da Gallery diese Funktionen verwendet, muss NetPBM auch auf dem Server installiert sein. Im Falle des Testsystems mit PHPTriad ist die Windows-Version zu benutzen. Auf der CD-ROM finden Sie auch eine Version für Linux namens netpbm1.1-gallery1.0-linux2.2-redhat6.2intel.tgz. Um Gallery auf Ihrem Webspace einsetzen zu können, müssen Sie vermutlich die Linux-Version in einem Verzeichnis Ihres Webspaces entpacken. Sollte Ihr Hoster ein anderes Betriebssystem verwenden (z.B. Solaris oder FreeBSD), müssen Sie sich entsprechende Versionen von NetPBM besorgen. Weitere Informationen und Download-Links finden Sie auf der Homepage von Gallery: http://gallery.menalto.com.
3
Öffnen Sie einen Browser und gehen Sie zur URL htpp://localhost/gallery/setup/, um die Installationsroutine von Gallery aufzurufen.
4
Sie befinden sich nun im ersten Installationsschritt. Hier wird überprüft, ob alle Bedingungen erfüllt sind, damit Gallery einwandfrei funktionieren kann (Abbildung 6.1). Es wird zum Beispiel überprüft, welche PHP-Version installiert ist und ob die NetPBM-Funktionsbibliothek gefunden werden kann. Einige Voraussetzungen sind optional, sodass Sie hier eine Meldung erhalten, die uns aber nicht weiter stört.
Abbildung 6.1: Schritt1 des Gallery-Setups
107
2-6496.book Page 108 Tuesday, November 19, 2002 3:47 PM
Einladung zum Diaabend
5
Klicken Sie auf Configure Gallery am Ende der Seite, um zum nächsten Installationsschritt zu gelangen.
6
In Schritt 2 der Installation legen Sie einige wichtige Grundeinstellungen fest. Folgende Felder müssen ausgefüllt werden: ■ Gallery Title (Überschrift Ihrer Bildergalerie): Test ■ Admin Password (Kennwort für den Administrator): goofy ■ Path to NetPBM (Pfad, in dem Sie NetPBM installiert haben): c:\apache\htdocs\gallery\netpbm ■ Album directory (Verzeichnis, in dem die Alben und Bilder abgelegt werden): c:\apache\htdocs\albums ■ Temporary Directory (Temporärer Ordner): Dieser ist je nach Betiebssystem unterschiedlich, unter Windows NT/2000 lautet er c:\winnt\temp ■ Alle weiteren Felder sind sicher ebenfalls interessant und bei Gelegenheit sollten Sie sich einmal alles genau durchlesen, aber jetzt sind wir zu ungeduldig dazu.
Abbildung 6.2: Schritt 2 der Installation
108
2-6496.book Page 109 Tuesday, November 19, 2002 3:47 PM
Installation
7
Erstellen Sie die Verzeichnisse, die Sie als Album- und Temporärverzeichnis festgelegt haben, falls Sie nicht bereits existieren.
8
Gehen Sie weiter zum nächsten Installationsschritt, indem Sie auf die Schaltfläche Album Defaults klicken.
9
In Schritt 3 der Installation können Sie die Voreinstellung für Fotoalben festlegen, die dann beim Erstellen neuer Alben als Standard übernommen wird. Sie können die Werte aber für jedes Album individuell verändern. Sie können die vorgeschlagenen Werte einfach übernehmen, aber auch hier gilt, dass Sie sich bei Gelegenheit eingehender damit beschäftigen sollten. Klicken Sie auf Save Settings, um zum letzten Installationsschritt zu gelangen.
10
Es wird angezeigt, welche Konfigurationseinstellungen sich durch Ihre Auswahl ergeben haben (Abbildung 6.3). Um den Inhalt brauchen Sie sich nicht zu kümmern, wichtig ist nur, dass keine rote Fehlermeldung erscheint. Wenn dies dennoch der Fall ist, gehen Sie noch einmal zurück und überprüfen Sie, ob Sie alle Schritte korrekt ausgeführt haben.
Abbildung 6.3: Der letzte Installationsschritt
11
Klicken Sie auf Save Config, um die Installation abzuschließen.
109
2-6496.book Page 110 Tuesday, November 19, 2002 3:47 PM
PROFITIPP
Einladung zum Diaabend
Sie erhalten eine Hinweismeldung, dass sie Gallery noch sichern müssen. Dabei geht es darum, die Rechte auf die Konfigurationsdatei zu ändern, sodass nicht jede beliebige Person sie ändern kann. Dies ist eigentlich nur wichtig, wenn Sie Gallery auf Ihrem Webspace betreiben. Mit dem in Kapitel 1 vorgestellten FTP-Client SmartFTP können Sie die Rechte auf die Kennzahl 644 setzen, indem Sie die Datei mit der Maus auswählen und dann (F7) drücken (Abbildung 6.4). Entsprechend verfahren Sie dann mit der Datei .htaccess.
Abbildung 6.4: Setzen der Dateirechte mit SmartFTP
Puh, das war ganz schön aufwändig. Aber es lohnt sich, wie Sie gleich sehen werden!
6.2 Let the show begin Prinzipiell ist Gallery jetzt einsatzbereit – es fehlt nur noch das Wichtigste: die Fotos! Sehen Sie sich zunächst die leere Galerie an: http://localhost/gallery/. Es gibt weder Alben noch Fotos, welch trister Anblick. Lassen Sie uns das schleunigst ändern und ein neues Album mit einigen Fotos erstellen:
110
2-6496.book Page 111 Tuesday, November 19, 2002 3:47 PM
Let the show begin
1
Klicken Sie auf den Link Login in der rechten oberen Ecke des Fensters, um sich als Administrator einzuloggen.
2
Geben Sie als Benutzername admin und als Passwort goofy ein (Abbildung 6.5) und klicken Sie auf die Schaltfläche Login.
Abbildung 6.5: Login-Fenster
Wie Sie sehen, haben Sie nun wesentlich mehr Möglichkeiten. Klicken Sie auf den Link new Album, um ein neues Album zu erstellen.
4
Das neue Album erhält standardmäßig den Namen Untitled (unbetitelt). Das werden wir später ändern. Zunächst wollen wir aber ein paar Bilder hinzufügen. Klicken Sie auf den Link add Photos.
AUF DER
CD-ROM
3
5
Falls Sie gerade keine Bilder in den unterstützten Formaten greifbar haben, habe ich Ihnen auf der CD-ROM drei Bilder mitgegeben. Sie finden Sie unter \software\Gallery\images.
Klicken Sie auf die jeweiligen Durchsuchen...-Schaltflächen, um zu Ihren Bildern zu navigieren (Abbildung 6.6). Falls Sie mehr als fünf Bilder hochladen wollen, müssen Sie die Anzahl entsprechend hochsetzen. Klicken Sie auf Upload Now, wenn Sie fertig sind.
111
2-6496.book Page 112 Tuesday, November 19, 2002 3:47 PM
Einladung zum Diaabend
Abbildung 6.6: Fotos hinzufügen
6
Es wird ein Wartefenster angezeigt und der Status der Uploads. Am Ende sehen Sie Ihre ersten Bilder in Gallery als Übersicht (Abbildung 6.7). Wollen Sie ein Bild genauer betrachten, müssen Sie nur darauf klicken.
Abbildung 6.7: Das erste Album
112
2-6496.book Page 113 Tuesday, November 19, 2002 3:47 PM
Keine Chance für Voyeure
Lassen Sie uns noch ein paar kosmetische Änderungen vornehmen: den Namen des Albums, die Hintergrundfarbe und den Bilderrahmen. Klicken Sie dazu auf den Link properties und ändern Sie die Einstellungen des Albums analog zu Abbildung 6.8. Klicken Sie auf Apply, um die Änderungen zu übernehmen.
Abbildung 6.8: Eigenschaften des Albums
Jetzt sieht das Ganze farblich doch schon etwas irischer aus, finden Sie nicht?
6.3 Keine Chance für Voyeure Es ist nicht jedermanns Sache, alle möglichen intimen Bilder ins Internet zu stellen, wo jeder auf der Welt sie sehen kann. Gallery ermöglicht es, pro Album zu unterscheiden, wer es anschauen darf und wer nicht. Dazu bietet es zunächst für eine grobe Unterscheidung folgende Benutzergruppen an: ■ EVERYBODY: jeder ■ NOBODY: keiner (außer dem Administrator, der darf alles) ■ LOGGEDIN: Alle eingeloggten Benutzer, unabhängig von der Kennung Zusätzlich kann man für jeden Benutzer einzeln Rechte vergeben. Insgesamt bietet Gallery ein ausgetüfteltes Rechtesystem, sodass hier sehr feine Unterscheidungen gemacht werden können. Die Grundlage für das Rechtesystem ist natürlich, dass außer dem Administrator noch weitere Benutzerkennungen existieren. Deswegen legen wir zunächst einen neuen Benutzer an:
1
Gehen Sie auf die Gallery-Startseite http://localhost/gallery/. Noch sind Sie als Administrator eingeloggt und haben daher auch auf der Startseite ein erweitertes Menü.
113
2-6496.book Page 114 Tuesday, November 19, 2002 3:47 PM
Einladung zum Diaabend
2
Wählen Sie den Link manage users in der oberen Menüzeile.
3
Im darauf folgenden Fenster können Sie auswählen, ob Sie einen bestehenden Benutzer ändern oder löschen oder einen neuen Benutzer anlegen wollen. Klicken Sie auf die Schaltfläche Create.
4
Geben Sie im erscheinenden Fenster die Benutzerdaten wie in Abbildung 6.9 ein, ein Passwort können Sie sich ausdenken.
Abbildung 6.9: Neuen Benutzer anlegen
5 6
Klicken Sie auf Create, um den Benutzer mit der Kennung voyeur zu erzeugen. Wiederholen Sie die letzten drei Schritte, um einen zweiten Benutzer namens freund zu erstellen.
Sie können sich wahrscheinlich schon denken, wo das hinführen soll: Der Benutzer mit der Kennung voyeur soll keine Rechte erhalten, d.h. keine Fotos anschauen dürfen, der Benutzer freund hingegen darf das Irland-Album sehen. Wie lässt sich das bewerkstelligen?
114
1
Wählen Sie aus dem Album-Menü, das für den Administrator auch auf der Startseite erreichbar ist, den Eintrag permissions.
2
Im linken großen Auswahlfenster sehen Sie alle Benutzerkennungen sowie die drei erwähnten Nutzergruppen EVERYBODY, LOGGEDIN und NOBODY. In den rechten kleinen Auswahlfenstern sind die Benutzer angezeigt, die das entsprechende Recht haben. Zurzeit ist unter Users who can see the album (Benutzer,
2-6496.book Page 115 Tuesday, November 19, 2002 3:47 PM
Keine Chance für Voyeure
die das Album sehen können) als Nutzergruppe EVERYBODY (jeder) angegeben. Das wollen wir abändern, wie in Abbildung 6.10 gezeigt.
Abbildung 6.10: Rechte ändern
Wählen Sie den Eintrag EVERYBODY aus der rechten Liste aus und klicken Sie auf den Pfeil nach links, um den Eintrag aus dem Fenster zu entfernen. Im Fenster steht jetzt NOBODY (niemand).
4
Wählen Sie jetzt aus dem linken Auswahlfenster den Eintrag freund und klicken Sie auf den Pfeil nach rechts, damit der Benutzer in der rechten Liste erscheint.
5
Klicken Sie auf die Schaltfläche Save zum Speichern der Änderungen und anschließend auf Done.
PROFITIPP
3
Wie sie auf der Rechteseite gesehen haben, gibt es eine Vielzahl an Rechten, die Sie vergeben können und nicht nur das Recht, ein Album anzuschauen oder nicht. Sie können folgende Rechte vergeben: ■ Ändern des Album-Texts ■ Hinzufügen von Fotos ■ Verändern von Fotos ■ Löschen von Fotos ■ Erstellen von Unteralben
115
2-6496.book Page 116 Tuesday, November 19, 2002 3:47 PM
Einladung zum Diaabend
Testen Sie die Ergebnisse Ihrer Bemühungen! Loggen Sie sich als Administrator aus, denn der Administrator darf ja generell alles sehen. Sie gehören jetzt zur Nutzergruppe EVERYBODY, da sie ein anonymer Surfer sind. Demzufolge sehen Sie auch das Irland-Album nicht. Loggen Sie sich zunächst als voyeur ein; es sollte sich nichts verändern. Probieren Sie es dann als Benutzer freund. Achten Sie darauf, dass Sie zwar die Fotos sehen, aber keinerlei Änderungen vornehmen können. Funktioniert es?
6.4 Gallery Remote
Da Gallery Remote in Java geschrieben ist, benötigen Sie eine JavaLaufzeitumgebung auf Ihrem Rechner. Falls Sie noch keine installiert haben, können Sie das so genannte JRE – Java Runtime Environment (Java-Laufzeitumgebung) von der Webseite http://java.sun.com herunterladen. Wählen Sie dort J2SE in der neuesten Version und suchen Sie den Download-Link zu JRE für Ihr Betriebssystem in der gewünschten Sprachversion. In unserem Fall wäre das die internationale Version für Windows. Aber auch für Linux findet sich dort eine Version.
AUF DER
CD-ROM
Gallery Remote finden Sie auf der CD-ROM unter \software\Gallery in einem Java-Archiv namens InstallGalleryRemote.jar.
VORSICHT!
Bilder einzeln hochzuladen, so wie wir das getan haben, mag für eine kleine Anzahl an Bildern in Ordnung sein. Aber wenn Sie Ihre Fotosammlung zum ersten Mal über Gallery zugänglich machen wollen, werden Sie vielleicht Hunderte von Fotos übertragen müssen. Für diesen und ähnliche Fälle bietet Gallery ein kostenloses Zusatztool namens Gallery Remote an. Gallery Remote läuft als Java-Applikation auf dem Rechner, auf dessen Festplatte die Bilder liegen. Es verbindet sich mit dem Webserver, auf dem Gallery läuft, und überträgt ausgewählte Bilder automatisch.
Starten Sie die Installation von Gallery Remote, indem Sie auf das Archiv doppelklicken. Sollten Java-Archive noch nicht mit der Lauftzeitumgebung verknüpft sein, werden Sie gefragt, mit welchem Programm die Datei geöffnet werden soll. Wählen Sie aus der Liste das Programm javaw und kreuzen Sie an, dass zukünftig immer dieses Programm zum Öffnen benutzt werden soll (Abbildung 6.11). Die Installation startet dann (Abbildung 6.12).
116
2-6496.book Page 117 Tuesday, November 19, 2002 3:47 PM
Gallery Remote
Abbildung 6.11: Verknüpfung für .jar-Dateien
Abbildung 6.12: Installation von Gallery Remote
Klicken Sie auf Next und übernehmen Sie die Standardparameter. Sie müssen im dritten Schritt die so genannte Java Virtual Machine auswählen, die benötigt wird, um Gallery Remote auszuführen. Diese JVM ist Bestandteil der Java-Laufzeitumgebung und nennt sich unter Windows java.exe. Nachdem Sie die JVM ausgewählt haben, klicken Sie sich weiter durch bis zum Installationsende.
117
2-6496.book Page 118 Tuesday, November 19, 2002 3:47 PM
AUF DER
CD-ROM
Einladung zum Diaabend
Sie sind fast am Ziel. Leider hat sich in der aktuellen Version von Gallery Remote ein Bug eingeschlichen, sodass sich das Programm nicht korrekt starten lässt. Diesen Fehler habe ich korrigiert, sie finden die verbesserten Dateien auf der CD-ROM im Ordner \software\Gallery\bugfix unter den Namen GalleryRemote.jar und RunGalleryRemote.bat. Kopieren Sie diese Dateien in das Installationsverzeichnis von Gallery Remote (im Normalfall C:\Program Files\Gallery).
Nun können Sie durch Doppelklick auf RunGalleryRemote.bat das Programm starten. Es öffnen sich zwei Fenster: ein Bildvorschau-Fenster und ein Hauptfenster (Abbildung 6.13).
Abbildung 6.13: Das Hauptfenster von Gallery Remote
Lassen Sie uns nach der anstrengenden Installationsarbeit jetzt die Früchte unserer Anstrengungen ernten: Wir wollen unserem Irland-Fotoalbum einige Bilder hinzufügen.
118
2-6496.book Page 119 Tuesday, November 19, 2002 3:47 PM
Gallery Remote
1
Geben Sie die URL Ihres Webspaces mit Gallery in das Feld Gallery URL ein. Für das Testsystem wäre das http://localhost/gallery. Geben Sie außerdem den Username admin und das Passwort goofy an.
2
Klicken Sie auf Fetch Albums. Nachdem sich Gallery Remote mit Gallery verbunden hat, sehen Sie die zur Auswahl stehenden Fotoalben im Feld Upload to Album. Das Irland-Album sollte hier bereits ausgewählt sein.
3
Öffnen Sie nun den Windows-Explorer und wechseln Sie auf die CD-ROM ins Verzeichnis \software\gallery\uploads. Ziehen Sie die dort befindlichen Bilder mit der Maus in die große weiße Fläche des Gallery-Remote-Fensters. Das Ergebnis sieht dann wie in Abbildung 6.14 aus. Wenn Sie ein Bild mit der Maus anwählen, sehen Sie es im Vorschau-Fenster.
Abbildung 6.14: Bilder zum Upload auswählen
4
Wenn Sie mit den Bildern zufrieden sind, klicken Sie auf die Schaltfläche Upload Now, um die Bilder Ihrem Web-Fotoalbum hinzuzufügen.
119
2-6496.book Page 120 Tuesday, November 19, 2002 3:47 PM
Einladung zum Diaabend
Das war’s. Sie können jetzt Ihr Fotoalbum bestaunen. Vergessen Sie aber nicht, sich als admin oder freund einzuloggen, denn andernfalls können Sie das Irland-Album nicht sehen.
Ergebnis dieses Workshops Sie haben jetzt die nötigen Kenntnisse und die nötigen Programme, um ein Fotoalbum in Ihre Website zu integrieren.
120
2-6496.book Page 121 Tuesday, November 19, 2002 3:47 PM
Workshop 7 Gibt’s was Neues? Immer auf dem Laufenden mit einem News-System Viele Websites haben eine Rubrik Neuigkeiten. Ist Ihnen schon aufgefallen, dass diese Neuigkeiten eher „Altigkeiten“ heißen müssten? Das liegt daran, dass die Organisation und Anzeige der News zu viel Arbeit macht. Es gibt aber eine Lösung: ein professionelles News-System. Ein News-System verwaltet alle Neuigkeiten und bietet Strukturierungselemente wie Kategorien. Neue Einträge hinzuzufügen ist sehr einfach. Die Installation, erstmalige Konfiguration und das Anpassen des Erscheinungsbildes erfordert einen gewissen Arbeitsaufwand. Dieser lohnt sich aber, da das weitere Arbeiten sehr einfach ist, insbesondere wenn Sie viele News-Artikel verwalten müssen. Aus der Vielfalt der frei erhältlichen News-Scripts habe ich ein deutsches Produkt namens SimpleNews ausgewählt, da es sehr flexibel ist und unzählige Features bietet. Das Standardlayout ist zwar farblich nicht ansprechend, aber das lässt sich zum Glück verändern.
2-6496.book Page 122 Tuesday, November 19, 2002 3:47 PM
Gibt’s was Neues?
Ergebnis dieses Workshops Sie lernen, wie Sie SimpleNews effektiv einsetzen können, um auf Ihrer Website Neuigkeiten darstellen zu können.
AUF DER
CD-ROM
7.1 Die Installation von SimpleNews
122
Das Zip-Archiv mit den notwendigen Dateien finden Sie auf der CD-ROM im Verzeichnis \software\simplenews. Im Internet finden Sie eine aktuelle Version unter http://www.boesch-it.de.
1
Legen Sie ein Verzeichnis namens simpnews im Dokumentenverzeichnis des Webservers (c:\apache\htdocs) an.
2
Extrahieren Sie das Archiv simpnews.zip in das neu erstellte Verzeichnis.
3
Öffnen Sie einen Browser und gehen sie zur URL http://localhost/simpnews/ admin/mkconfig.php. Wählen Sie Deutsch als Sprache (Abbildung 7.1).
2-6496.book Page 123 Tuesday, November 19, 2002 3:47 PM
Die Installation von SimpleNews
Abbildung 7.1: Auswahl der Sprache
4
Füllen Sie die Felder wie in Abbildung 7.2 gezeigt. Die meisten Werte sind bereits korrekt voreingestellt.
Abbildung 7.2: Konfigurationseinstellungen
123
2-6496.book Page 124 Tuesday, November 19, 2002 3:47 PM
Gibt’s was Neues?
5
Klicken Sie auf die Schaltfläche Submit. Sie erhalten die Meldung: config.php erzeugt.
6
Damit das Installationsscript, das wir später aufrufen, die notwendigen Datenbanktabellen anlegen kann, müssen wir zuerst eine Datenbank erzeugen. Wechseln Sie dazu zur URL des MySQL-Administrations-Tools: http://localhost/phpMyAdmin/.
7
Erstellen Sie eine neue Datenbank namens news (Abbildung 7.3).
Abbildung 7.3: Erstellen einer neuen Datenbank
Starten Sie das Installationsscript, indem Sie die URL http://localhost/admin/ install.php aufrufen und die Felder wie in Abbildung 7.4 angegeben füllen. Der Adminuser ist der Benutzer, der das News-System verwaltet und alle Rechte hat, um zum Beispiel News-Artikel zu löschen. Als Passwort wählen Sie am besten der Einfachheit halber goofy.
VORSICHT!
8
124
Wenn Sie SimpleNews auf Ihrem Webserver einsetzen, wählen Sie einen anderen Namen und ein anderes Kennwort für den Adminuser. goofy ist zu leicht zu erraten.
2-6496.book Page 125 Tuesday, November 19, 2002 3:47 PM
Die Installation von SimpleNews
Abbildung 7.4: Parameter für Installationsscript
9 10
Klicken Sie auf submit, um die Installation zu starten. Sie erhalten eine Bestätigungsseite. Löschen Sie folgende Dateien im admin-Verzeichnis: mkconfig.php fill_emoticons.php fill_icons.php fill_freemailer.php install.php upgrade_160_to_161.php upgrade_161_to_162.php upgrade_162_to_163.php upgrade_164_to_165.php upgrade_166_to_167.php
125
2-6496.book Page 126 Tuesday, November 19, 2002 3:47 PM
Gibt’s was Neues?
7.2 Das sind ja Neuigkeiten! Nun wollen wir SimpleNews ein bisschen Leben einhauchen, indem wir einen TestArtikel bereitstellen.
1
Wechseln Sie zur Administrationsseite http://localhost/simpnews/admin/.
2
Loggen Sie sich als Adminuser (goofy) ein. Zunächst werden Sie sicherlich von dem ungewöhnlichen Farbspiel überrascht ...
3
Sie sehen jetzt die Administrationsseite, die beim ersten Anblick erschlagend viele Funktionen bietet (Abbildung 7.5).
Abbildung 7.5: Die Administrationsseite
126
4
Wir fangen ganz oben an: Klicken Sie auf den Link Kategorien im Bereich Allgemein.
5
Jeder News-Artikel sollte einer Kategorie zugeordnet sein. Also müssen wir erst einmal eine Kategorie erstellen. Klicken Sie auf den Link neue Kategorie.
2-6496.book Page 127 Tuesday, November 19, 2002 3:47 PM
Das sind ja Neuigkeiten!
6
In das Feld Kategoriename schreiben Sie Politik und klicken auf hinzufügen (Abbildung 7.6).
Abbildung 7.6: Neue Kategorie erstellen
7
Gehen Sie wieder ins Hauptmenü und wählen Sie den Link Newseinträge bearbeiten aus der Rubrik News.
8
Da wir einen News-Artikel zur Kategorie Politik hinzufügen wollen, müssen wir zuerst die Kategorie wechseln. Wählen Sie dazu aus der Liste die Kategorie Politik aus und klicken Sie auf wechseln (Abbildung 7.7).
Abbildung 7.7: Wechsel der Kategorie
127
2-6496.book Page 128 Tuesday, November 19, 2002 3:47 PM
Gibt’s was Neues?
9
Nun können Sie einen neuen News-Artikel wie in Abbildung 7.8 gezeigt verfassen. Die Titelgrafiken sind vordefiniert, es können aber problemlos weitere hinzugefügt oder vorhandene gelöscht werden. Dazu müssen Sie lediglich die Dateien im Verzeichnis gfx\icons bearbeiten. Tippen Sie also einen von Ihnen gewünschten Text ein.
PROFITIPP
Abbildung 7.8: Neuen Artikel verfassen
10
128
Vielleicht fragen Sie sich, was :lol: im Text des News-Artikels bedeutet. Das ist Chatter-Slang und meint laughing out loud (laut loslachen). SimpleNews kennt den Chatter-Slang und übersetzt ihn in Smileys. Sie können aber auch direkt die Smileys unter dem Feld News anklicken, um Sie in den Text einzufügen.
Scrollen Sie ans Ende der Seite und klicken Sie auf den Link hinzufügen .
2-6496.book Page 129 Tuesday, November 19, 2002 3:47 PM
Anpassen des Designs
Das war’s. Sie haben Ihren ersten News-Artikel geschrieben. Den wollen Sie sich jetzt natürlich anschauen. Öffnen Sie dazu die URL http://localhost/simpnews/news.php ?category=1.
Abbildung 7.9: Der News-Artikel aus der Benutzersichtweise
7.3 Anpassen des Designs Die News-Seite sieht etwas altbacken aus, das wollen wir schleunigst ändern! Alle Einstellungen, die Layout und Design betreffen, finden Sie im Menü Layout unter Einstellungen auf der Administrationsseite. Wechseln Sie in dieses Untermenü. Auf der folgenden Seite können Sie bestimmen, welches Layoutschema verwendet werden soll. Zurzeit existiert nur ein Schema – sie wissen schon, das farblich wenig ansprechende. Klicken Sie auf den Link neues Layout, um ein anderes Schema zu definieren. Sie gelangen zur Layout-Definitionsseite (Abbildung 7.10).
129
2-6496.book Page 130 Tuesday, November 19, 2002 3:47 PM
Gibt’s was Neues?
Abbildung 7.10: Definieren eines neues Layoutschemas
Auch hier ist man beim ersten Anblick überwältigt von der Vielzahl der Optionen. Es lässt sich wirklich alles einstellen! Die einzelnen Hauptrubriken sind durch grüne Überschriften voneinander getrennt, Überschriften von Unterrubriken sind in Blaulila dargestellt.
1
Geben Sie dem Schema zunächst einen Namen. Schreiben Sie in das Feld ID den Namen Neu.
2
Um eine farblich etwas aufgeräumtere News-Seite zu erhalten, geben Sie folgende Werte ein: In der Rubrik Überschrift : Hintergrundfarbe: #CCCCCC Schriftfarbe: #000000
130
2-6496.book Page 131 Tuesday, November 19, 2002 3:47 PM
Anpassen des Designs
3
In der Rubrik Kategorieliste kreuzen Sie bitte das Kontrollkästchen aktivieren an.
4
In der Rubrik News, Unterrubrik Überschrift : Hintergrundfarbe: #777777 Schriftfarbe: #FFFFFF
5
In der Unterrubrik Text: Hintergrundfarbe: #FFFFFF Schriftfarbe: #000000
6
In der Rubrik Grafiken unter Seitenhintergrund: kein Eintrag
7
In der Rubrik Seitenlayout unter Hintergrundfarbe: #FFFFFF
Das Ergebnis sehen Sie in Abbildung 7.11.
Abbildung 7.11: Verändertes Seitenlayout
Spielen Sie selbst ein bisschen an den Farbeinstellungen herum, es macht Spaß!
131
2-6496.book Page 132 Tuesday, November 19, 2002 3:47 PM
Gibt’s was Neues?
7.4 Darf’s ein bisschen mehr sein? Sie haben gesehen, das Grundprinzip von SimpleNews ist in der Tat simpel. Über die Administrationsseite lassen sich Kategorien und News-Beiträge erstellen, die dann mithilfe von Layoutschemas dargestellt werden.
VORSICHT!
Aber das ist noch lange nicht alles, was SimpleNews kann. Es bietet eine Vielzahl an alternativen Darstellungsweisen für die News-Artikel. Ich möchte Ihnen einige davon vorstellen.
Damit Sie die Fähigkeiten sinnvoll testen können, fügen Sie der Kategorie Politik noch mindestens einen News-Beitrag Ihrer Wahl hinzu.
Zunächst gibt es ein paar Variationen der klassischen Darstellungsweise. Probieren Sie einmal die URL http://localhost/simpnews/news3.php?category=1 aus (Abbildung 7.12) Die News werden hier tabellarisch angezeigt, aber nur die Schlagzeilen. Ähnliche Variationen bieten die Scripts news2.php und news4.php.
Abbildung 7.12: Anzeige der News in Tabellenform
Es sind aber auch ganz andere, etwas aufregendere und dynamischere Darstellungsweisen möglich.
132
2-6496.book Page 133 Tuesday, November 19, 2002 3:47 PM
VORSICHT!
Darf’s ein bisschen mehr sein?
Die nachfolgenden Beispiele funktionieren nur, wenn der Benutzer JavaScript und Java-Applets in seinem Browser aktiviert hat. Meistens ist das der Fall, da die beiden Technologien standardmäßig aktiviert sind.
Es ist zum Beispiel möglich, die Neuigkeiten mithilfe eines JavaScript-Newsfaders darzustellen. Ein Newsfader blendet die News-Artikel periodisch nacheinander ein. Sie können ihn über die URL http://localhost/simpnews/js_newsfader.php?category=1 aufrufen (Abbildung 7.13).
Abbildung 7.13: Der Newsfader
Ganz ähnlich arbeitet der JavaScript-Newsscroller. Statt die News einzublenden, scrollt er die Beiträge nacheinander über den Bildschirm. Die URL lautet: http://localhost/simpnews/js_newsscroller.php?category=1. Für das nächste Beispiel müssen wir ein paar Anpassungen bei den Einstellungen auf der Adminsitrationsseite vornehmen.
1
Wechseln Sie zur Admin-Seite in das Layoutmenü für unser Farbschema.
2
Scrollen Sie nach unten bis zur Rubrik Newsticker, Unterrubrik angezeigte News (Abbildung 7.14). Tragen Sie in das Feld Zeitrahmen eine –1 ein.
133
2-6496.book Page 134 Tuesday, November 19, 2002 3:47 PM
Gibt’s was Neues?
Abbildung 7.14: Parameter für den Newsticker
3
Wiederholen Sie den Eintrag für die Rubrik Newsscroller und Newstyper. Tragen Sie außerdem in beide Rubriken als Höhe den Wert 100 ein.
Jetzt sind Sie sicherlich schon gespannt, welche Funktionalitäten sich hinter Newsticker, Newsscroller und Newstyper verbergen. Der Newsticker scrollt News-Artikel von rechts nach links über den Bildschirm: http://localhost/simpnews/newticker.php?category=1. Der Newsscroller arbeitet wie der JavaScript-Newsscroller, aber das Scrolling ist etwas weicher, da es mithilfe eines Java-Applets realisiert wurde. Dafür muss allerdings die Java-Laufzeitumgebung gestartet werden, was eine Verzögerung beim erstmaligen Laden der Seite bedeutet. Der Newstyper letztendlich gibt die Neuigkeiten Buchstabe für Buchstabe aus, so als ob sie gerade eingetippt werden (Abbildung 7.15).
134
2-6496.book Page 135 Tuesday, November 19, 2002 3:47 PM
Darf’s ein bisschen mehr sein?
PROFITIPP
Abbildung 7.15: Der Newstyper
Auch für den JavaScript-Newsfader und JavaScript-Newsscroller können Sie im Layoutmenü Einstellungen vornehmen, um zum Beispiel die Hintergrundfarbe oder die Schriftgröße zu ändern.
Zu guter Letzt noch ein Schmankerl: ein Newsscroller mit Sternenhintergrund. Wechseln Sie zur URL http://localhost/simpnews/starscroller.php?category=1 (Abbildung 7.16). Die Parameter wie Höhe und Scrollgeschwindigkeit können Sie wieder über die altbekannte Administrationsseite in der Rubrik Scroller mit Sternenhintergrund einstellen.
Abbildung 7.16: Der Sternenscroller
135
2-6496.book Page 136 Tuesday, November 19, 2002 3:47 PM
Gibt’s was Neues?
7.5 News-Beiträge in die eigene Seite einbauen Bisher haben Sie die News-Beiträge losgelöst von einem Seitenkontext gesehen. Wenn Sie vorhaben, SimpleNews zu benutzen, wollen Sie es sicherlich in Ihre Seite vernünftig einbinden. Dazu stehen Ihnen viele Wege zur Verfügung. Für die klassische Darstellungsweise ist es – wie sie bereits gesehen haben – möglich, die Farben an Ihre Website anzupassen. Sie können aber außerdem noch einen beliebigen Seitenkopf und -fuß bestimmen, der HTML-Anweisungen enthalten kann:
1
Wechseln Sie zur Administrationsseite (http://localhost/simpnews/admin/).
2
Klicken Sie auf den Eintrag Layout aus im Untermenü Einstellungen und wählen Sie unser Test-Layoutschema.
3
Scrollen Sie bis zur Rubrik Seitenlayout.
4
Aktivieren Sie das Kontrollkästchen benutzerdefinierten Header aktivieren.
5
Schreiben Sie in den Textbereich beliebigen HTML-Code, zum Beispiel:
VORSICHT!
Peters tolle Homepage
Neuigkeiten
6
Geben Sie den Code ohne Zeilenumbrüche ein, sonst werden diese Umbrüche in HTML-Tags umgesetzt.
Bestätigen Sie Ihre Eingaben mit einem Klick auf aktualisieren.
Testen Sie die Darstellungsweise der Seite http://localhost/simpnews/news.php?category=1. Es sollte wie in Abbildung 7.17 aussehen.
136
2-6496.book Page 137 Tuesday, November 19, 2002 3:47 PM
News-Beiträge in die eigene Seite einbauen
Abbildung 7.17: Individueller Seitenkopf
Die dynamischen Darstellungsweisen lassen sich durch PHP-Anweisungen in beliebige Seiten einbinden. Sie können dabei die Kategorie als Variable bestimmen oder wie bisher in der URL übergeben. Nehmen wir an, Sie hätten folgende einfache Seite:
Meine Seite
Die neuesten Neuigkeiten:
Um z.B. den Newsticker hinzuzufügen, müssen Sie nur das entsprechende Script inkludieren:
Meine Seite
Die neuesten Neuigkeiten aus der Politik:
137
2-6496.book Page 138 Tuesday, November 19, 2002 3:47 PM
Gibt’s was Neues?
Das Ergebnis sehen Sie in Abbildung 7.18.
Abbildung 7.18: Seite mit eingebundenem Newsticker
Wenn Sie die News nur in einer kleinen Ecke Ihrer Seite übersichtlich darstellen wollen, bietet sich das Script hotnews.php an:
Meine Seite
Die neuesten Neuigkeiten aus der Politik:
Diesmal sieht die Seite aus wie in Abbildung 7.19.
Abbildung 7.19: Das Hotnews-Script
138
2-6496.book Page 139 Tuesday, November 19, 2002 3:47 PM
News-Beiträge in die eigene Seite einbauen
Zusammen mit den Einstellungsmöglichkeiten im Layoutmenü ergibt sich so eine große Flexibilität, wie Sie die News-Beiträge auf Ihrer Seite präsentieren können. Das ist auch die große Stärke von SimpleNews gegenüber anderen Scripts.
Ergebnis dieses Workshops Sie haben in diesem Workshop die vielfältigen Möglichkeiten kennen gelernt, die Ihnen das Skript SimpleNews bietet, um Neuigkeiten auf Ihrer Website zu präsentieren. Nutzen Sie sie !
139
2-6496.book Page 140 Tuesday, November 19, 2002 3:47 PM
2-6496.book Page 141 Tuesday, November 19, 2002 3:47 PM
Workshop 8 Schweigen ist Silber, Reden ist Gold Durch das Internet Freunde finden Chats sind „in“. Im Gegensatz zu E-Mails oder Foren ist man in direktem Kontakt mit anderen Surfern, die Dialoge sind spontan. Trotzdem bleibt eine gewisse Anonymität, da man über Schrift kommuniziert. Eines der interessantesten Dinge ist dabei, dass man auf alle möglichen (und unmöglichen) Leute trifft, die man sonst nie kennen lernen würde. Mir sind persönlich mehrere Leute bekannt, die über Chats Ihren Traumpartner kennen gelernt haben! Chats machen eine Website lebendiger, aber es ist nicht ganz einfach, einen Chat erst mal in Schwung zu bekommen. Da die Chatter während ihrer Dialoge gleichzeitig online sein müssen, ist dies schwieriger zu erreichen als bei Foren. Dabei kann Ihnen auch dieses Buch wenig helfen. In diesem Kapitel werde ich Ihnen zeigen, dass es ganz einfach ist, einen Chat auf einer Webseite einzubinden. Dazu benutzen wir eines der vielen freien und kostenlos erhältlichen Chat-Scripts namens PHPOpenChat.
2-6496.book Page 142 Tuesday, November 19, 2002 3:47 PM
Schweigen ist Silber, Reden ist Gold
Ergebnis dieses Workshops Nach diesem Workshop werden Sie in der Lage sein, einen professionellen Chat in Ihre Website zu integrieren.
142
2-6496.book Page 143 Tuesday, November 19, 2002 3:47 PM
Installation des Chats
AUF DER
CD-ROM
8.1 Installation des Chats Wie immer finden Sie alles, was Sie brauchen, auf der CD-ROM. Das Chat-Script verbirgt sich in einem Zip-Archiv namens phpopenchat2.3.0.zip und liegt im Ordner \software\PHPOpenChat. Im Internet finden Sie eine aktuelle Version unter http://www.ortelius.de/phpopenchat/.
Legen Sie ein Unterverzeichnis namens chat in Ihrem Webdokumentenordner an – im Falle von PHPTriad ist dies c:\apache\htdocs – und entpacken Sie das Zip-Archiv in das neu angelegte Verzeichnis. Die Script-Dateien enthalten eine webbasierte Installationsroutine, die alle nötigen Datenbanktabellen anlegt. Damit PHPOpenChat und sein Installationsscript korrekt arbeiten, müssen Sie zu allererst den so genannten Include-Path in der PHP-Konfigurationsdatei php.ini ändern. Gehen Sie dazu folgendermaßen vor:
1
Öffnen sie die PHP-Konfigurationsdatei php.ini in einem Texteditor. Die Datei finden Sie unter c:\apache\php.
2
Suchen Sie die Rubrik Paths and Directories und ändern Sie den Include-Pfad für Windows wie in Abbildung 8.1 gezeigt.
Abbildung 8.1: Ändern des Include-Pfads
3
Speichern sie die Datei und schließen Sie den Texteditor.
143
2-6496.book Page 144 Tuesday, November 19, 2002 3:47 PM
Schweigen ist Silber, Reden ist Gold
VORSICHT!
Wenn Sie den Chat auf Ihrem Webspace installieren wollen, taucht ein Problem auf: Die meisten Hoster werden Sie nicht die PHP-Konfigurationsdatei verändern lassen. Doch zum Glück lässt sich das mit einem kleinen Trick umgehen. Kopieren Sie einfach alle Dateien aus dem includes-Verzeichnis in die Verzeichnisse html, admin, chatmail und forum. Führen Sie dann das Installationsscript wie beschrieben aus und kopieren Sie anschließend die Datei defaults_inc.php aus dem Ordner admin in die Ordner html, chatmail und forum. Aber Achtung: Wenn Sie per Hand etwas in der Konfigurationsdatei defaults_inc.php verändern, müssen Sie sie wieder in alle Verzeichnisse kopieren. Falls Ihr Hoster den Apache-Webserver benutzt, gibt es auch einen anderen, einfacheren Weg. Erstellen Sie in den Verzeichnissen admin, forum und chatmail jeweils eine Datei namens .htacces mit folgendem Inhalt: php_value include_path ".:../../includes"
Zusätzlich erstellen Sie im html-Verzeichnis eine Datei .htaccess mit dem folgenden Inhalt: php_value include_path ".:../includes"
Der Apache-Webserver liest diese Datei in jedem Verzeichnis und führt die darin enthaltenen Befehle aus. In unserem Fall weisen wir ihn an, den include-Pfad für PHP entprechend zu setzen. Wenn es nicht funktioniert, fragen Sie Ihren Hoster, ob er .htaccess-Dateien unterstützt. Damit sind die Vorarbeiten getan und wir können mit der eigentlichen Installation von PHPOpenChat beginnen:
144
1
Starten Sie das Installationsscript, indem Sie in einem Browser die URL http:// localhost/chat/html/admin/install.php aufrufen.
2
Sie sehen nun den ersten Bildschirm des PHPOpenChat-Installers (Abbildung 8.2). Geben Sie als Erstes die Nutzerkennung für den Datenbankzugriff auf MySQL ein. In unserem Fall nehmen wir den Benutzer donald mit Passwort donald.
2-6496.book Page 145 Tuesday, November 19, 2002 3:47 PM
Installation des Chats
Abbildung 8.2: Der Installer
3
Klicken Sie auf die Schaltfläche Continue. Wenn Sie einen Bildschirm wie in Abbildung 8.3 sehen, dann steht schon mal die Datenbankverbindung. Jetzt geht es darum, in welcher Datenbank die Chat-Daten gespeichert werden sollen. Wir wählen dazu eine neue Datenbank namens chat. Geben Sie also in das Feld new database den Namen chat ein und bestätigen Sie Ihre Auswahl mit Continue.
Abbildung 8.3: Auswählen der Datenbank
145
2-6496.book Page 146 Tuesday, November 19, 2002 3:47 PM
Schweigen ist Silber, Reden ist Gold
4
Die beiden nächsten Installationsschritte benötigen keine Eingaben. Achten sie nur darauf, dass keine Fehlermeldungen erscheinen. Klicken Sie auf let’s go on und dann auf next Step.
5
Sie sind nun auf der letzten Seite der Installation (Abbildung 8.4). Hier können Sie ein paar grundlegende Dinge konfigurieren. Geben Sie zunächst einmal ein erstes Thema vor, über das sich die Chatter unterhalten sollen. Tragen Sie dazu in dem Feld Name of your first channel beispielsweise das Thema Australien ein. Als Nächstes wird unter der Rubrik Passphrase aus Sicherheitsgründen nach einer beliebigen Zeichenkette gefragt, die die Basis für die Verschlüsselung der Nicknames (Namen der chatter) bildet. Was Sie hier eingeben, ist ziemlich egal. Als Letztes stellen Sie noch die Sprache des Chats auf deutsch um.
Abbildung 8.4: Der letzte Installationsschritt
6
146
Klicken Sie auf Submit, um die Installation abzuschließen.
2-6496.book Page 147 Tuesday, November 19, 2002 3:47 PM
Ist da jemand?
8.2 Ist da jemand? Nach der anstrengenden Installation sind Sie wahrscheinlich sehr gespannt auf die Resultate. Schauen wir uns also einmal die Funktionsweise des Chats an. Wechseln Sie im Browser auf die URL http://localhost/chat/html/, um zum Login-Bildschrim des Chats zu kommen (Abbildung 8.5).
Abbildung 8.5: Der Login-Bildschirm von PHPOpenChat
Jeder, der mitreden möchte, benötigt einen so genannten Nickname (Spitzname), unter dem seine Beiträge erscheinen. Kennen Sie den Film E-Mail für dich mit Tom Hanks und Meg Ryan? Hier verlieben sich die beiden Hauptdarsteller mit den Spitznamen NY152 und Shopgirl übers Internet. Ein guter Nickname verrät etwas über Sie und Ihre Interessen oder Ihre Lebensanschauung, ohne Ihre wahre Identität preiszugeben. Um den Chat zu testen, müssen Sie sich also erst einmal einen Spitznamen suchen und registrieren:
1
Klicken Sie auf den Link ich möchte meinen Nick registrieren .
2
Sie sind jetzt auf der Registrationsseite (Abbildung 8.6). Geben Sie dort Ihren gewünschten Spitznamen, ein Passwort und eine E-Mail-Adresse ein. Alle anderen Felder sind optional.
147
2-6496.book Page 148 Tuesday, November 19, 2002 3:47 PM
Schweigen ist Silber, Reden ist Gold
Abbildung 8.6: Die Registrierung eines neuen Chatters
3
Klicken Sie auf registrieren, um einen neuen Benutzer mit dem ausgesuchten Spitznamen zu erstellen.
Jetzt können Sie auf die Login-Seite zurückkehren und sich mit der soeben erstellten Benutzerkennung anmelden. Und schon sind Sie mittendrin im Chat, der auf Ihrem Testsystem natürlich etwas langweilig ist, da Sie nur mit sich selbst reden können. Aber dafür wenigstens mal auf eine neue Art und Weise. Im oberen Bereich des Bildschirms sehen Sie die Ausgaben, also die Dialoge. Im unteren Bereich können Sie einen Text eingeben (Abbildung 8.7).
148
2-6496.book Page 149 Tuesday, November 19, 2002 3:47 PM
Ist da jemand?
Abbildung 8.7: Mittendrin im Chat
Wenn Sie ein Chat-Neuling sind, müssen Sie unbedingt den Chatter-Slang kennen lernen. Hier gibt es viel zu beachten, damit Sie sich nicht gleich als totales Greenhorn outen. Über den Link Hilfe bekommen Sie einige Informationen. Ganz wichtig sind zum Beispiel Smileys, um seine momentane Stimmung auszudrücken. Smileys kennen Sie vielleicht schon aus E-Mails. :-) heißt „lachen“ und :-( heißt „traurig sein“. Wenn Sie diese Zeichen in Ihren Text einbauen, erscheinen in der Ausgabe echte grafische Smileys. Es gibt aber noch eine Menge anderer Zeichen, die von PHPOpenChat grafisch umgesetzt werden (Abbildung 8.8). Probieren Sie einmal ein paar aus und üben Sie den Chat-Slang, es macht Spaß :-))
149
2-6496.book Page 150 Tuesday, November 19, 2002 3:47 PM
Schweigen ist Silber, Reden ist Gold
Abbildung 8.8: Zeichen, die grafisch umgesetzt werden
8.3 Die Administration PHPOpenChat hat eine eigene Administrationsseite, mit deren Hilfe Sie als Verantwortlicher für einen Chat häufige Aufgaben erledigen können. Mit dem Admin-Tool sind u.a. folgende Aktionen möglich: ■ Neue Chats zu bestimmten Themen (Channels) einrichten oder alte löschen ■ Paten festlegen, die aufpassen, dass alles in geordneten Bahnen verläuft ■ Rundschreiben an Chatter schicken, um Sie über Neuigkeiten auf dem Laufendem zu halten Angenommen, Sie möchten einen zweiten Chat zum Thema Computerspiele einrichten. Sie wollen sich um diesen Chat kümmern und unverschämte oder nervige Chatter hinauswerfen können. Es dürfen aber nicht alle registrierten Chatter mitreden, sondern nur ein kleiner Kreis. Das funktioniert wie folgt:
150
2-6496.book Page 151 Tuesday, November 19, 2002 3:47 PM
Die Administration
1
Wechseln sie zur URL der Administrationsseite: http://localhost/chat/html/admin/ (Abbildung 8.9).
Abbildung 8.9: Die Administrationsseite
2
Klicken Sie auf den Link Neuen Channel anlegen.
3
Füllen Sie die Felder analog zu Abbildung 8.10 aus. Indem Sie dem Channel ein Kennwort geben, können nur diejenigen Chatter den Chat-Raum betreten, die dieses Passwort kennen. Die Exit URL bestimmt, auf welche Seite der Benutzer kommt, wenn er den Chat verlässt.
151
2-6496.book Page 152 Tuesday, November 19, 2002 3:47 PM
Schweigen ist Silber, Reden ist Gold
Abbildung 8.10: Erstellen eines neuen Channels
152
4
Klicken Sie auf Daten speichern, um den Channel zu erstellen.
5
Klicken Sie in der Menüleiste auf Administration der Paten, um zu bestimmen, wer andere Chatter rauswerfen darf.
6
Fügen Sie Ihren eigenen Spitznamen als Paten hinzu (Abbildung 8.11).
2-6496.book Page 153 Tuesday, November 19, 2002 3:47 PM
Chat-Hygiene
Abbildung 8.11: Paten definieren
Das war’s, Sie können jetzt den Chat testen! Da Sie Pate sind, erscheint im unteren Menü des Chats der neue Link Paten-Funktion, mit dessen Hilfe Sie unerwünschte Chatter rauswerfen können.
8.4 Chat-Hygiene Einen Weg, wie Sie Ihren Chat „sauber“ halten können, haben Sie jetzt bereits kennen gelernt: die Patenfunktion. Doch was tun, wenn ein Pate gerade nicht online ist? Folgende Gefahren können auftauchen: ■ Ein Chatter verbreitet schmutzige oder anzügliche Dinge, benimmt sich unmöglich und beschimpft andere. ■ Ein Chatter nutzt die Gelegenheit, um auf eine Webseite mit von Ihnen nicht akzeptiertem Inhalt zu verweisen (URLs werden im Chat automatisch als Link dargestellt). ■ Ein Chatter benimmt sich zwar gesittet, aber alle anderen Chatter finden ihn nervig und würden ihn gerne rauswerfen. Leider kommt so etwas relativ häufig vor, da man ja nicht kontrollieren kann, wer mitchattet. Aber PHPOpenChat bietet Techniken, wie man den Inhalt der Dialoge kontrollieren kann. Ich möchte Ihnen anhand von ein paar Beispielen zeigen, wie das geht. Nehmen wir zunächst einmal an, Sie sind ein extrem höflicher Mensch und möchten in Ihrem Chat die Schimpfworte Mist, Scheiße und verdammt nochmal verbieten:
1
Wechseln Sie in das includes-Verzeichnis, auf dem Testsystem ist dies das Verzeichnis c:\apache\htdocs\chat\includes.
153
2-6496.book Page 154 Tuesday, November 19, 2002 3:47 PM
Schweigen ist Silber, Reden ist Gold
Öffnen Sie die Datei defaults_inc.php in einem Texteditor. Dies ist die zentrale Konfigurationsdatei für PHPOpenChat.
VORSICHT!
2
Die Dateien von PHPOpenChat wurden im UNIX-Format abgespeichert, was bedeutet, dass die Zeilenumbrüche auf einem WindowsSystem nicht vorhanden sind. Deshalb wäre es sehr unkomfortabel, eine Datei mit dem Windows-Standard-Texteditor zu bearbeiten. Benutzen Sie einen professionellen Texteditor wie UltraEdit, Textpad oder JEdit. Sollten Sie keinen installiert haben, finden Sie auf der CDROM unter \software\Texteditoren eine Testversion von Textpad sowie den kostenlosen, sehr guten Texteditor JEdit. Für Letzteren müssen Sie allerdings eine Java-Laufzeitumgebung installiert haben.
3
Suchen Sie die Definition der verbotenen Wörter. Diese nennen sich NO_NO_WORDS. Ich möchte an dieser Stelle nicht wiedergeben, was da schon steht, denn sonst kommt das Buch möglicherweise auf den Index jugendgefährdender Schriften ...
4
Sie können beliebige weitere Wörter oder Satzteile der Liste hinzufügen, indem Sie die Worte mit einem senkrechten Strich trennen. Also: $NO_NO_WORDS=“bisherige Wörter | Mist | Scheisse | verdammt nochmal“
Übrigens: Der senkrechte Strich ist auf einer deutschen Tastatur neben der (Y)-Taste in Kombination mit (AltGr) zu erreichen.
VORSICHT!
5
Je mehr Worte Sie verbieten, desto langsamer wird der Chat, da jeder Beitrag nach den Unwörtern durchsucht werden muss. Außerdem finden Chatter schnell Alternativen, wenn Sie merken, dass ein Wort verboten ist.
Wann immer jetzt ein Chatter eines dieser Wörter benutzt, erscheint stattdessen ...Oops... auf dem Bildschirm. Nun kann es immer noch sein, dass ein Chatter zwar keine unerwünschten Wörter mehr benutzt, aber trotzdem nervt oder unverschämt ist. Andere Chatter können ihn dann ignorieren, also aus den Beiträgen ausblenden. Dabei wird der Störenfried nur für den Ignorierer ausgeblendet, alle anderen sehen ihn aber noch. Diese Technik kann
154
2-6496.book Page 155 Tuesday, November 19, 2002 3:47 PM
Chat-Hygiene
PROFITIPP
auch dann angewendet werden, wenn man sich nur auf bestimmte Gesprächspartner konzentrieren möchte. Generell ist es aber – wie in persönlichen Gesprächen auch – eher unhöflich, jemanden zu ignorieren. Für private Gespräche besteht in PHPOpenChat die Möglichkeit, in einen privaten Raum zu gehen. Für jeden neuen Chatter wird automatisch ein persönlicher Channel eingerichtet, der den Namen des Chatters trägt. Sie finden ihn in der Channel-Auswahlliste.
Und so ignoriert man:
1
Wählen Sie aus dem Chat-Menü den Link Einladen/Ignorieren.
2
Klicken Sie im auftauchenden Fenster auf den grünen Link Chatter Ignorieren.
3
In der rechten Auswahlbox sehen Sie alle zurzeit am Chat beteiligten Benutzer. Durch Klick auf den Linkspfeil können Sie einen Benutzer zur Auswahlbox Ignorierte Chatter übertragen und damit ignorieren (Abbildung 8.12).
Abbildung 8.12: Ignorieren anderer Chatter
155
2-6496.book Page 156 Tuesday, November 19, 2002 3:47 PM
Schweigen ist Silber, Reden ist Gold
PROFITIPP
Wie die rote Hinweismeldung in Abbildung 8.12 bereits andeutet, wird ein Chatter automatisch gesperrt, wenn eine bestimmte Anzahl Benutzer ihn ignorieren.
Die Anzahl der zum Sperren notwendigen Ignorierer können Sie in der Konfigurationsdatei defaults_inc.php einstellen. Der zugehörige Parameter nennt sich $KICK_COUNT und ist standardmäßig auf 15 eingestellt.
8.5 Anpassen des Layouts So, nun können Sie den Chat installieren und administrieren und kennen auch den Chat-Knigge. Sicherlich wollen Sie nun einen Chat zu Ihrer Homepage hinzufügen. Dazu sollte er sich aber nicht allzu sehr von Ihrem Seitendesign absetzen, sondern sich möglichst nahtlos integrieren. Zum Glück ist das mit PHPOpenChat machbar, Sie müssen allerdings ein wenig in die HTML-Untiefen abtauchen. Ich werde Ihnen anhand von Beispielen zeigen, wie Sie das Aussehen des Chats bestimmen können. Zunächst wollen wir das User-Interface etwas aufgeräumter gestalten, denn weniger ist manchmal mehr. Dazu schalten wir einige der Menüs einfach aus. Öffnen Sie die Konfigurationsdatei defaults_inc.php und suchen Sie den Bereich, den Sie in Abbildung 8.13 sehen. Die Parameter entsprechen den Menüs und Sie können sie über die Werte TRUE oder FALSE ein- bzw. ausschalten. Als Konsequenz der Änderungen sehen Sie in Abbildung 8.14 ein sehr vereinfachtes Chat-Menü.
Abbildung 8.13: Menüpunkte auswählen
156
2-6496.book Page 157 Tuesday, November 19, 2002 3:47 PM
Anpassen des Layouts
Abbildung 8.14: Das vereinfachte Chatmenü
Auch die Hintergrund- und die Textfarbe können Sie sehr einfach verändern.
1
Ändern Sie für die Textfarbe den Parameter DEFAULT_TEXT_COLOR in der Konfigurationsdatei um in den gewünschten Wert. Die Farbe wird in HTMLNotation angegeben (siehe Anhang). Nehmen Sie beispielsweise Blau: #0000ff.
2
Die Hintergrundfarbe wird für jeden Channel einzeln bestimmt, und zwar über die Administrationsseite. Wechseln Sie also zur URL http://localhost/chat/html/ admin/ und klicken Sie auf den bearbeiten-Link des Channels Australien.
3
Schreiben Sie in das Feld Hintergrundfarbe den Wert #ffffff (Weiß) und in das Feld Farbe des Spitznamens den Wert #0000ff für Blau (Abbildung 8.15).
Abbildung 8.15: Anpassen der Farben
157
2-6496.book Page 158 Tuesday, November 19, 2002 3:47 PM
Schweigen ist Silber, Reden ist Gold
4
Bestätigen Sie Ihre Änderungen durch einen Klick auf die Schaltfläche Daten speichern.
Das veränderte Farbschema erzeugt einen Chat wie in Abbildung 8.16 dargestellt.
Abbildung 8.16: Chat in einfachem Weiß
Ein eigenes Login-Formular
AUF DER
CD-ROM
Es wäre doch schön, wenn sich auf Ihrer Homepage ein Login-Formular für den Chat befinden würde, sodass Sie gänzlich auf den PHPOpenChat-Login-Bildschirm verzichten können. Dazu ist ein wenig Programmierarbeit nötig. Aber zum Glück für Sie habe ich ein fertiges Script schon vorbereitet.
158
Ein ganz einfaches Login-Formular finden Sie auf der CD-ROM unter \software\PHPOpenChat\simple_login.php.
2-6496.book Page 159 Tuesday, November 19, 2002 3:47 PM
Anpassen des Layouts
Das Script lautet wie folgt:
Die Ausgabe ist nicht besonders spektakulär (Abbildung 8.17).
Abbildung 8.17: Einfaches Login
159
2-6496.book Page 160 Tuesday, November 19, 2002 3:47 PM
Schweigen ist Silber, Reden ist Gold
VORSICHT!
Das Entscheidende ist hierbei der HTML-Sourcecode zwischen den beiden formTags. Diesen Code können Sie irgendwo auf Ihrer Homepage einbinden. Vergessen Sie aber nicht die include-Anweisungen. Vermutlich steht Ihre Homepage in einem anderen Verzeichnis als die Chat-Dateien. Damit der oben stehende Code funktioniert, müssen Sie im action-Attribut den Pfad zum Chat-Verzeichnis angeben, zum Beispiel:
Damit wird ab sofort das Standarddesign für ein Eingabefeld benutzt, sodass der Text besser lesbar wird. Speichern Sie die Datei und testen Sie das Ergebnis der Änderung.
PROFITIPP
3
Sie finden alle Templates im include-Verzeichnis. Wenn Sie sich zutrauen, die Templates zu verändern, ist der Schritt allerdings nicht groß, die tatsächlichen PHP-Dateien zu ändern. Insbesondere die Anpassung der Datei frame_set.php im Verzeichnis html ist sinnvoll. In dieser Datei wird die Größe der einzelnen Frames des Chats (Ausgabebereich, Eingabebereich, Menübereich) festgelegt.
161
2-6496.book Page 162 Tuesday, November 19, 2002 3:47 PM
Schweigen ist Silber, Reden ist Gold
Ergebnis dieses Workshops Sie haben gelernt, wie man PHPOpenChat installiert, konfiguriert und bedient. Damit können Sie jetzt einen Chat auf Ihrer Homepage realisieren.
162
2-6496.book Page 163 Tuesday, November 19, 2002 3:47 PM
Workshop 9 Jede Stimme zählt Was wäre eine Demokratie ohne Wahlen und Umfragen? Es sind die netten Kleinigkeiten, die Websites interessant machen. Umfragen gehören dazu, sie machen die Site „offener“. Man hat das Gefühl, mit vielen anderen Leuten zu interagieren und kann wertvolle Informationen gewinnen. Auch für dieses Anwendungsgebiet gibt es fertige PHP-Scripts. Die Befragung von Surfern ist damit so einfach wie noch nie: Ob Musik, Sport oder Politik, ständig fordern so genannte Votings (Umfragen) zum Klicken auf.
VORSICHT!
Als Beispiel für solche Applikationen wird in diesem Kapitel das kostenlose Skript Advanced Poll vorgestellt, das das Erstellen diverser Umfragen zu einem Kinderspiel macht.
Kostenlos ist Advanced Poll laut Lizenzbedingungen nur dann, wenn Sie es für private, nichtkommerzielle Zwecke einsetzen. Ansonsten müssen Sie es registrieren lassen.
2-6496.book Page 164 Tuesday, November 19, 2002 3:47 PM
Jede Stimme zählt
Ergebnis dieses Workshops Nach dem Durcharbeiten dieses Workshops werden sie in der Lage sein, Umfragen in Ihre Homepage zu integrieren.
9.1 Installation Und so installieren Sie Advanced Poll:
1
Legen Sie ein Unterverzeichnis namens vote auf Ihrem Webserver an, im Falle von PHPTriad unter \apache\htdocs.
2 3
Wechseln Sie in das Verzeichnis software\AdvanvedPoll auf der CD-ROM.
4
Öffnen Sie die Datei include\config.inc.php in einem Texteditor und ändern Sie die Einstellungen für die Datenbankanbindung:
Extrahieren Sie das Archiv pollphp.zip in das im ersten Schritt erzeugte Verzeichnis und wechseln Sie in dieses Verzeichnis.
2-6496.book Page 165 Tuesday, November 19, 2002 3:47 PM
Installation
5
Öffnen Sie einen Browser und gehen sie auf die Seite http://localhost/vote/db/ install.php (Abbildung 9.1).
Abbildung 9.1: Der Installationsassistent von Advanced Poll
6
Klicken Sie auf Next, um mit der Installation zu beginnen. Der Assistent ist üblichen Windows- Installationsassistenten nachempfunden.
7
Bestätigen Sie, dass Sie den Lizenzbestimmungen zustimmen, und fahren Sie mit Klick auf Next fort.
8
Die notwendigen Tabellen werden nun in MySQL angelegt und mit Demo-Daten gefüllt.
9
Nachdem alle Tabellen erfolgreich angelegt wurden, müssen Sie einen Benutzer anlegen, der Administrationsrechte hat. Über diesen Admin-User können Sie dann später Advanced Poll bequem bedienen. Wählen Sie als Benutzernamen goofy mit gleichnamigem Passwort (Abbildung 9.2) und klicken Sie auf Next.
165
2-6496.book Page 166 Tuesday, November 19, 2002 3:47 PM
Jede Stimme zählt
Abbildung 9.2: Anlegen des Admin-Users
10
166
Die Installation ist damit beendet. Klicken Sie auf Done, um auf eine Demoseite zu gelangen, wo Sie einen ersten Eindruck von der Funktionalität von Advanced Poll bekommen können (Abbildung 9.3).
2-6496.book Page 167 Tuesday, November 19, 2002 3:47 PM
Installation
Abbildung 9.3: Demoseite mit Umfragen
PROFITIPP
Versuchen Sie es einfach einmal! Wählen Sie ein Betriebssystem aus und klicken Sie auf Vote. Sie sollten dann die Ergebnisse der Umfrage sehen. Advanced Poll hat eine Funktion, die es unmöglich macht, an derselben Umfrage mehrfach teilzunehmen. Sobald Sie abgestimmt haben, bekommen Sie nur noch die Ergebnisse angezeigt, wenn Sie wieder auf die Umfrageseite gehen. So wird es Betrügern schwer gemacht, die Ihre Meinung „durchboxen“ wollen und einfach stundenlang abstimmen oder ein Skript dafür schreiben. Advanced Poll benutzt Cookies (kleine Dateien mit Nutzerdaten, die lokal gespeichert wird), um sich zu merken, von welchem Rechner bereits eine Stimme abgegeben wurde. Wenn Sie das Cookie löschen, dürfen Sie natürlich auch wieder neu abstimmen ...
Wie Sie vielleicht schon festgestellt haben, sind die Umfragen in English. Doch zum Glück ist Advanced Poll multilingual, Sie können aus einer Vielzahl von unterstützten Sprachen wählen.
167
2-6496.book Page 168 Tuesday, November 19, 2002 3:47 PM
Jede Stimme zählt
9.2 Erstellen neuer Umfragen Advanced Poll beinhaltet ein komfortables Administrationstool, mit dessen Hilfe Sie kein Programmierer sein müssen, um Umfragen in Ihre Website zu integrieren. Um auf die Startseite des Admin-Tools zu gelangen, öffnen Sie einen Browser und rufen Sie die URL http://localhost/vote/db/admin/ auf. Als Erstes wollen wir die Sprache umstellen:
1
Rufen Sie die URL http://localhost/vote/db/admin/ auf und loggen Sie sich mit dem Benutzernamen goofy ein. Sie gelangen in das Hauptmenü der AdvancedPoll-Administration (Abbildung 9.4).
Abbildung 9.4: Das Hauptmenü der Advanced-Poll-Administration
168
2
Das Admin-Tool ist einer Windows-Oberfläche nachempfunden. Wählen Sie aus dem Menü den Punkt General Settings.
3
Stellen Sie unter Language die Sprache german ein und klicken Sie auf Submit Settings am Ende der Seite. Alle weiteren Seiten werden jetzt in deutscher Sprache dargestellt.
2-6496.book Page 169 Tuesday, November 19, 2002 3:47 PM
Erstellen neuer Umfragen
Abbildung 9.5: Einstellen der Sprache
Damit wir loslegen können, müssen wir zunächst noch ein bisschen aufräumen und die vorhandenen Beispielumfragen löschen. Wählen Sie dazu aus dem Menü den Punkt Umfragen. Am rechten Seitenrand haben Sie in der Spalte Aktion die Möglichkeit, bestehende Umfragen zu löschen. Löschen Sie die drei Beispielumfragen. Um nun eine neue Umfrage anzulegen, gehen Sie folgendermaßen vor:
1
Gehen Sie in das Hauptmenü der Admin-Seite und wählen Sie General Settings. Sie gelangen wieder auf die Seite, auf der Sie die Sprache umgestellt haben.
2
Scrollen Sie etwas nach unten bis zur Rubrik Verschiedenes. Stellen Sie die Anzahl der Optionen, die bei einer Umfrage zur Auswahl stehen sollen, auf 3 ein (Abbildung 9.6). Aktivieren Sie außerdem unter Anzeige die Option Stimmen, damit bei den Umfrageergebnissen die tatsächliche Anzahl von Stimmen und keine Prozentwerte angegeben werden.
169
2-6496.book Page 170 Tuesday, November 19, 2002 3:47 PM
Jede Stimme zählt
Abbildung 9.6: Das Verändern globaler Parameter
170
3
Bestätigen Sie Ihre Änderungen mit Klick auf Einstellungen speichern.
4
Wählen Sie aus dem Hauptmenü den Punkt Neue Umfrage erstellen. Sie gelangen auf eine Seite, auf der Sie die verschiedenen Einstellungen vornehmen können.
5
Tippen Sie als Frage „Was essen Sie lieber?“ ein. Als Optionen geben Sie an: Pizza, Schnitzel, Döner . Für jede Option lässt sich eine Farbe wählen, die für die grafische Auswertung benutzt wird (Abbildung 9.7). Aktivieren Sie das Kontrollkästchen Kommentare erlauben, damit Benutzer Bemerkungen zu der Umfrage machen können.
2-6496.book Page 171 Tuesday, November 19, 2002 3:47 PM
Einbetten der Umfrage
Abbildung 9.7: Die Daten der neuen Umfrage
6
Wenn Sie alles eingetragen haben, klicken Sie auf Neue Umfrage erstellen und Sie gelangen auf die Übersichtsseite, wo Ihre neue Umfrage erscheint. Merken sie sich die ID der neuen Umfrage, Sie brauchen sie später, um die Umfrage in Ihre Webseite einzubauen. Die ID wird vermutlich den Wert 4 haben, da schon drei Umfragen vorhanden sind..
So, damit haben Sie die Umfrage erstellt. Das ist aber erst die halbe Miete, schließlich wollen Sie diese Umfrage ja Benutzern zugänglich machen. Wie das geht, erfahren Sie im nächsten Unterkapitel.
9.3 Einbetten der Umfrage In der Advanced Poll-Installation ist leider keine einfache Vorlage dabei, die Ihnen zeigt, wie man Umfragen in HTML-Seiten einbettet. Also müssen wir die Ärmel hochkrempeln und ein bisschen programmieren. Zunächst gibt es ein paar Dinge, die immer ausgeführt werden müssen, wenn Sie Advanced Poll auf Ihren Seiten benutzen wollen. Diese Anweisungen, die immer dieselben sind, wollen wir in einer eigenständigen Datei namens poll_init.php ablegen.
171
2-6496.book Page 172 Tuesday, November 19, 2002 3:47 PM
AUF DER
CD-ROM
Jede Stimme zählt
Wenn Sie sich die Mühe nicht machen wollen, die Datei selbst zu erstellen, können Sie sie auch von der CD-ROM kopieren. Sie finden Sie im Verzeichnis \software\AdvancedPoll.
1
Öffnen Sie einen Texteditor und legen Sie eine Datei namens poll_init.php in Ihrem Advanced-Poll-Verzeichnis \apache\htdocs\vote\db an.
2
Als Erstes muss die Variable $poll_path definiert werden, die den Pfad zum Advanced-Poll-Verzeichnis enthält.
VORSICHT!
Wenn Sie Advanced Poll auf Ihrem Webspace installieren, wird der Pfad anders lauten. Dann müssen Sie die Datei entsprechend anpassen.
3
Danach muss die Datei poll_cookie.php eingebunden werden.
4
Jetzt wird mit der header-Anweisung ein HTTP-Header geschickt, der den Browser anweist, die Seite nicht in seinem Cache zu speichern. Das ist sinnvoll, da Sie ja immer die neuesten Umfrageergebnisse sehen wollen und keine zwischengespeicherte Seite.
require "./poll_cookie.php";
header("Expires: Mon, 01 Jan 2000 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")."GMT"); header("Cache-Control: no-cache, must-revalidate"); header("Pragma: no-cache");
5
172
Als Nächstes werden ein paar notwendige Dateien eingebunden: require $poll_path."/include/config.inc.php"; require $poll_path."/include/$POLLDB[class]"; require $poll_path."/include/class_poll.php";
2-6496.book Page 173 Tuesday, November 19, 2002 3:47 PM
Einbetten der Umfrage
6
Jetzt sind alle Vorarbeiten getan und das eigentliche Programm kann starten. Es werden die nötigen Objekte erzeugt und eine Verbindung zur Datenbank wird hergestellt: $CLASS["db"] = new polldb_sql; $CLASS["db"]->connect(); $php_poll = new poll(); ?>
7
Speichern Sie die Datei.
Hier noch einmal das vollständige Listing: connect(); $php_poll = new poll(); ?>
Wenn Sie die soeben erstellte Datei zur Verfügung haben, dann ist der Rest, nämlich das Anzeigen einer Umfrage auf Ihrer Webseite, ein leichte Sache. Alles, was Sie noch tun müssen, ist die Datei poll_init.php einzubinden und dann den Befehl zum Anzeigen einer Umfrage aufzurufen. Der Befehl lautet: echo $php_poll->poll_process(4); 4 ist die ID der Umfrage, die Sie anzeigen wollen.
173
2-6496.book Page 174 Tuesday, November 19, 2002 3:47 PM
Jede Stimme zählt
Nachfolgend sehen Sie ein einfaches Beispiel, das eine Ausgabe wie in Abbildung 9.8 erzeugt:
Umfrage
poll_process(4); ?>
Abbildung 9.8: Eine einfache Umfrage
Um das Prinzip deutlich zu machen, lassen Sie uns noch eine neue Umfrage erstellen mit folgenden Daten: Frage: Wie oft treiben Sie Sport? Optionen: Mindestens einmal pro Woche Mindestens einmal pro Monat Mindestens einmal pro Jahr Wenn Sie sich diese Umfrage auf der Admin-Seite in der Übersicht anschauen, dann wird sie vermutlich die ID 5 haben.
174
2-6496.book Page 175 Tuesday, November 19, 2002 3:47 PM
Einbetten der Umfrage
Um die neue Umfrage in das obige Beispiel einzubetten, können Sie das Listing zum Beispiel folgendermaßen abändern:
Umfrage
poll_process(4); ?>
poll_process(5); ?>
Die beiden Umfragen werden in einer HTML-Tabelle nebeneinander angezeigt (Abbildung 9.9).
Abbildung 9.9: Zwei Umfragen auf einer Webseite
175
2-6496.book Page 176 Tuesday, November 19, 2002 3:47 PM
Jede Stimme zählt
9.4 Anpassen des Erscheinungsbildes Sie können jetzt Umfragen erstellen und auch anzeigen, aber auch hier entsteht das Problem, dass Ihnen das Design der Umfrage vielleicht nicht gefällt oder nicht zu Ihrer Webseite passt.
PROFITIPP
Um dieses Problem möglichst elegant zu lösen, arbeitet Advanced Poll mit so genannten Templates, also Vorlagen, die benutzt werden, um das Erscheinungsbild der Umfrage zu beeinflussen. Die Vorlagen benutzen dazu HTML- und PHP-Anweisungen. Sie werden in diesem Unterkapitel lernen, wie Sie Templates erstellen und anpassen können, um das Design Ihrer Umfragen individuell anzupassen.
Sie können auch ohne Templates kleinere Änderungen am Design vornehmen. Wählen Sie dazu aus dem Menü den Punkt Allgemeine Einstellungen. Hier können Sie in dem Bereich Tabellen, Schrift und Farbe mit den Einstellungen herumspielen.
Advanced Poll hat schon ein paar fertige Templates mitinstalliert. Schauen wir uns zunächst einmal an, wie man diese Templates einer Umfrage zuweisen kann. Der dazu nötige Befehl lautet: $php_poll->set_template_set("template_name");
Ändern Sie also das Listing aus dem letzten Unterkapitel wie folgt ab, um die beiden Umfragen mit zwei verschiedenen Designs zu versehen:
Sie sind natürlich nicht auf die mitgelieferten Templates angewiesen, sondern Sie können einfach Ihre eigenen schreiben. Wie dies funktioniert, möchte ich Ihnen anhand eines Beispiels zeigen:
1
Gehen Sie auf die Administrationsseite von Advanced Poll (http://localhost/vote/ db/admin/).
2
Wählen Sie den Punkt Templates aus dem Menü.
3
Am rechten Fensterrand können Sie jetzt die Vorlage auswählen, die Sie verändern oder ansehen möchten (Abbildung 9.11).
177
2-6496.book Page 178 Tuesday, November 19, 2002 3:47 PM
VORSICHT!
Jede Stimme zählt
Vergessen Sie nicht, die kleine Grafik neben der Optionsliste zu klicken, nachdem Sie eine Vorlage ausgewählt haben. Andernfalls überschreiben Sie das derzeit ausgewählte Template.
Abbildung 9.11: Die Template-Verwaltung
4 5
178
Klicken Sie auf den Link Neues Template Set. Geben Sie als Namen für das Template meinDesign ein (Abbildung 9.12) und klicken Sie auf Speichern.
2-6496.book Page 179 Tuesday, November 19, 2002 3:47 PM
Anpassen des Erscheinungsbildes
Abbildung 9.12: Erstellen eines neuen Templates
6
Wählen Sie aus der Liste am rechten Fensterrand das soeben angelegte Template aus und klicken Sie auf die kleine Grafik neben der Liste.
7
Wenn Sie auf der richtigen Seite sind, sehen Sie nun drei leere Textbereiche mit den Überschriften display_head, display_loop und display_foot. Diese Bereiche definieren, ■ was als Überschrift in der Umfrage steht (display_head), ■ wie die verschiedenen Optionen dargestellt werden (display_loop), ■ wie abschließende Elemente, zum Beispiel die Wähl-Schaltfläche, aussehen (display_foot).
Diese Textbereiche werden wir nacheinander füllen, um ein schlichtes Design zu verwirklichen. Die Umfrage soll in vier Zeilen ohne irgendwelchen Schnickschnack dargestellt werden. Die erste Zeile enthält die Frage, die zweite die Optionen, die dritte den Button zum Abstimmen und die vierte Zeile den Link zu den Ergebnissen der Umfrage. Also, los geht’s:
1
Tippen Sie folgende Zeilen in den Textbereich display_head:
