Minggu, 14 April 2013

4/14/2013
4
Entah kenapa saya sering sekali mendengar dari orang lain membicarakan mengenai jqgrid bahwa jqgrid itu bagus. Nah menurut saya sendiri jqgrid itu biasa-biasa saja, apa mungkin karena saya belum begitu mendalaminya sehingga tidak begitu paham. Tetapi lepas dari itu CGridView tetap menjadi primadona buat saya. Nah Loh, kok CGridView primadona di artikel ini malah bahas JqGrid. hehe Ini sebenarnya hanya iseng-iseng saja sebatas mengisi kekosongan di hari minggu :D Ok langsung saja, oya jangan jupa download extensions JqGrid,  disini saya ubah JqGrid.php karena memiliki beberapa kekurangan. Berikut script yang telah saya ubah.

<?php

/**
 * Copyright: milkyway <yhxxlm@gmail.com>
 * Base on <http://trirand.com/blog/jqgrid/jqgrid.html>
 * Created on 2013-04-10
 * 
 * This extension have to be installed into:
 * <Yii-Application>/proected/extensions/jqgrid
 * See also:<https://github.com/tonytomov/jqGrid>
 *
 * @modifed by Dida Nurwanda
 */
Yii::import('zii.widgets.jui.CJuiWidget');

class jqgrid extends CJuiWidget {

    public $coreCss = true;
    public $coreJs = true;
    public $forceCopyAssets = true;
    public $options = array();
    public $language = '';

    /**
     * @var array the HTML attributes that should be rendered in the HTML tag representing the JUI widget.
     */
    public $htmlOptions = array();

    /**
     * @var string handles the assets folder path.
     */
    protected $_assetsUrl;

    public function init() {
        parent::init();
        // Register the jqgrid path alias.
        if (Yii::getPathOfAlias('jqgrid') === false)
            Yii::setPathOfAlias('jqgrid', realpath(dirname(__FILE__) . '/'));

        if ($this->coreCss !== false)
            $this->registerCoreCss();

        if ($this->coreJs !== false)
            $this->registerCoreJs();
    }

    /**
     * Registers the jqgrid CSS.
     */
    public function registerCoreCss() {
        $this->registerAssetCss('ui.jqgrid.css');
    }

    /**
     * Registers a specific css in the asset's css folder
     * @param string $cssFile the css file name to register
     * @param string $media the media that the CSS file should be applied to. If empty, it means all media types.
     */
    public function registerAssetCss($cssFile, $media = '') {
        Yii::app()->getClientScript()->registerCssFile($this->getAssetsUrl() . "/css/{$cssFile}", $media);
    }

    /**
     * Registers the jqgrid JS.
     */
    public function registerCoreJs() {
        $this->registerJS('jquery.jqGrid.js');
    }

    /**
     * Registers the jqgrid JavaScript.
     * @param int $position the position of the JavaScript code.
     * @see CClientScript::registerScriptFile
     */
    public function registerJS($jsFile, $position = CClientScript::POS_HEAD) {
        /* @var CClientScript $cs */
        $cs = Yii::app()->getClientScript();
       // $cs->registerCoreScript('jquery');
       // $cs->registerCoreScript('jquery.ui');
        $cs->registerScriptFile($this->getAssetsUrl() . "/js/{$jsFile}", $position);
    }

    public function run() {
        $id = $this->getId();
        if (isset($this->htmlOptions['id']))
            $id = $this->htmlOptions['id'];
        else
            $this->htmlOptions['id'] = $id;
        
        if(!isset($this->options['pager']))
            $this->options['pager']='#pager-'.$id;
            
        echo "<table id='$id'></table>\n";
        echo "<div id='pager-$id'></div>";
        $options = CJavaScript::encode($this->options);

        $cs = Yii::app()->getClientScript();
        $cs->registerScript(__CLASS__ . '#' . $id, "$(function(){jQuery('#{$id}').jqGrid($options);})", CClientScript::POS_HEAD);
        $cs->registerScriptFile($this->getAssetsUrl() . '/js/i18n/grid.locale-' . $this->language . '.js', CClientScript::POS_HEAD);
    }

    /**
     * Returns the URL to the published assets folder.
     * @return string the URL
     */
    public function getAssetsUrl() {
        if (isset($this->_assetsUrl))
            return $this->_assetsUrl;
        else {
            $assetsPath = Yii::getPathOfAlias('jqgrid.assets');
            $assetsUrl = Yii::app()->assetManager->publish($assetsPath, false, -1, $this->forceCopyAssets);
            return $this->_assetsUrl = $assetsUrl;
        }
    }

}

Lanjut ke demo, pertama buat contoh database dengan table seperti berikut
CREATE TABLE IF NOT EXISTS `barang` (
  `kode_barang` char(15) NOT NULL,
  `nama_barang` varchar(100) NOT NULL,
  `satuan` char(10) NOT NULL,
  `harga_beli` bigint(20) NOT NULL,
  `harga_jual` bigint(20) NOT NULL,
  `stok_awal` int(11) NOT NULL,
  PRIMARY KEY (`kode_barang`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `barang` (`kode_barang`, `nama_barang`, `satuan`, `harga_beli`, `harga_jual`, `stok_awal`) VALUES
('B001', 'Hardisk 40Gb', 'PCS', 230000, 250000, 5),
('B002', 'Hardisk 60Gb', 'PCS', 240000, 260000, 4),
('B003', 'Hardisk 80Gb', 'PCS', 250000, 270000, 7),
('B005', 'Keyboard PS2', 'PCS', 35000, 45000, 70),
('B006', 'Mouse PS2', 'PCS', 25000, 30000, 0),
('B007', 'Processor Dual Core', 'PCS', 1200000, 1400000, 0);

Selanjutnya buat koneksi ke project Yii Anda, setelah itu buat model dan crud-nya. Disini saya menggunakan nama model Barang dan Controller BarangController. Setelah itu buka admin.php pada views/barang. kemudian hapus widgets CGridView dan gantikan dengan script dibawah ini.

<?php $this->widget('ext.jqgrid.JqGrid',array(
    'id'=>'barang-grid',
    'language'=>'id',
    'options'=>array(
        'url'=>$this->createUrl('/barang/json'),
        'mtype'=>'POST',
        'datatype'=>'json',
        'rowNum'=>4,
        'width'=>'auto',
        'sortname'=>'kode_barang',
        'height'=>'auto',
        'caption'=>'Kelola Barang',
        'colNames'=>array(
            'Kode Barang',
            'Nama Barang',
            'Satuan',
            'Harga Beli',
            'Harga Jual',
            'Stok Awal'
        ),
        'colModel'=>array(
            array('name'=>'kode_barang','index'=>'kode_barang','width'=>100),
            array('name'=>'nama_barang','index'=>'nama_barang','width'=>100),
            array('name'=>'satuan','index'=>'satuan','width'=>100),
            array('name'=>'harga_beli','index'=>'harga_beli','width'=>100),
            array('name'=>'harga_jual','index'=>'harga_jual','width'=>100),
            array('name'=>'stok_awal','index'=>'stok_awal','width'=>100),
        )
    )
)); ?>

dan kemudian pada BarangController tambah script berikut

public function actionJson()
{
    if(!Yii::app()->request->isPostRequest)
        throw new CHttpException(404,'The requested page does not exist.');
    
    $page = isset($_POST['page']) ? $_POST['page'] : 1;
    $rows = isset($_POST['rows']) ? $_POST['rows'] : 10;
    $sort = isset($_POST['sidx']) ? $_POST['sidx'] : 'nama_barang';
    $order = isset($_POST['sord']) ? $_POST['sord'] : 'desc';
        
    $criteria = new CDbCriteria;
    $criteria->offset = ($page-1) * $rows;
    $criteria->limit = $rows;
    $criteria->order=$sort.' '.$order;
    
    $data = Barang::model()->findAll($criteria);
    
    $return=array();
    $return['records'] = Barang::model()->count();
    $return['total'] = ceil($return['records']/$rows);
    $return['rows'] = $data;
    echo CJSON::encode($return);
}

Jangan jupa menambahkan json pada actionRules agar function json dapat di aksess.

Berikut Penampakannya
Download
Password : didanurwanda.blogspot.com

4 komentar:

  1. mantap gan, postingan ente sama bgt sma kya yg sedang ane pelajarin gan.. CI dan Yii, tp ente kyanya lbih experience dbnding ane, ane bru coba 1 bulan di CI dan smggu di yii...

    lanjutkan trus gan berbagi nya,,

    BalasHapus
  2. mantap gan, thanks udah share ilmu ya.. kepake banget nih di project ane. :)

    BalasHapus

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.