PHP Schnellstart / PHP Schnellstart Modul 3 – Wichtige Werkzeuge der Programmierung & Formulare
0%
In Bearbeitung

PHP Schnellstart – Form Handling – Teil 2 – Formulardaten validieren

In dieser Lektion lernst du, wie du Formulardaten mit PHP validieren kannst.

Wie du in der letzten Lektion gelernt hast, ist der Prozess der Erfassung und Anzeige der eingereichten Formulardaten recht einfach. Hier zeige ich dir, wie du ein einfaches Kontaktformular auf deiner Webseite implementierst, das dem Nutzer ermöglicht, seine Nachricht samt Betreff zu verschicken. Die abgesendeten Daten gehen in unserem Beispiel ins Nirvana und werden nicht z.B. per Email verschickt.

Diese Aufgaben soll unser PHP-Kontaktformular-Skript erledigen:

  • Das gleiche Skript zeigt das Kontaktformular an und verarbeitet die eingegebenen Formulardaten. (die Datei auswertung.php fällt im kommenden Beispiel weg. Es gibt nur noch eine Datei, die Daten entgegennimmt und auswertet)
  • Das Skript validiert die Benutzereingaben.
  • Wenn ein Pflichtfeld (mit * markiert) fehlt, zeigt das Skript eine Fehlermeldung an der entsprechenden Stelle an.

Im untenstehenden Code-Editor erstellen wir die Datei - kontaktformular.php, die wie folgt aussieht:

(Das Skript hat "relativ" viele Zeilen. Nimm dir etwas Zeit, die einzelnen Code-Abschnitte nachzuvollziehen.)

<?php
// Wir definieren die Variablen und weisen leere Werte zu
$nameErr = $emailErr = $nachrichtErr = "";
$name = $email = $betreff = $nachricht = "";
 
// Die Formular-Daten werden nach anklicken des Absenden-Buttons mit folgendem Skript geprüft
if($_SERVER["REQUEST_METHOD"] == "POST"){ 
     
    // Wenn "name" leer ist, dann zeige rote Fehlermeldung an
    if(empty($_POST["name"])){
        $nameErr = "Bitte gib einen Namen ein.";
    } 

    if(empty($_POST["email"])){
        $emailErr = "Bitte gib deine Email-Adresse ein.";     
    }   

    if(empty($_POST["nachricht"])){
        $nachrichtErr = "Bitte gib eine Nachricht ein.";     
    } 
}
?>
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .fehler{ color: red; }        
    </style>
</head>
<body>
    <h2>Kontaktformular</h2>
    <p>Fülle die Angaben aus, um uns zu kontaktieren.</p>
    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
        <p>
            <label for="deinName">Name:<sup>*</sup></label>
            <input type="text" name="name" id="deinName" value="<?php echo $name; ?>">
            <span class="fehler"><?php echo $nameErr; ?></span>
        </p>
        <p>
            <label for="deineEmail">Email:<sup>*</sup></label>
            <input type="text" name="email" id="deineEmail" value="<?php echo $email; ?>">
            <span class="fehler"><?php echo $emailErr; ?></span>
        </p>
        <p>
            <label for="deinBetreff">Betreff:</label>
            <input type="text" name="betreff" id="deinBetreff" value="<?php echo $betreff; ?>">
        </p>
        <p>
            <label for="deinKommentar">Nachricht:<sup>*</sup></label>
            <textarea name="nachricht" id="deinKommentar" rows="5" cols="30"><?php echo $nachricht; ?></textarea>
            <span class="fehler"><?php echo $nachrichtErr; ?></span>
        </p>
        <input type="submit" value="Absenden">
        <input type="reset" value="Zurücksetzen">
    </form>

    <!-- Das Skript, dass vorher unter "auswertung.php" zu finden war habe ich nun hier eingefügt -->
    <p>Du hast folgende Info ans uns übermittelt:</p>
    <ol>
        <li><em>Name:</em> <?php echo $_POST["name"]?></li>
        <li><em>Email:</em> <?php echo $_POST["email"]?></li>
        <li><em>Betreff:</em> <?php echo $_POST["betreff"]?></li>
        <li><em>Nachricht:</em> <?php echo $_POST["nachricht"]?></li>
    </ol>
</body>
</html>

Erklärung: Du fragst dich vielleicht, was der ganze Code bedeutet. Hier die einfache Erklärung dazu:

  • Im obigen Teil prüfen wir die Pflichtfelder (Name, Email, Nachricht) mit der Server-Request Methode POST. Dabei erstellen wir drei If-Abfragen, um zu prüfen, ob die einzelnen Felder leer sind. Wenn die Bedingung zutrifft (z.B. Feld "Name" ist leer), dann wird an der entsprechenden Stelle im Formular eine rote Fehlermeldung als Text ausgegeben.
  • Das Attribut action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" innerhalb des <form>-Tags legt fest, dass dieselbe Datei sowohl das Formular anzeigt als auch die Formulardaten verarbeitet.
  • Der PHP-Code innerhalb des value-Attributs von <input> und <textarea> z.B. <?php echo $name; ?> zeigt den ausgefüllten Wert an, wenn das Formular bei einem Validierungsfehler erneut angezeigt wird.
  • Der PHP-Code innerhalb der .fehler-Klasse z.B. <span class="fehler"><?php echo $nameErr; ?><</span> Fehler für das entsprechende Feld anzeigen.

Deine Aufgabe - Jetzt bist du gefragt:

Im untenstehenden Editor findest Du das Skript zum Ausprobieren. Beschäftige dich mit dem Skript bis du den Code nachvollziehen kannst.

Als optionale Aufgabe kannst du versuchen ein weiteres Form-Feld z.B. "Bestell-Nr" als Pflichtfeld einzufügen. Das "Bestell-Nr"-Feld soll bei der Übermittlung des Formulars ebenfalls geprüft werden. Wenn es leer sein sollte, soll ebenfalls eine Fehlermeldung z.B. "Bitte gib eine Bestell-Nr. ein" erscheinen.

Code-Editor:

Zusammenfassung zum Form Handling

Das waren die wichtigsten Grundlagen zum Form Handling mit PHP. Du weißt jetzt bereits, wie du Daten-Inputs entgegennehmen und anzeigen kannst. Außerdem hast du in dieser Lektion gelernt, wie du mit einfachen If-Abfragen Formulardaten validieren kannst.

In der kommenden Coding Challenge Nr. 3, wirst du das Programmieren von Forms noch weiter vertiefen. Wir sehen uns gleich wieder!