Laravel 5.6 – RealTime CRUD System Using Google Firebase
In this post we will give you information about Laravel 5.6 – RealTime CRUD System Using Google Firebase. Hear we will give you detail about Laravel 5.6 – RealTime CRUD System Using Google FirebaseAnd how to use it also give you demo for it if it is necessary.
Today, we are share with you how to built real time CRUD system in laravel using google firebase. yes realtime insert, update, delete or listing is easily possible using google firebase database. in this article we are show to you step by step how to create google firebase database and how to integrate in your laravel application and how to built a realtime CRUD.
[ADDCODE]
You can do many realtime programming stuff by google firebase. after you follow all step of this article then you got final output look like following screenshot.
Create New Project In Firebase:
Now, we are start step by step how to built realtime CRUD system using google firebase. so, first you should create one google firebase project. if you don’t know how to create google firebase project then visit our this link How to create google firebase project.
After create your google firebase project you must be get following things from your created project.
1.) api_key
2.) auth_domain
3.) database_url
4.) secret
5.) Legacy server key (Only use for notification)
This all things you got from your google firebase project easily
Configure Google Firebase Setting:
Now, we are configure google firebase setting in our laravel application. so, open config/services.php file and set following configuration in this file.
'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/',
'secret' => 'secret',
'storage_bucket' => '', // Only used for JS integration
],
Create Route:
Now, create following route in your routes/web.php file. add following route in it.
Route::get('users', '[email protected]');
Here, we are create one get route for user display view.
Add users Method in HomeController:
Now, we are add one users function app/Http/Controllers/HomeController.php file.
namespace AppHttpControllers;
use IlluminateHttpRequest;
class HomeController extends Controller
{
public function users()
{
return view('realtimecrud');
}
}
Create View File:
Now, we are create realtimecrud.blade.php in resources/views folder and add following bootstap code in this file for your design view.
@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" style="display: none;">
<div style="width:55%;">
<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" style="display: none;">
<div style="width:55%;">
<div style="overflow: hidden;">
<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 add this simple html code in your blade file but still it is not done. now we are add some google firebase javascript code for built realtime CRUD. so, now add following js code in this file into the bottom
<script src="https://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 add this javascript code in your blade file then your realtime crud system done successfully.
Now we are ready to run our example so run bellow command ro quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/users
Please also check our demo for realtime CRUD system.
We are hope you like this tutorials, if any question regarding any query please post your question in our forums click on bellow link Laravelcode’s Forums
Hope this code and post will helped you for implement Laravel 5.6 – RealTime CRUD System Using Google Firebase. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs