Tutorial CodeIgniter + jQgrid : Menampilkan Data Grid Dengan jQgrid Di CodeIgniter

Tak terasa, sudah 4 hari saya absen dari dunia per-blog’an. Saking asiknya menikmati liburan di kampung halaman, yang kaya akan gadis-gadis seksi. Yaw itulah hobi baru saya kalau lagi di Denpasar, keliling gowes-gowes naik sepeda untuk melihat pemandangan yang bening. Walau tak satupun yang berhasil saya pikat, apalagi minta nomor hape-nya (nasib punya wajah pas-pas’an). Dan tadi pagi, saya kembali melancarkan aksi gowes-gowes keliling Denpasar. Semakin mantap karena setiap hari minggu akan ada Car Free Day, dimana segala jenis kendaraan bermotor tidak diperbolehkan melintas di kawasan lapangan Niti Mandala Renon. Sehingga banyak orang-orang yang memanfaatkan momen itu untuk berolahraga. Tua – muda, kecil – besar, jelek – cantik, semuanya ada disana. Disana pula saya bertemu dengan seorang kawan lama (sebut saja namanya Adi). Adi ini dulu teman saya semasa SMP, si doi sekarang udah jadi junior web desainer di sebuah perusahaan jasa website ternama di Denpasar (jadi minder nih). Sembari beristirahat + menyantap lumpia, si Adi pun bertanya seputaran dunia website kepada saya yang katrok ini. Kebetulan dia mendapat project, dan dia bingung mengimplementasikan jQgrid dengan CodeIgniter. Hmm…saya juga kemarin baru sempat mencoba jQgrid di CodeIgniter. Lumayan pusing juga dibuatnya, tetapi akhirnya jadi juga. Nah, pada postingan kali ini saya akan mencoba menjelaskan sedikit tentang cara penggunaan jQgrid di CodeIgniter :

1. Silahkan dipelajari dulu sedikit tentang dokumentasi jQgrid di http://www.trirand.com/blog/. Download juga plug-in jQgrid versi terbarunya.

2. Setelah selesai di-download, ekstrak file tersebut ke dalam direktori root web rekan-rekan. Sebelumnya, buatlah sebuah folder asset, yang didalamnya terdapat folder jqgrid, tempat untuk menaruh file-file library jQgrid (contohnya : http://localhost/web/asset/jqgrid).

3. Sekarang kita langsung menuju ke pembuatan Controller. Pada Controller, saya hanya membuat dua buah fungsi, yaitu index dan fungsi untuk melakukan generate/memanggil data. Dalam proses parsing data, saya menggunakan format JSON yang lebih mudah daripada XML. Kira-kira script Controller-nya seperti di bawah ini :

class jqgrid extends CI_Controller {

	function __construct()
	{
		parent::__construct();
		$this->load->helper(array('url'));
		$this->load->model('dosen_jqgrid_model');
		$this->load->database();
	}

	function index()
	{
    		$this->load->view('jqgrid/home');
	}

	function tampil_data(){
		$hal = isset($_POST['page'])?$_POST['page']:1;
		$batas = isset($_POST['rows'])?$_POST['rows']:10;
		$sidx = isset($_POST['sidx'])?$_POST['sidx']:'nama_dosen';

		if(!$sidx) $sidx =1;
		$q = $this->dosen_jqgrid_model->tampil_dosen_semua();

		$hitung = count($q);

		if( $hitung > 0 ) {
		    $total_hal = ceil($hitung/$batas);
		} else {
		    $total_hal = 0;
		}

		if ($hal > $total_hal) $hal=$total_hal;

		$start = $batas*$hal - $batas;
		$start = ($start<0)?0:$start;

		$data->page = $hal;
		$data->total = $total_hal;
		$data->records = $hitung;
		$i=0;
		foreach($q->result() as $row) {
		    $data->rows[$i]['id']=$row->kode_dosen;
		    $data->rows[$i]['cell']=array($i+1,$row->kode_dosen,$row->NIDN,$row->nama_dosen);
		    $i++;
		}
		echo json_encode($data);
	}
}

4. Sekarang kita lanjut untuk membuat Model-nya. Saya hanya menggunakan perintah select biasa, otomatis fungsi-fungsi yang dimiliki oleh jQgrid seperti sorting, search, insert, update, dan delete tidak berfungsi. Saya masih belajar untuk menjalankan semua fungsi-fungsi tersebut, maklum saya ini masih newbie banget di ranah yang beginian.

class dosen_model extends CI_Model{
	function __construct()
	{
		parent::__construct();
	}
	function tampil_dosen_semua()
	{
		$q = $this->db->query("select * from tbl_nama_dosen");
		return $q;
	}
}

5. Yang terakhir, kita akan membuat sebuah view untuk menampilkan data dari tabel yang telah ditentukan. Menurut pengalaman saya pribadi, disini kita perlu berhati-hati dalam pemanggilan plug-in javascript yang dibutuhkan. Kalau salah, dijamin tampilannya bakal mengecewakan seperti yang telah saya alami :D. Ouw yaw, karena jQgrid menggunakan jQuery UI untuk mempercantik tampilannya, kita harus mengambil link css dan javascript dari situs jqueryui.com. Bisa juga di download, bagi yang ingin mencoba via offline. Asiknya lagi, theme yang disediakan oleh jQuery UI sangat beragam dan semuanya menarik.

<!DOCTYPE HTML>
<html>
    <head>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dark-hive/jquery-ui.css" type="text/css" rel="stylesheet"/>
        <link href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" rel="stylesheet"/>
        <link type="text/css" href="<?php echo base_url()?>asset/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
        <link type="text/css" href="<?php echo base_url()?>asset/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 src="<?php echo base_url(); ?>asset/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
        <script src="<?php echo base_url(); ?>asset/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
        <script src="<?php echo base_url(); ?>asset/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

        <title>Menampilkan Data Grid Dengan jQgrid Di CodeIgniter</title>
    </head>

    <body>
        <script type="text/javascript">
            jQuery().ready(function (){
                jQuery("#daftardosen").jqGrid({
                    url:'<?php echo base_url().'index.php/jqgrid/tampil_data'?>',
                    mtype : "post",
                    datatype: "json",
                    colNames:['Nomor','Kode Dosen','NIDN','Nama Dosen'],
                    colModel:[
                        {name:'nomor',index:'nomor', width:10, align:"center"},
                        {name:'kode_dosen',index:'kode_dosen', width:15, align:"center"},
                        {name:'nidn',index:'nidn', width:10, align:"center"},
                        {name:'nama_dosen',index:'nama_dosen', width:40, align:"center"},
                    ],
                    rowNum:10,
                    width: 800,
                    height: 200,
                    rowList:[10,20,30,40,50,60,70],
                    pager: '#pager1',
                    sortname: 'kode_dosen',
                    viewrecords: true,
                    caption:"Daftar Nama-Nama Dosen di Kampus Ane"
                }).navGrid('#pager1',{edit:true,add:true,del:true});
            });
        </script>

        <table id="daftardosen"></table>
        <div id="pager1"></div>
    </body>

Wah, lumayan ruwet juga yaw coding’nya. Tetapi kalau sering dicoba, dijamin bisa (bisa pusing maksudnya :D). Semoga di postingan saya selanjutnya, saya bisa menerapkan CRUD pada jQgrid ini, sehingga bisa diandalkan untuk mengelola data dengan tampilan jQuery UI yang menawan. OK deh, sekian dulu postingan saya kali ini. Mudah-mudahan bisa bermanfaat untuk rekan-rekan semuanya.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!

Download Aplikasi

32 comments

  1. Pingback: grid codeigniter | blog nya adi

  2. benny Reply

    sumpah keren abis.., klo misalnya ditambah foto lebih mantap lg it, klo ad postingan baru kabari ya, maksih. tutorial
    sangat membantu

  3. Bambang Soeprijanto Reply

    Saya membuat kok tidak keluar datanya, namun Gridnya tampil apa sebabnya tolong diberi tuntunan , terima kasih sebelumnya

    • zackrulez Reply

      aku juga alamin kaya gini..kalo objeknya di bukin tunggal, datanya bisa tampil. tapi kalo di gabungkan dengan program datanya ngk ada…

  4. mulki Reply

    Salam kenal sebelumnya mas gede.

    Mantaf tutorialnnya, di ajarkan mas cara narik data dari 2 tabel utk ditampilkan di accordion menu dg CI. Gambarannya seperti ini saya punya tabel tahun (id, year) dan tabel shipment (id, ship_year, ship_date, doc_product, title, document). Relasi antar kedua tabel adalh 1 to many. yg dimunculkan pertama pada accordionnya adalah tahun dan pada saat tahun trsbt saya klik maka akan muncul nama bulan dibawahnya. saat nama bulan saya kilik maka akan muncul data2 dibulan tersbt di content right bar website.

    Mohon pencerahannya mas gede.

    thx & wassalam,
    mulki

  5. rudy Reply

    mas minta tolong, waktu ku buka web nya kok ada keterangan kayak di bawah ini ya,
    =========================================
    A Database Error Occurred

    Unable to connect to your database server using the provided settings.

    Filename: C:\xampp\htdocs\CI\grid\system\database\DB_driver.php

    Line Number: 124
    =========================================

  6. Muhammad Hafid Reply

    Yang saya bingung bagaimana cara menampilkan datanya berelasi antara 1 dengan yang lain.
    kalo untuk tutorial menampilkan 1 tabel saja dengan jqgrid di CI atau di php manual saya sudah berhasil.

    Mohon pencerahannya.
    By Email

  7. Gede Lumbung Post authorReply

    maksudnya relasi join gtu yaw???
    coba di querynya aja yg dibuat sistem join, jadinya pas di view tinggal dipanggil aja fileld2 yg ingin ditampilkan…

  8. sanz Reply

    makasih tutorialny,,
    kpan ada lanjutan bisa crudny?
    kami tunggu,,
    sekali lagi tutorial makasih byk, moga dapat balasan yang berlipat”

  9. Ramadani Reply

    fungsi edit dan deletenya ga’ jalan,.. “url is no set”,.. ada solusi gan??? mksh

  10. ramadani Reply

    fungsi edit dan deletenya tdk jalan… url is no set… ada solusi gan??? mksh…

  11. gusbombom Reply

    mantap brow….
    ne mare jeg jaen …. terus kembangkan kawan…

  12. eroeol Reply

    pak mau nanya,
    1. cara membuat menu delete di jqgrid gimana ya?
    2.itu tampilan formnya bisa warna hitam gimana ya, saya coba kok warnanya orange.

  13. eroeol Reply

    3.kalau menampilkan relasi 3 tabel gimana ya pak

    ne skrip utk 1 tabel nya :

    $where = “”; //jika tidak ada permintaan pencarian yang dikirimkan oleh jqgrid, $where kosong
    $searchField = isset($_GET[‘searchField’]) ? $_GET[‘searchField’] : false;
    $searchOper = isset($_GET[‘searchOper’]) ? $_GET[‘searchOper’]: false;
    $searchString = isset($_GET[‘searchString’]) ? $_GET[‘searchString’] : false;
    if ($_GET[‘_search’] == ‘true’) {
    $where = getWhereClause($searchField,$searchOper,$searchString);
    }

    $data = mysql_query(“SELECT COUNT(*) as count FROM data_mustahiq”.$where);
    $row = mysql_fetch_array($data);
    $count = $row[“count”];

    $count > 0 ? $total_pages = ceil($count/$limit) : $total_pages = 0;
    if ($page > $total_pages) $page=$total_pages;
    $start = $limit*$page – $limit;
    if($start 0 ? $total_pages = ceil($count/$limit) : $total_pages = 0;
    if ($page > $total_pages) $page=$total_pages;
    $start = $limit*$page – $limit;
    if($start <0) $start = 0;

    $data1 = mysql_query("SELECT * FROM data_muzakki, data_mustahiq, data_penyaluran_zakat WHERE data_muzakki.id_muzakki=data_penyaluran_zakat.id_muzakki AND data_penyaluran_zakat.id_mustahiq=data_mustahiq.id_mustahiq ORDER BY $sidx $sord LIMIT $start, $limit");

    ===============
    Mohon pencerahannya…

  14. hamzic Reply

    kk sya muncul pesan error => Message: Creating default object from empty value y mas? d skrip bagian $data->page = $hal; . sya make ci juga . mhon pencerahannya 🙂

  15. denny Reply

    kok datanya kosong gan .. tabelnya sih keluar .. kenapa ya? ada yang salah?

  16. angga Reply

    makasih y sangat membantu sekali saya senang punya kenalan sepertisaudara

  17. Ramdan Suseno Reply

    Mas..minta ijin download..(tp dah download duluan, hehehe), ketika sy buka di folder aplikasi ini library grid.inlinedit.js..ajarin dong gan..bagaimana caranya bikin aplikasi edit isi (update table) cell di row tertentu tanpa lewat form lain atau pop up pake CI-JSON dan library grid.inlinedit.js..

    thanks..thanks

  18. ramdan suseno Reply

    mas…minta contoh master detil pake jQGrid dong..saya dah coba yg dari demonya Jqgrid mau diterapkan ke CI bingung…

    Makasih banyak mas

  19. Pingback: Tutorial CodeIgniter + jQgrid : Menampilkan Data Grid Dengan jQgrid Di CodeIgniter | iwansupriyono

  20. windu Reply

    Mas, datanya ga muncul di tabel jqgridnya. kenapa ya? di tes “tampil_data” ada warning :
    A PHP Error was encountered

    Severity: Warning

    Message: Creating default object from empty value

    Filename: controllers/jqgrid.php

    Line Number: 38

  21. Lea Ramadhan SP Reply

    Pa saya mau bertanya,,,
    ketika saya mencobanya dan menambahkan tabel untuk di view,,,
    ketika dijalankan malah datanya tidak tampil,,,,
    semua file js atau apapun itu sudah terload dengan baik dan tidak ada error satupun,,,
    hanya saja datanya tidak bisa ditampilkan,,,,
    jadi seperti datanya itu kosong,,,
    padahal di database ada banyak sekali datanya,,,

    untuk query menampilkan datanya (di file model) :

    function tampil_semua(){
    $baca = $this->db->get(‘karyawan’);
    if($baca->num_rows() > 0){
    foreach ($baca->result() as $data){
    $hasil[] = $data;
    }
    return $hasil;
    }
    }

    mohon bantuannya pa,
    terimakash banyak

    • Lea Ramadhan SP Reply

      sudah berfungsi dengan normal,,,,

      tutorial untuk Create Update dan Deletenya kapan yah????

      saya tunggu,,,,,,,

      terimakasih banyak,,,,,,,