Codeigniter 4 CRUD Operation With Ajax Example

April 7, 2020 XpertPhp Comments 0 Comment

In this article, We will inform you how to perform crud operation with ajax in CodeIgniter 4(Codeigniter 4 CRUD Operation With Ajax Example).
CRUD stands for create, read, update, and delete. if you create a user-friendly website at that time need to crud operation.

if you want to create CRUD operation with ajax in CodeIgniter 4, then the first configuration of the database and connect the MySQL database then after creating CRUD operation with ajax in Codeigniter 4.

in our post through, We will go how to connect CodeIgniter 4 to MySQL and perform the CRUD operation.

if you want to create CRUD operation in CodeIgniter 4, so you can follow the below steps.
Overview
Step 1: Download Codeigniter
Step 2: Basic Configurations
Step 3: Create a Database in table
Step 4: Connect to Database
Step 5: Create Controller and Model
Step 6: Create Views Files
Step 7: Run The Application

Step 1: Download Codeigniter
If you want to download or install CodeIgniter 4 then you can below Url.
How To Install Codeigniter 4 Using Manual, Composer, Git

Step 2: Basic Configurations
If you want to Basic Configurations in your project then you can below Url.
Codeigniter 4 Removing Index.Php From Url

Step 3: Create a Database in table
In this step, We will create the database and table.

CREATE TABLE IF NOT EXISTS `students` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(64) NOT NULL,
  `last_name` varchar(64) NOT NULL,
  `address` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

CREATE TABLE IF NOT EXISTS `students` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`first_name` varchar(64) NOT NULL,

`last_name` varchar(64) NOT NULL,

`address` text NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

Step 4: Connect to Database
Go to the “app/Config/Database.php” folder and open database.php file some changes in this file like hostname, database username, database password, and database name.

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'codeigniter4_crud',
		'DBDriver' => 'MySQLi',
		'DBPrefix' => '',
		'pConnect' => false,
		'DBDebug'  => (ENVIRONMENT !== 'production'),
		'cacheOn'  => false,
		'cacheDir' => '',
		'charset'  => 'utf8',
		'DBCollat' => 'utf8_general_ci',
		'swapPre'  => '',
		'encrypt'  => false,
		'compress' => false,
		'strictOn' => false,
		'failover' => [],
		'port'     => 3306,
	];

public $default = [

'DSN' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'codeigniter4_crud',

'DBDriver' => 'MySQLi',

'DBPrefix' => '',

'pConnect' => false,

'DBDebug' => (ENVIRONMENT !== 'production'),

'cacheOn' => false,

'cacheDir' => '',

'charset' => 'utf8',

'DBCollat' => 'utf8_general_ci',

'swapPre' => '',

'encrypt' => false,

'compress' => false,

'strictOn' => false,

'failover' => [],

'port' => 3306,

];

Step 5: Create Controller and Model
In this step, we will a create “Student.php” controller and “StudentModel.php” model.
app/Controllers/Student.php

<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\StudentModel;
 
class Student extends Controller
{
 
    public function index()
    {    
        $model = new StudentModel();
 
        $data['students_detail'] = $model->orderBy('id', 'DESC')->findAll();
        
        return view('list', $data);
    }    

 
    public function store()
    {  
        helper(['form', 'url']);
         
        $model = new StudentModel();
		
        $data = [
            'first_name' => $this->request->getVar('txtFirstName'),
            'last_name'  => $this->request->getVar('txtLastName'),
            'address'  => $this->request->getVar('txtAddress'),
            ];
        $save = $model->insert_data($data);
		if($save != false)
		{
			$data = $model->where('id', $save)->first();
			echo json_encode(array("status" => true , 'data' => $data));
		}
		else{
			echo json_encode(array("status" => false , 'data' => $data));
		}
    }
 
    public function edit($id = null)
    {
      
     $model = new StudentModel();
	
     $data = $model->where('id', $id)->first();
	 
    if($data){
			echo json_encode(array("status" => true , 'data' => $data));
		}else{
			echo json_encode(array("status" => false));
		}
    }
 
    public function update()
    {  
 
		helper(['form', 'url']);
		 
		$model = new StudentModel();

		$id = $this->request->getVar('hdnStudentId');

		 $data = [
			'first_name' => $this->request->getVar('txtFirstName'),
			'last_name'  => $this->request->getVar('txtLastName'),
			'address'  => $this->request->getVar('txtAddress'),
			];

		$update = $model->update($id,$data);
		if($update != false)
		{
			$data = $model->where('id', $id)->first();
			echo json_encode(array("status" => true , 'data' => $data));
		}
		else{
			echo json_encode(array("status" => false , 'data' => $data));
		}
    }
 
    public function delete($id = null){
		$model = new StudentModel();
		$delete = $model->where('id', $id)->delete();
		if($delete)
		{
		   echo json_encode(array("status" => true));
		}else{
		   echo json_encode(array("status" => false));
		}
    }
}

?>

<?php namespace App\Controllers;

use CodeIgniter\Controller;

use App\Models\StudentModel;

class Student extends Controller

{

public function index()

{

$model = new StudentModel();

$data['students_detail'] = $model->orderBy('id', 'DESC')->findAll();

return view('list', $data);

}

public function store()

{

helper(['form', 'url']);

$model = new StudentModel();

$data = [

'first_name' => $this->request->getVar('txtFirstName'),

'last_name' => $this->request->getVar('txtLastName'),

'address' => $this->request->getVar('txtAddress'),

];

$save = $model->insert_data($data);

if($save != false)

{

$data = $model->where('id', $save)->first();

echo json_encode(array("status" => true , 'data' => $data));

}

else{

echo json_encode(array("status" => false , 'data' => $data));

}

public function edit($id = null)

{

$model = new StudentModel();

$data = $model->where('id', $id)->first();

if($data){

echo json_encode(array("status" => true , 'data' => $data));

}else{

echo json_encode(array("status" => false));

}

public function update()

{

helper(['form', 'url']);

$model = new StudentModel();

$id = $this->request->getVar('hdnStudentId');

$data = [

'first_name' => $this->request->getVar('txtFirstName'),

'last_name' => $this->request->getVar('txtLastName'),

'address' => $this->request->getVar('txtAddress'),

];

$update = $model->update($id,$data);

if($update != false)

{

$data = $model->where('id', $id)->first();

echo json_encode(array("status" => true , 'data' => $data));

}

else{

echo json_encode(array("status" => false , 'data' => $data));

}

public function delete($id = null){

$model = new StudentModel();

$delete = $model->where('id', $id)->delete();

if($delete)

{

echo json_encode(array("status" => true));

}else{

echo json_encode(array("status" => false));

}

app/Models/StudentModel.php

<?php namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;
 
class StudentModel extends Model
{
    protected $table = 'Students';
 
    protected $allowedFields = ['first_name','last_name','address'];
	
	public function __construct() {
        parent::__construct();
        //$this->load->database();
        $db = \Config\Database::connect();
        $builder = $db->table('Students');
    }
	
	public function insert_data($data) {
		if($this->db->table($this->table)->insert($data))
        {
            return $this->db->insertID();
        }
        else
        {
            return false;
        }
    }
}
?>

<?php namespace App\Models;

use CodeIgniter\Database\ConnectionInterface;

use CodeIgniter\Model;

class StudentModel extends Model

{

protected $table = 'Students';

protected $allowedFields = ['first_name','last_name','address'];

public function __construct() {

parent::__construct();

//$this->load->database();

$db = \Config\Database::connect();

$builder = $db->table('Students');

}

public function insert_data($data) {

if($this->db->table($this->table)->insert($data))

{

return $this->db->insertID();

}

else

{

return false;

}

Step 6: Create Views Files
Finally, we will create the list.php, add.php, and edit.php in the app/views directory.
app/views/list.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Codeigniter 4 CRUD Operation With Ajax Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-11">
            <h2>Codeigniter 4 Ajax CRUD Example</h2>
        </div>
        <div class="col-lg-1">
            <a class="btn btn-success" href="#" data-toggle="modal" data-target="#addModal">Add</a>
        </div>
    </div>

    <table class="table table-bordered" id="studentTable">
		<thead>
			<tr>
				<th>id</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Address</th>
				<th width="280px">Action</th>
			</tr>
		</thead>	
		<tbody>
       <?php
		foreach($students_detail as $row){
		?>
		<tr id="<?php echo $row['id']; ?>">
			<td><?php echo $row['id']; ?></td>
			<td><?php echo $row['first_name']; ?></td>
			<td><?php echo $row['last_name']; ?></td>
			<td><?php echo $row['address']; ?></td>
			<td>
			<a data-id="<?php echo $row['id']; ?>" class="btn btn-primary btnEdit">Edit</a>
			<a data-id="<?php echo $row['id']; ?>" class="btn btn-danger btnDelete">Delete</a>
			</td>
		</tr>
	<?php
}
?>
	</tbody>
</table>
		<!-- Add Student Modal -->
		<div id="addModal" class="modal fade" role="dialog">
		  <div class="modal-dialog">
		 
			<!-- User Student content-->
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Add New Student</h4>
			  </div>
			  <div class="modal-body">
				<form id="addStudent" name="addStudent" action="<?php echo site_url('student/store');?>" method="post">
					<div class="form-group">
						<label for="txtFirstName">First Name:</label>
						<input type="text" class="form-control" id="txtFirstName" placeholder="Enter First Name" name="txtFirstName">
					</div>
					<div class="form-group">
						<label for="txtLastName">Last Name:</label>
						<input type="text" class="form-control" id="txtLastName" placeholder="Enter Last Name" name="txtLastName">
					</div>
					<div class="form-group">
						<label for="txtAddress">Address:</label>
						<textarea class="form-control" id="txtAddress" name="txtAddress" rows="10" placeholder="Enter Address"></textarea>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			  </div>
			</div>
		  </div>
		</div>	
		<!-- Update User Modal -->
		<div id="updateModal" class="modal fade" role="dialog">
		  <div class="modal-dialog">
		 
			<!-- User Modal content-->
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Update Student</h4>
			  </div>
			  <div class="modal-body">
				<form id="updateStudent" name="updateStudent" action="<?php echo site_url('student/update');?>" method="post">
					<input type="hidden" name="hdnStudentId" id="hdnStudentId"/>
					<div class="form-group">
						<label for="txtFirstName">First Name:</label>
						<input type="text" class="form-control" id="txtFirstName" placeholder="Enter First Name" name="txtFirstName">
					</div>
					<div class="form-group">
						<label for="txtLastName">Last Name:</label>
						<input type="text" class="form-control" id="txtLastName" placeholder="Enter Last Name" name="txtLastName">
					</div>
					<div class="form-group">
						<label for="txtAddress">Address:</label>
						<textarea class="form-control" id="txtAddress" name="txtAddress" rows="10" placeholder="Enter Address"></textarea>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			  </div>
			</div>
		  </div>
		</div>	 
		<script>
		  $(document).ready(function () {
			//Add the Student  
			$("#addStudent").validate({
				 rules: {
						txtFirstName: "required",
						txtLastName: "required",
						txtAddress: "required"
					},
					messages: {
					},
		 
				 submitHandler: function(form) {
				  var form_action = $("#addStudent").attr("action");
				  $.ajax({
					  data: $('#addStudent').serialize(),
					  url: form_action,
					  type: "POST",
					  dataType: 'json',
					  success: function (res) {
						  var student = '<tr id="'+res.data.id+'">';
						  student += '<td>' + res.data.id + '</td>';
						  student += '<td>' + res.data.first_name + '</td>';
						  student += '<td>' + res.data.last_name + '</td>';
						  student += '<td>' + res.data.address + '</td>';
						  student += '<td><a data-id="' + res.data.id + '" class="btn btn-primary btnEdit">Edit</a>&nbsp;&nbsp;<a data-id="' + res.data.id + '" class="btn btn-danger btnDelete">Delete</a></td>';
						  student += '</tr>';            
						  $('#studentTable tbody').prepend(student);
						  $('#addStudent')[0].reset();
						  $('#addModal').modal('hide');
					  },
					  error: function (data) {
					  }
				  });
				}
			});
		  
		 
			//When click edit Student
			$('body').on('click', '.btnEdit', function () {
			  var student_id = $(this).attr('data-id');
			   $.ajax({
					  url: 'student/edit/'+student_id,
					  type: "GET",
					  dataType: 'json',
					  success: function (res) {
						  $('#updateModal').modal('show');
						  $('#updateStudent #hdnStudentId').val(res.data.id); 
						  $('#updateStudent #txtFirstName').val(res.data.first_name);
						  $('#updateStudent #txtLastName').val(res.data.last_name);
						  $('#updateStudent #txtAddress').val(res.data.address);
					  },
					  error: function (data) {
					  }
				});
		   });
			// Update the Student
			$("#updateStudent").validate({
				 rules: {
						txtFirstName: "required",
						txtLastName: "required",
						txtAddress: "required"
					},
					messages: {
					},
				 submitHandler: function(form) {
				  var form_action = $("#updateStudent").attr("action");
				  $.ajax({
					  data: $('#updateStudent').serialize(),
					  url: form_action,
					  type: "POST",
					  dataType: 'json',
					  success: function (res) {
						  var student = '<td>' + res.data.id + '</td>';
						  student += '<td>' + res.data.first_name + '</td>';
						  student += '<td>' + res.data.last_name + '</td>';
						  student += '<td>' + res.data.address + '</td>';
						  student += '<td><a data-id="' + res.data.id + '" class="btn btn-primary btnEdit">Edit</a>&nbsp;&nbsp;<a data-id="' + res.data.id + '" class="btn btn-danger btnDelete">Delete</a></td>';
						  $('#studentTable tbody #'+ res.data.id).html(student);
						  $('#updateStudent')[0].reset();
						  $('#updateModal').modal('hide');
					  },
					  error: function (data) {
					  }
				  });
				}
			});		
				
		   //delete student
			$('body').on('click', '.btnDelete', function () {
			  var student_id = $(this).attr('data-id');
			  $.get('student/delete/'+student_id, function (data) {
				  $('#studentTable tbody #'+ student_id).remove();
			  })
		   });	
			
		});	  
	</script>
</div>
</body>
</html>

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

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

<!DOCTYPE html>

<head>

<title>Codeigniter 4 CRUD Operation With Ajax Example</title>

</head>

<body>

<h2>Codeigniter 4 Ajax CRUD Example</h2>

</div>

</div>

<thead>

<tr>

<th>First Name</th>

<th>Address</th>

<th width="280px">Action</th>

</tr>

</thead>

<tbody>

<?php

foreach($students_detail as $row){

<td>

<a data-id="<?php echo $row['id']; ?>" class="btn btn-primary btnEdit">Edit</a>

<a data-id="<?php echo $row['id']; ?>" class="btn btn-danger btnDelete">Delete</a>

</td>

</tr>

<?php

}

</tbody>

</table>

<h4 class="modal-title">Add New Student</h4>

</div>

<form id="addStudent" name="addStudent" action="<?php echo site_url('student/store');?>" method="post">

<label for="txtFirstName">First Name:</label>

</div>

</div>

<label for="txtAddress">Address:</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

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

</div>

<h4 class="modal-title">Update Student</h4>

</div>

<form id="updateStudent" name="updateStudent" action="<?php echo site_url('student/update');?>" method="post">

<label for="txtFirstName">First Name:</label>

</div>

</div>

<label for="txtAddress">Address:</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

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

</div>

$(document).ready(function () {

//Add the Student

$("#addStudent").validate({

rules: {

txtFirstName: "required",

txtLastName: "required",

txtAddress: "required"

messages: {

submitHandler: function(form) {

var form_action = $("#addStudent").attr("action");

$.ajax({

data: $('#addStudent').serialize(),

url: form_action,

type: "POST",

dataType: 'json',

success: function (res) {

var student = '<tr id="'+res.data.id+'">';

student += '<td>' + res.data.id + '</td>';

student += '<td>' + res.data.first_name + '</td>';

student += '<td>' + res.data.last_name + '</td>';

student += '<td>' + res.data.address + '</td>';

student += '<td><a data-id="' + res.data.id + '" class="btn btn-primary btnEdit">Edit</a>  <a data-id="' + res.data.id + '" class="btn btn-danger btnDelete">Delete</a></td>';

student += '</tr>';

$('#studentTable tbody').prepend(student);

$('#addStudent')[0].reset();

$('#addModal').modal('hide');

error: function (data) {

}

});

}

});

//When click edit Student

$('body').on('click', '.btnEdit', function () {

var student_id = $(this).attr('data-id');

$.ajax({

url: 'student/edit/'+student_id,

type: "GET",

dataType: 'json',

success: function (res) {

$('#updateModal').modal('show');

$('#updateStudent #hdnStudentId').val(res.data.id);

$('#updateStudent #txtFirstName').val(res.data.first_name);

$('#updateStudent #txtLastName').val(res.data.last_name);

$('#updateStudent #txtAddress').val(res.data.address);

error: function (data) {

}

});

// Update the Student

$("#updateStudent").validate({

rules: {

txtFirstName: "required",

txtLastName: "required",

txtAddress: "required"

messages: {

submitHandler: function(form) {

var form_action = $("#updateStudent").attr("action");

$.ajax({

data: $('#updateStudent').serialize(),

url: form_action,

type: "POST",

dataType: 'json',

success: function (res) {

var student = '<td>' + res.data.id + '</td>';

student += '<td>' + res.data.first_name + '</td>';

student += '<td>' + res.data.last_name + '</td>';

student += '<td>' + res.data.address + '</td>';

student += '<td><a data-id="' + res.data.id + '" class="btn btn-primary btnEdit">Edit</a>  <a data-id="' + res.data.id + '" class="btn btn-danger btnDelete">Delete</a></td>';

$('#studentTable tbody #'+ res.data.id).html(student);

$('#updateStudent')[0].reset();

$('#updateModal').modal('hide');

error: function (data) {

}

});

}

});

//delete student

$('body').on('click', '.btnDelete', function () {

var student_id = $(this).attr('data-id');

$.get('student/delete/'+student_id, function (data) {

$('#studentTable tbody #'+ student_id).remove();

})

});

</script>

</div>

</body>

</html>

Step 7: Run The Application
Now we will run our example using the below Url in the browser.

http://localhost/codeigniter4_ajax_crud/student

1	http://localhost/codeigniter4_ajax_crud/student

We think would you like this article, so you can click on the “Download” button and you can download this demo article.

Download

Please follow and like us:

Related posts: