Was passiert im Hintergrund, wenn man im Browser ein Formular ausfüllt? Ein einfaches Beispiel soll zeigen, wie die Daten vom Webbrowser zum Server und von dort die angeforderte Seite als Antwort zurück zum Benutzer gelangen.
Als Server dient hier das Programm Apache2, das auf dem eigenen Rechner installiert ist. Als Webbrowser nutzen wir Mozilla Firefox.
Überblick
Ein einfaches Beispiel-Formular mit zwei Eingabefeldern, eins für den Namen und eins für die E-Mail Adresse.
Damit ein HTML-Formular funktioniert, müssen alle Felder, die darin verwendet werden, einschließlich dem Submit-Button (Daten absenden) in sogenannte form-Tags eingeschlossen sein:
<form>
</form>Zusätzlich muss im öffnenden form-Tag angegeben werden, wie die Daten an den Server gesendet und wie sie dort verarbeitet werden sollen. Dies geschieht mit den Attributen action und method.
Das Attribut action erhält als Wert den Dateinamen der PHP-Datei auf dem Server, die die Anweisungen zur Verarbeitung der gesendeten Benutzerdaten beinhaltet. In unserem Beispiel die Datei form1_handle.php.
Das Attribut method erhält die Methode, die zum Übersenden der Daten eingesetzt wird. In unserem Beispiel die Methode post.
<form action="form1_handle.php" method="post">
</form>Zwischen den Form-Tags werden dann die eigentlichen Eingabefelder und ein Submit-Button angeordnet.
Exkurs: $_POST
post ist nicht nur eine Methode zu Datenübertragung vom Webbrowser zum Server. Auf der Seite des PHP-Scripts steht ihr eine globale Variable mit dem Namen $_POST gegenüber. Diese Variable beinhaltet ein assoziatives Array, das all die Werte, die in das Formular eingegeben werden, aufnimmt.
$_POST[key1 => value1, key2 => value2]Ein assoziatives Array enthält Schlüssel-Wert-Paare. Den Schlüssel liefert das name– Attribut des jeweiligen Eingabefeldes. In unserem Beispiel, im Eingabefeld für den Namen
<input type="text" name="user_name">ist der Schlüssel user_name und der zugehörige Wert der Name, den der Benutzer später eingibt: im Beispiel „Henriette“.
$_POST[
'user_name' => 'Henriette',
'email' => 'henriette@test.com'
]Hat der Benutzer seine Daten in das Formular eingefügt und auf die Schaltfläche „Daten absenden“ geklickt, werden die Daten im Array $_POST gespeichert und an den Server gesendet.
Daten mit PHP verarbeiten
Auf der Seite des Servers sorgt ein PHP-Script für die Verarbeitung der Benutzer-Eingaben. Es enthält konkrete Anweisungen, was mit den Daten geschehen soll. Der Benutzername und die E-Mail Adresse sollen dem Benutzer zur Bestätigung nach dem erfolgreichen Übersenden seiner Daten im Webbrowser angezeigt werden.
Dazu werden die im Array abgelegten Werte auf der Server-Seite aus dem Array ausgelesen. Über den Schlüssel – key – kann man in einem assoziativen Array auf den zugehörigen Wert zugreifen:
$_POST['user_name']
$_POST['email']Die keys sind hier „user_name“ und „email“.
Für die Bildschirmausgabe von Daten dient der PHP-Befehl echo:
echo $_POST['user_name'];
echo $_POST['email'];Mit diesen beiden PHP-Anweisungen wird auf der Seite des Servers veranlasst, dass auf dem Bildschirm des Benutzers (Client) der Name „Henriette“ und die E-Mail „henriette@test.com“ angezeigt wird. In einen html-Absatz eingebettet sieht das dann so aus:
<p>
Welcome
<?php echo $_POST['user_name']; ?>!
</p>
<br>
<p>
Your e-mail adress is:
<?php echo $_POST['email'];?>
</p>Die PHP-Anweisungen müssen immer umgeben sein von einem öffnenden und einem schließenden Tag:
<?php ?>
Damit das ganze ein wenig netter aussieht, werden die PHP-Anweisungen in eine HTML-Struktur eingebettet und mit CSS formatiert. Der Benutzer bekommt somit eine vollständige Webseite präsentiert.
Die vollständigen Dateien
Das HTML-Dokument (form1.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles/main.css" rel="stylesheet"/>
<link rel="shortcut icon" href="#">
<title>Form 1</title>
</head>
<body>
<h1>Test Form</h1>
<h2>How PHP on server works</h2>
<form action="form1_handle.php" method="post">
<p>Name</p>
<input type="text" name="user_name">
<br>
<p>E-Mail:</p>
<input type="text" name="email">
<br>
<p>
<input type="submit">
</p>
</form>
</body>
</html>Das PHP-Skript (form1_handle.php ):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles/main.css" rel="stylesheet"/>
<link rel="shortcut icon" href="#">
<title>Form 1</title>
</head>
<body>
<h1>php answer is: </h1>
<div>
<img src="assets/Tux.png" width="100px" alt="Linux Tux">
</div>
<p>Welcome <?php echo $_POST["user_name"];?>! </p>
<p>Your e-mail adress is:
<?php echo $_POST["email"];?>
</p>
</body>
</html>Die CSS-Datei (main.css):
body {
font-family: Arial, Helvetica, sans-serif;
background-color: floralwhite;
}
h1 {
color:darkred;
}
img {
transition: transform 0.9s ease-in-out;
}
img:hover {
transform: rotate(360deg);
transition: all 0.5s ease-in-out ;
}Hinweis zur Verzeichnisstruktur:
| Hauptverzeichnis | html | mit den Dateien form1.html und form1_handle.php |
|---|---|---|
| Unterordner für Bilder | assets | mit der Datei Tux.png |
| Unterordner für CSS | styles | mit der Datei main.css |
Und er ist natürlich auch dabei.
Viel Spaß beim Ausprobieren!
Quellen:
https://www.php.net/manual/de/reserved.variables.post.php
https://www.w3schools.com/php/php_forms.asp
https://stackoverflow.com/questions/16771225/css3-rotate-animation?rq=3
Image Server: https://pixabay.com/de/users/openclipart-vectors-30363/
Image Notebook: https://pixabay.com/de/users/grenni78-2044874/
Image Cat: https://pixabay.com/de/users/elaly-1106205/
Linus-Tux: https://en.wikipedia.org/wiki/Tux_(mascot)
