PHP Jquery Ajax CRUD Example Tutorial From Scratch

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

Contents

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
                
            
            
            
        
        
        
        
          
            
              
                
                Create Member
              
              
                      
                          
                            Member Name:
                            
                            
                        
                        
                            Member Information:
                            
                            
                        
                        
                            
                        
                      
              
            
          
        
        
        
          
            
              
                
                Edit Member
              
              
                      
                          
                          
                            Member Name:
                            
                            
                        
                        
                            Member Information:

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.

PHP Jquery Ajax CRUD Example Tutorial From Scratch