Laravel 7 Firebase CRUD Example Tutorial

In this tutorial you will learn about the Laravel 7 Firebase CRUD Example Tutorial and its application with practical example.

In this Laravel 7 Firebase CRUD Example Tutorial I’ll show you how to create realtime crud operation example using google firebase in laravel project. In this tutorial you will learn to create real time crud application using firebase in laravel. In this article I will share example of using firebase to create crud application in laravel. Firebase make is easy to perform real time operation for crud application. In this step by step guide we will be creating a simple real time CRUD example using firebase database in laravel.

Table Of Contents−

Laravel 7 Firebase CRUD Example Tutorial

Step 1: Create Firebase Project
Step 2: Intsall Laravel Application
Step 3: Add Route

Step 4: Add Firebase Settings in Service.php
Step 5: Create Controller Using Artisan
Step 6: Create View Files

Step 7: Run Development Server

Step 1: Create Firebase Project

First of all, you need to create google firebase project. Follow the instructions given below to create google firebase project.

Go to https://firebase.google.com/ and create a google firebase project, as follows:

Fill your google firebase project name and click the “continue button.
Click “Continue” button
Click “Create Project” Button. And your google firebase project will successfully be created.

Then, You will see blogs on top menu, click it. And create web app with a blogs name or you want to keep name accordingly. Then copy google firebase configuration and database details.

Step 2: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

1	composer create-project --prefer-dist laravel/laravel blog

Step 3: Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('user','UserController@index');

1	Route::get('user','UserController@index');

Step 4: Add Firebase Settings in Service.php

Now, go to the config folder and open services.php file. Then put the following google firebase configuration details into services.php file:

'firebase' => [
    'api_key' => 'api_key',
    'auth_domain' => 'auth_domain',
    'database_url' => 'database_url',
    'project_id' => 'project_id',
    'storage_bucket' => 'storage_bucket',
    'messaging_sender_id' => 'messaging_sender_id',
    'app_id' => 'app_id',
    'measurement_id' => 'measurement_id',
],

'firebase' => [

'api_key' => 'api_key',

'auth_domain' => 'auth_domain',

'database_url' => 'database_url',

'project_id' => 'project_id',

'storage_bucket' => 'storage_bucket',

'messaging_sender_id' => 'messaging_sender_id',

'app_id' => 'app_id',

'measurement_id' => 'measurement_id',

Step 5: Create Controller By Artisan

Now, lets create a controller named UserController using command given below –

php artisan make:controller UserController

1	php artisan make:controller UserController

Then app/http/controller folder and open UserController.php file. And put the following code into your UserController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class UserController extends Controller
{
    public function index()
    {
        return view('users');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller

{

public function index()

{

return view('users');

}

Step 6: Create Blade View File

In this step, go to resources/view folder and create a blade file named users.blade.php. Then put the following code into your users.blade.php file:

<!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">
<title>Laravel RealTime Google Firebase CRUD Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<h4 class="text-center">Laravel 7 RealTime Google Firebase CRUD Example</h4><br>
<h5># Add User</h5>
<div class="card card-default">
<div class="card-body">
<form id="addUser" 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="submitUser" type="button" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
</div>
<br>
<h5># Users</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 updateUser">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--}}
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-database.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') }}",
projectId: "{{ config('services.firebase.project_id') }}",
storageBucket: "{{ config('services.firebase.storage_bucket') }}",
messagingSenderId: "{{ config('services.firebase.messaging_sender_id') }}",
appId: "{{ config('services.firebase.app_id') }}",
measurementId: "{{ config('services.firebase.measurement_id') }}"
};
firebase.initializeApp(config);
firebase.analytics();
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.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
$('#submitUser').on('click', function () {
var values = $("#addUser").serializeArray();
var name = values[0].value;
var email = values[1].value;
var userID = lastIndex + 1;
console.log(values);
firebase.database().ref('Users/' + userID).set({
name: name,
email: email,
});
// 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 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);
});
});
$('.updateUser').on('click', function () {
var values = $(".users-update-record-model").serializeArray();
var postData = {
name: values[0].value,
email: 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 + '">');
});
$('.deleteRecord').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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

<!doctype html>

<head>

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

</head>

<body>

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

<input id="name" type="text" class="form-control" name="name" placeholder="Name"

required autofocus>

</div>

<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="submitUser" type="button" class="btn btn-primary mb-2">Submit</button>

</form>

</div>

<br>

<h5># Users</h5>

<tr>

<th>Email</th>

<th width="180" class="text-center">Action</th>

</tr>

</tbody>

</table>

</div>

<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">

<h4 class="modal-title" id="custom-width-modalLabel">Update</h4>

<button type="button" class="close" data-dismiss="modal"

aria-hidden="true">×

</button>

</div>

</div>

<button type="button" class="btn btn-light"

data-dismiss="modal">Close

</button>

<button type="button" class="btn btn-success updateUser">Update

</button>

</div>

</form>

<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;">

<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>

<p>Do you want to delete this record?</p>

</div>

<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>

</form>

<!-- TODO: Add SDKs for Firebase products that you want to use

https://firebase.google.com/docs/web/setup#available-libraries -->

// Initialize Firebase

var config = {

apiKey: "{{ config('services.firebase.api_key') }}",

authDomain: "{{ config('services.firebase.auth_domain') }}",

databaseURL: "{{ config('services.firebase.database_url') }}",

projectId: "{{ config('services.firebase.project_id') }}",

storageBucket: "{{ config('services.firebase.storage_bucket') }}",

messagingSenderId: "{{ config('services.firebase.messaging_sender_id') }}",

appId: "{{ config('services.firebase.app_id') }}",

measurementId: "{{ config('services.firebase.measurement_id') }}"

};

firebase.initializeApp(config);

firebase.analytics();

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.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

$('#submitUser').on('click', function () {

var values = $("#addUser").serializeArray();

var name = values[0].value;

var email = values[1].value;

var userID = lastIndex + 1;

console.log(values);

firebase.database().ref('Users/' + userID).set({

name: name,

email: email,

});

// 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 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 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);

});

$('.updateUser').on('click', function () {

var values = $(".users-update-record-model").serializeArray();

var postData = {

name: values[0].value,

email: 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 + '">');

});

$('.deleteRecord').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>

</body>

</html>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/users

1	http://localhost:8000/users

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 7 Firebase CRUD Example Tutorial