Tutorial menggunakan Codeigniter dan JqGrid

51 Replies


Jqgrid adalah plugin dari Jquery yang digunakan untuk manipulasi data menggunakan framework jquery. Jqgrid memiliki fungsi antara lain load data, search, edit delete dan sebagainya. Apabila kita biasa menampilkan data dalam bentuk tabel biasa, maka dengan menggunakan Jqgrid, data akan ditampilkan menjadi lebih menarik dan dinamis. Beberapa fungsi dari Jqgrid dapat dilihat pada halaman demo nya.

Tutorial kali ini saya akan menggabungkan Jqgrid dengan framework codeigniter (tentunya). Langkah-langkahnya adalah dengan meload data dari database dalam format JSON (dapat juga menggunakan format Array dan XML) kemudian ditampilkan dalam Jqgrid. Silahkan lihat demo nya di halaman ini.

Kita menggunakan aplikasi ci_ku yang sebelumnya kita bahas. Kemudian tambahkan dua fungsi berikut pada controller daily:

[php]
function jqGrid(){
$this->load->view(‘daily/grid’);
}

function loadDataGrid(){
$page = isset($_POST[‘page’])?$_POST[‘page’]:1; // get the requested page
$limit = isset($_POST[‘rows’])?$_POST[‘rows’]:10; // get how many rows we want to have into the grid
$sidx = isset($_POST[‘sidx’])?$_POST[‘sidx’]:’name’; // get index row – i.e. user click to sort
$sord = isset($_POST[‘sord’])?$_POST[‘sord’]:”; // get the direction

if(!$sidx) $sidx =1;
$query = $this->MDaily->getAll();

$count = count($query);

if( $count > 0 ) {
$total_pages = ceil($count/$limit); //calculating total number of pages
} else {
$total_pages = 0;
}

if ($page > $total_pages) $page=$total_pages;

$start = $limit*$page – $limit; // do not put $limit*($page – 1)
$start = ($start<0)?0:$start; // make sure that $start is not a negative value

$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
foreach($query as $row) {
$responce->rows[$i][‘id’]=$row->id;
$responce->rows[$i][‘cell’]=array($i+1,$row->date,$row->name,$row->amount);
$i++;
}
echo json_encode($responce);
}
[/php]

fungsi jqGrid adalah fungsi yang nantinya kita panggil, sehingga URL nya akan menjadi (http://localhost/ci_ku/index.php/daily/jqGrid)

Kemudian fungsi loadDataGrid adalah fungsi yang dipanggil untuk meload data dari database dan ditampilkan dalam dormat JSON

untuk Model, tidak ada perubahan, karena kita hanya mengambil data sehingga bisa langsung di ambil dengan $this->MDaily->getAll();
kemudian untuk view saya buat seperti berikut :

[php]
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<link type="text/css" href="<?php echo base_url()?>jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<link type="text/css" href="<?php echo base_url()?>jqgrid/css/jquery.searchFilter.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/jquery.jqGrid.js"></script>

<title>Demo Jquery JqGrid Codeigniter</title>
</head>
<body>
<?
$ci =& get_instance();
$base_url = base_url();
?>

<script type="text/javascript">
jQuery().ready(function (){
jQuery("#list1").jqGrid({
url:'<?=$base_url.’index.php/daily/loadDataGrid’?>’, //another controller function for generating data
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:[‘No’,’Date’,’Name’,’Amount’], //Grid column headings
colModel:[
{name:’no’,index:’no’, width:5, align:"right"},
{name:’date’,index:’date’, width:30, align:"left"},
{name:’name’,index:’name’, width:20, align:"left"},
{name:’amount’,index:’amount’, width:20, align:"right"},
],
rowNum:10,
width: 450,
height: 100,
rowList:[10,20,30],
pager: ‘#pager1’,
sortname: ‘id’,
viewrecords: true,
caption:"List Daily"
}).navGrid(‘#pager1’,{edit:false,add:false,del:false});
});
</script>

<table id="list1"></table> <!–Grid table–>
<div id="pager1"></div> <!–pagination div–>
</body>
</html>
[/php]

Perlu diperhatikan juga direktori kita untuk meload jqgrid. Jqgrid dapat didownload pada halaman ini. Kemudian ekstrak pada root direktori project CI. Sesuaikan pada file jquery.jqGrid.js pada baris berikut, sesuai path tempat direktori Anda

var pathtojsfiles = "http://localhost/ci_ku/jqgrid/js/"; // need to be ajusted

Untuk demo bisa di lihat pada halaman ini dan source code ada pada github saya 🙂

Semoga berhasil 🙂

Update, untuk sorting data, silahkan controllernya yang
[php]$query = $this->MDaily->getAll();[/php]
diganti
[php]$query = $this->MDaily->getAll($limit,$sidx,$sord);[/php]
Kemudian bagian model diubah menjadi
[php]
function getAll($limit,$sidx,$sord){
$this->db->select(‘id,date,name,amount’);
$this->db->from(‘daily’);
$this->db->limit($limit);
$this->db->order_by($sidx,$sord);
$query = $this->db->get();

return $query->result();
}
[/php]

Update lagi, bagi yang akan mengaktifkan fitur search, ada pada artikel Berikut

51 thoughts on “Tutorial menggunakan Codeigniter dan JqGrid”

      1. dudu Post author

        gapapa.. eh dimana ya sql dump nya? kayanya emang belum saya buat 😀 maklum lupa,, tapi dilihat dari struktur tabel aja, kan gampang udah kelihatan 🙂

        Senang bisa membantu,,,

        Reply ↓
  5. harry

    mas… alamat localhost di file var pathtojsfiles = “http://localhost/ci_ku/jqgrid/js/”; digan ti sama base_url gmn carangya mas???soalnya klo diakses dari komputer lain gak nampil gridnya…
    thanks mas…

    Reply ↓
    1. dudu Post author

      karena itu file javascript, jadi ga bisa di ganti ke base_url. Alternatif lain ya di ganti ke direktori saja var pathtojsfiles = “./jqgrid/js/”; mungkin seperti itu atau bisa di sesuaikan lagi.

      Reply ↓
  6. aa_pratomo

    gan mau tanya nih klo mau ngasih format penomeran gimana yah? misalnya didatabase terdapat value 6000 nanti dijqgrid nampak 6.000,00 gimana ya gan?

    Reply ↓
  8. arlingga

    mas bagus sekali tutorialnya, saya sengan baca blog ini, mas saya lagi belajar2 ci nih, masih pemula, oh ya klo boleh saya tanya, bagaimana mengkombine script diatas, untuk admin saja,… mksud saya klo user biasa tidak bisa create update ato delete… bingung juga jelasinnya, yg pasti klo di wordpres, ada administrator user, trs ada moderator, ada user biasa,… jadi kaya CMS gitu mas, gmna ya… trimakash…

    Reply ↓
    1. dudu Post author

      lho itu malah ga bisa create sama delete mas, suma show content aja 😀 bisa aja sih ditambahin sendiri kalo mau.

      Kalo cuma admin gitu ya pake authentication library aja mas, buat CI banyak pilihannya, buat sendiri juga boleh 🙂

      Reply ↓
  9. RiQ

    saya punya masalah tiap untuk web browser Internet Explorer 8..
    tiap kali saya refresh kadang keluar warning yang bertuliskan jgrid is null or not object..
    bila keluar warning itu jqgrid tidak berjalan sama sekali..
    kira-kira kenapa ya?

    Reply ↓
    1. dudu Post author

      Apakah jqgrid yang Anda download sudah lengkap? Mungkin ada file jqgrid yang belum di sertakan misalnya grid.formedit.js dan grid.common.js atau yang lain

      Reply ↓
  11. kaka

    datanya sdh bs tampilkan mas rupanya salah pada path url nya hehe..slanjutnya klo mau menambahkan addrow,deleterow di navigatornya bgaimana caranya ya mas

    Reply ↓
  13. andiliee

    mas , ma’af nanya …..
    Itu JQuerynya kok dimasukin dalam View nya ya ?

    Ada ga cara buat misahin dalam folder sendiri + cara manggilnya gt …. baru belajar HMVC.

    Makasih

    Reply ↓
  18. rama

    kok tabelnya ga bisa sorting? cara biar bisa sorting gimana ya? hal sederhana sih tp penting juga tuh. Ditunggu ya infonya

    Reply ↓
    1. dudu Post author

      ah iya, saya lupa memasukkan untuk sortingnya :), ubah bagian controller untuk memanggil query model seperti ini :

      [php]
      //sebelumnya $query = $this->MDaily->getAll();
      $query = $this->MDaily->getAll($limit,$sidx,$sord);
      [/php]

      kemudian di bagian modelnya function getAll menjadi sbb
      [php]
      function getAll($limit,$sidx,$sord){ //menambahkan parameter
      $this->db->select(‘id,date,name,amount’);
      $this->db->from(‘daily’);
      $this->db->limit($limit);//limitnya
      $this->db->order_by($sidx,$sord); //ini untuk sortingnya yang kemaren kelupaan 🙂
      $query = $this->db->get();

      return $query->result();
      }
      [/php]

      Reply ↓
  19. cecep

    Mas saya coba download aplikasi contohnya ada error di baris:
    jQuery(“#list1″).jqGrid is not a function
    [Break On This Error] caption:”List Daily”

    caption “List Daily” itu ada di databasenya atau seting jqgrid

    Mohon pencerahan

    Reply ↓
  22. Arif

    bagaimana caranya jika ingin menghidupkan fungsi add, edit dan del.
    di :
    }).navGrid(‘#pager1’,{edit:false,add:false,del:false});
    statusnya sdh sy buat true semua, pd saat sy klik form-nya muncul tp tdk ada kolom u2 mengisi, yg ada hanya tombol submit dan cancel.

    bisa bantu.?

    Reply ↓
  24. dwijonarko

    query nya? data tabelnya sudah ada?

    Banyak hal yang bisa anda trace kesalahan itu ada dimana, karena penyebab tiap orang pasti beda,apalagi saya ga tau koding Anda seperti apa 🙂

    so, berusahalah

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.