Eine Unterschrift mit einem HTML-Formular aufzeichnen und anschließend in einer MySQL-Datenbank speichern.
Dieser Beitrag baut auf den Beitrag “Unterschriftenfeld in HTML-Formular” auf. Hier haben wir uns angeschaut, wie wir in einem HTML-Formular eine Unterschrift mit Touch oder Maus aufzeichnen können.
Nun wollen wir uns anschauen, wie wir diese Unterschrift auch noch in einer MySQL-Datenbank speichern können und anschließend auch wieder ausgeben können. Das Beispielscript gibt es am Ende zum Download.
Die MySQL-Datenbank
Unsere Datenbank speichert neben der automatischen ID noch den Namen und die Unterschrift.
Die Datenbankstruktur des Beispiels finden Sie in der “datenbank.sql”-Datei des Scriptes. Die Unterschrift wird als Base64-Bild gespeichert und verwendet daher ein Text-Feld.
Formular in Datenbank speichern
Um das Formular in die Datenbank zu speichern, verwenden wir den folgenden Code:
$image = ""; if (isset($_POST["signature"])) { $image = $_POST["signature"]; $name = $_POST["name"]; //Datenverbindung herstellen $link = mysqli_connect("127.0.0.1", "root", "", "sigdb"); if (!$link) { echo "Fehler: konnte nicht mit MySQL verbinden." . PHP_EOL; echo "Debug-Fehlernummer: " . mysqli_connect_errno() . PHP_EOL; echo "Debug-Fehlermeldung: " . mysqli_connect_error() . PHP_EOL; exit; } $image = mysqli_real_escape_string($link, $image); $name = mysqli_real_escape_string($link, $name); //SQL-Statement zur Speicherung in Datenbank $sql = "INSERT INTO signatures (name, signature) VALUES ('$name', '$image')"; //in Datenbank speichern mysqli_query($link, $sql); echo "<p>Bild in Datenbank abgelegt</p>"; } else { echo "<p>Kein Bild übertragen</p>"; }
Zuerst lesen wir den Namen und die Unterschrift aus und weisen diese lokalen Variablen zu. Anschließend verbinden wir uns zur Datenbank, escapen zur Sicherheit die Eingaben und erstellen nun ein SQL-Statement zur Speicherung der Daten in der Datenbank.
Nun führen wir das SQL-Statement aus und dann sind die Daten auch schon in der Datenbank.
Auslesen der Unterschrift und Anzeige
Der Code:
<?php //Alle Unterschriften auslesen und anzeigen $sql = "SELECT name, signature from signatures order by ID DESC"; $res = mysqli_query($link, $sql); while ($line = $res->fetch_object()) { echo "<h3>Name: " . $line->name . "</h3>\n"; echo "<img src=\"" . $line->signature . "\">\n"; } echo "<hr/>\n"; ?>
Das Auslesen geht analog, wir verwenden im Beispiel die bereits bestehende Datenbankverbindung, ansonsten muss dieser vorher noch hergestellt werden. Anschließend lesen wir die Datenbanktabelle aus und geben Bild und Namen aus.
Das Bild bzw. die Unterschrift geben wir eingebettet als Base64-Bild aus.