Tabel dengan JqGrid di Framwork Codeigniter

Asumsi sebelum menggunakan tutorial ini:

  1. sudah mengerti cara menginstal XAMPP (atau sejenisnya)
  2. sudah mengerti konfigurasi dasar dan pemrograman PHP menggunakan framework codeigniter

Tahap persiapan

JqGrid (http://www.trirand.com/blog/) merupakan salah satu plugin Jquery untuk membuat tabel yang cantik dan professional. JqGrid menggunakan AJAX untuk melakukan manipulasi data (create, read, update, delete), sehingga tabel yang kita buat akan terasa lebih ringan. Sebenarnya code yang saya sertakan di tutorial ini pernah dibuat orang lain namun ada beberapa code yang saya modifikasi. Sebelumnya mengikuti tutorial ini, kamu persiapkan terlebih dahulu beberapa file berikut ini:

  • Plugin JqGrid download disini
  • Theme hive dark di situs UI Jquery download disini  (pilih theme dark hiver)
  • Framework Codeigniter download disini
  • Database yang saya gunakan sama dengan database yang digunakan di tutorial sebelumnya

Extract Codeigniter anda akan melihat struktur folder sebagai berikut

  • root
    • application
    • system
    • user_guide

Buat folder-folder baru di localhost  untuk tempat plugin JqGrid dan theme hive dark sebagai berikut:

  • root
    • _assets
      • css
        • dark-hiver
        • jqgrid
        • script
          • jqgrid
            • i18n
    • application
    • system
    • user_guide

Setelah kamu mendownload jqGrid, extract .zip dan pindahkan file-file berikut ke:

  • /js/jquery-1.5.2.min.js, dimasukkan ke folder /_assets/script/
  • /js/jquery.jqGrid.min.js, dimasukkan ke folder /_assets/script/jqgrid
  • /js/i18n/grid.locale-en.js, dimasukkan ke folder /_assets/script/jqgrid/i18n
  • /css/* (semua file didalam folder ini), dimasukkan ke /_assets/css/jqgrid

Hasil semua download-an theme dark hiver dimasukkan ke folder  /_assets/css/dark-hiver

Selanjutnya, jangan lupa melakukan konfigurasi database codeigniter dengan cara mengedit file database.php di folder /application/config. Perlu diperhatikan bahwa database yang digunakan seperti pada database artikel sebelumnya .

Tahap Implementasi

Jika anda mengikuti langkah-langkah ini dengan benar, maka anda dapat melanjutkan tahap berikutnya, yaitu tahap implementasi. Buatlah 3 file sebagai berikut, jqgrid.php yang anda masukkan ke folder /application/controllers, jqgrid_model.php yang anda masukkan ke folder /application/models, dan jqgrid_view.php yang anda masukkan ke folder /application/views.

Code pada file jqgrid_model.php

class Jqgrid_model extends CI_Model
{

	function __construct()
	{
		parent::__construct();
//memanggail tabel area pada database
$this->_table = 'factory_output';
	}
 //fungsi ini digunakan untuk fasilitas pencarian
    function get_data($param)
	{

if($param['search'] != null && $param['search'] === 'true'){
            $wh = $param['search_field'];
            switch ($param['search_operator']) {
    			case "bw": // begin with
    				$wh .= " LIKE '".$param['search_str']."%'";
    				break;
    			case "ew": // end with
    				$wh .= " LIKE '%".$param['search_str']."'";
    				break;
    			case "cn": // contain %param%
    				$wh .= " LIKE '%".$param['search_str']."%'";
    				break;
    			case "eq": // equal =
    				if(is_numeric($param['search_str'])) {
    					$wh .= " = ".$param['search_str'];
    				} else {
    					$wh .= " = '".$param['search_str']."'";
    				}
    				break;
    			case "ne": // not equal
    				if(is_numeric($param['search_str'])) {
    					$wh .= " <> ".$param['search_str'];
    				} else {
    					$wh .= " <> '".$param['search_str']."'";
    				}
    				break;
    			case "lt":
    				if(is_numeric($param['search_str'])) {
    					$wh .= " < ".$param['search_str'];
    				} else {
    					$wh .= " < '".$param['search_str']."'";
    				}
    				break;
    			case "le":
    				if(is_numeric($param['search_str'])) {
    					$wh .= " <= ".$param['search_str'];
    				} else {
    					$wh .= " <= '".$param['search_str']."'";
    				}
    				break;
    			case "gt":
    				if(is_numeric($param['search_str'])) {
    					$wh .= " > ".$param['search_str'];
    				} else {
    					$wh .= " > '".$param['search_str']."'";
    				}
    				break;
    			case "ge":
    				if(is_numeric($param['search_str'])) {
    					$wh .= " >= ".$param['search_str'];
    				} else {
    					$wh .= " >= '".$param['search_str']."'";
    				}
    				break;
    			default :
    				$wh = "";
    		}
            $this->db->where($wh);
		}
		($param['limit'] != null ? $this->db->limit($param['limit']['end'], $param['limit']['start']) : '');

        ($param['sort_by'] != null) ? $this->db->order_by($param['sort_by'], $param['sort_direction']) :'';

		//returns the query string
		return $this->db->get($this->_table);
	}
//fungsi ini digunakan melakukan create, update, dan delete yang nantinya akan dipanggil di controller
	function crud($table, $key, $id, $arr){
		$oper=$this->input->post('oper');
		$id_=$this->input->post($id);
		$count=count($arr);
	    for($i=0;$i<$count;$i++){
		$data[$arr[$i]]=$this->input->post($arr[$i]);

		switch ($oper) {
		case 'add':
		$this->db->insert($table,$data);
		break;
		case 'edit':
		$this->db->where($key,$id_);
		$this->db->update($table, $data);
		break;
		case 'del':
		$this->db->where($key,$id_);
		$this->db->delete($table);
		break;
		}
	}
}

pada fungsi get_data pada model ini tidak perlu anda pikirkan, biarkan saja seperti diatas. karena fungsi ini merupakan fungsi umum, kebanyakan sama antara developer satu dengan yang lainnya. fungsi get_data merupakan fungsi yang digunakan untuk melakukan pencarian data yang ada di tabel. sedangakan fungsi crud ini adalah fungsi yang saya modifikasi dengan tujuan agar fungsi ini dapat digunakan kembali pada banyak controller. Fungsi inilah yang nanti berperan  untuk menambahkan, mengdit, dan menghapus data. pada fungsi crud($table, $key, $id, $arr) terdapat beberapa tabel yang harus kamu beri nilai ketika memanggilnya di controller. var $table isilah dengan table yang diquery. var $key isilah dengan nama field yang menjadi batasan query. var $id isilah dengan nilai yang ingin dibatasi. var $arr isilah dengan nama field yang dipostkan dari view

Code pada file jqgrid.php

class Jqgrid extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
        $this->load->model('jqgrid_model', 'jqgrid');
        //$this->output->enable_profiler(TRUE);
    }

    function index()
    {
        // cukup load view tanpa harus load data
        // data dari grid di load melalui js, di bagian url
        $this->load->view('jqgrid_view');
    }

    function get_json_data()
    {

        $page = $_REQUEST['page']; // get the requested page
        $limit = $_REQUEST['rows']; // get how many rows we want to have into the grid
        $sidx = $_REQUEST['sidx']; // get index row - i.e. user click to sort
        $sord = $_REQUEST['sord']; // get the direction if(!$sidx) $sidx =1;

        $req_param = array (
				"sort_by" => $sidx,
				"sort_direction" => $sord,
				"limit" => null,
				"search" => $_REQUEST['_search'],
				"search_field" => isset($_REQUEST['searchField'])?$_REQUEST['searchField']:null,
				"search_operator" => isset($_REQUEST['searchOper'])?$_REQUEST['searchOper']:null,
				"search_str" => isset($_REQUEST['searchString'])?$_REQUEST['searchString']:null
		);

        $row = $this->jqgrid->get_data($req_param)->result_array();
        $count = count($row);
        if( $count >0 ) {
            $total_pages = ceil($count/$limit);
        } else {
            $total_pages = 0;
        }
        if ($page > $total_pages)
            $page=$total_pages;
        $start = $limit*$page - $limit; // do not put $limit*($page - 1)

        $req_param['limit'] = array(
                    'start' => $start,
                    'end' => $limit
        );

        $result = $this->jqgrid->get_data($req_param)->result_array();
        // sekarang format data dari dB sehingga sesuai yang diinginkan oleh jqGrid dalam hal ini aku pakai JSON format
        $responce->page = $page;
        $responce->total = $total_pages;
        $responce->records = $count;
		        for($i=0; $i<count($result); $i++){

            $responce->rows[$i]['FactoryID ']=$result[$i]['FactoryID'];
            // data berikut harus sesuai dengan kolom-kolom yang ingin ditampilkan di view (js)
            $responce->rows[$i]['cell']=array(
					$result[$i][‘FactoryID’],
                                            $result[$i]['DatePro'],
                                            $result[$i]['Quantiy']
	                                        );

        }

        echo json_encode($responce);
    }
	function crud(){
		$this->jqgrid->crud('factory_output', 'FactoryID ', 'id', array('FactoryID', 'DatePro', 'Quantity'));
	}
}

fungsi get_data yang ada di model jqgrid_model dipanggil di controller ini pada fungsi get_jason_data. get_jason_data nanti saya panggil di jqgrid_view dengan menggunkan ajax. sedangkan pada fungsi crud pada controller crud merupakan fungsi yang memanggil fungsi crud pada model jqgrid_model $this->jqgrid->crud.

Code pada file jqgrid_view.php

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />

	<title>JqGrid</title>

    <script type='text/javascript' src='<?php echo base_url()?>_assets/js/jquery.min.js'></script>
	<link rel="stylesheet" href="<?php echo base_url()?>_assets/css/dark-hive/ui.core.css" type="text/css" media="all" />
    <link rel="stylesheet" href="<?php echo base_url()?>_assets/css/dark-hive/ui.theme.css" type="text/css" media="all" />
	<link rel="stylesheet" href="<?php echo base_url()?>_assets/css/jqgrid/ui.jqgrid.css" type="text/css" media="all" />
	<link rel="stylesheet" href="<?php echo base_url()?>_assets/css/default.uni-form.css" type="text/css" media="all" />
	<script src="<?php echo base_url()?>_assets/script/jqgrid/i18n/grid.locale-en.js" type="text/javascript" charset="utf-8"></script>
    <script src="<?php echo base_url()?>_assets/script/jqgrid/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<table id="grid"></table>
	<div id="pager"></div>
  <script type="text/javascript">

	jQuery("#grid").jqGrid({
	   url:'<?php echo site_url('jqgrid/get_json_data');?>',
       datatype: "json",
	   mtype: "GET",
	   height: "auto",
//harus disesuaikan dengan var $arr yang ada di model
       colNames:['id', 'DatePro',  'Quantity'],
       colModel:[
//harus disesuaikan dengan controlle crud pada fungsi get_jason_data
            {name:'FactoryID', key:true, index:'FactoryID ', width:35, search:false},
			{name:'DatePro', key:true, index:'DatePro', width:35, search:true, editable:true},
            {name:'Quantity',index:'Quantity ', width:35, align:"center", editable:true}],
       rowNum:10,
       rowList:[10,20,30],
//#pager merupakan div id pager
       pager: '#pager',
       sortname: 'FactoryID ',
       viewrecords: true,
       sortorder: "desc",
       width: 700,
       height: "100%",
//memanggil controller jqgrid yang ada di controller crud
	   editurl: "jqgrid/crud",
       caption:"" });
    jQuery("#grid").jqGrid('navGrid','#pager',{edit:true,add:true,del:true});

	</script>
</body>
</html>

Selanjutnya lihat hasilnya dengan mengakses http://localhost/root/index.php/jqgrid

About irul

Kadang bisa serius amat. Tapi kebanyakan sih sukanya bercanda.

Posted on 30/03/2012, in programming and tagged , , . Bookmark the permalink. 1 Komentar.

  1. pertama-tama mkasih tutorialnya..
    tp kok data tablenya gak keluar ya?

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: