Codeigniter 4 CRUD Operation With Ajax Example

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/

CRUD Operation using Nodejs and ReactJs

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">&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>

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

1http://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

Login Signup with Laravel

Bill Invoice System in Laravel

Laravel Dependent Dropdown Tutorial With Example

Leave a Reply

Your email address will not be published. Required fields are marked *