CRUD Datatables Server Side

Using Ignited Datatables

[COMPLETE TUTORIAL]
 FEBRUARY 09, 2018
 Ignited datatables is really awesome.

 If you want to make load millions record faster. You need to learn

how to use ignited databases.

 Let me tell you the story.

 Two years ago, I started getting to know datatables. Datatables is

really awesome.

 I have done many projects by using datatables. because simple,

easy, and include filter, show per-page, and pagination.

 I'm pretty sure you're familiar with datatables, that's why you're

reading this article.

 A few months ago, I worked on a Point Of Sale (POS) project using

datatables and codeigniter.

 It all running well at the first time, when product data has reached

12,000 records, problems arise. The data is loaded very slowly and

often does not respond (not responding) to the browser.

 Hmmm..,

 I'm sure you've also had the same problem.

 Confused with the problem, I almost decided not to use datatables

and switch to default pagination codeigniter and create a filter

manually.

 And then, I realized something. Apparently pagination default

codeigniter is process on the server (server-side processing).

 And then I start to surf on google about server-side processing with

datatables. Finally, I found a awesome library. it's ignited datatables.

 I try to use this library. It is proven to load data 12,000 records much

faster.

 Awesome right.

 Ignited-datatables is a library for creating server-side processing

datatables without need to write complex program code.

 Ignited-datatables is also easy for JOIN Table, number format, image

rendering, etc.

 How lucky you are finding this article. Because I will explore

thoroughly how to create CRUD (Create Read Update Delete)

server-side processing datatables from join table.

 Let’s get start it.

 Step 1. Preparation
 This is important!

 If you missed this step, it means you missed the whole of this tutorial.

 Good preparation will determine your success following this tutorial.

The better your preparation, the more likely you will succeed in

following this tutorial.

 Do not skip this step, though it feels complex.

 So, what do you need to prepare?

 Here’s the list:

 1. Codeiginter

 Codeigniter is the main php framework we will use in this tutorial. If

you do not have it yet, please download it at the official

website: www.codeigniter.com

 2. Jquery

 Jquery is a javascript framework that works to help simplify the

writing of AJAX-based scripts.

 If you do not have it yet, please download it first at the official

website: www.jquery.com

 3. Bootstrap

 Bootstrap is a framework to beautify the user interface (UI). If you do

not have it yet, please download it first at the official

website: www.getbootstrap.com

 4. Ignited-datatables

 This is library you need to download. You could download it on

github: https://github.com/IgnitedDatatables/Ignited-Datatables
 5. Datatables

 Datatables is a plugin built from jquery to display data in table form

and has integrated with filters, show per page, and pagination.

 To download datatables please download at following

link: https://datatables.net/download/index.

 6. Bootstrap Datatables

 Bootstrap datatables is useful to give style to datatable. To download

bootstrap datatables please download at following

link: https://datatables.net/manual/styling/bootstrap

 Step 2. Creating of database structures

 In this tutorial, I use mysql as Database Management System

(DBMS).

 If you also use mysql, you will love this tutorial.

 But,
  If you are using other DBMS like Oracle, SQL Server, Maria DB, or

MongoDB.

 No, Problem!

 Provided you understand SQL (Structured Query Language) better.

 Ok, Let's continue!

 Please create a database, here I create a database with

named crud_ignited.

 If you create a database with the same name it will be better.

 Please execute this query to create the database:

1 CREATE DATABASE crud_ignited;

 That query will generate a database with name crud_ignited.

 After that,

 Create a table with name categories by following this query:

1 CREATE TABLE categories(

2 category_id INT PRIMARY KEY AUTO_INCREMENT,

3 category_name VARCHAR(50)

4 )ENGINE INNODB;
  And then create one more table by following this query:

1
CREATE TABLE product(
2 product_code VARCHAR(10) PRIMARY KEY,
3 product_name VARCHAR(100),

4 product_price DOUBLE,

5 product_category_id INT,

FOREIGN KEY (product_category_id) REFERENCES categories (category_id) ON UPDATE CASCADE

6
)ENGINE INNODB;
7

 So that, we have two relational tables, categories and product.

 like this:

 After that,

 Insert a few record to categories table by following this query:

1 insert into categories(category_name)

2 values ('Drinks'),('Foods');


 Step 3. Setup Codeigniter

 Extract codeigniter that has been downloaded earlier to www folder

(if you use wampserver) or htdocs (if you use XAMPP).

 Because I use wampserver. So, I extract it to c:/wamp/www/

 And then, rename codeigniter project to be crud_serverside.

 Like this:

 Open crud_serverside folder and create assets folder. And then

include the bootstrap, jquery datatables, bootstrap datatables, and

jquery files inside the assets folder.

 So that look like this:



 Step 4. Codeigniter Configuration

 Next step is the configuration on the codeigniter.

 Here are some files you need to configure:

 1. Autoload.php

 To configure the autoload.php, please open the folder:

 application/config/autoload.php

 like this:
 

 Open autoload.php using text editor like Notepad++ or Sublime Text.

 And then find this code:

1 $autoload['libraries'] = array();

2 $autoload['helper'] = array();

 Set to be like this:

1 $autoload['libraries'] = array('database');

2 $autoload['helper'] = array('url');

 2. Config.php

 To configure the config.php, please open the folder:

 application/config/config.php

 like this:
 

 Open config.php file using text editor, and then find this code:

1 $config['base_url'] = '';

 Set to be like this:

1 $config['base_url'] = 'http://localhost/crud_serverside/';

 3. Database.php

 To configure the database.php, please open the folder:

 application/config/database.php

 like this:
 

 Open database.php file using text editor, and then find this code:

1 $active_group = 'default';

$query_builder = TRUE;
2

3
$db['default'] = array(
4
'dsn' => '',
5
'hostname' => 'localhost',
6
'username' => '',
7
'password' => '',
8 'database' => '',
9 'dbdriver' => 'mysqli',
10 'dbprefix' => '',

11 'pconnect' => FALSE,

12 'db_debug' => (ENVIRONMENT !== 'production'),

'cache_on' => FALSE,

13
'cachedir' => '',
14
'char_set' => 'utf8',
15
'dbcollat' => 'utf8_general_ci',
16
'swap_pre' => '',
17 'encrypt' => FALSE,
18 'compress' => FALSE,
19 'stricton' => FALSE,

20 'failover' => array(),

'save_queries' => TRUE

21
);
22

23

24

 Set to be like this:

1 $active_group = 'default';

2 $query_builder = TRUE;

4 $db['default'] = array(

5 'dsn' => '',

'hostname' => 'localhost',

6
'username' => 'root',
7
'password' => '',
8
'database' => 'crud_ignited',
9
'dbdriver' => 'mysqli',
10 'dbprefix' => '',
11 'pconnect' => FALSE,
12 'db_debug' => (ENVIRONMENT !== 'production'),

13 'cache_on' => FALSE,

14 'cachedir' => '',

'char_set' => 'utf8',

15
'dbcollat' => 'utf8_general_ci',
16
'swap_pre' => '',
17
'encrypt' => FALSE,
18
'compress' => FALSE,
19 'stricton' => FALSE,
20 'failover' => array(),

21 'save_queries' => TRUE

22 );
23

24

 Step 5. Controller
 Go ahead and create a controller file controllers/Crud.php with the

following this code:

1 <?php

2 class Crud extends CI_Controller{

function __construct(){
3
parent::__construct();
4
$this->load->library('datatables'); //load library ignited-dataTable
5
$this->load->model('crud_model'); //load model crud_model
6
}
7 function index(){
8 $x['category']=$this->crud_model->get_category();
9 $this->load->view('crud_view',$x);

10 }

11

12 function get_product_json() { //get product data and encode to be JSON object

header('Content-Type: application/json');
13
echo $this->crud_model->get_all_product();
14
}
15

16
function save(){ //insert record method
17
$this->crud_model->insert_product();
18 redirect('crud');
19 }
20

21 function update(){ //update record method

22 $this->crud_model->update_product();

23 redirect('crud');

}
24

25
function delete(){ //delete record method
26
$this->crud_model->delete_product();
27
redirect('crud');
28
}
29

30 }
31

32

33

 Step 6. Model
 Go ahead and create a model file models/Crud_model.php with the

following this code:

1 <?php

2 class Crud_model extends CI_Model{

3 //get all categories method

function get_category(){
4
$result=$this->db->get('categories');
5
return $result;
6
}
7
//generate dataTable serverside method
8 function get_all_product() {
9 $this->datatables->select('product_code,product_name,product_price,category_id,c
10 $this->datatables->from('product');

11 $this->datatables->join('categories', 'product_category_id=category_id');
12 $this->datatables->add_column('view', '<a href="javascript:void(0);" class="edit
category="$4">Edit</a> <a href="javascript:void(0);" class="delete_record btn btn-dan
13code="$1">Delete</a>','product_code,product_name,product_price,category_id,category_na

14 return $this->datatables->generate();

15 }

//insert data method

16
function insert_product(){
17
$data=array(
18
'product_code' => $this->input->post('product_code'),
19
'product_name' => $this->input->post('product_name'),
20
'product_price' => $this->input->post('price'),
21
'product_category_id' => $this->input->post('category')
22
);
23 $result=$this->db->insert('product', $data);
24 return $result;

25 }

26 //update data method

27 function update_product(){

$product_code=$this->input->post('product_code');
28
$data=array(
29
'product_name' => $this->input->post('product_name'),
30
'product_price' => $this->input->post('price'),
31
'product_category_id' => $this->input->post('category')
32
);
33
$this->db->where('product_code',$product_code);
34
$result=$this->db->update('product', $data);
35 return $result;
36 }

37 //delete data method

38 function delete_product(){

39 $product_code=$this->input->post('product_code');

$this->db->where('product_code',$product_code);
40
$result=$this->db->delete('product');
41
return $result;
42
43 }

44}

45

46

 Step 7. View
 Go ahead and create a view file views/crud_view.php with the

following this code:

1 <html lang="en">

2 <head>

<meta charset="utf-8">
3
<title>Crud ignited datatables in CodeIgniter</title>
4
<link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet"
5
<link href="<?php echo base_url().'assets/css/jquery.datatables.min.css'?>" re
6
<link href="<?php echo base_url().'assets/css/dataTables.bootstrap.css'?>" rel="
7
</head>
8 <body>
9 <div class="container">

10 <h2>Product List</h2>

11 <button class="btn btn-success pull-right" data-toggle="modal" data-target="

<table class="table table-striped" id="mytable">

12
<thead>
13
<tr>
14
<th>Product Code</th>
15
<th>Product Name</th>
16
<th>Price</th>
17 <th>Category</th>
18 <th>Action</th>

19 </tr>
20 </thead>

21 </table>

</div>
22

23
<!-- Modal Add Product-->
24
<form id="add-row-form" action="<?php echo site_url('crud/save');?>" method="
25
<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-lab
26
<div class="modal-dialog">
27 <div class="modal-content">
28 <div class="modal-header">
29 <button type="button" class="close" data-dismiss="modal" aria

30 <h4 class="modal-title" id="myModalLabel">Add New</h4>

31 </div>

<div class="modal-body">
32
<div class="form-group">
33
<input type="text" name="product_code" class="form-contro
34
</div>
35
<div class="form-group">
36 <input type="text" name="product_name" class="form-contro
37 </div>

38 <div class="form-group">

39 <select name="category" class="form-control" placeholder=

40 <?php foreach ($category->re

<option value="<?php e
41 >category_name;?></option>
42 <?php endforeach;?>
43 </select>

44 </div>

45 <div class="form-group">

<input type="text" name="price" class="form-control" plac

46
</div>
47

48
</div>
49
<div class="modal-footer">
50
51 <button type="button" class="btn btn-default" data-dismiss="

52 <button type="submit" class="btn btn-success">Save</button>

</div>
53
</div>
54
</div>
55
</div>
56
</form>
57

58 <!-- Modal Update Product-->

59 <form id="add-row-form" action="<?php echo site_url('crud/update');?>" method
60 <div class="modal fade" id="ModalUpdate" tabindex="-1" role="dialog" aria-la

61 <div class="modal-dialog">

62 <div class="modal-content">

<div class="modal-header">
63
<button type="button" class="close" data-dismiss="modal" aria
64
<h4 class="modal-title" id="myModalLabel">Update Product</h4
65
</div>
66
<div class="modal-body">
67 <div class="form-group">
68 <input type="text" name="product_code" class="form-contro

69 </div>

70 <div class="form-group">

71 <input type="text" name="product_name" class="form-contro

</div>
72
<div class="form-group">
73
<select name="category" class="form-control" required>
74
<?php foreach ($category->res
75
<option value="<?php echo
76 <?php endforeach;?>
77 </select>

78 </div>

79 <div class="form-group">

80 <input type="text" name="price" class="form-control" plac

</div>
81
82

83 </div>

84 <div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="

85
<button type="submit" class="btn btn-success">Update</butto
86
</div>
87
</div>
88
</div>
89 </div>
90 </form>
91

92 <!-- Modal delete Product-->

93 <form id="add-row-form" action="<?php echo site_url('crud/delete');?>" method

94 <div class="modal fade" id="ModalDelete" tabindex="-1" role="dialog" aria-la

<div class="modal-dialog">
95
<div class="modal-content">
96
<div class="modal-header">
97
<button type="button" class="close" data-dismiss="modal" aria
98
<h4 class="modal-title" id="myModalLabel">Delete Product</h4
99 </div>
100 <div class="modal-body">

101 <input type="hidden" name="product_code" class="form-cont

102 <strong>Are you sure to delete th

103 </div>

<div class="modal-footer">
104
<button type="button" class="btn btn-default" data-dismiss="
105
<button type="submit" class="btn btn-success">Yes</button>
106
</div>
107
</div>
108 </div>
109 </div>

110 </form>

111

112 <script src="<?php echo base_url().'assets/js/jquery-3.2.1.js'?>"></script>

113 <script src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>

114 <script src="<?php echo base_url().'assets/js/jquery.datatables.min.js'?>"></scrip

<script src="<?php echo base_url().'assets/js/dataTables.bootstrap.js'?>"></script

115

116
<script>
117
$(document).ready(function(){
118
// Setup datatables
119
$.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings)
120 {
121 return {
122 "iStart": oSettings._iDisplayStart,

123 "iEnd": oSettings.fnDisplayEnd(),

124 "iLength": oSettings._iDisplayLength,

"iTotal": oSettings.fnRecordsTotal(),
125
"iFilteredTotal": oSettings.fnRecordsDisplay(),
126
"iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLen
127
"iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._i
128
};
129 };
130

131 var table = $("#mytable").dataTable({

132 initComplete: function() {

133 var api = this.api();

134 $('#mytable_filter input')

.off('.DT')
135
.on('input.DT', function() {
136
api.search(this.value).draw();
137
});
138
},
139 oLanguage: {
140 sProcessing: "loading..."

141 },

142 processing: true,

143 serverSide: true,

144 ajax: {"url": "<?php echo base_url().'index.php/crud/get_product_jso

145 columns: [

{"data": "product_code"},
146
{"data": "product_name"},
147
//render number format for price
148
{"data": "product_price", render: $.fn.dataTable.render.nu
149
{"data": "category_name"},
150 {"data": "view"}
151 ],

152 order: [[1, 'asc']],

153 rowCallback: function(row, data, iDisplayIndex) {

154 var info = this.fnPagingInfo();

var page = info.iPage;

155
var length = info.iLength;
156
$('td:eq(0)', row).html();
157
}
158

159
});
160 // end setup datatables
161 // get Edit Records

162 $('#mytable').on('click','.edit_record',function(){

163 var code=$(this).data('code');

164 var name=$(this).data('name');

var price=$(this).data('price');
165
var category=$(this).data('category');
166
$('#ModalUpdate').modal('show');
167
$('[name="product_code"]').val(code);
168
$('[name="product_name"]').val(name);
169 $('[name="price"]').val(price);
170 $('[name="category"]').val(category);

171 });

172 // End Edit Records

173 // get delete Records

$('#mytable').on('click','.delete_record',function(){
174
175 var code=$(this).data('code');

176 $('#ModalDelete').modal('show');

$('[name="product_code"]').val(code);
177
});
178
// End delete Records
179
});
180
</script>
181 </body>
182 </html>

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

 Now, go ahead and access our custom page

at http://localhost/crud_serverside/index.php/crud and you will see

the final result like this:



 Please click add new button to add new record, click edit button to

update record, and click delete button to delete record.

 If you want to see how awesome this is. Go ahead insert more than

20000 records.

 You will see how fast the data is loaded.

 So, that's it,

 We've done it!

 If you feel this tutorial is useful for you. Please share! Perhaps, this

tutorial is useful also for your friend!



 CONCLUSION

 This tutorial is about how to create a CRUD (Create Read Update

Delete) application with ignited-datatables using codeigniter.

 Ignited-datatables is a library that is enabled to make server-side

processing easier on datatables.

 Server-side processing is a method to accelerate the load of large

data from the database.

 With server-side processing can improve the User Experience (UX)

quality.