PHP CRUD operation with Bootstrap and JQuery

The way to perform simple CRUD operation using MySQL database without any form has shown in this tutorial. The basic knowledge of HTML, Bootstrap, CSS, PHP and MySQL is required to understand the tutorial. A simple MySQL table has created and used in this tutorial to show the CRUD operation.

Pre-requsite:

A. You have to install XAMPP server.
B. Create a database named crud.
C. Create a table named customer.

Steps:

1. Create a folder named php_crud in the htdocs folder and create the following PHP files.

A. index.html
B. connection.php
C. insert.php
D. select.php
E. update.php
F. delete.php

2. Download the Bootstrap 5 and copy the content of the folder inside the php_crud folder.

3. Add the following content to index.html file to show the links for inserting, reading, updating and deleting data of the customer table.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<title>PHP CRUD</title>
<script src="js/bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>

$(document).ready(function(){
	$("#in").click(function () {
		$.get("insert.php", function(data){
			$("#content").html(data);
		});
	});

	$("#se").click(function () {
		$.get("select.php", function(data){
			$("#content").html(data);
		});
	});

	$("#up").click(function () {
		$.get("update.php?id=3", function(data){
			$("#content").html(data);
		});
	});

	$("#de").click(function () {
		$.get("delete.php?id=4", function(data){
			$("#content").html(data);
		});
	});
});

</script>

<style>

table, th, td {
border: 1px solid black;

}
</style>

</head>

<body>

	<div class="container">
	<div class="row">
	<div class="col-md-12">
	<center><h1 style="color:blue">PHP CRUD operation with Bootstrap and JQuery</h1></center>
	<br/>
	<br/>
	</div>
	</div>
	<div class="row">
	<div class="col-md-4">
	<h3>CRUD operation</h3>
	<a href="#" id="in"><p>Insert</p></a>
	<a href="#" id="se"><p>Select</p></a>
	<a href="#" id="up"><p>Update</p></a>
	<a href="#" id="de"><p>Delete</p></a>
	</div>
	<div class="col-md-8">
	<h3>Create, Read, Update and Delete using PHP</h3>
	<br/>
	<p id="content">CRUD operation related message will be appear here.</p>
	</div>
	</div>
	</div>
</body>
</html>

3. Add the following content in connection.php file for database connection.

<?php
$host='localhost';
$username='root';
$password='';
$dbname = "crud";

$db=new mysqli($host,$username,$password,"$dbname");

if(!$db)
{
	die("Database connection error.");
}

?>

4. Add the following content in insert.php file to insert record into customer table.

<?php
require 'connection.php';
$name = "Mehrab Hossain";
$address = "420, Dhanmondi, Dhaka.";
$email = "mahrab@gmail.com";
$phone = "01816784534";


$query = "INSERT INTO customer (name, address, email, phone) VALUES ('$name','$address','$email','$phone')";

if ($db->query($query))
	echo "<br/>A new customer record inserted successfully.";
else
	echo "<br/>Error in inserting data.";
?>

5. Add the following content in select.php file to read data from the customer table.

<?php
require 'connection.php';
$query = "SELECT * FROM customer";
$result = $db->query($query);


if(!$query)
{
	echo "Error exists in query.";
}
else
{
	$content = "<br/><h4>All customers records:</h4><br/>";
	$content .= "<table><tr><th>ID</th><th>Name</th><th>Address</th><th>Email</th><th>Phone</th></tr>";

	while($row = $result->fetch_array())
	{
		$content .= "<tr><td>".$row['id']."</td><td>". $row['name']."</td><td>".$row['address']."</td><td>".$row['email']."</td><td>".$row['phone']."</td></tr>";
	}
	$content .= "</table>";
	echo $content;
}

?>

6. Add the following content in update.php file to update particular record from customer table.

<?php

require 'connection.php';
$query = "UPDATE customer SET name = 'Mehbooba Ferdouse',address = '56, Mirpur Road, Dhaka.',email='mehbooba@gmail.com' ,phone = '01716745832' WHERE id=".$_GET["id"];

if(!$db->query($query))
	echo "<br/>Error in update query";
else
{
	if($db->affected_rows > 0)
		echo "<br/>Customer data updated successfully.";
	else
		echo "<br/>No record updated.";
}
?>

7. Add the following content in delete.php file to delete particular record from customer table.

<?php
require 'connection.php';
$query = "DELETE FROM customer WHERE id=".$_GET["id"];
if($db->query($query))
{
	if($db->affected_rows > 0)
		echo "<br/>Record deleted successfully.";
	else
		echo "<br/>No record deleted.";
}
else
	echo "<br/>Error in delete query.";
?>

If you are new in database based web programming with PHP then this tutorial will help you to learn the basic crud operation in PHP.

The steps have explained in the following video link.