Simple PHP jQuery Ajax Insert Update Delete using MySQLi

Simple PHP jQuery Ajax Insert Update Delete using MySQLi

Today, We want to share with you Simple PHP jQuery Ajax Insert Update Delete using MySQLi.
In this post we will show you PHP – Simple CRUD With Ajax/MySQLi, hear for live table add edit delete using ajax jquery in php mysql we will give you demo and example for implement.
In this post, we will learn about Ajax Add & Delete MySQL records using jQuery & PHP with an example.

Making the database connection

first of all simple database connection using PHP simple copy and paste this source code db_connect.php

<?php
	$db_connect = new mysqli('localhost', 'root', 'YOUR_PASSWORD', 'pakainfo_db');
 
	if(!$db_connect){
		die("Error: Sorry Cannot connect to the your database");
	}
?>

Making The Interface

main file All the HTML and PHP Form Interface Like name as a index.php.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="pakainfo/css/bootstrap.css"/>
	</head>
<body>
	<nav class="pakainfo navbar navbar-default">
		<div class="pakainfo container-fluid gst">
			<a class="navbar-brand" href="https://pakainfo.com">pakainfo.com</a>
</a>		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-success">PHP - Simple CRUD With Ajax/MySQLi</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<form method="POST">
			<div class="gst form-inline">
				<label>Client Name</label>
				<input type="text" id="clientfname" class="pakainfo form-control"/>
				<label>Lastname</label>
				<input type="text" id="clientlname" class="pakainfo form-control"/>
			</div>
			<br />
			<div class="gst form-inline">
				<label>location</label>
				<input type="text" id="location" class="pakainfo form-control"/>
			</div>
			<br />
			<center><button type="button" id="save" class="btn btn-success"><span class="paka glyphicon glyphicon-save"></span> Save</button><button type="button" id="update" class="paka btn btn-warning"><span class="paka glyphicon glyphicon-edit"></span> Update</button></center>
		</form>
		<br />
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>Client Name</th>
					<th>Location</th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody id="data"></tbody>
		</table>
	</div>
</body>
<script src="pakainfo/js/jquery-3.2.1.min.js"></script>
<script src="pakainfo/js/script.js"></script>
</html>

save_query.php

This source code will save all the record the data input form to the mysql database PHP server side.

Also Read :  PHP MySQL Inline Editing Dynamically using jQuery Ajax

<?php
	require_once 'db_connect.php';
 
	$clientfname = $_POST['clientfname'];
	$clientlname = $_POST['clientlname'];
	$location = $_POST['location'];
 
	$db_connect->query("INSERT INTO `client_mst` VALUES('', '$clientfname', '$clientlname', '$location')");
?>

data_query.php

This source code will client_row and displaying the data from the get all the record in database.

<?php
	require_once 'db_connect.php';
	if(ISSET($_POST['res'])){
		$query = $db_connect->query("SELECT * FROM `client_mst`");
		while($client_row = $query->fetch_array()){
			echo
				"
					<tr>
						<td>".$client_row['clientfname']." ".$client_row['clientlname']."</td>
						<td>".$client_row['location']."</td>
						<td><center><button class='btn btn-warning edit' name='".$client_row['client_id']."'><span class='glyphicon glyphicon-edit'></span> Edit</button> | <button class='btn btn-danger delete' name='".$client_row['client_id']."'><span class='glyphicon glyphicon-trash'></span> Delete</button></center></td>
					</tr>
				";
 
		}
	}
 
?> 

delete_query,php

This source code will delete particuler record the data from the sql database.

<?php
	require_once 'db_connect.php';
 
	$id = $_POST['id'];
 
	$db_connect->query("DELETE FROM `client_mst` WHERE `client_id` = '$id'");
?>

client_edit.php

first of all each person edit this record via users id to get and select query using PHP in MySQLi

Also Read :  Add www subdomain to all Urls using Htaccess

<?php
	require_once 'db_connect.php';
 
	if(ISSET($_POST['id'])){
		$id = $_POST['id'];
 
		$query = $db_connect->query("SELECT * FROM `client_mst` WHERE `client_id` ='$id'");
		$client_row = $query->fetch_array();
 
		$array = array(
			'client_id' => $client_row['client_id'],
			'clientfname' => $client_row['clientfname'],
			'clientlname' => $client_row['clientlname'],
			'location' => $client_row['location']
		);
 
		echo json_encode($array);
	}
?>

client_update.php

Server side source code for All the Data update queryin Mysql using PHP

<?php
	require_once 'db_connect.php';
 
	if(ISSET($_POST['id'])){
		$id = $_POST['id'];
		$clientfname = $_POST['clientfname'];
		$clientlname = $_POST['clientlname'];
		$location = $_POST['location'];
 
		$db_connect->query("UPDATE `client_mst` set `clientfname` = '$clientfname', `clientlname` = '$clientlname', `location` = '$location' WHERE `client_id` = '$id'");
	}
 
?>

Making The Ajax Funcition

Save the Custom Javscript File Like name as a script.js inside the all the libs in js folder.

$(document).ready(function(){
	var client_id;
 
	RetriveClientData();
 
	$('#update').hide();
 
	$('#save').on('click', function(){
		if($('#clientfname').val() == "" || $('#clientlname').val() == "" || $('#location').val() == ""){
			alert("Hello World");
		}else{
			var clientfname = $('#clientfname').val();
			var clientlname = $('#clientlname').val();
			var location = $('#location').val();
 
			$.ajax({
				url: 'save_query.php',
				type: 'POST',
				data: {
					clientfname: clientfname,
					clientlname: clientlname,
					location: location
				},
				success: function(data){
					 $('#clientfname').val('');
					 $('#clientlname').val('');
					 $('#location').val('');
					 RetriveClientData();
				}
			});
		}
 
	});
 
	function RetriveClientData(){
		$.ajax({
			url: 'data_query.php',
			type: 'POST',
			data: {
				res: 1
			},
			success: function(response){
				$('#data').html(response);
			}
		})
	}
 
	$(document).on('click', '.delete', function(){
		var id = $(this).attr('name');
 
		$.ajax({
			url: 'delete_query.php',
			type: 'POST',
			data: {
				id: id
			},
			success: function(data){
				RetriveClientData();
				$('#update').hide();
				$('#save').show();	
				$('#clientfname').val('');
				$('#clientlname').val('');
				$('#location').val('');
			}
		});
	})
 
	$(document).on('click', '.edit', function(){
		var id = $(this).attr('name');
 
		$.ajax({
			url: 'client_edit.php',
			type: 'POST',
			data: {
				id: id
			},
			success: function(response){
				var fetchArr = jQuery.parseJSON(response);
 
				client_id = fetchArr.client_id;
 
				$('#clientfname').val(fetchArr.clientfname);
				$('#clientlname').val(fetchArr.clientlname);
				$('#location').val(fetchArr.location);
 
				$('#update').show();
				$('#save').hide();	
			}
		})
	});
 
	$('#update').on('click', function(){
		var clientfname = $('#clientfname').val();
		var clientlname = $('#clientlname').val();
		var location = $('#location').val();
 
 
		$.ajax({
			url: 'client_update.php',
			type: 'POST',
			data: {
				id: client_id,
				clientfname: clientfname,
				clientlname: clientlname,
				location: location
			},
			success: function(){
				RetriveClientData();
				$('#clientfname').val('');
				$('#clientlname').val('');
				$('#location').val('');
 
				alert("Client Details Successfully Updated!");
 
				$('#update').hide();
				$('#save').show();	
 
				client_id = "";
			}
		});
	});
});

There you have step by step done it we successfully made a Simple webapplication Like as a insert update and delete CRUD With Ajax/MySQLi using PHP Example.

Also Read :  VueJS CRUD Operations with PHP and MySQLi Example

We hope you get an idea about PHP – Simple CRUD With Ajax/MySQLi
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.

Recommended For You.

Laravel Global variable Sharing Data with all views
Today, We want to share with you Laravel Global variable Sharing Data with all views.In this post we will show

Add a Comment

Your email address will not be published. Required fields are marked *