PHP Basics (2)

Eine Sprache hatten wir schon angesprochen: (My)SQL. Wir kommen später darauf zurück.

Jetzt geht es erstmal um HTML. HTML steht für Hypertext Markup Language. Sie ist keine Programmiersprache, sondern eine Seitenbeschreibungssprache (und insofern schon eine Computersprache). Sie stellt quasi das Futter für jeden Browser dar. Browser sind z.B. Mozilla Firefox, Microsoft Internet Explorer, Opera oder Google Chrome. Wenn du Mozilla Firefox verwendest, so mache einmal folgendes Experiment: Steuere deine Lieblings-Internet-Seite an und wähle dann EXTRAS / WEB-ENTWICKLER / SEITENQUELLTEXT ANZEIGEN. Schon siehst du jede Menge HTML-Befehle, -Tags und -Codierungen. Mit dem Internet Explorer geht es (ausnahmsweise) einfacher: Wähle ANSICHT / QUELLE. Der gleiche Effekt tritt auf. Die Menüführung des Browsers dorthin kann von Version zu Version etwas abweichen, bleibt aber mindestens ähnlich.

Erstelle nun ein HTML-Dokument. Das geht so:

Nimm den Windows-Editor, oder, viel besser, lade dir „Notepad++“ herunter und installiere ihn. Mit ihm kannst du durch sogenanntes Syntaxhighlighting deinen baldigen Quellcode viel besser sehen, weil er dann strukturiert und farbig ist. Der Vorteil gegenüber dem normalen Windows-Editor ist immens!

Starte Notepad++ und lege eine neue Datei namens query.html an. So darf die Datei nicht heißen:

query.htm

query.html.htm

query.htm.html

query.html.html

query.htm.htm

Deswegen achte darauf, dass dein Windows-Explorer die Dateinamenerweiterungen (Extensionen) anzeigt, also das, was nach dem „.“ steht. Anderenfalls gibt es später unangenehme Überraschungen. Also: query.html

Fülle die ersten beiden Zeilen deiner jungfräulichen Datei mit folgendem:

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&gt;

Hierbei handelt es sich um einige Angaben für den HTML-Code interpretierenden Browser. Sie sagen etwas über die verwendete HTML- oder XHTML-Version aus. Mehr müssen wir an dieser Stelle nicht darüber wissen. Kopiere den Code am besten aus dem Block in deine query.html, so kannst du dich nicht vertippen. Wir fügen eine Leerzeile ein (bessere Übersicht) und dann in Zeile 4:

<html>

(Übrigens: Du siehst beide Codes, query.html und query.php, wie sie final sein sollen, hübsch strukturiert mit Zeilennummern und vielen element-abhängigen Farben, im späteren Blog-Verlauf; also keine Sorge, was den Überblick betrifft. 🙂 )

Das <html> ist ein öffnendes Tag (sprich: „täg“). Es lässt html-Code beginnen. Als Zeile 5 füge nun ein:

<head>

Auch dies ist ein öffnendes Tag. Es lässt den Kopf des html-Dokumentes beginnen. Hierauf füge ein (Zeile 6):

<meta http-equiv=“content-type“ content=“text/html; charset=ISO-8859-1″>

Hiermit werden erneut einige Einstellungen vereinbart, nämlich was den verwendeten Zeichensatz betrifft. Zeile 7 soll lauten:

<title>Buecher Abfrage</title>

Zwischen dieses öffnende und schließende Tag kannst du den Titel deiner Seite setzen. Er erscheint beim Aufruf durch einen Browser sowohl als Titel des Browserfensters, als auch als Text im Browser-Tab. Es folgt Zeile 8:

</head>

Der Slash („/“) zeigt an, dass dies ein schließendes Tag ist. Das Tag sagt: Der Kopf des html-Dokumentes wird hiermit beendet. Zeile 9:

<body bgcolor=“#D4ECFB“>

Hier wird der Körper des HTML-Dokuments geöffnet, verbunden gleichzeitig mit einer Zuweisung der Hintergrund (bg = background)-Farbe. #D4ECFB ist ein zartes Lila. 🙂 Zeile 10:

<h3>Willkommen auf der Suchseite für Bücher, die Karl Gustav gelesen hat!</h3>

Hiermit wird zum ersten Mal in deiner neuen query.html etwas für den Leser deiner Site ausgegeben, nämlich ein Willkommensgruß in der „Überschriftenklasse headline 3“. Natürlich ist dies nur ein Beispielsatz, den du nach Gutdünken für dich modifizieren kannst. Es folgt wieder eine strukturierende Leerzeile.

Und jetzt wird es programmtechnisch interessant! Wir fügen eine Zeile 12 ein:

<form action = „query.php“ method = „post“>

Sie sagt: die query.html soll eine query.php aufrufen und dabei Werte übergeben, die der Benutzer deiner Site zuvor in das Formular eingegeben hat. Um das zu verstehen, sollten wir uns jetzt vielleicht einmal ansehen, wie die query.html im Browserfenster aussieht, wenn sie einmal fertig ist. Dazu betrachte bitte nun Bild 2-1:

Bild 2-1

So stellt ein Browser die fertige query.html dar. Du siehst die Willkommensüberschrift, du siehst eine Schaltfläche zum „Daten absenden“ und eine zum „Zurücksetzen“ (wenn einer deiner Betrachter sich vertippt hat) und du siehst im roten Kasten … genau, die guten alten Felder unserer Datenbank. query.html ist nämlich dazu da, zu leisten: „Hallo Benutzer der Datenbank im Internet! Sag mir, auf welche Angaben es dir ankommt und ich sorge dafür, dass dir die passenden Bücher angezeigt werden.“

Mein Vorgriff war nötig für die Erläuterung der weiteren query.html-Zeilen, denn nun weißt du, was sie letztlich bewirken. Nun, dann mal gleich die nächste Zeile (14):

<table>

Zwei größer-kleiner-Zeichen, als ein Tag; kein Slash (/), also ein öffnendes Tag. Es sagt zum interpretierenden Browser: Beginne hier mit einer Tabelle. Es folgen zwölf Zeilen (eine ist so lang, dass sie umbrochen wird), die sich auf die zwölf Felder der Bücherdatenbank beziehen. Du erinnerst dich?

AutorNachname
AutorVorname
Titel
Untertitel
Ort
Verlag
Jahr
Kategorie
Art
Uebersetzungvonin
wanngelesenetwa
Kommentar

Diese zwölf Felder werden nun vom Browser anhand der query.html tabellarisch dargestellt. Aber mehr noch: Sie bekommen einen für PHP interpretierbaren Namen zugewiesen. Dieser Name ist in unserem Beispiel der Einfachheit halber schlicht gleich dem Datenbank-Feld-Namen. Das heißt konkret (z.B. Zeile 16):

Schaffe ein Eingabefeld, in das der Benutzer der Datenbank etwas eingeben kann und übergib dann, was der Benutzer eingegeben hat, unter dem Namen „AutorNachname“ an die query.php.

Und so geht es auch mit den übrigen elf Feldern der Datenbank, die der letztliche Benutzer so bestimmen kann. Nehmen wir an, er gibt bei „Nachname des Autoren“ „Fontane“ an… dann wird unser hier programmiertes System ihm zwei Ergebnisse liefern, nämlich „Irrungen, Wirrungen“ und „Effi Briest“ von Theodor Fontane. Das ist das Ziel und die Zeile

<tr><td><input name = „AutorNachname“ size=“60″ /> Nachname des Autoren</td></tr>

ist ein Element davon.

Übrigens: <tr> heißt: lasse eine Tablerow (Tabellenzeile) beginnen, und </tr> heißt: schließe sie wieder. <td> heißt: lasse Tabledata (Tabellendaten) beginnen und </td> schließe sie wieder.

Und so geht es, wie gesagt, noch elfmal, für jedes Feld gibt es eine solche Zeile in der query.html. Es folgt

</table>

und was sagt das? Genau: Schließe die Tabelle wieder.

<input type=“submit“ />
<input type=“reset“ />

fügen die Absenden-Schaltfläche und die Zurücksetzen-Schaltfläche ein (vgl. Bild 2-1).

</body>
</html>

schließen den Körperbereich und dann das ganze HTML-Dokument.

Nach all der grauen Theorie Lust auf was Praktisches? Okay, dann füge in deine junge query.html genau alle diese Zeilen ein und speichere sie ab. Wollen mal sehen, was ein Browser aus deinem Werk macht. Steuere mit deinem Windows-Explorer die Datei an und klicke doppelt auf sie; im Idealfall öffnet sich dein Standard-Browser und zeigt die Datei so an, wie es später im Netz auch der Fall sein wird:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Abfrage B&uuml;cher</title>
</head>
<body bgcolor="#ececec">
<h3>Willkommen auf der Suchseite f&uuml;r B&uuml;cher, die Karl Gustav gelesen hat</h3>

<form action = "query.php" method = "post">

<table>

<tr><td><input name = "AutorNachname" size="60" /> Nachname des Autoren</td></tr>
<tr><td><input name = "AutorVorname" size="60" /> Vorname des Autoren</td></tr>
<tr><td><input name = "Titel" size="60" /> Titel</td></tr>
<tr><td><input name = "Untertitel" size="60" /> Untertitel</td></tr>
<tr><td><input name = "Ort" size="60" /> Ort</td></tr>
<tr><td><input name = "Verlag" size="60" /> Verlag</td></tr>
<tr><td><input name = "Jahr" size="60" /> Jahr</td></tr>
<tr><td><input name = "Kategorie" size="60" /> Kategorie</td></tr>
<tr><td><input name = "Art" size="60" /> Art</td></tr>
<tr><td><input name = "Uebersetzungvonin" size="60" /> &Uuml;bersetzung von... in...</td></tr>
<tr><td><input name = "wanngelesenetwa" size="60" /> wann gelesen etwa?</td></tr>
<tr><td><input name = "Kommentar" size="60" /> Kommentar</td></tr>

</table>
<br />
<input type="submit" />
<input type="reset" />
<br />
</body>
</html>

Bild 2-2

Wenn du in diesem Blog die Codezeilen nicht sofort bis zu Ende lesen kannst, benutze den Quer-Scrollbalken unter dem Code. Auch kannst den Code markieren und in deinen Editor einfügen, um ihn besser sehen und selber bearbeiten zu können.

Bis hierher bist du also gekommen? Glückwunsch!

Wenn es auf diesem Weg Probleme gab, nicht kapitulieren! Du kannst das Problem googeln, du kannst es in Foren beschreiben, du kannst mit anderen Bloggern oder mit mir (Kommentarfunktion dieses Blogs) darüber diskutieren. Es wäre geradezu ungewöhnlich, wenn bis hier alles reibungslos geklappt hätte. Leider bin ich auch kein großer Didakt/Methodiker und bin, sicherlich zu deinem Leidwesen, oft gesprungen, habe Unbekanntes als bekannt vorausgesetzt und bin dem roten Faden nicht immer gefolgt. Ich hoffe aber doch, dass diese Anleitung etwas an neuem Wissen entfaltet und nicht völlig in die Verwirrung führt.

Lies nun im dritten Teil dieses Blogs, was es (wir hatten etwas SQL und HTML) mit PHP auf sich hat. Navigiere zum nächsten Eintrag von streethawk68: Wie man eine Access-Datenbank ins Internet bringt (3)

Advertisements

Über streethawk68

43 years old IT-Fan
Dieser Beitrag wurde unter Uncategorized abgelegt und mit , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s