Firebase — это платформа для разработки мобильных и веб-приложений, предоставляющая программистам множество инструментов, которые помогают им разрабатывать качественные приложения. В этом уроке мы рассмотрим, как можно использовать Firebase для создания регистрационных форм.
Мы можем разделить весь учебник на следующие этапы:-
Создайте Html-шаблон для регистрационной формы.
Добавьте CSS для дизайна и отзывчивости.
Подключение базы данных Firebase Realtime к форме регистрации с помощью Javascript.
1-Создание Html-шаблона для регистрационной формы
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ContactForm</title>
<link rel="stylesheet" href="contact_form.css">
<link rel='shortcut icon' type='image/x-icon' href='./favicon.ico' />
<script src="https://www.gstatic.com/firebasejs/9.9.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.9.1/firebase-database.js"></script>
</head>
<body>
<div class="container">
<div class="count">
<h3>Contact Form</h3>
</div>
<form id="form_contact" name="contact_form">
<label>First Name</label>
<input name="first_name" id="fname" type="text" required placeholder="" />
<br>
<label>Last Name</label>
<input name="last_name" id="sname" type="text" required placeholder="" />
<br>
<label>Email</label>
<input name="email" id="email" type="email" required placeholder="" />
<br>
<label>Message</label><br>
<textarea name="message" id="message" cols="30" rows="10" placeholder="Enter your message here ..." required> </textarea>
<div class="center">
<input type="submit" value="Submit">
</div>
</form>
</div>
<script src="contact_form.js"></script>
</body>
</html>
Вы можете внести изменения в HTML-форму в соответствии с вашими потребностями.
2-Добавьте CSS для дизайна и отзывчивости
Этот файл contact_form.css включается в HTML-файл.
@import url("https://fonts.googleapis.com/css?family=Roboto:400");
/* Set font of all elements to 'Roboto' */
* {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
/* Remove outline of all elements on focus */
*:focus {
outline: 0;
}
body {
background: #0d1316;
/* Set background color to #263238*/
}
h3 {
text-align: center;
}
/* Add styles to 'container' class */
.container {
padding: 12px 24px 24px 24px;
margin: 48px 12px;
background: #109bff;
border-radius: 4px;
}
/* Add styles to 'label' selector */
label {
font-size: 0.85em;
margin-left: 12px;
}
/* Add styles to 'input' and 'textarea' selectors */
input[type=text],
input[type=email],
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
/* Add styles to show 'focus' of selector */
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
border: 1px solid green;
}
/* Add styles to the submit button */
input[type=submit] {
background: #02060a;
margin: 0 auto;
outline: 0;
color: white;
border: 0;
padding: 12px 24px;
border-radius: 4px;
transition: all ease-in-out 0.1s;
position: relative;
display: inline-block;
text-align: center;
}
/* Add styles for 'focus' property */
input[type=submit]:focus {
background: #A5D6A7;
color: whitesmoke;
}
/* Style 'hover' property */
input[type=submit]:hover {
background: #b13efd;
}
/* Align items to center of the 'div' with the class 'center' */
.center {
text-align: center;
}
3-Подключение базы данных Firebase Realtime к форме регистрации с помощью Javascript
Для подключения к firebase нам нужно посетить следующий сайт. Затем нажмите на Добавить проект, укажите имя проекта и продолжите. Теперь для вас будет создан проект. (Вы можете обратиться к этому).
У вас будет возможность выбрать между базой данных Realtime Database и Cloud Firestore. В этом учебнике мы будем использовать базу данных реального времени. Нажмите на build в левом меню, выберите Realtime database и настройте базу данных.
Выберите Project overview из левого меню и выберите web app, создайте его, скопируйте значение firebaseConfig и вставьте его в js файл.
var firebaseConfig = {
apiKey: "AIzaSyBZS2UBi3VNk8uLZ9mdJfE6KRiZjcmxZiQ",
authDomain: "contact-form-2475b.firebaseapp.com",
databaseURL: "https://contact-form-2475b-default-rtdb.firebaseio.com",
projectId: "contact-form-2475b",
storageBucket: "contact-form-2475b.appspot.com",
messagingSenderId: "9283608547",
appId: "1:9283608547:web:51d2956027f8b49bdd4ad6",
measurementId: "G-5C2FQ0LQ74",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//Reference messages collection
let messagesRef = firebase.database().ref("messages");
//function to get form values
function getInputVal(id) {
return document.getElementById(id).value;
}
//save message to firebase
function saveMessage(fname, sname, email, message) {
let newMessageRef = messagesRef.push();
newMessageRef.set({
fname: fname,
sname: sname,
email: email,
message: message,
});
}
function submitForm(e) {
e.preventDefault();
// get Values
let fname = getInputVal("fname");
let sname = getInputVal("sname");
let email = getInputVal("email");
// let phone = getInputVal("phone");
let message = getInputVal("message");
//save message
saveMessage(fname, sname, email, message);
window.alert("You have successfully sent your message")
//clear form
document.getElementById("form_contact").reset();
}
//listen to form
document.getElementById("form_contact").addEventListener("submit", submitForm);
Будьте внимательны, чтобы все файлы находились в одной папке, или вы можете изменить путь к файлам.
Примечание: Если вы обнаружили, что ваши данные не отправляются в базу данных, проверьте консоль. Если вы видите ошибку с отказом в разрешении, то вам нужно вернуться к настройкам firebase. Нажмите на раздел базы данных в боковой панели, там вы увидите Правила. Как только вы нажмете на Правила, установите для чтения и записи значение true:
{
"rules": {
".read": true,
".write": true
}
}
Вы также можете посетить мой профиль на github.