Laravel RealTime CRUD Using Google Firebase

Md Obydullah

Apr 27, 2019 · Article · 9 min, 1796 words

In this tutorial, I am going to show you the real-time CRUD using Google Firebase. Let’s follow these steps:

Create a Firebase Project
Create a Laravel Project
Register View Route
Configure Firebase Setting
Add a Blade File
Run and Test

Step 1 : Create a Firebase Project

Let’s first create a firebase project and take firebase credentials. Go to
https://firebase.google.com/ and create a project.

Enter a project name and click “Create project” button.

Our firebase project has been created. Now click “Continue” button. On the Project Overview page, you will see like this:

From this page, select Web. Then you will see a popup window with the firebase web config credentials.

We have successfully created a Firebase project and got the necessary credentials.

Step 2 : Create a Laravel Project

Go to your project directory using CMD and run this command to create a Laravel project:

composer create-project --prefer-dist laravel/laravel laravelproject

Step 3 : Register View Route

Go to routes >> web.php and register this route:

web.php

<?php

Route::view('customers', 'customers');

Step 4 : Configure Firebase Setting

Now, we are configuring google firebase setting in our laravel application. so, open config/services.php file and set following configuration in this file.

services.php

'firebase' => [
    'api_key' => 'api_key', // Only used for JS integration
    'auth_domain' => 'auth_domain', // Only used for JS integration
    'database_url' => 'https://database_url.com/',
    'storage_bucket' => '', // Only used for JS integration
],

Step 5 : Add a Blade File

Navigate to resources >> views directory and create a file named “customers.blade.php”. Then open the file and paste this code:

customers.blade.php

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <title>Laravel RealTime CRUD Using Google Firebase</title>

</head>
<body>

<div class="container" style="margin-top: 50px;">

    <h4 class="text-center">Laravel RealTime CRUD Using Google Firebase</h4><br>

    <h5># Add Customer</h5>
    <div class="card card-default">
        <div class="card-body">
            <form id="addCustomer" class="form-inline" method="POST" action="">
                <div class="form-group mb-2">
                    <label for="name" class="sr-only">Name</label>
                    <input id="name" type="text" class="form-control" name="name" placeholder="Name"
                           required autofocus>
                </div>
                <div class="form-group mx-sm-3 mb-2">
                    <label for="email" class="sr-only">Email</label>
                    <input id="email" type="email" class="form-control" name="email" placeholder="Email"
                           required autofocus>
                </div>
                <button id="submitCustomer" type="button" class="btn btn-primary mb-2">Submit</button>
            </form>
        </div>
    </div>

    <br>

    <h5># Customers</h5>
    <table class="table table-bordered">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th width="180" class="text-center">Action</th>
        </tr>
        <tbody id="tbody">

        </tbody>
    </table>
</div>

<!-- Update Model -->
<form action="" method="POST" class="users-update-record-model form-horizontal">
    <div id="update-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="width:55%;">
            <div class="modal-content" style="overflow: hidden;">
                <div class="modal-header">
                    <h4 class="modal-title" id="custom-width-modalLabel">Update</h4>
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                </div>
                <div class="modal-body" id="updateBody">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light"
                            data-dismiss="modal">Close
                    </button>
                    <button type="button" class="btn btn-success updateCustomer">Update
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Delete Model -->
<form action="" method="POST" class="users-remove-record-model">
    <div id="remove-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"
         aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered" style="width:55%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="custom-width-modalLabel">Delete</h4>
                    <button type="button" class="close remove-data-from-delete-form" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                </div>
                <div class="modal-body">
                    <p>Do you want to delete this record?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect remove-data-from-delete-form"
                            data-dismiss="modal">Close
                    </button>
                    <button type="button" class="btn btn-danger waves-effect waves-light deleteRecord">Delete
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>


{{--Firebase Tasks--}}
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>
<script>
    // Initialize Firebase
    var config = {
        apiKey: "{{ config('services.firebase.api_key') }}",
        authDomain: "{{ config('services.firebase.auth_domain') }}",
        databaseURL: "{{ config('services.firebase.database_url') }}",
        storageBucket: "{{ config('services.firebase.storage_bucket') }}",
    };
    firebase.initializeApp(config);

    var database = firebase.database();

    var lastIndex = 0;

    // Get Data
    firebase.database().ref('customers/').on('value', function (snapshot) {
        var value = snapshot.val();
        var htmls = [];
        $.each(value, function (index, value) {
            if (value) {
                htmls.push('<tr>\
        		<td>' + value.name + '</td>\
        		<td>' + value.email + '</td>\
        		<td><button data-toggle="modal" data-target="#update-modal" class="btn btn-info updateData" data-id="' + index + '">Update</button>\
        		<button data-toggle="modal" data-target="#remove-modal" class="btn btn-danger removeData" data-id="' + index + '">Delete</button></td>\
        	</tr>');
            }
            lastIndex = index;
        });
        $('#tbody').html(htmls);
        $("#submitUser").removeClass('desabled');
    });

    // Add Data
    $('#submitCustomer').on('click', function () {
        var values = $("#addCustomer").serializeArray();
        var name = values[0].value;
        var email = values[1].value;
        var userID = lastIndex + 1;

        console.log(values);

        firebase.database().ref('customers/' + userID).set({
            name: name,
            email: email,
        });

        // Reassign lastID value
        lastIndex = userID;
        $("#addCustomer input").val("");
    });

    // Update Data
    var updateID = 0;
    $('body').on('click', '.updateData', function () {
        updateID = $(this).attr('data-id');
        firebase.database().ref('customers/' + updateID).on('value', function (snapshot) {
            var values = snapshot.val();
            var updateData = '<div class="form-group">\
		        <label for="first_name" class="col-md-12 col-form-label">Name</label>\
		        <div class="col-md-12">\
		            <input id="first_name" type="text" class="form-control" name="name" value="' + values.name + '" required autofocus>\
		        </div>\
		    </div>\
		    <div class="form-group">\
		        <label for="last_name" class="col-md-12 col-form-label">Email</label>\
		        <div class="col-md-12">\
		            <input id="last_name" type="text" class="form-control" name="email" value="' + values.email + '" required autofocus>\
		        </div>\
		    </div>';

            $('#updateBody').html(updateData);
        });
    });

    $('.updateCustomer').on('click', function () {
        var values = $(".users-update-record-model").serializeArray();
        var postData = {
            name: values[0].value,
            email: values[1].value,
        };

        var updates = {};
        updates['/customers/' + updateID] = postData;

        firebase.database().ref().update(updates);

        $("#update-modal").modal('hide');
    });

    // Remove Data
    $("body").on('click', '.removeData', function () {
        var id = $(this).attr('data-id');
        $('body').find('.users-remove-record-model').append('<input name="id" type="hidden" value="' + id + '">');
    });

    $('.deleteRecord').on('click', function () {
        var values = $(".users-remove-record-model").serializeArray();
        var id = values[0].value;
        firebase.database().ref('customers/' + id).remove();
        $('body').find('.users-remove-record-model').find("input").remove();
        $("#remove-modal").modal('hide');
    });
    $('.remove-data-from-delete-form').click(function () {
        $('body').find('.users-remove-record-model').find("input").remove();
    });
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</body>
</html>

In this file, I have created a simple CURD form using Bootstrap 4. At the end of the file, you will get the Firebase JavaScript CURD code. It’s easy to understand.

Step 6 : Run and Test

Run the laravel project by typing:

php artisan serve

Now visit the route(http://localhost:8000/customers) to see the form. You can start testing by adding data.

Here’s the Firebase database’s screenshot:

We have successfully created and tested Firebase RealTime CRUD project. You can download this project from Gitub.

Do you like shouts.dev? Please inspire us with star, suggestions and feedback on GitHub.

Laravel

Laravel RealTime CRUD Using Google Firebase

Md Obydullah

Table of Contents

Step 1 : Create a Firebase Project

Step 2 : Create a Laravel Project

Step 3 : Register View Route

Step 4 : Configure Firebase Setting

Step 5 : Add a Blade File

Step 6 : Run and Test

Comments

Similar

Implement Password Expiration & Force Reset in Laravel

Laravel 9 How to Send Mail using SendinBlue SMTP

How to Use Ckeditor and Upload Image Using Ckeditor in Laravel

Laravel Jobs and Queues with Example

Laravel 8.x CRUD (Create Read Update Delete) From Scratch

You May Read

Install the Apache Web Server on Ubuntu 18.04, 12.04

React Hook Forms and Validation with Yup

Razorpay Payment Gateway Integration in Laravel

How to Get Client IP Address in Laravel

jQuery Get/Set Data Attribute Value

Laravel RealTime CRUD Using Google Firebase

Md Obydullah

Table of Contents

Step 1 : Create a Firebase Project

Step 2 : Create a Laravel Project

Step 3 : Register View Route

Step 4 : Configure Firebase Setting

Step 5 : Add a Blade File

Step 6 : Run and Test

Share on Social Media

Comments

Similar

Implement Password Expiration & Force Reset in Laravel

Laravel 9 How to Send Mail using SendinBlue SMTP

How to Use Ckeditor and Upload Image Using Ckeditor in Laravel

Laravel Jobs and Queues with Example

Laravel 8.x CRUD (Create Read Update Delete) From Scratch

You May Read

Install the Apache Web Server on Ubuntu 18.04, 12.04

React Hook Forms and Validation with Yup

Razorpay Payment Gateway Integration in Laravel

How to Get Client IP Address in Laravel

jQuery Get/Set Data Attribute Value