Sharing Penggunaan jQuery Flexigrid dan Colorbox pada CodeIgniter

Wah setelah sekian lama tidur dari dunia per blog-an, kini bangun lagi untuk ngeblog.. hehe maklum sok sibuk.. XD
kali ini saya akan sharing tentang penggunaan CI + jQuery 1.3.2 (jQuery UI) + Colorbox + Flexigrid. Flexigrid adalah plugin dari jQuery untuk menampilkan data dalam format grid/tabel (ya begitulah pokoknya mah.. hahay..), sedang Colorbox fungsinya terutama yg saya ambil adalah untuk membuat tampilan form.

langsung saja, pertama2 download dulu bahan2 yang dibutuhkan, seperti

1. CI (CI yg saya gunakan pada sharing kali ini adalah CI versi 2) di codeigniter.com
2. jQuery, bisa di jqueryui.com,
3. Flexigrid, bisa d dapat di  flexigrid for jquery (per 25 Juli 2011) atau mirror
4. Colorbox, bisa di dapat di  colorpowered.com (per 25 Juli 2011) atau mirror. Untuk Colorbox, saya menggunakan css dan folder images dari example 5 dalam sharing kali ini.

Setelah semua bahan di dapat, ekstrak CI ke web server (contoh Xampp) dengan nama test, setelah itu taruh/ekstrak file/folder jQuery, Flexigrid dan Colorbox ke folder "api" yg sejajar dg folder system dalam aplikasi CI seperti gambah dibawah ini. Namun kalau ingin lebih mudah mendapatkan bahan-bahan yang dibutuhkan, silakan download file api.zip / mirror yang telah saya sediakan.

Pertama2, untuk design database, saya hanya menggunakan satu tabel aja (ya kan cuma contoh, g papa kan...??!!! hehe)
buat tabel dengan nama 'user_account' pada mysql.

CREATE TABLE IF NOT EXISTS `user_account` (
  `USERNAME` varchar(20) NOT NULL,
  `NAME` varchar(50) NOT NULL,
  `EMAIL` varchar(32) NOT NULL,
  `ADDRESS` varchar(100) NOT NULL,
  PRIMARY KEY (`USERNAME`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Setelah itu, buat file controller untuk menangani request dari user dengan nama file user.php yang isinya

class User extends CI_Controller{
 function __construct(){
  parent::__construct();
  $this->load->model('user_model');
 }
 
 function index(){
  $data['view']        = 'user/user_view';
  $data['url_json']  = site_url('user/json_user');
  $data['url_form']    = site_url('user');
  $data['title']      = 'Data User';
  $data['title_form']  = 'Form Data User';
  $this->load->view('home',$data);
 }
 
 function json_user(){
  $page   = $this->input->post('page');
  $rp   = $this->input->post('rp');
  $sortname  = $this->input->post('sortname');
  $sortorder  = $this->input->post('sortorder');
  if (!$sortname) $sortname  = 'username';
  if (!$sortorder) $sortorder = 'asc';
  
  $sort = "ORDER BY $sortname $sortorder";  // untuk pengurutan data
  
  if (!$page) $page = 1;  // halaman yg di tampilkan pertama kali
  if (!$rp) $rp = 10;  // total baris yg ditampilkan
  
  $start = (($page-1) * $rp);
  $limit = "LIMIT $start, $rp";  // untuk pembatasan data yg ditampilkan / pagination
  
  $query = $this->input->post('query');  // parameter yg diinputkan saat pencarian data
  $qtype = $this->input->post('qtype');  // kolom atribut yang ingin dicari 
  
  $where = "";
  if ($query) $where .= " WHERE $qtype LIKE '%$query%'";  // untuk proses pencarian data
  
  $result = $this->user_model->getUser($where, $sort, $limit);
  $total  = $this->user_model->countUser($where);
  
  $json  = "";    
  $json .= "{\n";
  $json .= "page: $page,\n";
  $json .= "total: $total,\n";
  $json .= "rows: [";
  $rc = false;
  $i = $start;
  foreach ($result->result() as $row) {
   $i++;
   if($i <= 9) $i = '0'.$i;
   if ($rc) $json .= ",";
   $json .= "\n{";
   $json .= "id:'".$row->USERNAME."',";
   $json .= "cell:[";
   $json .= "'".$i."',";
   $json .= "'".addslashes($row->USERNAME)."',";
   $json .= "'".addslashes($row->NAME)."',";
   $json .= "'".addslashes($row->EMAIL)."',";
   $json .= "'".addslashes($row->ADDRESS)."'";
   $json .= "]}";
   $rc = true;  
  }
  $json .= "\n]}";
  
  header("Expires: Wed, 01 Jan 2020 00:00:00 GMT" ); 
  header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT"); 
  header("Cache-Control: no-cache, must-revalidate" ); 
  header("Pragma: no-cache" );
  header("Content-type: text/x-json");
  echo $json;
 }
 
 function add(){  //  fungsi untuk menampilkan form tambah user
  $data['view']    = 'user/user_form';
  $data['action']  = site_url('user/create');
  $this->load->view('home', $data);
 }
 
 function create(){  //  fungsi untuk tambah data user
  $data   = array('username' => trim($this->input->post('username')),
       'name' => trim($this->input->post('name')), 
       'email' => trim($this->input->post('email')),
       'address' => trim($this->input->post('address')));         
  $this->user_model->addUser($data);
  $this->reload(); 
 }
 
 function edit($username){  //  fungsi untuk menampilkan form edit user
  $user = $this->user_model->getUserByUsername($username)->row();
  $data['action']  = site_url("user/update/$username");
  $data['view']     = 'user/user_form';
  $data['username'] = $user->USERNAME;
  $data['name']  = $user->NAME;
  $data['email']  = $user->EMAIL;
  $data['address'] = $user->ADDRESS;
  $this->load->view('home', $data);
 }
 
 function update($username){  //  fungsi untuk edit data user
  $data   = array('name' => trim($this->input->post('name')), 
       'email' => trim($this->input->post('email')),
       'address' => trim($this->input->post('address'))); 
  $this->user_model->editUser($username, $data);
  $this->reload();
 }
 
 function delete($username){  //  fungsi untuk hapus data user
  $this->user_model->deleteUser($username);
 }
 
 function reload(){  // fungsi untuk mereload flexigrid
  echo '<script type="text/javascript">parent.$("#tabel").flexReload();</script>';
  echo '<script type="text/javascript">parent.$.fn.colorbox.close();</script>';
 }
}

Dari yang saya dapet dari internet, terdapat fungsi dari flexigrid yang ditaruh dalam folder libraries d CI.
Namun setelah saya coba, bisa juga file flexigridnya disatukan dalam controller seperti pada fungsi json_user di atas.

Setelah membuat controller selesai, buatlah model dengan nama user_model.php yg isinya
*Untuk proses validasi data bisa kamu bikin peraturannya sendiri, seperti tidak boleh ada username yg sama, dan lainnya.

class User_model extends CI_Model{
 function __construct(){
  parent::__construct();
 }
 
 var $table = 'user_account';
 
 //  fungsi untuk mengambil data user per-page (pagination), 
 //  ** khusus untuk MySql, cos untuk Oracle ataupun Postgre saya blum coba.. hehe
 function getUser($where = '', $sort = '', $limit = ''){
  return $this->db->query("select * from ".$this->table." $where $sort $limit");
 }
 
 function getUserByUsername($username){
  return $this->db->get_where($this->table, array('username' => $username));
 }
 
 function countUser($where){
  return $this->getUser($where)->num_rows();
 }

 function addUser($data){
  $this->db->insert($this->table,$data); 
 }
 
 function editUser($username, $data){
  $this->db->where('username',$username);
  $this->db->update($this->table, $data);
 }
 
 function deleteUser($username){
  $this->db->delete($this->table, array('username' => $username));
 }
}

untuk query dalam User_model.php nya hanya untuk CRUD yang sederhana (hehe belagu bin ngguaya nih.. :P), jadi saya pake Active Record-nya CI, biar simpel (kecuali fungsi yang pertama XD).

untuk view ada 3 file yg harus dibuat
1. file home.php yg berisi

<html>
<head>
 <meta name="KEYWORDS" content="Contoh JQuery Flexigrid dan Colorbox">
    <title>Contoh JQuery Flexigrid dan Colorbox</title>
 <link type="text/css" rel="stylesheet" media="all" href="<?php echo base_url()?>api/themes/redmond/jquery.ui.all.css" />
 <link type="text/css" rel="stylesheet" media="all" href="<?php echo base_url()?>api/flexigrid/css/flexigrid.css">
 <link type="text/css" rel="stylesheet" media="all" href="<?php echo base_url()?>api/colorbox/colorbox.css" />
 
 <!-- yang ini optional, sesuai css yg kamu mau, tapi sudah saya includkan d api.zip-->
 <link type="text/css" rel="stylesheet" media="all" href="<?php echo base_url()?>api/style.css" />
 
 <script type="text/javascript" language="javascript" src="<?php echo base_url()?>api/jquery/jquery-1.3.2.js"></script>
 <script type="text/javascript" language="javascript" src="<?php echo base_url()?>api/flexigrid/js/flexigrid.js"></script>
 <script type="text/javascript" language="javascript" src="<?php echo base_url()?>api/colorbox/jquery.colorbox.js"></script>

 <script type="text/javascript">
  $(document).ready(function() {
   $("#cancel").click(function() {
    parent.$.fn.colorbox.close();
   });
  });
 </script>
</head>
<body>
<?php $this->load->view($view);?>
</body>
</html>

2. file user_view.php, file ini ditaruh dalam folder user pada view. file ini bertujuan untuk menampilkan data pada grid.

<table id="tabel" style="display:none"></table>
<script type="text/javascript" language="javascript">
 $('#tabel').flexigrid ({
  url: '<?php echo $url_json?>',       // url untuk memanggil fungsi di controller test/json_test
  dataType: 'json', 
  colModel : [
   {display: 'NO',   name : 'no',   width : 25,  sortable : true,  align: 'center'},
   {display: 'Username',  name : 'username',  width : 80,  sortable : true,  align: 'left'},
   {display: 'Nama',   name : 'name',   width : 110,  sortable : true,  align: 'left'},
   {display: 'Email',   name : 'email',  width : 200,  sortable : false, align: 'left'},
   {display: 'Alamat',  name : 'address',  width : 320,  sortable : false, align: 'left'}
  ],
  buttons : [     // tombol untuk melakukan tambah/edit/hapus data di grid
   // bclass untuk flexigrid sudah di definisikan (default), untuk tambah : add, edit : edit, dan hapus : delete. 
   //Jika ingin buat bclass baru, maka harus mengedit colorbox.css-nya (tidak direkomendasikan bagi yg belum expert...hehe)
   {name: 'Add', bclass: 'add', onpress : action}, 
   {separator: true},
   {name: 'Edit', bclass: 'edit', onpress : action},
   {separator: true},
   {name: 'Delete', bclass: 'delete', onpress : action},
   {separator: true}
  ],
  searchitems : [    // tombol untuk pencarian data
   // untuk field "name" usahakan namanya sama dengan nama atribut yg dicari dalam database
   {display: 'Username', name : 'username', isdefault: true}, 
   {display: 'Nama', name : 'name', isdefault: false}
  ],
  sortname: 'username',  // sortname sesuaikan dengan nama atribut dalam database
  sortorder: 'asc',
  usepager: true,
  resizable: false,
  title: '<?php echo $title?>',
  useRp: true,
  rp: 10,
  showTableToggleBtn: true,
  width: 800,
  height: 241
 });
 
  
 function action(com,grid) {
  // 'Add' === name dalam button flexigrid 
  if (com == 'Add') {   
   forms('add', '');
  } else if (com == 'Edit') {
   // cek baris yg d pilih (contoh baris yg dipilih min/max adalah 1)
   if ($('.trSelected',grid).length == 1) { 
    $('.trSelected',grid).each(function() {
     var id = $(this).attr('id');
     id = id.substring(id.lastIndexOf('row')+3);  // ambil data kolom id       
     forms('edit', id);
    });    
   } else {
    alert('Silahkan pilih salah satu baris yang ingin di edit');
    return false;
   }
  } else if (com == 'Delete') {
   if ($('.trSelected',grid).length == 1) {
    $('.trSelected',grid).each(function() {
     var id   = $(this).attr('id');
     id = id.substring(id.lastIndexOf('row')+3);
     if(confirm('Apakah anda yakin akan menghapus data : '+id+' ?')) {
      $.ajax({
       type: 'get',
       url:'<?php echo $url_form?>/delete/'+id,         // url untuk fungsi pada controller test/delete($id)
       success: function() { $('#tabel').flexReload(); }
      });
     }
    });
   } else {
    alert('Silahkan pilih salah satu baris yang ingin di delete');
    return false;
   }
  }
 }
  
 function forms(clas, id){ // setting untuk tampilan colorbox  
  if(id != ''){ 
   id = '/' + id; 
  }else { 
   id = ''; 
  }
  $('.'+clas).colorbox({
   href  : '<?php echo $url_form?>/'+clas+id,  // memanggil fungsi di controller test/add($id) atau test/edit($id)
   innerWidth : 500, 
   innerHeight : 297,
   iframe  : true,
   overlayClose: false,
   title  : '<font color="#45678D"><b><?php echo $title_form?></b></font>',
   onLoad  : function() { $('#cboxClose').remove(); }
  });
 }
</script>

dan yang terakhir,
3. file user_form.php, file ini bertujuan untuk menampilkan form (dg colorbox) untuk proses tambah atau edit data.

<form id="form" name="form" action="<?php echo $action ?>" method="post" enctype="multipart/form-data">
<table border="0" cellpadding="2" cellspacing="1" style="margin:5px">
 <tr>
  <td>Username</td>
     <td>&nbsp;:&nbsp;</td>
     <td><input type="text" name="username" <?php echo (!empty($username))? "value='$username' disabled" : '';?> /></td>
 </tr>        
 <tr>
  <td>Nama</td>
     <td>&nbsp;:&nbsp;</td>
     <td><input type="text" name="name" value="<?php echo (!empty($name))? $name : '';?>" /></td>
 </tr>    
 <tr>
  <td>Email</td>
     <td>&nbsp;:&nbsp;</td>
     <td><input type="email" name="email" value="<?php echo (!empty($email))? $email : '';?>" /></td>
 </tr>        
 <tr>
  <td>Alamat</td>
     <td>&nbsp;:&nbsp;</td>
     <td><textarea name="address" cols="40" rows="3"><?php echo (!empty($address))? $address : '';?></textarea></td>
 </tr>
 <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td><input type="submit" value="Submit">&nbsp;<input type="button" value="Cancel" name="cancel" id="cancel"></td>
 </tr>
</table>
</form>

Untuk file user_view.php dan user_form.php di taruh dalam folder user dalam view.


OK. Sekian dulu sharing dari saya, mumpung lagi mood buat sharing. hehe
Moga bermanfaat bagi yg membutuhkan.. ^_^

Keyword : PHP CodeIgniter, Flexigrid, Colorbox, jQuery

Untuk menghargai HKI(Hak Kekayaan Intelektual), sumber referensi yang saya pakai dan saya pelajari akan ditampilkan.
Referensi    :jQuery, Flexidrid and Colorbox example.
Author       : Moch. Zawaruddin Abdullah, www.zawaruddin.blogspot.com