So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular
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.
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.
Es öffnet sich ein Popup, wählt den Testmodus und klickt schließlich auf die Schaltfläche „Aktivieren”.
Sie werden zum nächsten Bildschirm weitergeleitet, auf dem Sie Ihre Echtzeitdatenbank sehen. Im Moment sind keine Daten vorhanden, daher ist Ihre Datenbank leer.
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.js
die ich zuvor kopiert habe, sowie die JS der Realtime Database. Erstellen Sie eine main.js
Datei 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.js
Datei 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.
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
- So erstellen Sie ein Backup der Laravel-Anwendung
- So speichern Sie WordPress-Backups automatisch in Dropbox
- Statische Website kostenlos auf Firebase Hosting bereitstellen