Fork me on GitHub
 Like...


4 Sep
2011
KATEGORI : TUTORIAL CODEIGNITER - Dibaca : 7939 kali
Ditulis oleh :    Ada 29 Komentar Seru

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

Tentang Gede Lumbung
Seorang anak SMK yang gak keren, bocah ingusan & kutu kupret yang haus pengen terus belajar segala hal yang baru, makhluk aneh yang tertarik dengan gemerlap dunia Informatika dan Open Source. Pokoknya gak ada yang keren dari bocah lulusan SMK ini.

29 Komentar Seru

  • lebih bagus lagi ada preview-nya..

    ini semua kode diketik sendiri???

  • [...] tutorial @gedelumbung..com, Carbo Grid [...]

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

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

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

  • 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

  • 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
    =========================================

  • 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

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

    • fungsi edit datanya gak jalan. trus short by … – jg gak jalan

    • fotomu kyk anjink gan

    • gan kok ngak bisa download pada udah saya daftar, tapi ngak da yang masuk di email sy kok gan?
      mhon bantuannya

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

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

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

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

  • 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.

  • 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…

    • enakan pake ACTIVE RECORD bang Eroeol…

  • 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 :)

  • gan kok ngak bisa di download?

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

  • makasih y sangat membantu sekali saya senang punya kenalan sepertisaudara

  • 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

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

    Makasih banyak mas

  • demo error link nya gan

  • […] ref : http://gedelumbung.com/tutorial-codeigniter-jqgrid-menampilkan-data-grid-dengan-jqgrid-di-codeignite… […]

  • 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

Ayoookkk di-komen brow...