Dear Reader, let us we know that “How to Create CURD Operation in Codeigniter with AJAX and Bootstrap, Model and MYSQL“ Using Datatable So in this Tutorial We Learn Step By Step How to Create CURD Operation in Codeigniter with AJAX, Bootstrap, Model and MYSQL Process.
CRUD means four basic operations Create, Read, Update and Delete performed on the database.In SQL(Structured) CRUD represents as INSERT (Create), SELECT (Read), UPDATE (Update) and DELETE (Delete) commands.
In this tutorial, we Create CURD Operation using Header and Footer, if you did not create Header/Footer yet and want to create Header/Footer then don’t worry you need to read this post first.
How to Create Header/Footer and Navigation in Codeigniter
First, we see some Snapshots(Forms) for our CURD Operation
> For view All Mobiles we used bellow snapshot
> For add Mobile we used bellow snapshot
> For edit Mobile we used bellow snapshot
> For delete Mobile we used bellow snapshot
Step 1:- First of all, you need to create the database for our project.
Step 2:- Now create a table mobiles using the below SQL code
1 2 3 4 5 6 7 8 |
CREATE TABLE `mobiles` ( `id` int(11) NOT NULL, `model_no` varchar(30) NOT NULL, `mobile_name` varchar(30) NOT NULL, `company` varchar(40) NOT NULL, `mobile_category` text NOT NULL, `created_date` date NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
Step:3 Now dump some data for table “mobiles” using bellow SQL code
1 2 3 4 5 6 7 8 9 |
INSERT INTO `mobiles` (`id`, `model_no`, `mobile_name`, `company`, `mobile_category`, `created_date`) VALUES (13, 'SM-G615FZKUINS', 'Samsung Galaxy On Max (Black, ', 'Samsung', 'Smartphones', '0000-00-00'), (14, ' SM-G955FZKGINS', 'Samsung Galaxy S8 Plus (Midnig', 'Samsung', 'Smartphones', '0000-00-00'), (15, 'MN0X2HN/A', 'Apple iPhone 6s (Silver, 32 GB', 'Apple', 'Smartphones', '0000-00-00'), (16, 'MQ8E2HN/A', 'Apple iPhone 8 Plus (Silver, 6', 'Apple', 'Smartphones', '0000-00-00'), (17, ' R1 R829', 'OPPO R1 R829 (Black, 16 GB) (', 'OPPO', 'Smartphones', '0000-00-00'), (18, 'F1', 'OPPO F1 (Gold, 16 GB) (3 GB R', 'OPPO', 'Smartphones', '0000-00-00'), (19, 'MZB5602IN', 'Redmi 4A (Gold, 32 GB) (3 GB ', 'Xiomi', 'Smartphones', '0000-00-00'), (20, 'MZB5653IN', 'Mi A1', 'Xiomi', 'Smartphones', '0000-00-00'); |
Step:- 4 First we will see our controller, so create a Mobiles Controller in your CI application.
First, create a constructor in__construct()
this we will load our necessary libraries.
1 2 3 4 5 6 |
public function __construct() { parent::__construct(); $this->load->helper('url'); $this->load->model('mobile'); } |
1 2 3 4 5 6 7 |
public function index() { $data['mobiles']=$this->mobile->get_all_mobiles(); $data['mobiles']=$this->mobile->get_all_mobiles(); $this->load->view('users/header'); $this->load->view('users/mobiles',$data); $this->load->view('users/footer'); } |
Mobile_add()
in this function we will insert a new mobile into the MySQL database.
1 2 3 4 5 6 7 8 9 |
public function mobile_add() { $data = array( 'model_no' => $this->input->post('model_no'), 'mobile_name' => $this->input->post('mobile_name'), 'company' => $this->input->post('company'), 'mobile_category' => $this->input->post('mobile_category'), ); $insert = $this->mobile->mobile_add($data); echo json_encode(array("status" => TRUE)); } |
Ajax_edit()
, in this function we will get the data of the mobile with respect to its id into the Bootstrap model box.
1 2 3 4 5 |
public function ajax_edit($id) { $data = $this->mobile->get_by_id($id); echo json_encode($data); } |
Mobile_update()
, In this function, we will update the values of the mobile, which we edited.
1 2 3 4 5 6 7 8 9 |
public function mobile_update() { $data = array( 'model_no' => $this->input->post('model_no'), 'mobile_name' => $this->input->post('mobile_name'), 'company' => $this->input->post('company'), 'mobile_category' => $this->input->post('mobile_category'), ); $this->mobile->mobile_update(array('id' => $this->input->post('mobile_id')), $data); echo json_encode(array("status" => TRUE)); } |
Mobile_delete
This method is used to delete the mobile.
1 2 3 4 5 |
public function mobile_delete($id) { $this->mobile->delete_by_id($id); echo json_encode(array("status" => TRUE)); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); //This is the Controller for codeigniter crud using ajax application. class Mobiles extends CI_Controller { /** * Index Page for this controller. * * Maps to the following URL * http://example.com/index.php/welcome * - or - * http://example.com/index.php/welcome/index * - or - * Since this controller is set as the default controller in * config/routes.php, it's displayed at http://example.com/ * * So any other public methods not prefixed with an underscore will * map to /index.php/welcome/<method_name> * @see https://codeigniter.com/user_guide/general/urls.html */ public function __construct() { parent::__construct(); $this->load->helper('url'); $this->load->model('mobile'); } public function index() { $data['mobiles']=$this->mobile->get_all_mobiles(); $this->load->view('users/header'); $this->load->view('users/mobiles',$data); $this->load->view('users/footer'); } public function mobile_add() { $data = array( 'model_no' => $this->input->post('model_no'), 'mobile_name' => $this->input->post('mobile_name'), 'company' => $this->input->post('company'), 'mobile_category' => $this->input->post('mobile_category'), ); $insert = $this->mobile->mobile_add($data); echo json_encode(array("status" => TRUE)); } public function ajax_edit($id) { $data = $this->mobile->get_by_id($id); echo json_encode($data); } public function mobile_update() { $data = array( 'model_no' => $this->input->post('model_no'), 'mobile_name' => $this->input->post('mobile_name'), 'company' => $this->input->post('company'), 'mobile_category' => $this->input->post('mobile_category'), ); $this->mobile->mobile_update(array('id' => $this->input->post('mobile_id')), $data); echo json_encode(array("status" => TRUE)); } public function mobile_delete($id) { $this->mobile->delete_by_id($id); echo json_encode(array("status" => TRUE)); } } |
Step 11:- Now we see our Model, we need to first create a get_all_mobiles()
method in a model
1 2 3 4 5 6 |
public function get_all_mobiles() { $this->db->from('mobiles'); $query=$this->db->get(); return $query->result(); } |
get_by_id($id)
.method for fetching a single a mobile record we have to retrieve the mobile by its id
1 2 3 4 5 6 7 |
public function get_by_id($id) { $this->db->from($this->table); $this->db->where('id',$id); $query = $this->db->get(); return $query->row(); } |
mobile_add($data)
in a mobile model for insert a mobile into the database.
1 2 3 4 5 6 |
public function mobile_add($data) { //print_r($data); $this->db->insert($this->table, $data); return $this->db->insert_id(); } |
mobile_update($where, $data)
method for update a mobile record in the database, which takes 2 parameters one is $where
and the second is $data
1 2 3 4 5 |
public function mobile_update($where, $data) { $this->db->update($this->table, $data, $where); return $this->db->affected_rows(); } |
delete_by_id($id)
method for delete a mobile from the database
1 2 3 4 5 |
public function delete_by_id($id) { $this->db->where('id', $id); $this->db->delete($this->table); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); //This is the Book Model for CodeIgniter CRUD using Ajax Application. class Mobile extends CI_Model { var $table = 'mobiles'; public function __construct() { parent::__construct(); $this->load->database(); } public function get_all_mobiles() { $this->db->from('mobiles'); $query=$this->db->get(); return $query->result(); } public function get_by_id($id) { $this->db->from($this->table); $this->db->where('id',$id); $query = $this->db->get(); return $query->row(); } public function mobile_add($data) { //print_r($data); $this->db->insert($this->table, $data); return $this->db->insert_id(); } public function mobile_update($where, $data) { $this->db->update($this->table, $data, $where); return $this->db->affected_rows(); } public function delete_by_id($id) { $this->db->where('id', $id); $this->db->delete($this->table); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 220 221 222 223 224 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Learn CURD Operation On Web Preparations</title> <link href="<?php echo base_url('assets/css/bootstrap.min.css')?>" rel="stylesheet"> <link href="<?php echo base_url('assets/css/dataTables.bootstrap.css')?>" rel="stylesheet"> <link href="<?php echo base_url('assets/css/buttons.bootstrap.min.css')?>" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet"> <link rel="stylesheet" href="<?php echo base_url();?>assets/css/style.css"> </head> <body> <div class="container"> <h1>Learn CURD Operation in CodeIgniter Framework with AJAX and Bootstrap</h1> </center> <h3>Mobile Store</h3> <br /> <button class="btn btn-success" onclick="add_mobile()"><i class="glyphicon glyphicon-plus"></i> Add Mobile</button> <br /> <br /> <table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>Mobile Id</th> <th>Model No.</th> <th>Mobile Name</th> <th>Company</th> <th>Mobile Category</th> <th style="width:125px;">Action </p></th> </tr> </thead> <tbody> <?php foreach($mobiles as $mobile){?> <tr> <td><?php echo $mobile->id;?></td> <td><?php echo $mobile->model_no;?></td> <td><?php echo $mobile->mobile_name;?></td> <td><?php echo $mobile->company;?></td> <td><?php echo $mobile->mobile_category;?></td> <td> <button class="btn btn-warning" onclick="edit_mobile(<?php echo $mobile->id;?>)"><i class="glyphicon glyphicon-pencil"></i></button> <button class="btn btn-danger" onclick="delete_mobile(<?php echo $mobile->id;?>)"><i class="glyphicon glyphicon-remove"></i></button> </td> </tr> <?php }?> </tbody> <tfoot> <tr> <th>Mobile Id</th> <th>Model No.</th> <th>Mobile Name</th> <th>Company</th> <th>Mobile Category</th> <th>Action</th> </tr> </tfoot> </table> </div> <script src="<?php echo base_url('assets/js/jquery.min.js')?>"></script> <script src="<?php echo base_url('assets/js/bootstrap.min.js')?>"></script> <script src="<?php echo base_url('assets/js/jquery.dataTables.min.js')?>"></script> <script src="<?php echo base_url('assets/js/dataTables.bootstrap.js')?>"></script> <script type="text/javascript"> $(document).ready( function () { $('#table_id').DataTable(); } ); var save_method; //for save method string var table; function add_mobile() { save_method = 'add'; $('#form')[0].reset(); // reset form on modals $('#modal_form').modal('show'); // show bootstrap modal //$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title } function edit_mobile(id) { save_method = 'update'; $('#form')[0].reset(); // reset form on modals //Ajax Load data from ajax $.ajax({ url : "<?php echo site_url('mobiles/ajax_edit/')?>/" + id, type: "GET", dataType: "JSON", success: function(data) { $('[name="mobile_id"]').val(data.id); $('[name="model_no"]').val(data.model_no); $('[name="mobile_name"]').val(data.mobile_name); $('[name="company"]').val(data.company); $('[name="mobile_category"]').val(data.mobile_category); $('#modal_form').modal('show'); // show bootstrap modal when complete loaded $('.modal-title').text('Edit Mobile'); // Set title to Bootstrap modal title }, error: function (jqXHR, textStatus, errorThrown) { alert('Error get data from ajax'); } }); } function save() { var url; if(save_method == 'add') { url = "<?php echo site_url('mobiles/mobile_add')?>"; } else { url = "<?php echo site_url('mobiles/mobile_update')?>"; } // ajax adding data to database $.ajax({ url : url, type: "POST", data: $('#form').serialize(), dataType: "JSON", success: function(data) { //if success close modal and reload ajax table $('#modal_form').modal('hide'); location.reload();// for reload a page }, error: function (jqXHR, textStatus, errorThrown) { alert('Error adding / update data'); } }); } function delete_mobile(id) { if(confirm('Are you sure delete this data?')) { // ajax delete data from database $.ajax({ url : "<?php echo site_url('mobiles/mobile_delete')?>/"+id, type: "POST", dataType: "JSON", success: function(data) { location.reload(); }, error: function (jqXHR, textStatus, errorThrown) { alert('Error deleting data'); } }); } } </script> <!-- Bootstrap modal --> <div class="modal fade" id="modal_form" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h3 class="modal-title alert alert-info">Mobile Form</h3> </div> <div class="modal-body form"> <form action="#" id="form" class="form-horizontal"> <input type="hidden" value="" name="mobile_id"/> <div class="form-body"> <div class="form-group"> <label class="control-label col-md-3">Model No.</label> <div class="col-md-9"> <input name="model_no" placeholder="Model No." class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="control-label col-md-3">Mobile Name</label> <div class="col-md-9"> <input name="mobile_name" placeholder="Mobile Name" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="control-label col-md-3">Company</label> <div class="col-md-9"> <input name="company" placeholder="Company" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="control-label col-md-3">Mobile Category</label> <div class="col-md-9"> <input name="mobile_category" placeholder="Mobile Category" class="form-control" type="text"> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" id="btnSave" onclick="save()" class="btn btn-success">Save</button> <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!-- End Bootstrap modal --> </body> </html> |
Step 18:- In mobiles.php(view) we add some CSS and JS, so download assets folder here
extract zip file and copy assets folder and paste in your project’s root directory as we can see in below snapshot
Step 19:- Now for run your project open browser and type in URL like localhost/your_project_name/mobiles
like
localhost/ci_demo/mobiles
you can see the result as we can see in below snapshot
Congratulations you have successfully created CURD operation in Codeigniter using Ajax, Bootstrap, MySQL, and Datatables if this post was helpful for you then please share this post on social media and if you have any query then please contact us or comment below, Thanks