हेल्लो दोस्तों आज के पोस्ट में हम आपको php crud के बारे में बतायेंगे की कैसे किया जाता है साथ ही इसका प्रोग्राम के साथ आप इसका आउटपुट को भी देख सकते है
PHP Ajax Crud
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- bootstrap5 css link -->
<link rel="stylesheet" href="custom/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-center text-danger">PHP AJAX CRUD</h1>
<div class="float-end">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Register
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- modal body -->
<div class="modal-body">
<div class="form-group">
<label for="">FirstName:</label>
<input type="text" name="" id="firstname" placeholder="First Name" class="form-control" required>
</div>
<div class="form-group mt-4">
<label for="">LastName:</label>
<input type="text" name="" id="lastname" class="form-control" placeholder="Last Name" required>
</div>
<div class="form-group mt-4">
<label for="">Email Id:</label>
<input type="email" name="" id="email" class="form-control" placeholder="Email Id" required>
</div>
<div class="form-group mt-4">
<label for="">Mobile:</label>
<input type="number" name="" id="mobile" class="form-control" placeholder="Mobile Number" required>
</div>
</div>
<!-- end modal body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="addRecord()">Save</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<h2 class="text-primary md-5 mt-5">All Records</h2>
<div id="records_contant">
</div>
</div>
<!-- content close -->
<!-- jquery cdn link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- bootstrap 5 js link -->
<script type="text/javascript" src="custom/js/bootstrap.min.js"></script>
<!-- customjs link -->
<script type="text/javascript" src="custom/js/customjs/register.js"></script>
</body>
</html>
$(document).ready(function(){
readRecords();
});
function readRecords(){
var readrecord = "readrecord";
$.ajax({
url : "backend1.php",
type : "POST",
data : { readrecord : readrecord},
success : function(resp,status){
$('#records_contant').html(resp);
}
});
}
function addRecord(){
var firstnames = $('#firstname').val();
var lastname = $('#lastname').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
$.ajax({
url : "backend1.php",
type : "POST",
data : {firstname : firstnames,
lastname : lastname,
email : email,
mobile : mobile,
},
success : function(resp,status){
readRecords();
}
});
}
function DeleteUser(deleteid){
var conf = confirm('ARE YOU SURE');
if(conf == true){
$.ajax({
url : "backend1.php",
type : "POST",
data : { deleteid : deleteid},
success : function(resp,status){
readRecords();
}
});
}
}
function GetUserDetails(id){
$('#hidden_user_id').val(id);
// we use three parameter
$.post("backend1.php",{
id:id
},function(data,status){
// json format to convert javascript object
var user = JSON.parse(data);
// here user.firstname , firstname is database
$('#update_firstname').val(user.firstname);
$('#update_lastname').val(user.lastname);
$('#update_email').val(user.email);
$('#update_mobile').val(user.mobile);
}
);
$('#update_user_modal').modal('show');
}
function updateUserDetails() {
var firstnameutd = $('#update_firstname').val();
var lastnameutd = $('#update_lastname').val();
var emailutd = $('#update_email').val();
var mobileutd = $('#update_mobile').val();
var hidden_user_idutd = $('#hidden_user_id').val();
$.post("backend1.php",{
hidden_user_idutd : hidden_user_idutd,
firstnameutd : firstnameutd,
lastnameutd : lastnameutd,
emailutd : emailutd,
mobileutd : mobileutd,
},
function(data,status){
$('#update_user_modal').modal("hide");
readRecords();
}
);
}
<?php
$conn = mysqli_connect("localhost","root","","php_ajax_crud");
extract($_POST);
if(isset($_POST['readrecord'])){
$data = '<table class="table table-bordered table-striped">
<tr>
<th>No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Mobile</th>
<th>Edit Action</th>
<th>Delete Action</th>
</tr>';
$displayquery = "SELECT * FROM crudphp";
$result = mysqli_query($conn,$displayquery);
if(mysqli_num_rows($result) > 0){
$number = 1;
while($row = mysqli_fetch_array($result)){
$data .= '<tr>
<td>'.$number.'</td>
<td>'.$row['firstname'].'</td>
<td>'.$row['lastname'].'</td>
<td>'.$row['email'].'</td>
<td>'.$row['mobile'].'</td>
<td>
<button onclick="GetUserDetails('.$row['id'].')" class="btn btn-primary">Edit</button>
</td>
<td>
<button onclick="DeleteUser('.$row['id'].')" class="btn btn-danger">Delete</button>
</td>
</tr>';
$number++;
}
}
$data .= '</table>';
echo $data;
}
// var firstname = $_POST['firstname'];
if(isset($_POST['firstname']) && isset($_POST['lastname']) && isset($_POST['email']) && isset($_POST['mobile']))
{
$query = "INSERT INTO `crudphp`(firstname,lastname,email,mobile) values('$firstname','$lastname','$email','$mobile');";
mysqli_query($conn,$query);
}
if(isset($_POST['deleteid'])){
$userid = $_POST['deleteid'];
$deletequery = "DELETE from crudphp where id = $userid";
mysqli_query($conn,$deletequery);
}
// get userid for update
if(isset($_POST['id']) && isset($_POST['id']) != "")
{
$user_id = $_POST['id'];
$query = "SELECT * FROM crudphp where id = '$user_id';";
if(!$result = mysqli_query($conn,$query)){
exit(mysqli_error());
}
$response = array();
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_assoc($result)){
$response = $row;
}
}
else{
$response['status'] = 200;
$response['message'] = "Data not found";
}
echo json_encode($response);
}
else{
$response['status'] = 200;
$response['message'] = " invalid request";
}
//update table
if(isset($_POST['hidden_user_idutd'])){
$hidden_user_idutd = $_POST['hidden_user_idutd'];
$firstnameutd = $_POST['firstnameutd'];
$lastnameutd = $_POST['lastnameutd'];
$emailutd = $_POST['emailutd'];
$mobileutd = $_POST['mobileutd'];
$query = "UPDATE crudphp set `firstname` = '$firstnameutd',`lastname` = '$lastnameutd',`email` = '$emailutd',`mobile` = '$mobileutd' where id = '$hidden_user_idutd'";
mysqli_query($conn,$query);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- bootstrap5 css link -->
<link rel="stylesheet" href="custom/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-center text-danger">PHP AJAX CRUD</h1>
<div class="float-end">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Register
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- modal body -->
<div class="modal-body">
<div class="form-group">
<label for="">FirstName:</label>
<input type="text" name="" id="firstname" placeholder="First Name" class="form-control" required>
</div>
<div class="form-group mt-4">
<label for="">LastName:</label>
<input type="text" name="" id="lastname" class="form-control" placeholder="Last Name" required>
</div>
<div class="form-group mt-4">
<label for="">Email Id:</label>
<input type="email" name="" id="email" class="form-control" placeholder="Email Id" required>
</div>
<div class="form-group mt-4">
<label for="">Mobile:</label>
<input type="number" name="" id="mobile" class="form-control" placeholder="Mobile Number" required>
</div>
</div>
<!-- end modal body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="addRecord()">Save</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- ########## update model ############# -->
<div class="modal fade" id="update_user_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- modal body -->
<div class="modal-body">
<div class="form-group">
<label for="update_firstname">FirstName:</label>
<input type="text" name="" id="update_firstname" placeholder="First Name" class="form-control">
</div>
<div class="form-group mt-4">
<label for="update_lastname">LastName:</label>
<input type="text" name="" id="update_lastname" class="form-control" placeholder="Last Name">
</div>
<div class="form-group mt-4">
<label for="update_email">Email Id:</label>
<input type="email" name="" id="update_email" class="form-control" placeholder="Email Id">
</div>
<div class="form-group mt-4">
<label for="update_mobile">Mobile:</label>
<input type="number" name="" id="update_mobile" class="form-control" placeholder="Mobile Number">
</div>
</div>
<!-- end modal body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="updateUserDetails()">Update</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<input type="hidden" name="" id="hidden_user_id">
</div>
</div>
</div>
</div>
</div>
<h2 class="text-primary md-5 mt-5">All Records</h2>
<div id="records_contant">
</div>
</div>
<!-- content close -->
<!-- jquery cdn link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- bootstrap 5 js link -->
<script type="text/javascript" src="custom/js/bootstrap.min.js"></script>
<!-- customjs link -->
<script type="text/javascript" src="custom/js/customjs/register.js"></script>
</body>
</html>