{"id":29420,"date":"2021-06-11T16:10:00","date_gmt":"2021-06-11T13:10:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29420"},"modified":"2021-10-17T04:18:23","modified_gmt":"2021-10-17T01:18:23","slug":"hur-man-ansluter-firebase-realtime-databas-till-din-webbplatsformular","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-ansluter-firebase-realtime-databas-till-din-webbplatsformular\/","title":{"rendered":"Hur man ansluter Firebase Realtime-databas till din webbplatsformul\u00e4r"},"content":{"rendered":"<p>Letar du efter att lagra dina webbformul\u00e4rsdata i Firebase? Om ja, d\u00e5 \u00e4r du p\u00e5 r\u00e4tt plats. I den h\u00e4r artikeln visar jag dig hur du ansluter Firebase-realtidsdatabasen till formul\u00e4ret och lagrar dess data till Firebase.<\/p>\n<p>Firebase realtidsdatabasen \u00e4r en molnv\u00e4rd NoSQL-databas. I Firebase lagras data som JSON och synkroniseras i realtid med alla anslutna klienter som \u00e4r byggda med iOS, Android och JavaScript SDK. N\u00e4r vi s\u00e4ger realtid betyder det data som utbyts mellan applikationer och databaser i realtid (inga f\u00f6rseningar). Du kan l\u00e4sa mer om Firebase-funktioner i deras <a href=\"https:\/\/firebase.google.com\/docs\/database\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentation<\/a>.<\/p>\n<p>F\u00f6r denna handledning skapar jag ett enkelt kontaktformul\u00e4r och lagrar formul\u00e4rdata till Firebase-realtidsdatabasen. F\u00f6r att skicka data fr\u00e5n formul\u00e4ret till Firebase anv\u00e4nder jag JavaScript SDK.<\/p>\n<h3>Firebase-konfiguration<\/h3>\n<p>F\u00f6r att komma ig\u00e5ng, g\u00e5 \u00f6ver till <a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Firebase Console<\/a> och skapa ett nytt projekt. Anv\u00e4ndaren kan ocks\u00e5 v\u00e4lja ett befintligt projekt. N\u00e4r du v\u00e4l har skapat ett nytt projekt kommer du att omdirigera till en sida d\u00e4r du skulle f\u00e5 JavaScript-koden f\u00f6r Firebase. Klicka p\u00e5 en kodikon som \u00f6ppnar en popup.<\/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=\"Hur man ansluter Firebase Realtime-databas till din webbplatsformul\u00e4r\" ><\/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=\"Hur man ansluter Firebase Realtime-databas till din webbplatsformul\u00e4r\" ><\/a><\/p>\n<p>Kopiera koden som visas i popupen som kr\u00e4vs i n\u00e4sta steg. Fr\u00e5n menyn till v\u00e4nster klickar du p\u00e5 &#8217;Databas&#8217; och sedan p\u00e5 &#8217;Skapa databas&#8217; under avsnittet Realtidsdatabas.<\/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=\"Hur man ansluter Firebase Realtime-databas till din webbplatsformul\u00e4r\" ><\/a><\/p>\n<p>Det \u00f6ppnar en popup, v\u00e4ljer testl\u00e4ge och klickar slutligen p\u00e5 knappen &quot;Aktivera&quot;.<\/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=\"Hur man ansluter Firebase Realtime-databas till din webbplatsformul\u00e4r\" ><\/a><\/p>\n<p>Du omdirigerar till n\u00e4sta sk\u00e4rm d\u00e4r du kommer att se din realtidsdatabas. Just nu finns det inga data s\u00e5 din databas \u00e4r tom.<\/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=\"Hur man ansluter Firebase Realtime-databas till din webbplatsformul\u00e4r\" ><\/a><\/p>\n<h3>Anslut Firebase Realtidsdatabas till din webbplatsformul\u00e4r<\/h3>\n<p>Vi \u00e4r klara med Firebase-installationen. N\u00e4sta sak som beh\u00f6ver g\u00f6ras \u00e4r att skapa ett formul\u00e4r och lagra formul\u00e4rdata till Firebase. L\u00e5t oss bygga ett enkelt kontaktformul\u00e4r ovanp\u00e5 Bootstrap. Skapa ett filindex.html och l\u00e4gg till koden nedan i den.<\/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>I ovanst\u00e5ende kod inkluderade jag en Firebase JS-fil innan <code>main.js<\/code>jag kopierade innan plus JS i Realtime Database. Skapa en <code>main.js<\/code>fil under mappen &#8217;js&#8217;. Denna JS-fil kommer att ha faktisk logik f\u00f6r att interagera med Firebase. L\u00e4gg till den kopierade koden fr\u00e5n Firebase h\u00f6gst upp i <code>main.js<\/code>filen.<\/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>Skapa efter detta en samling under vilken din formul\u00e4rdata skulle lagras. Du kan ge valfritt namn till samlingen. I mitt fall skapar jag en samling som heter &#8217;contactformmessages&#8217;.<\/p>\n<pre><code>\/\/ Reference messages collection\nvar messagesRef = firebase.database().ref('contactformmessages');<\/code><\/pre>\n<p>Slutligen tar vi alla formul\u00e4rv\u00e4rden och skickar dem till Firebase p\u00e5 formul\u00e4ret p\u00e5 f\u00f6ljande s\u00e4tt.<\/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>F\u00f6rs\u00f6k nu att skicka ett formul\u00e4r med dummyv\u00e4rden och g\u00e5 \u00f6ver till din Firebase-realtidsdatabas. Du b\u00f6r se dina data lagrade i databasen. Det kommer att se ut nedan.<\/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=\"Hur man ansluter Firebase Realtime-databas till din webbplatsformul\u00e4r\" ><\/a><\/p>\n<h3>L\u00e4s data fr\u00e5n Firebase Realtime Database<\/h3>\n<p>Du m\u00e5ste l\u00e4ra dig att skriva data till Realtime Database of Firebase. Du kanske ocks\u00e5 vill l\u00e4sa den fr\u00e5n Firebase. Att l\u00e4sa data fr\u00e5n Firebase \u00e4r enkelt och kr\u00e4ver bara n\u00e5gra rader JavaScript-kod. Vi har skapat en meddelandesamling som <code>messagesRef<\/code>. Med hj\u00e4lp av denna variabel kan du l\u00e4sa data enligt f\u00f6ljande.<\/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>Jag hoppas att du har l\u00e4rt dig hur du ansluter Firebase till webbplatsformul\u00e4ret. Dela dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n<h4>relaterade artiklar<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-tar-backup-av-laravel-application\/\" title=\"Hur man tar backup av Laravel Application\">Hur man tar backup av Laravel Application<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/?p=27418\" title=\"Hur man lagrar WordPress Backup till Dropbox automatiskt\">Hur man lagrar WordPress Backup till Dropbox automatiskt<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/distribuera-statisk-webbplats-pa-firebase-hosting-gratis\/\" title=\"Distribuera statisk webbplats p\u00e5 Firebase Hosting gratis\">Distribuera statisk webbplats p\u00e5 Firebase Hosting gratis<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I den h\u00e4r artikeln studerar vi hur man ansluter webbplatsformul\u00e4r till Firebase Realtime Database. Om du g\u00f6r det lagras v\u00e5r formul\u00e4rdata i Firebase<\/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":[251],"tags":[850],"class_list":["post-29420","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-10","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/29420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=29420"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/29420\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/20261"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=29420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=29420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=29420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}