PHP CRUD Operations using jQuery, Ajax &MySQL

CRUD is an acronym that stands for Create, Read, Update, and Delete. Add, Read, Update and Delete functionality is commonly used in the data management section of a web application. In this tutorial, you will learn how to build a PHP CRUD Operations using jQuery, Ajax, and MySQL without refresh page. You can also download source code of the live example.

Also Read : Load more data on page scroll using jQuery, Ajax and PHP

So let’s implement PHP CRUD Operations using jQuery, Ajax & MySQL. look files structure:

php-crud-operations-using-jquery-ajax-mysql
- assets
  - css
    - style.css
  - js
    - ajax.js
- templates
  - header.php
  - footer.php
- modal
  - add.php
  - view.php
- index.php
- action.php

Step 1: Create the database and Table

Run the following script against MySQL to create the database student table.

	CREATE TABLE `student` (
	  `id` int(11) NOT NULL,
	  `roll_no` varchar(10) NOT NULL,
	  `name` varchar(255) NOT NULL,
	  `email` varchar(255) NOT NULL,
	  `address` text NOT NULL,
	  `class_name` varchar(255) NOT NULL,
	  `gender` varchar(15) NOT NULL,
	  `created_date` datetime NOT NULL DEFAULT current_timestamp()
	) ENGINE=InnoDB DEFAULT CHARSET=latin1;

	ALTER TABLE `student`
	  ADD PRIMARY KEY (`id`);

	ALTER TABLE `student`
	  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

CREATE TABLE `student` (

`id` int(11) NOT NULL,

`roll_no` varchar(10) NOT NULL,

`name` varchar(255) NOT NULL,

`email` varchar(255) NOT NULL,

`address` text NOT NULL,

`class_name` varchar(255) NOT NULL,

`gender` varchar(15) NOT NULL,

`created_date` datetime NOT NULL DEFAULT current_timestamp()

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `student`

ADD PRIMARY KEY (`id`);

ALTER TABLE `student`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Step 2: Database Configuration (DbConnection.php)

The DbConnection.php file is used to connect and fetch record from database. You should change your username, password and database name. See the config.php file below.

<?php
/**
 * @package Database Connection(Config)
 *
 * @author CodersMag Team
 *
 * @email  info@codersmag.com
 *   
 */
class DBConnection {
    // HOST NAME
    private $_dbHostname = "localhost";
    // DATABASE NAME
    private $_dbName = "codersmag_DB";
    // DATABASE USERNAME
    private $_dbUsername = "root";
    // DATABASE PASSWORD
    private $_dbPassword = "";
    // declare variable
    private $_dbh;

    // __construct
    public function __construct() {
        try {
            $this->_dbh = new PDO("mysql:host=$this->_dbHostname;dbname=$this->_dbName", $this->_dbUsername, $this->_dbPassword, array(PDO::MYSQL_ATTR_FOUND_ROWS => true));    
            $this->_dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        } catch(PDOException $e) {
            echo "Connection failed: " . $e->getMessage();
        }

    }

    // return PDO: Connection
    public function returnPDOConnection() {
        return $this->_dbh;
    }
}
?>

<?php

/**

* @package Database Connection(Config)

* @author CodersMag Team

* @email info@codersmag.com

class DBConnection {

// HOST NAME

private $_dbHostname = "localhost";

// DATABASE NAME

private $_dbName = "codersmag_DB";

// DATABASE USERNAME

private $_dbUsername = "root";

// DATABASE PASSWORD

private $_dbPassword = "";

// declare variable

private $_dbh;

// __construct

public function __construct() {

try {

$this->_dbh = new PDO("mysql:host=$this->_dbHostname;dbname=$this->_dbName", $this->_dbUsername, $this->_dbPassword, array(PDO::MYSQL_ATTR_FOUND_ROWS => true));

$this->_dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

echo "Connection failed: " . $e->getMessage();

}

// return PDO: Connection

public function returnPDOConnection() {

return $this->_dbh;

}

Step 3: Create a class file named Student.php inside “class/” folder.

<?php
/**
 * @package Student class
 *
 * @author CodersMag Team
 *
 * @email  info@codersmag.com
 *   
 */
include("DBConnection.php");
// Student
class Student 
{
    // here variables    
    protected $_db;
    private $_studentID;
    private $_rollNo;
    private $_name;
    private $_email;
    private $_address;
    private $_gender;
    private $_className;
    private $_searchVal;
    private $_orderBy;
    private $_start;
    private $_length;

    // functions
    public function setStudentID($studentID) {
        $this->_studentID = $studentID;
    }
    public function setName($name) {
        $this->_name = $name;
    }
    public function setRollNo($rollNo) {
        $this->_rollNo = $rollNo;
    }
    public function setEmail($email) {
        $this->_email = $email;
    }
    public function setAddress($address) {
        $this->_address = $address;
    }
    public function setGender($gender) {
        $this->_gender = $gender;
    }
    public function setClass($className) {
        $this->_className = $className;
    }
    public function setSearchVal($searchVal) {
        $this->_searchVal = $searchVal;
    }
    public function setOrderBy($orderBy) {
        $this->_orderBy = $orderBy;
    }
    public function setStart($start) {
        $this->_start = $start;
    }
    public function setLength($length) {
        $this->_length = $length;
    }

    
    // __construct
    public function __construct() {
        $this->_db = new DBConnection();
        $this->_db = $this->_db->returnPDOConnection();
    }

    // add student record in database
    public function create() {
		try {
    		$sql = 'INSERT INTO student (roll_no, name, email, address, class_name, gender)  VALUES (:roll_no, :name, :email, :address, :class_name, :gender)';
    		$data = [
			    'roll_no' => $this->_rollNo,
                'name' => $this->_name,
			    'email' => $this->_email,
                'address' => $this->_address,
                'class_name' => $this->_className,
                'gender' => $this->_gender,
			];
	    	$stmt = $this->_db->prepare($sql);
	    	$stmt->execute($data);
			$status = $this->_db->lastInsertId();
            return $status;

		} catch (Exception $e) {
    		die("Exception Caught!: ".$ee->getMessage());
		}

    }

    // edit student record in database
    public function update() {
        try {
		    $sql = "UPDATE student SET roll_no=:roll_no, name=:name, email=:email, address=:address, class_name=:class_name, gender=:gender WHERE id=:student_id";
		     $data = [
			    'roll_no' => $this->_rollNo,
                'name' => $this->_name,
                'email' => $this->_email,
                'address' => $this->_address,
                'class_name' => $this->_className,
                'gender' => $this->_gender,
                'student_id' => $this->_studentID,
			];
			$stmt = $this->_db->prepare($sql);
			$stmt->execute($data);
			$status = $stmt->rowCount();
            return $status;
		} catch (Exception $e) {
			die("Exception Caught!: " . $e->getMessage());
		}
    }

    // get all student records from database
    public function getList() {
    	try {

            $sql = "SELECT id, roll_no, name, email, address, class_name, gender, created_date FROM student ORDER BY `id` DESC";
		    $stmt = $this->_db->prepare($sql);
		    $stmt->execute();
		    $result = $stmt->fetchAll(\PDO::FETCH_ASSOC);
            return $result;
		} catch (Exception $e) {
		    die("Exception Caught!: " . $e->getMessage());
		}
    }

    // get student record from database
    public function getStudent() {
        try {
            $sql = "SELECT id, roll_no, name, email, address, class_name, gender, created_date FROM student WHERE id=:student_id";
            $stmt = $this->_db->prepare($sql);
            $data = [
                'student_id' => $this->_studentID
            ];
            $stmt->execute($data);
            $result = $stmt->fetch(\PDO::FETCH_ASSOC);
            return $result;
        } catch (Exception $e) {
            die("Exception Caught!: " . $e->getMessage());
        }
    }

    // delete student record from database
    public function delete() {
    	try {
	    	$sql = "DELETE FROM student WHERE id=:student_id";
		    $stmt = $this->_db->prepare($sql);
		    $data = [
		    	'student_id' => $this->_studentID
			];
	    	$stmt->execute($data);
            $status = $stmt->rowCount();
            return $status;
	    } catch (Exception $e) {
		    die("Exception Caught!: " . $e->getMessage());
		}
    }

}
?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

<?php

/**

* @package Student class

* @author CodersMag Team

* @email info@codersmag.com

include("DBConnection.php");

// Student

class Student

{

// here variables

protected $_db;

private $_studentID;

private $_rollNo;

private $_name;

private $_email;

private $_address;

private $_gender;

private $_className;

private $_searchVal;

private $_orderBy;

private $_start;

private $_length;

// functions

public function setStudentID($studentID) {

$this->_studentID = $studentID;

}

public function setName($name) {

$this->_name = $name;

}

public function setRollNo($rollNo) {

$this->_rollNo = $rollNo;

}

public function setEmail($email) {

$this->_email = $email;

}

public function setAddress($address) {

$this->_address = $address;

}

public function setGender($gender) {

$this->_gender = $gender;

}

public function setClass($className) {

$this->_className = $className;

}

public function setSearchVal($searchVal) {

$this->_searchVal = $searchVal;

}

public function setOrderBy($orderBy) {

$this->_orderBy = $orderBy;

}

public function setStart($start) {

$this->_start = $start;

}

public function setLength($length) {

$this->_length = $length;

}

// __construct

public function __construct() {

$this->_db = new DBConnection();

$this->_db = $this->_db->returnPDOConnection();

}

// add student record in database

public function create() {

try {

$sql = 'INSERT INTO student (roll_no, name, email, address, class_name, gender) VALUES (:roll_no, :name, :email, :address, :class_name, :gender)';

$data = [

'roll_no' => $this->_rollNo,

'name' => $this->_name,

'email' => $this->_email,

'address' => $this->_address,

'class_name' => $this->_className,

'gender' => $this->_gender,

];

$stmt = $this->_db->prepare($sql);

$stmt->execute($data);

$status = $this->_db->lastInsertId();

return $status;

} catch (Exception $e) {

die("Exception Caught!: ".$ee->getMessage());

}

// edit student record in database

public function update() {

try {

$sql = "UPDATE student SET roll_no=:roll_no, name=:name, email=:email, address=:address, class_name=:class_name, gender=:gender WHERE id=:student_id";

$data = [

'roll_no' => $this->_rollNo,

'name' => $this->_name,

'email' => $this->_email,

'address' => $this->_address,

'class_name' => $this->_className,

'gender' => $this->_gender,

'student_id' => $this->_studentID,

];

$stmt = $this->_db->prepare($sql);

$stmt->execute($data);

$status = $stmt->rowCount();

return $status;

} catch (Exception $e) {

die("Exception Caught!: " . $e->getMessage());

}

// get all student records from database

public function getList() {

try {

$sql = "SELECT id, roll_no, name, email, address, class_name, gender, created_date FROM student ORDER BY `id` DESC";

$stmt = $this->_db->prepare($sql);

$stmt->execute();

$result = $stmt->fetchAll(\PDO::FETCH_ASSOC);

return $result;

} catch (Exception $e) {

die("Exception Caught!: " . $e->getMessage());

}

// get student record from database

public function getStudent() {

try {

$sql = "SELECT id, roll_no, name, email, address, class_name, gender, created_date FROM student WHERE id=:student_id";

$stmt = $this->_db->prepare($sql);

$data = [

'student_id' => $this->_studentID

];

$stmt->execute($data);

$result = $stmt->fetch(\PDO::FETCH_ASSOC);

return $result;

} catch (Exception $e) {

die("Exception Caught!: " . $e->getMessage());

}

// delete student record from database

public function delete() {

try {

$sql = "DELETE FROM student WHERE id=:student_id";

$stmt = $this->_db->prepare($sql);

$data = [

'student_id' => $this->_studentID

];

$stmt->execute($data);

$status = $stmt->rowCount();

return $status;

} catch (Exception $e) {

die("Exception Caught!: " . $e->getMessage());

}

Step 4: Create action file named action.php

Manage ajax request and return as JSON data

<?php
// include class 
include_once 'class/Student.php';
// object
$studentObj = new Student();
// post method
$_post = $_POST;
$json = array();	
$studentInfo = array();
// create student record in database
if(!empty($_post['action']) && $_post['action']=="create") {
  $studentObj->setRollNo($_post['roll_no']);
	$studentObj->setName($_post['name']);
	$studentObj->setEmail($_post['email']);
	$studentObj->setAddress($_post['address']);
  $studentObj->setGender($_post['gender']);
  $studentObj->setClass($_post['class_name']);
	$student_id = $studentObj->create();
	if(!empty($student_id)){
		$json['msg'] = 'success';
		$json['student_id'] = $student_id;
	} else {
		$json['msg'] = 'failed';
		$json['student_id'] = '';
	}

  $studentObj->setStudentID($student_id);
  $element = $studentObj->getStudent();
	header('Content-Type: application/json');
  echo '<tr id="record-'.$element['id'].'">
    <td>'.$element['roll_no'].'</td>
    <td>'.$element['name'].'</td>
    <td>'.$element['email'].'</td>
    <td>'.$element['address'].'</td>
    <td>'.$element['gender'].'</td>
    <td>'.$element['class_name'].'</td>
    <td>
      <a data-studentid="'.$element['id'].'" class="btn btn-outline-secondary btn-sm display-student"> View </a>  
      <a data-studentid="'.$element['id'].'" class="btn btn-outline-info btn-sm edit-student"> Edit </a>  
      <a data-studentid="'.$element['id'].'" class="btn btn-outline-danger btn-sm remove-student"> Delete</a>
    </td>
  </tr>';
}

// get all student records in database
if(!empty($_post['action']) && $_post['action']=="fetch_all_student") {
  // get student information
  $studentData = $studentObj->getList();
  header('Content-Type: application/json');
  echo json_encode($json['studentData']); 
}

// get student record in database
if(!empty($_post['action']) && $_post['action']=="fetch_student") {
	$studentObj->setStudentID($_post['student_id']);
	$json['fetchStudent'] = $studentObj->getStudent();
	header('Content-Type: application/json');
	echo json_encode($json['fetchStudent']); 
}

// update student record in database
if(!empty($_post['action']) && $_post['action']=="update") {
	$studentObj->setStudentID($_post['student_id']);
  $studentObj->setRollNo($_post['roll_no']);
	$studentObj->setName($_post['name']);
  $studentObj->setEmail($_post['email']);
  $studentObj->setAddress($_post['address']);
  $studentObj->setGender($_post['gender']);
  $studentObj->setClass($_post['class_name']);
	$status = $studentObj->update();
	if(!empty($status)){
		$json['msg'] = 'success';
	} else {
		$json['msg'] = 'failed';
	}
  $studentObj->setStudentID($_post['student_id']);
  $element = $studentObj->getStudent();

	header('Content-Type: application/json');	
  echo '<td>'.$element['roll_no'].'</td>
  <td>'.$element['name'].'</td>
  <td>'.$element['email'].'</td>
  <td>'.$element['address'].'</td>
  <td>'.$element['gender'].'</td>
  <td>'.$element['class_name'].'</td>
  <td>
    <a data-studentid="'.$element['id'].'" class="btn btn-outline-secondary btn-sm display-student"> View </a>  
    <a data-studentid="'.$element['id'].'" class="btn btn-outline-info btn-sm edit-student"> Edit </a>  
    <a data-studentid="'.$element['id'].'" class="btn btn-outline-danger btn-sm remove-student"> Delete</a>
  </td>';
}

// delete student record from database
if(!empty($_post['action']) && $_post['action']=="delete") {
	$studentObj->setStudentID($_post['student_id']);
	$status = $studentObj->delete();
	if(!empty($status)){
		$json['msg'] = 'success';
	} else {
		$json['msg'] = 'failed';
	}
	header('Content-Type: application/json');	
	echo json_encode($json);	
}
?>

100

101

102

103

104

105

<?php

// include class

include_once 'class/Student.php';

// object

$studentObj = new Student();

// post method

$_post = $_POST;

$json = array();

$studentInfo = array();

// create student record in database

if(!empty($_post['action']) && $_post['action']=="create") {

$studentObj->setRollNo($_post['roll_no']);

$studentObj->setName($_post['name']);

$studentObj->setEmail($_post['email']);

$studentObj->setAddress($_post['address']);

$studentObj->setGender($_post['gender']);

$studentObj->setClass($_post['class_name']);

$student_id = $studentObj->create();

if(!empty($student_id)){

$json['msg'] = 'success';

$json['student_id'] = $student_id;

} else {

$json['msg'] = 'failed';

$json['student_id'] = '';

}

$studentObj->setStudentID($student_id);

$element = $studentObj->getStudent();

header('Content-Type: application/json');

echo '<tr id="record-'.$element['id'].'">

<td>'.$element['roll_no'].'</td>

<td>'.$element['name'].'</td>

<td>'.$element['email'].'</td>

<td>'.$element['address'].'</td>

<td>'.$element['gender'].'</td>

<td>'.$element['class_name'].'</td>

<td>

<a data-studentid="'.$element['id'].'" class="btn btn-outline-danger btn-sm remove-student"> Delete</a>

</td>

</tr>';

}

// get all student records in database

if(!empty($_post['action']) && $_post['action']=="fetch_all_student") {

// get student information

$studentData = $studentObj->getList();

header('Content-Type: application/json');

echo json_encode($json['studentData']);

}

// get student record in database

if(!empty($_post['action']) && $_post['action']=="fetch_student") {

$studentObj->setStudentID($_post['student_id']);

$json['fetchStudent'] = $studentObj->getStudent();

header('Content-Type: application/json');

echo json_encode($json['fetchStudent']);

}

// update student record in database

if(!empty($_post['action']) && $_post['action']=="update") {

$studentObj->setStudentID($_post['student_id']);

$studentObj->setRollNo($_post['roll_no']);

$studentObj->setName($_post['name']);

$studentObj->setEmail($_post['email']);

$studentObj->setAddress($_post['address']);

$studentObj->setGender($_post['gender']);

$studentObj->setClass($_post['class_name']);

$status = $studentObj->update();

if(!empty($status)){

$json['msg'] = 'success';

} else {

$json['msg'] = 'failed';

}

$studentObj->setStudentID($_post['student_id']);

$element = $studentObj->getStudent();

header('Content-Type: application/json');

echo '<td>'.$element['roll_no'].'</td>

<td>'.$element['name'].'</td>

<td>'.$element['email'].'</td>

<td>'.$element['address'].'</td>

<td>'.$element['gender'].'</td>

<td>'.$element['class_name'].'</td>

<td>

<a data-studentid="'.$element['id'].'" class="btn btn-outline-danger btn-sm remove-student"> Delete</a>

</td>';

}

// delete student record from database

if(!empty($_post['action']) && $_post['action']=="delete") {

$studentObj->setStudentID($_post['student_id']);

$status = $studentObj->delete();

if(!empty($status)){

$json['msg'] = 'success';

} else {

$json['msg'] = 'failed';

}

header('Content-Type: application/json');

echo json_encode($json);

}

Step 5: Create index.php

<?php
include('templates/header.php');
// include class 
include_once 'class/Student.php';
// object
$studentObj = new Student();
$studentInfo = $studentObj->getList();
?>
<section class="showcase">
  <div class="container">
    <div class="pb-2 mt-4 mb-2 border-bottom">
      <h2>PHP CRUD Operations using jQuery, Ajax and MySQL</h2>
    </div>
      <div class="row align-items-center">
        <div class="col-md-12">
        	<a id="add-student" class="text-white btn btn-primary btn-sm float-right" style="margin-bottom: 5px;"> Add Student </a>
            <table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th width="10%">#Roll No</th>
						<th width="10%">Name</th>					
						<th width="10%">Email</th>
						<th width="25%">Address</th>
						<th width="10%">Gender</th>
						<th width="15%">Class</th>					
						<th width="20%">&nbsp;</th>				
					</tr>
				</thead>
				<tbody id="render-student">

				<?php foreach($studentInfo as $key=>$element) { ?>
			      <tr id="record-<?php print $element['id']; ?>">
			        <td><?php print $element['roll_no'] ?></td>
			        <td><?php print $element['name'] ?></td>
			        <td><?php print $element['email'] ?></td>
			        <td><?php print $element['address'] ?></td>
			        <td><?php print $element['gender'] ?></td>
			        <td><?php print $element['class_name'] ?></td>
			        <td><a data-studentid="<?php print $element['id'] ?>" class="btn btn-outline-secondary btn-sm display-student"> View </a>  
			        	<a data-studentid="<?php print $element['id'] ?>" class="btn btn-outline-info btn-sm edit-student"> Edit </a>  
			        	<a data-studentid="<?php print $element['id'] ?>" class="btn btn-outline-danger btn-sm remove-student"> Delete</a>
			        </td>
			      </tr> 
			  	<?php } ?>
			    </tbody>
			</table>
        </div>
      </div>
  </div>
</section>
<?php 
include('templates/footer.php');
include('modal/add.php');
include('modal/view.php');
?>

<?php

include('templates/header.php');

// include class

include_once 'class/Student.php';

// object

$studentObj = new Student();

$studentInfo = $studentObj->getList();

<h2>PHP CRUD Operations using jQuery, Ajax and MySQL</h2>

</div>

<a id="add-student" class="text-white btn btn-primary btn-sm float-right" style="margin-bottom: 5px;"> Add Student </a>

<thead>

<tr>

<th width="10%">Email</th>

<th width="25%">Address</th>

<th width="10%">Gender</th>

<th width="15%">Class</th>

</tr>

</thead>

<?php foreach($studentInfo as $key=>$element) { ?>

<td><a data-studentid="<?php print $element['id'] ?>" class="btn btn-outline-secondary btn-sm display-student"> View </a>

<a data-studentid="<?php print $element['id'] ?>" class="btn btn-outline-info btn-sm edit-student"> Edit </a>

<a data-studentid="<?php print $element['id'] ?>" class="btn btn-outline-danger btn-sm remove-student"> Delete</a>

</td>

</tr>

<?php } ?>

</tbody>

</table>

</div>

</section>

<?php

include('templates/footer.php');

include('modal/add.php');

include('modal/view.php');

Step 6 : Create and display Student record

add.php

<div class="modal" id="create-student" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <form class="form-horizontal" id="student-frm">
    <input type="hidden" name="action" id="action">    
    <input type="hidden" name="student_id" id="student_id">    
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"> Add Student</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <input type="text" name="roll_no" class="form-control input-roll-no" id="rollno" aria-describedby="rollnoHelp" placeholder="Roll No" required="required">
        </div>
        <div class="form-group">
            <input type="text" name="name" class="form-control input-name" id="name" aria-describedby="nameHelp" placeholder="Name" required="required">
        </div>
        <div class="form-group">
            <input type="email" name="email" class="form-control input-email" id="email" aria-describedby="emailHelp" placeholder="Email" required="required">
        </div>
        <div class="form-group">
            <div class="form-group">
            <input type="text" name="gender" class="form-control input-gender" id="gender" aria-describedby="genderHelp" placeholder="Gender" required="required">
        </div>
        </div>
        <div class="form-group">
            <input type="text" name="address" class="form-control input-address" id="address" aria-describedby="addressHelp" placeholder="Address" required="required">
        </div>
        <div class="form-group">
            <div class="form-group">
            <input type="text" name="class_name" class="form-control input-class" id="class-name" aria-describedby="classHelp" placeholder="Class" required="required">
        </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="student-btn">Add</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
    </form>
  </div>
</div>

<h5 class="modal-title"> Add Student</h5>

</button>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

</form>

</div>

view.php

<div class="modal" id="view-student" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"> Student Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <div class="card card-primary card-outline">
              <div class="card-body box-profile">
                <div class="text-center">
                  <img class="profile-user-img img-fluid img-circle" src="assets/images/user.png" height="130" width="130" alt="Student profile picture">
                </div>
                <h3 class="profile-username text-center" id="vs-name">Sdudent Name</h3>
                <p class="text-muted text-center" id="vs-email">sdudent@example.com</p>

                <ul class="list-group list-group-unbordered mb-3">
                  <li class="list-group-item">
                    <b>Roll No</b> <a class="float-right" id="vs-rollno">R0007</a>
                  </li>
                  <li class="list-group-item">
                    <b>Class</b> <a class="float-right" id="vs-class-name">1ST</a>
                  </li>
                  <li class="list-group-item">
                    <b>Gender</b> <a class="float-right" id="vs-gender">Female</a>
                  </li>
                  <li class="list-group-item">
                    <b>Address</b> <a class="float-right" id="vs-address">Delhi</a>
                  </li>
                </ul>
              </div>
              <!-- /.card-body -->
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<h5 class="modal-title"> Student Details</h5>

</button>

</div>

</div>

<h3 class="profile-username text-center" id="vs-name">Sdudent Name</h3>

<p class="text-muted text-center" id="vs-email">sdudent@example.com</p>

</li>

<b>Class</b> <a class="float-right" id="vs-class-name">1ST</a>

</li>

<b>Gender</b> <a class="float-right" id="vs-gender">Female</a>

</li>

<b>Address</b> <a class="float-right" id="vs-address">Delhi</a>

</li>

</ul>

</div>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

Step 7: Create JavaScript file

The following JavaScript code handles the CRUD request using jQuery and Ajax

/*
 ***
 Author: CodersMag Team
 Author URI: http://codersmag.com
 File Name : ajax.js
 *** 
 */
 
jQuery(document).ready(function() {
	jQuery(document).on('click', '#add-student', function() {
		jQuery('#create-student').modal('show');
		jQuery('#student-frm')[0].reset();
		jQuery('.modal-title').html(" Add Student");
		jQuery('#action').val('create');
		jQuery('#student_id').val('');
		jQuery('#student-btn').text('Add');
	});		

	jQuery(document).on('click', '.edit-student', function(){
		var student_id = jQuery(this).data("studentid");
		var action = 'fetch_student';
		jQuery.ajax({
			url:'action.php',
			method:"POST",
			data:{student_id:student_id, action:action},
			dataType:"json",
			success:function(json) {
				jQuery('#create-student').modal('show');
				jQuery('#action').val('update');
				jQuery('#student_id').val(json.id);
				jQuery('#rollno').val(json.roll_no);
				jQuery('#name').val(json.name);
				jQuery('#email').val(json.email);
				jQuery('#gender').val(json.gender);				
				jQuery('#class-name').val(json.class_name);
				jQuery('#address').val(json.address);	
				jQuery('.modal-title').html(" Edit Student");
				jQuery('#student-btn').text('Update');
			}
		})
	});

	jQuery(document).on('click', '.display-student', function(){
		var student_id = jQuery(this).data("studentid");
		var action = 'fetch_student';
		jQuery.ajax({
			url:'action.php',
			method:"POST",
			data:{student_id:student_id, action:action},
			dataType:"json",
			success:function(json){
				jQuery('#view-student').modal('show');
				jQuery('#vs-rollno').text(json.roll_no);
				jQuery('#vs-name').text(json.name);
				jQuery('#vs-email').text(json.email);
				jQuery('#vs-gender').text(json.gender);				
				jQuery('#vs-class-name').text(json.class_name);
				jQuery('#vs-address').text(json.address);
			}
		})
	});

	// create/update 
	jQuery(document).on('click','button#student-btn', function(e){
		e.preventDefault();
		var formData = jQuery('form#student-frm').serialize();
		var student_id = jQuery('input#student_id').val();
		if(student_id){
			var action = 'update';
		} else {
			var action = 'create';
		}
		jQuery.ajax({
			url:"action.php",
			method:"POST",
			data:formData,
			dataType:"html",
			 beforeSend: function () {
	            jQuery('button#student-btn').button('loading');
	        },
	        complete: function () {
	            jQuery('button#student-btn').button('reset');
	            jQuery('#student-frm')[0].reset();
	            jQuery('#create-student').modal('hide');
	        }, 
			success:function(html) {		
				if(student_id) {
					jQuery("#record-"+student_id).html(html).fadeIn('slow');
				} else {
					jQuery("#render-student").prepend(html).fadeIn('slow');
				}
			}
		})
	});	

	jQuery(document).on('click', '.remove-student', function(){
		var student_id = jQuery(this).data("studentid");	
		var action = "delete";
		if(confirm("Are you sure you want to delete this student?")) {
			jQuery.ajax({
				url:"action.php",
				method:"POST",
				dataType:"json",
				data:{student_id:student_id, action:action},
				success:function(data) {					
					jQuery("#record-"+student_id).empty('');
				}
			})
		} else {
			return false;
		}
	});	
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

***

Author: CodersMag Team

Author URI: http://codersmag.com

File Name : ajax.js

***

jQuery(document).ready(function() {

jQuery(document).on('click', '#add-student', function() {

jQuery('#create-student').modal('show');

jQuery('#student-frm')[0].reset();

jQuery('.modal-title').html(" Add Student");

jQuery('#action').val('create');

jQuery('#student_id').val('');

jQuery('#student-btn').text('Add');

});

jQuery(document).on('click', '.edit-student', function(){

var student_id = jQuery(this).data("studentid");

var action = 'fetch_student';

jQuery.ajax({

url:'action.php',

method:"POST",

data:{student_id:student_id, action:action},

dataType:"json",

success:function(json) {

jQuery('#create-student').modal('show');

jQuery('#action').val('update');

jQuery('#student_id').val(json.id);

jQuery('#rollno').val(json.roll_no);

jQuery('#name').val(json.name);

jQuery('#email').val(json.email);

jQuery('#gender').val(json.gender);

jQuery('#class-name').val(json.class_name);

jQuery('#address').val(json.address);

jQuery('.modal-title').html(" Edit Student");

jQuery('#student-btn').text('Update');

}

})

});

jQuery(document).on('click', '.display-student', function(){

var student_id = jQuery(this).data("studentid");

var action = 'fetch_student';

jQuery.ajax({

url:'action.php',

method:"POST",

data:{student_id:student_id, action:action},

dataType:"json",

success:function(json){

jQuery('#view-student').modal('show');

jQuery('#vs-rollno').text(json.roll_no);

jQuery('#vs-name').text(json.name);

jQuery('#vs-email').text(json.email);

jQuery('#vs-gender').text(json.gender);

jQuery('#vs-class-name').text(json.class_name);

jQuery('#vs-address').text(json.address);

}

})

});

// create/update

jQuery(document).on('click','button#student-btn', function(e){

e.preventDefault();

var formData = jQuery('form#student-frm').serialize();

var student_id = jQuery('input#student_id').val();

if(student_id){

var action = 'update';

} else {

var action = 'create';

}

jQuery.ajax({

url:"action.php",

method:"POST",

data:formData,

dataType:"html",

beforeSend: function () {

jQuery('button#student-btn').button('loading');

complete: function () {

jQuery('button#student-btn').button('reset');

jQuery('#student-frm')[0].reset();

jQuery('#create-student').modal('hide');

success:function(html) {

if(student_id) {

jQuery("#record-"+student_id).html(html).fadeIn('slow');

} else {

jQuery("#render-student").prepend(html).fadeIn('slow');

}

})

});

jQuery(document).on('click', '.remove-student', function(){

var student_id = jQuery(this).data("studentid");

var action = "delete";

if(confirm("Are you sure you want to delete this student?")) {

jQuery.ajax({

url:"action.php",

method:"POST",

dataType:"json",

data:{student_id:student_id, action:action},

success:function(data) {

jQuery("#record-"+student_id).empty('');

}

})

} else {

return false;

}

});

Step 8: Create header (header.php)

This view contains the header section of the webpage. The Bootstrap library is used to provide a better UI, so, include it in the header section.

Located at the top of a website, the header typically contains elements that include a company’s logo, website navigation, and contact information.

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="canonical" href="https://www.codersmag.com/" />
  <meta name="author" content="CodersMag">  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" type="image/ico" href="https://codersmag.com/demos/ci/assets/images/favicon.ico">
  <title>PHP CRUD Operations using jQuery, Ajax and MySQL | Coders Mag</title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
  <!-- Custom fonts for this template -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <!-- Custom styles for this template -->
  <link href="assets/css/style.css" rel="stylesheet"> 
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top header-bg-dark" style="background: ##FFFFFF!;">
  <div class="container">
    <a class="navbar-brand font-weight-bold" href="https://codersmag.com/"><h1>Coders Mag</h1></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="https://codersmag.com/">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://codersmag.com/php-script-demos/">LIVE DEMO</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!DOCTYPE html>

<head>

<title>PHP CRUD Operations using jQuery, Ajax and MySQL | Coders Mag</title>

</head>

<body>

<a class="navbar-brand font-weight-bold" href="https://codersmag.com/"><h1>Coders Mag</h1></a>

</button>

<a class="nav-link" href="https://codersmag.com/">Home

<span class="sr-only">(current)</span>

</a>

</li>

</li>

</ul>

</div>

</nav>

Step 9: Create a view file named footer.php

This view contains the footer section of the webpage.

jQuery – needed by Bootstrap JavaScript.
Bootstrap JavaScript – to make cool UI

<!-- Footer -->
  <footer class="footer bg-light footer-bg-dark">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
          <ul class="list-inline mb-2">
            <li class="list-inline-item">
              <a href="#">About</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Contact</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Terms of Use</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Privacy Policy</a>
            </li>
          </ul>
          <p class="small mb-4 mb-lg-0" style="color: #E6ECF0;">Copyright &copy;  2017 - <?php print date('Y', time());?> <a style="color: #E6ECF0;" href="https://codersmag.com/">CODERSMAG.COM</a> All rights reserved.</p>
        </div>
        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
          <ul class="list-inline mb-0">
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-facebook fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-twitter-square fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <i class="fab fa-instagram fa-2x fa-fw"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
  <!-- Bootstrap core JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/ajax.js"></script>
</body>
</html>

<a href="#">About</a>

</li>

<a href="#">Contact</a>

</li>

<a href="#">Terms of Use</a>

</li>

<a href="#">Privacy Policy</a>

</li>

</ul>

<p class="small mb-4 mb-lg-0" style="color: #E6ECF0;">Copyright © 2017 - <?php print date('Y', time());?> <a style="color: #E6ECF0;" href="https://codersmag.com/">CODERSMAG.COM</a> All rights reserved.</p>

</div>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

</footer>

</body>

</html>

Also Read : Pagination Using CodeIgniter and MySQL

Demo Download