Heyho,
weiter geht's mit PHP. Im letzten Artikel hab ich dir gezeigt, was Arrays sind. Praktisch, denn dieses Wissen brauchst du für die Arbeit mit Formularen, vor allem hinsichtlich GET- und POST-Requests. Los geht's würde ich sagen!
Wie im allerersten PHP-Artikel bereits angekündigt wäre ein Grundwissen in HTML nicht schlecht. Du weißt also vielleicht schon, wie man die Grundstruktur von HTML-Dateien erstellt und bestenfalls auch, wie man Formulare bastelt. Kannst du? Sehr gut, dann lass uns anfangen.
<h2>Was sind HTML-Formulare?</h2>
HTML-Formulare sind Formulare in denen der Benutzer gewisse Dinge eintragen kann. Eingeleitet wird ein HTML-Formular mittels des form-Tags. Kurzes Beispiel:
<pre class="lang:php decode:true "><form method='POST' action='./ziel.php'> <!-- Hier werden die Eingabefelder platziert --> </form></pre>
Wichtig sind hier die zwei Attribute "method" und "action":
<ul> <li><strong>method</strong> Attribut Legt die HTTP-Methode fest, in der die Daten an den Server übermittelt werden. Diese kann entweder GET (via Adresszeile) oder POST sein. Entspann' dich, das wird gleich noch ausführlich erklärt.</li> <li><strong>action</strong> Attribut Legt die Datei fest, an die die Daten übermittelt werden. Im Normalfall wird also dort der Pfad und Name zu der PHP-Datei eingetragen, die die übermittelten Daten verarbeitet.</li> </ul>
Es gibt mehrere Felder. Je nachdem wofür das Formular bestimmt ist, platziert man entsprechende Felder (man verwendet auch gern den Begriff Steuerelemente, Formelemente oder Feldelemente). Schauen wir mal, was es so gibt:
<ul> <li>Textfelder Denkbar einfach ist die Funktion dieses Feldes - eine stinknormale Textbox, in der der Benutzer beliebigen Text via Tastatur eingeben kann. Zum Beispiel zur Eingabe des Namens, der E-Mail Adresses oder sonstigen Text. Easy.</li> <li>Passwortfeld Das gleiche wie ein normales Textfeld, nur dass die Zeichen bei der Eingabe maskiert dargestellt werden, z.B. mit diesen schwarzen Punkten oder auch mit Sternchen. Hast du sicher schonmal gesehen wenn du dein Passwort irgendwo eintippen musstest.</li> <li>Checkboxen Das sind diese kleinen viereckigen Kästchen, in denen man per Mausklick einen Haken setzen und wieder rausnehmen kann. Sieht man oft wenn man bei einer Registrierung den AGBs und Nutzungsbedingungen zustimmen muss (die man natürlich sorgfältig durchgelesen hat). Es können auch mehrere Checkboxen vorkommen, zum Beispiel wenn man dem Benutzer beim Kauf eines Neuwagens die Möglichkeit bieten will, die Ausstattung zu wählen (Sportpaket -> Haken rein, Ledersitze ... zu teuer, kein Haken, integriertes Navi -> Haken rein und so weiter).</li> <li>Radiobuttons Sehen so ähnlich aus wie Checkboxen nur rund. Im Regelfall gibt es immer mehr als einen Radiobutton, von denen man dann quasi eine Option auswählen kann. Zum Beispiel wenn man dem Benutzer beim Kauf mehrere Zahlungsmodelle oder Zahlungsmethoden anbieten möchte. Hier macht es ja nur Sinn, von allen verfügbaren Zahlungsmethoden EINE zu wählen. Entweder also PayPal ODER Ãberweisung ODER mit Kreditkarte etc...</li> <li>DropDown Eine einfache aufklappbare Liste mit Optionen, die gewählt werden können. Je nach Einstellung kann hier optional Mehrfachauswahl aktiviert werden.</li> <li>Mehrzeiliges Texteingabefeld Das gleiche wie das normale Textfeld, nur dass es mehrzeilig ist. Es ist also für Fälle gedacht, wenn man mal viel Text schreiben will. Wie z.B. das olbigatorische Nachrichtenfeld dass es in jedem Kontaktformular oder Gästebuch gibt. (Wer zur Hölle verwendet noch Gästebücher?)</li> <li>Submit-Button Natürlich sehr wichtig - wenn man auf den Submit-Button klickt, wird das Formular abgesendet.</li> <li>Versteckte Felder In versteckten Feldern können Informationen und Daten zwischen Seiten transportiert werden, ohne dass der Benutzer es sieht oder ändern kann (doch kann er wenn man's genau nimmt, aber das kommt später). Auch wenn dir dir grade keine Situation vorstellen kannst in der ein verstecktes Feld sinnvoll wäre, wird sich bald das Gegenteil herausstellen.</li> </ul>
Schön, das ist ja gut dass es so viele verschiedene Felder und Eingabemöglichkeiten gibt. Das gibt dir als Entwickler die Möglichkeit, für jeden Anwendungsfall die passenden Steuerelements zu platzieren und so dem Endbenutzer eine intuitive Oberfläche zu bauen. Es gibt noch weitere Felder die unter anderem mit HTML5 eingeführt wurden. Ist jetzt aber nicht so relevant, uns interessiert ja vorrangig, wie wir endlich mit PHP arbeiten können.
<h2>Was ist das mit diesem GET und POST?</h2>
Gut dass du fragst. GET und POST sind gewissermaßen Übertragungsmethoden, die festlegen, wie die Daten zur Ziel-Datei gelangen.
<ul> <li><strong>GET</strong>-Request Die Daten werden via URL übergeben, sind also in der Adresszeile (dort wo man die Webseite im Browser eintippt) sichtbar. Ich kenne kaum Fälle, in denen man Formulare über GET absendet, in der Regel hängt man derlei Parameter an die URL die z.B. in einem Hyperlink steht.</li> <li><strong>POST</strong>-Request Die Daten werden "im Hintergrund" übertragen und sind in der Adresszeile nicht sichtbar. POST ist die Standard-Ãbertragungsmethode und kommt in 99% der Fälle zum Einsatz. POST ist super, um sensible Daten zu transportieren: Kontaktformular, Registrierungs- oder Login-Formular, Profil (Name, E-Mail etc..) und natürlich Passwörter.</li> </ul>
Request bedeutet (auch wörtlich übersetzt) einfach nur Anfrage. Es wird ja nach dem Absenden des Formulars eine Anfrage an den Server gestellt.
Auf übermittelte Daten mit PHP zugreifen Für den Zugriff auf die per GET oder POST übermittelten Daten stehen dir zwei superglobale Arrays zur Verfügung, $_GET und $_POST . Was dieses "superglobal" bedeutet, behandeln wir in einem anderen Artikel, aber behalte vielleicht schonmal im Hinterkopf, dass superglobale von überall aus zugreifbar sind. Jedenfalls, diese Arrays bringt PHP von sich aus mit und müssen nicht deklariert werden. Es gibt sie einfach. Wenn keine Daten übermittelt wurden, sind die Arrays leer und enthalten keine Werte.
Fehlermeldungen aktivieren Es macht Sinn, die Fehlerausgabe zu aktivieren, zumindest wenn man noch an einem Projekt programmiert oder wenn man -wie du- PHP lernen möchte. Damit Fehlermeldungen angezeigt werden, füge folgende 2 Codezeilen die du im letzten Artikel schon kennengelernt hast einfach immer oben direkt in die nächste Zeile nach <?php hinzu (selbst wenn ich es in den Code-Beispielen nicht immer mit drin hab):
<pre class="lang:php decode:true"><?php ini_set('display_errors', 1); error_reporting(E_ALL); // Ab hier dann der ganze weitere Code aus den Beispielen ?></pre>
Das sorgt dafür, dass alle Fehlermeldungen immer ausgegeben werden. In einem späteren Artikel wird das Thema Fehlerbehandlung ausführlich behandelt.
<h2>Praxisbeispiel GET und POST</h2>
Sehen wir uns folgenden Code an. Wir übermittelt erstmal nur ein Feld, einfach damit du den Unterschied von GET und POST kennen lernst. Daher habe ich dort zwei identische Formulare, die einmal mit GET und einmal mit POST übermittelt werden:
<pre class="lang:php decode:true" title="Das HTML-Formular"><!DOCTYPE html> <html lang='de'> <head> <meta charset='utf-8'> <title>Test mit Formularen</title> <!-- Mit CSS die Seite ein bisschen verschönern --> <style type='text/css'> *{ font-family: "verdana"; font-size: 11pt; } input, button{ padding: 4px 8px; } </style> </head> <body> <!-- Ab hier die 2 Formulare --> <strong>Formular das mit POST abgesendet wird:</strong><br> <form method='POST' action='./ziel.php'> <p><input type='text' name='text' placeholder='Gib irgendwas ein ...'></p> <p><button type='submit'>Formular absenden</button></p> </form> <br> <strong>Formular das mit GET abgesendet wird:</strong><br> <form method='GET' action='./ziel.php'> <p><input type='text' name='text' placeholder='Gib irgendwas ein ...'></p> <p><button type='submit'>Formular absenden</button></p> </form> </body> </html></pre>
Was da passiert:
<ul> <li>Ganz normale HTML-Grundstruktur (mit Doctype, head und body)</li> <li>2 Formulare</li> <li>Mit dem <span class="lang:default highlight:0 decode:true crayon-inline">method</span> -Attribut wird angegeben, ob die Daten mit GET oder POST übertragen werden.</li> <li>Die Formulare enthalten je ein Text-Eingabefeld sowie einen Submit-Button.</li> </ul>
Natürlich benötigen wir noch eine Datei, an die die Daten gesendet werden. Wie oben im action -Attribut definiert ist das die ziel.php. Erstelle also im gleichen Ordner wo auch deine index.php Datei liegt noch eine Datei ziel.php und füge dort folgenden Code ein:
<pre class="lang:php decode:true " title="PHP Skript zur Formular-Auswertung"><?php echo '$_POST<br>'; echo "<pre>" . print_r($_POST, 1) . "</pre>"; echo "<hr>"; echo '$_GET:<br>'; echo "<pre>" . print_r($_GET, 1) . "</pre>"; ?></pre>
Im Code werden die beiden superglobalen Arrays $_GET und $_POST mittels dem Befehl print_r() (den du bereits aus vorherigen Artikeln kennst) ausgegeben.
Um das Beispiel zu testen, öffne also nun die index.php in deinem Browser ( http://localhost/index.php oder eben ein anderer Pfad, falls du nach c:\xampp\htdocs noch weitere Unterverzeichnisse zu deiner index.php Datei hast). Du siehst zwei Formulare.
Trage im ersten Formular (POST) irgendeinen beliebigen Text ein und klicke den Submit-Button "Formular absenden". Du wirst weitergeleitet auf die Datei ziel.php und erhältst folgende Ausgabe (ich habe in das Textfeld "Hallo Welt!" eingetippt):
<pre class="lang:php highlight:0 decode:true">$_POST Array ( [text] => Hallo Welt! ) $_GET: Array ( ) </pre>
Wie erwartet ist das $_GET Array leer, weil das Formular mit der Methode POST abgesendet wurde. Interessant ist natürlich, welche Werte das $_POST Array enthält. Wie du sehen kannst, enthält dieses genau einen Wert, nämlich "Hallo Welt!". Und du siehst, dass die Werte im $_POST Array assoziativ indiziert sind, also über einen Namen, in diesem Fall ist das "text". Genau wie bei den Arrays die wir im vorherigen Artikel selbst deklariert haben, können wir auf die einzelnen Elemente des Arrays zugreifen.
Aber schauen wir uns zuerst noch an wie es aussieht, wenn ein Formular mit GET abgesendet wird. Klicke jetzt also den Zurück-Button in deinem Browser um wieder zur index.php zu kommen und fülle das Textfeld des anderen Formulars (das obere) aus, anschließend klicke auch hier wieder auf "Formular absenden". Du erhältst folgende Ausgabe:
<pre class="lang:php highlight:0 decode:true">$_POST Array ( ) $_GET: Array ( [text] => Hallo Welt! ) </pre>
Tja, das hast du dir vermutlich schon gedacht dass es so aussieht. Klar, jetzt ist das $_POST Array leer, weil die Daten mit GET übermittelt wurden.
Und doch ist etwas ganz anders als zuvor mit POST. Schau dir mal die Adressleiste an. Sowas ähnliches müsstest du dort sehen:
localhost/ziel.php?text=Hallo+Welt%21
Interessant oder? Wenn man das Formular mit POST absendet erscheint sowas nicht, bei GET werden die Daten aber über die URL übertragen.
Wie ich oben schon erwähnt hab, gibt es kaum Fälle in denen man Formulare mit GET absendet. Es ist eher der Fall, dass man Seiten über einen Hyperlink direkt mit den Parametern in der URL aufruft. Also quasi sowas wie index.php?sortieren_nach=name um einfach Parameter zu übergeben um die Darstellung der Seite anzupassen, um Filter zu setzen und sonstiges. Geht auch viel schneller und unkomplizierter als extra ein Formular dafür abzusenden. Außerdem ist die Anzahl an Zeichen für eine URL begrenzt. Und gerade wenn es um Benutzereingaben geht können wir nicht sicher sein wie lang der Inhalt am Ende wird. Hierfür wird es im nächsten Artikel noch Code-Beispiele geben. Vorerst verabschieden wir uns von der GET-Methode.
<h2>Beispiel mit mehreren Feldern</h2>
Erweitern wir den Code von oben und fügen weitere Felder hinzu:
<pre class="lang:php decode:true"><!DOCTYPE html> <html lang='de'> <head> <meta charset='utf-8'> <title>Test mit Formularen</title> <!-- Mit CSS die Seite ein bisschen verschönern --> <style type='text/css'> *{ font-family: "verdana"; font-size: 11pt; } input, button{ padding: 8px; } </style> </head> <body> <!-- Hier der interessante Part --> <strong>Formular das mit GET abgesendet wird:</strong><br> <form method='GET' action='./ziel.php'> <p><input type='text' name='text' placeholder='Gib irgendwas ein ...'></p> <p><input type='checkbox' name='agb'> Ich akzeptiere die AGB.</p> <p>Ja oder Nein: <select name='auswahl'><option value='1'>Ja</option><option value='0'>Nein</option></select></p> <p><button type='submit'>Formular absenden</button></p> </form> <hr> <strong>Formular das mit POST abgesendet wird:</strong><br> <form method='POST' action='./ziel.php'> <p><input type='text' name='text' placeholder='Gib irgendwas ein ...'></p> <p><input type='checkbox' name='agb'> Ich akzeptiere die AGB.</p> <p>Ja oder Nein: <select name='auswahl'><option value='1'>Ja</option><option value='0'>Nein</option></select></p> <p><button type='submit'>Formular absenden</button></p> </form> </body> </html></pre>
Und die ziel.php:
<pre class="lang:php decode:true"><?php @ini_set('display_errors', 1); @error_reporting(E_ALL); echo '$_GET:<br>'; echo "<pre>" . print_r($_GET, 1) . "</pre>"; echo "Ihre Eingabe: " . $_GET['text'] . "<br>"; echo "AGB: " . $_GET['agb'] . "<br>"; echo "Auswahl: " . $_GET['auswahl'] . "<br>"; echo "<hr>"; echo '$_POST<br>'; echo "<pre>" . print_r($_POST, 1) . "</pre>"; echo "Ihre Eingabe: " . $_POST['text'] . "<br>"; echo "AGB: " . $_POST['agb'] . "<br>"; echo "Auswahl: " . $_POST['auswahl'] . "<br>"; ?></pre>
Jetzt wieder die index.php im Browser aufrufen und ein paar Felder ausfüllen, dann absenden.
Auf die Elemente in den $_GET und $_POST Arrays kannst du genauso zugreifen wie auf alle anderen Arrays auch, wie ich es dir im letzten Artikel ja gezeigt hab.
Auswertung und Fehlermeldungen
Wie schon erwähnt erfolgt der Zugriff auf die übermittelten Daten über die $_GET und $_POST Arrays assoziativ. Der Wert ist dabei immer der Wert den man im Feld zugewiesen hat - beim Textfeld also beispielsweise der Text den man eingetippt hat oder das was im value-Attribut eingegeben wurde. Der Array-Schlüssel ist der Inhalt des name-Attributs (beim Textfeld haben wir beim name-Attribut "text" angegeben, später ist dann der Wert auch im $_GET oder $_POST Array an einem assoziativen Index mit diesem Namen zu finden, also $_GET['text'] bzw. $_POST['text'] ). Ein bisschen anders verhält es sich bei der Checkbox. Bei der Checkbox ist es so, dass wenn kein Haken gesetzt wurde, später im Array ($_GET oder $_POST) auch kein Element hierfür existiert. Anders als beim Textfeld, denn auch wenn dort nichts eingegeben wurde, gibt es nach dem Absenden hierfür ein Element im Array - der Wert ist halt dann leer. Eine weitere Besonderheit ist, dass wenn du in der Checkbox einen Haken gesetzt hast, der Wert später "on" ist. Nun, das passiert automatisch, wenn im select-Tag kein value-Attribut gesetzt wurde. Wenn eins gesetzt wurde, kann man dieses Verhalten ändern und einen anderen Wert wählen.
Mit Sicherheit bekommst du nach dem Absenden eines Formulars Fehlermeldungen auf der Seite zu sehen (wenn du wie oben beschrieben immer die zwei Zeilen am Anfang hinzugefügt hast um die Fehlerausgabe zu aktivieren). Das heißt es taucht bei dir nach Absenden des Formulars ein Fehler auf der so oder so ähnlich aussieht.
Notice: Undefined index: text in /pfad/zur/ziel.php on line 7
Die Meldung steht entweder bei POST wenn das Formular mit GET abgesendet wurde oder bei GET wenn es mit POST abgesendet wurde. Logisch, weil ja eins der beiden Arrays leer sein muss. Schließlich können wir nicht 2 Formulare auf einmal absenden.
<h2>Und was mache ich nun mit den übermittelten Daten?</h2>
Wir können jetzt schonmal Daten an den Server übermitteln und die übergebenen Daten mit echo anzeigen, ist doch was.
Und ein paar Dinge sind schon möglich. Experimentieren wir ein wenig ...
<h3>Berechnungen durchführen</h3>
Wir basteln ein Formular bestehend aus zwei Textfeldern, in die man jeweils Zahlen eingeben kann. Nach dem Absenden addieren wir beide Zahlen und geben das Erebnis aus:
<pre class="lang:php decode:true " title="index.php"><!DOCTYPE html> <html lang='de'> <head> <meta charset='utf-8'> <title>Test mit Formularen</title> <!-- Mit CSS die Seite ein bisschen verschönern --> <style type='text/css'> *{ font-family: "verdana"; font-size: 11pt; } input, button{ padding: 8px; } </style> </head> <body> <strong>Formular das mit POST abgesendet wird:</strong><br> <form method='POST' action='./ziel.php'> <p><input type='text' name='zahl1' placeholder='Zahl 1'></p> <p><input type='text' name='zahl2' placeholder='Zahl 2'></p> <p><button type='submit'>Ausrechnen</button></p> </form> </body> </html></pre>
Und die ziel.php:
<pre class="lang:php decode:true" title="ziel.php"><?php @ini_set('display_errors', 1); @error_reporting(E_ALL); $Zahl1 = $_POST['zahl1']; $Zahl2 = $_POST['zahl2']; $Summe = $Zahl1 + $Zahl2; echo $Zahl1 . " + " . $Zahl2 . " = " . $Summe; ?></pre>
Öffne nun wieder die index.php im Browser und trage in beide Textfelder Zahlen ein, danach klicke auf "Ausrechnen". Du erhältst eine ähnliche Ausgabe wie
<pre class="lang:php highlight:0 decode:true">812 + 37 = 849</pre>
<h3>Notendurchschnitt ermitteln</h3>
Du kennst das noch damals aus der Schule, wenn Exen oder Tests geschrieben wurden, kam danach immer ein Klassendurchschnitt raus. Probieren wir das auch mal. Im folgenden Code-Beispiel nehmen wir an, dass die Klasse insgesamt 8 Schüler hat:
<pre class="lang:php decode:true "><!DOCTYPE html> <html lang='de'> <head> <meta charset='utf-8'> <title>Test mit Formularen</title> <!-- Mit CSS die Seite ein bisschen verschönern --> <style type='text/css'> *{ font-family: "verdana"; font-size: 11pt; } input, button{ padding: 8px; } </style> </head> <body> <strong>Formular das mit POST abgesendet wird:</strong><br> <form method='POST' action='./ziel.php'> <p><input type='text' name='zahl1' placeholder='Note von Schüler 1'></p> <p><input type='text' name='zahl2' placeholder='Note von Schüler 2'></p> <p><input type='text' name='zahl3' placeholder='Note von Schüler 3'></p> <p><input type='text' name='zahl4' placeholder='Note von Schüler 4'></p> <p><input type='text' name='zahl5' placeholder='Note von Schüler 5'></p> <p><input type='text' name='zahl6' placeholder='Note von Schüler 6'></p> <p><input type='text' name='zahl7' placeholder='Note von Schüler 7'></p> <p><input type='text' name='zahl8' placeholder='Note von Schüler 8'></p> <p><button type='submit'>Ausrechnen</button></p> </form> </body> </html></pre>
Und in der ziel.php wieder die Auswertung:
<pre class="lang:php decode:true "><?php @ini_set('display_errors', 1); @error_reporting(E_ALL); $Gesamt = $_POST['zahl1'] + $_POST['zahl2'] + $_POST['zahl3'] + $_POST['zahl4'] + $_POST['zahl5'] + $_POST['zahl6'] + $_POST['zahl7'] + $_POST['zahl8']; $Durchschnitt = $Gesamt / 8; echo "Notendurchschnitt: " . round($Durchschnitt, 2); ?></pre>
Fülle die Felder aus und klicke dann auf "Ausrechnen". Anschließend werden alle Noten zusammengezählt und durch die Anzahl an Noten (also 8) geteilt, um den Durchschnitt zu erhalten.
Ich weiß' nicht wie es dir geht, aber der Code um den Durchschnitt zu berechnen, ist echt hässlich. Wir werden dieses Beispiel zu einem späteren Zeitpunkt nochmal aufgreifen, wenn wir effizientere Lösungen kennengelernt haben.
<h3>String-Funktionen</h3>
Noch ein letztes Beispiel mit Zeichenketten. Wir haben ein einziges Textfeld und nach dem Absenden formatieren wir die Eingabe entsprechend. Einige String-Funktionen hast du bereits im Artikel mit den Variablen kennengelernt.
<pre class="lang:php decode:true " title="index.php"><!DOCTYPE html> <html lang='de'> <head> <meta charset='utf-8'> <title>Test mit Formularen</title> <!-- Mit CSS die Seite ein bisschen verschönern --> <style type='text/css'> *{ font-family: "verdana"; font-size: 11pt; } input, button{ padding: 8px; } </style> </head> <body> <strong>Formular das mit POST abgesendet wird:</strong><br> <form method='POST' action='./ziel.php'> <p><input type='text' name='text' placeholder='Tippe irgendeinen Text' value='Das ist ein Text ... toll'></p> <p><button type='submit'>Ausrechnen</button></p> </form> </body> </html></pre>
In der ziel.php stellen wir mit dem vom Benutzer eingegebenen Text allerhand an:
<pre class="lang:php decode:true" title="ziel.php"><?php @ini_set('display_errors', 1); @error_reporting(E_ALL); $Text = $_POST['text']; echo "Ihre Eingabe:<br>" . $Text . "<br>"; echo "<br>"; # Umwandeln in Kleinbuchstaben echo "Klein geschrieben: " . strtolower($Text) . "<br>"; # Umwandeln in GroÃbuchstaben echo "Gross geschrieben: " . strtoupper($Text) . "<br>"; # Rückwärts echo "Rückwärts: " . strrev($Text) . "<br>"; # MD5-hash echo "MD5 Hash: " . md5($Text) . "<br>"; # SHA1 Hash echo "SHA1: " . sha1($Text) . "<br>"; # Erste 6 Zeichen echo "Ersten 6 Zeichen: " . substr($Text, 0, 6) . "<br>"; # Caesar Chiffrierung (ROT13) echo "ROT13: " . str_rot13($Text) . "<br>"; # Base64 kodiert echo "Base64: " . base64_encode($Text) . "<br>"; # Buchstaben durcheinandergewürfelt echo "Zufällige Anordnung: " . str_shuffle($Text) . "<br>"; # Ohne Leerzeichen echo "Ohne Leerzeichen: " . str_replace(" ", "", $Text) . "<br>"; # Mit % anstatt Leerzeichen echo "Leerzeichen als %: " . str_replace(" ", "%", $Text) . "<br>"; ?></pre>
Sofern du den Text im Textfeld nicht änderst, sieht die Ausgabe nach dem Absenden in etwa so aus:
<pre class="lang:php highlight:0 decode:true" title="Ausgabe">Ihre Eingabe: Das ist ein Text ... toll Klein geschrieben: das ist ein text ... toll Gross geschrieben: DAS IST EIN TEXT ... TOLL Rückwärts: llot ... txeT nie tsi saD MD5 Hash: 10a7fbaf30181384812308313611821f SHA1: 9cf97229cf09c3a547afd973df6c7bc3d2ede819 Ersten 6 Zeichen: Das is ROT13: Qnf vfg rva Grkg ... gbyy Base64: RGFzIGlzdCBlaW4gVGV4dCAuLi4gdG9sbA== Zufällige Anordnung: sltx t. oi t.elsaD.inT e Ohne Leerzeichen: DasisteinText...toll Leerzeichen als %: Das%ist%ein%Text%...%toll </pre>
<h2>Sicherheit mit Benutzereingaben</h2>
Ganz wichtig: traue niemals Benutzereingaben! Manche Leute gehen extra auf Webseiten und versuchen, Formulare zu manipulieren, indem sie HTML-Code in die Felder eintragen um zu sehen was nach dem Absenden passiert - ich selbst bin so einer. Angenommen man gibt in ein Textfeld <b>Test</b> ein, klickt auf Absenden und der eingegebene Text wird als HTML geparst und ausgegeben (sodass dann dort in fetter Schrift Test steht), dann weiß man gleich dass die Daten nicht entsprechend sicher maskiert werden. An dem Punkt kann man dann gut und gern also auch JavaScript-Code einbetten. Teste das selbst mal, indem du das letzte Code-Beispiel her nimmst und ins Textfeld folgenes eingibst:
Test<b onClick="alert('F');">Klick mich</b>
Klicke auf "Absenden" und du siehst, dass einige Texte fett markiert sind. Und wenn du auf "Klick mich" klickst, öffnet sich ein JavaScript-Alert. Sowas ist zwar harmlos, aber man könnte ja dort auch ganz anderen, schlimmen Code ausführen. Sowas nennt man eine XSS Attacke (Cross Site Scripting).
<h3>Wie sorge ich also für Sicherheit?</h3>
Dafür gibt es die Funktion htmlspecialchars(), die einfach dafür sorgt dass in einem übergebenen Text spezielle Sonderzeichen maskiert werden. Die Funktion erwartet 3 Argumente
<ol> <li>den Text der konvertiert werden soll</li> <li>die Art und Weise wie Anführungszeichen behandelt werden und</li> <li>die Zeichenkodierung.</li> </ol>
Jage Benutzereingaben also vor der Ausgabe durch diese Funktion, um deine Webanwendung vor derlei Attacken zu schützen. Ändern wir den Code aus dem letzten Beispiel der ziel.php:
<pre class="lang:php decode:true" title="ziel.php - sicherer Code"><?php @ini_set('display_errors', 1); @error_reporting(E_ALL); $Text = $_POST['text']; echo "Ihre Eingabe:<br>" . htmlspecialchars($Text, ENT_QUOTES, 'utf-8') . "<br>"; echo "<br>"; # Umwandeln in Kleinbuchstaben echo "Klein geschrieben: " . htmlspecialchars(strtolower($Text), ENT_QUOTES, 'utf-8') . "<br>"; # Umwandeln in GroÃbuchstaben echo "Gross geschrieben: " . htmlspecialchars(strtoupper($Text), ENT_QUOTES, 'utf-8') . "<br>"; # Rückwärts echo "Rückwärts: " . htmlspecialchars(strrev($Text), ENT_QUOTES, 'utf-8') . "<br>"; # MD5-hash echo "MD5 Hash: " . htmlspecialchars(md5($Text), ENT_QUOTES, 'utf-8') . "<br>"; # SHA1 Hash echo "SHA1: " . htmlspecialchars(sha1($Text), ENT_QUOTES, 'utf-8') . "<br>"; # Erste 6 Zeichen echo "Ersten 6 Zeichen: " . htmlspecialchars(substr($Text, 0, 6), ENT_QUOTES, 'utf-8') . "<br>"; # Caesar Chiffrierung (ROT13) echo "ROT13: " . htmlspecialchars(str_rot13($Text), ENT_QUOTES, 'utf-8') . "<br>"; # Base64 kodiert echo "Base64: " . htmlspecialchars(base64_encode($Text), ENT_QUOTES, 'utf-8') . "<br>"; # Buchstaben durcheinandergewürfelt echo "Zufällige Anordnung: " . htmlspecialchars(str_shuffle($Text), ENT_QUOTES, 'utf-8') . "<br>"; # Ohne Leerzeichen echo "Ohne Leerzeichen: " . htmlspecialchars(str_replace(" ", "", $Text), ENT_QUOTES, 'utf-8') . "<br>"; # Mit % anstatt Leerzeichen echo "Leerzeichen als %: " . htmlspecialchars(str_replace(" ", "%", $Text), ENT_QUOTES, 'utf-8') . "<br>"; ?></pre>
Trage ins Textfeld wieder den "schädlichen" Code ein:
<pre class="lang:php highlight:0 decode:true ">Test<b onClick="alert('F');">Klick mich</b></pre>
Sende dann das Formular erneut ab. Du erhältst folgende Ausgabe:
<pre class="lang:php highlight:0 decode:true ">Ihre Eingabe: Test<b onClick="alert('F');">Klick mich</b> Klein geschrieben: test<b onclick="alert('f');">klick mich</b> Gross geschrieben: TEST<B ONCLICK="ALERT('F');">KLICK MICH</B> Rückwärts: >b/<hcim kcilK>";)'F'(trela"=kcilCno b<tseT MD5 Hash: 351c44c08d3cbc7e39e8707c4cef3c28 SHA1: 0f57b1791a24c9d4a1f2b818808228ddf78214b1 Ersten 6 Zeichen: Test<b ROT13: Grfg<o baPyvpx="nyreg('S');">Xyvpx zvpu</o> Base64: VGVzdDxiIG9uQ2xpY2s9ImFsZXJ0KCdGJyk7Ij5LbGljayBtaWNoPC9iPg== Zufällige Anordnung: kh"l);"<(eClctn>'o'eKsa biFkir/T<it bcl=m>c Ohne Leerzeichen: Test<bonClick="alert('F');">Klickmich</b> Leerzeichen als %: Test<b%onClick="alert('F');">Klick%mich</b> </pre>
Jetzt erhalten wir eine korrekte Ausgabe. Das ist dann zwar ein bisschen mehr Code zu schreiben wenn man vor der Ausgabe immer htmlspecialchars hinzufügen muss, das sollte dir aber die Sicherheit deiner Webanwendung Wert sein. Selbstverständlich zaubern wir uns später noch etwas, das einfacher und schneller geht.
<h2>Links & Infos</h2>
<ul> <li>Anleitung zu Formularen auf php.net nachschlagen: <a href="http://php.net/manual/de/tutorial.forms.php" target="_blank">http://php.net/manual/de/tutorial.forms.php</a>.</li> <li>Dokumentation zur Funktion htmlspecialchars auf php.net nachschlagen: <a href="http://php.net/manual/de/function.htmlspecialchars.php" target="_blank">http://php.net/manual/de/function.htmlspecialchars.php</a>.</li> </ul>
<h2>FAQ</h2>
Wie kann ich Benutzereingaben abfragen? Sicher hast du dir schon einige interessante Dinge überlegt, die man mit solchen Formularen anstellen könnte. Was fehlt ist quasi eine Art Unterscheidung. Allein oben haben wir ja mit Code zu tun, der so oder so Fehlermeldungen produziert, weil wir eben auf einen Array-Index zugreifen den es gar nicht gibt. Und hier gehört eigentlich eine Abfrage hin. Das heißt eine Ausgabe erfolgt nur, wenn auch wirklich etwas übermittelt wurde. Und man will bestimmt auch sicher gehen, dass z.B. erforderliche Pflichtfelder übermittelt wurden. Das kann man zwar schon in HTML mit dem required-Attribut machen, allerdings können solche Dinge vom Benutzer manipuliert werden. Serverseitige Abfragen und Überprüfungen kann der Benutzer nie umgehen oder manipulieren.
Was meinst du mit dem "Manipulieren" von HTML? Feldattribute können vom Besucher der Seite manipuliert werden. Das ist ganz simpel. Man öffnet einfach im Browser die Entwickler-Tools (öffnet sich meist wenn man einfach die Taste F12 drückt), untersucht den Quellcode und hat sogar die Möglichkeit, diverse Manipulation vorzunehmen, zum Beispiel IDs oder Klassen umbenennen oder Attribute zu ändern. So könnte man z.B. Felder die als Pflichtfeld deklariert sind (mit dem required Attribut) einfach leer lassen und das Formular trotzdem absenden, indem man das required aus dem Code raus löscht. Und wenn dann serverseitig keine Überprüfung erfolgt weil man sich auf die HTML-Validierung verlassen hat, ist man am Arsch. Ich zitiere mich nochmal selbst: traue niemals Benutzereingaben.
Was passiert wenn ich in dem Rechen-Beispiel Text statt Zahlen eingebe? Sehr gute Frage, das zeigt dass du einen Schritt weiter denkst. Also zuerst mal würde ich sagen probier's aus. Wahrscheinlich kommt 0 raus. Aber wenn man es genau nimmt, sollte man solche Berechnungen auch nicht durchführen. Schließlich behandeln wir die Eingaben als Zahlen ohne vorher zu prüfen, ob auch wirklich nur gültige Zahlenwerte eingegeben wurden. Und das macht man in der Programmierung grundsätzlich nicht. Aber warum zeige ich es dir dann falsch? Nun, weil wir noch nicht die Möglichkeit haben solche Fälle zu überprüfen, dafür müssten wir wissen wie man Vergleiche macht - und das Thema kommt erst im nächsten Artikel.
<h2>Fazit</h2>
Formulare kannst du jetzt auch - schön. Im Frontend sind Formulare meist nicht allzu wichtig, auf gewöhnlichen Webseiten findet man sie eigentlich nur in Form eines Login-, Registrierungs- oder Kontaktformulars oder Gästebuchs. Wirklich spannend wird die Funktion von Formularen bei Webanwendungen im Backend, also bei einer Verwaltungsoberfläche für irgendeine Websoftware (z.B. Kunden- und Benutzerverwaltung, Inventursoftware oder ähnliches).
Im nächsten Artikel bringen wir noch mehr Dynamik in unsere Webanwendungen, dort arbeiten wir dann mit Kontrollstrukturen. Super, noch ein kompliziertes Wort. Nein, das heißt nur dass wir prüfen ob eine Bedingung zutrifft, falls ja passiert dies ansonsten tue etwas anderes. Quasi eine einfache Wenn-Dann-Sonst-Abfrage. Zum Beispiel können wir so überprüfen, ob der Haken in der Checkbox gesetzt wurde, und nur falls ja, wird etwas ausgegeben, andernfalls zeige die Meldung "Bitte AGB akzeptieren" oder so ähnlich. Du verstehst schon was ich meine.
Ist dir bis hierhin soweit alles klar? Wenn irgendwelche Fragen auftauchen, einfach unten einen Kommentar da lassen.
Bis zum nächsten Artikel Marius
Kommentare
Kommentar schreiben