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!
Der Bestseller aktualisiert in der 6. Auflage! Alles redet von PHP und MySQL! Und unzählige Webseiten-Programmierer setzen die Programmiersprache PHP und die Webdatenbank MySQL mit viel Erfolg und Spaß ein. Du möchtest auch in diese Liga aufsteigen und tolle Webseiten mit PHP und MySQL erstellen? Dann ist dieses Buch von Johann-Christian Hanke genau richtig für dich! Du lernst zum Beispiel, wie du die Besucher auf deiner Webseite zählst und ein Gästebuch einrichtest, in dem deine Freunde Nachrichten veröffentlichen können. Selbst eigene Umfragen, Formulare für Feedback und ein kleines Weblog kannst du bald selbst erstellen. Falls du einmal nicht weiterweißt, springt dir Hund Buffi zur Seite und gibt dir gerne hilfreiche Tipps. Und das ist längst nicht alles, was das Buch zu bieten hat! Die CD ist randvoll mit Tools, die du für deine Webseiten-Programmierung brauchst. Die Videos zur Installation und Einrichtung helfen dir, damit du sofort mit dem Programmieren loslegen kannst. Auf der CD findest du alles, was du zum Programmieren brauchst: PHP 5, MySQL 5, den Apache-Webserver, die Editoren PSPad, Notepad++ und Aptana Studio, phpMyAdmin, XAMPP, SELFHTML, Videoworkshops, Lösungen zu den Aufgaben und den Programmiercode aus dem Buch
Über den Autor: Johann-Christian Hanke ist ein erfolgreicher Fachbuchautor und gibt Kurse an einer Volkshochschule in Berlin. Systemvoraussetzungen: Alle Windows-Versionen sowie Mac OS X und Linux Ab 11 Jahre, aber auch für Erwachsene, die eine wirklich einfache Einführung suchen.
Regalsystematik: Programmierung ISBN 978-3-8266-8674-0
Probekapitel und Infos erhältst du unter: [email protected] www.it-fachportal.de
Johann-Christian Hanke
(D)
Hanke
Ebenfalls in dieser Reihe erschienen:
€ 19,95
Auf der CD: pache-Webserver, PHP 5, MySQL 5, A ptana Studio, ,A PSPad, Notepad++ stallation In XAMPP, Videos zur rammiercode og und Einrichtung, Pr aus dem Buch
8674 8674.indd 1
07.01.2010 10:48:51
PHP und MySQL für Kids
Johann-Christian Hanke
PHP und MySQL für Kids
Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar.
Bei der Herstellung des Werkes haben wir uns zukunftsbewusst für umweltverträgliche und wiederverwertbare Materialien entschieden. Der Inhalt ist auf elementar chlorfreiem Papier gedruckt.
ISBN: 978-3-8266-8674-0 6., aktualisierte und erweiterte Auflage 2010
Dieses Werk, einschließlich aller seiner Teile, ist urheberrechtlich geschützt. Jede Verwertung außerhalb der engen Grenzen des Urheberrechtsgesetzes ist ohne Zustimmung des Verlages unzulässig und strafbar. Dies gilt insbesondere für Vervielfältigungen, Übersetzungen, Mikroverfilmungen und die Einspeicherung und Verarbeitung in elektronischen Systemen.
Printed in Germany Lektorat: Katja Völpel Korrektorat: Petra Heubach-Erdmann Satz und Layout: Johann-Christian Hanke, Berlin
für Tabea, Florian und Linus
Inhaltsverzeichnis Vorwort
15
Was bedeutet eigentlich Programmieren? Wozu sind Datenbanken da?
15
16
Was kannst du mit PHP und MySQL alles machen?
17
Was ist ein Webserver und wozu brauchst du den?
18
Wie arbeitest du mit diesem Buch?
18
Was brauchst du für dieses Buch?
19
Wie gut kommst du mit dem Computer klar? Was ist neu in Auflage 6?
22
Wo gibt’s Hilfe, wenn es mal klemmt?
1
20
24
Deine coole Homepage mit HTML Richte dir einen Projektordner ein!
25
26
HTML auf Knopfdruck – mit PSPad
28
So wird’s perfekt: Überschriften, Absätze und mehr Hier bin ich: Ein Bild einfügen
40
Meine Hobbys kurz aufgelistet
43
Coole Links zu coolen Plätzen
45
Meine drei Lieblingsfächer in einer Tabelle Schickes Layout mit Style Sheets Schön bunt hier: Farben zuweisen So legst du die exakte Breite fest
Schlussbemerkung
64
Zusammenfassung
64
Ein paar Fragen …
65
… und ein paar Aufgaben
47
49 53 57
Eine Umfrage! Wie findest du meine Page? Tipps und Tricks zu PSPad
35
59
61
65 7
Inhaltsverzeichnis
2
Installiere deinen eigenen Webserver! Warum eigentlich ein Webserver?
68
Wie teuer ist die Homepage mit PHP/MySQL? How! Im Reich des »Apachen«
Nur noch etwas Handarbeit … und fertig! Testen: phpinfo() auf localhost 86
Zusammenfassung
87
Ein paar Fragen …
87
… und eine Aufgabe
3
75 81
83
88
Hallo echo – »Hallo Welt« Daten ausgeben mit echo
89
90
Variablen: Mein rechter, rechter Platz ist leer Ausgabe verschönern mit HTML-Tags Kleine Zeilenumbruchkunde
Pause muss sein: Die if-else-Entscheidungsstruktur
8
Der Tag vergeht: Zwischentöne mit elseif
123
Feldvariablen: Wochentage aufschreiben
125
Arrays die Zweite: Es geht auch kürzer!
128
116
Inhaltsverzeichnis
Assoziativ: Monatsnamen als Array … und wieder die Kurzform Den Monat ausgeben
131
132
Schlussbemerkung
133
Zusammenfassung
133
Ein paar Fragen …
134
… und ein paar Aufgaben
5
129
135
Seiten mit Passwort schützen Formular für das Passwort
137
138
Senden mit Methode: post oder get? Ausgabe des Passworts Testen mit if-else
139
141
143
Schönheitsfehler? Variablentest mit isset()! Mehr Möglichkeiten mit switch Inhalt mit include einbinden
144
147
151
Mehr Sicherheit: Endungs- und Ordnertricks Schlussbemerkung
154
Zusammenfassung
155
Ein paar Fragen …
156
… und ein paar Aufgaben
6
152
156
Etwas Mathe: Taschen(geld)rechner Nicht ohne Grund: Grundrechenarten
157
158
Rechenpraxis: Zwei mal Drei macht Vier …
159
Einnahmen minus Ausgaben: Taschengeldrechner
160
$_SERVER['PHP_SELF']: Daten an sich selbst schicken 164 Wie viel bleibt übrig? Prozentrechnung!
165
Traurige Säulen: Ergebnis als Diagramm
169
Plus, Minus, Mal, Geteilt? Select! So liest du ein SELECT-Feld aus
170 172
9
Inhaltsverzeichnis
Rechner de luxe: Wir schreiben eine Funktion Der Rechner im Einsatz Schlussbemerkung
180
Zusammenfassung
180
Ein paar Fragen …
181
177
… und ein paar Aufgaben
7
181
Schleifen: Die »Gratulationsmaschine« Die while-Schleife Der Bestseller: for
183
184
Prüfung zu Fuß: do while
189
190
Und die Geburtstagskerzen?
192
Have a break: Abbruchbedingung einfügen Und noch eine Schleife: foreach Schlussbemerkung
199
Zusammenfassung
199
Ein paar Fragen …
199
… und ein paar Aufgaben
8
174
194
195
200
Fürs Feedback: Formmailer selbst gestrickt 201 Die Funktion mail()
202
E-Mail mit Datums- und Zeitstempel Das Feedback-Formular
204
205
Professionell mailen: Fehler unterdrücken Formular um ein Name-Feld erweitern
210
Backslashes entfernen mit stripslashes() Prüfen! Sind alle Felder ausgefüllt?
207 211
212
Inhalt in die Formularfelder schreiben
216
Erweiterter Fehlertest: Mindestlänge und E-Mail-Check 221 Krönender Abschluss: Universal-Formmailer 10
Schlussbemerkung
231
227
Inhaltsverzeichnis
Zusammenfassung
232
Ein paar Fragen …
232
… und ein paar Aufgaben
9
233
Surfer wiedererkennen mit Cookies Was sind Cookies?
235
236
Grundeinstellungen im Browser
239
Krümelmonsters Keksfabrik: Cookies »backen« Der Keks bekommt ein MHD
243
Herumkrümeln: Cookies »verspeisen« Aufgegessen: Cookies löschen Schlussbemerkung
246
Zusammenfassung
246
Ein paar Fragen …
246
… und ein paar Aufgaben
10
244
245
246
Besucherzähler selbst gebaut
247
Zwei Dateien: So funktioniert das Beispiel Hitmaschine: Ein Textcounter Datei zum Lesen öffnen
249 250
Daten in eine Textdatei schreiben Rechtevergabe mit chmod
258
Zusammenfassung
258
Ein paar Fragen …
258
… und ein paar Aufgaben
11
252
253
Counter de luxe mit Cookies Schlussbemerkung
248
248
Der geheimnisvolle Dateizeiger
So funktioniert das Skript
241
256
257
259
Eine Umfrage mit grafischer Auswertung So sieht das Beispiel aus
261
262
Durch Komma separierte Textdatei
263
11
Inhaltsverzeichnis
Text am Trennzeichen zerlegen
266
Die unsichtbare Tabelle für das Diagramm … und wieder etwas Mathe: Dreisatz
267
268
Die Umfrageseite: So funktioniert das Skript
270
Schummeln verboten: Mehrfachvotes unterdrücken 273 … und wieder entsteht ein Array Schlussbemerkung
277
Zusammenfassung
277
Ein paar Fragen …
277
… und ein paar Aufgaben
12
274
278
Das eigene Gästebuch 279 (Zu) simpel gestrickt: Version 1
280
Hacking-Versuche unterbinden
283
Die Funktionen nl2br() und readfile() Schon besser: Gästebuch Version 2
284
So vermeidest du Doppeleinträge Gästebuch sicherer machen Schlussbemerkung
291
Zusammenfassung
292
Ein paar Fragen …
292
… und ein paar Aufgaben
13
283
286
290
292
Ein Adressbuch für dein Team Planung ist die halbe Miete
296
Geniales Tool: phpMyAdmin
298
295
Etwas SQL zum Anlegen der Datenbanktabelle Die Datentypen im Überblick
304
Trage ein paar Adressen ein!
307
Alle Teammitglieder da? Schaue nach! Daten als HTML-Tabelle ausgeben 12
312
317
Mit PHP: Eingabeformular selbst gestrickt
327
300
Inhaltsverzeichnis
Schlussbemerkung
332
Zusammenfassung
332
Ein paar Fragen …
333
… und ein paar Aufgaben
14
334
Gästebuch de luxe als Datenbanktabelle Datenbanktabelle planen
336
Daten erst einmal ausgeben
338
Das Eingabeformular entsteht
343
Mit Sicherheit: Reloadsperre und Magic Quotes Nicht alle Datensätze auf einmal
354
Links für die seitenweise Ausgabe
357
Schlussbemerkung
361
Zusammenfassung
361
Ein paar Fragen …
362
… und ein paar Aufgaben
15
348
362
Weblog für Kids: »Das Mini-CMS«
365
Pflichtenheft: Zuerst planst du das Projekt Schickes Design: Die Ausgabe aller Daten
366 368
Datenbankabfrage: Der MySQL-Teil im Überblick News von Gestern? Ältere Einträge anzeigen! Passwortschutz mit Cookie
Mehr gefällig? Hier klicken! 389
Zusammenfassung
389
Ein paar Fragen …
390
… und ein paar Aufgaben
375
379
380 383
Die Funktionen strlen() und substring() Schlussbemerkung
372
377
So bindest du die Beiträge ein HTML in PHP mit heredoc
335
385
390 13
Inhaltsverzeichnis
16
Aktivitäten verwalten: Wer kommt mit ins Kino? 391 Das Adressbuch bekommt Gesellschaft
392
Ist das noch normal? Daten aufteilen!
395
Nicht vergessen: Das Eingabeformular
399
Bitte bestätige: Name und Nutzer-ID
403
Wer kommt mit? Aus zwei mach drei!
406
SQL für Profis: Von Joins und Funktionen Schlussbemerkung
416
Zusammenfassung
417
Ein paar Fragen …
417
… und ein paar Aufgaben
17
411
417
Automatisch Geburtstagsgrüße versenden 419 MySQL und dein Dienstleister
420
ALTER TABLE: Neue Spalte mit ADD COLUMN Vorüberlegung: Pseudo-Cronjob einrichten So klappt’s: Das Geburtstags-Skript Schlussbemerkung
426
Zusammenfassung
427
Ein paar Fragen …
427
… und ein paar Aufgaben
420 421
422
428
Anhang A: Für Eltern und Lehrer
429
Anhang B: Hochladen der Seiten mit FTP Anhang C
437
Empfehlenswerte PHP-Editoren PHP und MySQL lernen
438
Stichwortverzeichnis 439 14
437
431
Vorwort PHP – was ist das? Lass mich dazu eine kleine Geschichte erzählen! Es war einmal ein Typ, der hieß Rasmus. Und Rasmus hatte eine eigene Homepage. Zugegeben, das ist heute nichts Besonderes. Doch damals (1994) besaßen die meisten Homepages den Charme einer verhauenen Mathearbeit. Es fehlte der Pfiff. Das ärgerte unseren Helden. Kurzerhand schrieb Rasmus ein paar Befehle, um seine Homepage »aufzupeppen«. Eine neue Programmiersprache war geboren! Er nannte sie Personal HomepageTools, kurz PHP. Und weil PHP so einfach war, fanden sich bald ein paar andere Computerexperten, die immer mehr »Pepp« zu PHP hinzufügten. Gemeinsam entwickelten und entwickeln sie PHP zur einer richtig coolen »HomepageAufpepp-Sprache«: Egal ob Besucherzähler oder Gästebuch – alles das konnte nun mit relativ wenig Aufwand »gebastelt« werden. Wenn du dieses Buch liest, gibt es schon die PHP-Version 5.4 oder sogar schon 6 – da ist in der Zwischenzeit also allerhand passiert. Auch auf deiner Homepage wird mit PHP bald allerhand passieren. Versprochen! Doch wozu brauchst du dieses Datenbankprogramm namens MySQL? Und was ist das genau? Das erzähle ich dir gleich! Doch vorher sprechen wir über die Sache, um die sich im Buch (fast) alles dreht … über das Programmieren.
Was bedeutet eigentlich Programmieren? Programmieren ist … wenn man dem Computer sagt, wo der Hase lang läuft. Du gibst dem Computer Befehle, die er automatisch ausführen muss. Angenommen, Lars Labertasche bestellt auf deiner Homepage drei Eimer deiner selbst gebrauten Spezial-Kaugummis mit Sprechblasen-Garantie. Dann soll der »Homepage-Computer« diese Bestellung an dich per E-Mail weiterleiten. Und zwar so schnell wie möglich. Damit der Computer das auch so macht wie du willst, schreibst du ihm alles vorher genau auf. Du gibst dem Rechner die entsprechenden Befehle und Anweisungen.
15
Vorwort
Vorwort
Und da liegt der Hase im Pfeffer: Computer verstehen kein Deutsch! Du musst wohl oder übel die Sprache der Computer lernen. Diese heißt in unserem Fall eben PHP. Wenn Lars hinterher doch 5 Eimer Lakritzschnecken oder 3 Sack Gemüsezwiebeln geliefert bekommt, hast du wohl einen Programmfehler gemacht. Aber das steht auf einem anderen Blatt. Programmfehler gehören zur Programmierer-Karriere dazu wie der »Geigerfleck« am Kinn eines Violinspielers.
Wozu sind Datenbanken da? Angenommen, dein kleines »Geschäft« auf der Homepage startet richtig durch: Lars ist inzwischen Stammkunde geworden. Neben Lars bestellen noch Lukas, Laura, Tim, Michelle und Jan regelmäßig deine selbst gekochten Kaugummis. Täglich kommen unzählige Bestellungen. Um weniger Stress zu haben, möchtest du nicht mehr jede einzelne Bestellung vom Computer geschickt bekommen. Du »befiehlst« dem Computer, alle Bestellungen in eine Liste zu schreiben. Solch eine Liste ist aufgebaut wie eine Tabelle: Alles steht fein säuberlich untereinander. Diese eine »Tabellen-Liste« wird nun als Datenbanktabelle bezeichnet. Das ist sehr übersichtlich, weil jede Bestellung in einer eigenen Zeile steht. Halt, da wäre noch eine Kleinigkeit: Wenn du Datenbanktabellen einsetzen willst, brauchst du wieder ein spezielles Programm, das Datenbankprogramm. Und hier nehmen wir MySQL. Warum? Weil MySQL viel kann, nichts kostet und sich wunderbar mit PHP verträgt. Merke dir: Eine Datenbanktabelle ist eine Art Liste in Tabellenform. Sie hilft dir, deine Daten effektiver zu speichern. Du kannst sie, musst sie aber nicht einsetzen. Eine oder mehrere zusammengehörige Datenbanktabellen werden auch als Datenbank bezeichnet. Am Beispiel eines Gästebuches zeige ich dir später, wie man es ohne und mit Datenbankunterstützung machen kann. Apropos machen …
16
Was kannst du mit PHP und MySQL alles machen?
Was kannst du mit PHP und MySQL alles machen? Fast alles! Wie wäre es mit einem Zähler? Dem eben erwähnten Gästebuch? Der Umfrage? Du möchtest die aktuelle Uhrzeit auf der Homepage anzeigen? Das Datum? Du willst dem Surfer mitteilen, dass er schon einmal auf deiner Homepage war. Kein Problem! Überprüfe, ob das Formular (z. B. für die Kaugummi-Bestellung!) richtig ausgefüllt wurde. Zeige Lars Labertasche alle Bestelldaten noch einmal an. Schreibe ein Programm, welches deinen fleißigen Bestellern bei jeder Bestellung eine Dankes-E-Mail schickt. Das Größte: Vieles davon geht sogar schon allein mit PHP. Doch ein Datenbankprogramm wie MySQL ist dann ungeschlagen, wenn viele Informationen verknüpft werden müssen. Klingt kompliziert? Nehmen wir an, du erweiterst das Angebot deines kleinen »Internet-Ladens«. Nun gibt es neben den »Kautschis« auch »Lakritzschnecken mit eingebautem Drehwurm«, »Pfefferminzbonbons mit Anisgeschmack« und andere selbst gemachte Leckereien. Wie stellst du deine Köstlichkeiten ins Netz? Du trägst alle Daten fein säuberlich untereinander in eine weitere Datenbanktabelle ein. Es gibt also eine extra Liste für deine Süßigkeiten und eine weitere Liste für die Bestellungen. Das macht es für den Computer einfacher, die Daten zu verwalten, weil alles wunderbar geordnet ist. Doch damit nicht genug. Weise den Computer an, Bestellung und Adressdaten in getrennten Tabellen zu führen. Das ist ungeheuer praktisch, denn nun muss Lars seine Daten nicht bei jeder Bestellung neu eingeben. Er bekommt einfach eine Nummer und wird jedes Mal anhand dieser Nummer vom Computer wiedererkannt. Lange Rede, kurzer Sinn: Im Endeffekt hast du ein richtiges kleines System von miteinander verknüpften Datenbanktabellen. Für jeden Zweck gibt es die passende Tabelle: Eine für die Produkte, eine für die Kunden und eine für die Bestellungen. Alle Tabellen gehören zusammen: Das ist ungeheuer praktisch und effektiv. Damit hast du eine tolle Datenbank geschaffen! Wenn du dieses Prinzip verstanden hast, kannst du praktisch alles mit PHP und MySQL machen. Und dieses tolle Prinzip schauen wir uns in den letzten Kapiteln des Buches und auch im Fortsetzungsband »PHP und MySQL Praxisbuch für Kids« etwas näher an. 17
Vorwort
Vorwort
Was ist ein Webserver und wozu brauchst du den? Was zum Teufel ist denn nun der Webserver? Es ist dein »HomepageComputer«. Also der Rechner, auf dem deine Homepage liegt. ‚Moment mal’, denkst du hier vielleicht. ‚Meine Homepage liegt doch z. B. auf meinem Rechner daheim. Dort habe ich sie erstellt und dort kann ich sie mir jederzeit ansehen.’ Das stimmt schon, an deinem Rechner kannst du deine Homepage sehen. Und du kannst sie deinen Kumpels zeigen. Doch damit alle etwas von deinen Seiten haben, musst du diese erst auf den »Homepage-Computer« im Web hochladen. Also auf den sogenannten Webserver. Das Wort Server kommt vom Englischen to serve. Das bedeutet soviel wie »dienen«. Der Webserver ist der Diener im Web. Hier liegen die Webseiten, die Homepages. Der Webserver dient so allen Besuchern. Denn die Besucher können die Seiten nun vom Webserver abrufen und mit ihrem Browser betrachten. Der Webserver sorgt übrigens auch dafür, dass PHP und MySQL richtig gut funktionieren. Er führt also die von dir aufgeschriebenen Programmbefehle aus. Erst dann zeigt er dem Besucher die gewünschte Seite. Der bekannteste und beste Webserver heißt übrigens Apache. Ja richtig, Apache wie der gleichnamige Indianerstamm. Bei solch einem tollen Namen muss die Sache ziemlich cool sein. Das ist sie auch! Die Arbeit mit PHP, MySQL und dem »Apachen« macht irrsinnigen Spaß. How!
Wie arbeitest du mit diesem Buch? Lahmes Lesen ist out, Selbermachen ist in: Dieses Buch enthält nicht nur sturen Text und öde Programmanweisungen, sondern vor allem Beispiele, Tipps und Tricks. Mitmachen ist also Pflicht. Es lohnt sich!
18
Doch wenn du mal keine Lust zum Abschreiben hast (oder dich immer wieder verschreibst), ist das auch nicht schlimm! Ich habe dir alle Beispiele auf die CD gepackt. Ansonsten zeige ich dir schnell noch, welche Symbole besonders wichtig sind.
Was brauchst du für dieses Buch?
Arbeitsschritte
>
Wenn du dieses Zeichen siehst, heißt das: Achtung, Action! Es gibt etwas zu tun. Schreibe eine Programmzeile, wähle einen Befehl oder führe einen Indianer-Freudentanz auf, weil dein Programm endlich funktioniert.
Stolperfallen und »Rettungsringe« Dieses Symbol findest du dagegen immer dann, wenn es problematisch wird. Hund Buffi hilft dir, Stolperfallen von vornherein zu umgehen. Lies also besonders gründlich, wenn du auf dieses Zeichen stößt. Vielleicht ist das ja gerade der »Rettungsring«, den du in diesem Moment brauchst? Aber auch Tipps und Tricks bauen wir in solche Kästen ein.
Besonders wichtige Stellen im Buch Immer wenn solch ein Ausrufezeichen am Textrand erscheint, wird es besonders wichtig. Du solltest den entsprechenden Kasten vielleicht zweimal lesen.
Fragen und Aufgaben Wiederholung ist die Mutter der Porzellankiste (oder so ähnlich). Deshalb gibt es am Ende jedes Kapitels ein paar Fragen und ein paar Aufgaben. Wie heißt es so schön: Übung macht den Meister. Die Antworten und die Lösungen zu den Aufgaben findest du auf der beiliegenden CD.
Was brauchst du für dieses Buch? Nun, einen Platz im Bücherregal. Spaß beiseite, natürlich einen Computer! Es muss nicht einmal der allerneuste Rechner sein. Hauptsache Windows und ein Internet-Browser sind vorhanden. Wir geben uns dabei ganz bescheiden, es müssen nicht die neusten Versionen sein. Du kannst sogar noch Windows 98 verwenden. Oder natürlich Windows 2000, Me bzw. das aktuelle Windows XP. Vom Prinzip her ist das Vorgehen bei allen Versionen gleich. Sollte es hier Unterschiede geben, mache ich dich rechtzeitig darauf aufmerksam.) Bei den Browsern ist Firefox sicher die beste Wahl, aber auch der Internet Explorer, Opera, Safari oder Google Chrome sind geeignet.
19
Vorwort
Vorwort
Alles andere findest du auf der CD! Mehr brauchst du nicht! Tatsache, um den Rest musst du dich nicht kümmern. Auf CD liefern wir dir alles andere mit, damit du sofort loslegen kannst. Hier findest du unter anderem: 0 PSPad – eine sehr gute Windows-Freeware zum Erstellen von Homepages mit PHP, ein Programm vom Ja Fiala. 0 Aptana Studio, die auf Java basierende Alternative für Nutzer von Linux und Mac OS. (Aber auch für Windows-Nutzer!) 0 PHP selbst (zum Programmieren der dynamischen Webseiten) und MySQL (das Datenbankprogramm, um mit Datenbanktabellen Ordnung zu schaffen) 0 phpMyAdmin (eine Art grafische Oberfläche für MySQL, damit du Datenbanken und Tabellen bequem einrichten kannst) 0 Apache-Webserver (damit du alles auf dem eigenen Computer ausprobieren kannst und so tust, als ob du einen eigenen Webserver hättest. How!) 0 XAMPP: Ein Super-Programm, welches dir alle bisher genannten Sachen fast vollautomatisch auf deinem Rechner einrichtet 0 FileZilla, ein Programm zum Hochladen deiner Homepage auf den Webserver 0 SELFHTML, eine schon fast zu profimäßige Einführung in HTML, die Sprache zum Erstellen von Homepages 0 NotePad++, ein flinker Windows-Editor zum schnellen Bearbeiten von PHP-Dateien.
Wie gut kommst du mit dem Computer klar?
20
Du solltest dich schon ein wenig mit dem Computer auskennen. Du kommst mit Maus und Tastatur klar? Prima! Dann kann kaum etwas schief gehen. Wenn du zusätzlich noch weißt, was Ordner sind und wie man diese anlegt, gehörst du schon in die Profi-Liga. (Und wenn nicht, ist das halb so wild, ich zeige es dir.) Im Notfall fragst du einfach deine Freunde, Geschwister oder Eltern. Vielleicht kennen die sich ja aus. Oder sie spendieren dir ein anderes Buch aus der Reihe »für Kids«? Zum Beispiel »PCs für Kids« (zu Windows Vista) von Hans-Georg Schumann.
Wie gut kommst du mit dem Computer klar?
Was ist neu in Auflage 4 und 5? Fünf Auflagen in fünfeinhalb Jahren – das hätte sich der Autor dieses Buches nicht träumen lassen. Die erste Auflage erschien 2003, die fünfte 2008. Vielen Dank für das große Vertrauen! Wir freuen uns riesig über diesen Erfolg. Grund genug, den gesamten Inhalt kritisch zu überprüfen und behutsam zu modernisieren. Soviel vorweg: Schon in der vierten Auflage von 2007 gab es umfangreiche Neuerungen, Ergänzungen und Erweiterungen! Hier ging es vor allem um das Thema Sicherheit. Die fünfte Auflage haben wir nochmals durchgesehen und an vielen Stellen verbessert.
Wichtig: Das Thema Sicherheit Besonders das Thema Sicherheit spielt inzwischen eine immer wichtiger werdende Rolle. Die Spamattacken werden immer heftiger, die Hacker immer dreister. Selbst große Programme wie das Content-ManagementSystem Joomla oder Foren wie phpBB werden bzw. wurden Opfer von Hackerattacken. Aus diesem Grund haben wir schon für Auflage 4 alle Skripte auf Sicherheit hin überprüft und in manchen Fällen etwas erweitert. Außerdem geben wir dir an vielen Stellen wertvolle Tipps und Tricks, wie du deine Skripte von vorn herein gegen Angriffe von außen schützen kannst. Sicherheit ist ein Prozess, kein Zustand. Was heute noch als sicher gilt, kann morgen möglicherweise schon erfolgreich gehackt werden. Auch ist der Aufwand für absolut sichere Skripte so hoch, dass du alleine für ein wirklich sicheres Gästebuch mehrere hundert Zeilen Code schreiben müsstest. Wir versuchen, den Mittelweg zu finden zwischen einfacher Verständlichkeit und Durchschaubarkeit auf der einen Seite und Sicherheit der Skripte auf der anderen Seite. Man kann es noch immer und immer ein Stückchen aufwendiger treiben. Aber an irgendeiner Stelle muss dann auch Schluss sein.
Videoworkshops In Auflage 4 haben wir erstmals Videoworkshops eingefügt. In diesen Videos führen wir dir beispielsweise die Installation von PHP und MySQL mit dem Tool XAMPP vor, damit du sofort mit dem Programmieren loselegen kannst. Du findest alle Videos im Ordner videos. Rufe die Datei index.html auf. Die Videos liegen im Flashformat vor. Mehr Informationen findest du in der Datei liesmich.txt.
21
Vorwort
Vorwort
Was ist neu in Auflage 6? Wenn du dich bisher gewundert hast, kann ich dich beruhigen: Du hast das richtige Buch erwischt. Vor dir liegt tatsächlich schon die sechste Auflage von 2010. Und das kam so: Kurz vor Weihnachten 2009 erreichte mich der Hilferuf aus dem Verlag: »Wir haben nur noch ganz wenige Exemplare auf Lager. Der Titel ist schneller ausverkauft als gedacht. Wir würden das Buch am liebsten sofort in einer neuen Auflage drucken!« Sofort war ein echtes Problem. Denn für eine weitere Auflage hatte ich mir ganz heftige Aktualisierungen vorgenommen. Ich wollte die Inhalte im Buch grundlegend modernisieren und meine Anleitungen für die Zukunft fit machen. Das bedeutet: 0 Alle HTML- bzw. PHP-Dateien müssten im immer weiter verbreiteten Universalzeichensatz Unicode (UTF-8) gespeichert werden. Denn vielleicht möchtest du auch einmal fremdsprachige Seiten mit allen möglichen Sonderzeichen erstellen und pflegen? Mit UTF-8 kannst du selbst »Chinesisch rückwärts« darstellen, deutsche Umlaute und Sonderzeichen sowieso. Und da inzwischen auch MySQL die Daten im Format UTF-8 sichert, wäre das auch aus diesem Grund sehr wichtig. 0 Dafür müsste ich einen neuen, Unicode-fähigen PHP-Editor finden, denn der gute alte Weaverslave von Thomas Weinert (der Editor der ersten fünf Auflagen) wäre mit dem Thema UTF-8 leider überfordert. Schade, Thomas, dass du noch keine Zeit zum Aktualisieren hattest! Schön, dass ich mit PSPad von Jan Fiala einen guten Ersatz gefunden habe. 0 Außerdem müsste ich beim Thema »Datenbankzugriff« auf die moderneren PHP 5-Funktionen zurückgreifen. Schon aus Sicherheitsgründen! PHP 5 ist inzwischen der Mindeststandard, praktisch alle Anbieter haben von PHP 4 auf PHP 5 umgestellt! Und veraltete Techniken gehören nun mal nicht in ein PHP- und MySQL-Lehrbuch. Eine Menge Arbeit – im Interesse der Sicherheit! 0 Die Installation des sogenannten lokalen Webservers (wir verwenden im Buch XAMPP) hat sich geändert. Auch hier müsste ich eine komplett neue Anleitung schreiben. 0 Auch die Informationen zu den Dienstleistern müsste ich aktualisieren, denn innerhalb eines Jahres kann viel geschehen.
22
0 Weiterhin wäre es schön, wenn ich mehr Tipps für Mac- und LinuxNutzer einbauen könnte, denn vor allem der Apple Macintosh gewinnt immer mehr Freunde. (Auch wenn es nur bei Tipps bleiben wird – für ausführliche Anleitungen fehlt leider der Platz.)
Was ist neu in Auflage 6? Nun, was soll ich dir schreiben: Ich habe es geschafft! Die vollständig aktualisierte 6. Auflage liegt vor dir. Weihnachtsbaum, Kerzenschein und Bescherung sind ausgefallen – Silvesterparty und Katerfrühstück auch! Dafür habe ich Tag und Nacht geschrieben, recherchiert, Code getippt und Code geprüft. Bis kurz vor dem Drucktermin. Denn das bin ich dir schuldig – eine gut verständliche PHP-Anleitung auf der Höhe der Zeit. Und wenn das Buch so gut ankommt wie die Vorauflagen, hat sich die Mühe auf jeden Fall gelohnt! Danke für dein Vertrauen! Danke auch an die vielen, vielen Leser, die mir Tipps, Korrektur- und Verbesserungsvorschläge geschickt haben. Ganz besonderer Dank geht an Sandra, Jonas und vor allem an Falk Joensson (http://jcoud.de). Gerade du, Falk, hast mir mit deinen umfangreichen Korrektur- und Verbesserungsvorschlägen sehr geholfen. Nobody is perfect und ich schon gar nicht. Wie gut, dass es solche aufmerksamen Leser gibt wie dich!
Das Betriebssystem spielt keine Rolle! Wundere dich nicht, wenn im Buch mal der eine oder andere Browser auftaucht. Der Grund ist ganz einfach: Ich habe die Anleitungen auf verschiedenen Rechnern getestet. Ich zeige dir sowohl Abbildungen vom Internet Explorer 8 unter Windows 7 als auch Bildschirmfotos des alten Internet Explorer 6 aus Windows XP. Auch Firefox ist natürlich vertreten. Warum diese Vielfalt? Du sollst sehen, dass das Ergebnis nicht vom Betriebssystem oder Browser abhängt. HTML, PHP und MySQL sind plattformunabhängig, sie laufen überall! Selbst auf dem Macbook Pro mit Snow Leopard oder dem altersschwachen Schulrechner mit Windows 2000 oder Linux. Im Web beim Dienstleister sowieso – und der arbeitet in der Regel unter Linux! Hauptsache, du hast das richtige Webserver-Programm und den passenden Code-Editor. Apropos Code-Editor: Da die meisten Leser mit Windows arbeiten, kommt der im Buch vorgestellte Code-Editor PSPad aus der WindowsWelt. Er ist schlank und schnell und läuft daher auch auf älteren Rechnern. Du kannst den Anleitungen jedoch auch an Macs oder LinuxRechnern folgen. Verwende lediglich ein anderes Entwicklungswerkzeug, einen anderen Editor. Programmcode und Ergebnis bleiben gleich. Für Mac- und Linux-Nutzer empfehle ich Aptana Studio. Du findest dieses Tool auf der CD im Ordner programme/aptana. Aptana Studio ist sehr leistungsfähig, benötigt dafür aber einen schnellen Rechner.
23
Vorwort
Vorwort
Wo gibt’s Hilfe, wenn es mal klemmt? Melde dich einfach! Für dieses Buch hat der Autor eine eigene Serviceseite im Web eingerichtet. Surfe zu www.phpkid.de! Hier findest du ein Forum, wo du mit anderen Lesern diskutieren und dir Hilfe holen kannst. Weiterhin listen wir brandheiße Tipps und Tricks zu Dienstleistern auf und informieren dich zu Änderungen nach dem Druck. Außerdem kannst du Fragen stellen, die wir dir dann hoffentlich schnell beantworten. Und du findest evtl. Fehlerberichtigungen, denn auch Autoren sind nur Menschen. Du hast Lust bekommen auf mehr? Dann legen wir dir die Fortsetzung dieses Titels namens »PHP und MySQL Praxisbuch für Kids« (2. Auflage) sehr ans Herz. Dabei stehen auf dem Programm: ein komplettes Forum mit Userverwaltung, das Schreiben eines RSS-Feedreaders, ein komfortables Fotoalbum und sogar das Planen und Programmieren eines Content-Management-Systems. Ganz nebenbei schnupperst du sogar noch ein wenig Objektorientierungsluft und lernst, wie man richtig guten Code schreibt. Gleicher Autor, gleicher Verlag, gleicher Preis. Voilà - jetzt geht es aber los mit PHP und MySQL! Doch zuvor lernst du noch etwas HTML und CSS. Gleich auf den nächsten Seiten. Einverstanden?
24
1 Deine coole Homepage mit HTML Auf los geht’s los! Wenn du mit PHP programmieren willst, musst du HTML können. HTML ist schließlich die Sprache, mit der eine Homepage geschrieben wird. Ohne HTML macht PHP keinen Sinn. Du kannst noch kein HTML? Nicht schlimm! In diesem Kapitel lernst du das Wichtigste zum Thema. Glaube mir, es ist kinderleicht. Na ja, fast … Du kannst schon HTML? Umso besser! Mache trotzdem mit, denn in diesem Kapitel zeige ich dir ein super Programm: einen sogenannten HTML- und PHP-Editor. Und ich verrate dir, wie du dein Projekt am besten organisierst. In diesem Kapitel lernst du, $ wie man eine HTML-Seite erstellt $ wie man Überschriften und Absätze notiert $ wie man Grafiken in die Seite einfügt und mit Farben arbeitet $ wie man Querverweise setzt, die Hyperlinks $ wie man Tabellen erstellt $ wie man der Seite mit Style Sheets ein schickes Layout verpasst Doch bevor es losgeht, besprechen wir gleich zu Beginn ein paar Dinge, die verdammt wichtig sind.
25
Kapitel
1
Deine coole Homepage mit HTML
Richte dir einen Projektordner ein! Ordnung ist das halbe Leben, geht dir dieser Spruch auch so auf die Nerven wie mir? Dabei kann ein wenig Ordnung im Nachhinein viel Zeit sparen! Und schon sind wir beim Thema Ordner. Richte dir zuerst einen Projektordner für deine Experimente ein. Diesen nennen wir phpkid und legen ihn direkt unter der FESTPLATTE C: ab!
Projektordner phpkid einrichten Wie geht das? Ganz einfach!
26
>
Starte zuerst den Windows Explorer. Die coolste Methode: Du hältst die Taste [Win] auf deiner Tastatur gedrückt. Das ist in der Regel die zweite oder dritte Taste von links in der unteren Reihe. Du erkennst sie am Windows-Logo. Jetzt tippst du mutig und unverzagt ein [E] wie »echt einfach« oder wie »Explorer«. Zack – schon startet das »Ordner-Verwaltungs-Programm« namens Windows Explorer.
>
Was nun, sprach das Huhn? Achte darauf, dass dein Laufwerk C: (die Festplatte) markiert ist. Klicke also auf der linken Seite auf das Symbol für deine FESTPLATTE. Es befindet sich unterhalb des Symbols COMPUTER (Windows 7 bzw. Vista) bzw. ARBEITSPLATZ (Windows XP).
>
Und nun richtest du deinen Ordner ein. In Windows 7 klickst du einfach auf die Schaltfläche NEUER ORDNER:
In Windows Vista gibt es diese praktische Schaltfläche leider noch nicht. Dort klickst du auf den Menüeintrag ORGANISIEREN und wählst den Menüpunkt NEUER ORDNER. In Windows XP und Windows 2000 ist der Weg noch etwas länger. Du klickst im Menü DATEI auf den Befehl NEU. Ein weiteres Menü klappt zur Seite. Wähle hier den Befehl ORDNER.
Richte dir einen Projektordner ein!
>
Jetzt erscheint ein Platzhalter-Ordner mit der Bezeichnung Neuer Ordner. Dieser Platzhaltername ist markiert. Du kannst ihn also direkt überschreiben. Klicke noch nirgends, sondern tippe einfach los. Tippe den Namen des neuen Ordners, im Beispiel phpkid.
>
Geschafft? Dann drücke einfach [Enter]! Fertig ist der neue Ordner.
Suche doch einmal deinen neuen Ordner. Du findest ihn im linken Bereich des Windows-Explorers. Er wird alphabetisch zwischen den anderen Ordnern einsortiert. Sollte dein Ordner nicht gleich zu sehen sein, ist das nicht schlimm. Der Windows Explorer ist manchmal ein »langsamer Geselle«, er vergisst das Aktualisieren der Ansicht. Hilf etwas nach, drücke auf die Funktionstaste [F5] auf deiner Tastatur. Hoppla, du hast dich beim Ordnernamen verschrieben? Oder der Ordner wurde an der falschen Stelle eingerichtet? Kein Problem! Wenn du einen Ordner umbenennen willst, klickst du ihn kurz an. Drücke nun die Funktionstaste [F2]. Schon »öffnet« sich der Ordnername und du kannst ihn korrigieren. Bestätige die Umbenennungsaktion wieder mit [Enter]. Natürlich lässt sich so ein Ordner auch löschen. Markiere ihn und drücke die Taste [Entf] auf deiner Tastatur. Schon ist der Ordner weg!
Einen weiteren Unterordner einrichten Weil das so gut geklappt hat, machen wir es gleich noch einmal. Erstelle diesmal einen Unterordner namens html. Dieser Ordner soll direkt unterhalb von phpkid entstehen. Diesen neuen Ordner nutzen wir für unsere ersten Gehversuche mit HTML.
>
Markiere den Ordner phpkid im Windows Explorer. Klicke ihn also im linken Bereich an.
>
Wähle nun wieder NEUER ORDNER (ORGANISIEREN|NEUER ORDNER bzw. DATEI|NEU|ORDNER) und richte den Unterordner html ein.
Gewöhne dir bei der Namensgebung für Ordner und Dateien generelle Kleinschreibung an. Die Ordner sollen also phpkid und html und nicht Phpkid und Html heißen. Das ist deshalb so wichtig, weil der Webserver (Homepage-Computer) später ganz pingelig zwischen Groß- und Kleinschreibung unterscheiden wird. Und wenn du hier etwas vermischst, wird die Homepage im Web nicht oder nicht richtig angezeigt. Bei genereller Kleinschreibung kann hier jedoch nichts »anbrennen«. Okay? 27
Kapitel
1
Deine coole Homepage mit HTML
Bitte blende die Dateiendungen ein! Ärgert dich auch, dass du unter Windows die Dateiendungen normalerweise nicht siehst? Jede Datei hat ja eine typische drei- bis vierstellige Endung, die nach einem Punkt an den eigentlichen Dateinamen angehängt wird. Mit .doc kennzeichnet man Word-Dateien, .txt steht für Textdateien, .html für HTML-Dateien und .php für PHP-Dateien. Normalerweise siehst du diese Endungen nicht. Das ist sehr ärgerlich, denn wir brauchen sie! Für unseren Kurs musst du die Dateiendungen unbedingt eingeschaltet haben!
>
Rufe den Windows Explorer auf. Wie ging das noch? Halte dafür beispielsweise die [Win]-Taste auf deiner Tastatur gedrückt und tippe kurz ein [E]. Wähle nun im Menü ORGANISIEREN den Befehl ORDNER UND SUCHOPTIONEN. (Windows XP: EXTRAS|ORDNEROPTIONEN.)
>
Geschafft? Das Dialogfenster Ordneroptionen erscheint. Gehe ins Register ANSICHT, es ist das zweite Register.
>
Suche nach einer Option, die je nach Windows-Version folgendermaßen heißt: Erweiterungen bzw. Dateinamenerweiterungen bei bekannten Dateitypen ausblenden. Sie ist abgehakt. Nimm das Häkchen weg!
>
Bestätige deine Einstellungen durch Klick auf OK. Nun siehst du bei allen Dateinamen auch die typische Endung und weißt genau, um welchen Dateityp es sich handelt.
Nimm das entsprechende Häkchen weg, klicke es einfach an!
HTML auf Knopfdruck – mit PSPad
28
Vorhang auf, die Show beginnt. Nele, Tim und Buffi, Jan (Programmautor) und ich (Buchautor) präsentieren: PSPad, den freien Code-Editor für Windows! Es handelt sich praktisch um ein Programm zum Schreiben deiner Homepage. Neben HTML beherrscht PSPad aber auch PHP und andere Programmiersprachen. Geschrieben hat das tolle Programm Jan Fiala, die Homepage von PSPad findest du unter www.pspad.com.
HTML auf Knopfdruck – mit PSPad
So wird PSPad installiert PSPad liegt auf der CD für dich bereit! Die Installation ist kinderleicht und erfolgt Schritt für Schritt per Setup Wizard (Installationsassistent).
>
Starte den Windows Explorer, z. B. durch Gedrückthalten von [Win] (die Taste mit dem Windows-Logo) und kurzem Tippen von [E]. Schaue in den linken Bereich des Windows Explorers. Gehe zum Laufwerk für die CD und hangele dich durch bis zum Unterordner programme/pspad.
>
Hier siehst du die Datei pspad454inst_en.exe. Doppelklicke auf diese Datei. Je nach Windows-Version erscheinen erst warnende Dialogfenster, die du bestätigen musst. Klicke z. B. auf AUSFÜHREN bzw. JA.
>
Geschafft? Das Fenster Welcome to the PSPad Editor Setup Wizard ist erschienen? Prima! Folge den Schritten der Installation.
>
Klicke auf NEXT, um zum nächsten Bildschirm zu gelangen. Klicke vor I accept the agreement. Nun klickst du erneut auf die Schaltfläche NEXT und hangelst dich Schritt für Schritt durch die gesamte Installation!
>
Klicke also immer wieder auf NEXT. Die Voreinstellungen gehen in Ordnung, die kannst du stets übernehmen.
>
NEXT verschwindet, die Schaltfläche INSTALL erscheint? Dann hast du eine weitere Etappe auf deinem Weg erreicht. Klicke auf INSTALL – jetzt endlich wird das Programm auf deiner Festplatte eingerichtet!
>
Klicke zum Schluss auf FINISH. Das Programm startet ganz automatisch – und zwar auf Deutsch!
Wenn du das entsprechende Häkchen im letzten Schritt belassen hast, legt PSPad automatisch eine Verknüpfung auf dem Desktop an. Außerdem erscheint es als Programmeintrag in der sogenannten Schnellstartleiste rechts neben der START-Schaltfläche! Das ist wirklich genial!
29
Kapitel
1
Deine coole Homepage mit HTML
Eine HTML-Datei erstellen PSPad ist gestartet? Jetzt erstellst du im Handumdrehen deine erste HTMLSeite. Doch vorher sollten wir uns noch für die »richtige« HTML-Variante entscheiden. Ich schlage das klassische HTML 4 vor. Hast du schon etwas Ahnung von HTML? Fragst du dich auch, welches die »richtige« HTML-Schreibweise sei? Die »klassische« oder die Neuformulierung namens XHTML mit strengeren Regeln? Fakt ist, dass die Entwicklung von XHTML als eigenständige Sprache gerade erst eingestellt wurde. An HTML 5 dagegen wird fleißig gewerkelt – der Klassiker lebt also weiter. Zwar wird es auch von HTML 5 wieder eine strengere »XHTML-Variante« geben. Aber eben nur als alternative Syntax. Wir bleiben daher im Buch bei der Schreibweise der bewährten, klassischen Version 4.01 – und zwar ohne X vor dem HTML. Und so erzeugst du in PSPad eine Musterseite im »klassischen HTML 4.01«:
>
Wähle im Menü DATEI den Befehl NEU. Das Dialogfenster Neu erscheint. Klicke auf die Registerzunge Neue Datei aus Vorlage erstellen.
>
Scrolle zum Zweig HTML und klicke auf den Eintrag HTML 4.01 Transitional. Klicke danach auf BEARBEITEN, nicht auf OK. (OK würde eine neue HTML-Seite in den Editor einfügen, die auf diesem Grundgerüst beruht. Doch das Grundgerüst ist noch nicht ganz perfekt!)
Klicke auf die Schaltfläche »Bearbeiten«, noch nicht auf »OK«.
> 30
Du hast auf BEARBEITEN geklickt? Super! Jetzt erscheint das eben erwähnte Grundgerüst. Und zwar direkt als Vorlage! Du kannst und musst diese Grundgerüst-Vorlage wunschgemäß ändern.
HTML auf Knopfdruck – mit PSPad
Die HTML-Vorlage von PSPad anpassen So sieht es aus – das HTML-Grundgerüst. Für meinen Geschmack gibt es noch einige Schönheitsfehler. Und bevor wir die einzelnen Zeilen genauer betrachten, merzen wir diese Schönheitsfehler einfach aus. Die von mir gezeigten Zeilennummern sind bei dir in PSPad nicht sichtbar? Wähle ANSICHT/ZEILENNUMMERIERUNG. 1
Soviel vorweg: HTML besteht aus Text, der durch sogenannte Tags gesteuert wird. Jedes Tag steht in spitzen Klammern. Es gibt in der Regel ein Tag zum Einschalten und eins zum Abschalten. Das Abschalt-Tag bekommt zusätzlich einen Slash (/) vorangestellt. Die Taste mit den spitzen Klammern findest du links unten auf der Tastatur. Drücke [ musst du zusätzlich die [ª]-Taste gedrückt halten. Die Dinge, die mich stören, habe ich unterstrichen. Es sind zum Glück nicht viele. In Zeile 2 änderst du das cs in de. (Es sei denn, du möchtest deine Webseiten auf Tschechisch erstellen. Unser Programmautor Jan stammt aus Tschechien, das ist der Grund für cs.) Die Passage windows-1250 am Ende von Zeile 4 ersetzt du durch utf-8. UTF-8 ist der Universalzeichensatz, der die Zeichen aller wichtigen Sprachen enthält. Damit decken wir einen viel weiteren Bereich an Sprachen ab als mit dem Windows-Zeichensatz. Schließlich ist Windows nicht der Nabel der Welt!
31
Kapitel
1
Deine coole Homepage mit HTML Zeile 5 <meta name="generator" content="PSPad editor … usw. kann entfallen. Niemand muss wissen, dass wir die Seite mit PSPad generiert (erzeugt) haben! Schließlich schreibst du sie per Hand. Zeile 6 Untitled ist so wichtig, diese Zeile möchte ich gerne direkt unterhalb von platzieren. Das ist erlaubt! Dann rutscht die Zeile mit dem Zeichensatz einfach eine Etage tiefer. Außerdem ersetze ich den Platzhaltertext Untitled durch Hier Titel eintragen. Damit du nie vergisst, den wichtigen Seitentitel einzutragen!
Das perfekte HTML-Grundgerüst Und so sieht das perfekte HTML-Grundgerüst für unseren Kurs aus: 1
2 3 4 5
Hier Titel eintragen <meta http-equiv="content-type" content="text/html; charset=utf-8">
6 7 8 9 10
Die »Umbruchpfeile« signalisieren, dass die Zeile noch weitergeht. Beachte das Leerzeichen!
Du findest dieses Grundgerüst auch auf der Buch-CD. Schaue in den Ordner beispiele\kapitel01 und öffne die Datei html-grundgeruest.txt. Schreibe nicht nur utf-8, sondern stelle in PSPad unbedingt auch das Format UTF-8 ein: Wähle dafür im Menü FORMAT den Befehl UTF-8. Nur dann werden deine Umlaute und Sonderzeichen richtig dargestellt! In einigen Kapiteln jedoch müssen wir eine Ausnahme machen. Dort schreiben wir statt utf-8 einfach iso-8859-1. Wir wählen außerdem FORMAT|ANSI. Das beugt Problemen mit Umlauten beim Versenden von E-Mails vor. Ich mache dich rechtzeitig darauf aufmerksam!
32
Und nun brauchst du diese aktualisierte Vorlage nur noch zu speichern. Wähle DATEI|SPEICHERN. Vorlagen legt PSPad automatisch im Ordner Template ab. Im Beispiel findest du die bearbeitete Datei unter dem Pfad C:\Programme\PSPad Editor\Template\HTML 4.01 Transitional.html.
HTML auf Knopfdruck – mit PSPad
Eine HTML-Datei erstellen Voilà – jetzt endlich erzeugst du eine HTML-Seite. Wähle wieder DATEI|NEU, Register Neue Datei aus Vorlage erstellen. Navigiere erneut zum Zweig HTML und … diesmal doppelklicke gleich auf HTML 4.01 Transitional. (Markieren und Klick auf OK geht auch.) Erneut entsteht das oben gezeigte, ideale Grundgerüst einer HTML-Datei. Allerdings nicht als Vorlage, sondern gleich als HTML-Datei. Und die schauen wir uns jetzt etwas genauer an! Die lange Zeile 1 ist eine Ausnahme, eine reine Formalie. Dahinter steckt die sogenannte Dokumenttypdeklaration (kurz DTD). Damit zeigen wir, dass es sich um HTML in der Version 4.01 handelt (»Übergangsfassung«). Zu lang, das Biest? Von dieser DTD gibt es zum Glück auch eine Kurzform:
Aus Platzgründen verwende und zeige ich im Buch ab Kapitel 2 nur noch die Kurzform. Soviel vorweg: In HTML 5 soll das ganze DTD-Gebilde drastisch verkürzt werden: . Zum Glück! Der eigentliche Beginn steckt im Tag , hier geht es los. Wie die meisten Tags tritt auch dieses Tag paarweise auf: Auf das Einschalt-Tag folgt ein Ausschalt-Tag. In Zeile 10 wird das Tag per wieder abgeschaltet! Im Tag befindet sich das Attribut lang mit dem Wert de. Damit zeigen wir, dass diese Webseite in Deutsch verfasst ist. Als nächstes folgt der Kopf, der »Head«. Dieser steckt »zwischen« den Tags , also zwischen Zeile 3 und Zeile 6. Wichtig ist der Titel (). Was du zwischen diesen Tags notierst, erscheint
später in der Titelzeile des Browsers. Also in der blauen Leiste ganz oben.
>
Trage hier doch einmal etwas Sinnvolles ein. Ersetze Hier Titel eintragen einfach durch den Text Homepage von Computerhund Buffi!
Was bedeutet Zeile 5? Mit diesem sogenannten Meta-Tag lege ich den Zeichensatz fest. Mit charset=utf-8 sorge ich dafür, dass du mit Umlauten wie ä, ö, ü und dem ß arbeiten kannst. Ein Ausschalt-Tag ist in diesem Fall ausnahmsweise nicht nötig. Meta-Tags treten nicht paarweise auf. Früher wurden Umlaute und Sonderzeichen wie das ß umschrieben. Statt ä schrieb man z. B. ä und aus ö wurde ö usw. usf. Das ß wurde durch ß ersetzt. Dank utf-8 ersparen wir uns diese Qual und ermöglichen den Einsatz praktisch beliebiger Zeichen. Deine Homepage ist damit gleich gut gerüstet für alle Sprachen der Welt!
33
Kapitel
1
Deine coole Homepage mit HTML In Zeile 7 wird der »Körper« des Dokuments eingeschaltet, der sogenannte »Body«. Zeile 9 schaltet den Body wieder ab.
Speichern nicht vergessen! Vergiss nicht, dein Projekt zu speichern. HTML-Dokumente sind Textdokumente. Sie werden mit der Endung htm bzw. html versehen. Ich schlage den Namen index.html vor. Warum? Eine Hauptseite wird in aller Regel index.html genannt! Und so speicherst du in PSPad:
>
Wähle im Menü DATEI den SPEICHERN-Befehl (oder tippe die Tastenkombination [Strg] + [S], das geht viel fixer!). Das Dialogfenster zum Speichern erscheint, der Fokus steht auf dem Feld Dateiname.
>
Tippe den Dateinamen ein, im Beispiel index.html. Navigiere zu dem Ordner, in dem du speichern möchtest. Im Beispiel gehst du zu C:\phpkid\html – im Feld Speichern in muss jetzt html stehen.
>
Klicke auf SPEICHERN, um die neue HTML-Datei zu sichern.
Achte darauf, die Datei im richtigen Ordner abzulegen!
>
Schaue in den linken Bereich, zum Toolfenster mit dem Mini-Explorer. Diesen Mini-Explorer erreichst du über das zweite Register. Navigiere hier zu dem Ordner, in dem du gespeichert hast. Im Beispiel gehst du zu C:\phpkid\html und klickst den Ordner html an.
>
Im unteren Bereich des Toolfensters findest du die Dateiliste. Hier sollte die index.html als Symbol zu sehen sein. Hat es geklappt?
Du kannst dieses pfiffige Toolfenster auch ausblenden. Wähle ANSICHT|TOOLFENSTER oder die Tastenkombination [Strg] + [F2]. Eine erneute Wahl dieses Befehls blendet das Toolfenster wieder ein. 34
So wird’s perfekt: Überschriften, Absätze und mehr
So wird’s perfekt: Überschriften, Absätze und mehr Und, wie schaut’s aus? Bewundere deine Seite doch einmal in der Vorschau! Dafür bietet dir PSPad folgende zwei Möglichkeiten:
Öffnen im internen Browser Das Öffnen im internen Browser ist ganz einfach. Drücke die Funktionstaste [F10], klicke das »Weltkugel-Symbol« an oder wähle HTML|VORSCHAU IM INTERNEN BROWSER. Schon öffnet sich ein neues Fenster und zeigt deine Seite.
Noch besser jedoch ist die externe Browservorschau. Dabei öffnet sich der Browser in einem eigenen Fenster und du hast den vollen Überblick. Nur hier wird auch der ungeheuer wichtige Seitentitel dargestellt, also der Text zwischen den Tags .
Öffnen im externen Browser Schaue in den linken unteren Bereich, zum Toolfenster. Wähle oben das zweite Register, das mit dem Ordnersymbol. Achte darauf, dass der Ordner html unter phpkid markiert ist. Schaue dann etwas tiefer – und zwar dorthin, wo die einzelnen Dateien des markierten Ordners angezeigt werden. Klicke mit der rechten Maustaste auf die zu öffnende Datei, rechtsklicke im Beispiel also auf index.html. Das Kontextmenü erscheint. Wähle ganz oben den Befehl ÖFFNEN. Die HTML-Seite wird im Standardbrowser geöffnet, in aller Regel ist das der Internet Explorer, bei mir jedoch der Firefox. Du möchtest einen anderen Browser wählen? Dann verwende den Befehl ÖFFNEN MIT und suche den anderen Browser heraus. Der Browser ist nicht aufgelistet? Suche ihn aus dem Dateisystem deiner Festplatte heraus. Das gelingt beispielsweise über die Schaltfläche DURCHSUCHEN bzw. PROGRAMM AUSWÄHLEN. Mozilla Firefox liegt in der Regel unter dem Pfad C:\Programme\Mozilla Firefox. 35
Kapitel
Deine coole Homepage mit HTML
1
Die HTML-Seite in der externen Vorschau. Als Browser habe ich den Firefox gewählt.
Die Seite ist leer, aber der Seitentitel von Zeile 4 steht schon da. Wo? Na ganz oben in der Titelzeile des Browsers. Dort steht nun ebenfalls Homepage von Computerhund Buffi. Du wunderst dich, warum bis jetzt noch kein Inhalt im Dokument zu sehen ist? Du hattest doch noch nichts hineingeschrieben! Der Bereich zwischen ist schließlich noch leer! Nur der Seitentitel ist schon vorhanden und der wird ja auch angezeigt!
Leben einhauchen: Überschriften und Absatz
>
Hauche deinem Dokument Leben ein: Klicke dazu in die bisher noch leere Zeile. Es ist die Zeile 8. Wir wagen uns nun an den Body. Schaffe ruhig durch mehrmaligen Druck auf [Enter] ein paar Zeilen Platz.
Auch der »Buch-Hund« Buffi wollte es sich nicht nehmen lassen, endlich mit einer eigenen Homepage aufzuwarten. Bitte sehr – in diesem Kapitel darf er endlich aktiv werden. Orientiere dich an Buffis Beispiel. Schreibe es ab. Ich empfehle dir, die HTML-Befehle erst einmal exakt so aus dem Beispiel zu übernehmen. (Nur den Text kannst du so ändern, dass er auf dich zutrifft!) Homepage von Buffi
Guten Tag! Mein Name ist Buffi! Ich bin von Beruf Computerkinder-Hund mit allumfassender Allgemeinbildung. Meine Freunde heißen Tim und Nele.
Hier zeige ich dir ein Bild von mir!
36
So wird’s perfekt: Überschriften, Absätze und mehr
So wird der Code in PSPad dargestellt. Du kannst ruhig immer wieder [Enter] drücken, um den Code ordentlich auszurichten. Auf die Anzeige im Browser hat das keinen Einfluss.
Was haben wir da gemacht? Wir fangen mit einer Überschrift an! Mit dem Tag-Paar kennzeichnest du die heading 1, die Hauptüberschrift. Hier schmettert dir Buffi sein Homepage von Buffi entgegen.
Die Homepage beginnt mit einer Hauptüberschrift.
Im Text gibt es gleich noch eine weitere Überschrift, und zwar Hier zeige ich dir ein Bild von mir! Es ist eine heading 2, eine Unterüberschrift auf »zweiter Stufe«. Diese wird stets vom Tag-Paar eingerahmt. Insgesamt gibt es übrigens sechs Überschriftsebenen, du könntest also auch eine , usw. einsetzen. Doch ein HTML-Dokument besteht nicht nur aus Überschriften. Was ist mit dem Textabsatz mittendrin? Auch hierfür gibt es das passende Tag-Paar. Textpassagen »umwickelst« du einfach mit dem Tag-Paar ein. Das p steht dabei für paragraph, zu Deutsch Absatz.
37
Kapitel
1
Deine coole Homepage mit HTML
Wenn du möchtest, kannst du den Text innerhalb von Tags durch das sogenannte Stil-Attribut style (Attribut = Eigenschaft) gestalten. Deine Überschriften und Absätze stehen normalerweise bündig am linken Rand, also linksbündig. Deine Hauptüberschrift soll außer der Reihe zentriert (mittig) ausgerichtet werden? Ergänze im Einschalt-Tag einfach das Attribut-Werte-Paar style="text-align: center" – und zwar nach einem Leerzeichen. Hinter diesem Stil-Attribut style verbirgt sich die Gestaltungssprache CSS. Die Angabe text-align: bezieht sich auf die Textausrichtung und center steht für zentriert. Dann sieht es so aus: Homepage von Buffi
Geht auch: Stelle die Überschrift einfach in die Mitte!
Falls du die Überschrift dagegen nach rechts setzen möchtest, notierst du das folgendermaßen: . Probiere es ruhig einmal aus! Es gelingt mit Überschriften und Absätzen, mit sogenannten Blockelementen. Genug probiert? Dann kannst du diesen Zusatz auch wieder löschen. Ich verzichte im Beispiel auf diesen Zusatz! Ich empfehle dir dringend, CSS zu lernen, damit du die wichtigsten Attribute und Werte zum Gestalten kennst!
Tags zur Hervorhebung von Zeichen Sicher gibst du dich nicht mit blankem Text zufrieden. Das wäre doch langweilig! Schau einmal in den Absatz. Auch hier findest du schon weitere interessante Tags vor. Mit (b wie bold) kannst du Wörter oder Wortgruppen hervorheben. Sie werden dann fett angezeigt. Das Tag-Paar (wie italic, kursiv) dagegen sorgt für eine Kursivstellung der entsprechenden Passage.
38
Die Tag-Paare und galten bis vor kurzem noch als veraltet. Als Alternative sollte man zu <strong> und <em> greifen. Die gute Nachricht: und werden in HTML 5 weiterleben, wenn auch mit leicht veränderter Bedeutung. Es gibt also keinen Grund, auf diese klassischen Tags zu verzichten!
So wird’s perfekt: Überschriften, Absätze und mehr
Die wichtigsten HTML-Tags im Überblick In dieser Tabelle zeige ich dir die wichtigsten HTML-Tags und ihre Bedeutung im Überblick: Tag-Paar <strong> <em> <small>
Bedeutung Heading 1 – Überschrift 1 Überschrift 2 Überschrift 3 Überschrift 4 Überschrift 5 Überschrift 6 bold – fett strong – stark italics – kursiv emphatic – hervorgehoben langes Zitat
Wie sieht’s aus? fett, sehr groß
small – klein
Text wird verkleinert dargestellt
fett, groß fett, mittelgroß fett, normal fett, klein fett, sehr klein Text wird fett dargestellt Text wird ebenfalls fett Text wird kursiv dargestellt Text wird ebenfalls kursiv wird eingerückt dargestellt.
Wenn du eine Linie setzen möchtest, verwendest du das Tag . Dieses Tag braucht ausnahmsweise kein End-Tag. Außerdem gibt es den sogenannten break, einen Zeilenumbruch. Wenn du ein Wort auf eine neue Zeile setzen möchtest, setzt du davor einfach das Tag . Damit rutscht das Wort auf die neue Zeile, ohne dass gleich ein neuer Absatz beginnt. Auch benötigt kein End-Tag. An dieser Stelle gleich ein interessantes Detail: Die Schreibweise (für eine Linie) bzw. (für den break, Zeilenumbruch) ist die klassische Schreibweise. Du findest auf vielen Seiten auch die XHTML-Variante bzw. vor. Dabei bekommt das Tag nach einem Leerzeichen einen internen Ausschalt-Slash, so einen Schrägstrich. Das macht man deshalb, weil in der XHTML-Schreibweise jedes Tag ausgeschaltet werden muss. Und da ein - oder -Tag nun mal kein Ausschalt-Tag kennt, schaltet man es einfach intern ab. In der Praxis findest du beide Schreibweisen vor. Selbst PHP verwendet Elemente aus XHTML. (Wir aber bleiben bei der bewährten »klassischen« Schreibweise.) Genug gelabert, jetzt wollen wir unsere Homepage mit einem Bild etwas aufpolieren! 39
Kapitel
1
Deine coole Homepage mit HTML
Hier bin ich: Ein Bild einfügen Hast du irgendwo ein Foto von dir auf der Festplatte herumliegen? Vielleicht vom Scanner oder der Digicam? Hauptsache es liegt im Format GIF, JPG oder PNG vor. (Andere Formate sind für das Internet nicht geeignet.) Du hast momentan keine derartige Grafik? Dann nimm zum Üben einfach ein Bild von mir! Du findest die Datei buffi.png auf der CD im Ordner beispiele/kapitel01. Wichtig: Dein Bild sollte nicht zu hoch und breit sein. Es sollte also, wenn du es im Grafikprogramm aufrufst, nicht die ganze Breite und Höhe des Bildschirms ausfüllen. Die Abbildung von Buffi ist 445 Pixel breit und 310 Pixel hoch. (Pixel sind Bildpunkte, eine Maßeinheit auf dem Bildschirm.) Fügen wir das Bild nun ganz schnell in unsere Homepage ein! Und zwar unterhalb der schon vorbereiteten Überschrift 2.
40
>
Achte zuerst darauf, dass die Grafik im gleichen Ordner liegt wie deine HTML-Datei. Das ist zwar nicht unbedingt nötig, macht das Einfügen aber einfacher. Kopiere das Bild also in den Ordner html. Die Beispielgrafik für Buffi heißt buffi.png.
>
Sorge in PSPad dafür, dass der Mini-Editor mit der Dateiansicht sichtbar ist. Du weißt schon, per Toolfenster, zweites Register. Du schaltest das Toolfenster über das Menü ANSICHT ein bzw. aus.
>
An welcher Stelle möchtest du die Grafik einfügen? Schaffe hier eine Leerzeile, drücke also auf [Enter]. Und jetzt geht es los: Ziehe die Grafikdatei aus der Dateiliste direkt in das Dokument. Und zwar an die gewünschte Stelle:
Klicken und ziehen – so einfach fügst du eine Grafik ein.
Hier bin ich: Ein Bild einfügen Hurra, die Grafik ist da! Das entsprechende Tag wurde fix und fertig eingefügt, mit allem Drum und Dran. Im Beispiel sieht die lange Zeile so aus:
Das Attribut-Werte-Paar border="0" dient zum Unterdrücken einer eventuellen Umrandung. Hintergrund dieser »border-Geschichte«: Wenn eine Grafik zum Hyperlink gemacht wird, bekommt sie dadurch automatisch eine kräftige blaue Umrandung. Das ist nun einmal so bei Hyperlinks auf Grafiken. Um diese hässliche Umrandung zu unterdrücken, schreiben PSPad und andere Editoren zur Sicherheit das Attribut-Werte-Paar border="0".
Grafik nur innerhalb eines Blocks einfügen Wir sind noch nicht fertig mit der Grafik und mit den Regeln. Denn es gilt weiterhin: Eine Grafik sollte stets innerhalb eines Absatzes eingefügt werden. Oder innerhalb eines anderen sogenannten Block-Elements. (Tipp: Auch eine Überschrift wie oder ist ein BlockElement.) So verlangt das der Standard zu HTML 4. Und wir wollen im Buch schließlich genau nach Standard vorgehen! Okay, wenn’s denn so gewünscht wird, machen wir’s einfach. Wir packen die Grafik zusätzlich noch in ein Block-Element. Welches nehmen wir? Den Absatz! Setze also vor der Grafik das einleitende
-Tag. Schalte es hinter der Grafik mit
wieder ab.
Erst durch diese Erweiterung haben wir eine standardgerecht eingefügte Grafik!
Was bedeuten die Attribute von ? Schaue dir das eben eingefügte Tag für die Grafik doch etwas genauer an. Es handelt sich um das Tag . Zuerst fällt dir vielleicht auf, dass auch kein Endtag benötigt. Wieder eine Ausnahme. Doch was bedeuten die Attribute? 41
Kapitel
1
Deine coole Homepage mit HTML 0 Das Attribut src steht für source, Quelle. Als Wert gibst du den Grafiknamen in Gänsefüßchen an. (Sollte sich die Grafik in einem Unterordner befinden, musst du den Pfad ebenfalls notieren.) 0 Das Attribut alt sorgt nicht etwa dafür, dass die Grafik »alt« aussieht. Im Gegenteil! Dieses Attribut erzeugt einen sogenannten Alternativtext. Der ist wichtig für Suchmaschinen und für Leute, die nicht gut sehen können. (Sie lassen sich diesen alternativen Text vom Browser einfach vorlesen!) Nach dem Gleichheitszeichen tippst du ein beschreibendes Wort oder eine Wortgruppe. Ersetze also den Platzhaltertext von PSPad beispielsweise durch eine Wortgruppe wie Computerkinder-Hund Buffi. 0 Das Attribut title stelle ich dir in der nächsten Abbildung vor. Es erzeugt … nun … einen Titel für das Bild. Den Effekt siehst du, wenn du den Mauszeiger über die Abbildung führst. Auch hier könnte ruhig mehr Text stehen – aus Platzgründen lasse ich das im Beispiel jedoch sein.
0 Die Attribute width und height »kümmern« sich um Breite und Höhe der Grafik. Die Grafik von Buffi ist im Beispiel 445 Pixel breit und 310 Pixel hoch. Die Reihenfolge, in der man die Attribute angibt, ist dabei egal. Du kannst sie auch vertauschen.
42
Es gibt übrigens eine modernere Schreibweise für die drei Attribute border, height und width. Und zwar mit der Stil- und Formatiersprache CSS. Ersetze border="0" height="310" width="445" einfach durch: style="border: 0; height: 310px; width: 445px;". Du schreibst also nur noch das style-Attribut und setzt alle weiteren CSSAnweisungen in Gänsefüßchen. Mehr zu CSS folgt weiter hinten!
Meine Hobbys kurz aufgelistet Mit dem style-Attribut von CSS sieht das -Tag dann so aus:
Meine Hobbys kurz aufgelistet Noch nicht fertig! Schreibe auf, welchen Hobbys du frönst! Skateboardfahren? Inlineskaten? Lesen? Programmieren? Manga-Zeichnen? PokemonKarten sammeln? WoW spielen? Was auch immer: Für solche Dinge bieten sich in idealer Weise die Listen an.
Mit Aufzählungspunkten: Ungeordnete Liste Im ersten Vorschlag verwenden wir eine sogenannte unordered list, eine »ungeordnete Liste«. Das entsprechende Tag-Paar heißt
. Die einzelnen Listen-Einträge wiederum werden in eingekleidet. Dieses li steht dabei als Abkürzung für list item. Schluss mit dem Englischunterricht, ran an das Beispiel. Ich zeige dir den gesamten Rest des Dokuments. Die Liste beginnt unter der neu eingefügten H3 Ich habe folgende Hobbys. Ergänze also noch die Überschrift und lege dann mit deinen Hobbys los! ... Hier zeige ich dir ein Bild von mir!
Ich habe folgende Hobbys:
Sterne betrachten
Inlineskaten
Harry Potter lesen
Homepages für Freunde erstellen
43
Kapitel
1
Deine coole Homepage mit HTML In einer solchen unordered list bekommt jeder Aufzählungspunkt einen kleinen Kreis vorangestellt. Sieht doch irgendwie knuffig aus, nicht wahr?
Skaten, Lesen, Homepage erstellen? Hier ist die Liste für deine Hobbys!
Eins, zwei, drei: Ordnung schaffen durch Nummerierung Du möchtest deine Hobbys lieber durchnummerieren? Auch dieser Wunsch lässt sich leicht erfüllen! Bringe Ordnung ins Chaos: Verwende eine ordered list. Ersetze einfach das Tag-Paar
durch . Wie von Geisterhand werden deine Einträge nun durchnummeriert. Ich habe folgende Hobbys:
Sterne betrachten
Inlineskaten
Harry Potter lesen
Homepages für Freunde erstellen
44
Das Schönste: Du kannst nun nachträglich so viele Einträge hinzufügen, wie du möchtest. Die Nummerierung passt sich immer wieder an!
Coole Links zu coolen Plätzen
»Hobby by Number«: Eine durchnummerierte Liste.
Coole Links zu coolen Plätzen Was wäre das Web ohne die Hyperlinks? Ein Nichts! Es würde gar nicht existieren! Erst durch diese Kreuz- und Querverweise werden deine Seiten richtig lebendig. Linke zu den schönsten und interessantesten Plätzen im Web. Wirf deine »Anker« aus.
Einfache Hyperlinks erstellen Auf welche Seiten verlinkst du? Buffi wählt seinen »Heimatverlag« und netterweise auch die Seiten des Buchautors (Danke, Buffi!). Hier die entsprechenden Adressen, die sogenannten URLs. 0 http://www.it-fachportal.de 0 http://www.phpkid.de Zum Erstellen von Querverweisen (Links) verwendest du das -Tag. Das a steht für Anker. Du wirfst also einen »Anker« aus. Als Ziel verwendest du die entsprechende Webadresse. Und dafür brauchst du zusätzlich das Attribut href. Denn erst mit diesem Attribut kannst du die Zieladresse für angeben. Geschafft? Danach notierst du den beschreibenden Text. Hier ein Beispiel: Mein Heimatverlag
Nicht vergessen: Das Tag wird zum Schluss natürlich durch abgeschaltet. Eine Web-Adresse muss bei Hyperlinks stets ausgeschrieben werden. Die einfache Abkürzung nach dem Motto www.it-fachportal.de oder gar it-fachportal.de ist hier nicht erlaubt. Im Zweifelsfall wird der Link nicht funktionieren. 45
Kapitel
1
Deine coole Homepage mit HTML So sieht der Quelltext für das gesamte Hyperlink-Beispiel von Hund Buffi aus:
<strong>Besuche doch einmal folgende Seiten: Mein Heimatverlag Serviceseite zum Buch
Auf eine Überschrift hat Buffi diesmal verzichtet. Der Abschnitt mit den Hyperlinks wurde in einen Absatz () eingehüllt. Doch was passiert innerhalb dieses Absatzes? Zur Abwechslung findest du diesmal das Tag-Paar <strong> vor. Praktisch als »Überschrifts-Ersatz«. Dadurch wird die entsprechende Passage fett hervorgehoben und stärkerer betont. Danach hat Hund Buffi einen Zeilenumbruch gesetzt, den schon besprochenen break . Solch ein Umbruch erzeugt eine neue Zeile. Dabei entsteht jedoch kein neuer Absatz! (Du erkennst es in der Vorschau: Der Abstand zwischen den Zeilen ist geringer!) Nun folgen die Hyperlinks nebeneinander, aus optischen Gründen nur durch einen Bindestrich voneinander getrennt.
Unbesuchte Hyperlinks sind per Voreinstellung blau, besuchte färben sich lila.
Parke doch einmal den Mauszeiger über einem Hyperlink. Schon erscheint das Verweis-Ziel in der Statuszeile, also in der unteren Zeile des Browsers. Übrigens: Du musst nicht immer auf eine externe Webseite verweisen. Setze Links vor allem innerhalb deines »Web-Projekts«. Verweise von einer Seite auf die andere. Du willst auf der Startseite auf eine Unterseite namens hobby.html verweisen? Diese liegt im gleichen Ordner wie die Startseite? Als Linkbeschreibung soll der Text Meine Interessen verwendet werden? Dann sieht der interne Links so aus: Meine Interessen
46
Meine drei Lieblingsfächer in einer Tabelle Wie wäre es mit ein paar Tipps und Tricks zu Hyperlinks?
>
Du möchtest, dass sich nach Klick auf den Link ein eigenes Fenster bzw. ein neuer Browsertab öffnet? Dann notiere ganz einfach zusätzlich das Attribut-Werte-Paar target="_blank" im -Tag: Mein Heimatverlag
>
Du möchtest, dass beim Darüberfahren mit dem Mauszeiger ein informativer Beschreibungstext auf dem Hyperlink erscheint? Dann ergänze das schon bekannte Attribut title (Beschreibungstitel). Gib als Wert ein beschreibendes Wort oder eine Wortgruppe an: Lernsoftware und mehr
>
Du möchtest die Farbe der Hyperlinks ändern? Die Unstreichung abschalten? Das alles gelingt mit Style Sheets. Blättere einfach ein Stück weiter nach hinten, dort verraten wir dir mehr zu diesem Thema.
Meine drei Lieblingsfächer in einer Tabelle Schreiben wir zur Abwechslung doch mal eine Tabelle. Warum? Weil es Spaß macht! Und weil Tabellen auf HTML-Seiten eine ganz wichtige Rolle spielen. Und weil du Tabellen kennenlernen solltest. Sind das genug Gründe? Dann los!
Grundaufbau der Tabellen Was musst du zu Tabellen wissen? Nicht viel! 0 Jede Tabelle wird vom Tag-Paar
eingerahmt. (Table ist das englische Wort für Tabelle!) 0 Eine Zeile steht innerhalb von
(table row heißt Tabellenzeile). 0 Eine einzelne Zelle (das Tabellenkästchen) wird zwischen
»gequetscht«. Mit td ist table data genannt, frei übersetzt »Zellinhalt«. 47
Kapitel
1
Deine coole Homepage mit HTML 0 Möchtest du eine Zelle besonders hervorheben, wählst du statt
einfach
für table head. Eine solcherart gestaltete Zelle wird fett hervorgehoben. Der Inhalt wird zentriert.
Das Beispiel Zuerst zeige ich dir das Beispiel. Eine Tabelle besteht aus Zeilen und Spalten. Diese werden durch die Tabellenkästchen (Zellen) gebildet.
Die Beispiel-Tabelle besteht aus vier Zeilen und zwei Spalten.
Das Beispiel sieht im Quelltext folgendermaßen aus:
Lieblingsfach
Warum?
Informatik
Weil ich der Beste bin!
Physik
Weil wir lernen, wie ein Motor funktioniert.
Zeichnen
Weil der Lehrer mit uns Manga-Comics zeichnet.
48
Schickes Layout mit Style Sheets
Die Erklärung Durchschaust du die Struktur? Zuerst setzen wir das einleitende Tag
und drücken schon ein paar Mal [Enter]. Damit schaffen wir etwas Luft. Nicht vergessen: Schalte das
-Einschalt-Tag gleich jetzt am Ende der Tabelle mit
wieder ab! Damit die Tabelle einen Rahmen erhält, arbeite ich gleichzeitig mit dem Attribut-Werte-Paar border="1". Das einleitende Tabellen-Tag sieht also so aus:
. (Wenn du den Rahmen vergrößern willst, erhöhst du einfach den Wert hinter border. Mit border="5" bekommst du beispielsweise einen 5 Pixel dicken Rand.) Danach definiere ich die erste von vier Zeilen. Ich schreibe
, lasse danach ein paar Zeilen frei und setze das abschließende
. Wenn du willst, kannst du alle vier Zeilen schon derart vorbereiten, hier zumindest zwei Zeilen:
...
...
Nun kümmern wir uns um die einzelnen »Kästchen« der Tabelle. Die erste Zeile bekommt zweimal
»spendiert«. Es soll schließlich der Tabellenkopf werden. In den übrigen Zeilen begnügen wir uns mit je zweimal
für den normalen »Zellinhalt«. Wie gesagt, was dann in der Zelle selber erscheinen soll, wird einfach zwischen
bzw.
notiert. So weit, so gut. Aber ich wusste gar nicht, dass Buffi noch zur Schule geht …
Schickes Layout mit Style Sheets Coole Seite? Von wegen! Bis jetzt sieht unser Projekt aus wie eine Kakerlake hinterm Küchenschrank – farblos und platt. Dagegen sollten wir etwas unternehmen, und zwar mit Style Sheets. Lege Schriftart, Schriftgröße und Farben fest! Verpasse den Hyperlinks einen »Mouseover-Effekt«. Du wirst staunen, mit wie wenig Aufwand man seine Seiten aufpeppen kann. 49
Kapitel
1
Deine coole Homepage mit HTML
Style Sheets sind eine ganz fabelhafte Geschichte. Du legst einmal fest, wie deine Homepage auszusehen hat. Das machst du am besten in einer extra Datei. Dadurch erstellst du eine Art Musterschablone. Dieses Gestaltungs-Muster kannst du nun beliebig oft für weitere HTML-Seiten verwenden. Das spart viel Arbeit! Wichtig: Style-Sheet-Dateien sind Textdateien mit der Endung .css.
Verweis auf CSS-Datei setzen Also, frisch ans Werk. Worauf wartest du noch? Die extra »Stil-Datei« soll im Beispiel phpkid.css heißen. Sie wird im gleichen Ordner entstehen wie unsere HTML-Datei. Doch zuerst setzen wir einen Verweis auf diese Datei. Wir binden sie also in unser HTML-Dokument index.html ein. Und zwar in den Kopfbereich, in den Head:
Klicke hinter diese Zeile und drücke [Enter]. Damit erzeugst du eine leere Zeile – dort notierst du gleich den Verweis zur Stildatei. Das gelingt mit dem Tag und seinen Attributen:
Insgesamt sieht der Anfang der HTML-Datei also so aus: 1
2 3 4 5
Homepage von Computerhund Buffi <meta http-equiv="content-type" content="text/html; charset=utf-8"> 6 7
Lass dich von der Syntax dieser Zeile 6 nicht zu sehr entmutigen. Wichtig ist das Attribut href. Hinter dem Gleichheitszeichen setzt du den Namen der CSS-Datei ein, umkleidet von Gänsefüßchen. 50
Schickes Layout mit Style Sheets
Du speicherst deine HTML-Datei, aktualisierst die Vorschau und – es passiert rein gar nichts? Na klar! Wir haben einen Link auf eine Datei erstellt, die es noch gar nicht gibt. Da wartet also ein Stück Arbeit auf uns.
CSS-Datei erstellen Eine CSS-Datei ist nichts weiter als eine Textdatei mit der Endung .css. Also, erstelle eine neue Textdatei.
>
Wähle in PSPad DATEI|NEU. Das Dialogfenster Neu erscheint, du solltest dich im Register Neue Datei aus Vorlage erstellen befinden. Wähle den Ordner CSS und doppelklicke auf Default.
>
PSPad fügt eine fast leere CSS-Datei ein und schaltet auf die CSSFarbhervorhebung um. Der Text /* CSS Document */ beweist, dass es sich um eine CSS-Datei handelt. Lösche diese Platzhalter-Zeile!
>
Ehe ich Style Sheets jetzt groß und breit erkläre, legen wir los! Tippe zuerst folgende drei Zeilen. (Die geschweiften Klammern erzeugst du mit gedrückter [AltGr]-Taste. Tippe dazu entweder die [7] bzw. [0].) body { font-family: Verdana, Arial, Helvetica, sans-serif; }
>
Speichere die Datei ab. Wähle als Dateinamen phpkid.css. Die Datei wird im Beispiel im gleichen Ordner abgelegt wie das HTMLDokument. Achte darauf!
Die Schreibweise für CSS-Style-Sheets gleicht der von Programmiersprachen wie JavaScript oder PHP. So findest du auch in CSS die berühmten geschweiften Klammern. Diese geschweiften Klammern bilden einen Block. Sie halten praktisch zusammen, was zusammen gehört. Auch in CSS wird (fast) jede Zeile durch ein Semikolon (;) abgeschlossen. Es ist so, wie du es in PHP noch kennenlernen wirst! Rufe das HTML-Dokument index.html doch einmal in der Browservorschau auf. Aktualisiere die Ansicht, z. B. durch Druck auf die Funktionstaste [F5]. Wahnsinn! Auch einen Schlag ändert sich die Schriftart im gesamten Dokument. Und das nur mit diesen simplen drei Zeilen. Wie geht das? Nun, das gesamte Dokument befindet sich zwischen den Tags . Mit diesem Tag kannst du praktisch alle Textpassagen erreichen,
51
Kapitel
1
Deine coole Homepage mit HTML ist sozusagen die »große Klammer«, die alles zusammenhält. Also body, okay. Doch wo sind die spitzen Klammern? Die werden in
CSS nicht mitgeschrieben! Du notierst also das »nackige Tag« ohne spitze Klammern. Wir schreiben einfach body und haben damit den sogenannten Selektor zu Papier gebracht. Wenn das kein Grund zum Feiern ist … Nun setzen wir nach einem Leerzeichen die öffnende geschweifte Klammer. Der Block beginnt. Mein Tipp: Drücke schon ruhig zweimal auf [Enter]. Setze gleich die schließende Klammer. (Denn hinterher vergisst man das oft, glaube mir!) Zwischen diesen Klammern notierst du nun die Formatieranweisungen. Im Beispiel handelt es sich um folgende Zeile: font-family: Verdana, Arial, Helvetica, sans-serif;
Damit legen wir die font-family fest, die Schriftfamilie – hier also Verdana. Am Ende der Zeile setzt du ein Semikolon. Wenn der Benutzer auf seinem Rechner kein Verdana hat? Dann wird die Schriftart verwendet, die als nächstes nach dem Komma folgt. Und wenn es auch hier heißt: Fehlanzeige? Dann probiert der Browser, ob er Helvetica findet. Sollte das nicht glücken, wählt der Browser irgendeine sachliche Schriftart. Dafür sorgt sans-serif am Schluss der Aufreihung. Das ganze Gebilde mit Selektor und geschweiften Klammern nennt sich nun Regel. Und tatsächlich haben wir damit eine fabelhafte kleine Regel erstellt, mit der wir die Schriftart für das gesamte Dokument steuern.
Einige Attribute und Werte von CSS Neugierig, welche Anweisungen es noch so gibt? Die folgende Tabelle zeigt dir einige wichtige Attribute und Werte von CSS. In der linken Spalte findest du jeweils das Beispiel. Rechts erkläre ich dir, was passiert. Beispiel font-family: Arial, Helvetica; font-size: 12pt; font-weight: bold; font-variant: small-caps; font-style: italic; line-height: 1.2; margin: 10px; text-decoration: none;
52
border-style: solid;
verantwortlich für Schriftart Arial bzw. Helvetica Schriftgröße 12 Punkt Zeichenformat fett KAPITÄLCHEN (DAS SIND KLEINE GROSSBUCHSTABEN) Schriftstil (z. B. kursiv) Zeilenabstand (z. B. 1,2-zeilig) Rand rundherum 10 Pixel Texteffekt (Unterstreichung) abschalten Rahmen rundherum ziehen
Schön bunt hier: Farben zuweisen
Mehrere Fliegen mit einer Klappe Nun kennst du schon einige CSS-Eigenschaften. Wunderbar. Kümmere dich doch einmal um die Schriftgröße! Angenommen, du möchtest in Absätzen (Selektor p), Tabellen (table) und Listeneinträgen (li) eine Schriftgröße von 10 Punkt einrichten. Dann schlage doch einmal drei Fliegen mit einer Klappe! Reihe die Selektoren vor der öffnenden geschweiften Klammer auf. Dann gilt die Regel für alle drei Tags zugleich! p, table, li { font-size : 10pt; }
Warum haben wir in dieser Regel keine Schriftart definiert? Nun, diese hatten wir doch schon in der »body-Regel« festgelegt. Schließlich gilt body für das gesamte Dokument, also auch für p, table und li. In dieser Regel müssen wir nur noch die Schriftgröße bestimmen. Und zwar zusätzlich.
Schön bunt hier: Farben zuweisen Natürlich kannst du in CSS nicht nur Texteigenschaften, Ränder und Rahmen festlegen. Arbeite doch einmal mit Farben! Für die Schriftfarbe nimmst du das Attribut color. Die Hintergrundfarbe wird dagegen durch background-color gesteuert. Farb-Beispiel color: blue; background-color: silver;
verantwortlich für Farbe blau Hintergrundfarbe hellgrau
Doch wie viele Farben kannst du verwenden? 16,7 Millionen! Und wie stellt man sie dar? Das geht zum einen mit dem sogenannten Hexadezimalwert. Das ist eine kryptische Zeichenfolge. Sie beginnt mit einer Raute, gefolgt von weiteren 3–6 Stellen. Diese beschreiben die Zusammensetzung aus den drei Grundfarben Rot, Grün und Blau. Ein Blau sieht so aus: #0000FF. Zum anderen kannst du diese RGB-Anteile auch auf andere Weise beschreiben. Notiere rgb() und trage innerhalb der Klammern die Anteile der drei Grundfarben ein. Und zwar auf einer Skala von 0 bis 255 – getrennt mit Komma. Ein Blau sieht dann so aus: rgb(0,0,255).
53
Kapitel
1
Deine coole Homepage mit HTML Du möchtest mit PSPad die gewünschte Farbe zuweisen? Wähle WERKZEUGE|FARBAUSWAHL bzw. die FARBAUSWAHL-Schaltfläche. Setze den Cursor dortin, wo der Farbwert stehen soll. Doppelklicke auf deine Wunschfarbe:
PSPad verwendet zum Einfügen der Farben die freundliche »RGB-Syntax«.
Neben den 16,7 Millionen unterschiedlichen Hexadezimal- bzw. RGBFarbwerten gibt es aber auch »freundlichere Farbnamen«. Zumindest für die 16 Grundfarben. Wenn du dich also auf diese 16 Grundfarben beschränken möchtest, wählst du einen der 16 englischen Farbnamen aus. Eine Gesamtübersicht über diese Grundfarben zeige ich dir in der Tabelle. Dabei ist es egal, ob du dich für den Farbnamen (linke Spalte), den Hexadezimalwert oder den RGB-Farbwert (rechte Spalte) entscheidest: Farbname black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal
Schön bunt hier: Farben zuweisen Buffi, gar nicht faul, hat seine Homepage inzwischen komplett mit Style Sheets aufgebürstet. So sieht seine neue »Layout-Page« aus.
Welche eine Verwandlung! CSS bringt Farbe ins Bild.
Die komplette CSS-Datei im Überblick Möchtest du die gesamte CSS-Datei sehen, die Hund Buffi zur Steuerung seiner Seite geschrieben hat? Bitte sehr. Damit du durch den Code durchsteigst, habe ich mit beschreibenden Kommentaren gearbeitet. Kommentare sind Passagen, die nur für den Autor der Datei interessant sind. Sie werden nicht ausgeführt, bleiben praktisch unsichtbar. In CSS verwendest du die gleichen Kommentarzeichen, die du später auch in PHP setzen wirst. Ein Kommentar wird mit /* eingeleitet und endet mit */. So kannst du der ersten Regel (also dem Gebilde in geschweiften Klammern) z. B. folgende Beschreibung voranstellen: /* Schriftart im gesamten Dokument */
Außerdem empfehle ich dir, mit Leerzeilen für mehr Übersicht zu sorgen. Was hier wie die reinste Platzverschwendung aussieht, wird uns später bei PHP sehr helfen! Aber nun »Manege frei« für den CSS-Code:
55
Kapitel
1
Deine coole Homepage mit HTML /* Schriftart im gesamten Dokument */ body { font-family: Verdana, Arial, Helvetica, sans-serif; } /* Absätze, DIVs, Tabellen, Listen, Formulare in 10 Punkt */ p, div, table, li, form { font-size: 10pt; } /* Hintergrundfarbe grau mit weißer Schrift */ h1 { background-color: gray; color: white; } /* Überschrift 2 und 3 blau färben */ h2, h3 { color: rgb(0,0,153); } /* fette Passagen rot einfärben */ b { color: red; } /* kursive Passagen blau färben */ i { color: rgb(0,0,153); } /* Link-Stile für Hover-Links a:link { color: rgb(0,0,153); } a:visited { color: gray; }
56
a:hover { text-decoration : none;
*/
So legst du die exakte Breite fest color: red; } a:active { color: black; }
Lies dir den Quelltext ganz in Ruhe durch. Die ersten beiden Regeln haben wir schon besprochen. Bei der zweiten Regel habe ich gleich die Tags div und form mit dazu geschrieben. So werden diese Elemente ebenfalls gestaltet. (Zu div und form gleich mehr!) Schon mit der dritten Regel für h1 erreichst du einen sehr interessanten »Rahmen-Effekt«. Die Schrift wird weiß eingefärbt. Doch der Hintergrund erhält die Farbe grau! Das sieht doch toll aus, oder? Wenn du genau hinschaust, stellst du fest, dass Buffi auch die Tags und aufpoliert hat. Fette Passagen werden zusätzlich rot, kursive dagegen blau eingefärbt. Du wunderst dich über den letzten Abschnitt in der CSS-Datei? Was verbirgt sich hinter Link-Stile für Hover-Links? Das sind Sonderfälle, damit erzeugst du den berühmten Hovereffekt beim Darüberfahren mit der Maus! Mit den vier »Sonder-Selektoren« a:link, a:visited, a:hover und a:active kannst du die vier Linkzustände ansprechen. Einmal den normalen Link, dann den besuchten Link, danach den Link während des Darüberfahrens mit der Maus (Hover-Effekt!) und den aktiven Link (während des Klickens). Du solltest die Links übrigens stets in dieser Reihenfolge notieren, damit es keine Anzeigeprobleme gibt.
So legst du die exakte Breite fest Zufrieden? Noch nicht ganz! Verändere doch einmal die Größe des Browserfensters. Ziehe das Fenster lang. Der ganze Text wandert mit. Die Breite des Textes richtet sich nach der Breite des Browserfensters.
57
Kapitel
1
Deine coole Homepage mit HTML Das ist doch der reinste Wanderzirkus! Zugegeben, auf manchen Seiten ist dieser Effekt beabsichtigt. Unser Hund wünscht jedoch eine ganz exakte Breite. Die Breite der Seite soll genau 600 Pixel betragen. Nicht mehr und nicht weniger.
Packe den Inhalt in einen »Div-Container« Dafür eignet sich ganz ausgezeichnet ein sogenannter Div-Container. Es handelt sich um das Tag-Paar . In dieses Tag-Pärchen darfst du ganze Textpassagen einwickeln. »Div« darf Überschriften, Absätze, Tabellen und Listen enthalten. Füge direkt unter dem -Einschalt-Tag zuerst eine leere Zeile ein. Setze dort hinein:
Schalte dieses »Div« kurz über wieder ab. Nun sieht es so aus: ... Homepage von Buffi ... viele, viele Zeilen dazwischen ...
Breite festlegen über Inline-CSS Fehlt noch die Breite (width). Richtig, das könnten wir in der CSS-Datei festlegen. Zu umständlich! Es handelt sich schließlich nur um eine einzige Angabe. Wir lösen das Ganze deshalb kurz und schmerzlos mit Inline-CSS. Bei Inline-CSS werden die CSS-Anweisungen direkt im Tag notiert. Ich habe es dir in Zusammenhang mit text-align (Absatzausrichtung), border (Rahmen), width (Breite) und height (Höhe) schon gezeigt! Eine Inline-CSS-Passage beginnt mit dem Attribut style="...". Die CSS-Regeln werden nun innerhalb der Gänsefüßchen notiert. Inline-CSS ist dann ideal, wenn man kurze Anweisungen festlegen möchte, die sich nicht wiederholen sollen. 58
Eine Umfrage! Wie findest du meine Page? Gehe deshalb in das einschaltende . Ergänze style="width: 600px;". Insgesamt sieht das Tag also so aus:
Exakte Breite durch die CSS-Regel width: 600px;
Eine Umfrage! Wie findest du meine Page? Du möchtest wissen, wie deine Seite bei den Besuchern ankommt? Erstelle eine Umfrage! Dazu nimmst du einfach eine neue Seite, die wir im Beispiel umfrage.html nennen. Speichere sie ebenfalls unter C:/phpkid/html.
>
Baue die Seite auf dem schon bekannten Grundgerüst auf. Füge ebenfalls den schon verwendeten CSS-Link zur Datei phpkid.css ein! Eine Umfrage mit Radioknöpfen – Der Besucher wählt eine Option aus.
Ein Formular mit Radioknöpfen Und hier zeige ich dir den kompletten Quelltext dieser Umfrage. Denke zuallererst an den Titel. Passe den Bereich zwischen an. Setze eine Überschrift in das Dokument.
59
Kapitel
1
Deine coole Homepage mit HTML Aus Platzgründen habe ich den HTML-Code im Gegensatz zur index.html nicht eingerückt. Es ist schließlich keine Pflicht. Und wenn du doch einrücken willst: Es gibt in PSPad eine clevere Automatik. Mehr dazu gleich …
Umfrage: Wie findest du meine Seite? <meta http-equiv="content-type" content="text/html; charset=utf-8"> Wie findest du meine Page?
echt super ziemlich gut geht so
Das eigentliche Formular beginnt mit dem -Tag. Du musst hier außerdem das Attribut action eintragen. Wir haben es jedoch leer gelassen. (Vergiss nicht, das Formular mit auch wieder abzuschalten.) Im Formular selber arbeiten wir mit sogenannten Radiobuttons. Dieser Typ wurde tatsächlich von alten Röhrenradios abgeschaut. Drückt man einen Knopf rein, springt der andere heraus. Radiobuttons werden auch als Kontrollkästchen bezeichnet. Radiobuttons werden mit erzeugt. Gib allen zusammengehörigen Buttons den gleichen Namen. Dazu dient das Attribut name. Im Beispiel heißen alle Buttons ergebnis. Der value wiederum ist der Wert, den der Button beim Absenden »mitschickt«. Hier bekommt jeder Button einen eigenen Wert, z. B. 1, 2 und 3. Das dient zum späteren Wiedererkennen. Du als »Formularbesitzer« bekommst schließlich das Name-Werte-Paar zugeschickt, z. B. ergebnis="1". 60
Tipps und Tricks zu PSPad
Submit! Doch wo bleibt die Action? Jedes Formular benötigt zum Abschicken einen Submit-Button. Submit steht für Versenden, übermitteln. Dieser Button sieht im Beispiel so aus:
Der Wert hinter dem Attribut ist übrigens die Beschriftung. Du könntest hier auch »Los!« oder »Klicken auf eigene Gefahr« eintragen. Aber darauf will ich nicht hinaus. Klappe die Erste. Und Action! Wenn du auf den Submit-Button klickst, geht die »Action« los. Es passiert … nichts. Oder fast nichts. Kunststück. Schließlich passiert das, was wir im einleitenden -Tag hinter action notiert haben. Doch da steht bis jetzt ebenfalls nichts. So ganz stimmt das nicht mit dem »nichts«. Schaue doch einmal in die Adress-Leiste des Browsers. Nach dem Klicken wird hinter die Adresse noch ein Fragezeichen angehangen. Nun steht hier plötzlich z. B. ergebnis=2 (je nachdem, welche Auswahl du getroffen hast). Das ist doch sehr interessant! Mehr können wir an dieser Stelle jedoch nicht machen. Zum Auswerten des Formularinhalts kommen wir allein mit HTML nicht weiter. Hier brauchen wir PHP.
Ein Grund mehr, PHP zu lernen!
Tipps und Tricks zu PSPad PSPad ist ein toller Editor mit vielen genialen Funktionen. Man muss sie nur kennen.
HTML-Quellcode automatisch ausrichten Du möchtest den HTML-Quellcode schön einrücken und formatieren? Damit es ordentlich und übersichtlich aussieht? HTML-Kenner wissen: Zusätzliche Umbrüche und Leerzeichen im Editor werden nicht im Browser dargestellt. Fazit: Gliedere und formatiere den Quellcode so, wie du magst. Per Leerzeichen eingerückt, mit zusätzlichen Leerabsätzen und und und … Keine Lust, das Gliedern von Hand zu erledigen? PSPad bietet dir gleich zwei Tools. Die »sanfte« Variante findest du unter HTML|HTML-CODE NEU
61
Kapitel
1
Deine coole Homepage mit HTML STRUKTURIEREN.
Der Code wird ausgerichtet und automatisch eingerückt. Ab und an musst du noch ein überschüssiges Leerzeichen entfernen, denn in dieser Beziehung ist das Tool noch nicht perfekt. Schärfere Geschütze führt »Tidy« auf, tidy up heißt saubermachen. Wähle z. B. HTML|TIDY|TIDY CLEAN DOCUMENT WRAP oder TIDY CLEAN DOCUMENT NOWRAP und staune! Tidy darfst du aber nur bei reinen HTML-Dateien anwenden. Sobald PHP mit dazukommt, ist dieser »Code-Verschönerer« tabu! Tidy schreibt automatisch eine zusätzliche Meta-Zeile in das Dokument: <meta name="generator" content="HTML Tidy for Windows...
Diese Zeile kannst du löschen.
Automatischen Zeilenumbruch einfügen Du hast den Quellcode automatisch ausgerichtet, aber auf die Umbrüche verzichtet? Die Zeilen sind nun so lang, dass du ständig scrollen musst? Schalte die automatischen Zeilenumbrüche an. Wähle ANSICHT|ZEILENUMBRUCH. Der Umbruch erfolgt jetzt rein optisch für die Anzeige im Editor, wird jedoch nicht mitgespeichert.
Mehr Überblick in der Codeansicht Der Quellcode wird zu klein angezeigt, du kannst ihn nicht lesen? Oder du möchtest alles auf einen Blick sehen? Na dann zoome doch einfach – so wie vom Internetbrowser oder aus der Textverarbeitung bekannt. Halte die Taste [Strg] gedrückt und drehe am Mausrad.
Lesezeichen für mehr Übersicht Genial finde ich auch die Möglichkeit, mit Lesezeichen zu arbeiten. So kannst du dir besonders bei langen Codeabschnitten wichtige Zeilen besser »merken«. Mit [Alt] + [æ] setzt du ein (gelbes) Lesezeichen. Mit [Alt] + [Æ] dagegen kannst du ein einmal gesetztes (gelbes) Lesezeichen wieder löschen. Mit den Tastentricks [Alt] + [¼] bzw. [Alt] + [½] springst du zwischen mehreren Lesezeichen hin und her. Weitere (rote) Lesezeichen gibt es auch. Die setzt du am besten über das Kontextmenü. Nach dem Schließen der Datei werden die Lesezeichen automatisch gelöscht.
Datei vom Windows-Explorer aus öffnen 62
Eines der genialsten Features von PSPad? Das ist für mich eindeutig die Möglichkeit, Dateien direkt vom Windows-Explorer aus laden zu können.
Tipps und Tricks zu PSPad Und zwar über das Kontextmenü. Klicke also mit der rechten Maustaste auf die zu öffnende Datei, beispielsweise die index.html. Wähle den Befehl PSPAD. Schön öffnet sich die entsprechende Datei. Du kannst dabei übrigens auch mehrere Dateien auswählen, beispielsweise den Inhalt des gesamten Ordners. Alle Dateien werden auf einen Schlag in PSPad geladen!
Arbeit mit Verknüpfungen Besonders nützlich ist auch die Arbeit mit Verknüpfungen. So kannst du dir zu den wichtigsten Ordnern Querverweise direkt in PSPad anlegen. Nach Klick springt PSPad sofort zum entsprechenden Ordner im Mini-Explorer. Verknüpfungen heißen in PSPad Links. Sie gehören ins Register mit dem Herz. Und so erstellst du einen Link zum Ordner xampp/htdocs.
>
Achte darauf, dass das Toolfenster sichtbar ist (ANSICHT|TOOLFENSTER). Wechsle ins Favoriten-Register, du erkennst es am Herz.
>
Klicke mit der rechten Maustaste auf das Ordner-Symbol und wähle den Befehl Neuen Link hinzufügen.
>
Das Dialogfenster Neuen Link hinzufügen erscheint. Schaue rechts neben das Feld Pfad / URL und klicke auf die Schaltfläche mit den drei Punkten. Suche den gewünschten Ordner heraus.
>
Nach Klick auf OK ist der neue Link fertig – eine praktische Verknüpfung zum gewünschten Ordner!
Lege dir so viele Verknüpfungen an, wie du brauchst.
Werkzeuge und Suchfunktion Schau dir doch auch die pfiffigen Werkzeuge von PSPad an. Du findest sie im gleichnamigen Menü. Mir hat es neben der schon getesteten Farbauswahl besonders der Code-Explorer angetan. Dieses Tool zeigt dir die Elemente der aktiven Datei in einer baumartigen Struktur. Ausprobieren! Mein zweitliebstes Tool heißt Text-Diff: Aktuelle Datei vergleichen. So kannst du zwei verschiedene Versionen eines Dokuments laden. PSPad hebt die Unterschiede farblich hervor. Auch die ausgefeilte Suchfunktion benötige ich recht häufig, du findest sie im gleichnamigen Menü. Mein Favorit heißt Suchen/Ersetzen in Dateien. Damit kannst du beispielsweise ganze Ordner durchsuchen.
63
Kapitel
1
Deine coole Homepage mit HTML
Schlussbemerkung Uff! Das war eine ganze Menge HTML auf einmal. Gute HTML-Kenntnisse sind jedoch die Voraussetzung für die PHP-Programmierung. Immerhin bist du jetzt schon ein kleiner »HTML-Experte«. Beim Thema HTML haben wir uns für die klassische Version HTML 4 entschieden, wobei ich schon in Richtung HTML 5 vordenke. Wir lassen die strengere und weniger beliebte XHTML-Syntax außen vor. Du möchtest tiefer in (X)HTML (und CSS) einsteigen und die modernsten Versionen und neusten Techniken kennenlernen? Dann empfehle ich dir die wunderbaren Bücher »HTML für Kids« und »CSS für Kids« von meinen Autorenkollegen Robert Agular bzw. David Sigos. Vor allem das letztgenannte Buch bietet dir eine hervorragende Einführung in schickes Seitenlayout. Die Beispieldateien findest du übrigens auch auf der CD zum Buch. Schaue in den Unterordner beispiele/kapitel01.
Zusammenfassung 0 Du kannst mit dem PSPad blitzschnell das Grundgerüst eines HTMLDokuments »zaubern«. Wähle im Menü DATEI den Befehl NEU und doppelklicke auf den entsprechenden Eintrag. 0 Du fügst mit den entsprechenden Tags ganz lässig Überschriften (z. B. ) und Absätze ein. Setze den entsprechenden Text einfach innerhalb der Tags ein. 0 Du weißt, wie du mit dem Tag eine Grafik in deine Homepage einfügst. Ziehe die Grafikdatei einfach aus der Dateiliste des Toolfensters in dein HTML-Dokument. Passe die Attribute und Werte des Tags dann wunschgemäß an. 0 Du kannst mit
Aufzählungen und mit Listen mit HTML erstellen. Du notierst beliebig viele Listen-Einträge zwischen . 0 Du erstellst Hyperlinks nach dem Muster Text für Hyperlinks. 64
0 Du schreibst HTML-Tabellen mit den entsprechenden Tags
,
,
und
.
Ein paar Fragen … 0 Du erstellst externe CSS-Dateien und steuerst damit das Aussehen deiner Homepage. Das sind Textdateien mit der Endung .css. Hier notierst du mit Hilfe von Attributen, wie die einzelnen Tags formatiert werden sollen. Das Attribut für die Schriftart heißt z. B. font-family. 0 Du arbeitest mit Farben, legst die Breite fest mit Hilfe eines -Containers und dem Attribut width. 0 Du weißt, wie du mit den -Tags und mit Kontrollkästchen ein Umfrageformular vorbereiten kannst und hast den SUBMITButton ausprobiert.
Ein paar Fragen … Und jetzt bist du an der Reihe. Beantworte zuerst ein paar Fragen und löse dann ein paar Aufgaben. Viel Spaß und viel Erfolg! 1. Zwischen welchen Tags wird der Kopfbereich des Dokuments notiert? 2. Wie heißt der Farbname für kastanienbraun? Wie lautet der dazugehörige hexadezimale Farbcode und wie die RGB-Syntax? 3. Wie sehen die Kommentarzeichen aus, die in CSS-Dateien verwendet werden? Die Antworten zu den Fragen stecken allesamt auf der CD zum Buch. Schaue im Ordner fragen nach!
… und ein paar Aufgaben 1. Schaue in die Seite index.html. Füge unter der Aufzählung deiner Hobbys eine Linie ein. Welches Tag verwendest du dafür? 2. Setze ganz oben auf die Seite index.html einen neuen Absatz, und zwar unterhalb von . Füge dort einen Verweis auf die zweite Seite umfrage.html ein. Schreibe als Linktext: Zur Umfrage. Setze ganz oben auf der Umfrage-Seite (direkt unter ) ebenfalls einen Absatz ein. Hier soll einen Link zurück verweisen. Dieser soll heißen: Zur Startseite.
65
Kapitel
Deine coole Homepage mit HTML
1
Verlinke dein Projekt mit internen Querverweisen.
3. Prüfe deine Seiten auf Korrektheit. Surfe dazu zum »Prüfdienst« des W3C. (Dahinter stecken die Leute, die HTML erfunden haben.) Surfe zu http://validator.w3.org. Gehe ins Register Validate by File Upload. Klicke auf den Button DURCHSUCHEN. Suche die zu prüfende Datei heraus und klicke auf CHECK. Die Prüfung funktioniert nur richtig, wenn die Datei eine DokumenttypDeklaration besitzt. Du darfst diese erste Zeile mit 76
Zuerst achte darauf, dass kein Programm auf deinem Rechner aktiv ist. Das könnte die Installation stören. Gehe nun in den entsprechenden Ordner für XAMPP auf der CD, und zwar in programme/xampp.
Ganz einfach: Webserver selbst installiert!
Der Doppelklick startet die Installation.
>
Doppelklicke auf die Datei xampp-win32-1.7.3.exe. (Falls du die neuste Version von XAMPP aus dem Internet geladen hast, lautet der Dateiname vielleicht schon xampp-win32-1.7.4.exe.) Es handelt sich um ein selbstauspackendes RAR-Archiv. Die Installation wird automatisch gestartet. Unter Windows Vista und 7 musst du vorher in aller Regel noch eine Sicherheitswarnung bestätigen.
>
Das Fenster XAMPP for Windows erscheint. Schaue zum Feld Destination Folder. Steht bei dir auch C:\ in diesem Feld? Super! Hier sollte auf jeden Fall der Laufwerksbuchstabe hin – wobei das Laufwerk auch ein USB-Stick oder eine externe Festplatte sein darf!
Der Installationspfad (Destination Folder) sollte im Beispiel C:\ lauten.
>
Klicke auf INSTALL und gedulde dich – die Dateien werden entpackt! Das kann eine ganze Weile dauern. Im Ergebnis entsteht unter C: bzw. dem von dir gewählten Laufwerk ein Extraordner namens xampp. (Davon kannst du dich gleich nach erfolgreicher Installation überzeugen.)
77
Kapitel
2
Installiere deinen eigenen Webserver!
>
Nun erscheinen nacheinander merkwürdige schwarze Setup-Bildschirme! Dort musst du jeweils den aktiven Buchstaben (y wie yes bzw. n wie no) mit [Enter] bestätigen bzw. ggf. wunschgemäß anpassen, damit der Einrichtungsprozess abgeschlossen werden kann.
Shortcuts (Verknüpfungen) auf dem Desktop und im Startmenü sind eine feine Sache. Das »y« für »yes« ist voreingestellt. Bestätige mit [Enter]!
>
Drücke jetzt immer wieder auf [Enter], um die Fragen zu bestätigen.
An einer Stelle wirst du gefragt: Should I make a portable XAMPP without drive letters? Wenn du XAMPP nur auf der lokalen Festplatte installierst, könntest du das »n« für no eigentlich belassen. Soll XAMPP jedoch als portable (tragbare) Version auf einem USB-Stick oder einer tragbaren Festplatte eingerichtet werden, darfst du keine drive letters (Laufwerksbuchstaben) zulassen. Aber auch auf der lokalen Festplatte entscheide ich mich dagegen. So kann ich XAMPP immer schnell mal »mitnehmen«. Einfach den XAMPP-Ordner nachträglich auf den USB-Stick kopieren und direkt am Computer von Freunden nutzen! Ist doch super, oder? Folge meiner Empfehlung und tippe an dieser Stelle vorher auf alle Fälle ein »y« für yes. Drücke erst dann auf [Enter].
>
78
Es geht weiter mit dem [Enter], [Enter] um die nächsten beiden Fenster zu bestätigen. Am Schluss landest du bei dieser Auswahl:
Ganz einfach: Webserver selbst installiert!
>
Tippe ruhig erst einmal ein x für exit. Durch Druck auf [Enter] verlässt du das Setup-Skript und kannst dich in Ruhe umsehen.
Apropos installiert: XAMPP hinterlässt dabei keinerlei Spuren. Keine Einträge in irgendwelchen Registrierdatenbanken, kein nichts! Wenn du XAMPP löschen möchtest, löschst du einfach den kompletten Ordner xampp! (Oder du rufst die Datei uninstall_xampp.bat aus dem xampp-Ordner auf.)
So startest du XAMPP Du möchtest XAMPP starten? Und damit den Apache Webserver, PHP, MySQL und phpMyAdmin? Kein Problem! Wozu gibt es denn das neue Verknüpfungssymbol auf dem Desktop? Doppelklicke einfach auf das Symbol XAMPP Control Panel bzw. rufe diesen Eintrag über das Startmenü auf. Das geniale XAMPP Control Panel startet. Damit »zündest« du nun den Apache-Webserver und den MySQL-Datenbankserver. Dafür benötigst du nur die beiden oberen START-Schaltflächen. Klicke zuerst auf den obersten START-Knopf, den rechts neben Apache. Warte ein paar Sekunden. Wähle danach den START-Knopf darunter, den rechts neben MySQL.
Starte den Apache-Webserver (oberstes Modul) und MySQL (zweites Modul von oben) jeweils durch Klick auf die daneben angeordnete START-Schaltfläche. Der Text Running erscheint und die START-Schaltfläche verwandelt sich in eine STOP-Schaltfläche.
Nach Klick auf die jeweilige START-Schaltfläche meldet sich gegebenenfalls ein warnendes Fenster deiner Firewall. Das geht in Ordnung, Windows passt schließlich auf. Erlaube je nach Firewall den Zugriff bzw. Einsatz des Webservers und von MySQL in deinem lokalen Netz.
79
Kapitel
2
Installiere deinen eigenen Webserver!
Nanu, es gibt Probleme mit XAMPP? Achte darauf, dass kein konkurrierendes Webserver-Programm aktiv ist. Unter Windows 2000 bzw. XP Professional könnte das der Internet Information Server sein. Den darfst du nicht aktivieren, da dieser den Apache-Webserver behindern würde. Auch das »Telefonierprogramm« Skype (www.skype.com) musst du ggf. herunterfahren, da es sich oft nicht mit XAMPP bzw. dem lokalen Apache-Webserver verträgt. Es kann auch sein, dass eine lokale Firewall oder ein im Hintergrund arbeitender Virenscanner dafür sorgt, dass XAMPP nicht richtig läuft. Auch die aktuellen Browser präsentieren ggf. alle möglichen Sicherheitsabfragen und Warnungen, ehe sie dich an XAMPP heranlassen. Im Zweifelsfalle gilt: Versuch macht klug! Trenne dich während der Arbeit mit XAMPP unbedingt vom Internet – aus Sicherheitsgründen! Schalte erst dann die Firewall aus bzw. überwinde die Sicherheitsmechanismen deines Browsers.
So beendest du XAMPP Du möchtest deine PHP-MySQL-XAMPP-Sitzung beenden? Dann musst du beide Module durch Klick auf STOP wieder herunterfahren. Schalte erst MySQL ab und warte einige Sekunden. Stoppe danach den Apache-Webserver. Der grüne Text Running muss an beiden Stellen verschwunden sein. Auch wenn du das Fenster des XAMPP Control Panel schließt – das Steuerpult bleibt aktiv! Es nistet sich ganz rechts unten im Systembereich ein. Du findest es neben der Uhrzeit. Ein Doppelklick auf dieses Symbol zaubert das Steuerpult hervor.
Du möchtest nun auch das XAMPP-Steuerpult beenden? Klicke im XAMPP Control Panel auf die Schaltfläche EXIT. Du findest sie als unterste Schaltfläche in der rechten »Reihe«. Erst jetzt ist XAMPP wirklich inaktiv.
80
Nur noch etwas Handarbeit … und fertig!
Wo liegen die Dateien von XAMPP? XAMPP hat nun alles installiert, Webserver, PHP, MySQL, phpMyAdmin usw. Fantastisch. Doch wo liegen die ganzen »Module«? XAMPP legt den Apache-Webserver, PHP, MySQL, phpMyAdmin usw. in Unterordnern unter C:\xampp ab. 0 Den Apache-Webserver findest du unter C:\xampp\apache 0 Die PHP-Dateien liegen unter C:\xampp\php 0 MySQL findest du z. B. unter C:\xampp\mysql Auch andere Module wie Perl, Mercury Mail Server und der FileZilla-FTPServer werden installiert. Diese Komponenten benötigen wir jedoch nicht, du kannst sie ignorieren. Was für uns wichtig ist: Für deine eigenen Daten hat XAMPP den Ordner htdocs eingerichtet. Du findest dieses Verzeichnis unter C:\xampp\htdocs. Merke dir diesen Ordner gut! Noch einmal langsam und zum Mitschreiben: Alles, was du jetzt PHP-mäßig anstellen wirst, legst du ab unter C:\xampp\htdocs!
Nur noch etwas Handarbeit … und fertig! Hat alles perfekt funktioniert? Probiere es aus! Teste, ob dein lokaler Webserver funktioniert. Die Startseite für deinen lokalen Webserver findest du stets unter der Adresse http://127.0.0.1. Tippe diese Adresse einfach in deinen Browser ein. Falls dir diese Nummer zu kryptisch ist, kannst du dir auch die Adresse http://localhost merken. Last but not least gibt es noch eine dritte Methode. Kennst du den Namen deines PCs? Meiner heißt z. B. Monarch. Dann tippe ich http://monarch und drücke [Enter]. Auch das geht also, es führen tatsächlich drei Wege zum gleichen Ziel!
81
Kapitel
2
Installiere deinen eigenen Webserver! Wir einigen uns am besten auf http://localhost! Tippe diese Adresse ein und drücke [Enter]. Je nach Version von XAMPP siehst du – nach Klick auf den Link Deutsch – diese oder eine ähnliche Seite:
XAMPP begrüßt dich mit einer Begrüßungs-Seite.
Dahinter verbirgt sich aber nichts weiter als eine Status- und Demoseite, die die Macher von XAMPP für dich vorinstalliert haben. Du wunderst dich, warum in diesem Ordner schon so viel drin steckt? Das sind vor allem Demo- und Beispielprogramme. Du kannst diese Dateien und Ordner bedenkenlos löschen. Du traust dich nicht, das alles zu löschen? Dann habe ich einen anderen Tipp: Benenne den Ordner htdocs um in htdocs_alt. Erstelle nun unterhalb von xampp einen neuen, leeren Ordner namens htdocs. Auch das funktioniert! (Wenn du dich nicht beim Ordnernamen verschrieben hast!) Nach dem Druck auf [Enter] will sich dein PC stets ins Internet »einwählen«? Versuche eine Option wie »Offline bleiben«. Wähle z. B. den Befehl DATEI|OFFLINEBETRIEB. Probiere es dann erneut.
82
Testen: phpinfo() auf localhost
Testen: phpinfo() auf localhost Wunderbar, jetzt hast du deinen eigenen Webserver. Teste doch einmal, ob alles funktioniert. Zuerst prüfen wir, ob unsere eigenen HTML-Seiten angezeigt werden.
Zuerst eine HTML-Seite … Erinnerst du dich an deinen Ordner html, den du unter C:\phpkid eingerichtet hattest? Ich meine unser kleines Projekt aus Kapitel 1. Das kommt uns wie gerufen, denn hier gibt es eine Datei index.html. Das ganze Projekt binden wir einfach zur Probe in unseren Webserver ein!
>
Kopiere diesen Ordner html komplett nach C:\xampp\htdocs. Der neue Pfad muss also lauten C:\xampp\htdocs\html!
>
Rufe diese Seite nun auf. Dazu tippst du http://localhost/html. Wenn alles klappt, wird die im ersten Kapitel erstellte Seite index.html aufgerufen! Es klappt: Aufgerufen wird die index.html aus dem Ordner html.
Aber auch hier sind die Vorteile eines Webservers noch nicht ersichtlich. Es macht keinen großen Unterschied, ob du die Datei direkt von PSPad bzw. dem Windows Explorer aus startest, oder über den Webserver »abrufst«.
Die »Magie« der index.html Du könntest diese Datei index.html auch direkt durch Doppelklick starten. Da es eine reine HTML-Seite ist, macht das keinen Unterschied – zumindest vom Erscheinungsbild her. Bemerkst du etwas? Wenn du sie über http://localhost/html öffnest, dauert das ein wenig länger. 83
Kapitel
2
Installiere deinen eigenen Webserver! Schließlich muss der Webserver die Anfrage (HTTP-Request) erst bearbeiten und die passende Seite zurück zum Browser schicken. Apropos http://localhost/html! Gezeigt wird die index.html, obwohl du diesen Namen überhaupt nicht getippt hattest? Der Engländer würde jetzt sagen How come, was ist los? Nun, eine index.html wird immer dann angezeigt, wenn du den entsprechenden Ordnernamen eintippst. Wenn keine index.html vorhanden ist, reicht oft auch eine index.htm oder sogar eine index.php als Startdatei. Das ist ziemlich praktisch. So musst du nicht erst umständlich http://localhost/html/index.html tippen, da http://localhost/html genügt!
… und nun ein PHP-Test Und nun folgt ein kleiner PHP-Test! Dafür schreibst du deine erste PHPDatei. Diese nennen wir info.php und legen sie in den Ordner C:\xampp\htdocs. Richtig, diesmal direkt in den Stammordner deines »lokalen Webs«. Wie geht das?
> > >
Starte PSPad. Wähle nun im Menü DATEI den Befehl NEU. Bleibe im voreingestellten Register Leere Datei erstellen und doppelklicke auf PHP. Eine Datei wird erzeugt, wirklich leer ist sie allerdings nicht. Du findest hier schon die PHP-Tags vor. Klicke in die leere Zeile zwischen
>
Notiere folgenden Befehl: phpinfo();
>
84
Vergiss nicht, die Datei zu speichern. Zur Erinnerung: Wir wollten sie info.php nennen (Endung .php!).
Testen: phpinfo() auf localhost
Achte unbedingt darauf, die Datei in XAMPP zu speichern. Und zwar im Ordner xampp, Unterordner htdocs. Denn nur wenn sie in htdocs (oder einem Unterordner von htdocs) liegt, wird PHP ausgeführt.
>
Rufe die Seite nun folgendermaßen auf. Tippe in den Browser: http://localhost/info.php
und bestätige mit [Enter]. Wenn alles geklappt hat, siehst du solch ein oder ein ähnliches Bild: Es funktioniert: PHP ist auf deinem System korrekt installiert.
Das ist zum einen der Beweis, dass PHP funktioniert. Zum anderen gibt dir die Funktion umfangreiche Auskünfte. Welche PHP-Version ist auf deinem System installiert? Wir arbeiten mit PHP 5.3.1. Welches Betriebssystem wird verwendet? Welche Einstellungen wurden vorgenommen? Für den Kenner ist diese Anzeige eine wahre Fundgrube. Für uns Grund, einen Indianer-Freudentanz aufzuführen!
85
Kapitel
2
Installiere deinen eigenen Webserver!
Du versuchst, die info.php direkt aufzurufen? Das wird misslingen. Entweder du siehst den Quelltext. Oder Windows beschwert sich, weil es mit diesem Dateityp nichts anfangen kann. Spätestens an diesem Beispiel merkst du, wie wichtig der Webserver ist. Erst der Webserver sorgt dafür, dass die PHP-Anweisung – hier die Funktion phpinfo() – ausgeführt wird. Wichtig zu wissen: Der PHP-Befehl wird ausgeführt, aber nicht angezeigt. Der Browser erhält reinen HTML-Code zugeschickt. Wenn du’s nicht glaubst, mache den Test: Tippe noch einmal die Adresse http://localhost/info.php. Wähle nun im Browser je nach Version den Befehl SEITE|QUELLCODE ANZEIGEN, ANSICHT|QUELLTEXT bzw. SEITENQUELLTEXT ANZEIGEN. Du wirst keine einzige Zeile PHP finden! Was du siehst, ist der HTML-Quellcode, der durch die phpinfo() entstanden ist!
Noch ein Test: Funktioniert phpMyAdmin? Hattest du auf der ursprünglichen XAMPP-Begrüßungsseite den Punkt TOOLS entdeckt? Dort steckt auch phpMyAdmin, unser Datenbankverwaltungsprogramm. Wir brauchen es zwar erst später – trotzdem solltest du jetzt schon testen, ob der Zugriff funktioniert! Ich empfehle dir, dieses Tool nicht über den Link, sondern stets direkt aufzurufen. Dazu tippst du in die Adresse-Zeile des Browsers: http://localhost/phpmyadmin Normalerweise startet phpMyAdmin ohne Kommentar. Bei dir erscheint eine Dialogbox zur Eingabe von Benutzernamen und Passwort? Dann tippst du als Benutzernamen einfach root, das Passwort-Feld jedoch lässt du frei. Das sind übrigens die gleichen Daten, die du später auch für MySQL verwenden wirst: root und nichts.
Schlussbemerkung Viel Theorie, ich weiß. Aber das war wichtig. Außerdem weißt du jetzt, wo du Platz für deine PHP-Homepage bekommst. Und du bist stolzer Besitzer eines eigenen lokalen Webservers. Und das ist doch schon allerhand!
86
XAMPP gibt es übrigens auch für Mac und für Linux. Dort ist die Vorgehensweise leider etwas anders. Lies dir die entsprechenden Anleitungen auf www.apachefriends.de durch. Du bist Macianer und kommst mit XAMPP nicht zurecht? Dann solltest du das schon erwähnte MAMP ausprobieren. Dieses Tool bekommst du unter www.mamp.info.
Zusammenfassung
Zusammenfassung 0 Du weißt jetzt, wozu ein Webserver dient. Hier liegen die Seiten. Der Betrachter kann sie über Eintippen der entsprechenden Webadresse anfordern. Diese Anforderung heißt »HTTP-Request«. 0 Du kennst einige Dienstleister mit PHP/MySQL-Unterstützung. Du kennst z. B. MultiMania (vormals Tripod bei Lycos), einen werbefinanzierten Anbieter einer kostenlosen PHP/MySQL-Homepage. 0 Du weißt, wie das beste Webserver-Programm heißt – Apache Webserver. Es ist ein frei verfügbares Programm. 0 Wir haben den Apachen selber auf unserem Rechner eingerichtet. Dabei half uns ein Installations-Tool namens XAMPP. Angenehmer Nebeneffekt: Jetzt laufen auch PHP und MySQL ganz automatisch auf deinem heimischen Rechner. 0 Du weißt, wie du dein eigenes Web aufrufst. Tippe http://localhost in die Adresse-Zeile des Browser. Drücke [Enter]. 0 Du hast am Beispiel der Funktion phpinfo() herausgefunden, dass eine PHP-Datei nur beim Aufruf über den Webserver richtig angezeigt wird. Grund: PHP wird vom Webserver ausgeführt. Der Browser bekommt jedoch reinen HTML-Code zugeschickt.
Ein paar Fragen … 1. Kannst du bei Anbietern wie T-Online oder AOL deine Homepage mit PHP/MySQL installieren? 2. Wie heißt das Programm, welches dir den Apache-Webserver, PHP, MySQL und noch viel mehr auf deinem heimischen Computer einrichtet? 3. Unter welchem Pfad legst du deine PHP-Dateien ab, wenn du den Apache-Webserver mit XAMPP installierst hast? 4. Welche Endung hat eine PHP-Datei? 5. Wozu brauchst du einen eigenen Webserver?
87
Kapitel
2
Installiere deinen eigenen Webserver!
… und eine Aufgabe Diese Aufgabe wendet sich an Windows-Nutzer, die mit PSPad arbeiten. Und damit es nicht so schwer wird, beginne ich mit einem Trick. Du möchtest noch schneller ein HTML-Grundgerüst in PSPad einfügen? Klicke auf den Pfeil rechts neben der NEU-Schaltfläche (Sie heißt eigentlich NEUE DATEI ERSTELLEN) und wähle HTML. Oder wähle DATEI|NEU und bleibe im Register Leere Datei erstellen. Doppelklicke auf HTML. Auch jetzt wird ein HTML-Dokument im Standard 4.01 Transitional eingefügt – sogar mit verkürzter DTD. (Allerdings ohne lang="de" und utf-8.) Und nun kommt endlich deine Aufgabe: Finde heraus, welche Vorlage sich dahinter verbirgt. Passe diese Vorlage an deine Wünsche an. Sorge also dafür, dass unser perfektes HTML-Grundgerüst von Seite 32 eingebunden wird. Meinetwegen mit verkürzter DTD und gerne auch ohne Einrückung der Zeilen. (Damit die Einrückung von PHP besser zur Geltung kommt.) Aber bitte dafür wieder mit CSS-Link von Seite 50.
88
3 Hallo echo – »Hallo Welt« Die mühevollen Vorarbeiten sind geschafft! Der Webserver läuft. Höchste Zeit, mit dem Programmieren richtig loszulegen. In diesem Kapitel lernst du: $ wie du mit PHP Daten ausgibst $ wie du mit Variablen arbeitest, den »variablen Platzhaltern« $ wie du Zeilenumbrüche setzt $ wie du Sonderzeichen »maskierst« $ wie du Fehler erkennst und vermeidest
89
Kapitel
3
Hallo echo – »Hallo Welt«
Daten ausgeben mit echo Gleich zu Anfang stelle ich die wichtigste Sprachanweisung von PHP vor – echo. Und ich verspreche dir, es ist eine Anweisung »mit Nachhall«. Doch vorher klären wir, wie PHP-Dokumente überhaupt aufgebaut sind und wo du die PHP-Anweisungen notierst.
Wie sind PHP-Dokumente aufgebaut? Die PHP-Notation ist unkompliziert. Was musst du wissen? Nicht viel! PHP-Dokumente sind eigentlich nichts weiter als HTML-Dokumente. Sie besitzen die Endung .php. Sie enthalten zusätzlich Abschnitte mit PHPCode. Diese PHP-Abschnitte notierst du ganz einfach irgendwo innerhalb des HTML-Quelltexts. Wo, ist im Prinzip fast egal. Hauptsache du machst deutlich, dass es sich um einen PHP-Abschnitt handelt.
Wie kennzeichne ich meinen PHP-Code? Ganz einfach. Zu Beginn des PHP-Teils notierst du Folgendes:
Das war’s schon. Das ist die Form, die ich dir empfehle. Du könntest aber auch schreiben:
wobei du dann die Kurzform gewählt hättest. (Ich zeige es dir deshalb, damit du dich nicht wunderst, wenn dir diese Schreibweise bei anderen Skripten begegnet.) Wir bleiben bei der Langform, da sie zu 100% dem Standard entspricht. Warum ist die Kennzeichnung des PHP-Abschnitts eigentlich so wichtig? 90
Daten ausgeben mit echo
Erst durch diese Kennzeichnung »weiß« der Webserver, dass es sich um PHP-Abschnitte handelt. Denn diese Abschnitte werden nicht einfach so an den Browser geschickt. Sie werden vorher interpretiert, ausgeführt. Vergiss nicht: Der Benutzer bekommt nur eine HTML-Seite mit HTMLAnweisungen »zugeschickt«. Den PHP-Code bekommt er nie zu Gesicht!
»Hallo Welt« – dein erstes Skript Unter Programmierern ist es eine hübsche Tradition, die »Welt« am Anfang mit einem kräftigen »Hallo« zu begrüßen. Schreibe ein Skript, welches den Text »Hallo Welt« ausgibt. Das Dokument soll hallo.php heißen und in unserem htdocs-Ordner unter C:\xampp abgelegt werden.
>
Erzeuge mit deinem bevorzugten Code-Editor (PSPad, Aptana Studio usw.) eine neue, leere HTML-Datei. In PSPad wählst du DATEI|NEU, gehst ins Register Neue Datei aus Vorlage erstellen und doppelklickst auf die Vorlage HTML 4.01 Transitional. (Falls du die Aufgabe von Seite 88 gelöst hast, gibt es auch einen schnelleren Weg.)
>
Nun erscheint das schon bekannte Grundgerüst einer HTML-Datei. Bereite zwischen einen PHP-Bereich vor. Kleide die PHP-Tags außerdem durch ein. Damit sorgst du dafür, dass der Text innerhalb des obligatorischen HTML-Blockelements notiert wird. Der Bereich innerhalb von sieht dann so aus:
>
Notiere zwischen den PHP-Tags jetzt folgende PHP-Zeile: echo "Hallo Welt!";
>
Nicht vergessen: Speichere dein Dokument. Wähle den Namen hallo.php. Denke an den korrekten Speicherpfad: xampp/htdocs!
PSPad bietet dir beim Speichern den Dateityp HTML Document an. Doch wir brauchen PHP. Stelle daher im Listenfeld bei Dateityp vorher Alle Dateien (*.*) ein. Notiere dann den Dateinamen im Dateiname-Feld. 91
Kapitel
3
Hallo echo – »Hallo Welt«
Die Sprachanweisung echo sorgt dafür, dass die entsprechenden Daten ausgegeben werden. Die auszugebenden Daten notierst du innerhalb von Gänsefüßchen. Die Zeile wird am Ende durch ein Semikolon abgeschlossen.
Quelltext für die hallo.php So sieht das gesamte Beispiel aus. Ich habe den Titel in der vierten Zeile angepasst und außerdem eine beschreibende Überschrift eingefügt. Aber Hallo – der eigentliche PHP-Teil ist nur ganz kurz: Hallo-Welt-Skript <meta http-equiv="content-type" content="text/html; charset=utf-8"> Hallo-Welt-Skript
Du möchtest auch mit einer externen CSS-Datei arbeiten? Damit die sechste Zeile im Quelltext Sinn macht? Dann vergiss nicht, dass du die Datei phpkid.css ebenfalls in den Ordner htdocs kopieren musst. Sonst werden deine »Stile« nicht angezeigt!
Teste dein Dokument mit dem Webserver Sicher bist du neugierig, ob alles funktioniert. Rufe dein Dokument im Webserver auf. Da du es direkt im Wurzelordner htdocs gespeichert hast, ist das ganz einfach. Tippe http://localhost/hallo.php und drücke auf [Enter]. Wenn alles geklappt hat, müsstest du folgendes Bild sehen: 92
Daten ausgeben mit echo
Der PHP-Code wird interpretiert: Der Browser gibt den Hallo Welt-Text aus.
Hat’s funktioniert? Herzlichen Glückwunsch! Huch, bei dir gibt es eine Fehlermeldung? Oder der Text wird nicht angezeigt? Beachte, dass die Anzeige nur funktioniert, wenn du die Seite über den Webserver startest. Das direkte Aufrufen mit Doppelklick führt dazu, dass der PHP-Abschnitt nicht interpretiert wird. Kunststück, wenn du den Webserver umgehst? Weitere Fehlermöglichkeiten bespreche ich ein paar Seiten weiter hinten im Abschnitt Fehlermeldung. Also, cool bleiben!
PSPad: Raffinierte Farbhervorhebung Mal was anderes: Ist dir eigentlich die interessante farbliche Darstellung in PSPad aufgefallen? Sowohl die HTML- als auch die PHP-Befehle werden durch unterschiedliche Farben optisch gut hervorgehoben. Dafür sorgt der HTML multihighlighter – eine raffinierte Farbhervorhebungsautomatik.
Der HTML Multihighlighter ist automatisch aktiv. Du erkennst es an der entsprechenden Anzeige in der Statuszeile.
Stelle zur Probe einmal einen anderen Highlighter ein. Dazu klickst du einfach auf den Text HTML multihighlighter aus der Statuszeile. Nun erscheint
93
Kapitel
3
Hallo echo – »Hallo Welt« ein Dialogfenster und zeigt dir eine Auswahl vieler anderer Farbhervorhebungs-Module. Probiere doch einmal die Einstellung »HTML«. So wird nur der HTML-Code farblich hervorgehoben. Du kannst den Fokus aber auch ausschließlich auf PHP legen. Du musst den Highlighter aber normalerweise nicht von Hand wählen. PSPad erkennt den Dateityp automatisch anhand der Endung einer Datei. Rufe doch einmal die phpkid.css auf und prüfe, welcher Highlighter gewählt ist. Richtig: Cascading Style Sheets.
Variablen: Mein rechter, rechter Platz ist leer Die Welt haben wir schon begrüßt. Wunderbar! Richten wir unser Augenmerk deshalb auf die nächste Umgebung: Auf Katja, Leon, Peer, Manja und auf wen auch immer. Schmettere einem dieser lieben Menschen ebenfalls einen freundlichen Gruß entgegen. Bleiben wir im Beispiel einfach bei Katja. Begrüße sie mit PHP! Erstelle ein neues PHP-Dokument. Nenne es katja.php und lege es wieder in den Ordner htdocs. Als Titel und Überschrift schlage ich Persönliche Begrüßung mit Variablen vor. Doch was sind Variablen?
Was sind Variablen? Variablen sind Platzhalter! Es sind Speicherstellen im Hauptspeicher des Rechners. Stell dir eine Variable einfach als Behältnis vor. Es ist ein Behältnis, welches dir für die Dauer der Programmausführung zur Verfügung steht. Was du hineinpackst, bleibt dir überlassen. Du kannst den Inhalt der Variablen beliebig ändern und erweitern. Auch den Namen des »Behälters« selbst kannst du frei wählen. Na ja, fast frei zumindest.
94
Die Namen von Variablen beginnen immer mit einem Dollarzeichen. Verwende keine Umlaute, Leer- oder Sonderzeichen! So wäre $eimer ein erlaubter Variablenname, nicht aber $meine schüssel. Der Unterstrich (_) ist jedoch gestattet. Er dient oft als Ersatz für das verbotene Leerzeichen. So wäre $dein_name eine wunderbare Variable. Selbst kurze Variablen wie $i oder $k kannst du verwenden. Weiterhin gilt: Groß- und Kleinschreibung werden unterschieden. So sind $vorname und $Vorname zwei unterschiedliche Variablen. (Damit solche Probleme gar nicht erst auftreten, rate ich zu genereller Kleinschreibung!)
Variablen: Mein rechter, rechter Platz ist leer
Beachte zusätzlich: Einige in PHP reservierte Wörter dürfen nicht als Variablenname verwendet werden. Das sind Wörter wie while, if, switch, for usw. usf. Außerdem ganz wichtig: Beginne Variablennamen nie mit einer Zahl. Nicht funktionieren wird ein Name wie $68name. (In der Variablen selbst sind jedoch Ziffern gestattet.)
Der Platzhalter $vorname Für unser »Katja-Beispiel« habe ich mir die Variable $vorname ausgedacht. Dieser muss ich nur noch einen Wert zuweisen. Im Beispiel soll es der Name Katja sein. Wie mache ich das? So: $vorname = "Katja";
Die Variable selbst steht links. Danach folgt ein sogenannter Zuweisungsoperator. Dann notiere ich den eigentlichen Wert des »VariablenPlatzhalters«. Und dieser befindet sich rechts, getreu dem Motto »Mein rechter, rechter Platz ist leer«. Warum notiere ich den Namen Katja in Gänsefüßchen? Weil es sich um Text handelt. In diesem Zusammenhang spricht man von einem sogenannten String. Strings werden stets im Gänsefüßchen notiert. Bei Zahlen dagegen brauchst du keine Gänsefüßchen zu setzen. Klar? Der gesamte Quelltext des PHP-Bereichs sieht so aus.
Denke an das Semikolon am Zeilenende. Jede Zeile wird in PHP in der Regel durch ein Semikolon abgeschlossen!
Hallo Katja! So sieht mein Beispiel aus.
95
Kapitel
3
Hallo echo – »Hallo Welt« Das Beispiel findest du auf der CD im Ordner kapitel03. Schaue in die Datei katja1.php.
Wie funktioniert das Skript? Ganz einfach! In der ersten Zeile taucht die Variable $vorname das erste Mal auf. Du weist ihr gleich den Wert Katja zu. Doch warum steht Katja in Gänsefüßchen? Bei Katja handelt es sich um Text. Und Text entspricht dem sogenannten Datentyp String. Das muss durch Gänsefüßchen verdeutlicht werden, denn Strings müssen stets in Gänsefüßchen stehen. Neben dem Datentyp String kennt PHP noch den Datentyp Integer. Dieser Datentyp steht für eine normale Ganzzahl wie 5 oder 9834. Als weiteren Datentyp gibt es in PHP den Datentyp Float (Kommazahl). Später lernst du den Typ Boolean für Wahrheitswerte wie true oder false kennen. Wie du siehst, sind es alles in allem nur wenige Datentypen. Da PHP die Datentypen automatisch erkennt, musst du dich darum nicht weiter kümmern. (Der Fachmann sagt: Die Variablen sind nicht typisiert.) In Zeile 1 hast du die Variable also initialisiert, wie der Profi sagen würde. Nicht vergessen: Die Zeile wird dann durch ein Semikolon abgeschlossen. Noch einmal im Klartext: Wir haben uns unseren eigenen »Behälter« namens $vorname eingerichtet und dort den Text Katja hineingetan. Nun zur zweiten Zeile. Hier sorgt die echo-Anweisung nun dafür, dass etwas ausgegeben wird. Das »Ausgabegut« steht übrigens wieder in Gänsefüßchen. Auch hier handelt es sich um Text. Richtig erkannt: Es wird ein String ausgegeben! Nach dem Wort Hallo und einem Leerzeichen hat unsere Variable $vorname ihren großen Auftritt. Nun wird der Wert ausgegeben, der in der Variablen gespeichert ist. Dieser lautet Katja. Fazit: Im Browser erscheint der Text Hallo Katja!
Ausgabe verschönern mit HTML-Tags Die Ausgabe gefällt dir noch nicht? Verschönere sie einfach! Du kannst im Zusammenhang mit echo ganz problemlos HTML-Tags einsetzen. Die »Version 2« des Katja-Beispiels sieht folgendermaßen aus: 96
Wie Pech und Schwefel: Strings verketten
Wie du siehst, kannst du ganz problemlos HTML-Tags in deinen AusgabeString einfügen. Hier habe ich zusätzlich mit dem Tag-Paar für bold (fett) gearbeitet. Passe dein Beispiel dementsprechend an. Speichere und aktualisiere die Ansicht im Browser. Dazu drückst du die Funktionstaste [F5]. Das geht natürlich nur, wenn du die Seite http://localhost/katja.php noch aufgerufen hast.
Der Beweis: Ansicht im Browser und im HTMLQuelltext.
Wie du in der Abbildung siehst, werden die Tags korrekt ausgegeben. Zum Vergleich habe ich den Quelltext der »Webseite« aufgerufen. Das solltest du ruhig ebenfalls einmal probieren. Wähle dazu im Menü ANSICHT den Befehl QUELLTEXT. Vergewissere dich! Im Quelltext der »Webseite« ist tatsächlich kein PHPCode mehr enthalten. Denn schließlich sorgt der Webserver dafür, dass PHP interpretiert, ausgeführt wird. Und der Webserver schickt halt den HTML-Code Hallo Katja! an den Browser. Das Beispiel findest du auch auf der CD, und zwar wieder im Ordner kapitel03. Der Dateiname dieser Version lautet katja2.php.
Wie Pech und Schwefel: Strings verketten PHP ist einfach! Unter dem Motto »Freiheit für Kettenhunde« reden wir nun über die »Hundeleine« in PHP. Ich meine den Verkettungsoperator Punkt. Doch eigentlich brauchen wir über diesen Punkt gar nicht so viele Worte zu
97
Kapitel
3
Hallo echo – »Hallo Welt« verlieren. Der große Vorteil: Strings und Variablen müssen nicht verkettet werden. Zumindest gilt das in den meisten Fällen. Doch was ist mit Verketten überhaupt gemeint? Unter Verketten versteht man das Verbinden von zwei oder mehr Zeichenketten. Dazu wird normalerweise ein sogenannter Verkettungsoperator verwendet. Als Verkettungsoperator dient in PHP der Punkt. Schaue dir doch noch einmal unser Beispiel von eben an:
Du setzt die Variable einfach so mir nichts dir nichts in die Zeichenkette hinein. Das spart viel Schreibarbeit und scheint für uns ganz selbstverständlich zu sein. Ist es auch, denn diese raffinierte Technik ist eine Spezialität von PHP. Bei herkömmlichen Programmiersprachen gilt jedoch: Eine Variable darf grundsätzlich nicht so einfach innerhalb von Gänsefüßchen notiert werden. Sie muss stets ohne Gänsefüßchen stehen. Das können wir mit PHP »nachspielen«. Schau dir zum Vergleich dieses vereinfachte Beispiel an. Hier geben wir nur den Wert aus der Variablen aus:
Die Variable selber wurde dank der Gänsefüßchen schon in der ersten Zeile als Zeichenkette »gekennzeichnet«. Es ist also völlig überflüssig, in der zweiten Zeile noch Gänsefüßchen aufzuschreiben.
Strings und Variablen verketten? Meist unnötig! Eine Variable wird normalerweise nicht in Gänsefüßchen gesetzt. Der Rest jedoch muss als Zeichenkette gekennzeichnet werden. Um Variable und umgebende Zeichenketten zu verbinden, bedient man sich in »herkömmlichen« Programmiersprachen der Technik des Verkettens. 98
Wie Pech und Schwefel: Strings verketten Warum? In diesen Sprachen darf die Variable nicht einfach Teil des Strings sein. Sie muss mit dem String verkettet werden. Was in anderen Programmiersprachen das einzig Wahre ist, geht natürlich auch in PHP. Du kannst das Beispiel von oben also auch in dieser »Verkettungs-Variante« aufschreiben. Hier als die »Version 3« des »Katja-Beispiels«:
Interessant ist die zweite Zeile. Das Ergebnis entspricht der Version 2. Nur die Schreibweise ist komplizierter geworden. Die Variable wird zu ihrer linken und rechten je mit dem umgebenden String verkettet. Die Ausgabe jedoch ändert sich nicht, es erscheint weiterhin der Text Hallo Katja! im Browser. Wie schon erwähnt: In PHP ist das umständliche Verketten von Strings mit Variablen in den meisten Fällen nicht nötig. Die Variable verträgt es, mit in das »Gänsefüßchen-Boot« genommen zu werden. Wir haben uns in diesem Beispiel also zu viel Arbeit gemacht. Dieses »Zuviel an Arbeit« findest du zum Vergleichen unter dem Namen katja3.php auf der Buch-CD.
Strings verketten – manchmal geht’s nicht ohne! Warum habe ich dir diese umständliche Variante hier schon gezeigt? Nun, in manchen Fällen kommst du um das Verketten nicht drum herum! Zum Beispiel bei Funktionen. Oder bei den sogenannten Feldvariablen, den Arrays. Einverstanden, die Arrays kennst du noch nicht. Das verschieben wir also auf später. Doch mit einer Funktion können wir uns an dieser Stelle schon beschäftigen. Nix verstehen? Nehmen wir ein Beispiel! Angenommen, du möchtest den markigen Satz: Hallo Katja, willkommen in 2010! ausgeben. Weiterhin wünschst du, dass das Jahr automatisch erzeugt wird. (Wenn du das Buch in 2011 oder 2012 liest, soll natürlich auch 2011 bzw. 2012 ausgegeben werden.) Wie geht das? Mit einer Funktion! Du nimmst einfach eine entsprechende Funktion mit dem passenden Argument.
99
Kapitel
3
Hallo echo – »Hallo Welt«
Zum Ausgeben der aktuellen Jahreszahl dient die Funktion date("Y") oder auch date('Y'). Um genauer zu sein: Es ist eine Funktion mit Argument. Die Funktion selbst lautet dabei date(). Das Argument ist hierbei "Y". Und nun noch ein paar Worte zu den Gänsefüßchen: Ob du die doppelten oder die einfachen Gänsefüßchen wählst, ist eigentlich egal. Da du aber Gänsefüßchen nicht einfach ineinander verschachteln darfst, musst du in manchen Fällen die Variante mit den einfachen Gänsefüßchen wählen. Entscheide also von Fall zu Fall.
Die Jahreszahl wird durch die Funktion date("Y") erzeugt.
Schreibe die entsprechende Zeile also folgendermaßen: echo "Hallo $vorname, willkommen in " . date("Y") . "!";
Hier haben wir mit Hilfe der Verkettung dafür gesorgt, dass die Funktion »funktioniert«. Das Jahr wird korrekt berechnet. (Vergleiche, wenn du magst, mit dem Vorbild-Beispiel katja4.php auf der CD.) Achte beim Verketten unbedingt darauf, dass Leerzeichen mit berücksichtigt werden müssen. So musst du im Beispiel nach dem Wort in unbedingt ein Leerzeichen setzen, bevor du das schließende doppelte Gänsefüßchen setzt. Da das Ausrufungszeichen jedoch direkt hinter der Jahreszahl notiert werden soll, ist dort kein Leerzeichen nötig. Würdest du auf die Verkettung verzichten, wäre das Ergebnis grausam. Bei der Variante mit doppelten Gänsefüßchen date("Y") würde es Fehlermeldungen hageln. Warum? Weil du versucht hast, Gänsefüßchen ineinander zu verschachteln. Das solltest du dir also nicht antun. Aber auch eine Veränderung von date("Y") in date('Y') führt nicht zum gewünschten Ergebnis. Zugegeben, das Gänsefüßchen-Problem haben wir damit auf raffinierte Art gelöst. Folgender Quellcode 100
echo "Hallo $vorname, willkommen in date('Y')!";
Kleine Zeilenumbruchkunde führt jedoch zu dieser Anzeige:
Die Funktion wird nicht ausgeführt, sondern im Klartext angezeigt.
Was ist passiert? Statt die Funktion auszuführen, zeigt sie der Webserver im Klartext an. Kunststück, die Funktion wurde als String behandelt, als einfache Zeichenfolge. Und das ist natürlich Quatsch mit Soße, denn so kann sie nicht funktionieren.
Kleine Zeilenumbruchkunde Kennst du den »Breakdance«? Oder das berühmt-berüchtigte englische »Breakfast«? Alles hat irgendwie mit »Brechen« zu tun. Beim Breakdance bricht man sich womöglich die Knochen, beim englischen »Breakfast« … nein, lassen wir das jetzt.
Mit einen HTML-Zeilenumbruch erzeugen Ich wollte eigentlich auf den Break hinaus, auf den Umbruch. Ich zeige dir, wie du problemlos einen Zeilenumbruch ( ) in dein Dokument zauberst. Dafür erweitern wir einfach mal unser Katja-Beispiel. Ich greife dafür auf eine frühere Fassung zurück, auf unsere Version 2: Hier noch einmal der PHP-Teil:
Und jetzt ergänzen wir eine zweite echo-Zeile! Damit die neue Zeile auch wirklich auf die »neue Zeile« rutscht, füge ich zusätzlich einen HTMLUmbruch ein. Dafür sorgt das Zeichen .
101
Kapitel
3
Hallo echo – »Hallo Welt«
Im Browser sieht das Ganze so aus, zusätzlich habe ich über den Befehl SEITE|QUELLTEXT ANZEIGEN (Internet Explorer) bzw. ANSICHT|SEITENQUELLTEXT ANZEIGEN (Firefox) gleich den HTML-Quelltext aufgerufen.
Im Quelltext siehst du zwar das Tag , aber keinen Zeilenumbruch.
Bisher haben wir nur einen Umbruch im Browser erzeugt. Im Hintergrund findet jedoch kein Zeilenumbruch statt. Dieses Beispiel kannst du unter dem Namen katja-br.php von der CD abrufen.
Umbruch im Editor: Der Befehl \n wie new line Wie wäre es zusätzlich noch mit einem Umbruch im Editor? Zugegeben, bei zwei Zeilen ist das vielleicht nicht so wichtig. Doch wenn du häufiger mit echo arbeitest, entsteht irgendwann eine »Endlos-Zeile« im Editor. Wenn du hinter den Kulissen einen Zeilenumbruch wünschst, verwendest du den PHP-Befehl new line. Das entsprechende Zeichen heißt: \n Vor dem n wird lediglich ein Backslash notiert, ein rückwärtsgelehnter Schrägstrich. Das n selbst steht als Abkürzung für new line. Und so sieht das renovierte Beispiel aus, ich habe gleich zweimal mit \n gearbeitet:
102
Maskenball: Das Escape-Zeichen »\« Beim Aufruf im Browser wirst du keinen Unterschied zur vorherigen Variante feststellen. Nur der Blick in den Quelltext offenbart den kleinen, aber feinen Unterschied:
Mit \n erzeugst du die Zeilenumbrüche auch im Quelltext.
Vergleiche mit der Datei katja-nl.php von der CD.
Maskenball: Das Escape-Zeichen »\« Mit dem Backslash hat es eine besondere Bewandtnis. Eben habe ich dir diesen »schiefen Kollegen« im Zusammenhang mit dem »Zeilenumbruch« vorgestellt. Mit \n wird eine neue Zeile im Editor erzeugt, du erinnerst dich. In diesem Fall wird unser »Strich-Kumpel« also zu einem Steuerbefehl für die Anzeige des Quelltextes.
Die wichtigsten Umbruch-Steuerbefehle Es gibt übrigens noch mehr solcher interessanten Steuerbefehle. Die wichtigsten davon stelle ich dir in dieser Tabelle vor: \n erzeugt neue Zeile
Gut, damit haben wir die eine Bedeutung geklärt. Doch hast du schon einmal darüber nachgedacht, was das komische Zeichen »\« wohl sonst noch bedeuten mag?
103
Kapitel
3
Hallo echo – »Hallo Welt«
Backslash als »Escape-Zeichen« Dieser Backslash (\) wird auch als »Escape-Zeichen« bezeichnet. Denn normalerweise dient er zum Maskieren bestimmter Sonderzeichen, die du sonst nicht so einfach ausgeben darfst. So darfst du z. B. Gänsefüßchen nicht einfach »im Klartext« in dein Skript hineinschreiben. Gänsefüßchen signalisieren schließlich, dass ein String beginnt bzw. endet. Doch wenn du unbedingt die Gänsefüßchen benötigst? Vielleicht, weil du eine Passage in Anführungszeichen setzen willst? Die eine Möglichkeit lautet: Ersetze die Gänsefüßchen durch einfache Gedankenstriche. Die andere Lösung: »Maskiere die Gänsefüßchen« durch das EscapeZeichen.
Das Ergebnis im Browser sieht dann so aus:
Nach dem »Escapen« werden auch Gänsefüßchen korrekt angezeigt.
Vergleiche mit der Datei escape.php auf der Buch-CD. Du musst auch das Dollar-Zeichen ($) oder den Backslash (\) maskieren, falls du diese Zeichen per echo als HTML ausgeben willst. Denn auch diese Zeichen haben normalerweise eine Sonderbedeutung. 104
Keinen Durchblick? Kommentare setzen!
Keinen Durchblick? Kommentare setzen! Steigst du noch durch deinen Quelltext durch? Klar doch! Bei zwei oder drei Zeilen ist das alles noch kein Problem! Doch wie sieht das bei umfangreichen Projekten aus? Weißt du nach Wochen immer noch genau, was die geniale Zeile 87 macht? Und wozu die schließende geschweifte Klammer in Zeile 145 dient? Der Mensch vergisst … (und auch Buffi-Hunde haben nicht gerade das beste Gedächtnis.) Gewöhne dir deshalb frühzeitig an, mit Kommentaren zu arbeiten! Das sind Bereiche, die nur von dir gesehen werden, aber auf den Programmablauf keinen Einfluss haben. Kommentare helfen dir, den PHP-Quellcode zu erklären.
Einzeilige Kommentare Willst du schnell mal einen einzeiligen Kommentar setzen, verwendest du den Doppelslash //: // Das ist ein einzeiliger Kommentar
Du kannst diesen Kommentar auch direkt an das Ende einer Zeile setzen, z. B. folgendermaßen: $vorname = "Katja"; // Variable $vorname initialisieren
Kommentare über mehrere Zeilen ziehen Wenn du dagegen »ganze Romane« schreiben möchtest, bietet dir PHP auch dafür eine Möglichkeit. Fasse deine mehrzeiligen Kommentare zwischen den Zeichen /* und */ zusammen: /* Das ist ein Kommentar, der sich im Beispiel gleich über mehrere Zeilen erstreckt und Platz im Buch verschwendet */
105
Kapitel
3
Hallo echo – »Hallo Welt«
Also ich habe es mir inzwischen angewöhnt, ausgiebig mit Kommentaren zu arbeiten. Ich kann dir diese Vorgehensweise nur empfehlen. Ein anderer Trick besteht darin, dein Skript einfach durch Leerzeilen zu gliedern. Tippe ruhig auf [Enter], um vor und nach einer wichtigen Zeile eine Leerzeile zu erzeugen. Das erhöht die Übersicht enorm. Der Programmablauf wird dadurch jedoch nicht gestört.
Fehlermeldung? Cool bleiben! Es ist zum Auswachsen! Du tippst deinen Code und lädst das Dokument in den Webserver? Eine Fehlermeldung taucht auf. Du korrigierst, lädst erneut – der Fehler bleibt. Ach ja, das Speichern. Du hattest vergessen, vor dem Aktualisieren zu speichern. Neu laden und – was sehen deine vom Bildschirmflimmern überanstrengten Äuglein jetzt? Eine neue Fehlermeldung! Es ist manchmal fast zum Auswachsen und es gibt Momente, da würden Hund Buffi und Buchautor Hanke den PC mitsamt Monitor am liebsten gemeinsam aus dem Fenster werfen. Doch halt! Cool bleiben, lautet die Devise. Hier ein paar Tipps, wie du Fehler vermeiden kannst.
Semikolon ; am Zeilenende vergessen? Vergiss nicht, dass eine Programmier-Zeile am Ende mit einem Semikolon abgeschlossen werden muss. Das vergessene Semikolon ist einer der häufigsten Fehler. Praktisch alle Zeilen müssen mit einem Semikolon abgeschlossen werden. (Nur in Ausnahmefällen lässt du das Semikolon weg. Aber darauf kommen wir noch zu sprechen!)
Grausam: Schon ein vergessenes Semikolon führt zu einer Fehlermeldung.
Schau dir die Abbildung an. Das Gemeine an der Geschichte: Die Fehlermeldung bezieht sich nicht etwa auf die Zeile, in der das Semikolon fehlt. Es wird die nächste Zeile (hier Zeile 14) moniert. Klar, denn da du das Semikolon vergessen hast, weiß der »PHP-Interpreter« nicht, dass die Zeile schon zu Ende war. 106
Fehlermeldung? Cool bleiben!
Variablen korrekt benannt? Ein anderer typischer Fehler schleicht sich immer wieder bei den Variablen ein. Hast du dem Variablennamen auch wirklich ein Dollarzeichen vorangestellt? Verschreiber bei den Variablennamen gehören ebenfalls zu den häufigen Fehlern.
Wenn ich Dollarzeichen sage, meine ich auch Dollarzeichen. Mir passiert es gelegentlich, dass ich eine Variable statt $vorname als §vorname schreibe. Was ich hier im guten Glauben richtig gemacht zu haben glaubte, ist natürlich ein Fehler. Hast du die Groß- und Kleinschreibung bei Variablen beachtet? Wenn du die Variable mit $Vorname initialisierst und versuchst, mit $vorname darauf zuzugreifen, kann das einfach nicht gelingen. Variablen dürfen außerdem nicht mit einer Zahl beginnen, eine Bezeichnung $68vorname würde ebenfalls zu einer Fehlermeldung führen.
Gänsefüßchen richtig gesetzt? Ein anderer typischer Fehler ist das Vergessen eines Gänsefüßchens. Wenn du statt $vorname = "Katja";
einfach schreibst $vorname = "Katja;
gibt es auf jeden Fall Probleme. Jedes »einschaltende« Gänsefüßchen benötigt auch ein »Ausschalt-Pendant«.
Falsche Klammersetzung? Apropos Ein- und Ausschalten. Im Verlauf des Buches wirst du mit »Klammer-Blöcken« arbeiten. Nutze die schon von CSS bekannten geschweiften Klammern { }, um mehrere Zeilen zu einem Block zusammen zu fassen. Bei den sogenannten Fallunterscheidungen oder den Schleifen zeige ich dir dieses Prinzip später noch ganz genau. Soviel schon vorweg: Auch das versehentliche Vergessen einer öffnenden oder schließenden Klammer führt natürlich zu Fehlermeldungen.
107
Kapitel
3
Hallo echo – »Hallo Welt« Probleme gibt es vor allem dann, wenn du mehrere »Klammern-Blöcke« ineinander verschachteln musst, und nicht mehr durchblickst, wo welche Klammer nun geschlossen werden soll. Auch hier schon an dieser Stelle mein Tipp: Kommentare setzen! Notiere, wo du welche Klammer öffnest und wieder schließt. Bei dir wird der PHP-Code überhaupt nicht ausgeführt? Nur der HTMLTeil der Seite erscheint? Hast du denn die Seite über den Webserver aufgerufen? Also z. B. über http://localhost/katja.php? Das einfache Doppelklicken auf den Eintrag funktioniert nicht. Vergiss nicht, dass PHP erst durch den »Webserver gezogen werden muss«: Bei PHP handelt es sich schließlich um Server-Programmierung!
Schlussbemerkung Was für ein Kapitel! Du kannst nun programmieren. Na gut, ein wenig zumindest schon. Du kennst Variablen, weißt, wie du Text ausgibst und kämpfst (hoffentlich erfolgreich) mit einer Vielzahl von Fehlern.
Zusammenfassung 0 Du weißt, dass PHP-Dokumente HTML-Dokumente mit der Endung .php sind. Du weißt, dass PHP-Bereiche von umschlossen werden. 0 Du kennst die Sprachanweisung echo zur Ausgabe von Daten. Setze den auszugebenden String in Gänsefüßchen, schließe die Zeile durch ein Semikolon ab: echo "Hallo Welt!"; 0 Du kennst das Konzept der Variablen, der »variablen Platzhalter«. Du möchtest eine Variable initialisieren? Notiere die Variable links, den Wert rechts. Setze dazwischen das Gleichheitszeichen, hier Zuweisungsoperator genannt: $vorname = "Katja"; (Die Leerzeichen vor und nach dem Istgleichzeichen haben lediglich eine optische Funktion.) 0 Du weißt, dass du bei der Ausgabe mit echo selbst mit HMTL-Tags arbeiten kannst. Notiere Strings und Variablen einfach innerhalb eines Gänsefüßchen-Paars. Du benötigst keinen Verkettungsoperator, wenn du mehrere Elemente zu einem String zusammensetzen möchtest. Eine Zeile wie echo "Hallo $vorname!"; ist für PHP kein Problem. 108
Ein paar Fragen … 0 In wenigen Fällen musst du doch den Verkettungsoperator Punkt verwenden, beispielsweise bei der Rückgabe von Werten aus Funktionen. Du hast den Verkettungsoperator im Zusammenhang mit der Funktion date() kennengelernt. 0 Du kennst den Steuerbefehl \n, mit dem man einen Zeilenumbruch auch im Editorfenster erzeugt. Du weißt, dass man mit \ sonst nicht darstellbare Sonderzeichen wie " oder $ maskieren (escapen) kann: Schreibe z. B. \" bzw. \$ 0 Du kennst meine Empfehlung zum Setzen von Kommentaren. Einzeilige Kommentare notierst du hinter //, mehrzeilige Kommentare kleidest du in die Zeichen /* und */ ein. 0 Wir haben besprochen, woher viele Fehler herrühren. Vergiss keinesfalls das Semikolon am Zeilenende oder das schließende Gänsefüßchen. Achte stets auf die korrekte Schreibweise der Variablen.
Ein paar Fragen … 1. Wie nennt man das Gleichheitszeichen zwischen Namen und Wert einer Variablen? 2. Nenne drei Datentypen für Variablen in PHP! 3. Mit welchem Steuerbefehl erzeugst du eine neue Zeile im Editor?
… und ein paar Aufgaben 1. Schreibe ein PHP-Dokument, welches den Satz »PHP macht Spaß!« ausgibt. Nenne es fun.php. 2. Wie heißt dein bester Kumpel? Speichere ihren/seinen vollständigen Namen in zwei Variablen. Nenne die erste Variable $vorname, die zweite $nachname. Gib den Namen mit PHP aus, indem du diese beiden Zeichenketten gemeinsam ausgibst. Speichere das Dokument unter dem Namen kumpel.php. 3. Füge in die Datei kumpel.php einen Kommentar ein, der dir jede Zeile erklärt.
109
4 Spaß mit Datum und Uhrzeit Time is money, Zeit ist Geld! So lautet das »gnadenlose Motto« vieler Erwachsener. Ich habe mir für dieses Kapitel einen ungleich besseren Wahlspruch ausgedacht. Er lautet: Time is fun, Zeit macht Spaß. In diesem Sinne stürzen wir uns nun ins Abenteuer Zeit. In diesem Kapitel lernst du: $ wie du mit den entsprechenden Funktionen Zeit und Datum ausgibst $ wie du mit if-else-Kontrollstrukturen eine tageszeitabhängige Begrüßung programmierst $ wie du mit sogenannten Feldvariablen (Arrays) die Wochentage ausgibst $ wie du mit Arrays in der Kurzform umgehst $ wie du Monatsnamen in sogenannten assoziativen Arrays speicherst
111
Kapitel
4
Spaß mit Datum und Uhrzeit
Immer up to date Bist du up to date? Ich bin es nicht! Wenn mich einer nach dem Datum fragt, zucke ich meist mit der Schulter. Wozu gibt es denn Computer? Fragen wir doch einmal den Webserver, welches Datum wir gerade haben! Bei den nun zu besprechenden Funktionen wird stets Datum und Uhrzeit des Webservers zurückgegeben. Du arbeitest am heimischen PC? Dann sind Datum und Uhrzeit natürlich identisch mit den Angaben deines PCs. Auch bei den zu Beginn besprochenen Dienstleistern sollte es keine Probleme geben. Wenn deine Seiten jedoch auf einem amerikanischen Webserver liegen, handelt es sich bei der Serverzeit natürlich um die amerikanische Zeit!
Das Datum ermitteln Du möchtest Datum und Uhrzeit ermitteln? Dann brauchst du die Funktion date()! Erinnerst du dich? Wir hatten uns diese Funktion im vorigen Kapitel kurz angeschaut, allerdings nur im Zusammenhang mit dem Jahr. Der Code zum Ermitteln des aktuellen Jahrs lautet: date("Y"). Als Ergebnis bekommst du eine vierstellige Jahresanzeige wie 2008. Doch das Jahr alleine reicht mir nicht aus. Selbst der schusselige Buchautor kennt in der Regel den richtigen Jahrgang! Wo bleiben die Monate, die Tage? Die holen wir uns schnell dazu! Füge der Funktion einfach weitere »Schalter« hinzu. Angenommen, du möchtest das Datum im Format 1.8.08 ausgeben. Also den Tag und den Monat ohne führende Null und das Jahr mit zwei Stellen. Dann schreibst du z. B. echo date("j.n.y");
Wichtig sind die Buchstaben j, n und y. Die Punkte dienen lediglich zum »Gestalten«. Ran an die Praxis, probiere das doch gleich einmal aus! Erstelle eine neue PHP-Datei, ich schlage den Namen datum1.php vor. Wir wollen das aktuelle Datum mit der eben besprochenen Funktion ausgeben. Ich zeige dir auf der nächsten Seite, was ich zwischen den Tags notiert habe:
112
Immer up to date Das aktuelle Datum ausgeben
Diese Funktion verrät dir stets das aktuelle Datum.
Die Schalter zur Ermittlung des Datums In der folgenden Tabelle habe ich dir alle Schalter zur Ermittlung des Datums aufgeschrieben. Bitte bekomme keinen Schreck, denn hinterher probieren wir das Ganze an weiteren Beispielen aus! Schalter j d n m S y Y D l (kleines »L«) M F w z t
Erklärung Monatstag ohne führende Null Monatstag mit führender Null Monatszahl ohne führende Null Monatszahl mit führender Null englisches Aufzählungszeichen (st, rd, th) Jahreszahl mit zwei Stellen Jahreszahl mit vier Stellen Wochentag, Kurzschreibweise Wochentag, Langschreibweise Monatsname, Kurzschreibweise Monatsname, Langschreibweise Wochentag als Zahl (0=Sonntag) Tag des Jahres als Zahl Anzahl der Monatstage
Beispiel 1 bis 31 01 bis 31 1 bis 12 01 bis 12 1st 3rd 5th 10 2010 Mon Monday Jan January 0 bis 6 0 bis 365 28 bis 31
Weitere Praxisbeispiele Schauen wir uns ein paar Praxisbeispiele an! Du möchtest nur den Wochentag in der Langform ausgeben? Dann genügt folgende Zeile. echo date("l");
113
Kapitel
4
Spaß mit Datum und Uhrzeit Solle es das Datum in voller Pracht sein? Wochentag und Monat jeweils mit führender 0, also nach dem Muster 01.05.? Und das Jahr in vierstelliger Schreibweise? Dann notierst du einfach: echo date("d.m.Y");
Du wünschst z. B. folgende englische Schreibweise: 3rd of July 2010? Dann versuche Folgendes – es funktioniert aber nicht unter allen PHP-Versionen: echo date("jS of F Y");
Wie du siehst, kannst du die Ausgabe des Datums sogar gestalten. Arbeite innerhalb von date() mit Leerzeichen und in Grenzen selbst mit anderen Zeichen wie hier mit dem Punkt! Setze diese Zeichen einfach an der gewünschten Stelle innerhalb von date("") ein, wie bei diesem Beispiel: date("d.m.Y")! Die Punkte dienen hier lediglich als kosmetisches Beiwerk. Nicht alle Zeichen lassen sich jedoch verwenden, deshalb würde ich mich auf Leerstellen und den Punkt beschränken. Im Zweifelsfalle lautet die Devise: Probieren geht über Studieren. Du möchtest angeben, wie viele Tage der aktuelle Monat hat? Du willst den aktuellen Monat dabei ausschreiben (auf Englisch). Dann notierst du beispielsweise folgenden Code (auf einer Zeile): echo "Der " . date("F") . " hat " . date("t") . " Tage.";
Beachte, dass du hierbei wieder mit einer Verkettung arbeiten musst. Ansonsten wird die Funktion nicht aktiviert.
Mit den entsprechenden Schaltern gelingt dir die gewünschte Schreibweise im Nu.
114
Schau dir zum Vergleichen meine Beispieldatei an. Du findest sie im Ordner kapitel04 unter dem Namen datum2.php.
Wer hat an der Uhr gedreht?
Wer hat an der Uhr gedreht? Niemand, hoffe ich! Zumal die Zeitanzeige in PHP sowieso digital erfolgt. Das Drehen an irgendwelchen Zeigern ist schon aus diesem Grund gar nicht möglich. Wie zeigt man die Uhrzeit an? Auch hier hilft uns die Funktion date() aus der Patsche. Und wieder brauchen wir – du ahnst es sicher längst – ganz bestimmte Schalterchen für diesen Zweck. Die wichtigsten Schalter lauten H (Stunden im 24-Stunden-Format), i (Minuten mit führender Null von 00 bis 59) und s (Sekunden von 00 bis 59). Wenn du die Stunden, Minuten und Sekunden anzeigen möchtest, schreibst du: echo date("H:i:s");
Wie du siehst, arbeite ich auch hier mit Formatierzeichen. Diesmal verwende ich den für die Uhrzeit typischen Doppelpunkt (:).
Alle Uhrzeitschalter im Blick In der folgenden Tabelle habe ich dir alle Schalter zur Ausgabe der Uhrzeit aufgeschrieben. Tröstlich – es sind im Gegensatz zum Datum viel weniger: Schalter a A h H i s
Erklärung am oder pm AM oder PM Stunde im 12-h-Format Stunde im 24-h-Format Minuten von 00 bis 59 Sekunden von 00 bis 59
Beispiel am AM 1 bis 12 1 bis 24 04 12
Die Zeit vergeht … ein kleines Beispiel Zum Ausprobieren schlage ich ein kleines Beispieldokument vor. Nenne es uhrzeit.php. Ich zeige dir lediglich den Teil zwischen den Tags , der Rest ist ganz normales HTML. Beim Aufruf dieser Seite war es genau ...
115
Kapitel
Spaß mit Datum und Uhrzeit
4 Für die genaue Uhrzeit musst du ständig auf den Reload-Button klicken.
Ist PHP dafür gedacht, um ständig die ganz aktuelle Uhrzeit auszugeben? Und zwar sekundengenau? Die Antwort lautet: Nein! Denn dann müsste das Skript im Sekundentakt immer wieder aufgerufen werden. Die Seite müsste also sechzigmal pro Minute vom Server abgerufen und an den Browser geschickt werden. Das ist nicht Sinn der Sache, denn dann wäre der »Arbeitsaufwand« (die »Last«) für den Server zu groß. Für solche Aufgaben bietet sich dagegen die Skriptsprache JavaScript an. Diese läuft schließlich direkt im Browser.
Pause muss sein: Die if-elseEntscheidungsstruktur Wenn, ja wenn das Wörtchen wenn nicht wär’ … Dann wär’ das Leben nur halb so schwer. Stoßen deine Eltern, Tanten oder Bekannten auch manchmal solche hilflosen Drohungen aus wie: »Wenn du nicht gleich dein Zimmer aufräumst, gibt es kein Fernsehen« oder »Wenn du nicht sofort deine Hausaufgaben machst, darfst du nicht runter auf die Straße«? Egal ob »unerfreuliche Gegenwart« oder »düstere Vergangenheit«. In diesem Buch sehen wir alles von der optimistisch-heiteren Seite! Glaube es oder nicht: Mit diesen »Beweisen erzieherischer Intoleranz« haben dir deine Erzeuger ganz unbewusst wertvollen Anschauungsunterricht zur Informatik erteilt. Es geht um die Entscheidungsstrukturen.
Die Entscheidungsstruktur if-else Nehmen wir doch einmal das »Fernseh-Beispiel«. Formulieren wir es streng logisch: »Wenn du dein Zimmer aufräumst, gibt es Fernsehen, sonst gibt es kein Fernsehen«. 116
Pause muss sein: Die if-else-Entscheidungsstruktur Die dazugehörige Schreibweise in der Programmiersprache PHP sieht folgendermaßen aus – die Betonung liegt hierbei auf wenn und sonst: Wenn (Zimmeraufräumen) { Fernsehen; } sonst { kein Fernsehen; }
Zugegeben, in der Programmiererei »spricht man« Englisch. Aus wenn wird if und aus sonst else. Und da man beim Programmieren schlecht mit »Fernsehen« und »kein Fernsehen« arbeiten kann, fassen wir es allgemeiner. Nennen wir die beiden Fälle Fall A und Fall B. Dann sieht unser Grundgerüst folgendermaßen aus: if (Bedingung) { Fall A; } else { Fall B; }
Mit anderen Worten: Es wird eine Bedingung geprüft. Wenn diese Bedingung wahr ist, tritt Fall A in Kraft. Sonst – also wenn die Bedingung nicht wahr ist – führt das Programm Fall B aus. Übrigens kann der sogenannte else-Zweig auch weggelassen werden. Dann sieht die if-Konstruktion vom Schema her so aus: if (Bedingung) { Fall A; }
Es genügt also, ganz einfach die Bedingung zu prüfen. Von der Logik her macht das Sinn. Auch beim »Fernseh-Beispiel« weiß Tochter oder Sohn ganz genau was ihr oder ihm blüht, wenn er das Zimmer nicht aufräumt.
Geschweifte Klammern: Wichtiges Know-how Sicher fällt dir schon an diesem Beispiel ein interessantes »Detail« ins Auge. Zusammengehörende Ausdrücke wie bei diesen if-Strukturen werden in PHP in der Regel durch ein Paar geschweifter Klammern zusammengehalten { }. Dadurch fasst du diese Ausdrücke zu einem sogenannten Block 117
Kapitel
4
Spaß mit Datum und Uhrzeit zusammen. Dabei gilt: Die Zeile mit der Klammer wird ausnahmsweise nicht mit einem Semikolon abgeschlossen. if (Bedingung) {
Ich empfehle dir sehr die von mir verwendete Schreibweise: Schau dir das Beispiel an. Die öffnende geschweifte Klammer setzt du direkt nach einem Leerzeichen an das Ende der Zeile. So wirst du auch besser daran erinnert, an dieser Stelle kein Semikolon zu setzen. Der schließenden geschweiften Klammer spendierst du dagegen eine eigene Zeile. Auch hier ist kein Semikolon erlaubt: }
Ich habe noch einen ganz heißen Tipp für dich: Immer wenn ich eine öffnende geschweifte Klammer schreibe, setze ich sofort das Gegenstück. Egal, wie viele Codezeilen ich später noch dazwischen schreiben muss. Warum? So habe ich immerhin schon einmal den Block geschlossen. Denn das Vergessen einer schließenden Klammer ist eine häufige Fehlerursache! Mit meinem Trick ersparst du dir oft stundenlanges Suchen. Hier noch einmal in Kurzform: Wenn du eine öffnende Klammer schreibst, drückst du ein paar Mal auf [Enter] und notierst danach die schließende Klammer. Sicher hast du es längst bemerkt: Passagen innerhalb von geschweiften Klammern werden eingerückt. Dabei tippst du vor den einzurückenden Zeilen 2–4 Leerzeichen. Mehr zu den Einrückregeln erfährst du in einer PDF-Datei auf der Buch-CD unter dokumente/code_einrueckung und ganz ausführlich auch im Nachfolgeband »PHP und MySQL Praxisbuch für Kids« im Kapitel 2.
Wir machen … Mittagspause Grau ist alle Theorie (und zwar selbst bei Farbfernsehen). Deshalb machen wir gemeinsam eine Pause – eine Mittagspause! Und damit es auch alle Besucher deiner Website merken, teilst du es ihnen einfach mit.
118
Das folgende Beispiel soll zwischen 12:00 Uhr und 13:00 Uhr (genauer zwischen 12:00 Uhr und 12:59 Uhr und 59 Sekunden) den Text anzeigen: »Wir machen Mittagspause«. Ansonsten soll der Text »Willkommen auf unserer Seite« erscheinen. Wie geht das? Ganz einfach! Du brauchst lediglich die Funktion date() mit dem Schalter H. Schließlich verrät dir date("H") ganz genau, »was die Stunde geschlagen hat«.
Pause muss sein: Die if-else-Entscheidungsstruktur Hier mein Musterbeispiel, welches ich pause.php nenne. Ich zeige dir den wichtigsten Teil der Datei: Pause zwischen 12:00 und 13:00 Uhr!
Zwischen Zwölf und Eins macht jeder seins … Mittagspause!
Du kannst gerne mit dem Musterbeispiel von der Buch-CD vergleichen. Schaue in den Ordner kapitel04.
So funktioniert das Beispiel Jetzt schauen wir uns die Funktionsweise dieses Beispiels einmal genauer an. Zuerst schreibst du das Schlüsselwort if und tippst ein Leerzeichen. In den runden Klammern wird nun die Bedingung auf ihren Wahrheitswert überprüft. Die Funktion date("H") ist dir vertraut, doch was hat das doppelte Gleichheitszeichen an dieser Stelle verloren? Das doppelte Gleichheitszeichen (==) ist der sogenannte Vergleichsoperator. Aus dem Mathematikunterricht kennst du das einfache Istgleich. Das gibt es in PHP auch, wie ich dir im vorigen Kapitel bewiesen habe. Das einfache Istgleich (=) ist jedoch nur der Zuweisungsoperator. Mit $vorname = "Katja"; hast du der Variablen $vorname z. B. den String Katja zugewiesen. Damit es nicht zu Verwechslungen kommt, hat man als Vergleichsoperator in PHP deshalb das doppelte Istgleich (==) gewählt. Achtung aufgepasst! Verwechsle die beiden Operatoren deshalb auf keinen Fall, du musst zum Vergleichen unbedingt das doppelte Istgleich (==) verwenden! 119
Kapitel
4
Spaß mit Datum und Uhrzeit Der Vergleich liest sich also so: Wenn es wahr ist, dass die Uhrzeit der Zahl 12 entspricht, dann wird die nächste Zeile ausgeführt. Diese Zeile macht nichts weiter, als den Text »Wir machen Mittagspause« auszugeben. Tipp: Falls es bei dir zufällig nicht gerade 12 Uhr ist, kannst du diesen Wert probeweise verändern. (Oder du stellst einfach mal die Uhr deines PCs um.) Wenn dieser Vergleich jedoch nicht wahr ist? Dann wird der else-Zweig ausgeführt. Und dieser gibt lediglich den Satz »Willkommen auf unserer Seite!« aus. Eigentlich ganz einfach, oder? Beachte unbedingt die korrekte Klammersetzung. Wir haben es in diesem Beispiel mit zwei Blöcken zu tun. Zum einen mit dem if-Block, zum anderen mit dem else-Block. Wie wichtig die richtige Klammersetzung ist, kannst du durch ein Experiment feststellen. Entferne doch zur Probe einmal die Klammer hinter else. Bei mir ist das in Zeile 15. Nach dem erneuten Aufruf der Seite im Browser bekommst du eine Fehlermeldung. Diese weist jedoch auf Zeile 17 hin. Klar, denn PHP wusste ja nicht, dass du in Zeile 15 einen Block öffnen wolltest. Das Programm meckert deshalb die schließende Klammer in Zeile 17 an! Falls es bei dir öfter zu solchen Problemen kommt, empfehle ich dir noch einmal die »heißen Hundetipps« von den Vorseiten: Setze zur öffnenden geschweiften Klammer stets sofort das schließende Pendant! Übrigens: Gute Editoren wie PSPad, Notepad++ oder Aptana Studio heben die dazugehörige schließende Klammer farblich hervor, sobald du die öffnende markierst! Achte einmal darauf!
Vergleichsoperatoren im Überblick Kompliziert? Eigentlich nicht! Mit dem doppelten Istgleich testet man auf Gleichheit. Das ist jedoch noch nicht alles. Höchste Zeit, dass ich dir nun auch die anderen Vergleichsoperatoren zeige. Operator == != > < >=
Interessant ist vor allem die vierte Zeile. Hier habe ich zwei Bedingungen mit dem Und-Operator (&&) miteinander verknüpft. Nur wenn beide Teilausdrücke wahr sind, wird der Satz »Wir machen Mittagspause« ausgegeben. Beide Teilausdrücke? Richtig! Es muss zum einen wahr sein, dass die Stunde größer oder gleich 11 ist. Damit wären zuerst einmal 11, 12, 13 usw. zugelassen. Der nächste Teilausdruck beschränkt den Bereich jedoch auf alle Werte unter 13. Hier wird verlangt, dass die Stunde kleiner 13 ist. Mit anderen Worten: Nur wenn die Stundenzahl zwischen 11 und 13 liegt, ist die Bedingung wahr. Um noch genauer zu sein: Die Zeitspanne muss zwischen 11:00 Uhr und 12:59 Uhr liegen, da die 13 selber nicht erreicht werden darf. Probiere es aus!
Wo gibt’s denn so was? Zwei Pausen am Tag! Fehlt zum Schluss noch die Oder-Verknüpfung. Diese sorgt schließlich dafür, dass mindestens ein Teilausdruck wahr sein muss. Was kompliziert erscheint, wird mit dem nächsten Beispiel sicher ganz einfach! Nehmen wir unser »Mittagspausen-Beispiel«. Wie wäre es mit zwei Mittagspausen? Die eine recht früh von 11:00 bis 11:59 Uhr. Die andere dagegen von 14:00 bis 14:59 Uhr, praktisch als Siesta. Da hilft folgende Vergleichs-Konstruktion. if (date("H") == 11 || date("H") == 14) { echo "Wir machen Mittagspause."; }
Dank des Oder-Operators zeigt die Seite den »Mittagspausen-Satz« nun in den oben genannten zwei »Zeitfenstern« an. Zum einen, wenn es zwischen 11:00 und 11:59 Uhr ist; zum anderen aber auch dann, wenn der Zeiger zwischen 14:00 und 14:59 »pendelt«. Vergleiche mit der Datei oder.php, wo ich diese Änderung eingebaut habe. 122
Der Tag vergeht: Zwischentöne mit elseif
Der Tag vergeht: Zwischentöne mit elseif Eltern haben ja manchmal Phantasie. Sie versuchen, Tochter oder Sohn durch unterschiedliche »Vergütungsmodelle« zu motivieren. Nehmen wir zum Beispiel das Taschengeld. Wenn du sofort das Zimmer aufräumst, wird das mit 3 Euro Taschengeld honoriert. Räumst du das Zimmer dagegen später auf, gibt es immerhin noch 2 Euro. Wenn du das Zimmeraufräumen jedoch vergisst, gibt es überhaupt kein Taschengeld. Auch mit diesem Modell haben uns unsere Erzeuger wieder eine wunderbare Informatik-Lektion erteilt! Um das Beispiel darzustellen, müssen wir unsere if-else-Konstruktion um einen weiteren Zweig ergänzen.
Einbau eines elseif-Zweigs Und schon sind wir beim sogenannten elseif-Zweig angelangt. Der elseif-Zweig ist immer dann interessant, wenn man mehrere konkrete Fälle voneinander unterschieden möchte. Das »Taschengeld-Beispiel« lässt sich folgendermaßen symbolisieren: if (Zimmeraufräumen sofort) { 3 Euro Taschengeld; } elseif (Zimmeraufräumen später) { 2 Euro Taschengeld; } else { kein Taschengeld; }
Ziemlich praktisch und raffiniert, findest du nicht? Dabei können sogar noch mehr elseif-Zweige eingebaut werden. Der nächste elseif-Zweig wird nur ausgeführt, wenn die Prüfung im übergeordneten Zweig nicht wahr war. Also wenn das if oder elseif nicht zum Erfolg geführt hat. Auch hier gilt: Der else-Zweig ganz am Schluss kann wieder weggelassen werden.
123
Kapitel
4
Spaß mit Datum und Uhrzeit
Tageszeitabhängige Begrüßung Wie wäre es mit einem sinnvollen Beispiel? Schreibe doch einmal ein Skript, welches die Besucher je nach Uhrzeit mit einem anderen Spruch begrüßt. Von 0:00 Uhr bis 10:59 Uhr soll die Begrüßung lauten: »Guten Morgen!«. Von 11:00 Uhr bis 14:59 Uhr dagegen »Mahlzeit!«. Bis 16:59 Uhr schlage ich »Willkommen zur Kaffeezeit!« vor. Ansonsten (also wenn keiner der obigen Fälle zutrifft), soll das Skript »Guten Abend« einblenden. Das ist ein Fall für elseif, und zwar gleich in doppelter Verpackung. Schau dir mein Beispiel an, ich zeige dir wieder den wichtigen Teil zwischen . Ich habe das Dokument willkommen.php genannt.
Mahlzeit! Mit elseif wird die Entscheidungsstruktur erweitert.
Auch hier noch ein interessantes Syntax-Detail: Wenn du mit else oder elseif arbeitest, notierst du dieses Schlüsselwort und die dazugehörige öffnende geschweifte Klammer am besten in der gleichen Zeile wie die schließende geschweifte Klammer des vorhergehenden Blocks. Das spart Platz und erhöht die Übersicht. 124
Feldvariablen: Wochentage aufschreiben
Feldvariablen: Wochentage aufschreiben Zurück zur Funktion date(), zurück zu den Wochentagen. Blättere ruhig ein paar Seiten zurück und schaue dir die Tabelle an. Wenn du den Wochentag als Namen ermitteln möchtest, verwendest du den Schalter l: date("l")
Die ganze Sache hat einen Haken: Der Wochentag wird in Englisch ausgegeben, in der Schreibweise Sunday, Monday, Tuesday usw. Für pfiffige englischkundige Schüler und Fachbuchautoren ist das kein Problem. Doch ob Otto Normalsurfer immer die englischen Wochentage kennt? Es wäre doch schön, wenn man die Wochentage auf Deutsch anzeigen könnte!
Wochentage auf Deutsch ausgeben Richtig! Man könnte für jeden Wochentag eine eigene Variable verwenden! Dann könnte man eine if-else-Kontrollstruktur schreiben, die aus Monday Montag, aus Tuesday Dienstag usw. macht. Es geht aber auch anders! Warum eine Variable für jeden Tag? Eine Variable für alle Tage ist viel besser! Eine sogenannte Feldvariable, ein Array! Wenn man mehr als einen Wert in einer Variablen speichern möchte, kommen die sogenannten Feldvariablen ins Spiel. Eine Feldvariable bildet ein »Feld« zusammengehöriger Elemente. Stelle es dir vor wie eine Fußballmannschaft oder wie die Schulklasse. Die Feldvariable ist der 1. FC Pokalsieg oder die Klasse 8c. Die einzelnen »Elemente« sind die Spieler bzw. Schüler der Klasse.
Feldvariablen werden Array genannt Feldvariablen werden auch als Arrays bezeichnet, als Werteliste. Das Wort Array betonst du auf der letzten Silbe. Das »A« am Anfang wird kurz gesprochen. Die Syntax wiederum sieht folgendermaßen aus: $Variablenname[Index-Wert]
125
Kapitel
4
Spaß mit Datum und Uhrzeit Im Klartext: Zuerst notierst du den Variablennamen wie gewohnt. Dann setzt du ohne Leerzeichen ein paar eckige Klammern. Doch wie unterscheidet man die einzelnen Elemente voneinander? Wie macht man kenntlich, dass es sich um Fußballspieler 1 oder Schüler 5 handelt? Das leistet der sogenannte Index-Wert. Dieser wird in eckigen Klammern notiert. Der Index-Wert ist eine Art Zähler zur Durchnummerierung! Er wird auch als key (Schlüssel) bezeichnet. Ganz wichtig: Der erste Wert in einem Array trägt per Voreinstellung die Schlüssel-Nummer 0. Der erste Index-Wert lautet also 0 und nicht 1. Weil das so wichtig ist, wiederhole ich es noch einmal: In einem Array beginnt die Zählung bei 0. Der 8. Spieler der Fußballmannschaft würde also den Index-Wert 7 tragen! Fassen wir zusammen: Arrays, die Wertelisten, bestehen aus mehreren Werten. Diese werden von PHP intern durchnummeriert. Der entsprechende Zähler nennt sich Index-Wert oder auch Schlüssel (key). Der key (Zähler) beginnt in der Voreinstellung stets bei 0.
Die Tage als Array Zurück zu unseren Wochentagen! Schau dir die Sache am Beispiel an! Die Variable selbst nennen wir $tag. Die einzelnen Wochentage werden durchnummeriert. Wir fangen beim Sonntag an. Der Sonntag bekommt die 0 (bei 0 beginnen!) und wird so notiert: $tag[0]. Der Montag sieht so aus $tag[1] usw. usf. Liste einfach alle Tage auf und weise die entsprechenden Werte zu. Als Test gibst du den Donnerstag mit der Sprachanweisung echo aus. Ich habe mein Dokument wochentage.php genannt. Ich zeige dir hier den PHP-Teil.
126
Feldvariablen: Wochentage aufschreiben Beachte, dass ich hier mit einem Kommentar arbeite (Zeichen //), um das Skript direkt im Quellcode erläutern zu können.
Da Sonntag Tag 0 ist, muss der Donnerstag Tag 4 sein.
Welcher Tag ist heute? Das bisherige Skript reißt dich sicher nicht gerade zu Begeisterungsstürmen hin. Mich auch nicht! Um lediglich das Wort Donnerstag auszugeben, hätten wir uns den Stress mit dem Array auch ersparen können. Viel interessanter ist der heutige Wochentag, als der Tag, an dem du das Buch liest. Wie ermittelst du mit PHP den Wochentag? Ganz einfach: Dafür sorgt die Funktion date() im Zusammenspiel mit dem Schalter w: date("w"). Das Schöne an date("w") ist, dass am Sonntag 0 und am Samstag 6 zurückgegeben wird. Was für ein Zufall, denn das passt ganz hervorragend für unsere Zwecke. Schließlich beginnt die Zählung bei Arrays ja auch bei 0! Mit dem folgenden Skript kannst du den aktuellen Wochentag auf Deutsch dynamisch im Dokument ausgeben. Vergleiche einfach mit der Datei heute.php aus dem Ordner kapitel04.
Das Prinzip ist einfach! Ich ermittle die »tagnummer« mit Hilfe der Funktion date("w") und speichere sie in der gleichnamigen Variablen. Diese Zahl übergebe ich der Feldvariablen $tag[] in den eckigen Klammern. Heraus kommt … der aktuelle Wochentag.
127
Kapitel
4
Spaß mit Datum und Uhrzeit
Arrays die Zweite: Es geht auch kürzer! Bei der bisherigen Array-Schreibweise handelt es sich um die sogenannte Langform. Da Programmierer faul sind, mögen sie besonders die alternativen Kurzformen. Die sieht für das Wochentage-Array folgendermaßen aus:
Nach dem Schlüsselwort array folgt die Werteliste. Diese notierst du in runden Klammern. Jeder Wert wird vom nächsten durch ein Komma getrennt. Da es sich um Strings handelt, notierst du die Tage selbstverständlich in Gänsefüßchen. Beachte, dass es sich trotz des Umbruchs im Buch um eine Zeile handelt! Wenn du aus Platzgründen ebenfalls einen Umbruch einbauen möchtest, dann nur nach einem Komma. Zerreiße keinesfalls Text, der innerhalb von Gänsefüßchen notiert wurde. Das Komma hat eine besondere Bedeutung. Alle Werte werden durch Komma voneinander getrennt. Die Zuweisung der keys (Index-Werte) erfolgt dabei automatisch hintereinander. Du musst sie nicht extra notieren. Das Beispiel findest du unter dem Namen heutekurz.php.
Array-Elemente zählen Wie viele Tage hat die Woche? Wie viele Schüler befinden sich in deiner Klasse? Zähle die Array-Elemente doch einfach einmal durch! Stelle es fest mit der Funktion count(). Und wie geht das nun mit count()? Die Funktion funktioniert ganz einfach: In runden Klammern übergibst du Namen des Arrays. Und zwar ohne irgendwelche eckigen Klammern. Schließlich beziehst du dich nicht auf ein einziges Element. Das gesamte Array wird »ausgewertet«. 128
Assoziativ: Monatsnamen als Array
Du findest das Beispiel zum Vergleich unter dem Namen count.php.
Die Funktion count() zählt die Elemente eines Arrays.
Keine Bange, die Funktion count() zählt korrekt. Du musst dir also keine Sorgen machen, dass der Index-Wert 0 irgendeinen Einfluss hat. Wenn die Fußballmannschaft ein Array darstellen würde, bekäme der elfte Spieler zwar den Index-Wert 10. Trotzdem würde beim Zählen mit count() natürlich korrekt die 11 ermittelt.
Assoziativ: Monatsnamen als Array Das mit den Arrays ist eine ganz feine Sache. Gewiss. Doch nicht immer sind diese Index-Nummern der Weisheit letzter Schluss. Nehmen wir als Beispiel ein paar europäische Städte. Diese sollen in einem Array namens $hauptstadt festgehalten werden. Nach der »klassischen« Index-Variante sieht das folgendermaßen aus: $hauptstadt[0] $hauptstadt[1] $hauptstadt[2] $hauptstadt[3]
= = = =
"Berlin"; "Wien"; "Warschau"; "Paris";
Doch unter $hauptstadt[1] kannst du dir sicher nicht viel vorstellen. Du musst dir halt merken, dass sich dahinter Wien verbirgt. Je mehr Hauptstädte das Array enthält, desto komplizierter wird die ganze Geschichte.
129
Kapitel
4
Spaß mit Datum und Uhrzeit Logisch, denn unter nackten Zahlen kann sich ein Normalsterblicher – von ein paar Mathematik-Genies abgesehen – wenig vorstellen. Anders ausgedrückt: Mit bloßen Zahlen kann man wenig verbinden, wenig assoziieren. Viel praktischer ist es, wenn man diese Index-Nummern einfach durch eigene Werte ersetzt. Durch Werte, mit denen man etwas assoziieren kann. Was liegt bei Hauptstädten näher, als die im Web gebräuchliche Länderkennung zu verwenden? In unserer »assoziativen Variante« sieht das Array folgendermaßen aus: $hauptstadt["DE"] $hauptstadt["AT"] $hauptstadt["PL"] $hauptstadt["FR"]
= = = =
"Berlin"; "Wien"; "Warschau"; "Paris";
In assoziativen Arrays wird als key statt der Index-Nummer ein ganz eigenes Schema erzeugt. Dieses darfst du dir (fast) frei ausdenken. Es kann sich bei diesen »Ersatz-Schlüsseln« um Strings aber auch um Zahlen handeln. Der key in assoziativen Arrays wird – von Ausnahmen abgesehen – innerhalb von Gänsefüßchen notiert.
Einen einzelnen Index-Wert ausgeben Du möchtest einen einzelnen Index-Wert ausgeben? Kein Problem! Das Prinzip ist genau das gleiche wie bei den »klassischen Arrays« mit Zahlen als Index-Wert. Als zusätzlichen Test kannst du gleich noch die Elemente im Array durchzählen. Auch hier arbeitet count() wie gewohnt. Hier zeige ich dir den wichtigsten Teil meiner PHP-Datei hauptstadt.php.
130
… und wieder die Kurzform
Bei assoziativen Arrays kannst du dir den Schlüssel frei ausdenken.
Die Wirkungsweise ist klar? In der ersten echo-Zeile ist eigentlich nur die Ausgabe von $hauptstadt["PL"] interessant. Damit daraus aber eine ganze Wortgruppe wird, verknüpfe ich den String Polen: mit $hauptstadt["PL"]. Am Schluss sorgt ein Zeilenumbruch dafür, dass die nächste Zeile auch auf einer neuen Zeile steht. Und das Zeichen \n kümmert sich darum, dass auch im Quelltext ein Zeilenumbruch erfolgt. In der nächsten Zeile zähle ich die Elemente des Arrays durch.
… und wieder die Kurzform Übrigens gibt es auch bei den assoziativen Arrays eine Lang- und eine Kurzform. Auch bei dieser Kurzform arbeitet man mit runden Klammern. Davor notierst du wieder das Schlüsselwort array. Zusätzlich kommt jedoch das Zeichen »Daraus folgt« zum Einsatz. Das sieht so aus: =>. Zum Vergleich zeige ich dir hier die Kurzform des obigen Beispiels:
Die lange »Array-Zeile« liest sich wie folgt: Key DE daraus folgt Berlin, Key AT daraus folgt Wien usw. usf. Vergleich mit der Datei hauptkurz.php.
131
Kapitel
4
Spaß mit Datum und Uhrzeit
Den Monat ausgeben Zurück zu unserem Datums-Beispiel. Wir wollen diesmal den aktuellen Monat komplett auf Deutsch ausgeben. Damit es übersichtlich bleibt, setze ich ein assoziatives Array in der Langform ein: Als Schlüssel verwende ich die ausgeschriebenen englischen Monatsnamen. Warum? Weil die Funktion date("F") schließlich die Monatsnamen ausgeschrieben ermittelt. Dann brauche ich diesen englischen Monatsnamen nur noch in der Variablen $monatsname zu speichern. Diesen nutze ich als Key. Und schon habe ich den deutschen Monatsnamen. Hier das entsprechende Skript:
Die Monatsnamen werden durch ein assoziatives Array übersetzt.
132
Vergleiche mit der Datei monatsnamen.php im Ordner kapitel04.
Schlussbemerkung
Schlussbemerkung Nicht schlecht, Herr Specht: Du hast dich ein gutes Stück qualifiziert auf dem Weg zum »richtigen Programmierer«: Schließlich zählen die Entscheidungsstrukturen und die Arrays zu den wichtigsten Programmiergrundlagen. Und das »Spielen« mit Datum und Uhrzeit hat hoffentlich ein wenig darüber hinweggetröstet, dass der Stoff nicht immer ganz einfach ist.
Zusammenfassung 0 Du weißt, dass du mit der Funktion date() das Datum ermitteln kannst. Mit den richtigen »Schaltern« und mit Formatierzeichen wie Punkt oder Leerzeichen gelingt fast jede gewünschte Ausgabe. Für Tag und Monat ohne führende Null und das Jahr mit zwei Stellen schreibst du z. B. echo date("j.n.y"); 0 Auch die Uhrzeit kann mit der Funktion date() ganz einfach ermittelt werden. Wenn du die Stunden, Minuten und Sekunden anzeigen möchtest, schreibst du z. B.: echo date("H:i:s"); 0 Du hast die if-else-Entscheidungsstruktur kennengelernt. Es wird eine Bedingung auf Wahrheit geprüft. Wenn diese Bedingung wahr ist, tritt Fall A in Kraft. Sonst – also wenn die Bedingung nicht wahr ist – führt das Programm Fall B aus: if (Bedingung) { Fall A; } else { Fall B; }
0 Du kennst die wichtigsten Vergleichsoperatoren wie das Istgleich (==), die Zeichen Größer als (>), Kleiner als (=) und Kleiner gleich ( (Daraus folgt) arbeiten. 0 Du kennst die Funktion count(), mit der sich die Elemente eines Arrays zählen lassen.
Ein paar Fragen … 1. Mit welcher Funktion kannst du Datum und Uhrzeit darstellen? Nenne nur die Funktion ohne Schalter oder Formatierzeichen. 2. Was bedeutet if-else und wofür brauchst du diese Schlüsselworte? 3. Welches Zeichen verwendet man, wenn man zwei Elemente auf Gleichheit testen will? 4. Wie sieht der Vergleichsoperator aus, der auf Ungleichheit prüft? 5. Mit welcher Zahl beginnt die Zählung bei indizierten Arrays? 6. Mit welcher Funktion kannst du die Elemente eines Arrays zählen?
134
… und ein paar Aufgaben
… und ein paar Aufgaben 1. Schreibe ein PHP-Dokument, welches einen Satz nach diesem Muster ausgibt: »Heute ist Tag 5 des 3. Monats in 2009«. Dabei sollen natürlich der aktuelle Tag, der aktuelle Monat und das aktuelle Jahr eingesetzt werden. Speichere das Dokument unter dem Namen heuteist.php. 2. Spaß muss sein. Erzeuge eine Seite, die den Surfer an allen Werktagen normal begrüßt. Nur am Sonntag soll der Text ausgegeben werden: »Am Sonntag ist das Internet leider geschlossen«. Nenne das Dokument sunday.php. (Tipp: Nutze die Entscheidungsstruktur für diesen Zweck.) 3. Erstelle ein Dokument, welches das Datum in folgender freundlicher Schreibweise ausgibt: »Heute ist Mittwoch, der 11. Februar 2011«. (Gemeint ist das zum Zeitpunkt des Lesens aktuelle Datum!) Im Klartext: Sowohl der Wochentag als auch der Monatsname sollen in der deutschen Schreibweise ausgegeben werden. Der Dateiname soll tagmonat.php heißen.
135
5 Seiten mit Passwort schützen Webseiten so sicher wie die Bank von England? Solange es Hacker gibt, wird das wohl immer ein Traum bleiben. Doch etwas Sicherheit ist möglich: Erzeuge einen Passwortschutz, der zumindest von »Normalsterblichen« schwer zu knacken sein wird. Sorge dafür, dass bestimmte Informationen nur nach Eingabe eines Passwortes angezeigt werden. Schließlich stehen die Passwörter selber im PHP-Code, werden also dem Betrachter nicht angezeigt. Beste Gelegenheit, gleich ein paar weitere wichtige PHP-Techniken zu trainieren. Deshalb lernst du in diesem Kapitel: $ wie du Daten aus einem Formular mit post bzw. get verschickst $ wie du Daten aus Formularfeldern ausliest und verarbeitest $ wie du Bedingungen nicht nur mit if-else, sondern auch mit der sogenannten switch-Anweisung überprüfen kannst $ wie du Variablen auf Vorhandensein testest und Fehler vermeidest $ wie du externe Dateien mit include einbindest
137
Kapitel
5
Seiten mit Passwort schützen
Formular für das Passwort Auf los geht’s los! Erstelle eine Datei mit einem Passwortschutz. Wer das Passwort kennt, sieht die geheimen Inhalte. Wer nicht, hat einfach Pech gehabt. Doch wie fragen wir das Passwort ab? Ganz einfach, mit einem Formular! Für das nächste Kapitel empfehle ich gute HTML-Formularkenntnisse. Falls du hier noch Lücken hast, schlage einfach noch einmal im 1. Kapitel nach. Immerhin haben wir dort schon eine erste Formularseite erstellt.
Schreibe ein Formular Ich zeige dir Schritt für Schritt, wie das Beispiel aufgebaut wird. Mache einfach mit. Das Beispiel nennst du passwort.php. Hier siehst du die erste Version dieser Datei, ich präsentiere dir diesmal das komplette Dokument. Kennen Sie das Passwort? <meta http-equiv="content-type" content= "text/html; charset=utf-8"> Wie lautet das Passwort?
Zum Überprüfen: Du findest mein Beispiel in einem Unterordner namens version1.
138
Senden mit Methode: post oder get?
Die Seite erzeugt ein Formular mit einem Eingabefeld. Mehr nicht!
Zur Erinnerung: Das Formular wird durch eingeleitet und mit geschlossen. Das Formular selber besteht aus folgenden Zeilen:
Schau dir die zweite Formularzeile an, denn hier entsteht das Texteingabefeld. Dafür sorgt die Anweisung . Ganz wichtig ist für unsere Zwecke der Name des Feldes. Dafür habe ich mir die Bezeichnung pass ausgedacht. (So kurz wie möglich!) Die Zuweisung erfolgt durch das Attribut-Werte-Paar name="pass". Das Formular selber wird durch Klick auf den Submit-Button abgeschickt. Damit hier die Aufschrift Senden prangt, verwende ich das Attribut-WertePaar value="Senden". Tja, und wenn du nun auf den Button SENDEN klickst? Dann passiert erst einmal überhaupt nichts! Oder passiert doch etwas?
Senden mit Methode: post oder get? Das, was mit einem Formular geschieht, wird direkt im einleitenden -Tag festgelegt. Schau dir dieses Tag und seine Attribute etwas genauer an:
139
Kapitel
5
Seiten mit Passwort schützen
Das Attribut action Das Attribut action kümmert sich um die »Formular-Aktion«. Action ist also dafür verantwortlich, was mit dem Formularinhalt passiert. Und was passiert damit? In unserem Beispiel besteht die Aktion lediglich aus dem Dateinamen passwort.php. Im Klartext: Die Formulardatei verschickt den Inhalt an sich selbst! Nanu, ist das denn richtig? Ja, genau das ist beabsichtigt! Beachte bitte, welchen Dateinamen du deiner Datei verpasst hast. Falls du von meinem Vorschlag abgewichen bist, musst du den Namen eintragen, den du für deine Datei gewählt hast! Im Zweifelsfall lässt du das Gänsefüßchenpaar einfach leer. Dann wird die aktuelle Datei aufgerufen: und du bist alle Sorgen los!
Das Attribut method Das zweite wichtige Attribut ist das Attriut method. Es handelt sich dabei praktisch um die Versende-Methode. Es gibt zwei Werte, die du verwenden kannst. Das sind zum einen der Wert get und zum anderen der Wert post. Was ist der Unterschied? Mache den Test! Probiere doch einmal den Wert get aus. Ersetze post durch get und rufe das Formular über den Webserver auf. Tippe einen Wert in das Formularfeld und klicke auf SENDEN. Der Wert wird einfach nach einem Fragezeichen an die Adresse (an die URL) angehängt. Dort steht pass= und dahinter das, was du in das Texteingabefeld getippt hast.
Völlig ungeignet: method="get" hängt
die Werte an die URL.
Für unsere Passwortabfrage ist das völlig ungeeignet. Es sei denn du möchtest, dass das Passwort für alle sichtbar übertragen wird. 140
Ausgabe des Passworts Ich empfehle generell die Verwendung von post. Denn nur bei der Verwendung des Wertes post wird der Formularinhalt im Hintergrund weitergeleitet. Und tatsächlich verwendet man in der Praxis bei Formularen in der Regel den Wert post. Der Wert get dagegen kommt seltener vor. In Ausnahmefällen ist method="get" doch interessant. Denn nur so ist es möglich, dass der Benutzer auch einen Bookmark (Lesezeichen) auf eine Seite setzen kann. Die Formulardaten werden dabei mit im Lesezeichen gesichert, schließlich gehören sie dann zur URL dazu.
Ausgabe des Passworts Ich fasse zusammen: Wir fangen das Passwort in unserem Formular auf. Der Formularinhalt (also das Passwort) wird im Hintergrund an das Dokument passwort.php geschickt. Nach Klick auf SENDEN ruft sich die Seite praktisch erneut auf. Das alles ist inzwischen sicher klar. Jetzt steht das Passwort zur Verfügung. Doch wie kommst du an das Passwort heran?
Formularwerte als assoziatives Array Im vorigen Kapitel hatte ich dich mit den sogenannten assoziativen Arrays gequält. Erinnerst du dich? Die Mühe war nicht umsonst, denn jetzt trägt dieses Wissen Früchte. Auch Formulare werden von PHP als assoziatives Array verwaltet. Hoppla, du hast vergessen, was Arrays sind? Arrays sind Wertelisten, die aus einem Schlüssel-Werte-Paar (key-value) bestehen. Bei den einfachen indizierten Arrays ist der Schlüssel ein bei 0 beginnender Index-Wert. Bei den assoziativen Arrays dagegen lässt sich nicht nur der Wert, sondern auch der Schlüssel (key) frei bestimmen. Bei den von PHP zurückgegebenen Formularen entspricht der Name des Formularfelds dem Schlüssel (key). Der Wert (value) ist dagegen das, was der Benutzer in das Feld eingetippt hat. Das Array selber jedoch heißt $_POST, zumindest gilt das dann, wenn im -Tag das Attribut-Werte-Paar method="post" verwendet wurde. Beachte: Wenn du method="get" verwenden würdest, würde das Array $_GET heißen. Wir bleiben in unseren Beispielen jedoch stets bei method="post". 141
Kapitel
5
Seiten mit Passwort schützen
Ein Versuch: Das Passwort ausgeben Was weißt du inzwischen? Das von einem Formular zurückgegebene Array heißt $_POST. Das Formularfeld selber heißt im Beispiel pass. Ergo: Der im Formularfeld pass eingetragene Wert muss sich mit $_POST["pass"] ermitteln lassen. »Beweise, mein lieber Watson, wir brauchen Beweise!« »Natürlich, Holmes.« Also mache einen Versuch. In unserer zweiten Version der passwort.php gebe ich das Passwort einfach im Klartext aus! Und zwar mit der allseits beliebten Sprachanweisung echo. Ergänze einfach den PHP-Bereich unterhalb des Formulars. Notiere also unter dem Tag und über dem abschließenden noch Folgendes.
Die -Tags dienen einfach nur dazu, einen Block zu bilden. Du hättest sie auch weglassen können. Wenn du sie verwendest, musst du in diesem Fall wieder mit dem Verkettungsoperator Punkt (.) arbeiten.
Tatsache! Nach Klick auf Senden wird das Passwort angezeigt.
Damit ist der Beweis erbracht: Der Zugriff auf den in das Formularfeld pass eingegebenen Wert funktioniert! Zum Vergleich: Diese zweite Version des Dokuments findest du im Unterordner version2.
142
Du ärgerst dich, dass du assoziative Array-Variablen auf umständliche Art und Weise mit dem String verketten musst? Gewöhnliche Variablen dagegen nicht? Dann verrate ich dir einen Geheimtrick: Du musst den key bei assoziativen Variablen nicht unbedingt in Gänsefüßchen schreiben. Statt $_POST["pass"] kannst du unter bestimmten Bedingungen auch mit $_POST[pass] auf das Passwort zugreifen. Und zwar immer dann, wenn diese Variable selber zu einem Abschnitt gehört, der in Gänsefüßchen eingekleidet wurde.
Testen mit if-else
Dann kannst du das Passwort also statt auf diese Weise echo "
" . $_POST["pass"] . "
\n";
auch folgendermaßen ohne Verkettung ausgeben: echo "
$_POST[pass]
\n";
Das ist aber nur deshalb gestattet, weil die gesamte echo-Anweisung innerhalb von Gänsefüßchen notiert wurde. Außerhalb von Gänsefüßchen solltest du diese Schreibweise nicht verwenden!
Testen mit if-else Frisch ans Werk, nun kommt die Passwortabfrage. Wer das Passwort kennt, gelangt an die Inhalte heran. Wer nicht, wird über seine Unkenntnis informiert. Als Musterpasswort schlage ich die Zeichenfolge a?iX379 vor. Die Version 3 der Passwort-Abfrage arbeitet mit if-else. Damit sind wir zwar noch nicht am Ziel aller Wünsche angelangt, aber immerhin schon ein Stück weiter. Ich zeige dir diesmal den gesamten Teil zwischen : Wie lautet das Passwort? Geschützter Bereich
Hier stehen die geheimen Inhalte ...
Leider kennen Sie das Passwort nicht!
143
Kapitel
5
Seiten mit Passwort schützen Die für uns interessante Zeile steckt in: if ($_POST["pass"] == "a?iX379") {
Hier wird getestet, ob der aus dem Feld pass ausgelesene Inhalt mit der Zeichenfolge a?iX379 übereinstimmt. Nur dann zeigt das Skript den Bereich mit den geschützten Inhalten an. Ich arbeite dabei mit einer if-else-Entscheidungsstruktur. Im if-Bereich teste ich auf Übereinstimmung. Wenn dieser Ausdruck wahr ist, wird der »geschützte Bereich« angezeigt. Falls nicht, greift der else-Zweig. Es erscheint der Satz »Leider kennen Sie das Passwort nicht«! Ist dir etwas aufgefallen? In diesem Beispiel habe ich PHP- und HTMLAbschnitte miteinander vermischt. Die HTML-Abschnitte stehen zwar außerhalb der PHP-Bereiche. Zumindest scheinbar. Trotzdem befinden sie sich innerhalb eines »PHP-Klammer-Blockes« ({ }): Dafür arbeite ich einfach mit mehreren PHP-Abschnitten, die die HTML-Bereiche jeweils »umklammern«. Je nach Bedarf schalte ich den PHP-Bereich dafür ab und wieder ein. Wie du siehst, kannst du HTML-Abschnitte also ganz problemlos in PHP einbinden. Hauptsache, du markierst korrekt, wo ein PHPAbschnitt beginnt und wo er wieder aufhört. Hauptsache, du vergisst nicht eine der hier notwendigen geschweiften Klammern!
Schönheitsfehler? Variablentest mit isset()! Fällt dir an der dritten Version des Beispiels etwas auf? Richtig, es funktioniert! Herzlichen Glückwunsch. Nur wer das Passwort kennt, wird an die geschützten Inhalte herangelassen. Doch der Satz »Leider kennen Sie das Passwort nicht« wird auch dann eingeblendet, wenn die Seite zum allerersten Mal aufgerufen wird. Soviel Häme ist ungesund. Du musst dem Besucher ja nicht gleich am Anfang auf die Nase binden, dass du ihr oder ihm die Passwortkenntnis nicht zutraust.
144
Schönheitsfehler? Variablentest mit isset()!
Gleich beim Aufrufen der Seite wird dem Besucher Unkenntnis unterstellt.
Und tatsächlich befindet sich an dieser Stelle ein Schönheitsfehler. Der Satz sollte erst dann eingeblendet werden, nachdem der Formularinhalt abgeschickt wurde. Und nicht gleich am Anfang! Wie schaffst du das?
Prüfen, ob die Variable überhaupt vorhanden ist Du prüfst einfach, ob die Variable überhaupt definiert und damit vorhanden ist. Denn wenn das Formular noch nicht abgeschickt wurde, kann eine Variable namens $_POST["pass"] noch nicht existieren! Oder? Das Array $_POST wird schließlich erst nach dem Abschicken des Formularinhalts erzeugt. Nutze die Funktion isset(). Die Funktion isset() prüft, ob eine Variable überhaupt gesetzt ist. Erst dann gibt sie den Wert wahr (true) zurück. Bei Nichtvorhandensein wird als Testergebnis jedoch false zurückgegeben. Die Syntax dieser Funktion sieht folgendermaßen aus: isset($Variable). Du übergibst die zu testende Variable einfach in runden Klammern. Baue das Skript um, verbessere es: Aus dem else-Zweig machst du einfach ein elseif! Und hier testest du nun, ob die Passwort-Variable gesetzt ist. Verändere also folgende Zeile: else {
in elseif (isset($_POST["pass"])) {
und schon hast du das Problem (vorerst) gelöst. 145
Kapitel
5
Seiten mit Passwort schützen Die Wirkungsweise ist noch nicht ganz klar? Die Zeile liest sich wie folgt: Prüfe, ob die Variable $_POST["pass"] »gesetzt« ist. Wenn ja, gibt die Funktion isset() den Wert true zurück. Und if bzw. elseif testet schließlich auf Wahrheit. In diesem Fall (also nur bei gesetzter Variable) wird der Text »Leider kennen Sie das Passwort nicht« ausgegeben. Da die Variable beim ersten Aufruf der Seite jedoch noch nicht gesetzt ist, passiert gar nichts. Falls du vergleichen willst, schaust du dir das Beispiel im Ordner version4 an! Aufgepasst mit den vielen Klammern in der elseif-Zeile! Das Vergessen solch einer Klammer führt unweigerlich zu einer Fehlermeldung. Wo kommen die ganzen Klammern her? Die Bedingung für elseif wird in runden Klammern getestet. Die notierst du zuerst. Dann setzt du dort den isset()-Test hinein, der schließlich auch ein paar runde Klammern benötigt. Zum Schluss platzierst du innerhalb dieser runden Klammern die Variable, in unserem Fall $_POST["pass"]. Nach einem Leerzeichen folgt dann noch die geschweifte Klammer, die schließlich unseren Block einleitet. Mit dieser »vierten Version« der Passwortabfrage hast du ein wichtiges »Etappenziel« erreicht. Und da das Passwort im PHP-Bereich steht, wird es für Außenstehende auch nicht angezeigt.
Das Skript noch etwas sicherer machen In diesem Skript steckt ein kleines Problem. Es handelt sich um einen unsichtbaren Hinweis (Notice), den ich für dich hier sichtbar gemacht habe:
Das Skript produziert intern einen (normalerweise unsichtbaren) Hinweis.
Der Hinweis bezieht sich auf Zeile 15 und besagt, dass der Index pass nicht definiert wäre. Schau dir Zeile 15 noch einmal genau an: 146
if ($_POST["pass"] == "a?iX379") {
Mehr Möglichkeiten mit switch Und tatsächlich steht dort $_POST mit dem Index pass. Fakt ist: Der Hinweis erscheint nur beim allerersten Aufruf der Seite. Wenn der Nutzer also noch keinen Formularinhalt eingetragen und abgeschickt hat. Das ist logisch: Wenn noch kein Formularinhalt abgeschickt wurde, kann es auch keine Variable $_POST mit dem Index pass geben. Derartige Notices (Hinweise) sind zwar keine Fehler, sie gelten aber als schlechter Programmierstil und lassen sich vermeiden. Undefinierte Indizes oder undefinierte Variablen geben Hackern gewisse Chancen, in das Skript einzudringen und Variablenwerte zu manipulieren. (Auch wenn die Chancen in diesem Fall sicher recht klein sind.) Die Lösung ist in diesem Fall ganz einfach. Füge auch in das einleitende if von Zeile 15 die eben besprochene isset()-Variablenprüfung ein – und zwar zusätzlich als erster von zwei Teilausdrücken. Verknüpfe beide Teilausdrücke mit dem &&-Operator. if (isset($_POST["pass"]) && $_POST["pass"] == "a?iX379") {
Nun
wird
auch
hier
zuerst
das
Vorhandensein
der
Variablen
$_POST["pass"] überprüft. Erst bei einem Erfolg findet der zweite Test statt. Vergleiche mit dem Beispiel aus dem Ordner version5.
Wie du diese normalerweise unsichtbaren Hinweise einblendest, verrate ich dir übrigens im Nachfolgeband »PHP und MySQL Praxisbuch für Kids«.
Mehr Möglichkeiten mit switch Ich bin nie zufrieden! Ein einziges lumpiges Passwort abfragen? Das kann doch jeder! Als nächste Stufe schwebt mir eine Seite vor, die mehrere Passwörter entgegennimmt. Je nach Passwort soll der Betrachter andere Informationen angezeigt bekommen. Das ist sozusagen die »Hohe Schule der Passwortkunst«. Folgende Passwörter sollen möglich sein: 0 a?iX379 0 a?iX380 0 a?iX381 »Richtig«, denkst du dir vielleicht: Da arbeite ich mit if und mehreren elseif-Bereichen. Stimmt. Gute Idee. Der Ansatz ist vom Prinzip her völlig korrekt! Doch gerade für solche Fälle gibt es eine Alternative zur ständigen »Elseifferei«. Schau dir die switch-Fallunterscheidung an.
147
Kapitel
5
Seiten mit Passwort schützen
Die switch-Fallunterscheidung Du möchtest auf verschiedene Eingaben unterschiedlich reagieren? Dann bietet sich die switch-Fallunterscheidung an. Hier schlägst du gleich mehrere Fliegen mit einer Klappe. Die Syntax lautet: switch(Variable) { case Wert1: Anweisung; break; case Wert2: Anweisung; break; case Wert3: Anweisung; break; ... default: Anweisung; }
Sieht kompliziert aus? Es ist einfacher, als du vielleicht denkst: Die switch-Fallunterscheidung untersucht, ob eine Variable mit den aufgelisteten Werten übereinstimmt. Deshalb schreibst du in der ersten Zeile switch(Variable) {
Dabei ist das Wort Variable der Platzhalter für die zu prüfende Variable. (Für unsere Zwecke setzen wir an dieser Stelle nachher natürlich wieder $_POST["pass"] ein.) Beachte die öffnende geschweifte Klammer ({) am Schluss der Zeile, da switch() wieder einen Block benötigt. Die Übereinstimmung selber wird nun mit dem Schlüsselwort case getestet. Hinter dem Leerzeichen notierst du den Wert, mit dem die Variable evtl. übereinstimmen könnte. case Wert1: Wert1 ist hier natürlich der Platzhalter für die entsprechende Zahl bzw. Zeichenfolge. In unserem Fall würdest du als ersten Wert notieren a?iX379.
148
Beachte, dass am Ende der case-Zeile ein Doppelpunkt gesetzt werden muss. Gibt es eine Übereinstimmung? Dann wird die betreffende Anweisung nach dem Doppelpunkt ausgeführt. Die Programmabarbeitung muss
Mehr Möglichkeiten mit switch durch das Schlüsselwort break beendet werden. Das Wort break steht hier für Abbruch. Falls es keine Übereinstimmung gibt, wird in der nächsten case-Zeile weitergeprüft. Sollte in keiner der case-Zeilen eine Übereinstimmung erzielt worden sein, wird die unter default: stehende Anweisung ausgeführt. Soweit die Theorie. Nun zur Praxis!
Wir »switchen« los: Das praktische Beispiel Das praktische Beispiel nenne ich zur Unterscheidung switch.php. Achte also auf diesen neuen Dateinamen. Und hier die genaue Schrittfolge zur Erstellung des Quelltexts.
>
Zuerst übernimmst du das Formular aus dem allerersten PasswortBeispiel. Der einzige Unterschied: Beachte den bei action einzutragenden Wert. Da das neue Projekt unter dem Namen switch.php gesichert wird, musst du hier auch switch.php notieren!
>
Hier drucke ich ganz schnell zur Veranschaulichung noch einmal den gesamten HTML-Quellcode ab, der vorerst zwischen stehen muss. Die Überschrift kannst du natürlich frei wählen: Drei Passworte abfragen
>
Ich zeige dir nun die Vorgehensweise, mit der ich meine Skripte erstelle. Und zwar beginne ich dabei stets »außen« und arbeite mich »nach innen« vor. Also, mach mit: Unter dem Formular fügst du zuerst einen PHP-Bereich ein. Dazwischen lässt du genug Platz zum Ergänzen der noch folgenden Codezeilen.
>
Nun notierst du innerhalb des PHP-Bereichs zuerst eine ifAnweisung, mit der du auf das Vorhandensein der Variable $_POST["pass"] testest. Nun sieht der gesamte PHP-Bereich folgendermaßen aus:
149
Kapitel
5
Seiten mit Passwort schützen
Was habe ich hier gemacht? Ich spanne die if-Abfrage praktisch um das gesamte Skript herum. Und zwar als eine Art Klammer. Im Klartext: Die in diesem untergeordneten Block enthaltenen Zeilen sollen nur dann ausgeführt werden, wenn die Variable gesetzt ist. Das schützt uns zum einen vor unsichtbaren Hinweisen. Zum anderen macht unsere noch folgende switch-Fallunterscheidung tatsächlich nur bei gesetzter Variable Sinn! Diese »alles umspannenden if-Abfragen« sind übrigens eine häufige Programmiertechnik. In den meisten Fällen wird dabei wie hier auf den else-Zweig verzichtet, da dieser nicht benötigt wird.
>
Das Prinzip ist klar? Gut! Innerhalb des if-Blocks notiere ich nun die switch()-Fallunterscheidung.
>
So sieht der gesamte PHP-Bereich aus. Die von mir hervorgehobenen ersten zwei und letzten zwei Zeilen sind die, die du eben aufgeschrieben hast. Der Rest ist neu hinzugekommen, er erzeugt die switch()Fallunterscheidung.
150
Inhalt mit include einbinden Zur Information: Aus Gründen der Übersichtlichkeit habe ich hier auf das Einbinden von HTML-Bereichen verzichtet. Eine Zeile wie echo "
Passwort-Bereich 3
";
steht als Platzhalter für den entsprechenden Passwortbereich.
Drei Passwörter stehen zur Auswahl.
Und, schon ausprobiert? Sehr gut! Wie du siehst, kannst du auch mit switch() eine Passwortabfrage erzeugen.
Inhalt mit include einbinden Apropos Platzhalter für den entsprechenden Passwortbereich. Wäre es nicht schöner, die betreffende Seite extern ablegen zu können? Damit du die »geheimen Infos« viel einfacher bearbeiten kannst? Wie gut, dass es include() gibt! Mit der Funktion include() kannst du externe Dateien einbinden und auswerten. Notiere in runden Klammern einfach den Dateinamen und evtl. den Pfad zur jeweiligen Datei, und zwar von Gänsefüßchen umhüllt. Wichtig zu wissen: Durch den Einsatz von include() wird die PHPNotation automatisch abgeschaltet. Die einzubindende Datei wird als normale HTML- bzw. Textdatei betrachtet. Um die Datei info1.html einzubinden, schreibst du z. B. include("info1.html").
>
Erstelle nun eine Datei für jeden Passwort-Bereich. Als Endung entscheidest du dich für die Endung .html. Die erste Datei nennst du im Beispiel info1.html. Bereich für Passwort 1
Hier stehen die Infos für die Besitzer des 1. Passworts.
151
Kapitel
5
Seiten mit Passwort schützen
>
Erzeuge nach diesem Muster die zwei weiteren externen Dateien namens info2.html und info3.html. Achte darauf, dass du diese Dateien im Beispiel in den gleichen Ordner legst, in dem die switch.php liegt.
Und nun baust du die switch.php um. Der derart umgestaltete switch()-Block sieht folgendermaßen aus: switch($_POST["pass"]) { case "a?iX379": include("info1.html"); break; case "a?iX380": include("info2.html"); break; case "a?iX381": include("info3.html"); break; default: echo "
Leider kennen Sie das Passwort nicht!
"; }
Probiere es aus, es funktioniert. (Das Vergleichs-Beispiel auf CD heißt hier switch2.php.) Der Vorteil liegt auf der Hand: Es ist für dich nun viel einfacher, den Inhalt der Passwort-Bereiche zu bearbeiten und anzupassen. Merkst du etwas? Du kennst jetzt zwar die switch()-Fallunterscheidung an einem praktischen Beispiel. Doch mit dem Thema Sicherheit hat die bisherige Vorgehensweise nicht das geringste zu. Der Besucher braucht nur (durch Raten) den direkten Link zur Datei info1.html, info2.html bzw. info3.html zu kennen. Schon gelangt sie oder er an deine ach so geheimen Daten heran! Mehr Tipps zur Sicherheit folgen deshalb im nächsten Abschnitt.
Mehr Sicherheit: Endungs- und Ordnertricks Zurück zum Thema Sicherheit. So flexibel und angenehm die »includeMethode« zu sein scheint. Hier zeigen sich offenbar die Grenzen. Trotzdem 152
Mehr Sicherheit: Endungs- und Ordnertricks habe ich ein paar Ideen, wie du mehr Sicherheit erreichen kannst. Schau dir einfach meine Ideen an und mache dir deine eigenen Gedanken: 0 Verwende Dateinamen, die sich nicht so leicht raten lassen. Wie wäre es mit d_75uzRxei.html? 0 Verwende eine andere Dateiendung als .html. Der Funktion include() ist die Endung egal. Du kannst deine Dateien auch .txt, .inc oder sogar .exe nennen. 0 Es geht noch wilder: Verwende z. B. die Endung .gif, .zip oder .mid. Bei all diesen Endungen zeigen die meisten Browser die Datei nicht im Klartext an, da sie keine HTML-Datei erwarten. Gif-Grafiken werden als Bild erkannt. Dateien mit .zip am Ende will der Browser herunterladen, da er hier ein sogenanntes gepacktes ZIP-Archiv vermutet. Noch pfiffiger ist vielleicht die Endung .mid. Die meisten Browser bestehen darauf, eine derartige Datei abzuspielen, da sie an der Endung eine MidiKlangdatei zu erkennen glauben. 0 Nutze einen (oder mehrere) Unterordner für deine Dateien. Wie wäre es mit content007? Dass der Besucher zum einen den richtigen Ordnernamen für den Unterordner errät und zum anderen den korrekten Dateinamen, ist schon mehr als unwahrscheinlich.
Verstecke die Dateien im Unterordner und verpasse ihnen eine falsche Dateiendung.
Ich habe mich im ersten Beispiel für eine Kombination aus der letzten und der vorletzten Idee entschieden. Der Funktion include() ist die Dateiendung der einzubindenden Datei schließlich herzlich egal. Also benenne ich meine Textdateien einfach um.
153
Kapitel
5
Seiten mit Passwort schützen Vergleiche mit meiner Beispieldatei include.php. Die einzelnen Textdateien habe ich mit der Endung .mid versehen und in einem Unterordner namens content007 abgelegt. Tipp: Das Umbenennen einer Datei gelingt im Windows-Explorer. Rechtsklicke auf die Datei, wähle den Befehl UMBENENNEN. Lege die neue Endung fest. Schon wieder wirst du nur mit einem Teil der Wahrheit abgespeist. Ich fürchte, dass an dieser Stelle wohl wieder etwas handfestes HundeKnow-how gefragt ist! Es gibt eine weit sicherere Lösung, als dir der Buchautor glauben machen möchte. Zugegeben, nicht bei allen Dienstleistern klappt es. Jedoch bei vielen kostenpflichtigen Anbietern wie z. B. bei www.all-inkl.com. Wie lautet der Trick? Lege die zu schützenden Dateien zuerst in einem separaten Unterordner ab, wie hier schon gezeigt. Diesen Unterordner schützt du nun mit dem Konfigurationstool deines Dienstleisters! (Dahinter verbirgt sich eine als htaccess bezeichnete Technik.) Ein Beispiel? Gut! Ich habe für dich einen Ordner namens safe eingerichtet. Dort liegt eine derartige .htaccess-Datei. Sie schützt diesen Ordner vor dem Zugriff von außen. Im safe-Ordner kannst du also ohne Reue HTML-Dateien wie info1.html, info2.html oder info3.html ablegen – sie sind von außen nicht sichtbar. Vergleiche mit meiner Lösung include2.php. Probiere aus, ob es auch bei deinem Hoster funktioniert. Und noch einen Trick habe ich herausgefunden. Du kannst die zu schützenden Dateien auch in einen anderen sicheren Ordner legen. Ich meine einen Ordner, der beim Dienstleister »von Hause aus« geschützt ist. So ist bei www.all-inkl.com der Ordner cgi-bin von außen nicht erreichbar – und das ganz ohne schützende .htaccess-Datei. Er ist für Skripte vorbehalten. Wenn du jedoch hier Dateien ablegst und diese per include() einbindest, werden die Dateien auch aus diesem Ordner herausgeholt.
Schlussbemerkung In diesem Kapitel hast du nicht nur viel zum Thema Passwortschutz gelernt. Du hast bei dieser Gelegenheit auch erfahren, wie Formulare abgeschickt und ausgewertet werden. Mit der switch()-Fallunterscheidung kennst du eine weitere wichtige Methode, Eingaben auf Übereinstimmung zu überprüfen. Außerdem weißt du nun, wie du externe Dateien per include() einbinden kannst. 154
Zusammenfassung
Zusammenfassung 0 Du weißt, wie Formulare ausgewertet werden. Notiere im -Tag das Attribut action. Gib als Wert den Namen bzw. Pfad der PHP-Datei an, die die Formulardaten entgegennehmen soll. (Wenn du das Gänsefüßchenpaar leer lässt, wird automatisch wieder die aktuelle Datei aufgerufen.) Das Attribut method dagegen steuert die Versendemethode (get bzw. post). Schreibe method="post", wenn die Daten im Hintergrund übermittelt werden sollen. 0 Der Formularinhalt wird als assoziatives Array zurückgegeben. Bei Auswahl von method="get" heißt dieses $_GET, bei method="post" dagegen $_POST. Den Wert eines Formularfeldes kannst du im letzten Fall über $_POST["Feldname"] auslesen. 0 In Ausnahmefällen darfst du den key bei assoziativen Arrays auch ohne Gänsefüßchen notieren, schreibe z. B. $_POST[Feldname]. Durch diese Komfortschreibweise ersparst du dir das Verketten des übrigen Strings mit den Array-Variablen. 0 Die Funktion isset() testet, ob eine Variable überhaupt vorhanden ist. Sie gibt wahr oder falsch zurück. Du möchtest prüfen, ob ein Passwortfeld namens pass existiert? Das erreichst du mit isset($_POST["pass"]). 0 Die switch()-Fallunterscheidung untersucht, ob eine Variable mit den aufgelisteten Werten übereinstimmt. Je nach Übereinstimmung kannst du ganz unterschiedliche Codezeilen ausführen lassen. Damit ist switch() eine Alternative zu if und elseif. Mit switch() kannst du jedoch nur auf Übereinstimmung testen. Die Prüfung, ob ein Wert z. B. größer, kleiner oder ungleich ist, ist if bzw. elseif vorbehalten. 0 Binde externe Dateien mit der Funktion include() in deine PHPAbschnitte ein. Die einzubindende Datei wird dabei unabhängig von der Endung als normale HTML- bzw. Textdatei betrachtet. Möchtest du hier PHP-Code einbinden, musst du das in der externen Datei erstens durch die Endung .php und zweitens durch die PHP-Tags kenntlich machen.
155
Kapitel
5
Seiten mit Passwort schützen
Ein paar Fragen … 1. Bei welcher Versendemethode werden Formulardaten im Hintergrund an das entsprechende Skript geschickt? 2. Angenommen, du verschickst den Formularinhalt mit method="get". Wie greifst du im PHP-Skript auf den Inhalt eines Feldes namens pass zurück? 3. Wie heißt die Funktion, mit der du die Existenz einer Variablen prüfen kannst? 4. Angenommen, du legst eine Datei namens inhalt.txt in den Unterordner daten. Der Pfad zu dieser Datei lautet also daten/inhalt.txt. Du möchtest diese Datei über include() vom Wurzelordner aus einbinden. Wie sieht die komplette Funktion aus?
… und ein paar Aufgaben 1. Schreibe ein PHP-Dokument namens vorname.php. Erstelle hier ein Formular mit Texteingabefeld, in welches der Benutzer seinen Vornamen eingeben kann. Nenne das Texteingabefeld vorname. Nach Klick auf SENDEN soll unter dem Formular ein persönlicher Begrüßungssatz wie »Hallo Petra!« stehen. 2. Gib den Inhalt des Formularfelds ($_POST["vorname"]) in einer Syntax wieder, die auf die Verknüpfung mit dem umgebenden String verzichtet. 3. Falls noch nicht getan: Sorge dafür, dass die Begrüßung nur dann erfolgt, wenn das Formular zum einen abgeschickt wurde (Ist die Variable gesetzt?) und zum anderen aber auch, wenn das Feld nicht leer ist. Verknüpfe also zwei Bedingungen miteinander. Tipp: Ein Leerstring wird durch ein Paar Gänsefüßchen symbolisiert. 4. Wie gut sind deine generellen Formularkenntnisse? Ändere das Passwortbeispiel aus dem ersten Teil des Kapitels (Datei passwort.php) wie folgt ab: Das Formularfeld soll das Passwort bei der Eingabe nicht mehr im Klartext anzeigen. Stattdessen sollen je nach Browsertyp Sternchen bzw. Kreise erscheinen.
156
6 Etwas Mathe: Taschen(geld)rechner Kennst du das auch? Da bekommt man nun regelmäßig eine gewisse Summe pro Monat. Und dann ist am Ende des Geldes noch so viel Monat übrig. Wo verschwinden sie hin, die sauer verdienten Piepen? Was passiert mit deinem Taschengeld? Ich glaube, hinter diesem Phänomen steckt eines der letzten großen Rätsel der Menschheit. Versuchen wir gemeinsam, zumindest etwas Licht in das Dunkel zu bringen. In diesem Kapitel zeige ich dir aus aktuellem Anlass, wie du $ mit den Grundrechenarten umgehst $ einen Einnahme-Ausgaben-Vergleich erstellst $ das Ergebnis absolut und in Prozent darstellst $ Zahlen rundest und mit Nachkommastellen füllst $ ein Diagramm zur Auswertung zeichnest $ einen einfachen Taschenrechner programmierst $ die Berechnung mit Hilfe einer Funktion erleichterst Mit anderen Worten: In diesem Kapitel dreht sich alles rund um die Mathematik. Ganz unabhängig davon, welche Einstellung du zu diesem Schulfach hast bzw. hattest.
157
Kapitel
6
Etwas Mathe: Taschen(geld)rechner
Nicht ohne Grund: Grundrechenarten Eine Programmiersprache wäre keine Programmiersprache, wenn man damit nicht rechnen könnte. Und genau wie in der Schule geht es auch in PHP mit den Grundrechenarten los. Wir wollen uns ja nicht gleich am Anfang überanstrengen!
Plus, Minus, Mal, Geteilt Die vier Grundrechenarten lauten Plus, Minus, Mal und Geteilt. Die entsprechenden Rechenoperatoren sehen in PHP so aus: +, -, * und / (Schrägstrich). Außerdem gibt es vom Plus- bzw. Minuszeichen jeweils noch ein »Doppelmoppel-Exemplar« namens ++ bzw. --. Mit dem »Doppelplus« wird nicht etwa doppelt addiert. Es handelt sich vielmehr um den Operator zum Inkrementieren. Inkremen… wie bitte? Mit Inkrementieren ist lediglich das Hinzuzählen von 1 gemeint. Rechentechnisch steckt also die Anweisung $i = $i + 1 dahinter. Zur Variablen $i (oder $kaugummi oder wie auch immer) wird also der Wert 1 hinzugezählt. Und warum schreibt man dann nicht einfach $i = $i + 1, sondern $i++? Weil Programmierer faule Gesellen sind und kürzen, wo es nur geht. Zugegeben, so ein $i++ sieht auf den ersten Blick recht ungewohnt aus. Nach einer gewissen Eingewöhnungszeit geht’s aber dann recht fix! Ähnlich verhält es sich mit dem Gegenstück --. Damit wird dekrementiert, also um 1 vermindert. Für die Berechnung $i = $i - 1 schreibt man also $i--. Merke dir diese Anweisungen!
Grundrechenarten im Überblick Und nun zeige ich dir die vier Grundrechenarten nebst Inkrement- und Dekrement-Operator fein säuberlich aufgelistet in einer Tabelle. Ich habe gleich ein Anwendungsbeispiel hinzugeschrieben. Operator + * / ++ --
158
Bedeutung Addition Subtraktion Multiplikation Division addiert 1 hinzu zieht 1 ab
Beispiel $a = 8 + $c $c = $b – 2 10 * 4 $x / $y $i++ (ist die Abkürzung für $i = $i + 1) $i-- (steht für $i = $i - 1)
Rechenpraxis: Zwei mal Drei macht Vier …
Rechenpraxis: Zwei mal Drei macht Vier … … und Drei macht Neune. Zumindest behauptet das Pippi Langstrumpf. Ich fürchte, dass ich während meiner Schulzeit zu ähnlichen Ergebnissen gelangt war. Egal ob kleines Einmaleins oder große Berechnungen: Mit PHP lässt sich das alles endlich wunderbar nachprüfen. Ran an die Praxis, jetzt wird gerechnet. Wir begnügen uns dabei mit der Multiplikation. Notiere das Grundgerüst für eine HTML-Datei. Ich zeige dir nun den kompletten Teil zwischen den Tags . Zwei mal Drei
Das Skript ist einfach: Die zu multiplizierenden Werte halte ich in den Variablen $a und $b fest. Das Ergebnis speichere ich in der Variablen $c und gebe das Ganze durch eine simple echo-Anweisung aus. Der PHP-Teil wird außerdem vom Tag-Paar eingefasst, damit das Ergebnis innerhalb eines Absatzes ausgegeben wird. Du weißt schon, jeglicher Text sollte innerhalb eines Block-Elements notiert werden. Und das Ergebnis selbst?
»Plutimikation« frei nach Pippi Langstrumpf. PHP rechnet genauer!
Zugegeben, Autor und Pippi gehören nicht gerade zu den Leuchten in Mathematik. Aber zum Glück gibt es ja die Rechenfunktionen von PHP! Übrigens, falls du das Beispiel suchst: Ich habe es unter dem Namen pippi.php auf der CD abgespeichert. 159
Kapitel
6
Etwas Mathe: Taschen(geld)rechner
Einnahmen minus Ausgaben: Taschengeldrechner Wie wär’s zur Abwechslung mit einer Subtraktion? Schließlich werden im Leben wohl mehr Dinge »abgezogen« als hinzugefügt. Beim Taschengeld zum Beispiel.
Formular erzeugen Erstelle doch einmal ein Formular mit zwei Feldern. Das eine Feld nimmt den Einnahme-Wert entgegen und wird mit a benannt. Das zweite Feld ist für die Ausgaben gedacht, es bekommt den Namen b verpasst. Dein Skript berechnet Einnahmen minus Ausgaben und präsentiert dir das meist ernüchternde Ergebnis. Das Dokument heißt übrigens rechner.php, denn schließlich musst du auch den Dateinamen wissen. Diesen brauchst du für das Attribut action im Formular, denn das Formular schickt den Inhalt an sich selber. Der Quelltext ist simpel. Wenn du beim vorigen Kapitel gut mitgekommen bist, verstehst du die Wirkungsweise auf Anhieb. Einnahme-Ausgabe-Rechnung
Einnahme: Ausgabe:
Der PHP-Teil besteht lediglich aus zwei Zeilen, die sich sofort erschließen. Mit $_POST['a'] ermittelst du den Wert aus Feld a, mit $_POST['b'] dagegen die Zahl aus Feld b. Die Differenz wird berechnet, in der Variablen $c gespeichert und in der zweiten PHP-Zeile ausgegeben.
160
Einnahmen minus Ausgaben: Taschengeldrechner
Du möchtest Bruchzahlen notieren, z. B. 12,5? Dann beachte, dass Dezimalbrüche in PHP (und in anderen Programmiersprachen) nicht mit dem Komma getrennt werden. Im angelsächsischen Raum wird dafür der Punkt verwendet, denn die Amis oder Engländer kennen unsere Bedeutung für das Komma nicht: Schreibe Kommazahlen also stets mit Punkt statt Komma! Für 12,5 musst du also notieren: 12.5!
Dezimalbruch auf Angelsächsisch: Trenne mit Punkt statt mit Komma!
Ist es dir schon aufgefallen? In diesem Kapitel verwendet der Autor die Schreibweise $_POST['a'] und nicht $_POST["a"]. Warum die einfachen statt der doppelten Gänsefüßchen? Gibt es da einen Unterschied? Nein, den gibt es nicht. Es ist in unserem Fall völlig egal, ob du die einfachen oder die doppelten Gänsefüßchen verwendest. Das Thema spielt erst dann eine Rolle, wenn du Gänsefüßchen ineinander verschachtelst. Denn gleichrangige Gänsefüßchenpaare dürfen nicht ineinander verschachtelt werden. Nimm die Schreibweise, die dir am besten behagt. In der Praxis wirst du mal diese, mal jene Schreibweise vorfinden und der Autor dieses Buches will dich wahrscheinlich nur an diese Praxis gewöhnen.
Kein Ergebnis anzeigen beim ersten Aufruf So simpel können wir das Skript nicht stehen lassen. Denn selbst beim ersten Aufruf der Seite erscheint nun der Text Das Ergebnis lautet 0. Wozu haben wir im vorigen Kapitel lang und breit die if-Abfrage besprochen? Prüfe, ob die beiden Variablen gesetzt sind. Beim ersten Aufruf der Seite wird das noch nicht der Fall sein. Der Inhalt der Formularfelder wird schließlich erst dann verschickt, wenn du auf die Schaltfläche BERECHNEN klickst. Verbinde diese Abfrage durch den &&-Operator (AND). Erst wenn beide Bedingungen wahr sind, soll das Ergebnis eingeblendet werden. 161
Kapitel
6
Etwas Mathe: Taschen(geld)rechner Hier siehst du den PHP-Teil mit dieser zusätzlichen if-Klammer:
Besser testen: Die Funktion empty() Zeit, dass ich mich mal wieder melde, dein Hund Buffi! Offenbar teilt dir der Autor nur die »halbe Wahrheit« mit und speist dich mit der Funktion isset() ab. Was passiert, wenn du nichts in die Felder einträgst und trotzdem auf die Schaltfläche BERECHNEN klickst? Das Skript berechnet das Ergebnis 0. Warum? Leer gelassene Felder werden als Leerstring interpretiert, was in diesem Fall gleichbedeutend ist mit der Ziffer Null. Nimm statt isset() doch einfach die Funktion empty()! Mit empty() erreichst du fast das Gegenteil von isset(). Zur Wiederholung: Die Funktion isset() prüft, ob eine Variable gesetzt ist und gibt nur dann true zurück. Sonst liefert isset() jedoch den Wert false. Das ist bekannt. Mit der neuen Funktion empty() dagegen kannst du herausfinden, ob eine Variable nicht gesetzt ist, ob sie leer ist oder ob sie dem Wert 0 entspricht. In allen diesen drei Fällen liefert die Funktion true zurück, sonst ist der Wert von empty() false. Du schlägst also gleich drei Fliegen mit einer Klappe! Weil empty() ebenfalls einen Wahrheitswert zurückgibt, eignet sich die Funktion genau wie isset() so wunderbar für den Einsatz in ifStrukturen. Der Test lautet dann wie folgt: empty($Variable). Einen Haken gibt es noch an der Geschichte. Mit isset() ermittelst du, ob eine Variable gesetzt ist, nur dann gibt die Funktion true zurück. Mit empty() hingegen erhältst du true, wenn die Variable eben nicht gesetzt (oder leer oder 0) ist. Hmm. Eigentlich wollten wir es ja umgedreht haben. Doch hier greift ein neuer Trick! Stelle der Funktion ein Ausrufezeichen voran! Mit diesem Ausrufezeichen verkehrst du die Funktion in ihr Gegenteil, dieses Ausrufezeichen ist eine Art »Umkehroperator«. Schreibe also !empty($Variable). 162
Einnahmen minus Ausgaben: Taschengeldrechner
Und so sieht das Beispiel aus, wenn du statt isset() mit empty() arbeitest:
Bei leer gelassenem Feld erfolgt keine Berechnung.
Zum Vergleich: Die derart verbesserte Version findest du unter dem Namen rechner_hund.php auf der CD. Probiere sie aus!
Noch besser testen: Funktion is_numeric() Der Hund Buffi aus der Randspalte wird in letzter Zeit ein wenig vorlaut! Die Funktion empty() ist keine schlechte Idee, das gebe ich zu. Und die Überlegungen aus seinem Tipp sind schon sehr wichtig. Trotzdem sollten wir an dieser Stelle weiterdenken. Denn !empty() unterdrückt auch die Eingabe einer 0 in eines dieser Formularfelder. Zugegeben, in den meisten Fällen macht die Eingabe von Nullen nicht viel Sinn. Aber wenn du außer der Reihe doch mal eine 0 brauchst? Wer den Trick kennt, tippt einfach 0.0 oder 0. in das Formularfeld ein. Das geht. Besser wäre es, wenn du gleich die Funktion is_numeric() verwenden würdest. Sie prüft, ob ein Wert eine Zahl ist. Nur dann gibt sie true zurück, ansonsten false! Das ist doch viel eleganter, findest du nicht? Und so sieht das Beispiel aus, wenn du statt !empty() mit is_numeric() arbeitest. (Dabei prüfe ich zuerst aus Sicherheitsgründen mit isset(), ob die Variable überhaupt existiert. Erst dann teste ich, ob sie einem Zahlwert entspricht. So vermeide ich Fehlermeldungen.)
163
Kapitel
6
Etwas Mathe: Taschen(geld)rechner
Ein weiterer Vorteil: Fehleingaben wie Buchstaben oder Leerzeichen werden auf diese Weise von vornherein ignoriert. Das Beispiel findest du unter dem Namen rechner_autor.php auf der CD zum Buch!
$_SERVER['PHP_SELF']: Daten an sich selbst schicken Wirf doch einmal einen kritischen Kontrollblick auf das Formular. Auf die erste Zeile deines Formulars. Die Aktion interessiert uns. Bisher haben wir hier den Dateinamen notiert:
oder auch:
Eigentlich ist das eine zuverlässige und sichere Lösung. Doch wenn du den Namen der eigentlichen Datei änderst? Und wenn du dann vergisst, auch den Wert hinter action zu ändern? Dann klappt die Formularauswertung natürlich erst einmal nicht und die Fehlersuche beginnt. Da gibt es eine beliebte, allerdings nicht sonderlich sichere Lösung! Es gibt eine sogenannte Servervariable, die Namen und Pfad der Datei zurückgibt. Diese Variable steht im Array $_SERVER zur Verfügung. Der entsprechende key (Schlüsselwert) für diesen Fall heißt 'PHP_SELF'. Notiere also $_SERVER['PHP_SELF']; und schon hast du den schönsten Selbstverweis. Denn diese Variable enthält im aktuellen Fall den Namen rechner.php oder rechner_hund.php (mit Pfad), je nachdem, wie dein PHP-Dokument heißt. 164
Wie viel bleibt übrig? Prozentrechnung! Mit anderen Worten: Du kannst dein Formular auch so einleiten: als Wert hinter action eintragen, auch wenn es nicht die sicherste Lösung ist. Oder du lässt das Gänsefüßchenpaar einfach leer – das funktioniert auch!
Der Quelltext im Überblick Im Beispiel möchtest du ermitteln, wie viel Prozent vom Taschengeld noch übrig geblieben sind. Du gibst Grundwert und Prozentwert ein und ermittelst den Prozentsatz. Die Einnahme entspricht dabei stets 100%, doch die Ausgabe, also der Prozentsatz?
165
Kapitel
6
Etwas Mathe: Taschen(geld)rechner
Mathematisch lässt sich das mit einem Dreisatz lösen. Du kannst auch Verhältnisgleichung dazu sagen. Die Einnahme ist bekannt, diese setzt du zu 100% (Wert 100) ins Verhältnis. Auch die Ausgabe kennst du, doch es fehlt die Angabe für Prozent. Du berechnest also Ausgabe * 100, geteilt durch Einnahme. Hier präsentiere ich dir nun den Quelltext im Überblick.
Teste das Skript ruhig einmal aus. Nimm für den Anfang einfache Werte. Du kannst als Einnahme 100 und als Ausgabe z. B. 20 notieren. Das Skript sollte nun auch für Prozent eine 20 ermitteln.
Die Funktion round() zum Runden Mache einmal ein Experiment mit krummen Werten! Gib bei der Einnahme eine 12 ein. Ausgegeben hast du dagegen 5 Euro 50 Cent: Für die Ausgabe notierst du also 5.5 (mit Punkt statt Komma, nicht vergessen!) und klickst auf BERECHNEN. Bei krummen Werten erfolgt die Ausgabe langer Nachkommastellen.
166
Huch, so eine lange Prozentzahl? So genau wolltest du es vielleicht gar nicht wissen? Du wünschst die Prozentangabe lieber mit zwei oder ganz und gar ohne Nachkommastellen?
Wie viel bleibt übrig? Prozentrechnung! Nutze die Funktion round(). Die Syntax lautet: round(Wert, Nachkommastellen)
Für den Platzhalter Nachkommastellen notierst du einfach den gewünschten Wert, z. B. 2 oder 0. Im Beispiel werde ich den Prozentsatz mit zwei Nachkommastellen ausgeben. Dazu füge ich eine zusätzliche Zeile ein: echo "
Das Ergebnis lautet $c.
\n"; $d = round($d, 2); echo "
Ausgegeben wurden also $d Prozent.
\n";
Die Zahl in der Variablen $d wird lediglich gerundet und erneut in $d gespeichert. Das Ergebnis kann sich sehen lassen:
Gerundet sieht der Prozentsatz doch viel schöner aus!
Du findest das Skript unter dem Namen round.php auf der CD!
Zahlen formatieren mit sprintf() So ganz zufrieden bin ich bisher jedoch immer noch nicht. Die Prozentzahl haben wir wunderbar gerundet. Doch was ist mit dem Dezimalbruch für die Währung? Diese Zahl erscheint mal ohne Dezimalstellen, mal mit einer (wie im Beispiel) oder in manchen Fällen mit zweien. Gerade für die Ausgabe der Währung wäre eine einheitliche Schreibweise schön! Die Zahl sollte stets mit zwei Nachkommastellen angezeigt werden! Kein Problem, diesen Wunsch erfüllt uns die Funktion sprintf(). Diese Funktion formatiert einen String (oder eine Zahl) und gibt diese formatiert zurück. Die Grundsyntax lautet: sprintf("Formatieranweisung", Argument2)
Das zweite Argument ist klar, da setzen wir die Variable $c ein. Doch wie sieht das erste Argument aus, welche Formatieranweisung sollen wir nehmen? 167
Kapitel
6
Etwas Mathe: Taschen(geld)rechner
Die von mir empfohlene Formatieranweisung heißt %01.2f. Bitte frage mich nicht, was sich genau hinter dieser Zeichenfolge verbirgt, sondern merke sie dir einfach. Die von dir zu verwendende Funktion lautet im Beispiel demnach sprintf("%01.2f", $Variable). Diese Formatieranweisung sorgt dafür, dass der Wert der Variablen stets mit zwei Nachkommastellen ausgegeben wird. Probiere es aus. Das derart erweiterte Skript sieht folgendermaßen aus. Auf der CD findest du es unter dem Namen sprintf.php:
Der Wert wird nun stets mit zwei Nachkommastellen angezeigt.
Im gewissen Sinne besteht eine Verwandtschaft zu round(): Zuviel Nachkommastellen werden gerundet. Im Gegensatz zu round() füllt sprintf() die fehlenden Nachkommastellen jedoch mit Nullen auf.
168
Schnell noch ein Supertipp von mir! Wie wäre es mit der Ausgabe der Währung? Auch das kannst du mit der Funktion sprintf() erledigen! Schreibe einfach sprintf("%01.2f Euro", $c) und schon erscheint hinter dem Wert der Text Euro.
Traurige Säulen: Ergebnis als Diagramm
Die Formatier-Funktion eignet sich sogar zur Ausgabe der Zeichenfolge Euro.
Vergleiche mit dem Quelltext der Datei sprintf_euro.php von der CD! Du gibst einen Ausgabewert ein, der höher liegt als der Einnahmewert? Oder sogar eine negative Zahl? Dann entspricht der ermittelte Prozentwert möglicherweise nicht deinen Erwartungen! Um ganz professionell vorzugehen, könntest du diese Fehleingaben durch if-Abfragen abfangen. Und so wird es in der Praxis auch tatsächlich gemacht. (Mehr zu dieser Technik erfährst du im Kapitel 8.) Im Beispiel verzichten wir jedoch aus Gründen der Vereinfachung darauf!
Traurige Säulen: Ergebnis als Diagramm Hast du Lust, mit den Zahlen etwas zu spielen? Erstelle zur Abwechslung doch einmal ein Säulendiagramm. Bei dieser Gelegenheit rundest du den Prozentwert so, dass keine Nachkommastellen übrig bleiben.
Einfach aber wirkungsvoll: Ein Säulendiagramm zur Visualisierung der Daten.
Zuerst zeige ich dir den kompletten Quelltext im Überblick. Danach folgt die kurze Erklärung. Aber eigentlich ist da gar nicht viel zu erklären. 169
