jQGrid with Codeigniter and Doctrine

“We do not have to build them from zero. What customer want is not perfect product but product they need” – Component based software engineering

After struggling a few days to integrate JQgrid in Codeigniter PHP framework and Doctrine ORM, finally I can make it works!

What is Jqgrid plugin?

JQgrid adalah sebuah plugin yang memanfaatkan jquery untuk menampilkan tabel dalam template grid yang penuh dengan fungsionalitas. Misalnya dengan memasukkan data tabel ke jqgrid, kita dapat melakukan sorting, searching, CRUD (create, retrieve, update, delete), dan mendapatkan tampilan tabel yang rapi.

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHPASP, Java Servlets, JSP, ColdFusion, andPerl.

jqGrid uses a jQuery Java Script Library and is written as plugin for that package. 

Lebih lengkap bisa langsung baca wiki jqgrid disini.

How to?

How to use it? Agak sedikit tricky ternyata. Saya nggak akan membahas bagaimana mengintegrasikannya dengan PHP non framework dan ASP. Saya hanya akan membahas integrasi jqgrid dengan codeigniter + doctrine (sebagai ORM). Catatan, penggunaan doctrine pada codeigniter cuma berdampak pada bagaimana memanggil data dari database (dalam kasus ini mysql).

Download pluginnya di sini.

Asumsi saya, Anda telah mengerti Codeigniter dan telah menggunakan doctrine. Kemudian Anda perlu menampilkan sebuah tabel dan Anda ingin menampilkannya menggunakan jqgrid.

Harusnya struktur folder web aplikasi Anda akan tampak sebagai berikut (struktur framework codeigniter).

Langkah awal adalah memasukkan jquery ke codeigniter. Tapi kalau Anda sudah menyertakan jquery, Anda tak perlu lagi memasukkan kembali jquery bawaan dari jqgrid. Secara umum langkah-langkah instalasi jqgrid untuk php dijelaskan disini.

Tentu saja karena integrasi dilakukan di codeigniter maka script-script tersebut harus diletakkan di posisi yang tepat. Untuk tampilan dimasukkan ke file php pada folder system/application/views, controller yang menggenerate json encodenya pada folder system/application/controller, dan database definisinya pada folder system/application/models. Letakkan css dan script javacriptnya dengan urutan berikut pada view nya.


...
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url(); ?>css/jquery-ui-1.8.16.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url(); ?>css/ui.jqgrid.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/grid.locale-en.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.jqGrid.min.js"></script>
...

Catatan penting pada kode di atas adalah bahwa urutan pemanggilan css dan script js sangat menentukan. Pemanggilan komponen jquery harus lebih atas, baru kemudian komponen jqgrid. Catatan penting lainnya adalah bahwa

js/grid.locale-en.js

harus berada di atas

js/jquery.jqGrid.min.js

Yatta… persiapan sudah selesai. Mari kita lanjutkan dengan penggunaannya.

Saya punya kelas model kotakab.php dengan konten sebagai berikut.

class Kotakab extends Doctrine_Record {

    public function setTableDefinition() {
        $this->hasColumn("nama", "string", 32);
        $this->hasColumn("lon", "string", 32);
        $this->hasColumn("lat", "string", 32);
        $this->hasColumn("deskripsi", "string", 255);
    }

    public function setUp() {
        $this->setTableName("kotakab");

    }
}

Saya sudah menyiapkan data pada tabel kotakab sebagai berikut.

Lalu kita siapkan data ajax yang akan dikirimkan ke jqgrid pada file controllernya someclass.php yang dibungkus dalam fungsi get_kota().

function get_kota(){
		$page = $this->input->post("page"); // get the requested page
		$limit = $this->input->post("rows");  // get how many rows we want to have into the grid
		$sidx = $this->input->post("sidx");  // get index row - i.e. user click to sort
		$sord = $this->input->post("sord");  // get the direction
		if(!$sidx) $sidx =1;

		$q = Doctrine_Query::create()
			->select('*')
			->from('kotakab');

		$row = $q->execute()->toArray();
		$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)
		$q = Doctrine_Query::create()
			->select('*')
			->from('kotakab')
			->orderby($sidx.' '.$sord)
			->limit($limit)
                        ->offset($start);
		$row = $q->execute()->toArray();

		$responce->page = $page;
		$responce->total = $total_pages;
		$responce->records = $count;
		$i=0;

		foreach($row as $f){
			$responce->rows[$i]['id']=$f["id"];
			$responce->rows[$i]['cell']=array($f["nama"],$f["lon"],$f["lat"],$f["deskripsi"]);
			$i++;
		}
		echo json_encode($responce);
	}

Fungsi tersebut jika dipanggil akan mengembalikkan string (nilai page dan beberapa nilai lainnya akan digantikan oleh nilai yang dipost dari jqgrid) :

{“page”:false,”total”:0,”records”:1,”rows”:[{“id”:”1″,”cell”:[“Kota Bandung”,”107.638956″,”-6.945364″,””]}]}

Bersyukurlah kalian yang menyadari aturan konvensi data json jqgrid. Yep, jqgrid memerlukan data json dengan struktur (untuk data json) sebagai berikut.

{
  "total": "xxx",
  "page": "yyy",
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

Kemudian untuk file viewnya dapat dilihat di kelas views kotaview.php

<script type="text/javascript">
	$(document).ready(function(){
		jQuery("#tabelkota").jqGrid({
			url:'<?php echo base_url(); ?>someclass/get_kota',
			datatype: "json",
			mtype:'POST',
			colNames:['Nama Kota/Kabupaten', 'Lon', 'Lat','Deskripsi'],
			colModel:[
					{name:'nama',			index:'email', 			width:140},
					{name:'lon',			index:'nama', 			width:80},
					{name:'lat',			index:'alamat', 		width:80},
					{name:'no_ktp',			index:'no_ktp',			width:400}
				],
			rowNum:10,
			rownumbers:true,
			shrinkToFit:false,
			rowList:[10,20],
			pager: '#navkota',
			sortname: 'id',
			viewrecords: true,
			sortorder: "desc",
			caption:"Manajemen Kota"
		});
		jQuery("#tabelkota").jqGrid('navGrid','#navkota',{edit:false,add:false,del:false});
	});
</script>

<div>
	<table id="tabelkota"></table>
	<div id="navkota"></div>
</div>

Ini adalah hasilnya.

Inti dari jqgrid adalah pemanggilan script berikut.

jQuery("#namakelastabel").jqGrid(option);

Berikut adalah penjelasan detail tentang semua option jqGrid. Dan kalau diperhatikan pada option colModel juga terdapat option seperti name, index, sortable, dll, cek detail penjelasannya disini.

Troubleshooting

Ini adalah beberapa troubleshooting yang pernah saya alami.

Q. Kenapa tabelnya nggak muncul?

A. Coba cek urutan pemanggilan css dan javascript komponen jqGrid

Q. Kenapa tabelnya muncul tapi datanya tidak muncul?

A. Setelah googling ada berbagai penyebab mengapa data tidak muncul, diantara penyebabnya adalah

  1. Data json yang dikirim tidak sesuai format strukturnya
  2. format jsonnya salah. Yang benar “one”:”1″, yang salah “one”:1
  3. javascript adalah case sensitive jadi hati-hati dalam menuliskan option jqGrid. Misal yang benar adalah datatype: ‘json’ bukan dataType: ‘json’.
  4. Perhatikan khusus kasus codeigniter, input post atau get dituliskan bukan dengan $_GET atau $POST melainkan dengan
    $this->input->post dan $this->input->get

Hope this post helps🙂

4 pemikiran pada “jQGrid with Codeigniter and Doctrine

  1. Saya ingin dengan baik menguasai/sempurna program WEB databse, seperti jqgrid codeigniter and doctrine dari bapak bapak saya pensiunan PNS umur 59 tahun dulu tugas di bagian komputer, program komputer sebagai ketrampilan tambahan karena s1 saya administrasi pernah belajar database seperti lotus wyswyg simphony dbase I sd dbase IV visual foxpro visual basic excel acces sekilas buku bukunya C++ nya adbul khadir itu semuanya dulu saya pelajari semasa masih aktip pns, sesudah pensiun 3 tahun ini belajar PHP mysql codeigniter jquery dan program program web lainnya, tempat tinggal di sidoarjo jawa timur, mohon tuntunan secepatnya bagaimana programnya sourcenya untuk WEB yang sempurna dan berapa biaya/harganya (?). Hidup dari gaji melulu ekonomi pas pasan. Terimakasih atas tanggapannya kami ucapkan, kami tunggu informasi dari bapak..

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