...
✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular

378

Möchten 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.

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ögerungen). Weitere Informationen zu Firebase-Funktionen finden Sie in der Dokumentation.

Für 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.

Firebase-Konfiguration

Um zu beginnen, gehen Sie zur Firebase Console und erstellen Sie ein neues Projekt. Der Benutzer kann auch ein vorhandenes Projekt auswählen. 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 öffnet.

So verbinden Sie die Firebase Realtime Database mit Ihrem Website-FormularSo verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular

Kopieren Sie den im Popup angezeigten Code, der in den nächsten Schritten erforderlich ist. Klicken Sie im Menü auf der linken Seite auf ‘Datenbank’ und dann auf ‘Datenbank erstellen’ im Abschnitt Echtzeit-Datenbank.

So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular

Es öffnet sich ein Popup, wählt den Testmodus und klickt schließlich auf die Schaltfläche „Aktivieren”.

So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular

Sie werden zum nächsten Bildschirm weitergeleitet, auf dem Sie Ihre Echtzeitdatenbank sehen. Im Moment sind keine Daten vorhanden, daher ist Ihre Datenbank leer.

So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular

Verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular

Wir sind mit dem Firebase-Setup fertig. Als nächstes müssen 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ügen Sie den folgenden Code hinzu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Firebase</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
    <div class="row">
        <div class="container">
            <h2>Contact Form</h2>
            <div class="alert alert-success success-message" style="display:none;">Form submitted successfully.</div>
            <form id="contactForm">
                <div class="form-group">
                    <label for="exampleFullName">Full Name</label>
                    <input type="text" class="form-control fullname" id="exampleFullName" placeholder="Enter Full Name" required>
                </div>
                <div class="form-group">
                    <label for="exampleEmail">Email</label>
                    <input type="email" class="form-control email" id="exampleEmail" placeholder="Enter Email" required>
                </div>
                <div class="form-group">
                    <label for="exampleSubject">Subject</label>
                    <input type="text" class="form-control subject" id="exampleSubject" placeholder="Enter Subject" required>
                </div>
                <div class="form-group">
                    <label for="exampleMessage">Message</label>
                    <textarea class="form-control message" id="exampleMessage" placeholder="Enter Message" cols="30" rows="10" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-database.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

In den obigen Code habe ich eine Firebase JS-Datei eingefügt, main.jsdie ich zuvor kopiert habe, sowie die JS der Realtime Database. Erstellen Sie eine main.jsDatei im Ordner ‘js’. Diese JS-Datei verfügt über eine tatsächliche Logik für die Interaktion mit der Firebase. Fügen Sie den kopierten Code von Firebase am Anfang der main.jsDatei hinzu.

// Paste the code from Firebase
var config = {
    apiKey: "YOUR_API_KEY",
    authDomain: "Your_AuthDomain",
    databaseURL: "YOUR_DATABAE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
};
firebase.initializeApp(config);

Danach erstellen Sie eine Sammlung, unter der Ihre Formulardaten gespeichert werden. Sie können der Sammlung einen beliebigen Namen geben. In meinem Fall erstelle ich eine Sammlung namens ‘contactformmessages’.

// Reference messages collection
var messagesRef = firebase.database().ref('contactformmessages');

Schließlich nehmen wir alle Formularwerte und übergeben sie bei der Formularübermittlung wie folgt an die Firebase.

$('#contactForm').submit(function(e) {
    e.preventDefault();
 
    var newMessageRef = messagesRef.push();
    newMessageRef.set({
        name: $('.fullname').val(),
        email: $('.email').val(),
        subject: $('.subject').val(),
        message: $('.message').val()
    });
 
    $('.success-message').show();
 
    $('#contactForm')[0].reset();
});

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.

So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular

Daten aus der Firebase Realtime Database lesen

Sie müssen lernen, wie Sie Daten in die Realtime Database von Firebase schreiben. Vielleicht möchten 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 messagesRef. Mit dieser Variable können Sie Daten wie folgt lesen.

messagesRef.once('value').then((snapshot) => {
    Object.keys(snapshot.val()).forEach((key) => {
        console.log(`Name: ${snapshot.val()[key].name}`);
        console.log(`Email: ${snapshot.val()[key].email}`);
        console.log(`Subject: ${snapshot.val()[key].subject}`);
        console.log(`Message: ${snapshot.val()[key].message}`);
    });
});

Ich hoffe, Sie haben gelernt, Firebase mit dem Website-Formular zu verbinden. Bitte teilen Sie Ihre Gedanken und Vorschläge im Kommentarbereich unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen