CRUD Using AJAX in 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 is the way you can interact with the database without reloading the page, to use Ajax we use JS or JQuery to send or receive data. Let’s see the following steps:
Step1: Create Database name blog_samples:
CREATE DATABASE blog_samples; Stpe2: Create a posts table in the database:
CREATE TABLE posts (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(100) NOT NULL,
description LONGTEXT NOT NULL,
post_at DATE NOT NULL );
Step3: Create a connection.php file, write the following code:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="blog_samples";
// Create connection
$conn = mysqli_connect($servername, $username, $password,$db);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
Step4: Create a file add.php file and write the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Data Using AJAX</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container py-5">
<h2>Add Blog</h2>
<p class="text-right"><a href="index.php" class="btn btn-primary">View All Blogs</a></p>
<form>
<div class="form-group">
<label for="email">Title:</label>
<input type="text" class="form-control" id="title">
</div>
<div class="form-group">
<label for="pwd">Description:</label>
<textarea class="form-control" id="description"></textarea>
</div>
<button type="button" id="save" class="btn btn-primary">Submit</button>
</form>
</div>
<script>
$('#save').click(function () {
$title = $('#title').val();
$desc = $("#description").val();
$.ajax({url:"insert.php",
method:"POST",
data:{titlecol:$title,desccol:$desc},
success:function(dataabc){
window.location.href="index.php";
}});
});
</script>
</body>
</html>
Step5: Create a file insert.php and write the following code:
<?php
include("connection.php");
$title= $_POST['titlecol'];
$desc=$_POST['desccol'];
$adddate=date('Y-m-d');
$sql ="insert into posts(post_title,description,post_at) values ('".$title."','".$desc."','".$adddate."')";
mysqli_query($conn,$sql);
?>
Step6: Create a file index.php and write the following code:
<?php
include("connection.php");
if(isset($_GET['del_id']))
{
$id=$_GET['del_id'];
$sql="delete from posts where id='".$id."'";
$result=mysqli_query($conn,$sql);
header('location:index.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select Data Using AJAX</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-lg-12">
<h1 class="text-center">Select Data Using AJAX</h1>
<p class="text-right"><a href="add.php" class="btn btn-primary">Add Blog</a></p>
<table class="table table-bordered table-striped" id="content">
</table>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$.ajax({url:"select.php",
success:function(dataabc){
//console.log(dataabc);
$("#content").html(dataabc);
}});
});
</script>
</body>
</html>
Step7: Create a file select.php file and write the following code:
<?php
include("connection.php");
$sql="select * from posts";
$result = mysqli_query($conn,$sql);
echo ' <tr>
<th>Sr.No</th>
<th>Date</th>
<th>Title</th>
<th>Description</th>
<th>Edit</th>
<th>Delete</th>
</tr>';
$i=1;
while($data=mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$i.'</td>
<td>'.$data['post_at'].'</td>
<td>'.$data['post_title'].'</td>
<td>'.$data['description'].'</td>
<td><a href="edit.php?edit_id='.$data['id'].'">edit</a></td>
<td><a href="index.php?del_id='.$data['id'].'" >delete</a></td>
</tr>';
$i++;
}
?>
Step8: Create an edit.php file and write the following code:
<?php
include_once('connection.php');
$id = $_GET['edit_id'];
$sql = "select * from posts where id='".$id."'";
$result = mysqli_query($conn,$sql);
$data=mysqli_fetch_array($result);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Update Using AJAX</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Edit Data</h2>
<p class="text-right"><a href="index.php" class="btn btn-primary">View All Blogs</a></p>
<form>
<div class="form-group">
<input type="hidden" id="postid" value="<?php echo $_GET['edit_id'];?>">
<label for="email">Title:</label>
<input type="text" class="form-control" id="title" value="<?php echo $data['post_title'];?>" >
</div>
<div class="form-group">
<label for="pwd">Description:</label>
<textarea class="form-control" id="description"><?php echo $data['description'];?></textarea>
</div>
<button type="button" id="save" class="btn btn-primary">Submit</button>
</form>
</div>
<script>
$('#save').click(function () {
$id=$("#postid").val();
//alert($id);
$title = $('#title').val();
$desc = $("#description").val();
$.ajax({url:"update.php",
method:"POST",
data:{postid:$id,titlecol:$title,desccol:$desc},
success:function(dataabc){
window.location.href="index.php";
}});
});
</script>
</body>
</html>
Step9: Create a file update.php and write the following code:
<?php
include("connection.php");
$id = $_POST['postid'];
$title= $_POST['titlecol'];
$desc=$_POST['desccol'];
//echo $id;
$sql ="UPDATE posts SET post_title='".$title."',description='".$desc."' where id='".$id."'";
mysqli_query($conn,$sql);
?>
- In this blog we have used Ajax for insert, update and select functionality only.
- To delete, select data by id for edit we have not used ajax, you can customize this example as per your need.
Categories: web development php ajax
