docKAPITEL 4
download 
Denúncia Transcrição
KAPITEL 4
KAPITEL 4
Interaktive
Programmierung
HTML-Formulare und PHP •
Gästebuch •
Blackjack •
Funktionsplotter •
Chat •
Forum •
Dateibasierter Einkaufskorb •
KAPITEL 4
Internet ist Kommunikation und Interaktion. Der Reiz von PHP liegt im
Austausch von Information zwischen dem Besucher und der Homepage.
Wenn im vorherigen Kapitel die Inhalte zumeist Monologe waren, das
heißt, der Besucher keinen Einfluß auf den Programmablauf hatte, setzen
wir uns in diesem Kapitel mit dem Dialog auseinander und werden Informationen verarbeiten und HTML-Formulare auswerten.
4.1
HTML-Formulare und PHP
Im folgenden HTML-Formular sind der Großteil aller erlaubten HTML-Tags
in Formularen und die zugehörigen Parameter gemäß HTML 4.0 dargestellt:
Listing 4.1: Scripte einfache Programmierung\formular.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>MyForm</title>
<script language="javascript" type="text/javascript">
function java() {
document.MyForm.submit();
};
</script>
</head>
<body>
<!-- Formular-definition -->
<form action=htmlphp.php method=post name="MyForm"
target="frame1" onSubmit="" enctype="multipart/form-data">
<!-- mögliche Typen -->
<!-- Textfeldtypen -->
<fieldset>
<legend><b>Textfeldtypen</b></legend>
<table width="100%" border=1>
<tr><td>Text:</td>
<td><input type=text name="text" value="text" size=40 maxlength=40
readonly tabindex=7 disabled></td></tr>
<tr><td>Password:</td>
<td><input type=password name="password" value="pw"
maxlength=10 size=10></td></tr>
<tr><td>Textarea:</td>
<td><textarea name="textarea" rows=5 cols=40 disabled>
Textvorbelegung</textarea></td></tr>
<tr><td>Versteckt:
<td><input type=hidden name="hidden" value="heimlich"></td></tr>
</table>
</fieldset>
170
PHP 4
INTERAKTIVE PROGRAMMIERUNG
<!-- Auswahltypen/Menue -->
<fieldset>
<legend><b>Auswahltypen</b></legend>
<table border=1 width="100%"><tr><td width="50%">
Auswahlfeld Multiple:<br>
<select name="selectmultiple[]" size=4 multiple>
<optgroup label="label1">
<option value="A11" disabled> Auswahl 11
<option selected value="A12"> Auswahl 12
<option selected value="A13"> Auswahl 13
</optgroup>
<optgroup label="label2">
<option value="A21"> Auswahl 21
<option value="A22" disabled> Auswahl 22
<option selected value="A23"> Auswahl 23
</optgroup>
</select><br>
Auswahlfeld Normal:<br>
<select name="selectnormal1" size=3>
<optgroup label="label">
<option value="A1" disabled> Auswahl 1
<option selected value="A2"> Auswahl 2
<option selected value="A3"> Auswahl 3
</optgroup>
</select><br>
</td>
<td width="50%">
Radiobutton:<br>
<input type=radio name="rad1" value="alt1" disabled> wert1<br>
<input type=radio name="rad1" value="alt2" checked> wert2<br>
<input type=radio name="rad1" value="alt2"> wert2<br>
Checkboxen:<br>
<input type=checkbox name="CB1[]" value="opt1" disabled> Option 1<br>
<input type=checkbox name="CB1[]" value="opt2" checked> Option 2<br>
<input type=checkbox name="CB1[]" value="opt3"> Option 3<br>
</td></tr>
</table>
</fieldset>
<fieldset>
<legend><b>Dateiupload</b></legend>
<input type=file size=50 maxlength=100000 name="Datei" accept="text/*">
</fieldset><br>
<!-- Buttontypen -->
<fieldset>
<legend><b>Befehlsschaltflächen</b></legend>
<input type=button name="B1" value="Zurück" onClick="java()" tabindex=6>
<input type=button name="B1" value="Vor" onClick="submit()" tabindex=5>
<input type=submit name="B2" value="Submit1" tabindex=4 disabled>
<input type=submit name="B2" value="Submit2" tabindex=3>
<input type=reset name="B2" value="Reset" tabindex=2>
PHP 4
171
KAPITEL 4
<button name="B3" type="button" tabindex=1 accesskey="p" value="go
back" onClick="submit()">
<img src="php.gif" alt="Klickbild">
press Alt-'p'
</button>
<input type=image src="php.gif" name="B4" value="Submit4"
accesskey="s" alt="image">
</fieldset>
</form>
</body>
</html>
Weiter unten finden Sie eine Kurzbeschreibung der HTML-Syntax für dieses Formular.
Zuvor jedoch zwei wichtige Links zum Thema HTML:
»www.w3.org«: Adresse des World-Wide-Web-Consortiums, das die oberste Instanz für Definitionen und Konventionen des Internets darstellt. Hier
finden Sie alle Standards über Protokolle und Sprachen detailliert
beschrieben.
Dort, unter »http://validator.w3.org/check« befindet sich ein HTML-Syntax-Check, der beliebige HTML-Seiten Ihrer Homepage auf gültige Syntax
überprüft und auch die Fehler anzeigt. Obiges Script lieferte »nur« noch
den Fehler, daß im <form>-Tag ein name=-Parameter nicht bekannt sei.
Das trifft zu, denn er ist ein Teil der Definition des Browser-DocumentObjekts.
»www.teamone.de/selfaktuell/«: Adresse der Homepage von Stefan Münz,
der das Dokument SelfHTML sein eigen nennt. Es ist die wohl beste und
umfassendste deutsche Beschreibung von HTML. Er geht insbesondere
auch auf die Unterlassungen der Marktführer in der Umsetzung der von
WC3 vereinbarten HTLM Sprachelemente ein.
Zum obigen HTML-Script dennoch eine kurze Erklärung:
JavaScript: die Funktion Java() ruft die Methode submit() des Objekts
MyForm auf, das weiter unten als Formular erzeugt wird.
Zwischen <form..> und </form> stehen alle Formularelemente.
Hier die Parameter des einleitenden <form>-Tags:
action=, der Name der Datei, die den Inhalt des Formulars verarbeiten
soll.
method=, in der Regel Post, mit Get werden die Inhalte mit der URI übergeben, was schon aus optischen Gründen vermieden werden sollte.
name=, optional, aber sinnvoll bei JavaScript.
target=, bestimmt den Frame oder mit _blank eine neue Browserinstanz.
172
PHP 4
INTERAKTIVE PROGRAMMIERUNG
onSubmit ist ein möglicher Java-Event-Handler.
enctype=, Kodierungs- beziehungsweise Dekodierungstyp der Formulardaten.
<fieldset>..</fieldset> erzeugt einen Rahmen (nur MSIE). Mit
<legend>Name</legend> wird ein Titel im Rahmen gezeigt (nur MSIE).
<table>...<table> sorgt für die Abbildung des Formulars innerhalb der
Tabelle.
<tr> </tr> umkleidet hierbei eine Zeile, innerhalb derer mit <td> </td> Zellen erzeugt werden.
<input type=text..> erzeugt ein Texteingabefeld.
<input type=password..> erzeugt ein Passwortfeld, bei dessen Ausfüllen »*«
Sterne angezeigt werden.
<textarea name="textarea"...>Text</textarea> erzeugt ein mehrzeiliges Eingabefeld. Mit wrap= kann das Verhalten des Zeilenumbruchs eingestellt
werden. Bei <textarea> gibt es keinen value-Parameter. Die Vorbelegung
kommt zwischen Start- und Endtag.
<input type=hidden...> erzeugt ein verstecktes Formularelement, das zur
Speicherung und Versenden von weiteren Daten verwendet werden kann.
Die kann zum Beispiel eine Mitglieds- oder Warenkorbnummer sein, aber
auch Werte aus der Browserumgebung, beispielsweise »navigator.appName«.
<select ..> </select> umschreibt ein Auswahlfeld. Dies ist entweder »normal« oder »multiple«. Das heißt, der Besucher kann mittels gedrückter
[Strg]-Taste eine oder mehrere gebotene Optionen auswählen und absenden. Der name-Parameter muß dann durch die eckigen Klammern »[]« als
Array definiert werden, sonst erhält PHP immer nur die zuletzt gewählte
Option. Mit size= wird maßgeblich über die Anzahl der Zeilen des Optionsfeldes auch sein Verhalten bestimmt. Mit size=1 erzeugt man ein sogenanntes Drop-down-Feld mit einem Pfeilbutton zum Öffnen; mit size>=1
eine Auswahlliste innerhalb einer Box mit vertikalem Scrollbalken, sofern
erforderlich (size ist kleiner als die Anzahl der Optionen).
Unter Verwendung von »multiple« ist eine Nullauswahl möglich, ohne den
Zusatz »multiple« hingegen nicht.
<input type=radio...> bietet eine Auswahl von Alternativen. Der funktionale
Zusammenhang einer Radio-Button-Gruppe wird über den gleichnamigen
Parameter name= hergestellt. Es muß minimal eine Alternative gewählt
werden.
<input type=checkbox...> bietet eine Auswahl von Optionen, Mehr- und
Nullauswahl ist erlaubt. Der mit Name angegebene Wert soll mit den eckigen Klammern ein Array in PHP realisieren.
PHP 4
173
KAPITEL 4
<input type=file .. dient zum Datei-Upload. Der Encoding-Typ des Formulars muß dann multipart/form-data sein; das von action benannte und mit
submit() gerufene Script muß den Datenstrom verarbeiten.
<input type=button ...> Dieser Button muß entweder eine JavaScript-Funktion rufen, die mittels submit() oder per get (location.href=xy.php?parameter=...) ein anderes Script (PHP/Perl etc.) aufruft, oder wie gezeigt gleich
im Tag die submit()-Funktion auslösen. Ersteres bietet die Chance, die Eingaben vor dem Absenden mittels Java zu überprüfen.
<input type=submit...> sendet die Daten direkt über submit() ab. Es darf im
Formular beliebig viele solcher Buttons geben. Bei Gleichnamigkeit wird
im aufgerufenen Script value zum Inhalt der Variablen, die mit name=
benannt wurde.
<input type=reset..> setzt die Formularfelder wieder auf die Voreinstellungen, also die Werte vom value=-Parameter.
<button type="button"...> bietet einiges an Möglichkeiten, funktioniert aber
leider nur mit dem MSIE.
<input type=image...> ist immer ein Submit-Button und funktioniert bei
»ähnlicher« Visualisierung wenigstens mit Netscape 4.7 und MSIE 5.01.
Allgemeines zu einigen Parametern:
size= beschreibt die Größe im Browserfenster, während maxlength= die
maximale Zeichenkettenlänge bestimmt.
readonly und disabled zum »Ausgrauen« funktionieren bei Netscape 4.7
prinzipiell nicht, während der MSIE diesen Wert nur beim <select..>-Tag
ignoriert.
<fieldset>..</fieldset> und <label></label> werden von Netscape ignoriert.
Der Parameter accesskey funktioniert nicht mit Netscape 4.7.
Sofern Sie also Programmteile Ihrer Homepage von diesen Parametern
und Tags abhängig machen, weil Sie meinen, HTML 4.0 wäre ein bindender Standard, laufen Sie Gefahr, daß die logischen Abläufe Ihrer Webanwendung unsicher werden. So ist beispielsweise ein mit disabled ausgeschalteter Button unter Netscape noch funktionstüchtig, während MSIENutzer ihn nicht mehr verwenden können.
Wirkungen in PHP:
name=, der in einem Formularelement angegebene Wert korrespondiert
bei Aufruf eines PHP-Scriptes aus dem Formular umgehend mit einer entsprechenden gleichnamigen Variable in PHP. Der Wert der Variable ist
dann immer der letzte value von dem Feld bei Absenden des Formulars.
Ausnahmen: Bei Feldern mit möglicher Mehrfachauswahl (select mit »multiple« oder Typ »checkbox«) wird nur der zuletzt gewählte Wert an PHP
174
PHP 4
INTERAKTIVE PROGRAMMIERUNG
übergeben, wenn das zugehörige Formularelement im name=-Parameter
nicht mit eckigen Klammern als Array indiziert wird.
Die Auswertung in PHP muß dann natürlich auch auf ein Array abgestimmt sein.
So chaotisch das oben gezeigte Beispielformular wirken mag, ist es dennoch voll einsatzfähig und syntaktisch vom W3C überprüft. Hier ist die
Ansicht im MSIE:
Abb. 4.1:
Beispielformular
Die Auswertung erfolgt in einem separaten Script, das gemäß der actionAngabe im Form-Tag des Formulars »htmlphp.php« heißen muß:
Listing 4.2: Scripte einfache Programmierung\htmlphp.php
<?
// Ausgabe/Überprüfung des Beispiel-Formulares
echo "<u>Textfeldtypen: </u><br>";
echo "Textfeld = $text <br>";
echo "Password = $password <br>";
echo "Textarea = $textarea <br>";
echo "Hidden = $hidden <br>";
echo "<u>Auswahlfeldtype</u><br>";
PHP 4
175
KAPITEL 4
echo "Selectmultible:";
foreach ($selectmultiple as $option) echo "Option = $option,";
echo "<br>";
echo "Select normal: $selectnormal1<br>";
echo "Radiobutton: $rad1<br>";
echo "Checkbox:";
foreach ($CB1 as $option) echo "Option = $option,";
echo "<br>";
echo "Dateiupload: $Datei<br>";
echo " Dateiname: $Datei_name<br>";
echo " Dateitype: $Datei_type<br>";
echo " Dateigröße: $Datei_size<br>";
// Transfer der Datei aus dem Temp-Verz.
// in das Root des Servers nach dem Upload
@copy($Datei,$Datei_name);
echo "<u>Buttontypen</u><br>";
echo "Buttons B1:$B1<br>";
echo "Buttons B2:$B2<br>";
echo "Buttons B3:$B3<br>";
echo "Buttons B4:X:$B4_x, Y:$B4_y<br>";
?>
Das Script arbeitet die Felder des Formulars genau in der Reihenfolge der
Felder in der HTML-Datei ab.
Wichtig sind hier die Felder mit multiplen Auswahlmöglichkeiten – sie
werden als Array im empfangenden Script behandelt. Sie müssen als Programmierer überprüfen, welche und wie viel Optionen markiert wurden
und unter Umständen das Datenformat wandeln.
Das Datei-Upload bildet auch einige Besonderheiten ab: Die hochgeladene
Datei, hier »manual.html«, liegt bis zum Ablauf des Scriptes in einem temporären Verzeichnis des Servers. Nur während des Ablaufs können Sie
diese Datei mittels copy() an ihren Bestimmungsort bringen, danach ist
sie unweigerlich gelöscht. Akzeptieren Sie nie Dateien auf diese ungeprüfte Weise, sondern führen Sie Überprüfungen bezüglich des Inhalts
und eventuell der Größe durch. Der Upload mit mehreren Dateien in
einem Formular geschieht analog, nur daß Sie bei allen <input>-Tags den
Parameter name= identisch bezeichnen und eckige Klammern hinten
anstellen, also beispielsweise name="MyFiles[]". In PHP bilden sich durch
ein solches Formular insgesamt vier Arrays mit den Namen $MyFiles,
$MyFile_name, $MyFiles_size und $MyFiles_type, deren Elementezahl die
Anzahl der gleichnamigen Formularfelder ist. Die Kopie der beispielsweise zweiten Datei aus dem Temporärverzeichnis des Servers in einen
Ihnen genehmen Bereich geschieht dann mittels:
copy($MyFiles[1],'\MeinVerzeichnis\'.$MyFiles_name[1]);
Der Button B3 liefert unter Verwendung des MSIE den gesamten Inhalt der
HTML-Datei zwischen den <Button>- und </Button>-Tags, und zwar immer!
176
PHP 4
INTERAKTIVE PROGRAMMIERUNG
Also nicht nur, wenn der Button auch geklickt wird. Bei Aufruf mit Netscape bleibt die Variable B3 leer.
Der Button B4 liefert unter beiden Browsern die X- und Y-Koordinate des
Mausklicks innerhalb des Buttons. Hier verbergen sich hervorragende
Möglichkeiten der interaktiven grafischen Gestaltung.
Beim Netscape 4.73 wird der Parameter disabled nicht nur auf der Formularseite ignoriert, sondern auch beim Versand der Formulardaten. Während der MSIE aus dem mit disable abgeschalteten Textfeld keinen Wert
übermittelt, empfängt PHP bei Verwendung des Netscape den voreingestellten Wert. Es bleibt wieder an Ihnen hängen, solche Bugs oder Unterlassungen abzufangen.
Hier noch die Ausgabe des Scriptes im Browser. Ich empfehle, sich zum
besseren Verständnis alle beteiligten Dateien in die Entwicklungsumgebung zu holen und experimentell damit zu arbeiten.
Das Verständnis der Zusammenarbeit zwischen HTML-Formulartags, der
Parameter und deren halbautomatische Umsetzung in PHP-Variablen ist
elementar erforderlich zum Umgang mit der Entwicklungsumgebung und
bildet die größte Fehlerquelle bei Anfängern.
Scheuen Sie sich nicht, mit dem oben angeführten Formular und Script zu
spielen, das Original finden Sie auf der Buch-CD. Und testen Sie das Script
mit beiden Browsern.
Abb. 4.2:
Die Auswertung
des Formulars
PHP 4
177
KAPITEL 4
Wenn Sie die Ansicht des HTML-Formulars mit der Browseransicht der
späteren Datenausgabe vergleichen, wird Ihnen auffallen, daß die Daten
des <textarea> ...</textarea>-Elementes im Browser um die Leerzeichen
verkürzt zurückgegeben werden. Wenn Sie sich den Quelltext im Browser
ansehen, wird deutlich, warum: Das Formularelement sendete Leerzeichen (ASCII 32), und ein HTML-Interpreter, der Browser, stellt dieses Zeichen ohne besondere Maßnahmen maximal immer einmal dar, nie mehrere Leerzeichen nebeneinander. Ein Browser erwartet für ein
Leerzeichen die Zeichenkette » «. Das nächste Beispiel geht auf
diese Datenformate zwischen PHP und Browser näher ein.
4.1.1
Datenformate
Ein HTML-Formular sendet die Formulardaten im Format »application/xwww-form-urlencoded«. Das heißt, alle Leerzeichen und viele Sonderzeichen werden normal nicht als solche zurückgesendet, sondern sind in
einer solchen Form kodiert: »Danke+f%FCr+die+Hilfe%21«.
Abb. 4.3:
Testformular
178
PHP 4
