{"id":25707,"date":"2021-06-11T16:43:00","date_gmt":"2021-06-11T13:43:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25707"},"modified":"2021-10-18T02:05:12","modified_gmt":"2021-10-17T23:05:12","slug":"comment-connecter-la-base-de-donnees-en-temps-reel-firebase-a-votre-formulaire-de-site-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-connecter-la-base-de-donnees-en-temps-reel-firebase-a-votre-formulaire-de-site-web\/","title":{"rendered":"Comment connecter la base de donn\u00e9es en temps r\u00e9el Firebase \u00e0 votre formulaire de site Web"},"content":{"rendered":"

Cherchez-vous \u00e0 stocker les donn\u00e9es de vos formulaires de site Web dans Firebase\u00a0? Si oui, alors vous \u00eates au bon endroit. Dans cet article, je vous montre comment connecter la base de donn\u00e9es en temps r\u00e9el Firebase au formulaire et stocker ses donn\u00e9es dans Firebase.<\/p>\n

La base de donn\u00e9es en temps r\u00e9el Firebase est une base de donn\u00e9es NoSQL h\u00e9berg\u00e9e dans le cloud. Dans Firebase, les donn\u00e9es sont stock\u00e9es au format JSON et synchronis\u00e9es en temps r\u00e9el avec tous les clients connect\u00e9s cr\u00e9\u00e9s \u00e0 l’aide des SDK iOS, Android et JavaScript. Lorsque nous disons en temps r\u00e9el, cela signifie que les donn\u00e9es sont \u00e9chang\u00e9es entre les applications et la base de donn\u00e9es en temps r\u00e9el (pas de retard). Vous pouvez en savoir plus sur les fonctionnalit\u00e9s de Firebase dans leur documentation<\/a>.<\/p>\n

Pour ce tutoriel, je vais cr\u00e9er un formulaire de contact simple et stocker les donn\u00e9es du formulaire dans la base de donn\u00e9es en temps r\u00e9el Firebase. Pour envoyer des donn\u00e9es du formulaire \u00e0 Firebase, j’utiliserai le SDK JavaScript.<\/p>\n

Configuration de la base de feu<\/h3>\n

Pour commencer, acc\u00e9dez \u00e0 la console Firebase<\/a> et cr\u00e9ez un nouveau projet. L’utilisateur peut \u00e9galement choisir un projet existant. Une fois que vous avez cr\u00e9\u00e9 un nouveau projet, vous serez redirig\u00e9 vers une page o\u00f9 vous obtiendrez le code JavaScript de Firebase. Cliquez sur une ic\u00f4ne de code qui ouvrira une fen\u00eatre contextuelle.<\/p>\n

\"Comment<\/a>\"Comment<\/a><\/p>\n

Copiez le code affich\u00e9 dans la fen\u00eatre contextuelle qui n\u00e9cessite les \u00e9tapes suivantes. Dans le menu de gauche, cliquez sur \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb, puis sur \u00ab\u00a0Cr\u00e9er une base de donn\u00e9es\u00a0\u00bb dans la section Base de donn\u00e9es en temps r\u00e9el.<\/p>\n

\"Comment<\/a><\/p>\n

Il ouvrira une fen\u00eatre contextuelle, choisira le mode test et enfin cliquera sur le bouton \u00ab\u00a0Activer\u00a0\u00bb.<\/p>\n

\"Comment<\/a><\/p>\n

Vous serez redirig\u00e9 vers l’\u00e9cran suivant o\u00f9 vous verrez votre base de donn\u00e9es en temps r\u00e9el. Pour le moment, il n’y a pas de donn\u00e9es, donc votre base de donn\u00e9es est vide.<\/p>\n

\"Comment<\/a><\/p>\n

Connectez la base de donn\u00e9es en temps r\u00e9el Firebase \u00e0 votre formulaire de site Web<\/h3>\n

Nous avons termin\u00e9 avec la configuration de Firebase. La prochaine chose \u00e0 faire est de cr\u00e9er un formulaire et de stocker les donn\u00e9es du formulaire dans Firebase. Cr\u00e9ons un formulaire de contact simple au-dessus de Bootstrap. Cr\u00e9ez un fichier index.html et ajoutez-y le code ci-dessous.<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Firebase<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css\" integrity=\"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk\" crossorigin=\"anonymous\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2>Contact Form<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"alert alert-success success-message\" style=\"display:none;\">Form submitted successfully.<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<form id=\"contactForm\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleFullName\">Full Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control fullname\" id=\"exampleFullName\" placeholder=\"Enter Full Name\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleEmail\">Email<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\" class=\"form-control email\" id=\"exampleEmail\" placeholder=\"Enter Email\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleSubject\">Subject<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control subject\" id=\"exampleSubject\" placeholder=\"Enter Subject\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleMessage\">Message<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<textarea class=\"form-control message\" id=\"exampleMessage\" placeholder=\"Enter Message\" cols=\"30\" rows=\"10\" required><\/textarea>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/www.gstatic.com\/firebasejs\/7.15.5\/firebase-app.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/www.gstatic.com\/firebasejs\/7.15.5\/firebase-database.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"js\/main.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Dans le code ci-dessus, j’ai inclus un fichier Firebase JS avant main.js<\/code>lequel j’ai copi\u00e9 auparavant ainsi que le JS de Realtime Database. Cr\u00e9ez un main.js<\/code>fichier dans le dossier ‘js’. Ce fichier JS aura une logique r\u00e9elle pour interagir avec Firebase. Ajoutez le code copi\u00e9 de Firebase en haut du main.js<\/code>fichier.<\/p>\n
\/\/ 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
Apr\u00e8s cela, cr\u00e9ez une collection sous laquelle vos donn\u00e9es de formulaire seraient stock\u00e9es. Vous pouvez donner n’importe quel nom \u00e0 la collection. Dans mon cas, je cr\u00e9e une collection appel\u00e9e ‘contactformmessages’.<\/p>\n
\/\/ Reference messages collection\nvar messagesRef = firebase.database().ref('contactformmessages');<\/code><\/pre>\n
Enfin, nous prendrons toutes les valeurs du formulaire et les transmettrons \u00e0 Firebase lors de la soumission du formulaire de la mani\u00e8re suivante.<\/p>\n
$('#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
Maintenant, essayez de soumettre un formulaire avec des valeurs factices et dirigez-vous vers votre base de donn\u00e9es en temps r\u00e9el Firebase, vous devriez voir vos donn\u00e9es stock\u00e9es dans la base de donn\u00e9es. Cela ressemblera \u00e0 ci-dessous.<\/p>\n
\"Comment<\/a><\/p>\n
Lire les donn\u00e9es de la base de donn\u00e9es en temps r\u00e9el Firebase<\/h3>\n
Vous devez apprendre \u00e0 \u00e9crire des donn\u00e9es dans la base de donn\u00e9es en temps r\u00e9el de Firebase. Vous pouvez \u00e9galement le lire \u00e0 partir de Firebase. La lecture des donn\u00e9es de Firebase est simple et ne n\u00e9cessite que quelques lignes de code JavaScript. Nous avons cr\u00e9\u00e9 une collection de messages en tant que messagesRef<\/code>. En utilisant cette variable, vous pouvez lire les donn\u00e9es comme suit.<\/p>\n
messagesRef.once('value').then((snapshot) => {\n\u00a0\u00a0\u00a0\u00a0Object.keys(snapshot.val()).forEach((key) => {\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
J’esp\u00e8re que vous avez appris \u00e0 connecter Firebase au formulaire du site Web. S’il vous pla\u00eet partager vos pens\u00e9es et suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n