Laravel 7 CRUD Operation Example Using Google Firebase – onlinecode

Laravel 7 CRUD Operation Example Using Google Firebase – onlinecode

In this post we will give you information about Laravel 7 CRUD Operation Example Using Google Firebase – onlinecode. Hear we will give you detail about Laravel 7 CRUD Operation Example Using Google Firebase – onlinecodeAnd how to use it also give you demo for it if it is necessary.

Today, In this article we explain to you how to create crud operation example using laravel with google firebase(Laravel 7 CRUD with Google Firebase). we will perform crud operation with a firebase realtime database such as real-time fetch data, create, read, updates and delete or destroy.

If you want to connect or integrate with the firebase database then you have to create a firebase project. so we shared configuration settings of firebase database steps for that. you can follow the below steps for laravel crud operation using firebase.

Overview

Step 1: Create a Firebase Project

Step 2: Install Laravel

Step 3: Configure Firebase Settings

Step 4: Create Route

Step 5: Create a Controller

Step 6: Create Blade Files

Step 7: Run Our Laravel Application

Step 1: Create a Firebase ProjectFirst, we have to create a firebase project. so go to https://firebase.google.com/ and create the project.

Step 1: In this step, Enter your project name and click the “Continue” button. so you can see below the screenshot.

Step 2: Here, you can also click the “Continue” button. so you can see below the screenshot.

Step 3: In this step, you click on the “create product” button and after then google firebase project will successfully be created. so you can see below the screenshot.

Now click on your web app setting icon (if you not created web app then you can create it) and after you can get apiKey, authDomain, database URL on select CDN radio button.

Step 2: Install LaravelWe are going to install laravel 7, so first open the command prompt or terminal and go to go to xampp htdocs folder directory using the command prompt. after then run the below command.

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

Step 3: Configure Firebase SettingsAfter the complete installation of laravel. we have to google firebase configuration. now we will open the config/services.php file and paste the below code.config/services.php

'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 4: Create Route

Add the following route code in the “routes/web.php” file.

PHP
<?php

use IlluminateSupportFacadesRoute;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('users', 'HomeController@users');
?>

Step 5: Create a Controller

Here below command help to create the controller and model.

PHP
php artisan make:controller HomeController

HomeController.php

PHP
<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

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

Step 6: Create Blade Files

Finally, We will create the userdetails.blade.php file in the “resources/views/” folder directory and paste below code.

userdetails.blade.php

PHP
<!doctype html>
<html lang="en">
<head>
 <title>Laravel 7 CRUD Operation Example Using Google Firebase - XeprtPhp</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="#">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0https://onlinecode.org/js/bootstrap.min.js"></script>
</head>
<body>
	<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>
	<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
	<script>
	// Your web app's Firebase configuration
	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') }}"
	};
	// Initialize Firebase
	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>
</body>
</html>

Step 7: Run Our Laravel ApplicationWe can start the server and run this example using the below command.

php artisan serve

Now we will run our example using the below Url in the browser.

http://127.0.0.1:8000/users

Please follow and like us:

Hope this code and post will helped you for implement Laravel 7 CRUD Operation Example Using Google Firebase – onlinecode. 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

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

34  +    =  39

We accept paid advance and paid guest Posting on our Site : Contact US