4 Steps to Create AJAX CRUD Application in PHP & MySQL

4 Steps to Create AJAX CRUD Application in PHP & MySQL

This is simple AJAX CRUD application built with AJAX using PHP & MySQL. This tutorial is an extension to our simple crud application in PHP & MySQL. I’m using that same code for this application and adding ajax features.

Below is simple AJAX code snippet to send and receive data from PHP file. I’m sending data to PHP file using get method from HTML file. This submitted data will be displayed in HTML file without reloading HTML file.

Save this code as sample.html

XHTML
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Simple AJAX Code Snippet</title>
</head>
<body>
<button>Click Me</button>
<div id="result">This is result div</div>
</body>
</html>

Add this code inside head section. In this below code I’m sending some data to data.php file using get method. Upon getting successful data from data.php replacing it with result id inside our HTML file. All this will be done without reloading sample.html file.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function ajax(){
var xmlhttp = new XMLHttpRequest();
 
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var result = document.getElementById('result');
result.innerHTML = xmlhttp.responseText;
}
}
 
xmlhttp.open('GET', 'data.php?name=vivek', true);
xmlhttp.send();
}
</script>

Add this onclick function to button inside body section

XHTML
1
<button onclick="ajax();">Click Me</button>

Add this PHP code into data.php. This file is used to send and receive data in our HTML document.

PHP
1
2
3
<?php
echo "Name of the person is " .$_REQUEST['name'];
?>

In our main AJAX CRUD application using PHP & MySQL. I’m going to use this concept to send & receive the data in html & php files.

1. AJAX Read Operation in PHP & MySQL

Create a html file with the name index.html use this basic html with bootstrap css cdn files, bootstrap js cdn files & jQuery cdn file. I’m using CDN, if you want you can download it to local computer and use it.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Simple AJAX CRUD Application in PHP & MySQL</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<link rel="stylesheet" href="styles.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body >
 
</body>
</html>

Inside body section, use this form code to display form & submiting values to php file for CRUD operations.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="container">
<div class="row" id="edit">
<form class="form-horizontal col-md-6 col-md-offset-3">
<h2>Create Operation in CRUD Application</h2>
<div class="form-group">
    <label for="input1" class="col-sm-2 control-label">First Name</label>
    <div class="col-sm-10">
      <input type="text" id="fname"  class="form-control" placeholder="First Name" />
    </div>
</div>
 
<div class="form-group">
    <label for="input1" class="col-sm-2 control-label">Last Name</label>
    <div class="col-sm-10">
      <input type="text" id="lname"  class="form-control" placeholder="Last Name" />
    </div>
</div>
 
<div class="form-group">
    <label for="input1" class="col-sm-2 control-label">E-Mail</label>
    <div class="col-sm-10">
      <input type="email" id="email"  class="form-control" placeholder="E-Mail" />
    </div>
</div>
 
<div class="form-group" class="radio">
<label for="input1" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
  <label>
    <input type="radio" id="gender" value="male"> Male
  </label>
     <label>
    <input type="radio" id="gender" value="female"> Female
  </label>
</div>
</div>
 
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<select id="age" class="form-control">
<option value="">Select Your Age</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</div>
</div>
<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" />
</form>
 
</div>
</div>

Use the code in script tags from our first sample.html file

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
function ajax(){
 
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var result = document.getElementById('result');
result.innerHTML = xmlhttp.responseText;
}
}
 
xmlhttp.open('GET', 'ajax.php',true);
xmlhttp.send();
}
 
</script>

Right after form closing div in index.html add this table code.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="row">
<table class="table ">
<thead>
<tr>
<th>#</th>
<th>Full Name</th>
<th>E-Mail</th>
<th>Age</th>
<th>Gender</th>
<th>Extras</th>
</tr>
</thead>
<tbody id="result">
 
</tbody>
</table>
</div>

Here using ajax.php file, I’m replacing tbody #result id with the output from ajax.php file.
Code of ajax.php file.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
require_once('connect.php');
 
$ReadSql = "SELECT * FROM `crud`";
$res = mysqli_query($connection, $ReadSql);
?>
<tbody>
<?php
while($r = mysqli_fetch_assoc($res)){
?>
<tr>
<th scope="row"><?php echo $r['id']; ?></th>
<td><?php echo $r['first_name'] . " " . $r['last_name']; ?></td>
<td><?php echo $r['email_id']; ?></td>
<td><?php echo $r['gender']; ?></td>
<td><?php echo $r['age']; ?></td>
<td>
<a href="#"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>
 
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal<?php echo $r['id']; ?>">Delete</button>
 
<!-- Modal -->
  <div class="modal fade" id="myModal<?php echo $r['id']; ?>" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Delete File</h4>
        </div>
        <div class="modal-body">
          <p>Are you sure?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <a href="#"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a>
        </div>
      </div>
      
    </div>
  </div>
 
</td>
</tr>
<?php } ?>
</tbody>

Create connect.php file for connecting to database in PHP. I’m already including this file in ajax.php file. If you haven’t created database table, follow this tutorial Simple CRUD Application in PHP & MySQL.

PHP
1
2
3
4
5
6
7
8
9
<?php
$connection = mysqli_connect('localhost', 'root', '');
if (!$connection){
    die("Database Connection Failed" . mysqli_error($connection));
}
$select_db = mysqli_select_db($connection, 'project');
if (!$select_db){
    die("Database Selection Failed" . mysqli_error($connection));
}

To update table data using ajax use this code to opening body tag. That is executing ajax function while onload.

XHTML
1
<body onload="ajax();">

After adding above line of code, you can see the difference. That is table body will be loaded after loading html file.

2. AJAX Create Operation in PHP & MySQL

Create Operation means inserting data into database table.
Add this onclick code to submit button.

XHTML
1
onclick="ajax('create'); return false;"

Next get the input fields values using this below code

JavaScript
1
2
3
4
5
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var email = document.getElementById('email').value;
var gender = document.getElementById('gender').value;
var age = document.getElementById('age').value;

Add also pass the operation mode in ajax function using this line of code

JavaScript
1
2
3
4
<script type="text/javascript">
function ajax(operation, id){
        }
</script>

Add this code right after defining the variables.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
if(operation == undefined){
operation = '';
id = '';
}else if(operation == 'create'){
id == '';
}
if(fname == ''){
fname = '';
}
if(lname == ''){
lname = '';
}
if(email == ''){
email = '';
}
if(gender == ''){
gender = '';
}
if(age == ''){
age = '';
}

Send the varible values using get method

JavaScript
1
xmlhttp.open('GET', 'ajax.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);

Add this code in ajax.php file to insert submitted data in database table.

PHP
1
2
3
4
5
6
7
8
9
10
11
if($_REQUEST['operation'] != ''){
if($_REQUEST['operation'] == 'create'){
$fname = $_REQUEST['fname'];
$lname = $_REQUEST['lname'];
$email = $_REQUEST['email'];
$gender = $_REQUEST['gender'];
$age = $_REQUEST['age'];
$CreateSql = "INSERT INTO `crud` (first_name, last_name, email_id, gender, age) VALUES ('$fname', '$lname', '$email', '$gender', '$age')";
$res = mysqli_query($connection, $CreateSql) or die(mysqli_error($connection));
}
}

3. AJAX Delete Operation in PHP & MySQL

First of all, add this onclick code to delete button in bootstrap popup modal inside ajax.php file.

XHTML
1
2
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a href="javascript:void(0);" onclick="ajax('delete', <?php echo $r['id']; ?>);"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a>

Then add this code to delete record from database table.

PHP
1
2
3
4
5
if($_REQUEST['operation'] == 'delete'){
$id = $_REQUEST['id'];
$DelSql = "DELETE FROM `crud` WHERE id=$id";
$res = mysqli_query($connection, $DelSql);
}

4. AJAX Edit Operation in PHP & MySQL

For edit operation, I’m creating a new function ajax_edit. This function accepts two arguments one is operation same way we used for previous function and the anothe argument is id. which is used update the record.

This is simple code, I’m using from sample.html file.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ajax_edit(operation, id){
 
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var edit = document.getElementById('edit');
edit.innerHTML = xmlhttp.responseText;
}
}
 
xmlhttp.open('GET', 'edit.php',true);
xmlhttp.send();
}

Create one more file edit.php & use this code. This code will display form with data fetched from database table.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?php
require_once('connect.php');
//if($_REQUEST['operation'] == 'edit'){
$id = $_REQUEST['id'];
$SelSql = "SELECT * FROM `crud` WHERE id=$id";
$res = mysqli_query($connection, $SelSql);
$r = mysqli_fetch_assoc($res);
 
?>
<form method="post" class="form-horizontal col-md-6 col-md-offset-3">
<h2>UPDATE Operation in CRUD Application</h2>
<div class="form-group">
    <label for="input1" class="col-sm-2 control-label">First Name</label>
    <div class="col-sm-10">
      <input type="text" id="fname"  class="form-control" value="<?php echo $r['first_name']; ?>" placeholder="First Name" />
    </div>
</div>
 
<div class="form-group">
    <label for="input1" class="col-sm-2 control-label">Last Name</label>
    <div class="col-sm-10">
      <input type="text" id="lname"  class="form-control" value="<?php echo $r['last_name']; ?>" placeholder="Last Name" />
    </div>
</div>
 
<div class="form-group">
    <label for="input1" class="col-sm-2 control-label">E-Mail</label>
    <div class="col-sm-10">
      <input type="email" id="email"  class="form-control" value="<?php echo $r['email_id']; ?>" placeholder="E-Mail" />
    </div>
</div>
 
<div class="form-group" class="radio">
<label for="input1" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
  <label>
    <input type="radio" id="gender" value="male" <?php if($r['gender'] == 'male'){ echo "checked";} ?>> Male
  </label>
     <label>
    <input type="radio" id="gender" value="female" <?php if($r['gender'] == 'female'){ echo "checked";} ?>> Female
  </label>
</div>
</div>
 
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<select id="age" class="form-control">
<option>Select Your Age</option>
<option value="20" <?php if($r['age'] == '20'){ echo "selected";} ?> >20</option>
<option value="21" <?php if($r['age'] == '21'){ echo "selected";} ?> >21</option>
<option value="22" <?php if($r['age'] == '22'){ echo "selected";} ?> >22</option>
<option value="23" <?php if($r['age'] == '23'){ echo "selected";} ?> >23</option>
<option value="24" <?php if($r['age'] == '24'){ echo "selected";} ?> >24</option>
<option value="25" <?php if($r['age'] == '25'){ echo "selected";} ?> >25</option>
</select>
</div>
</div>
<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="Update" />
</form>

To load this edit.php file inside our index.html add the id #edit to div opening tag that is before opening form tag. I’ve added this in above index.html code.

Next executing ajax function after clicking on edit button in HTML table. Replace this code with edit anchor link.

XHTML
1
<a href="javascript:void(0);" onclick="ajax_edit('edit', <?php echo $r['id']; ?>);"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>

Till now form is loading with values from database, next step is to update these submitted values in database.

Add this on click function to form submit button in edit.php file

XHTML
1
onclick="ajax_edit('update', <?php echo $r['id']; ?>); return false;"

Add this code in ajax_edit function in index.html file, to get input field values.

JavaScript
1
2
3
4
5
6
7
8
9
if(operation == 'edit'){
 
}else if(operation == 'update'){
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var email = document.getElementById('email').value;
var gender = document.getElementById('gender').value;
var age = document.getElementById('age').value;
}

Add these variable values in get method for sending data to edit.php file.

JavaScript
1
xmlhttp.open('GET', 'edit.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);

Add this code in edit.php file.

PHP
1
2
3
4
5
6
7
8
9
10
11
if($_REQUEST['operation'] == 'update'){
$id = $_REQUEST['id'];
$fname = mysql_real_escape_string($_REQUEST['fname']);
$lname = mysql_real_escape_string($_REQUEST['lname']);
$email = mysql_real_escape_string($_REQUEST['email']);
$gender = $_REQUEST['gender'];
$age = $_REQUEST['age'];
 
$UpdateSql = "UPDATE `crud` SET first_name='$fname', last_name='$lname', gender='$gender', age=$age, email_id='$email' WHERE id=$id";
$res = mysqli_query($connection, $UpdateSql);
}

Complete Code of AJAX CRUD Application in PHP & MySQL

If you are having any problem arragning above pieces of code, you can use this complete code.

If you have any problem let me know using comment form below.

email-subsribe

Get All My Scripts For FREE in Your E-Mail

Enter Your Email Address To Download Now

Related Posts

Complete User Authentication System in CodeIgniter – 9 Steps

Do you want to Develop Content Management System in PHP?

8 Simple Steps to Create CRUD Application in OOP PHP

Develop Secure Applications with PHP PDO – Ultimate Guide

Learn How to Improve PHP Security with these 6 Steps?

How to Create Simple CRUD Application in PHP PDO – 7 Easy steps

Do you Know How to Secure PHP Forms with CSRF Tokens?

8 Simple Steps to Create (Pretty) Clean URL’s with PHP & HTACCESS

Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: