PHP Google Firebase CRUD Example Tutorial

PHP Google Firebase CRUD Example Tutorial

Last Updated on 1 Comment on PHP Google Firebase CRUD Example Tutorial

Google firebase curd in PHP example tutorial. In this tutorial, you will learn how you can create crud application in PHP using firebase database with bootstrap from scratch(step by step).

As well as, you will learn how to connect firebase database with php, insert data into firebase db using php, how to fetch data from firebase db in php and how to delete data from firebase db in php.

This tutorial will explain each thing is a very simple and easy example for creating crud(create, read, update, delete) application in PHP using firebase database with bootstrap.

Google Firebase CRUD In PHP

Just follow the few steps and create CRUD(create, read, update, delete) Application in PHP using firebase database and Boostrap:

  • Step 1 – Create Firebase Project
  • Step 2 – Create PHP Files
  • Step 3 – Run Application

Step 1 – Create Firebase Project

First of all, you need to create google firebase project. So follow the following steps to create google firebase project.

Now, click the following url https://firebase.google.com/ and create a google firebase project, as follows:

create-google-firebase-project-1

Fill your google firebase project name and click the “continue button. After that, the below following screen will look like:

create-google-firebase-project-2

Next, here also click “Continue” button. And then the below given screen looks like:

create-google-firebase-project-3

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

create-google-firebase-project-4

See the above picture and click your web app name.

And The page has been opened. Scroll it down. Then copy google firebase configuration and database details.

create-google-firebase-project-5

Step 2 – Create PHP File

In this step, create a php file which named index.php. And then add the following code into it:

<!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>PHP CRUD Operation Using Google Firebase - Tutsmake.com</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">PHP CRUD Operation Using Google Firebase - Tutsmake.com</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>
<!-- 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: "FIREBASE_API_KEY",
authDomain: "php-crud-4ded8.firebaseapp.com",
databaseURL: "https://php-crud-4ded8-default-rtdb.firebaseio.com",
projectId: "FIREBASE_PROJECT_ID",
storageBucket: "php-crud-4ded8.appspot.com",
messagingSenderId: "417923713999",
appId: "1:417923713999:web:64a8b9713824cfb8e31bdd",
measurementId: "G-328BDXCK4D"
};
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>

Note that, Whatever details you have got while creating a firebase project. Add that detail to the index.php file. As given below:

        // Initialize Firebase
var config = {
apiKey: "FIREBASE_API_KEY",
authDomain: "php-crud-4ded8.firebaseapp.com",
databaseURL: "https://php-crud-4ded8-default-rtdb.firebaseio.com",
projectId: "FIREBASE_PROJECT_ID",
storageBucket: "php-crud-4ded8.appspot.com",
messagingSenderId: "417923713999",
appId: "1:417923713999:web:64a8b9713824cfb8e31bdd",
measurementId: "G-328BDXCK4D"
};

Step 3 –  Run Application

In this step, ope your terminal and execute the following command to quick run this application:

cd project_directory
php -S localhost:8000

Now you can open the following URL on your browser:

http://localhost:8000

Conclusion

In this tutorial, you will learn how you have learned how to create crud application in PHP using firebase database with bootstrap from scratch(step by step).

Recommended PHP Tutorials

Recommended:-PHP 8 Pagination with Bootstrap Example
Recommended:-User Registration with Email Verification in PHP
Recommended:-How to Add Captcha in PHP Registration Form
Recommended:-Select Insert Update Delete Record using PHP and MySQL
Recommended:-Insert Update Delete in PHP on Same Page
Recommended:-How to Fetch Data From Database in PHP using Ajax
Recommended:-Get Country, City, latitude, longitude from IP address using PHP
Recommended:-PHP | Implode and Explode Function
Recommended:-Ajax Image Upload Using PHP and jQuery Without Refreshing Page
Recommended:-Send Reset Password Link Email PHP
Crop and Save Image Using jQuery Croppie and PHP
Recommended:-PHP Display All Errors Example
Recommended:-PHP Google Places Autocomplete Example
Recommended:-PHP Move and Copy File From One Folder to Another
Recommended:-PHP Dropzone File Upload Tutorial Example
Recommended:-PHP Signature Pad using Jquery Ajax Example
Categories: PHP

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

One reply to PHP Google Firebase CRUD Example Tutorial

  1. hey u saved my life man thanks alot

    Reply

Leave a Reply

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