{"id":1023,"date":"2020-08-15T14:30:13","date_gmt":"2020-08-15T12:30:13","guid":{"rendered":"https:\/\/ekiwi.de\/?p=1023"},"modified":"2020-11-07T20:47:44","modified_gmt":"2020-11-07T19:47:44","slug":"unterschrift-in-mysql-datenbank-speichern-mit-php","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/1023\/unterschrift-in-mysql-datenbank-speichern-mit-php\/","title":{"rendered":"Unterschrift in MySQL-Datenbank speichern mit PHP"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/1023\/unterschrift-in-mysql-datenbank-speichern-mit-php\/#Die_MySQL-Datenbank\" >Die MySQL-Datenbank<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/1023\/unterschrift-in-mysql-datenbank-speichern-mit-php\/#Formular_in_Datenbank_speichern\" >Formular in Datenbank speichern<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/1023\/unterschrift-in-mysql-datenbank-speichern-mit-php\/#Auslesen_der_Unterschrift_und_Anzeige\" >Auslesen der Unterschrift und Anzeige<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/1023\/unterschrift-in-mysql-datenbank-speichern-mit-php\/#Download_des_Scriptes\" >Download des Scriptes<\/a><\/li><\/ul><\/nav><\/div>\n<p>Eine Unterschrift mit einem <a title=\"HTML-Formulare erstellen\" href=\"https:\/\/da-software.net\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML-Formular<\/a> aufzeichnen und anschlie\u00dfend in einer MySQL-Datenbank speichern.<\/p>\n<p><!--more--><\/p>\n<p>Dieser Beitrag baut auf den Beitrag &#8222;<a href=\"https:\/\/da-software.net\/2018\/02\/unterschriftenfeld-in-html-formular\/\" target=\"_blank\" rel=\"noopener noreferrer\">Unterschriftenfeld in HTML-Formular<\/a>&#8220; auf. Hier haben wir uns angeschaut, wie wir in einem <a title=\"Create HTML form\" href=\"https:\/\/da-software.net\/en\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML-Formular<\/a> eine Unterschrift mit Touch oder Maus aufzeichnen k\u00f6nnen.<\/p>\n<p>Nun wollen wir uns anschauen, wie wir diese Unterschrift auch noch in einer MySQL-Datenbank speichern k\u00f6nnen und anschlie\u00dfend auch wieder ausgeben k\u00f6nnen. Das Beispielscript gibt es am Ende zum Download.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Die_MySQL-Datenbank\"><\/span>Die MySQL-Datenbank<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Unsere Datenbank speichert neben der automatischen ID noch den Namen und die Unterschrift.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1024\" src=\"\/wp-content\/uploads\/2020\/08\/unterschrift_db_1.png\" alt=\"\" width=\"699\" height=\"132\" srcset=\"\/wp-content\/uploads\/2020\/08\/unterschrift_db_1.png 699w, \/wp-content\/uploads\/2020\/08\/unterschrift_db_1-300x57.png 300w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/p>\n<p>Die Datenbankstruktur des Beispiels finden Sie in der &#8222;datenbank.sql&#8220;-Datei des Scriptes. Die Unterschrift wird als Base64-Bild gespeichert und verwendet daher ein Text-Feld.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Formular_in_Datenbank_speichern\"><\/span>Formular in Datenbank speichern<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Um das Formular in die Datenbank zu speichern, verwenden wir den folgenden Code:<\/p>\n<pre>$image = \"\";\r\nif (isset($_POST[\"signature\"]))\r\n{\r\n    $image = $_POST[\"signature\"];\r\n    $name = $_POST[\"name\"];\r\n\r\n    \/\/Datenverbindung herstellen\r\n    $link = mysqli_connect(\"127.0.0.1\", \"root\", \"\", \"sigdb\");\r\n\r\n    if (!$link) {\r\n        echo \"Fehler: konnte nicht mit MySQL verbinden.\" . PHP_EOL;\r\n        echo \"Debug-Fehlernummer: \" . mysqli_connect_errno() . PHP_EOL;\r\n        echo \"Debug-Fehlermeldung: \" . mysqli_connect_error() . PHP_EOL;\r\n        exit;\r\n    }\r\n\r\n    $image = mysqli_real_escape_string($link, $image);\r\n    $name = mysqli_real_escape_string($link, $name);\r\n\r\n    \/\/SQL-Statement zur Speicherung in Datenbank\r\n    $sql = \"INSERT INTO signatures (name, signature) VALUES ('$name', '$image')\";\r\n\r\n    \/\/in Datenbank speichern\r\n    mysqli_query($link, $sql);\r\n\r\n    echo \"&lt;p&gt;Bild in Datenbank abgelegt&lt;\/p&gt;\";\r\n\r\n} else {\r\n    echo \"&lt;p&gt;Kein Bild \u00fcbertragen&lt;\/p&gt;\";\r\n}<\/pre>\n<p>Zuerst lesen wir den Namen und die Unterschrift aus und weisen diese lokalen Variablen zu. Anschlie\u00dfend verbinden wir uns zur Datenbank, escapen zur Sicherheit die Eingaben und erstellen nun ein SQL-Statement zur Speicherung der Daten in der Datenbank.<\/p>\n<p>Nun f\u00fchren wir das SQL-Statement aus und dann sind die Daten auch schon in der Datenbank.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Auslesen_der_Unterschrift_und_Anzeige\"><\/span>Auslesen der Unterschrift und Anzeige<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der Code:<\/p>\n<pre>&lt;?php\r\n\/\/Alle Unterschriften auslesen und anzeigen\r\n$sql = \"SELECT name, signature from signatures order by ID DESC\";\r\n$res = mysqli_query($link, $sql);\r\n\r\nwhile ($line = $res-&gt;fetch_object())\r\n{\r\n    echo \"&lt;h3&gt;Name: \" . $line-&gt;name . \"&lt;\/h3&gt;\\n\";\r\n    echo \"&lt;img src=\\\"\" . $line-&gt;signature . \"\\\"&gt;\\n\";\r\n\r\n}\r\n\r\necho \"&lt;hr\/&gt;\\n\";\r\n?&gt;<\/pre>\n<p>Das Auslesen geht analog, wir verwenden im Beispiel die bereits bestehende Datenbankverbindung, ansonsten muss dieser vorher noch hergestellt werden. Anschlie\u00dfend lesen wir die Datenbanktabelle aus und geben Bild und Namen aus.<\/p>\n<p>Das Bild bzw. die Unterschrift geben wir eingebettet als Base64-Bild aus.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1025\" src=\"\/wp-content\/uploads\/2020\/08\/unterschrift_db_2.png\" alt=\"\" width=\"500\" height=\"480\" srcset=\"\/wp-content\/uploads\/2020\/08\/unterschrift_db_2.png 500w, \/wp-content\/uploads\/2020\/08\/unterschrift_db_2-300x288.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Download_des_Scriptes\"><\/span>Download des Scriptes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"\/wp-content\/uploads\/2020\/08\/unterschrift_datenbank.zip\">Das Beispielscript kann hier heruntergeladen werden.<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Eine Unterschrift mit einem HTML-Formular aufzeichnen und anschlie\u00dfend in einer MySQL-Datenbank speichern.<\/p>\n","protected":false},"author":1,"featured_media":60,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[14],"tags":[24,31],"class_list":["post-1023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-mysql","tag-php"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=1023"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1023\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/60"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=1023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=1023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=1023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}