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
Brijpal Sharma
Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...
1 Comments
Akash garg
Publish on:-December 27th, 2018
It's Working
You must be logged in to post a comment.