Создайте веб-сайт с использованием HTML, CSS и JavaScript, который хранит данные в Firebase.

Опубликовано: 30 Ноября, 2021

Ниже приведены несколько простых шагов для подключения нашей статической веб-страницы к Firebase.

Пошаговая реализация:

Шаг 1. Во-первых, мы собираемся создать проект на Firebase для подключения нашей статической веб-страницы. Посетите страницу Firebase, чтобы настроить свой проект. Посетите веб-сайт и нажмите кнопку « Добавить проект» , как показано ниже.

Шаг 2: Дайте название вашему проекту и нажмите кнопку « Продолжить» .

Шаг 3: Теперь нажмите кнопку « Продолжить» .

Шаг 4: Теперь выберите учетную запись по умолчанию для Firebase и нажмите кнопку « Создать проект» .

Шаг 5: Теперь ваш проект создан, и все готово.

Шаг 6: Теперь щелкните 3-й значок - кнопку « Интернет» (</>) .

Шаг 7: Дайте псевдоним своему веб-проекту и нажмите кнопку « Зарегистрировать приложение» .

Шаг 8: Теперь вы увидите такую конфигурацию вашего приложения. Скопируйте этот код куда-нибудь, так как мы будем использовать его позже.

Шаг 9: Щелкните базу данных реального времени, как показано ниже.

Шаг 10: Теперь нажмите кнопку « Создать базу данных» .

Шаг 11: Теперь нажмите Тестовый режим, а затем нажмите кнопку Включить .

Шаг 12: активируйте Firebase Storage. Нажмите кнопку «Хранилище» слева и нажмите «Начать работу».

После этого появится это окно. Щелкните Далее.
Затем нажмите Готово.

Настройка проекта:

Теперь создайте HTML- файл и скопируйте код сценария, который вы скопировали на шаге 8 . Следующий файл - это просто образец, чтобы вы поняли, как настроить свой проект.

HTML

 <!DOCTYPE html>
 < html lang = "en" >
 
< head >
    < meta charset = "UTF-8" >
    < title >Colleting Data</ title >
    < script src =
 " https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js " >
    </ script >
 
    < link rel = "stylesheet" href =
 " https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css "
        integrity =
 "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin = "anonymous" >
 </ head >
 
< body class = "container" style="margin-top: 50px;
    width: 50%; height:auto;">
     
    < h2 class = "text-primary" style =
        "margin-left: 15px; margin-bottom: 10px" >
        Hey There,Help Us In Collecting Data
    </ h2 >
     
    < form class = "container" id = "contactForm" >
        < div class = "card" >
            < div class = "card-body" >
                < div class = "form-group" >
                    < label for = "exampleFormControlInput1" >
                        Enter Your Name
                    </ label >
                     
                    < input type = "text" class = "form-control"
                    id = "name" placeholder = "Enter your name" >
                </ div >
 
                < div class = "form-group" >
                    < label for = "exampleFormControlInput1" >
                        Email address
                    </ label >
                     
                    < input type = "email" class = "form-control"
                    id = "email" placeholder = "name@example.com" >
                </ div >
            </ div >
            < button type = "submit" class = "btn btn-primary"
                style = "margin-left: 15px; margin-top: 10px" >
                Submit
            </ button >
        </ div >
    </ form >
 
    < script src =
 " https://www.gstatic.com/firebasejs/3.7.4/firebase.js " >
    </ script >
     
    < script >
        var firebaseConfig = {
            apiKey: "Use Your Api Key Here",
            authDomain: "Use Your authDomain Here",
            databaseURL: "Use Your databaseURL Here",
            projectId: "Use Your projectId Here",
            storageBucket: "Use Your storageBucket Here",
            messagingSenderId: "Use Your messagingSenderId Here",
            appId: "Use Your appId Here"
        };
 
        firebase.initializeApp(firebaseConfig);
 
        var messagesRef = firebase.database()
            .ref('Collected Data');
         
        document.getElementById('contactForm')
            .addEventListener('submit', submitForm);
 
        function submitForm(e) {
            e.preventDefault();
 
            // Get values
            var name = getInputVal('name');
            var email = getInputVal('email');
 
            saveMessage(name, email);
            document.getElementById('contactForm').reset();
        }
 
        // Function to get get form values
        function getInputVal(id) {
            return document.getElementById(id).value;
        }
 
        // Save message to firebase
        function saveMessage(name, email) {
            var newMessageRef = messagesRef.push();
            newMessageRef.set({
                name: name,
                email: email,
            });
        }
    </ script >
 </ body >
 
</ html > 

Выход:

Введите несколько примеров значений имени и адреса электронной почты в данную форму, как показано ниже.

После нажатия кнопки « Отправить» данные сохраняются в базе данных в реальном времени, как показано ниже.

Technical Scripter JavaScript HTML CSS-Misc HTML-Misc JavaScript-Misc CSS

Создайте веб-сайт с использованием HTML, CSS и JavaScript, который хранит данные в Firebase.

Пошаговая реализация:

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ