RealTime CRUD operation Using Google Firebase in Laravel 5.6

Today our topic is how to perform in realtime CRUD operation using google firebase in Laravel 5.6

Today we learn on CoderMen how to perform CRUD operation using google firebase in Laravel 5.6. real-time create, read, updates and delete or destroy this all thing possible with using google firebase database. in this post, we show you step by step this application.

The best thing about google firebase we can perform much stuff by google firebase. after following this all step of this post, then you will get final output look like the following screenshot.

Step:1 Create a new google firebase project

Before we start this project first we need to create a new google firebase project. to create a new project click on this link. google firebase 

After clicking on Add Project you will see

Give a good name of your project and accept Terms and condition click on create a project button.

After that, you will see this dashboard

After selecting your project environment then you can see one popup and in this popup, you can get your apiKey, authDomain, database URL.

Now, we created google firebase project successfully for RealTime CRUD operation Using Google Firebase in Laravel 5.6 in your google firebase console. so we can manage all this setting regarding our firebase project. like create a new database, manage notification.

Now we have following details

1.) api_key

2.) auth_domain

3.) database_url

4.) secret

5.) Legacy server key (use for notification)

Step:2 Create a new Laravel project

Create a new Laravel Project using this command

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

After create successfully project open config\Service.php and add this flowing code details.

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

Create Route   Routes\web.php

Route::get('users', '[email protected]');

This route will use to show user details when we perform CRUD operation.

And now Crate a new HomeController using this flowing command.

php artisan make:controller HomeController

After that go the new HomeController and create a new functions users

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function users()
    {
        return view('userdetails');
    }
}

In this function, we return on a view userdetails.blade.php so we need to create a view. userdetails.blade.php and add this flowing code.

@extends('layouts.app')

@section('style')
<style type=text/css>
.desabled {
	pointer-events: none;
}
</style>
@endsection

@section('content')
<div >
  <div >
  	<div >
  		<div >
        <div >
          <div >
            <div >
              <strong>Add User</strong>
            </div>
          </div>
        </div>

        <div >
          <form id="addUser" method="POST" action="">
          	<div >
              <label for="first_name" >First Name</label>

              <div >
                <input id="first_name" type=text name=first_name value="" required autofocus>
              </div>
            </div>
            <div >
              <label for="last_name" >Last Name</label>

              <div >
                <input id="last_name" type=text name=last_name value="" required autofocus>
              </div>
            </div>
            <div >
              <div >
                <button type=button id="submitUser">
                  Submit
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
  	</div>
    <div >
      <div >
        <div >
          <div >
            <div >
              <strong>All Users Listing</strong>
            </div>
          </div>
        </div>

        <div >
          <table >
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th width=180 >Action</th>
            </tr>
            <tbody id="tbody">
            	
            </tbody>	
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Delete Model -->
<form action="" method="POST" >
  <div id="remove-modal" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" >
    <div >
      <div >
        <div >
          <h4 id="custom-width-modalLabel">Delete Record</h4>
          <button type=button data-dismiss="modal" aria-hidden="true">×</button>
        </div>
        <div >
          <h4>You Want You Sure Delete This Record?</h4>
        </div>
        <div >
          <button type=button data-dismiss="modal">Close</button>
          <button type=button >Delete</button>
        </div>
      </div>
    </div>
  </div>
</form>

<!-- Update Model -->
<form action="" method="POST" >
  <div id="update-modal" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" >
    <div >
      <div >
        <div >
          <h4 id="custom-width-modalLabel">Update Record</h4>
          <button type=button data-dismiss="modal" aria-hidden="true">×</button>
        </div>
        <div id="updateBody">
          
        </div>
        <div >
          <button type=button data-dismiss="modal">Close</button>
          <button type=button >Update</button>
        </div>
      </div>
    </div>
  </div>
</form>
@endsection

 

After adding this structure in HTML code we need to add some JavaScript code to perform realTime CRUD operation for our Application.

<script src=//www.gstatic.com/firebasejs/4.9.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('users/').on('value', function(snapshot) {
  var value = snapshot.val();
  var htmls = [];
  $.each(value, function(index, value){
  	if(value) {
  		htmls.push('<tr>\
    		<td>'+ value.first_name +'</td>\
    		<td>'+ value.last_name +'</td>\
    		<td><a data-toggle="modal" data-target="#update-modal" data-id="'+index+'">Update</a>\
    		<a data-toggle="modal" data-target="#remove-modal" data-id="'+index+'">Delete</a></td>\
    	</tr>');
  	}  	
  	lastIndex = index;
  });
  $('#tbody').html(htmls);
  $("#submitUser").removeClass('desabled');
});


// Add Data
$('#submitUser').on('click', function(){
	var values = $("#addUser").serializeArray();
	var first_name = values[0].value;
	var last_name = values[1].value;
	var userID = lastIndex+1;

  firebase.database().ref('users/' + userID).set({
    first_name: first_name,
    last_name: last_name,
  });

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

// Update Data
var updateID = 0;
$('body').on('click', '.updateData', function() {
	updateID = $(this).attr('data-id');
	firebase.database().ref('users/' + updateID).on('value', function(snapshot) {
		var values = snapshot.val();
		var updateData = '<div >\
		    <label for="first_name" >First Name</label>\
		    <div >\
		      <input id="first_name" type=text name=first_name value="'+values.first_name+'" required autofocus>\
		    </div>\
		  </div>\
		  <div >\
		    <label for="last_name" >Last Name</label>\
		    <div >\
		      <input id="last_name" type=text name=last_name value="'+values.last_name+'" required autofocus>\
		    </div>\
		  </div>';

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

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

	var updates = {};
	updates['/users/' + 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 +'">');
});

$('.deleteMatchRecord').on('click', function(){
	var values = $(".users-remove-record-model").serializeArray();
	var id = values[0].value;
	firebase.database().ref('users/' + 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>

After adding this code of in our blade page then your realtime crud system done successfully completed.

Now we are ready to use our example so run below command.

php artisan serve

After that go to this URL.

//localhost:8000/users

So finally we completed RealTime CRUD operation Using Google Firebase in Laravel 5.6