CRUD (Create Read Update Delete) using Ajax, in this blog we will learn how to do crud operation using Ajax. Ajax is very useful when you don’t want to reload your page when you insert data, select data, or anything else.
Ajax
Reduce server traffic and increase speed. The first and foremost advantage of Ajax is its ability to improve the performance and usability of web applications.
8 Steps To Create CRUD Operation In Ajax :
View Demo Download CodeStep 1 : Create Database
CREATE DATABASE ajax_crud;
Step 2 : Create Table
CREATE TABLE crud (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL);
Step 3 : Create a db.php file, write the following code:
<?php
$server = "localhost";
$user = "root";
$pass = "";
$database = "ajax_crud";
$con = mysqli_connect("$server","$user","$pass","$database");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
exit();
}
?>
Step 4 : Create a fetch.php file, write the following code:
<?php
require('db.php');
function get_safe_value($con,$str){
if($str!=''){
$str=trim($str);
return mysqli_real_escape_string($con,$str);
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax Crud</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
</head>
<body>
<!-- display error message -->
<div class="container mt-3">
<?php
if(isset($_SESSION['error'])){
echo
"
<div class='alert alert-danger alert-dismissible'>
<button type='button' class='btn-close' data-bs-dismiss='alert'></button>
".$_SESSION['error']."
</div>
";
unset($_SESSION['error']);
}
if(isset($_SESSION['success'])){
echo
"
<div class='alert alert-success alert-dismissible'>
<button type='button' class='btn-close' data-bs-dismiss='alert'></button>
".$_SESSION['success']."
</div>
";
unset($_SESSION['success']);
}
?>
</div>
<!-- display table data -->
<div class="card mt-3 container p-3">
<table id="myTable" class="table align-middle mb-0 bg-white mt-5 table-bordered">
<thead class="table-dark">
<th style="text-align: center;color:white;" >No</th>
<th style="text-align: center;color:white;" >Name</th>
<th style="text-align: center;color:white;" >Action</th>
</thead>
<tbody>
<?php
$i = 1;
$sql = "SELECT * FROM crud";
$query = $con->query($sql);
while($row = $query->fetch_assoc()){
echo
"<tr>
<td style='text-align: center;'>".$i++."</td>
<td style='text-align: center;'>get_safe_value($con,$row['name'])</td>
<td style='text-align: center;'>
<a href='#edit_".get_safe_value($con,$row['id'])."' class='btn btn-success btn-sm' data-bs-toggle='modal'><span class='glyphicon glyphicon-edit'></span> Edit</a>
<a href='#delete_".get_safe_value($con,$row['id'])."' class='btn btn-danger btn-sm' data-bs-toggle='modal'><span class='glyphicon glyphicon-trash'></span> Delete</a>
</td>
</tr>";
include('crud_ed.php');
}
?>
</tbody>
</table>
</div>
<!-- Data Insert Modalbox -->
<div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add Data</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<form method="POST" action="insert.php">
<div class="row form-group">
<div class="col-sm-12">
<label class="control-label modal-label">Name :</label>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="name" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" name="add" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Add</a>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js" defer></script>
<!-- generate datatable on our table -->
<script>
$(document).ready(function(){
//inialize datatable
$('#myTable').dataTable({
"searching": false });
//hide alert
$(document).on('click', '.close', function(){
$('.alert').hide();
})
});
</script>
Step 5 : Create a crud_ed.php file, write the following code:
<!-- Edit Modal -->
<div class="modal fade" id="edit_<?php echo $row['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Update Data</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<form method="POST" action="edit.php">
<input type="hidden" class="form-control" name="id" value="<?php echo $row['id']; ?>">
<div class="row form-group">
<div class="col-sm-12">
<label class="control-label modal-label">Enter Name :</label>
</div>
<div class="col-sm-12">
<input type="name" class="form-control" name="name" value="<?php echo $row['name']; ?>" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" name="edit" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Update</a>
</form>
</div>
</div>
</div>
</div>
<!-- Delete Modal -->
<div class="modal fade" id="delete_<?php echo $row['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Delete Data</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h2 class="text-center">Are you sure you want to Delete this data?</h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-bs-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<a href="delete.php?id=<?php echo $row['id']; ?>" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Yes</a>
</div>
</div>
</div>
</div>
Step 6 : Create a insert.php file, write the following code:
<?php
include_once('db.php');
function get_safe_value($con,$str){
if($str!=''){
$str=trim($str);
return mysqli_real_escape_string($con,$str);
}
}
if(isset($_POST['add'])){
$name = $_POST["name"];
$sql = "INSERT INTO crud (`name`) VALUES ('$name')";
//use for MySQLi OOP
if($con->query($sql)){
$_SESSION['success'] = 'Data added successfully';
}
else{
$_SESSION['error'] = 'Something went wrong while adding';
}
}
else{
$_SESSION['error'] = 'Fill up add form first';
}
header('location: fetch.php');
?>
Step 7 : Create a edit.php file, write the following code:
<?php
include_once('db.php');
function get_safe_value($con,$str){
if($str!=''){
$str=trim($str);
return mysqli_real_escape_string($con,$str);
}
}
if(isset($_POST['edit'])){
$id = get_safe_value($con,$_POST['id']);
$name = get_safe_value($con,$_POST["name"]);
$sql = "UPDATE crud SET `name` = '$name' WHERE id = '$id'";
//use for MySQLi OOP
if($con->query($sql)){
$_SESSION['success'] = 'Data updated successfully';
}
else{
$_SESSION['error'] = 'Something went wrong in updating data';
}
}
else{
$_SESSION['error'] = 'Select data to edit first';
}
header('location: fetch.php');
?>
Step 8 : Create a delete.php file, write the following code:
<?php
include_once('db.php');
function get_safe_value($con,$str){
if($str!=''){
$str=trim($str);
return mysqli_real_escape_string($con,$str);
}
}
if(isset($_GET['id'])){
$id = get_safe_value($con,$_POST['id']);
$sql = "DELETE FROM crud WHERE id = '$id'";
//use for MySQLi OOP
if($con->query($sql)){
$_SESSION['success'] = 'Data deleted successfully';
}
else{
$_SESSION['error'] = 'Something went wrong in deleting data';
}
}
else{
$_SESSION['error'] = 'Select data to delete first';
}
header('location: fetch.php');
?>