jqGrid Add, Edit, Delete, View, and Search with Codeigniter

Setelah di postingan sebelumnya dijelaskan bagaimana melakukan generate table jqGrid dan menampilkan datanya, pertanyaan yang muncul selanjutnya adalah bagaimana kita melakukan manipulasi data (CRUD)?

Ini adalah pertanyaan simpel yang sangat sulit saya temukan jawabannya di internet. Kebanyakan jawaban dari pertanyaan tersebut dilakukan dengan menggunakan form bukan bawaan dari jqGrid, padahal seperti yang kita lihat di tutorial jqGrid menyediakan fitur tersebut (add, edit, delete, view, dan search).

Dalam postingan ini saya mengasumsikan bahwa Anda :

  1. Sudah mengerti jquery dan pernah menggunakannya
  2. Sudah berhasil menampilkan data dengan jqgrid (terutama menggunakan data json), jika belum baca postingan ini.

Yang ingin kita lakukan pada postingan ini adalah (sebenarnya terlepas kita pakai codeigniter atau nggak sih) :

  1. Menampilkan Form Add, Form Edit, Form View, dan Form Search bawaan dari jqgrid
  2. Melakukan kustomisasi form tersebut
  3. Memproses form tersebut

Potongan page view yang menampilkan jqGrid

<script type="text/javascript">
	$(document).ready(function(){
		jQuery("#tabelkota").jqGrid({
			url:'<?php echo base_url(); ?>info/get_kota',
			datatype: "json",
			mtype:'POST',
			colNames:['Nama Kota/Kabupaten', 'Longitude', 'Latitude','Alamat'],
			colModel:[
					{name:'nama',index:'nama',width:140},
					{name:'lon',width:80, sortable:false},
					{name:'lat',width:80, sortable:false},
					{name:'deskripsi',width:650, sortable:false}
				],
			rowNum:30,
			width: 900,
			height: 400,
			rownumbers:true,
			shrinkToFit:false,
			rowList:[10,20,30],
			pager: '#navkota',
			sortname: 'id',
			viewrecords: true,
			sortorder: "desc",
			caption:"Daftar Kota dan Kabupaten Provinsi Jawa Barat"
		});
                jQuery("#tabelkota").jqGrid('navGrid','#navkota',
                        {view:true,edit:false,add:false,del:false,search:false,viewtext:'View',refreshtext:'Reload'},
			{}, // edit options
			{}, // add options
			{}, // del options
			{}, // search options
			{}   // view options
		);
	});
</script>

<div class="block b-full" id="laporan-table">

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

Menampilkan form bawaan jqgrid

Untuk menampilkan fitur jqgrid antara add, edit, view, search, delete, dan reload dapat ditentukan pada parameter ketiga dari navGrid. Kalau melihat contoh di atas saya hanya mengaktifkan fitur add saja yang akan menghasilkan form seperti gambar di bawah. Menu navigator grid selengkapnya bisa dilihat di sini. Secara default nilai dari view, edit, add, delete, dan search adalah sebagai berikut.

{ 
view:false,
edit:true,
add:true,
del:true,
search:true
}

Satu hal yang perlu diingat oleh kita adalah kita nggak perlu membuat form tersebut untuk kita hidden kemudian. jqGrid akan menggenerate form tersebut sesuai dengan nilai parameter yang kita tetapkan.  Form yang dihasilkan sesuai dengan definisi colModel dan colNames jqGrid kita. Label tiap input akan sesuai dengan definisi colNames jqGrid. Untuk tiap input akan sesuai dengan definisi parameter colModel tiap input. Ketika fitur add kita aktifkan maka jqgrid akan menampilkan tombol “+” di kiri bawah tabel. Kalau kita klik tombol tersebut akan menghasilkan form seperti berikut.

Tunggu dulu, kenapa di formnya gak muncul apa-apa?! Cuma form bertuliskan “Add Record”? Mana input untuk tiap column yang katanya muncul?

Untuk view form dan search form hal ini gak perlu dilakukan, tapi khusus add dan edit hal ini wajib dilakukan. Untuk kolom yang ingin dapat di edit dan di add tambahkan opsi ini :

editable:true

Kalau seperti contoh di atas dan ingin tiga kolom pertama bisa di add/edit kira-kira scriptnya jadi seperti ini :

...
colNames:['Nama Kota/Kabupaten', 'Longitude', 'Latitude','Alamat'],
colModel:[
        {name:'nama',index:'nama',width:140,editable:true},
	{name:'lon',width:80, sortable:false,editable:true},
	{name:'lat',width:80, sortable:false,editable:true},
	{name:'deskripsi',width:650, sortable:false}
]
...

Beberapa option colModel yang berhubungan dengan form editing adalah sebagai berikut :

editable boolean Defines if the field is editable. This option is used in cell, inline and form modules. See editing false
editoptions array Array of allowed options (attributes) for edittype option editing empty array
editrules array sets additional rules for the editable field editing empty array
edittype string Defines the edit type for inline and form editing Possible values: text, textarea, select, checkbox, password, button, image and file. See also editing text

Detail option colModel dapat dilihat disini.

Melakukan kustomisasi form bawaan jqgrid

Detil option untuk masing-masing form (add, edit, view, search, delete) dapat dilihat di sini. Pada link tersebut dijelaskan detail tentang option untuk masing-masing form. Letakkan option tersebut sesuai dengan tempatnya (parameter 4,5,6,7 dan 8).

{}, // edit options
{}, // add options
{}, // del options
{}, // search options
{}  // view options

Misalnya untuk bagian view form kita ingin mengatur width label agar tidak bertabrakan dengan value columnya. Maka pada bracket view options kita isikan dengan :

{   // view options
	labelswidth : '50%'
}

Memproses form jqgrid

Kalau di kebanyakan tutorial menjelaskan secara mendasar parameter yang dilewatkan pada url option :

...
url:'<?php echo base_url(); ?>info/get_kota',
datatype: "json",
mtype:'POST',
...

adalah parameter POST(“page”) untuk page saat ini, POST(“rows”) untuk banyaknya row yang diminta, POST(“sidx”) untuk index Order By, dan POST(“sord”) untuk arah Order By (Ascending or Descending).

Oke, asumsi kita menggunakan fitur add, edit, delete, dan search. Bagaimana kita memprosesnya? Khusus untuk Search, parameter dilewatkan melalui url yang sama dengan url di atas. Penjelasan untuk search juga tidak akan dijelaskan pada postingan ini. Lalu bagaimana dengan add, edit, delete?

Untuk ketiga form ini dibutuhkan satu option jqgrid tambahan yakni editurl misal seperti berikut :

editurl:'<?php echo base_url(); ?>data/edit_report',

Masing-masing form (add, edit, dan delete) ketika disubmit akan melewatkan beberapa nilai berikut kepada url yang tertera pada editurl tersebut.

Ketiga form mengirimkan POST(“oper”) yang bernilai “add”, “edit”, dan “del” sebagai penanda form apa yang telah disubmit.

What is posted to the server

FORM ADD

When we are in editing mode (ADD) the data that is posted to the server is object {} that contain:

  • the name:value pair where the name is the name of the input element represented in the form (this is for all input elements)
  • additionally we add a pair id:_empty where the _empty indicates that new row is inserted
  • additionally we add a pair oper:add to indicate the add mode
  • if the editData object is not empty we extend this data with the posted data
  • if the returned object from onclickSubmit event is not empty we extend the posted data with this object

FORM EDIT

When we are in editing mode(EDIT) the data that is posted to the server is object {} that contain:

  • the name:value pair where the name is the name of the input element represented in the form (this is for all input elements)
  • additionally we add a pair id:rowid where the rowid is the id of the edited row
  • additionally we add a pair oper:edit to indicate the edit mode
  • if the editData object is not empty we extend this data with the posted data
  • if the returned object from onclickSubmit event is not empty we extend the posted data with this object

DELETE

When we are in delete mode the data that is posted to the server is object {} that contain:

  • the pair id:rowids where the rowids can be a single value a value string separated with comma in case of multiple selection
  • additionally we add a pair oper:del to indicate the delete mode
  • if the delData object is not empty we extend this data with the posted data
  • if the returned object from onclickSubmit event is not empty we extend the posted data with this object

Detailnya dapat dipelajari di sini.

***

That’s for today. Hope this post can help. Selanjutnya saya akan membahas tentang :

  • Search with jqGrid
  • inline editing with jqGrid

23 pemikiran pada “jqGrid Add, Edit, Delete, View, and Search with Codeigniter

    • Serius butuh file editurl nya? Bukannya sudah saya kasi tau apa aja parameter yang dikirimkan ke editurl?

      Perlakukan file php di editurl seperti kita mengirimkan form POST maupun GET.

      Untuk menerima paremeter tersebut kalau dengan php biasa cukup $_POST[‘oper’] atau kalau Anda pakai framework PHP seperti codeigniter dengan $this->input->post(‘oper’). (POST atau GET tergantung nilai parameter mtype yang Anda tuliskan di jqgrid)

      Ini saya kasih sampelnya dalam codeigniter
      if($this->input->post("oper")=="add"){
      $year = $this->input->post("tahun");
      $notes = $this->input->post("notes");
      $kota = Current_User::user()->id;
      $this->infolib->add_report($kota,$year,$notes);
      }else if($this->input->post("oper")=="edit"){
      $year = $this->input->post("tahun");
      $notes = $this->input->post("notes");
      $kota = Current_User::user()->id;
      $this->infolib->edit_report($kota,$year,$notes);
      }

  1. Gan mohon bantuannya, sepertinya untuk pilihan deletenya tidak berhasil

    function editing(){
    $code_id = $this->input->post('code_id');
    $title = $this->input->post('title');
    $province = $this->input->post('province');

    if($this->input->post('oper')=='add'){
    $data = array(
    'code_id' => $code_id,
    'title' => $title,
    'province_name' => $province,
    );
    $this->db->insert('province', $data);
    }
    else if($this->input->post('oper')=='edit'){
    $data = array(
    'title' => $title,
    'province_name' => $province,
    );
    $this->db->where('code_id', $code_id);
    $this->db->update('province', $data);
    }
    else if($this->input->post('oper')=='del'){
    $this->db->where('code_id', $code_id);
    $this->db->delete('province');
    }
    }

    • Gw gak yakin pasti, tapi kayanya salahnya ada di parameter id yang dilewatin deh. Setahu gw tabel yang digenerate sama jqgrid untuk tiap row parameter idnya adalah ‘id’.
      Walaupun ente udah buat column dengan nama ‘code_id’, coba mengganti where nya dengan $this->input->post(‘id’).

      Soalnya, struktur data jsonnya juga kan key=> value nya untuk tiap row :

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

      see? untuk tiap row memiliki name id dengan nama “id”. Parameter ‘id’ ini akan dikembalikan saat edit dan delete di submit, sementara saat add nilai id yang dikembalikan kalau nggak salah ‘_empty’

  2. Terima kasih gan, iya ternyata saya harus menambahkan untuk POST(‘id’) kemudian menganti var delete nya menjadi $id

    function editing(){
    $id = $this->input->post('id');
    $code_id = $this->input->post('code_id');
    ...
    ...
    else if($this->input->post('oper')=='del'){
    $this->db->where('code_id', $id);
    ...

    thanks gan,

    • Bener banget kang aziz,

      Ditunggu janjji nya ya gan, membahas tentang :

      Search with jqGrid & Inline editing with jqGrid

      cheers,

    • sorry2, belom ada waktu buat ngoprek lagi. search udah sempet coba di codeigniter tapi masih sedikit stuck, idenya dapet sih, again, blom ada waktu. Post harian aja juga udah ga keurus. If I have time I’ll write it out.

      Btw, kalo mau coba-coba contoh jqgrid semua bisa download modulnya di http://www.trirand.com/blog/?page_id=6. Atau versi onlinenya

      Coba explore-explore aja, kalo udah ngerti share caranya ya, cheers!🙂

  3. Saya newbie CI, saya ingin bisa CI,JQuery , JQgrid, pada para master mohon tutorialnya di share, tolong klo perlu saya ingin kursus agar saya bisa jadi development yang handal seperti para master ini,,, mohon bimbingannya

  4. hheee. . . mohon maaf, udah berhasil gan. . .
    tadi sempet utak atik sama source code diatas sekarang sudah berhasil, tengkyu gan

  5. bantuannya gan, hrp maklum baru bljr CI n Jqgrid
    Ni saya lagi mencoba menampilkan data pk jqgrid, tp knp hny keluar table aja( data kosong)
    tp jika saya munculkan pake table biasa(HTML) data muncul
    mohon pencerahannya…

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