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