Senin, 01 Agustus 2011

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

29 komentar:

  1. Kang....ada error seperti ini
    An Error Was Encountered

    Unable to load the requested file: user/user_view.php

    gmn yo solusinya

    BalasHapus
  2. oh ya maaf baru baca komen, saya lupa memberitahu kalau untuk file view user_view.php dan user_form.php ditaruh dalam folder user dalam view...

    BalasHapus
  3. numpang nanya sy coba koq muncul pesan gini ya
    <link type="text/css" rel="stylesheet" media="all" href="
    Fatal error: Call to undefined function base_url() in C:\AppServ\www\grid\application\controllers\home.php on line 5

    setting apanya ya yg kurang?

    BalasHapus
  4. itu karena konfigurasinya belum di set semua.
    coba cek d file config.php bagian $config['base_url'] atau juga bisa karena helper url belum di load (bisa cek d autoload.php, isikan $autoload['helper'] = array('url', 'form');

    BalasHapus
  5. wah keren banget..udah aku coba sipp. trus kalo untuk search nya gimana yah,,,
    thanks

    BalasHapus
  6. Saya sudah ikuti perintahnya tapi kenapa dibrowser tampilnya cuma putih polios aj tidak keluar apa2. Mohon bantuannya.

    BalasHapus
  7. keren gan....kebetulan ane blm ngerti pake ci...berguna bangt. ikut nyumbang contoh penggunaan flexigrid yg tanpa CI tp dah lengkap dengan tombol add dan edit yg udah fungsi...o ya..ada link demonya juga...

    http://adiresmawan.blogspot.com/2012/03/flexigrid-with-add-and-edit-button.html

    thanks gan...

    BalasHapus
  8. mas kalo buat colorbox digunakan untuk view data aja gmn ya.

    BalasHapus
    Balasan
    1. ya colorbox hanya digunakan d view, hanya flexigrid yang saya gunakan juga d controller.

      coding untuk d view seperti pada penulisan html biasa... bisa liat contoh penggunaannya d http://jacklmoore.com/colorbox/example3/

      Hapus
  9. Tambah sipp ae rek.. :) smangat..!!! pean sidone kerjo nang ndi Wa..?

    BalasHapus
  10. Mas bro, flexigrid seng show/hide column e lek mouse e kluar dr show/hide content e koq moro2 langsung ilang y show/hide content e, slh nang ndi ne y..? :-/

    BalasHapus
  11. wes mas bro.., div e rodok tak unggahno thitik akhire iso.. :D, eh blogmu mben tak bukak sering firefox crash...

    BalasHapus
  12. Mas, pas banget nemu ni tutorial... :D
    dah dicoba jalan, tapi kok data di database tabel usernya gak tampil di grid kenapa ya??
    mohon pencerahannya mas :D

    BalasHapus
    Balasan
    1. coba cek apa querynya sudah benar, klo sudah benar. cek javascriptnya pakai firebug d firefox, apakah ada code yang salah ketik.

      Hapus
  13. Mas, mau tanya, kok pas dijalanin, http://localhost/ci_test/
    keluarnya ini ya mas?

    Fatal error: Class 'CI_Controller' not found in C:\xampplite\htdocs\ci_test\system\application\controllers\user.php on line 3

    dibagian routes.php bagian $route['default_controller'] = '?'; diisi apa ya mas? saya isi dengan 'user' juga munculnya error sama. mohon bantuannya, thanks

    BalasHapus
    Balasan
    1. saya pake CI versi 2.xx sedang sodara pake CI versi dibawah 2 sehingga CI_Controller g. coba ganti CI_Controller dengan COntroller.
      terus isi $route['default_controller'] = '?'; dengan controller yang ingin pertama kali dijalankan saat aplikasi diakses.

      Hapus
  14. Mas, terima kasih untuk tutorialnya. saya coba berhasil.
    Kalo saya mau ngasih chekbox disetiap row dan action edit, show dan delete ada disampingnya bisa ga yach.
    terima kasih.

    BalasHapus
    Balasan
    1. dicoba aja... dulu q blum da kondisi yg mengharuskan requirement seperti itu, jd blm pernah tak coba... hehe
      iya sama2 gan, makasih jg dah mampir.. :)

      Hapus
  15. mas kok saya coba persis tapi tampilannya kosong ya, tulisannya processing terus tlg bantuannya thx

    BalasHapus
    Balasan
    1. coba cek apakah ada error pada javascriptnya (bs pake firebug utk firefox), klo g gitu mungkin CI yang dipakai versinya lebih baru dari CI yg dipakai di turorial ini... tutorial ini memakai CI versi 1.7.x, memiliki perbedaan dg CI versi 2.x.x

      Hapus
  16. gan mau tanya dong, apakah bisa dalam satu halama terdapat 2 flexigrid ?

    BalasHapus
    Balasan
    1. klo baca d group google ttg flexigrid sih bisa, tp g tau apakah sesuai dg yg u inginkan...
      ane malah belum coba gan soalnya blm ada kondisi yg menginginkan multiple flexigrid

      Hapus
  17. alo.. permisi mas.. ass..
    setelah saya ikuti tutorialnya.. hasilnya jreng putih smua..
    apa yang salah ya.. sya pake ci versi 2

    BalasHapus
  18. Mas,,, Kalo Bisa Postingin Hasil Project nya Dong,,,,, Terima Kasih,,,,,

    BalasHapus
    Balasan
    1. wah untuk postingan saya yg dah lama bgt g ada source nya... dah entah kemana... lupa... hehe

      Hapus
  19. Mas sudah saya coba. Berhasil sesuai dengan yg mas ajarkan. Tetapi ketika saya menyesuaikan dengan data2 yg saya miliki. Mengapa tampilannya putih, dan loading terus? Tq

    BalasHapus
  20. gan,, kalau tabel yang ingin ditampilkan dari dua tabel ( menggunakan left join misalnya ) bagian mana saja yang kita rubah ya,, yang punya saya bisa tampil, tapi begitu dicoba menu searchnya ga bisa jalan..

    BalasHapus