Auftrag 12

12 Validierung serverseitig

Auftrag

Erweitern Sie Ihr Kontaktformular aus Aufgabe 02 so, dass es sowohl vom Browser validiert wird und – sofern der Browser nicht selbständig validieren kann – die Validierung serverseitig passiert. Gehen Sie dafür wie folgt vor:

Vorgehen

  1. Die Validierung soll von modernen Browsern selbständig gemacht werden. Verwenden Sie dazu die entsprechenden HTML5-Attribute für Formularfelder (required, type). Was Sie wie validieren sollen, entnehmen Sie aus der Aufgabe 02.
  2. Damit das Formular in einem zweiten Schritt serverseitig validiert werden kann, brauchen Sie eine entsprechende PHP-Seite. Erstellen Sie im selben Ordner eine Datei namens „kontakt.php“. Das ist ja auch der Dateiname, der im „action“-Attribut des FORM-Tags aufgerufen wird.Schreiben Sie in der erstellten PHP-Datei als erstes Folgendes. Das sind die Markierungen, an denen der Webserver erkennt, dass es PHP-Code zu interpretieren gibt:
    <?php
    ...
    ?>
  3. Damit wir die serverseitige Validierung überprüfen können, müssen wir die Validierung der modernen Browser durch folgendes Attribut im form-Element zwischenzeitlich deaktivieren:
    <form action="kontakt.php" method="get" novalidate>
  4. Öffnen Sie Ihr Formular nun im Browser. Senden Sie das Formular leer ab, indem Sie auf den Button „Senden“ klicken. Wenn alles korrekt läuft, sollten Sie eine leere Seite erhalten und in der URL sollte die Datei „kontakt.php“ stehen. Sie haben nun auf dem Server Ihre erste PHP-Seite ausgeführt. Weil noch nichts drin steht, wird eine leere Seite ausgeliefert und wieder an den Browser gesendet.Versuchen Sie dasselbe nochmals, indem Sie das „method“-Attribut Ihres FORM-Tags auf POST, bzw. GET setzen. Was beobachten Sie, wie sieht die URL bei der Übermittlung der Daten per GET-Methode aus? Wie per POST-Methode? Lassen Sie die Methode auf GET für das weitere Vorgehen.
  5. Versuchen Sie nun in PHP die übermittelten Daten abzugreifen und in einem ersten Schritt einfach mal auszugeben. Auf die Parameter zuzugreifen erfolgt über die Variable $_GET oder $_POST, je nach Übermittlungsmethode. Wenn die Übermittlungsmethode keine Rolle spielt, kann die Variable $_REQUEST genutzt werden. Mit dem Befehl ECHO kann eine Ausgabe gemacht werden. Schreiben Sie also:
    <?php echo 'Nachname: '.$_REQUEST['lastname'];?>
    Speichern Sie die Datei, rufen Sie das Formular auf und geben Sie einen Wert im Feld „Nachname“ ein. Klicken Sie auf „Senden“ und schauen Sie sich das Resultat an.
  6. Im nächsten Schritt möchten wir abfragen, ob im Feld „Nachname“ ein leerer Wert steht. Auf leer fragt man ab, indem man zwei Apostroph-Zeichen nacheinander schreibt, ohne Inhalt. Abfragen kann man mit dem Befehl IF Schreiben Sie Folgendes in Ihre PHP-Datei.
    <?php
    if (empty($_REQUEST['lastname'])) {echo 'der Nachname ist leer';} else {echo 'der Nachname ist ausgefuellt';}

     

    ?>

    Speichern Sie die Datei und rufen Sie das Formular auf. Überprüfen Sie, wie sich die Ausgabe der PHP-Datei verhält, je nachdem, ob Sie den Nachnamen ausgefüllt haben oder nicht.

  7. Wir brauchen für die Validierung ja nur die Situation, wenn der „Nachname“ leer ist. Darum können wir die zweite Bedingung weglassen. Damit ergibt sich folgender Code.
    <?php
    if (empty($_REQUEST['lastname'])) {echo 'der Nachname ist leer';}?>
  8. Wenn der „Nachname“ leer ist, soll die Fehlermeldung aber nicht in der PHP-Seite angezeigt werden, sondern es soll wieder das Kontaktformular aufgerufen werden und darin eine entsprechende Fehlermeldung. Das heisst also, wir müssen wieder die Seite „index.html“ aufrufen und die Fehlermeldung entsprechend als Parameter übergeben. Für den Aufruf einer anderen Seite aus PHP wird die Funktion header(‚Location: …‘) Mit der Funktion DIE() wird die weitere Verarbeitung abgebrochen.
    <?php
    if (empty($_REQUEST['lastname'])) {header('Location: index.html?fehler=Nachname ist leer');die();}

    ?>

    Passen Sie die URL bei „Location“ an, falls nötig (damit wieder Ihr Formular aufgerufen wird).

  9. Auf der Formularseite hingegen, müssen wir nun den Parameter mit der Fehlermeldung wieder verarbeiten, bzw. anzeigen. Dies geschieht wiederum mit PHP. HTML- und PHP-Code kann gemischt werden. Damit der Webserver aber weiss, dass die Seite PHP-Code beinhaltet, muss die Dateiendung entsprechend lauten. Benennen Sie darum Ihre Seite „index.html“ um in „index.php“ und passen Sie den Code für den Aufruf aus „kontakt.php“ entsprechend an.
  10. In der Seite „index.php“ können Sie nun die Anzeige der Fehlermeldung implementieren. Verwenden Sie dazu folgendes Code-Fragment und fügen Sie es vor Ihrem FORM-Tag ein.
    <?php
    if (!empty($_GET['fehler'])) {
    echo '<h2>Fehler</h2>';echo '<p class="error">';echo $_GET['fehler'];echo '</p>';
    }
    ?>

    Testen Sie Ihr Formular und beobachten Sie das Verhalten, wenn Sie das Formular frisch aufrufen, wenn Sie Daten eingeben und es abschicken und wenn Sie es leer abschicken.

  11. Wenn Sie nun Felder ausfüllen – aber den „Nachnamen“ leer lassen – und das Formular abschicken, kommt zwar die entsprechende Fehlermeldung, die Felder sind aber wieder leer. Überlegen Sie sich, woran das liegt und machen Sie dann mit dem nächsten Punkt weiter.
  12. Die Daten, die an die Seite „kontakt.php“ übermittelt werden, müssen auch wieder an die Formularseite „index.php“ übermittelt werden, damit diese wieder in den entsprechenden Feldern eingefüllt werden können. Und in der Seite „index.php“ muss in den INPUT-Tags auch das Attribut „value“ entsprechend definiert werden. Gehen Sie darum gemäss den folgenden Punkten vor.
  13. Fügen Sie in der Seite „kontakt.php“ dem Aufruf der Seite „index.php“ (header…) alle Felder als Parameter hinzu. Sie können dafür die Variable $_SERVER[‚QUERY_STRING‘] Der Code sieht dann wie folgt aus:
    <?php
    if (empty($_REQUEST['lastname'])) {
    header('Location: index.php?fehler=Nachname ist leer'.'&'.$_SERVER['QUERY_STRING']);
    die();}?>
  14. In der Seite „index.php“ müssen die übergebenen Daten wiederum in die entsprechenden INPUT-Tags abgefüllt werden. Dies geschieht über das Attribut „value“ im INPUT-Tag. Ergänzen Sie das INPUT-Tag um das Attribut „value“ und schreiben Sie darin per PHP den entsprechenden Parameterwert heraus.Beispiel für Feld „Nachname“:
    <input type="text" name="lastname" id="lastname" value="<?php echo $_GET['lastname'] ?? ''; ?>" required="required" />
    Tun Sie dies für alle INPUT-Tags, natürlich unter Angabe des entsprechenden Feldnamens.
  15. Für das Tag TEXTAREA gibt es das Attribut „value“ nicht. Hier muss der Inhalt zwischen das Start- und End-Tag geschrieben werden:
    <textarea name="message" id="message"><?php echo $_GET['message'] ?? ''; ?></textarea>
  16. Für das Auswahlfeld „contact“ muss der gewählte Wert abgefragt werden und dann die entsprechende Option auf „selected“ gestellt werden. Das SELECT-Tag sieht dann wie folgt aus.
    <select name="contact" id="contact">
    <option value="" <?php if (empty($_GET['contact'])) {echo 'selected="selected"';} ?>>keine</option>
    <option value="morgens" <?php if (!empty($_GET['contact']) && $_GET['contact'] == 'morgens') {echo 'selected="selected"';} ?>>Morgens</option>
    <option value="mittags" <?php if (!empty($_GET['contact']) && $_GET['contact'] == 'mittags') {echo 'selected="selected"';} ?>>Mittags</option>
    <option value="abends" <?php if (!empty($_GET['contact']) && $_GET['contact'] == 'abends') {echo 'selected="selected"';} ?>>Abends</option>
    <option value="ganzerTag" <?php if (!empty($_GET['contact']) && $_GET['contact'] == 'ganzerTag') {echo 'selected="selected"';} ?>>Ganzer Tag</option>
    </select>
  17. Wiederholen Sie nun die Validierung in der Datei „kontakt.php“ für die Felder „Vorname“ und „Email“, indem sie die 3 Zeilen Code gemäss Punkt 13 kopieren und den Feldnamen bzw. die Fehlermeldung entsprechend anpassen. Damit werden auch diese Felder als Mussfelder validiert.

Wenn Sie noch Zeit haben, versuchen Sie herauszufinden, wie Sie nun in PHP auf die Eingabe einer gültigen Emailadresse validieren können und versuchen Sie Ihren PHP-Code entsprechend zu erweitern.