KAPITEL 4. Interaktive Programmierung. HTML-Formulare und PHP Gästebuch Blackjack Funktionsplotter Chat Forum Dateibasierter Einkaufskorb

Transkript

1 Interaktive Programmierung HTML-Formulare und PHP Gästebuch Blackjack Funktionsplotter Chat Forum Dateibasierter Einkaufskorb

2 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>  <form action=htmlphp.php method=post name="myform" target="frame1" onsubmit="" enctype="multipart/form-data">   <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

3 INTERAKTIVE PROGRAMMIERUNG  <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= name="datei" accept="text/*"> </fieldset><br>  <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

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:» 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» 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-Document- Objekts.» 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

5 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.app- Name«. <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

6 <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 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 MSIE- Nutzer 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

7 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 action- Angabe 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

8 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 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

9 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

10 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 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