[Quelle: Wikipedia]
Wir wollen in einem Beispiel die Email Adresse einer Studierenden übertragen.
<html> <head> <title>Eingabe und Übertragung von Formulardaten</title> </head> <body> <h1>Studentenerfassung</h1> <form method="post" action="student01.php"> Email: <input type="text" id="email" name="email" /> <input type="submit" value="senden .." /> </form> </body> </html>
<?php
print("Email an Server angekommen: " . $_POST["email"]);
?>[ Ausführen]
In Erweiterung des Beispiels wollen wir die Eingabedaten serverseitig validieren.
<html> <head> <title>Eingabe und Übertragung von Formulardaten</title> </head> <body> <h1>Studentenerfassung</h1> <form method="post" action="student02.php"> Email: <input type="text" id="email" name="email" /> <input type="submit" value="senden .." /> </form> </body> </html>
Die Plausibilitätsprüfung soll sehr einfach sein und überprüft daher lediglich die Existenz eine @ innerhalb der Email Adresse.
<?php
if (preg_match("/@/", $_POST["email"]) > 0)
print("valid email: " . $_POST["email"]);
else
print("invalid email: " . $_POST["email"]);
?>[ Ausführen]
Nun soll der Unterschied zur clientseitigen Validierung demonstriert werden.
<html> <head> <title>Eingabe und Übertragung von Formulardaten</title> <script type="text/javascript"> function checkEmail() { var emailbox = document.getElementById("email"); if (emailbox && emailbox.value.match(/@/) != null) // ok .. return true; else { emailbox.style.backgroundColor = "yellow"; alert("\"" + emailbox.value + "\" ist keine gescheite Emailadresse!"); } return false; } </script> </head> <body> <h1>Studentenerfassung</h1> <form method="post" action="student03.php" onsubmit="return checkEmail();"> Email: <input type="text" id="email" name="email" onfocus="this.style.backgroundColor='white'" /> <input type="submit" value="senden .." /> </form> </body> </html>
Die Serverseite bleibt unverändert. Die Redundanz der Validierung ist erwünscht.
<?php
if (preg_match("/@/", $_POST["email"]) > 0)
print("valid email: " . $_POST["email"]);
else
print("invalid email: " . $_POST["email"]);
?>[ Ausführen]
Die Verarbeitung der Eingabedaten beinhaltet im Allgemeinen ein Speichern für späteren Zugriff.
Die Clientseite bleibt unverändert gegenüber student03.html.
<?php
function loadFile($uri) {
$content = "";
$file = ($uri != "") ? fopen($uri, "rb") : null;
if ($file != null) {
while (!feof($file))
$content .= fread($file, 100);
fclose($file);
}
else
printf("Cannot read file '%s'", $uri);
return $content;
}
function saveFile($uri, $src) {
if ($file = fopen($uri, "w")) {
if (!fwrite($file, $src))
printf("Cannot write to file '%s'", $uri);
fclose($file);
}
else
printf("Cannot open file '%s'", $uri);
}
if (preg_match("/@/", $_POST["email"]) > 0) {
$emails = loadFile("students.eml");
$emails .= "\n" . $_POST["email"];
saveFile("students.eml", $emails);
}
else
print("invalid email: " . $_POST["email"]);
?>[ Ausführen]
In einem Vorlesungsbeispiel wollen wir drei quadratische Felder mit Namen belegen. Diese Namen sollen gleichzeitig in einer serverseitigen XML Datei gesichert werden.
<html> <head> <title>Boxes</title> <style type="text/css"> div.box { width:190px; height:190px; background-color: lightblue; padding: 3px; border:1px solid black; font-size:150%; text-align: center; vertical-align: middle; } </style> </head> <body> <h1> Boxes </h1> <div id="b1" class="box" style="position:absolute; left:100px; top:100px;"> n/a </div> <div id="b2" class="box" style="position:absolute; left:300px; top:100px;"> n/a </div> <div id="b3" class="box" style="position:absolute; left:500px; top:100px;"> n/a </div> </body> </html>
[ Ansicht]
<?xml version="1.0"?> <boxes> <box id="b1" name="n/a" /> <box id="b2" name="n/a" /> <box id="b3" name="n/a" /> </boxes>
Die Anforderungen (clientseitig):
<html> <head> <title>Boxes</title> <script type="text/javascript"> function setBox(box) { if (box.innerHTML == " n/a ") { // free box .. box.onclick = null; box.innerHTML = '<input id="name" style="width:80px;" type="text" size="90px" value="" /><br/>'+ '<button onclick="reserveBox(this.parentNode, document.getElementById(\'name\').value);">ok</button>'; } else alert("Box ist leider schon belegt!"); } function reserveBox(box, name) { box.innerHTML = name; box.onclick = setBox; } </script> <style type="text/css"> div.box { width:190px; height:190px; background-color: lightblue; padding: 3px; border:1px solid black; font-size:150%; text-align: center; vertical-align: middle; } </style> </head> <body> <h1> Boxes </h1> <div id="b1" class="box" style="position:absolute; left:100px; top:100px;" onclick="setBox(this);"> n/a </div> <div id="b2" class="box" style="position:absolute; left:300px; top:100px;" onclick="setBox(this);"> n/a </div> <div id="b3" class="box" style="position:absolute; left:500px; top:100px;" onclick="setBox(this);"> n/a </div> </body> </html>
[ Ansicht]
Nun soll die Namensangabe mittels eines asynchronen Http-Request an den Webserver übertragen werden, mit der Aufforderung:
<html> <head> <title>Boxes</title> <script type="text/javascript" src="/js/http.js"> </script> <script type="text/javascript"> function setBox(e) { var box = e.target; if (box.innerHTML == "n/a") { // free box .. box.onclick = null; box.innerHTML = '<input id="name" style="width:80px;" type="text" size="90px" value="" /><br/>'+ '<button onclick="reserveBox(this.parentNode, document.getElementById(\'name\').value);">ok</button>'; } else alert("Box ist leider schon belegt mit " + box.innerHTML); } function reserveBox(box, name) { var callback = function(msg) { if (msg == "ok") box.innerHTML = name; else { box.innerHTML = "n/a"; alert(msg); } box.onclick = setBox; }; Http.post("reserve=name&boxid="+box.id+"&name="+name, "boxes.php", callback); } </script> <style type="text/css"> div.box { width:190px; height:190px; background-color: lightblue; padding: 3px; border:1px solid black; font-size:150%; text-align: center; vertical-align: middle; } </style> </head> <body> <h1> Boxes </h1> <div id="b1" class="box" style="position:absolute; left:100px; top:100px;" onclick="setBox(event);">n/a</div> <div id="b2" class="box" style="position:absolute; left:300px; top:100px;" onclick="setBox(event);">n/a</div> <div id="b3" class="box" style="position:absolute; left:500px; top:100px;" onclick="setBox(event);">n/a</div> </body> </html>
<?php
require_once("XPath.class.php");
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST["reserve"],$_POST["boxid"],$_POST["name"])) {
$xpath = new XPath();
$xpath->importFromFile("boxes.xml");
if (count($xpath->match("//box[@id='".$_POST["boxid"]."']"))) { // valid boxid ..
$name = $xpath->getAttributes("//box[@id='".$_POST["boxid"]."']", "name");
if ($name == "n/a") { // still not reserved ..
if (count($xpath->match("//box[@name='".$_POST["name"]."']")) == 0) { // name not found elsewhere ..
$xpath->setAttribute("//box[@id='".$_POST["boxid"]."']", "name", $_POST["name"]);
$xpath->exportToFile("boxes.xml");
print("ok");
}
else
print($_POST["name"] . " kann nicht zweimal belegen!");
}
else
print("Box " . $_POST["boxid"] . " bereits belegt mit " . $name);
}
else
print("Unbekannte Box: ".$_POST["boxid"]);
}
}
?>[ Ausführen]
