CRUD Operation Using Ajax With Php

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 Code

Step 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');
?>

CRUD Operation Using Ajax With Php

Ajax

8 Steps To Create CRUD Operation In Ajax :

Step 1 : Create Database

Step 2 : Create Table

Step 3 : Create a db.php file, write the following code:

Step 4 : Create a fetch.php file, write the following code:

Step 5 : Create a crud_ed.php file, write the following code:

Step 6 : Create a insert.php file, write the following code:

Step 7 : Create a edit.php file, write the following code:

Step 8 : Create a delete.php file, write the following code:

Recent Posts

How To Make Responsive Menu Using HTML & CSS?

How To Make Beautiful Loader Using Javascript?

How To Connect Mysql Database Easiest Way in PHP?

How to Send Bulk Email in PHP using PHPMailer with Ajax?

How To Connect Mysql Database Easiest Way in PHP?

How To Make Beautiful Loader Using Javascript?

CRUD Operation Using Ajax With Php

Ajax

8 Steps To Create CRUD Operation In Ajax :

Step 1 : Create Database

Step 2 : Create Table

Step 3 : Create a db.php file, write the following code:

Step 4 : Create a fetch.php file, write the following code:

Step 5 : Create a crud_ed.php file, write the following code:

Step 6 : Create a insert.php file, write the following code:

Step 7 : Create a edit.php file, write the following code:

Step 8 : Create a delete.php file, write the following code:

Recent Posts

Related Posts