Today, We want to share with you PHP Jquery Ajax CRUD Example Tutorial From Scratch.In this post we will show you Jquery Ajax CRUD Operations in PHP, hear for PHP MySQL CRUD Operations using jQuery and Bootstrap we will give you demo and example for implement.In this post, we will learn about Simple PHP Jquery Ajax CRUD(insert update delete) tutorial example with an example.
PHP Jquery Ajax CRUD Example Tutorial From Scratch
There are the Following The simple About PHP Jquery Ajax CRUD Example Tutorial From Scratch Full Information With Example and source code.
As I will cover this Post with live Working example to develop CRUD Operation using PHP/MySQLi and AJAX/jQuery, so the some major files and Directory structures for this example is following below.
- index.php
- fetchMemberData.php
- create.php
- edit.php
- update.php
- delete.php
- js/member-ajax.js
Step 1: Make Mysql Database and Table
Items Table Query:
CREATE TABLE IF NOT EXISTS `members` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `membername` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `member_info` text COLLATE utf8_unicode_ci NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=63 ;
Step 1.1 create database configuration
api/config_database.php
Step 2: Create HTML interface Index Page
index.php
This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.php.
PHP Jquery Ajax CRUD Example - pakainfo.com
PHP Jquery Ajax CRUD Example
PHP Jquery Ajax CRUD Example Tutorial From Scratch
Member Name
Member Information
Action
Step 3: Make PHP jQuery CRUD JS File
js/member-ajax.js
$( document ).ready(function() {
var page = 1;
var current_page = 1;
var total_page = 0;
var is_ajax_fire = 0;
manageData();
/* manage data list */
function manageData() {
$.ajax({
dataType: 'json',
url: url+'api/fetchMemberData.php',
data: {page:page}
}).done(function(data){
total_page = Math.ceil(data.total/10);
current_page = page;
$('#pagination').twbsPagination({
totalPages: total_page,
visiblePages: current_page,
onPageClick: function (event, pageL) {
page = pageL;
if(is_ajax_fire != 0){
getPageData();
}
}
});
manageRow(data.data);
is_ajax_fire = 1;
});
}
/* Get Page Data*/
function getPageData() {
$.ajax({
dataType: 'json',
url: url+'api/fetchMemberData.php',
data: {page:page}
}).done(function(data){
manageRow(data.data);
});
}
/* Add new Member table row */
function manageRow(data) {
var rows = '';
$.each( data, function( key, value ) {
rows = rows + '';
rows = rows + ''+value.membername+' ';
rows = rows + ''+value.member_info+' ';
rows = rows + '';
rows = rows + ' ';
rows = rows + '';
rows = rows + ' ';
rows = rows + ' ';
});
$("tbody").html(rows);
}
/* Create new Member */
$(".crud-submit").click(function(e){
e.preventDefault();
var form_action = $("#create-member").find("form").attr("action");
var membername = $("#create-member").find("input[name='membername']").val();
var member_info = $("#create-member").find("textarea[name='member_info']").val();
if(membername != '' && member_info != ''){
$.ajax({
dataType: 'json',
type:'POST',
url: url + form_action,
data:{membername:membername, member_info:member_info}
}).done(function(data){
$("#create-member").find("input[name='membername']").val('');
$("#create-member").find("textarea[name='member_info']").val('');
getPageData();
$(".modal").modal('hide');
toastr.success('Member Created Successfully.', 'Success Alert', {timeOut: 5000});
});
}else{
alert('You are missing membername or member_info.')
}
});
/* Remove Member */
$("body").on("click",".remove-member",function(){
var id = $(this).parent("td").data('id');
var c_obj = $(this).parents("tr");
$.ajax({
dataType: 'json',
type:'POST',
url: url + 'api/delete.php',
data:{id:id}
}).done(function(data){
c_obj.remove();
toastr.success('Member Deleted Successfully.', 'Success Alert', {timeOut: 5000});
getPageData();
});
});
/* Edit Member */
$("body").on("click",".edit-member",function(){
var id = $(this).parent("td").data('id');
var membername = $(this).parent("td").prev("td").prev("td").text();
var member_info = $(this).parent("td").prev("td").text();
$("#edit-member").find("input[name='membername']").val(membername);
$("#edit-member").find("textarea[name='member_info']").val(member_info);
$("#edit-member").find(".edit-id").val(id);
});
/* Updated new Member */
$(".crud-submit-edit").click(function(e){
e.preventDefault();
var form_action = $("#edit-member").find("form").attr("action");
var membername = $("#edit-member").find("input[name='membername']").val();
var member_info = $("#edit-member").find("textarea[name='member_info']").val();
var id = $("#edit-member").find(".edit-id").val();
if(membername != '' && member_info != ''){
$.ajax({
dataType: 'json',
type:'POST',
url: url + form_action,
data:{membername:membername, member_info:member_info,id:id}
}).done(function(data){
getPageData();
$(".modal").modal('hide');
toastr.success('Member Updated Successfully.', 'Success Alert', {timeOut: 5000});
});
}else{
alert('You are some missing membername or member_info.')
}
});
});
Step 4: Make a Server Side AJAX File Call and Crud PHP
api/fetchMemberData.php
query($sql);
while($row = $db_query_results->fetch_assoc()){
$json[] = $row;
}
$data['data'] = $json;
$db_query_results = mysqli_query($mysqli,$sqlTotal);
$data['total'] = mysqli_num_rows($db_query_results);
echo json_encode($data);
?>
Jquery Ajax CRUD Operations in PHP Create Member
api/create.php
query($sql); $sql = "SELECT * FROM members Order by id desc LIMIT 1"; $db_query_results = $mysqli->query($sql); $data = $db_query_results->fetch_assoc(); echo json_encode($data); ?>
Jquery Ajax CRUD Operations in PHP Update
api/update.php
query($sql); $sql = "SELECT * FROM members WHERE id = '".$id."'"; $db_query_results = $mysqli->query($sql); $data = $db_query_results->fetch_assoc(); echo json_encode($data); ?>
crud php mysql ajax bootstrap – delete
api/delete.php
query($sql); echo json_encode([$id]); ?>
run this example on terminal run commands
php -S localhost:8000
run Web Project and Browser URL
http://localhost:8000
Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about PHP Jquery Ajax CRUD Example Tutorial From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.
