Senin, 29 April 2013

[CodeIgniter] Membuat Chart dengan menggunakan Highcharts

Sudah hampir dua minggu saya tidak menulis artikel dan pada kesempatan kali ini saya akan memberikan sedikit atau secuil contoh penerapan Highcharts pada CodeIgniter. Tetapi apa itu highcharts? Highcharts adalah media atau library javascript yang dapat digunakan untuk membuat Grafik Chart untuk sarana presentasi. Highcharts memiliki banyak dukungan charts dan menghasilkan grafik yang indah dan bersih. Mantep bukan ? :D

Langsung saja kepada contoh. Silahkan Anda download Highcharts terlebih dahulu dan kemudian simpan pada folder tertentu. disini saya menggunakan folder assets. Selanjutnya buat database baru dan isi dengan table seperti berikut.

CREATE TABLE IF NOT EXISTS `tbl_pendapatan` (
    `id` int(5) NOT NULL AUTO_INCREMENT,
    `tanggal` date NOT NULL,
    `hasil` int(10) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;
INSERT INTO `tbl_pendapatan` (`id`, `tanggal`, `hasil`) VALUES
(1, '2013-01-01', 30),
(2, '2013-02-01', 20),
(3, '2013-03-01', 90),
(4, '2013-04-01', 70),
(5, '2013-05-01', 20),
(6, '2013-06-01', 40),
(8, '2013-07-01', 90),
(9, '2013-08-01', 10),
(10, '2013-09-01', 90),
(11, '2013-10-01', 60),
(12, '2013-11-01', 90),
(13, '2013-12-01', 40);

Selanjutnya buat controller baru, akan tetapi saya disini hanya menggunakan controller welcome.php dan kemudian di isi dengan script berikut

public function __construct()
{
    parent::__construct();
    $this->load->helper(array('url','html'));
    $this->load->model('pendapatan');
}
    
public function index()
{
    $data=array();
    foreach($this->pendapatan->get()->result_array() as $row)
        $data[] = (int) $row['hasil'];
    $this->load->view('welcome_message',array('data'=>$data));
}

Kemudian buat model dengan nama pendapatan.php dengan isi sebagai berikut.

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

class pendapatan extends CI_Model
{

    public function __construct()
    {
        parent::__construct();
        $this->load->database();
    }
    
    public function get()
    {
        $this->db->select('*');
        $this->db->like('tanggal','2013-');
        $this->db->order_by('tanggal','asc');
        return $this->db->get('tbl_pendapatan');
    }
}

/* End of file pendapatan.php */
/* Location: ./application/models/pendapatan.php */

Selanjutnya buka view/welcome_message.php dan tambahkan script berikut.

</head>
<body>
<div id="container">
    <h1>CodeIgniter with Highcharts <span style="float:right">Dida Nurwanda</span></h1>

    <div id="body">
        <div id="chart"></div>
    </div>

    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

<script type="text/javascript" src="<?php echo base_url('/assets/jquery-1.7.2.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/assets/highcharts/highcharts.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/assets/highcharts/modules/exporting.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/assets/highcharts/themes/dark-green.js'); ?>"></script>
<script type="text/javascript">
jQuery(function(){
    new Highcharts.Chart({
        chart: {
            renderTo: 'chart',
            type: 'line',
        },
        title: {
            text: 'Pendapatan Tahun 2013',
            x: -20
        },
        subtitle: {
            text: 'http://didanurwanda.blogspot.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Pendapatan (Juta)'
            }
        },
        series: [{
            name: 'Pendapatan (Juta)',
            data: <?php echo json_encode($data); ?>
        }]
    });
}); 
</script>
</body>
</html>

Mudah kan ya, sayangnya ini hanya contoh sederhana. Jadi grafiknya tidak bergitu detail. heheh
Berikut penampakannya.

Download
Password: didanurwanda.blogspot.com

Minggu, 21 April 2013

[Yii Framework] Mengintegrasikan DOMPDF

Kali ini saya akan menjelaskan cara mengintegrasikan DOMPDF dengan Yii Framework. Memangnya kenapa jika menggunakannya secara langsung ? jawabannya Tidak Bisa!, ini disebabkan karena Auto Register Yii bentrok dengan DOMPDF. Terus cara yang benar seperti apa ? baiklah saya akan langsung menjelaskannya.

Pertama download dompdf dan kemudian copy semua filenya ke folder extensions/yiidompdf/. jika Anda menggunakan dompdf versi 0.5.x maka buka config dompdf_config.inc.php dan ubah bagian berikut

function DOMPDF_autoload($class) {
  $filename = mb_strtolower($class) . ".cls.php";
  require_once(DOMPDF_INC_DIR . "/$filename");
}

// menjadi seperti ini

function DOMPDF_autoload($class) 
{
    $filename = mb_strtolower($class) . ".cls.php";
    if(file_exists(DOMPDF_INC_DIR . "/$filename")) {
        require_once(DOMPDF_INC_DIR . "/$filename");
    }
}

kemudian buat sebuat class yang di turunkan dari CApplicationComponent dan isi seperti berikut.

<?php

/**
 * Yii DOMPDF
 * ---------------------------------------------
 *
 * @author         dida nurwanda (dida_n@ymail.com)
 * @blog        didanurwanda.blogspot.com
 */

require_once dirname(__FILE__).'/dompdf_config.inc.php';
Yii::registerAutoloader('DOMPDF_autoload');

class yiidompdf extends CApplicationComponent
{
    public $dompdf;
    
    public function init()
    {
        if($this->dompdf===null)
            $this->dompdf= new DOMPDF();
        return $this->dompdf;
    }
    
    public function generate($file, $filename='', $download=false) 
    {
        $this->dompdf->load_html($file);
        $this->dompdf->render();
        $this->dompdf->stream($filename,array('Attachment'=>$download));
    }
}


kemudian simpan sejajar di dalam extension/yiidompdf/yiidompdf.php
Untuk cara penggunaannya silahkan Anda buka config/main.php dan tambahkan script berikut

return array(
    ...
    'components'=>array(
        ...
        'dompdf'=>array(
            'class'=>'ext.yiidompdf.yiidompdf'
        ),
        ...
    ),
);

dan pada untuk membuat pdfnya seperti contoh berikut

public function actionReport()
{
    $pdf=Yii::app()->dompdf;
    $pdf->dompdf->set_paper('a5');
    $pdf->generate('<h1>Dida Nurwanda</h1>','dida.pdf',false);
}

atau dengan seperti ini

public function actionReport()
{
    $pdf=Yii::app()->dompdf;
    $pdf->dompdf->set_paper('a5');
    $pdf->generate($this->renderPartial('_report',array(),true,true),'dida.pdf',false);
}

Berikut Penampakannya 

Download
Password: didanurwanda.blogspot.com

Senin, 15 April 2013

[CodeIgniter] Membuat File Manager dengan elFinder

Sembari menonton berita mengenai UAN yang acakadut, saya iseng-iseng mengintegrasikan elFinder pada CodeIgniter. elFinder sendiri sudah lama saya pakai pada aplikasi yang saya buat, tetapi elFinder yang untuk Yii Framework (extensions). Oleh sebab itu disini saya coba pasangkan elFinder pada CodeIgniter dan ternyata sama mudahnya :D

Pertama jangan lupa Anda download jQuery, jQuery UI dan elFinder itu sendiri, kemudian simpan dalam folder assets. Setelah itu buat sebuah controller, disini saya pakai welcome.php dan di isi dengan script berikut.

public function __construct()
{
    parent::__construct();
    $this->load->helper('url');
}
    
public function index()
{
    $this->load->view('welcome_message');
}
    
public function elfinder()
{
    require_once './assets/elfinder/php/elFinderConnector.class.php';
    require_once './assets/elfinder/php/elFinder.class.php';
    require_once './assets/elfinder/php/elFinderVolumeDriver.class.php';
    require_once './assets/elfinder/php/elFinderVolumeLocalFileSystem.class.php';
    
    $conn = new elFinderConnector(new elFinder(array(
        'roots'=>array(
            array(
                'driver'=>'LocalFileSystem',
                'path'=>'./myfile',
                'URL'=>base_url('myfile').'/',
            )
        )
    )));
    $conn->run();
}

Selanjutnya buat view dan disini saya memakai welcome_message.php dan tambahkan script berikut.

    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/jquery-ui/css/base/jquery-ui.css'); ?>" />
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/elfinder/css/theme.css'); ?>" />
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/elfinder/css/elfinder.min.css'); ?>" />
    <script type="text/javascript" src="<?php echo base_url('assets/jquery-1.7.2.min.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/jquery-ui/js/jquery-ui.min.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/elfinder/js/elfinder.min.js'); ?>"></script>
    
    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery('#elfinder-tag').elfinder({
                url: '<?php echo site_url('welcome/elfinder'); ?>',
            }).elfinder('instance');
        });
    </script>
</head>
<body>

<div id="container">
    <h1>CodeIgniter with elFinder <span style="float:right">Dida Nurwanda</span></h1>

    <div id="body">
        <div id="elfinder-tag"></div>
    </div>

    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

</body>
</html>

Nah loh, selesai deh. gampang kan dan jangan lupa di kembangkan dari segi keamanannya :D

Berikut penampakannya.
Download
Password : didanurwanda.blogspot.com

Minggu, 14 April 2013

[Yii Framework] Menggunakan JqGrid sebagai Pengganti CGridView

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

Kamis, 11 April 2013

[Yii Framework] Menyimpan Session Di Database Ala CodeIgniter


Bagi Anda yang terbiasa dengan CodeIgniter yang membaca artikel ini mungkin tidak asing lagi dengan menyimpan session ke dalam database. Nah namun bagaimana cara agar hal seperti itu dapat di terapkan pada framework Yii. Caranya sungguh mudah, Anda hanya perlu menggunakan Extensions MyCDbHttpSession untuk melakukannya. Nah apa sih keunggulan menyimpan session di database, saya sendiri belum tau, tetapi yang jelas beban server akan berkurang. Nah loh :D

Untuk melakukan pemasangannya silahkan Anda download terlebih dahulu extensionsnya. Kemudian extract dan simpan pada direktori extensions. Setelah itu buka config/main.php kemudian tambahkan script di bawah ini

return array(
    ...
    'components' => array(
        'db' => array(
            ...
        ),
        ...
        'session' => array(
            'class' => 'application.extensions.MyCDbHttpSession',
            'connectionID' => 'db',
            'sessionTableName' => 'tbl_session',
            'autoCreateSessionTable' => true,
            'compareIpAddress' => true,
            'compareUserAgent' => true,
            'compareIpBlocks' => 0,
        ),
        ...
    ),
    ...
);
  • connectionID merupakan component database yang aktif.
  • sessionTableName merupakan table yang di gunakan.
  • autoCreateSessionTable untuk membuat table session otomatis.
  • compareIpAddress untuk menyamakan IP yang login.
  • compareUserAgent untuk menyamakan UserAgent yang login.
  • compareIpBlocks untuk memblokir IP tertentu.

Selasa, 09 April 2013

[CodeIgniter] CRUD dengan EasyUI

Besok sebenarnya UTS hari pertama, tapi beginilah males belajar malah saya lebih asik ngulik-ngulik bikin aplikasi. Tetapi mumpung agak pusing juga lanjutin bikin aplikasinya, saya stop dulu dan memilih membuat artikel di blog ini. Padahal sih biasanya main game :D Kebetulan aplikasi yang saya kerjakan menggunakan Yii Framework + EasyUI nah dari situ akhirnya saya terfikir untuk membuat artikel mengenai CodeIgniter dengan EasyUI. Tanpa basa-basi lagi mari kita bahas. Mungkin agak panjang :D

Pertama siapkan jQuery, EasyUI dan simpan pada folder assets, selanjutnya buat database seperti berikut.

CREATE TABLE IF NOT EXISTS `mobil` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `type` varchar(50) NOT NULL,
  `barang` varchar(50) NOT NULL,
  `harga` decimal(15,0) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 ;


INSERT INTO `mobil` (`id`, `type`, `barang`, `harga`) VALUES
(3, 'Mazda', 'Mazda 2', 275000000),
(6, 'TOYOTA', 'NEW INNOVA', 300000000),
(7, 'HONDA', 'CITY', 250000000),
(8, 'SUZUKI', 'SWIFT', 220000000),
(9, 'SUZUKI', 'ESTILO', 180000000),
(10, 'SUZUKI', 'ERTIGA', 185000000),
(11, 'MITSUBHISI', 'LANCER EVOLUTION 7', 550000000),
(12, 'TOYOTA', 'FORTUNER', 450000000),
(14, 'HONDA', 'Jazz', 215000000);

Kemudian buat controller dengan nama crud.php dan isi seperti berikut

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

class crud extends CI_Controller {
    
    public function __construct()
    {
        parent::__construct();
        $this->load->helper('url');
        $this->load->model('crud_model');
    }

    public function index()
    {
        if(isset($_GET['grid']))
            echo $this->crud_model->getJson();
        else
            $this->load->view('crud');
    }
    
    public function create()
    {
        if(!isset($_POST))   
            show_404();
       
        if($this->crud_model->create())
            echo json_encode(array('success'=>true));
        else
            echo json_encode(array('msg'=>'Gagal memasukkan data'));
    }
    
    public function update($id=null)
    {
        if(!isset($_POST))   
            show_404();
       
        if($this->crud_model->update($id))
            echo json_encode(array('success'=>true));
        else
            echo json_encode(array('msg'=>'Gagal mengubah data'));
    }
    
    public function delete()
    {
        if(!isset($_POST))   
            show_404();
       
        $id = intval(addslashes($_POST['id']));
        if($this->crud_model->delete($id))
            echo json_encode(array('success'=>true));
        else
            echo json_encode(array('msg'=>'Gagal menghapus data'));
    }
}

/* End of file crud.php */
/* Location: ./application/controllers/crud.php */


Selanjutnya buat model dengan nama crud_model.php dan isi dengan script berikut

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

class crud_model extends CI_Model {
    
    public function __construct()
    {
        parent::__construct();
        $this->load->database();
    }
    
    public function create()
    {
        return $this->db->insert('mobil',array(
            'type'=>$this->input->post('type',true),
            'barang'=>$this->input->post('barang',true),
            'harga'=>$this->input->post('harga',true)
        ));
    }
    
    public function update($id)
    {
        $this->db->where('id', $id);
        return $this->db->update('mobil',array(
            'type'=>$this->input->post('type',true),
            'barang'=>$this->input->post('barang',true),
            'harga'=>$this->input->post('harga',true)
        ));
    }
    
    public function delete($id)
    {
        return $this->db->delete('mobil', array('id' => $id)); 
    }
    
    public function getJson()
    {
        $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
        $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
        $sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'id';
        $order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';
        $offset = ($page-1) * $rows;
       
        $result = array();
        $result['total'] = $this->db->get('mobil')->num_rows();
        $row = array();
       
        $this->db->limit($rows,$offset);
        $this->db->order_by($sort,$order);
        $criteria = $this->db->get('mobil');
       
        foreach($criteria->result_array() as $data)
        {   
            $row[] = array(
                'id'=>$data['id'],
                'type'=>$data['type'],
                'barang'=>$data['barang'],
                'harga'=>$data['harga']
            );
        }
        $result=array_merge($result,array('rows'=>$row));
        return json_encode($result);
    }
}

/* End of file crud_model.php */
/* Location: ./application/controllers/crud_model.php */


Terakhir buat 2 view dengan nama crud.php dan grid.php.
Untuk crud.php isi seperti berikut.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CRUD CodeIgniter dengan EasyUI - Dida Nurwanda</title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/easyui/themes/default/easyui.css'); ?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/easyui/themes/icon.css'); ?>">
    <script type="text/javascript" src="<?php echo base_url('assets/jquery.min.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/easyui/jquery.easyui.min.js'); ?>"></script>
</head>
<body class="easyui-layout">
    
    <!-- top -->
    <div data-options="region:'north',split:true" title="North Title" style="height:100px;padding:10px;">
        <span style="font-size:30px">CRUD CodeIgniter dengan EasyUI</span>
        <span style="float:right; font-size:30px">Dida Nurwanda</span>
    </div>
    <!-- left -->
    <div data-options="region:'west',split:true" title="Main Menu" style="width:280px;padding1:1px;overflow:hidden;">
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="Title1" style="padding:10px;overflow:auto;" data-options="selected:true" >
                <p>content1</p>
                <p>content1</p>
            </div>
            <div title="Title2" style="padding:10px;">
                content2
            </div>
            <div title="Title3" style="padding:10px">
                content3
            </div>
        </div>
    </div>
    
    <!-- center -->
    <div data-options="region:'center'" title="Main Content" style="overflow:hidden;padding:1px">
        <?php $this->load->view('grid'); ?>
    </div>
</body>
</html>


dan untuk grid.php

<script type="text/javascript">
var url;

function create(){
    jQuery('#dialog-form').dialog('open').dialog('setTitle','Tambah Mobil');
    jQuery('#form').form('clear');
    url = '<?php echo site_url('crud/create'); ?>';
}

function update(){
    var row = jQuery('#datagrid-crud').datagrid('getSelected');
    if(row){
        jQuery('#dialog-form').dialog('open').dialog('setTitle','Edit Mobil');
        jQuery('#form').form('load',row);
        url = '<?php echo site_url('crud/update'); ?>/' + row.id;
    }
}

function save(){
    jQuery('#form').form('submit',{
        url: url,
        onSubmit: function(){
            return jQuery(this).form('validate');
        },
        success: function(result){
            var result = eval('('+result+')');
            if(result.success){
                jQuery('#dialog-form').dialog('close');
                jQuery('#datagrid-crud').datagrid('reload');
            } else {
                jQuery.messager.show({
                    title: 'Error',
                    msg: result.msg
                });
            }
        }
    });
}

function remove(){
    var row = jQuery('#datagrid-crud').datagrid('getSelected');
    if (row){
        jQuery.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
            if (r){
                jQuery.post('<?php echo site_url('crud/delete'); ?>',{id:row.id},function(result){
                    if (result.success){
                        jQuery('#datagrid-crud').datagrid('reload');
                    } else {
                        jQuery.messager.show({
                            title: 'Error',
                            msg: result.msg
                        });
                    }
                },'json');
            }
        });
    }
}
</script>

<!-- Data Grid -->
<table id="datagrid-crud" title="Mobil" class="easyui-datagrid" style="width:auto; height: auto;" url="<?php echo site_url('crud/index'); ?>?grid=true" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true" collapsible="true">
    <thead>
        <tr>
            <th field="id" width="30" sortable="true">ID</th>
            <th field="type" width="50" sortable="true">Type</th>
            <th field="barang" width="50" sortable="true">Barang</th>
            <th field="harga" width="50" sortable="true">Harga</th>
        </tr>
    </thead>
</table>

<!-- Toolbar -->
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="create()">Tambah Mobil</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="update()">Edit Mobil</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="remove()">Hapus Mobil</a>
</div>

<!-- Dialog Form -->
<div id="dialog-form" class="easyui-dialog" style="width:400px; height:200px; padding: 10px 20px" closed="true" buttons="#dialog-buttons">
    <form id="form" method="post" novalidate>
        <div class="form-item">
            <label for="type">Type</label><br />
            <input type="text" name="type" class="easyui-validatebox" required="true" size="53" maxlength="50" />
        </div>
        <div class="form-item">
            <label for="type">Barang</label><br />
            <input type="text" name="barang" class="easyui-validatebox" required="true" size="53" maxlength="50" />
        </div>
        <div class="form-item">
            <label for="type">Harga</label><br />
            <input class="easyui-numberbox" name="harga" data-options="precision:2,groupSeparator:'.',decimalSeparator:',',prefix:'Rp. '" class="easyui-validatebox" required="true" />
        </div>
    </form>
</div>

<!-- Dialog Button -->
<div id="dialog-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="save()">Simpan</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:jQuery('#dialog-form').dialog('close')">Batal</a>
</div>

lagi-lagi saya nggak mau ngejelasin masing-masing fungsi, sebab itu pake fungsi-fungsi dasar CI dan jQuery :D
Berikut penampakannya.



Download
Password: didanurwanda.blogspot.com


Sabtu, 06 April 2013

[Yii Framework] Membuat Validasi dengan JavaScript (Client Validation)

Ini mungkin bukan Artikel yang penting, tetapi cocok bagi yang newbe di Yii Framework. Validasi dengan JavaScript akan sangat membantu Anda. terlebihlagi validasi yang akan di hasilkan sangat interaktif. Terus bagaimana cara mengaktifkannya ? hehe, mudah sekali, untuk mengaktifkan Validasi JavaScript dapat anda Aktifkan pada form dengan script kira-kira seperti berikut.

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'comment-form',
    'enableClientValidation'=>true,
    'clientOptions'=>array(
        'validateOnSubmit'=>true
    ),
)); ?>

Karena hanya contoh, pada script di atas itu menggunakan form untuk comment yang ada pada demo blog.

Selasa, 02 April 2013

[CodeIgniter] Membuat Multiple Ajax Image dan File Upload

Sebelumnya saya membuat artikel mengenai Ajax Upload pada CodeIgniter dan kali ini saya membuat pengembangan dari artikel tersebut.

Sebenarnya Multiple Upload pada library bawaan codeigniter tidak sebenarnya di dukung, sebab jika inputan yang di upload berbentuk array maka CI_Upload menolaknya. Oleh sebab itu di sini saya membuat library yang meng-extends CI_Upload dimana pada bagian do_upload sedikit di rubah. do_upload yang ada pada library baru itu sendiri saya ambil dari CI_Upload. Bagaimana penerapannya berikut saya jelaskan.

Buat controller atau disini saya pakai welcome.php dan kemudian isi dengan script berikut

public function __construct()
{
    parent::__construct();
    $this->load->helper(array('html','url')); 
}

public function index()
{
    $this->load->view('welcome_message');
}
    
public function upload()
{
    if(isset($_FILES['image']))
    {
        
        $data=$_FILES['image'];
        $total = count($data['name']);
        $data2=array();
        for($i=0; $i<$total; $i++)
        {
            $data2[]=array(
                'name'=>$data['name'][$i],
                'type'=>$data['type'][$i],
                'tmp_name'=>$data['tmp_name'][$i],
                'error'=>$data['error'][$i],
                'size'=>$data['size'][$i],
            );
        }
        
        $no=0;
        foreach($data2 as $row)
        {
            $config['upload_path'] = './assets/uploads';
            $config['allowed_types'] = 'gif|jpg|png|bmp';
            $this->load->library('multi_upload', $config);
            if($this->multi_upload->do_upload($data2[$no]))
            {
                $image_data = $this->multi_upload->data();
                
                echo img(array(
                    'src'=>base_url("assets/uploads/$image_data[file_name]"),
                    'width'=>300,
                    'style'=>'margin:10px; padding:10px; background:#bbb'
                )); 
            }
            $no++;
        }
    }    
}


Kemudian buat view, disini saya pakai welcome_message.php tambahkan script berikut

    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery-1.7.2.min.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery.form.js'); ?>"></script>
    <script type="text/javascript"> 
        jQuery(document).ready(function() {
            jQuery('#form-upload').on('submit', function(e) {
                e.preventDefault();
                jQuery('#submit-button').attr('disabled', ''); 
                jQuery("#output").html('<div style="padding:10px"><img src="<?php echo base_url('assets/images/loading.gif'); ?>" alt="Please Wait"/> <span>Mengunggah...</span></div>');
                jQuery(this).ajaxSubmit({
                    target: '#output',
                    success:  sukses 
                });
            });
            
            var count = 1;
            jQuery("#add_btn").click(function(){
                count += 1;
                jQuery('#fill').append('<tr class="records"><td><label>Foto '+count+' </label><input name="image[]" type="file" /> <a class="remove_item" href="#" >Delete</a></td></tr>');
            });
            
            jQuery(".remove_item").live('click', function (ev) {
                if (ev.type == 'click') {
                    jQuery(this).parents(".records").fadeOut();
                        jQuery(this).parents(".records").remove();
                }
            });
        }); 

        function sukses()  { 
            jQuery('#form-upload').resetForm();
            jQuery('#submit-button').removeAttr('disabled');

        } 
    </script> 
</head>
<body>

<div id="container">
    <h1>CodeIgniter Ajax Multi Upload<span style="float:right">Dida Nurwanda</span></h1>

    <div id="body">
        <div align="left" id="wrapper">
            
            <form action="<?php echo site_url('welcome/upload'); ?>" method="post" enctype="multipart/form-data" id="form-upload">
                <table>
                    <thead>
                        <tr>
                            <td><input type="button" name="add_btn" value="Add" id="add_btn"></td>
                        </tr>
                    </thead>
                    <tbody id="fill">
                        <tr>
                            <td><label>Foto 1</label> <input name="image[]" type="file" /></td>
                        </tr>
                    </tbody>
                    <tr>
                        <td><input type="submit" id="submit-button" value="Upload" /></td>
                    </tr>
                </table>
            </form>
            <div id="output"></div>
        </div>
    </div>

    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

</body>
</html> 


dan terakhir buat library dengan nama multi_upload.php dan isi dengan script berikut

<?php

/**
 * Multi Upload
 *
 * @author        Dida Nurwanda
 * @email        dida_n@ymail.com
 */

require_once SYSDIR.'/libraries/Upload.php';

class multi_upload extends CI_Upload
{
    public function __construct($props = array())
    {
        parent::__construct($props);
    }
    
    public function do_upload($data=array())
    {
        if (!isset($data))
        {
            $this->set_error('upload_no_file_selected');
            return FALSE;
        }
        if (!$this->validate_upload_path())
            return FALSE;
        if (!is_uploaded_file($data['tmp_name']))
        {
            $error = ( ! isset($data['error'])) ? 4 : $data['error'];
            switch($error)
            {
                case 1:   
                    $this->set_error('upload_file_exceeds_limit');
                    break;
                case 2:
                    $this->set_error('upload_file_exceeds_form_limit');
                    break;
                case 3:
                    $this->set_error('upload_file_partial');
                    break;
                case 4:
                    $this->set_error('upload_no_file_selected');
                    break;
                case 6:
                    $this->set_error('upload_no_temp_directory');
                    break;
                case 7: 
                    $this->set_error('upload_unable_to_write_file');
                    break;
                case 8: 
                    $this->set_error('upload_stopped_by_extension');
                    break;
                default :   $this->set_error('upload_no_file_selected');
                    break;
            }
            return FALSE;
        }
        $this->file_temp = $data['tmp_name'];
        $this->file_size = $data['size'];
        $this->_file_mime_type($data);
        $this->file_type = preg_replace("/^(.+?);.*$/", "\\1", $this->file_type);
        $this->file_type = strtolower(trim(stripslashes($this->file_type), '"'));
        $this->file_name = $this->_prep_filename($data['name']);
        $this->file_ext     = $this->get_extension($this->file_name);
        $this->client_name = $this->file_name;
        if (!$this->is_allowed_filetype())
        {
            $this->set_error('upload_invalid_filetype');
            return FALSE;
        }
        if ($this->_file_name_override != '')
        {
            $this->file_name = $this->_prep_filename($this->_file_name_override);
            if (strpos($this->_file_name_override, '.') === FALSE)
                $this->file_name .= $this->file_ext;
            else
                $this->file_ext     = $this->get_extension($this->_file_name_override);
            if (!$this->is_allowed_filetype(TRUE))
            {
                $this->set_error('upload_invalid_filetype');
                return FALSE;
            }
        }
        if ($this->file_size > 0)
            $this->file_size = round($this->file_size/1024, 2);
        if (!$this->is_allowed_filesize())
        {
            $this->set_error('upload_invalid_filesize');
            return FALSE;
        }
        if (!$this->is_allowed_dimensions())
        {
            $this->set_error('upload_invalid_dimensions');
            return FALSE;
        }
        $this->file_name = $this->clean_file_name($this->file_name);
        if ($this->max_filename > 0)
            $this->file_name = $this->limit_filename_length($this->file_name, $this->max_filename);
        if ($this->remove_spaces == TRUE)
            $this->file_name = preg_replace("/\s+/", "_", $this->file_name);
        $this->orig_name = $this->file_name;
        if ($this->overwrite == FALSE)
        {
            $this->file_name = $this->set_filename($this->upload_path, $this->file_name);
            if ($this->file_name === FALSE)
                return FALSE;
        }
        if ($this->xss_clean)
        {
            if ($this->do_xss_clean() === FALSE)
            {
                $this->set_error('upload_unable_to_write_file');
                return FALSE;
            }
        }
        if ( ! @copy($this->file_temp, $this->upload_path.$this->file_name))
        {
            if ( ! @move_uploaded_file($this->file_temp, $this->upload_path.$this->file_name))
            {
                $this->set_error('upload_destination_error');
                return FALSE;
            }
        }
        $this->set_image_properties($this->upload_path.$this->file_name);
        return TRUE;
    }
} 
 
Selesai deh, mudah sekali bukan  :D

Berikut penampakannya.


Download
Password : didanurwanda.blogspot.com

[CodeIgniter] Membuat Ajax Image dan File Upload

Sebenarnya yang di bahas pada artikel ini adalah Ajax Image Upload, tetapi jika Anda ingin menerapkannya pada File Upload juga sama, hanya sedikit penambahan pada function upload di controller. Ajax Image Upload yang ada pada artikel ini masih sangat sederhana dan saya yakin Anda dapat menyempurnakannya agar lebih baik lagi. Sebelum berlanjut pada coding, sebelumnya Anda download jQuery dan jQuery Form sebagai library javascript kemudian simpan pada folder assets/js

Karena ini hanya contoh, saya menggunakan controller welcome.php yang telah terdapat pada project CodeIgniter. Kemudian tambahkan script seperti berikut.

public function __construct()
{
    parent::__construct();
    $this->load->helper(array('html','url')); 
}
    
public function index()
{
    $this->load->view('welcome_message');
}

public function upload()
{
    if(isset($_FILES['image']))
    {
        $config['upload_path'] = './assets/uploads';
        $config['allowed_types'] = 'gif|jpg|png|bmp';
        $this->load->library('upload', $config);
        if($this->upload->do_upload('image'))
        {
            $image_data = $this->upload->data();
           
            echo img(array(
                'src'=>base_url("assets/uploads/$image_data[file_name]"),
                'width'=>600,
                'style'=>'margin-top:10px; padding:10px; background:#bbb'
            )); 
        }
    }   
}

Perhatikan lokasi upload, pada contoh ini saya simpan pada folder assets/uploads
Kemudian pada views/welcome_message.php

    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery-1.7.2.min.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery.form.js'); ?>"></script>
    <script type="text/javascript"> 
        jQuery(document).ready(function() { 
            jQuery('#form-upload').on('submit', function(e) {
                e.preventDefault();
                jQuery('#submit-button').attr('disabled', ''); 
                jQuery("#output").html('<div style="padding:10px"><img src="<?php echo base_url('assets/images/loading.gif'); ?>" alt="Please Wait"/> <span>Mengunggah...</span></div>');
                jQuery(this).ajaxSubmit({
                    target: '#output',
                    success:  sukses 
                });
            });
        }); 

        function sukses()  { 
            jQuery('#form-upload').resetForm();
            jQuery('#submit-button').removeAttr('disabled');

        } 
    </script> 
</head>
<body>

<div id="container">
    <h1>CodeIgniter Ajax Upload <span style="float:right">Dida Nurwanda</span></h1>

    <div id="body">
        <div align="center" id="wrapper">
            <form action="<?php echo site_url('welcome/upload'); ?>" method="post" enctype="multipart/form-data" id="form-upload">
                <input name="image" type="file" />
                <input type="submit" id="submit-button" value="Upload" />
            </form>
            <div id="output"></div>
        </div>
    </div>

    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

Hehe simpel kan. Saya nggak mau jelasin fungsi masing-masing komponen, sebab saya yakin Anda pun telah memahaminya. Dan untuk jelasnya silahkan download scriptnya di bawah ini.

Berikut penampakannya

Download
Password : didanurwanda.blogspot.com

[Yii Framework] Mengubah dan Membuat Pagination dengan Infinite Scroll

Anda mungkin penasaran dengan facebook kenapa setiap di geser ke bawah maka akan otomatis isinya bertambah. Mungkin Anda juga bertanya-tanya caranya seperti apa, hehe dengan Yii Framework membuat hal itu mudah kok, yaitu dengan extension yiiinfinite-scroll. Terus cara penerapannya bagaimana ? nah berikut saya akan jelaskan .

Pertama anda buat database seperti berikut.
CREATE TABLE IF NOT EXISTS `country` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `iso` char(2) NOT NULL,
  `name` varchar(80) NOT NULL,
  `printable_name` varchar(80) NOT NULL,
  `iso3` char(3) DEFAULT NULL,
  `numcode` smallint(6) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=242 ;

--
-- Dumping data for table `country`
--

INSERT INTO `country` (`id`, `iso`, `name`, `printable_name`, `iso3`, `numcode`) VALUES
(1, 'AF', 'AFGHANISTAN7', 'Afghanistan', 'AFG', 4),
(2, 'AL', 'ALBANIA', 'Albania', 'ALB', 8),
(3, 'DZ', 'ALGERIA', 'Algeria', 'DZA', 12),
(4, 'AS', 'AMERICAN SAMOA', 'American Samoa', 'ASM', 16),
(5, 'AD', 'ANDORRA', 'Andorra', 'AND', 20),
(6, 'AO', 'ANGOLA', 'Angola', 'AGO', 24),
(7, 'AI', 'ANGUILLA', 'Anguilla', 'AIA', 660),
(8, 'AQ', 'ANTARCTICA', 'Antarctica', NULL, NULL),
(9, 'AG', 'ANTIGUA AND BARBUDA', 'Antigua and Barbuda', 'ATG', 28),
(10, 'AR', 'ARGENTINA', 'Argentina', 'ARG', 32),
(11, 'AM', 'ARMENIA', 'Armenia', 'ARM', 51),
(12, 'AW', 'ARUBA', 'Aruba', 'ABW', 533),
(13, 'AU', 'AUSTRALIA', 'Australia', 'AUS', 36),
(14, 'AT', 'AUSTRIA', 'Austria', 'AUT', 40),
(15, 'AZ', 'AZERBAIJAN', 'Azerbaijan', 'AZE', 31),
(16, 'BS', 'BAHAMAS', 'Bahamas', 'BHS', 44),
(17, 'BH', 'BAHRAIN', 'Bahrain', 'BHR', 48),
(18, 'BD', 'BANGLADESH', 'Bangladesh', 'BGD', 50),
(19, 'BB', 'BARBADOS', 'Barbados', 'BRB', 52),
(20, 'BY', 'BELARUS', 'Belarus', 'BLR', 112),
(21, 'BE', 'BELGIUM', 'Belgium', 'BEL', 56),
(22, 'BZ', 'BELIZE', 'Belize', 'BLZ', 84),
(23, 'BJ', 'BENIN', 'Benin', 'BEN', 204),
(24, 'BM', 'BERMUDA', 'Bermuda', 'BMU', 60),
(25, 'BT', 'BHUTAN', 'Bhutan', 'BTN', 64),
(26, 'BO', 'BOLIVIA', 'Bolivia', 'BOL', 68),
(27, 'BA', 'BOSNIA AND HERZEGOVINA', 'Bosnia and Herzegovina', 'BIH', 70),
(28, 'BW', 'BOTSWANA', 'Botswana', 'BWA', 72),
(29, 'BV', 'BOUVET ISLAND', 'Bouvet Island', NULL, NULL),
(30, 'BR', 'BRAZIL', 'Brazil', 'BRA', 76),
(31, 'IO', 'BRITISH INDIAN OCEAN TERRITORY', 'British Indian Ocean Territory', NULL, NULL),
(32, 'BN', 'BRUNEI DARUSSALAM', 'Brunei Darussalam', 'BRN', 96),
(33, 'BG', 'BULGARIA', 'Bulgaria', 'BGR', 100),
(34, 'BF', 'BURKINA FASO', 'Burkina Faso', 'BFA', 854),
(35, 'BI', 'BURUNDI', 'Burundi', 'BDI', 108),
(36, 'KH', 'CAMBODIA', 'Cambodia', 'KHM', 116),
(37, 'CM', 'CAMEROON', 'Cameroon', 'CMR', 120),
(38, 'CA', 'CANADA', 'Canada', 'CAN', 124),
(39, 'CV', 'CAPE VERDE', 'Cape Verde', 'CPV', 132),
(40, 'KY', 'CAYMAN ISLANDS', 'Cayman Islands', 'CYM', 136),
(41, 'CF', 'CENTRAL AFRICAN REPUBLIC', 'Central African Republic', 'CAF', 140),
(42, 'TD', 'CHAD', 'Chad', 'TCD', 148),
(43, 'CL', 'CHILE', 'Chile', 'CHL', 152),
(44, 'CN', 'CHINA', 'China', 'CHN', 156),
(45, 'CX', 'CHRISTMAS ISLAND', 'Christmas Island', NULL, NULL),
(46, 'CC', 'COCOS (KEELING) ISLANDS', 'Cocos (Keeling) Islands', NULL, NULL),
(47, 'CO', 'COLOMBIA', 'Colombia', 'COL', 170),
(48, 'KM', 'COMOROS', 'Comoros', 'COM', 174),
(49, 'CG', 'CONGO', 'Congo', 'COG', 178),
(50, 'CD', 'CONGO, THE DEMOCRATIC REPUBLIC OF THE', 'Congo, the Democratic Republic of the', 'COD', 180);

selanjutnya generate CRUD dengan Gii.
Setelah di generate, buka controller yang di generate tadi, dan lihat function actionIndex dan ubah menjadi seperti berikut.

/**
 * Lists all models.
 */
public function actionIndex()
{
    $criteria = new CDbCriteria;
    // $criteria ----> disini criteria, tergantung kebutuhan
    $total = count(Country::model()->findAll($criteria));
    
    $pages = new CPagination($total);
    $pages->pageSize=5; // atur sesuai kebutuhan
    $pages->applyLimit($criteria);       
    
    $dataProvider=Country::model()->findAll($criteria);
    $this->render('index',array(
        'dataProvider'=>$dataProvider,
        'pages'=>$pages
    ));
}

Selanjutnya buka views/country/index.php dan ubah menjadi seperti berikut

<h1>Countries</h1>

<div id="posts">
    <?php foreach($dataProvider as $data): ?>
        <?php $this->renderPartial('_view',array('data'=>$data)); ?>
    <?php endforeach; ?>
</div>

<?php $this->widget('ext.yiinfinite-scroll.YiinfiniteScroller', array(
    'contentSelector' => '#posts', // samakan dengan attribute sebelum foreach
    'itemSelector' => 'div.view', // sesuaikan dengan attribute pada _view
    'loadingText' => 'Loading...', // nama loading
    'donetext' => 'End...', // nama jika habis
    'pages' => $pages,
)); ?>

Selesai deh, mudah banget kan :D
Yang mesti di perhatikan adalah bagian 'contentSelector' bagian itu merupakan attribute yang ada sebelum foreach, selanjutnya juga 'itemSelector' itu merupakan attribute pada _view tepatnya pada content pengulangan.
Berikut penampakannya.

Download
 Password : didanurwanda.blogspot.com