In this article, We will inform you how to perform crud operation with ajax in CodeIgniter 4.Codeigniter 4 CRUD Operation With Ajax Example
Learn CodeIgniter 4 from its official Website https://www.codeigniter.com/
In CI 4 We can make a good design with a secure CRUD Operation. if you want to create a 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.
Step 1: Create a Database in 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 ;
Step 2: Connect to Database
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 3: 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));
}
}
}
?>
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;
}
}
}
?>
Step 4: 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">×</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">×</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> <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 5: Run The Application
Now we will run our example using the below Url in the browser.
| 1 | http://localhost/codeigniter4_ajax_crud/student |
Subscribe to My Programming YouTube Channel Before Downloading the code :
See our More Articles
Netflix clone app using Laravel
Building an Image Gallery with Laravel and React