KendoUI Grid Pada Codeigniter

Sudah saya singgung di artikel lalu saat saya coba mengenalkan KendoUI namun hanya penjelasan teori saja. Kini saya coba akan membagi bagaimana implement salah satu widget / komponen pada KendoUI yaitu Grid dan penerapannya pada Codeigniter.

Saya contohkan di artikel ini, saya membuat table brand dengan struktur database sederhana seperti dibawah ini.

1
2
3
4
5
6
7
8
9
CREATE TABLE IF NOT EXISTS `master_brand` (
  `brand_code` INT(11) NOT NULL AUTO_INCREMENT,
  `brand_id` VARCHAR(20) NOT NULL,
  `brand_name` VARCHAR(100) NOT NULL,
  `brand_type` VARCHAR(20) NOT NULL COMMENT 'local or branded',
  `create_date` datetime DEFAULT NULL,
  `update_date` TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`brand_code`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

Isikanlah beberapa data pada table yang baru saya buat tadi dengan data sampel. Jika sudah, sekarang saya buat sebuah controller pada codeignter dengan nama ‘master_brand’.

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
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Master_Brand extends CI_Controller {

  private $_classname = __class__;
  private $_primary_code = 'brand_code';

  public function __construct() {
    parent::__construct();
    // $this->load->library('firephp');
    $this->_classname = strtolower(__class__);
    $this->load->model('m_'.$this->_classname,'main_model');
  }

  public function index() {
    $data["controller"] = strtolower($this->_classname);
    $data["primary_code"] = $this->_primary_code;
    $data["limit"] = '20';
    $data["content"] = strtolower($this->_classname) . "/" . __FUNCTION__;
    $this->load->view('index',$data);
  }

  /**
  * ajax untuk list kendo grid
  **/

  public function get_all_list() {
    // field untuk ditampilkan di depan
    $column = "brand_code,brand_name,brand_id";

    // paginate handle
    $take = $this->input->post('take');
    $page = $this->input->post('page');
    $skip = $this->input->post('skip');
    $pageSize = $this->input->post('pageSize');

    // sortir
    $sort = $this->input->post('sort');
    $sort_dir = $sort[0]['dir'];
    $sort_field = $sort[0]['field'];

    // filter
    $filter = $this->input->post('filter');
    if( $filter != '' ){
      $filterdata = array();
      $filterdata['field'] = $filter['filters'][0]['field'];
      $filterdata['operator'] = $filter['filters'][0]['operator'];
      $filterdata['value'] = $filter['filters'][0]['value'];
      $filterdata['logic'] = $filter['logic']; 

      $data = $this->main_model->get_all_kendo( $column, $take, $skip, $sort_dir, $sort_field, $filterdata );
      $total_data = $this->main_model->count_all_where($filterdata);
    }else{
      $filterdata = 0;
      $data = $this->main_model->get_all_kendo( $column, $take, $skip, $sort_dir, $sort_field, $filterdata );
      $total_data = $this->main_model->count_all();
    }
   
    $return['Result'] = $data;
    $return['CResult'] = $total_data;

    echo json_encode($return);
  }
}

Jika anda lihat, controller construct nya saya hanya membuat settingan agar nanti bisa dipakai di method lainnya. Ada juga variable primary_code untuk dipakai sebagai rujukan saat update atau delete data.

Pada method index, saya hanya memanggil nama view dan settingan lain seperti limit grid yang mau ditampilkan, primary_code yang tersetting pada construct dan nama controller untuk dikirim ke file view.

Terdapat method get_all_list() untuk memanggil data request yang dilakukan oleh si Ajax Kendo (Datasource).

Sekarang saya buatkan kode untuk model master brand. Berikut kode untuk model master brand :

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
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class M_Master_Brand extends CI_Model {

  private $_classname;
  private $_tbl;
  private $_id='brand_code';

  function __construct() {
    parent::__construct();

    $cls_array = explode('M_',__class__);
    $this->_classname = strtolower($cls_array[1]);
    $this->_tbl = $this->_classname;
  }

  function get_all_kendo( $column, $take, $skip, $sort_dir, $sort_field, $filterdata ) {
   
    $this->db->select($column);
   
    // pengecekan apa ada trigger sort oleh user
    if( isset( $sort_dir ) ){
     
      // pengecekan apa ada trigger filter data oleh user
      if( $filterdata != 0 ){
        $this->db->order_by($sort_field, $sort_dir);
        $this->db->limit($take,$skip);

        // pengecekan filter operator kendo apa terset ?
        if( isset($filterdata['operator']) ) {
         
          // pengecekan filter operator default bawaaan kendo
          if( $filterdata['operator'] == 'eq' ) {
            $this->db->where($filterdata['field'], $filterdata['value']);
          }
          elseif( $filterdata['operator'] == 'neq' ) {
            $field = $filterdata['field'] . ' != ';
            $this->db->where($field, $filterdata['value']);
          }
          elseif( $filterdata['operator'] == 'startswith' ) {
            $this->db->like($filterdata['field'], $filterdata['value'], 'after');
          }
          elseif( $filterdata['operator'] == 'contains' ) {
            $this->db->like($filterdata['field'], $filterdata['value'], 'both');
          }
          elseif( $filterdata['operator'] == 'doesnotcontain' ) {
            $this->db->not_like($filterdata['field'], $filterdata['value']);
          }
          elseif( $filterdata['operator'] == 'endswith' ) {
            $this->db->like($filterdata['field'], $filterdata['value'],'before');
          }
        }

        $data = $this->db->get($this->_tbl);
      }else{
        $this->db->order_by($sort_field, $sort_dir);
        $this->db->limit($take,$skip);
        $data = $this->db->get($this->_tbl);
      }
     
    }else{
     
      if( $filterdata != 0 ){

        if( isset($filterdata['operator']) ) {
          if( $filterdata['operator'] == 'eq' ) {
            $this->db->where($filterdata['field'], $filterdata['value']);
          }
          elseif( $filterdata['operator'] == 'neq' ) {
            $field = $filterdata['field'] . ' != ';
            $this->db->where($field, $filterdata['value']);
          }
          elseif( $filterdata['operator'] == 'startswith' ) {
            $this->db->like($filterdata['field'], $filterdata['value'], 'after');
          }
          elseif( $filterdata['operator'] == 'contains' ) {
            $this->db->like($filterdata['field'], $filterdata['value'], 'both');
          }
          elseif( $filterdata['operator'] == 'doesnotcontain' ) {
            $this->db->not_like($filterdata['field'], $filterdata['value']);
          }
          elseif( $filterdata['operator'] == 'endswith' ) {
            $this->db->like($filterdata['field'], $filterdata['value'],'before');
          }
        }

        $this->db->limit($take,$skip);
        $data = $this->db->get($this->_tbl);
      }else{
        $this->db->limit($take,$skip);
        $data = $this->db->get($this->_tbl);
      }

    }
 
    return $data->result();
  }

// menghitung total data table pada kendo
  function count_all() {
    $count = $this->db->count_all($this->_tbl);
    $query = $this->db->last_query();
    return $count;
  }

  // menghitung total data jika terdapat kondisi tertentu pada kendo seperti filtering
  function count_all_where($filterdata) {
    if( isset($filterdata['operator']) ) {
      if( $filterdata['operator'] == 'eq' ) {
        $this->db->where($filterdata['field'], $filterdata['value']);
      }
      elseif( $filterdata['operator'] == 'neq' ) {
        $field = $filterdata['field'] . ' !=';
        $this->db->where($field, $filterdata['value']);
      }
      elseif( $filterdata['operator'] == 'startswith' ) {
        $this->db->like($filterdata['field'], $filterdata['value'], 'after');
      }
      elseif( $filterdata['operator'] == 'contains' ) {
        $this->db->like($filterdata['field'], $filterdata['value'], 'both');
      }
      elseif( $filterdata['operator'] == 'doesnotcontain' ) {
        $this->db->not_like($filterdata['field'], $filterdata['value']);
      }
      elseif( $filterdata['operator'] == 'endswith' ) {
        $this->db->like($filterdata['field'], $filterdata['value'],'before');
      }
    }
    $this->db->from($this->_tbl);
    $count = $this->db->count_all_results();
    return $count;
  }
}

Sederhana saja, saya hanya ingin memperlihatkan kode pada method get_all_kendo. Penjelasan terlihat pada kode komentar ya.

Bila sudah, sekarang kita buat file view nya dengan nama index.php. Nama ini wajib sama karena saat nge-define pada method index pada controller (variable content pada array $data).

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
<link href="<?php echo base_url() . 'kendoui/styles/kendo.common.min.css'; ?>" rel="stylesheet">
<link href="<?php echo base_url() . 'kendoui/styles/kendo.blueopal.min.css'; ?>" rel="stylesheet">

<h1 class="page-title"><?php echo ucfirst( str_replace('_', ' ', $controller) ); ?></h1>

<div class="btn-toolbar">
    <button class="btn btn-primary" id="new" onclick="add()"><i class="icon-plus"></i> New</button>
    <button class="btn btn-primary" id="edit" onclick="edit()"><i class="icon-edit"></i> Edit</button>
    <div class="btn-group">
    </div>
</div>

<div class="well">
  <div class="row-fluid">
        <div class="span12" id="list"></div>
    </div>
</div>

<script src="<?php echo base_url() . 'kendoui/js/kendo.web.min.js'; ?>"></script>
<script>
    var controller = "<?php echo $controller; ?>";
    var main_url = base_url + controller;
    var limit = "<?php echo $limit; ?>";

    var urlx = main_url + '/get_all_list';
    var ds = new kendo.data.DataSource({
            transport: {
                read: {
                    type: 'post',
                    url: urlx,  
                    dataType: 'json'
                }
            },
            error: function(e) {
                alert(e);
            },
            schema: {
                data: function(data){
                    return data.Result;
                },
                total: function(data){
                    return data.CResult;
                }
            },
            pageSize: limit,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
    });

    $("#list").kendoGrid({
        dataSource: ds,
        height: 600,
        filterable: {
            extra:false
        },
        scrollable: true,
        sortable: true,
        pageable: {
            input: true,
            numeric: false
        },
        selectable: "multiple",
        columns: [
          {
                field:"brand_code",
                title:"Brand Code",
                width: "160px"
            },
            {
                field:"brand_id",
                title:"Brand ID",
                width: "160px"
            },
            {
                field:"brand_name",
                title:"Brand Name"
            }
        ]
    });

    $(function(){
        // settingan yang lain
    });
</script>

Code view diatas terlihat pendek karena sebenarnya code ini adalah potongan dari keseluruhan code. Kenapa tidak yang full code ? Karena pada artikel ini kita hanya membahas bagaimana implement KendoUI Grid saja pada codeigniter. Saya tidak membahas bagaimana membuat struktur view pada codeigniter atau bootstrap css-nya.

Pada kode view diatas, saya menyisipkan source KendoUI sejajar dengan Application milik Codeigniter. Sebenarnya nanti bisa anda setting sesuai keinginan anda. Asalkan tidak salah saja saat memanggil file kendo.web.js nya.

Jika terlihat, saya membuat code javascript berikut :

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
var controller = "<?php echo $controller; ?>";
var main_url = base_url + controller;
var limit = "<?php echo $limit; ?>";
var urlx = main_url + '/get_all_list';
var ds = new kendo.data.DataSource({
            transport: {
                read: {
                    type: 'post',
                    url: urlx,  
                    dataType: 'json'
                }
            },
            error: function(e) {
                console.log('awww: '+e);
            },
            schema: {
                data: function(data){
                    return data.Result;
                },
                total: function(data){
                    return data.CResult;
                }
            },
            pageSize: limit,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
    });

Kode diatas saya sebut Datasource, bahasa sederhananya “ajax-nya si Kendo”. Jadi sebenarnya Grid melakukan request / permintaan ke server melalui datasource, lalu setelah mendapatkan response / balikan dari server, kendo mencoba merapihkan data menjadi grid yang lebih enak dipandang mata 😀

Datasource tersebut memanggil method pada controller master_brand yaitu get_all_list(). Dimana output dari method tersebut adalah semua data request (Result) dan jumlah data (Cresult). Jika masih kurang dimengerti, lihat kembali keluaran method get_all_list().

Untuk lebih lengkap tentang datasource pada KendoUI, anda dapat membaca lengkap pada documentasi di halaman ini (doc datasource kendoUI).

Setelah Datasource didapat, kita tempel pada kode grid kendo-nya :

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
$("#list").kendoGrid({
        dataSource: ds,
        height: 600,
        filterable: {
            extra:false
        },
        scrollable: true,
        sortable: true,
        pageable: {
            input: true,
            numeric: false
        },
        selectable: "multiple",
        columns: [
          {
                field:"brand_code",
                title:"Brand Code",
                width: "160px"
            },
            {
                field:"brand_id",
                title:"Brand ID",
                width: "160px"
            },
            {
                field:"brand_name",
                title:"Brand Name"
            }
        ]
    });

Terlihat variable ds saya sisipkan pada option atau parameter KendoUI grid datasource. Setingan lainnya dapat anda baca pada documentasi KendoUI Grid pada halaman ini (doc grid kendoUI).

Jika sudah, bisa di running dan mudah-mudahan sama munculnya seperti pada komputer local saya dibawah ini :

kendoUI Grid pada codeigiter : awal
kendoUI Grid pada codeigiter : awal
kendoUI Grid pada codeigiter : filtering
kendoUI Grid pada codeigiter : filtering

Sampai disini, ada pertanyaan atau revisi, silahkan dikomentar. Semoga bermanfaat.

One comment

Leave a Reply

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

%d bloggers like this: