{"id":25643,"date":"2021-06-11T16:40:00","date_gmt":"2021-06-11T13:40:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25643"},"modified":"2021-10-18T02:30:25","modified_gmt":"2021-10-17T23:30:25","slug":"so-verbinden-sie-die-firebase-realtime-database-mit-ihrem-website-formular","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-verbinden-sie-die-firebase-realtime-database-mit-ihrem-website-formular\/","title":{"rendered":"So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular"},"content":{"rendered":"<p>M\u00f6chten Sie Ihre Website-Formulardaten in der Firebase speichern? Wenn ja, dann sind Sie hier richtig. In diesem Artikel zeige ich Ihnen, wie Sie die Firebase-Echtzeitdatenbank mit dem Formular verbinden und deren Daten in der Firebase speichern.<\/p>\n<p>Die Firebase-Echtzeitdatenbank ist eine in der Cloud gehostete NoSQL-Datenbank. In Firebase werden Daten als JSON gespeichert und in Echtzeit mit allen verbundenen Clients synchronisiert, die mit iOS-, Android- und JavaScript-SDKs erstellt wurden. Wenn wir Echtzeit sagen, bedeutet dies, dass Daten zwischen Anwendungen und Datenbank in Echtzeit ausgetauscht werden (keine Verz\u00f6gerungen). Weitere Informationen zu Firebase-Funktionen finden Sie in der <a href=\"https:\/\/firebase.google.com\/docs\/database\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Dokumentation<\/a>.<\/p>\n<p>F\u00fcr dieses Tutorial erstelle ich ein einfaches Kontaktformular und speichere die Formulardaten in der Firebase-Echtzeitdatenbank. Um Daten aus dem Formular an Firebase zu senden, verwende ich JavaScript SDK.<\/p>\n<h3>Firebase-Konfiguration<\/h3>\n<p>Um zu beginnen, gehen Sie zur <a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Firebase Console<\/a> und erstellen Sie ein neues Projekt. Der Benutzer kann auch ein vorhandenes Projekt ausw\u00e4hlen. Sobald Sie ein neues Projekt erstellen, werden Sie zu einer Seite weitergeleitet, auf der Sie JavaScript-Code von Firebase erhalten. Klicken Sie auf ein Codesymbol, das ein Popup \u00f6ffnet.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d4836b9a0.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d4836b9a0.png\" alt=\"So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular\" ><\/a><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d484e50de.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d484e50de.png\" alt=\"So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular\" ><\/a><\/p>\n<p>Kopieren Sie den im Popup angezeigten Code, der in den n\u00e4chsten Schritten erforderlich ist. Klicken Sie im Men\u00fc auf der linken Seite auf &#8218;Datenbank&#8216; und dann auf &#8218;Datenbank erstellen&#8216; im Abschnitt Echtzeit-Datenbank.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" alt=\"So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular\" ><\/a><\/p>\n<p>Es \u00f6ffnet sich ein Popup, w\u00e4hlt den Testmodus und klickt schlie\u00dflich auf die Schaltfl\u00e4che \u201eAktivieren&#8220;.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" alt=\"So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular\" ><\/a><\/p>\n<p>Sie werden zum n\u00e4chsten Bildschirm weitergeleitet, auf dem Sie Ihre Echtzeitdatenbank sehen. Im Moment sind keine Daten vorhanden, daher ist Ihre Datenbank leer.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" alt=\"So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular\" ><\/a><\/p>\n<h3>Verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular<\/h3>\n<p>Wir sind mit dem Firebase-Setup fertig. Als n\u00e4chstes m\u00fcssen Sie ein Formular erstellen und Formulardaten in der Firebase speichern. Lassen Sie uns ein einfaches Kontaktformular auf Bootstrap aufbauen. Erstellen Sie eine Datei index.html und f\u00fcgen Sie den folgenden Code hinzu.<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"UTF-8\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;title&gt;Firebase&lt;\/title&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css\" integrity=\"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk\" crossorigin=\"anonymous\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"container\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2&gt;Contact Form&lt;\/h2&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"alert alert-success success-message\" style=\"display:none;\"&gt;Form submitted successfully.&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;form id=\"contactForm\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"exampleFullName\"&gt;Full Name&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"text\" class=\"form-control fullname\" id=\"exampleFullName\" placeholder=\"Enter Full Name\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"exampleEmail\"&gt;Email&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"email\" class=\"form-control email\" id=\"exampleEmail\" placeholder=\"Enter Email\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"exampleSubject\"&gt;Subject&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"text\" class=\"form-control subject\" id=\"exampleSubject\" placeholder=\"Enter Subject\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"exampleMessage\"&gt;Message&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;textarea class=\"form-control message\" id=\"exampleMessage\" placeholder=\"Enter Message\" cols=\"30\" rows=\"10\" required&gt;&lt;\/textarea&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Submit&lt;\/button&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/form&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/www.gstatic.com\/firebasejs\/7.15.5\/firebase-app.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/www.gstatic.com\/firebasejs\/7.15.5\/firebase-database.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"js\/main.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>In den obigen Code habe ich eine Firebase JS-Datei eingef\u00fcgt, <code>main.js<\/code>die ich zuvor kopiert habe, sowie die JS der Realtime Database. Erstellen Sie eine <code>main.js<\/code>Datei im Ordner &#8218;js&#8216;. Diese JS-Datei verf\u00fcgt \u00fcber eine tats\u00e4chliche Logik f\u00fcr die Interaktion mit der Firebase. F\u00fcgen Sie den kopierten Code von Firebase am Anfang der <code>main.js<\/code>Datei hinzu.<\/p>\n<pre><code>\/\/ Paste the code from Firebase\nvar config = {\n\u00a0\u00a0\u00a0\u00a0apiKey: \"YOUR_API_KEY\",\n\u00a0\u00a0\u00a0\u00a0authDomain: \"Your_AuthDomain\",\n\u00a0\u00a0\u00a0\u00a0databaseURL: \"YOUR_DATABAE_URL\",\n\u00a0\u00a0\u00a0\u00a0projectId: \"YOUR_PROJECT_ID\",\n\u00a0\u00a0\u00a0\u00a0storageBucket: \"YOUR_STORAGE_BUCKET\",\n\u00a0\u00a0\u00a0\u00a0messagingSenderId: \"YOUR_SENDER_ID\",\n\u00a0\u00a0\u00a0\u00a0appId: \"YOUR_APP_ID\"\n};\nfirebase.initializeApp(config);<\/code><\/pre>\n<p>Danach erstellen Sie eine Sammlung, unter der Ihre Formulardaten gespeichert werden. Sie k\u00f6nnen der Sammlung einen beliebigen Namen geben. In meinem Fall erstelle ich eine Sammlung namens &#8218;contactformmessages&#8216;.<\/p>\n<pre><code>\/\/ Reference messages collection\nvar messagesRef = firebase.database().ref('contactformmessages');<\/code><\/pre>\n<p>Schlie\u00dflich nehmen wir alle Formularwerte und \u00fcbergeben sie bei der Formular\u00fcbermittlung wie folgt an die Firebase.<\/p>\n<pre><code>$('#contactForm').submit(function(e) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0var newMessageRef = messagesRef.push();\n\u00a0\u00a0\u00a0\u00a0newMessageRef.set({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name: $('.fullname').val(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0email: $('.email').val(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0subject: $('.subject').val(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message: $('.message').val()\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('.success-message').show();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('#contactForm')[0].reset();\n});<\/code><\/pre>\n<p>Versuchen Sie nun, ein Formular mit Dummy-Werten zu senden und gehen Sie zu Ihrer Firebase-Echtzeitdatenbank. Sie sollten Ihre Daten in der Datenbank gespeichert sehen. Es wird wie unten aussehen.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20260-6081d485e1c3f.png\" alt=\"So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular\" ><\/a><\/p>\n<h3>Daten aus der Firebase Realtime Database lesen<\/h3>\n<p>Sie m\u00fcssen lernen, wie Sie Daten in die Realtime Database von Firebase schreiben. Vielleicht m\u00f6chten Sie es auch von Firebase lesen. Das Lesen von Daten aus Firebase ist einfach und erfordert nur wenige Zeilen JavaScript-Code. Wir haben eine Nachrichtensammlung als erstellt <code>messagesRef<\/code>. Mit dieser Variable k\u00f6nnen Sie Daten wie folgt lesen.<\/p>\n<pre><code>messagesRef.once('value').then((snapshot) =&gt; {\n\u00a0\u00a0\u00a0\u00a0Object.keys(snapshot.val()).forEach((key) =&gt; {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Name: ${snapshot.val()[key].name}`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Email: ${snapshot.val()[key].email}`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Subject: ${snapshot.val()[key].subject}`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Message: ${snapshot.val()[key].message}`);\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n<p>Ich hoffe, Sie haben gelernt, Firebase mit dem Website-Formular zu verbinden. Bitte teilen Sie Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten mit.<\/p>\n<h4>Zum Thema passende Artikel<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/so-erstellen-sie-ein-backup-der-laravel-anwendung\/\" title=\"So erstellen Sie ein Backup der Laravel-Anwendung\">So erstellen Sie ein Backup der Laravel-Anwendung<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/?p=23846\" title=\"So speichern Sie WordPress-Backups automatisch in Dropbox\">So speichern Sie WordPress-Backups automatisch in Dropbox<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/statische-website-kostenlos-auf-firebase-hosting-bereitstellen\/\" title=\"Statische Website kostenlos auf Firebase Hosting bereitstellen\">Statische Website kostenlos auf Firebase Hosting bereitstellen<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Artikel untersuchen wir, wie Sie das Website-Formular mit der Firebase Realtime Database verbinden. Dabei werden unsere Formulardaten in der Firebase gespeichert<\/p>\n","protected":false},"author":1,"featured_media":20261,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[244],"tags":[845],"class_list":["post-25643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-3","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/25643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=25643"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/25643\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/20261"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=25643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=25643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=25643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}