Подключение регистрационной формы к Firebase

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.

Оцените статью
devanswers.ru
Добавить комментарий