Beranda > CodeIgniter, Pemrograman, Software, Uncategorized > Codeigniter – Menggabungkan Jqgrid dengan Codigniter

Codeigniter – Menggabungkan Jqgrid dengan Codigniter

Codeigniter

Jqgrid memberikan kesan profesional dalam menyajikan data ke dalam bentuk tabel. Dengan kelengkapan seperti: Basic searching yang telah tertanam didalamnya, fungsi editing secara realtime, themes, Subgrid, Integrasi dengan jQuery UI Datepicker, mendukung XML dan JSON, dan masih banyak lagi.

jqgrid

Dalam tutorial ini, kita akan coba menggabungkan Jqgrid dengan Codigniter menggunakan metode XML. Berikut langkah-langkahnya :

1. Ikuti 4 langkah pertama pada tutorial Codeigniter sebelumnya Codeigniter – Mengakses Database.

2. Buka file  application\config\routes.php

Ubah :

 $route['default_controller'] = "welcome";

Menjadi :

$route['default_controller'] = "jqgrid_controller";

3. Copykan file-file yang dibutuhkan untuk Jqgrid kedalam folder assets pada root folder Codeigniter.

4. Buat sebuah file Controller pada application\controllers\jqgrid_controller.php.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 

class jqgrid_controller extends CI_Controller
{
function __construct() 
    { 
    parent::__construct(); 
    $this->load->helper('url');
     $this->load->model(array('jqgrid_model'));
    } 

public function index()
{
$this->load->view('grid/jqgrid_view');
}

public function constructWhere($s)
        {
            $qwery = "";
            //['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
            $qopers = array(
                            'eq'=>" = ",
                            'ne'=>" <> ",
                            'lt'=>" < ",
                            'le'=>" <= ",
                            'gt'=>" > ",
                            'ge'=>" >= ",
                            'bw'=>" LIKE ",
                            'bn'=>" NOT LIKE ",
                            'in'=>" IN ",
                            'ni'=>" NOT IN ",
                            'ew'=>" LIKE ",
                            'en'=>" NOT LIKE ",
                            'cn'=>" LIKE " ,
                            'nc'=>" NOT LIKE " );
 
            if ($s)
            {
                $jsona = json_decode($s,true);
                if(is_array($jsona))
                {
                    $gopr = $jsona['groupOp'];
                    $rules = $jsona['rules'];
                    $i =0;
                    foreach($rules as $key=>$val)
                    {
                        $field = $val['field'];
                        $op = $val['op'];
                        $v = $val['data'];
                        if($v && $op)
                        {
                            $i++;
                            // ToSql in this case is absolutley needed
                            $v = $this->ToSql($field,$op,$v);
                            if ($i == 1) $qwery = " AND ";
                            else $qwery .= " " .$gopr." ";
                            switch ($op)
                            {
                                // in need other thing
                                case 'in' :
                                case 'ni' :
                                    $qwery .= $field.$qopers[$op]." (".$v.")";
                                    break;
                                default:
                                    $qwery .= $field.$qopers[$op].$v;
                            }
                        }
                    }
                }
            }
            return $qwery;
        }
 
        public function Strip($value) {
            if(get_magic_quotes_gpc() != 0)
            {
                if(is_array($value))
                    if ( array_is_associative($value) )
                    {
                        foreach( $value as $k=>$v)
                            $tmp_val[$k] = stripslashes($v);
                        $value = $tmp_val; 
                    }
                    else
                        for($j = 0; $j < sizeof($value); $j++)
                            $value[$j] = stripslashes($value[$j]);
                else
                    $value = stripslashes($value);
            }
            return $value;
        }
        
public function loadData()
        {
            $responce = new StdClass;
            // load data jqgrid
            if(isset($_GET['page'])){ $page = $_GET['page']; }else{ $page = ''; }
            if(isset($_GET['rows'])){ $limit = $_GET['rows']; }else{ $limit = 1; }
            if(isset($_GET['sidx'])){ $sidx = $_GET['sidx']; }else{ $sidx = ''; }
            if(isset($_GET['sord'])){ $sord = $_GET['sord']; }else{ $sord = ''; }
 
            $wh_ews = "";
            $filter_cari = "false";
 
            if(isset($_REQUEST['_search'])) {
                $searchOn = $this->Strip($_REQUEST['_search']);
            }
            else {
                $searchOn = false;
            }
 
            if($searchOn=='true') {
                $filter_cari = "true";
                $searchstr = $this->Strip($_GET['filters']);
 
                $wh_ews = $this->constructWhere($searchstr);
 
                $manual_search="1";
            }
 
            $limit = 100;
 
            $result = $this->jqgrid_model->countData($wh_ews);
 
            if ($result) {
                $count = $result->row()->count;
                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)
                if($start <0) $start = 0;
                if(!$sidx) $sidx =1;
 
                $responce->page = $page; 
                $responce->total = $total_pages; 
                $responce->records = $count;
 
                $qry_data = $this->jqgrid_model->loadDataUser($wh_ews, $sidx, $sord, $start, $limit);
 
               

if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
    header("Content-type: application/xhtml+xml;charset=utf-8");
    } else {
            header("Content-type: text/xml;charset=utf-8");
           }
           
    $et = ">";
    echo "<?xml version='1.0' encoding='utf-8'?$et\n";
    echo "<rows>";
    echo "<page>".$page."</page>";
    echo "<total>".$totalpages."</total>";
    echo "<records>".$count."</records>";
    
                 $i=0;
                $def = '';
                foreach ($qry_data->result() as $row) {
                
                     echo "<row id='". $responce->rows[$i]['id']=$row->id."'>";
                    echo "<cell>".$responce->rows[$i]['id']=$row->id."</cell>";
                    echo "<cell>".$responce->rows[$i]['nama']=$row->nama."</cell>";
                    echo "<cell>".$responce->rows[$i]['alamat']=$row->alamat."</cell>";
                    echo "<cell>".$responce->rows[$i]['no_hp']=$row->no_hp."</cell>";
                    echo "<cell>".$responce->rows[$i]['email']=$row->email."</cell>";
                    echo "<cell>".$responce->rows[$i]['kelamin']=$row->kelamin."</cell>";
                    echo "</row>";              
                    $i++; 
                }

    echo "</rows>";
            }
 
        }
    
}

5. Buat sebuah file Model pada application\models\jqgrid_model.php.

<?php
    class jqgrid_model extends CI_Model {
        function __construct()
        {
            parent::__construct();
        }
 
    function countData($wh_ews)
        {
            $SQL = "SELECT * FROM 'sms1_pribadi'";
            $SQL_COUNT = "SELECT count(*) AS count FROM sms1_pribadi as a ".$wh_ews."";
 
            return($this->db->query($SQL_COUNT));
        }
 
    function loadDataUser($wh_ews, $sidx, $sord, $start, $limit)
        {
            $SQL1 = "SELECT * FROM 'sms1_pribadi'";
             $SQL1 = "SELECT * FROM sms1_pribadi AS a WHERE 1=1 ".$wh_ews." ORDER BY ".$sidx." ".$sord." LIMIT ".$start." , ".$limit;
 
            return($this->db->query($SQL1));
        }
    }

6. Buat sebuah file View pada application\views\grid\jqgrid_view.php.

 <!-- CSS -->

<link rel="stylesheet" type="text/css" media="screen" href="assets/css/redmond/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/ui.theme.css" />

 <!-- script jqgrid -->
<script src="<?php echo base_url() ?>assets/js/jquery-1.9.0.min.js"></script>
<script src="<?php echo base_url() ?>assets/js/i18n/grid.locale-en.js"></script>
<script src="<?php echo base_url() ?>assets/js/jquery.jqGrid.min.js"></script>
<script src="<?php echo base_url() ?>assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="<?php echo base_url() ?>assets/js/jquery.ui.dialog.js"></script>

<script type="text/javascript"> 

var base_url = '<?php echo base_url() ?>';
jQuery().ready(function (){

jQuery("#list1").jqGrid({
       url: base_url+'jqgrid_controller/loadData',
    //url:'server.php?q=1',
    datatype: "xml",
       colNames:['ID','Nama', 'Alamat', 'No HP','Email','Kelamin'],
       colModel:[
           {name:'id',index:'id', width:20},
           {name:'nama',index:'nama', width:90},
           {name:'alamat',index:'alamat', width:100},
           {name:'no_hp',index:'no_hp', width:80, align:"left"},
           {name:'email',index:'email', width:80, align:"left"},        
           {name:'kelamin',index:'kelamin', width:80,align:"left"}    
           
       ],
    width: 850,
    height:250,
       rowNum:10,
       //autowidth: true,
       rowList:[10,20,30],
       pager: jQuery('#pager1'),
       sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    caption:"Data Member"
}).navGrid('#pager1',{search: false, edit:false,add:false,del:false});    
});
</script> 
<body>

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

7. Sumber beragam. Sorry buat yg ilmunya gw pake di tutorial ini, gw lupa….

  1. 27 April 2016 pukul 10:12 am

    terimaksih gan tutorialnya sangatmembantu

  1. No trackbacks yet.

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

%d blogger menyukai ini: