Minggu, 22 Desember 2013

[CodeIgniter] Ajax CRUD CodeIgniter dengan CodeIgniterStrap


Kali ini saya akan memberikan sedikit contoh Ajax CRUD CodeIgniter dengan library Twitter Bootstrap 3, tak lain dan tak bukan yaitu CodeIgniterStrap. Mungkin dengan melihat contoh ini, Anda akan mendapat gambaran mudahnya menerapkan Twitter Bootstrap pada CodeIgniter dengan CodeIgniterStrap.

Langsung saja, siapkan CodeIgniterStrap library dan simpan pada folder libraries. Kemudian siapkan juga Twitter Bootstrap 3 dan jquery simpan pada folder assets. Setelah itu, buat database dengan nama user atau terserah anda dan isi dengan table seperti berikut

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) NOT NULL,
  `status` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 ;

Setelah itu buat controller dengan nama User.php dan isi seperti berikut. Oya jangan luma ubah setting routernya agar ke controller user dan atur juga databasenya sesuai dengan yang Anda buat tadi.

<?php

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

class User extends CI_Controller {

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

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

    public function getList() {
        $db = $this->db->get('user');
        if ($db->num_rows() == 0) {
            echo '<tr><td colspan="4">Masih Kosong</td></tr>';
        } else {
            foreach ($db->result_object() as $row) {
                echo '<tr>';
                echo '<td>' . $row->id . '</td>';
                echo '<td>' . $row->nama . '</td>';
                echo '<td>' . $row->status . '</td>';
                echo '<td width="140">';

                // EDIT BUTTON
                echo Tb::button('Edit', array(
                    'type' => Tb::BUTTON_TYPE_LINK,
                    'onclick' => "editUser('$row->id', '$row->nama', '$row->status')",
                    'size' => Tb::BUTTON_SIZE_SMALL,
                    'color' => Tb::BUTTON_COLOR_SUCCESS
                ));

                // DELETE BUTTON
                echo Tb::button('Hapus', array(
                    'type' => Tb::BUTTON_TYPE_LINK,
                    'onclick' => "setUserDeleteId('$row->id')",
                    'size' => Tb::BUTTON_SIZE_SMALL,
                    'color' => Tb::BUTTON_COLOR_DANGER,
                    'url' => '#modal_confirm',
                    'data-toggle' => 'modal'
                ));
                echo '</td>';
                echo '</tr>';
            }
        }
    }

    public function simpan() {
        $this->form_validation->set_rules('nama', 'Nama', 'required|xss_clean|trim');
        $this->form_validation->set_rules('status', 'Status', 'required|xss_clean|trim');
        if ($this->form_validation->run()) {
            if (isset($_POST['id']) && $_POST['id'] != '') {
                $this->db->where('id', $this->input->post('id'));
                $this->db->update('user', $this->input->post(NULL, true));
            } else {
                $this->db->insert('user', $this->input->post(NULL, true));
            }
            echo json_encode(array('status' => 'success', 'msg' => 'Berhasil'));
        } else {
            echo json_encode(array('status' => 'error', 'msg' => validation_errors()));
        }
    }

    public function hapus() {
        if (isset($_POST)) {
            $this->db->delete('user', $this->input->post(NULL, true));
        }
    }

    public function hapusSemua() {
        if (isset($_POST)) {
            $this->db->query('truncate user');
        }
    }

}

Setalah itu buat view dengan nama index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Ajax CRUD CodeIgniter dengan CodeIgniterStrap</title>
        <link rel="stylesheet" href="<?php echo base_url('assets/twbs/css/bootstrap.css'); ?>" />
        <script type="text/javascript" src="<?php echo base_url('assets/jquery.js'); ?>"></script>
        <script type="text/javascript" src="<?php echo base_url('assets/twbs/js/bootstrap.js'); ?>"></script>
    </head>
    <body>
 
        <!-- NAVBAR top -->
        <?php echo Tb::navbar(array(
            'brandLabel' => 'Ajax CRUD',
            'position' => Tb::NAVBAR_FIXED_TOP
        )); ?>
        
        <div class="container" style="margin-top: 60px">
            <div class="row">
                <div class="col-lg-3">
                    <?php echo Tb::navs(array(
                        'stacked' => true,
                        'items' => array(
                            array('label' => 'Tambah User', 'active' => true, 'url' => '#modal_user_input', 'linkOptions' => array('data-toggle' => 'modal')),
                            array('label' => 'Hapus Semua User', 'active' => true, 'url'=> '#modal_hapus_user', 'linkOptions' => array('data-toggle' => 'modal'))
                        )
                    )); ?>
                </div>
                <div class="col-lg-9">
                    <table class="table table-bordered table-condensed">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Nama</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- NAVBAR footer -->
        <?php echo Tb::navbar(array(
            'position' => Tb::NAVBAR_FIXED_BOTTOM,
            'items' => array(
                Tb::link('http://didanurwanda.blogspot.com', 'Dida Nurwanda', array('class' => 'navbar-text navbar-link')),
                Tb::p('Ajax CRUD CodeIgniter dengan CodeIgniterStrap', array('class' => 'navbar-text pull-right')),
            )
        )); ?>
        
        <!-- MODAL form input -->
        <?php echo Tb::modal(array(
            'id' => 'modal_user_input',
            'header' => 'User Form',
            'body' => $this->load->view('form', array(), true),
        )); ?>
  
        <!-- MODAL delete confirm -->
        <?php echo Tb::modal(array(
            'id' => 'modal_confirm',
            'header' => 'Hapus',
            'body' => '<strong>Apa anda yakin akan menghapus data ini ?</strong>',
            'footer' => array(
                Tb::button('Ya', array('onclick' => 'hapusUser()', 'color' => Tb::BUTTON_COLOR_WARNING)),
                TB::button('Tidak', array('data-dismiss' => 'modal'))
            )
        )); ?>
                
        <!-- MODAL delete semua -->
        <?php echo Tb::modal(array(
            'id' => 'modal_hapus_user',
            'header' => 'Hapus Semua',
            'body' => '<strong>Apa anda yakin akan menghapus semua data ini ?</strong>',
            'footer' => array(
                Tb::button('Ya', array('onclick' => 'hapusSemua()', 'color' => Tb::BUTTON_COLOR_WARNING)),
                Tb::button('Tidak', array('data-dismiss' => 'modal'))
            )
        )); ?>
        
        <script type="text/javascript">
            var userId;
            
            function getListTableUser() {
                $('.table tbody').load('<?php echo site_url('user/getList'); ?>');
            }
            
            getListTableUser();
            
            function editUser(id, nama, status) {
                $('a[href="#modal_user_input"]').trigger('click');
                document.form_user.nama.value = nama;
                document.form_user.status.value = status;
                document.form_user.id.value = id;
            }
            
            function setUserDeleteId(id){
                userId = id;
            }
            
            function hapusUser(){
                $.post('<?php echo site_url('user/hapus'); ?>', {id: userId}, function(e) {
                    getListTableUser();
                });
                $('.close').trigger('click'); // close modal
                userId = null; // hapus id
            }
            
            function hapusSemua() {
                $.post('<?php echo site_url('user/hapusSemua'); ?>', [], function(e){
                    getListTableUser();
                }); 
                $('.close').trigger('click'); // close modal
            }
        </script>
    </body>
</html>

Atur lokasi css dan js Twitter Bootstrap dan jQuery Anda. Jika sudah, buat juga file view dengan nama form.php

<!-- NOTIFICATION -->
<?php echo Tb::alert('<p class="error_msg"></p>', array(
    'color' => Tb::ALERT_COLOR_DANGER,
    'id' => 'user_form_validation',
    'style' => 'display: none'
)); ?>

<!-- FORM -->
<?php $form = Tb::form(array(
    'type' => Tb::FORM_TYPE_HORIZONTAL, 
    'leftRow' => 3, 
    'rightRow' => 9,
    'action' => site_url('user/simpan'),
    'id' => 'form_user',
    'name' => 'form_user'
)); 
echo $form->textField('id', '', array('type' => 'hidden')); // HIDDEN FIELD
echo $form->textFieldRow('nama', 'Nama', array('placeholder' => 'Nama'));
echo $form->textFieldRow('status', 'Status', array('placeholder' => 'Status')); 
echo $form->submitButton('Simpan', array('color' => Tb::BUTTON_COLOR_SUCCESS));
$form->end(); ?>


<script type="text/javascript">
$(document).ready(function(){    
    $('#form_user').on('submit', function(e){ // submit handler
        e.preventDefault();
        $.post(this.action, $(this).serialize(), function(data){ // ajax post
            var data = eval('('+ data + ')');
            if(data.status == "success") {
                getListTableUser();
                document.form_user.nama.value = "";
                document.form_user.status.value = "";
                document.form_user.id.value = "";
                $('.close').trigger('click'); // close modal
                clearMsg();
            }
            else if(data.status == "error") {
                $('#user_form_validation').show();
                $('.error_msg').html(data.msg);
            }
        });
    });
    
    function clearMsg(){
        $('#user_form_validation').hide();
        $('.error_msg').html("");
    }
});
</script>

Selesai deh, silahkan di test dan berikut penampakannya.

 Halaman utama

Form input

Form validation dengan ajax

List data

Form edit masih satu form dengan form input

Konfirmasi penghapusan data

Konfirmasi penghapusan semua data

Download
Download
Password: didanurwanda.blogspot.com

Rabu, 11 Desember 2013

[Android] Alternatif Pembuatan Aplikasi Android dengan HTML selain PhoneGap



Di sela-sela waktu kuliah, saya teringat akan blok kesayangan saya ini. Dengan sedikit waktu luang, saya menyempatkan diri untuk membuat postingan mengenai Android tentunya. 
Ada beberapa teman saya yang mananyakan cara membuat aplikasi Android tetapi dia tidak mengerti pemrograman Java dan XML alhasil saya menyarankanya untuk menggunakan Framework yang bernama PhoneGap. Ya, karena Framework inilah yang paling terkenal dalam membuat aplikasi android bahkan Cross Platform hanya dengan menggunakan HTML5, CSS dan JavaScript. Akan tetapi disamping itu, saya juga menyarankan alternatif lain. Nah berikut beberapa alternatif Framework untuk membuat aplikasi Android.

1. MoSync
MoSync merupakan Framework untuk membuat aplikasi mobile dan tentunya Cross Platform. MoSync sendiri support untuk pembuatan aplikasi mobile dengan C++, HTML5 dan Hibride C++ dengan HTML5. Keunggulan lain yaitu MoSync ada fitur UI yang cukup menarik, yaitu NativeUI untuk HTML5. MoSync juga support dengan javascriptnya PhoneGap

Appspresso mungkin akan menjadi perhatian penting bagi Anda. Sebab Appspresso membikiki banyak library tambahan. Bahkan untuk KitchenSink-nya saja Appspresso menghadirkan fitur yang sangat menarik, bahkan sangat berbeda dengan PhoneGap.

Titanium Appcelerator merupakan Framework yang cukup terkenal. Framework ini mendukung pembuatan aplikasi dengan HTML5. Tetapi fitur unggulan Titanium Appcelerator adalah pembuatan aplikasi Native dengan menggunakan JavaScript.

Selasa, 22 Oktober 2013

[Yii Framework] Contoh CRUD Yii dengan EasyUI


Banyak pesan di  facebook dan di email saya yang meminta untuk membuat tutorial mengenai penerapan EasyUI dan Yii Framework tetapi tidak begitu saya tanggapi karena kesibukan tanpa alasan.  Dan kemarin ada rekan saya sekaligus master pemrograman Heruno Utomo juga meminta saya membuatkan sedikit contoh mengenai ini dan akhirnya saya meluangkan waktu membuatnya. hahahha

Pada artikel ini saya tidak akan memberikan script langsung pada artikel, tatapi  hanya source code dan screen shootnya saja.






Pada contoh script, anda akan menemukan extensions yii-easyui, ini merupakan extensions buatan saya yang memang sangat sederhana, sebab hanya berisikan gii dan widget tabs saja.
Tetapi kerana pada extensions ini berisikan custom gii jadi untuk membuat crud, anda hanya perlu masuk ke link http://localhost/yii_easyui_gii/index.php/gii selanjutnya buat Model Generator untuk membuat model dan klik EasyUI Generator untuk membuat CRUD dengan easyui.


Selebihnya silahkan anda amati scriptnya, dan jika bingung jangan malu untuk bertanya pada kolom komentar.

Download
Password : didanurwanda.blogspot.com

Kamis, 17 Oktober 2013

[CodeIgniter] Mempermudah Penerapan Twitter Bootstrap 3 pada CodeIgniter menggunakan CodeIgniterStrap


Mungkin bagi Anda yang terbiasa menggunakan CodeIgniter dan Twitter Bootstrap sebagai CSS Framework terkadang memiliki rasa malas, bosan dan terlebih pusing dalam menggunakan komponen dari Bootsrap yang tak jarang panjang-panjang atau bahkan tak beraturan dalam pengetikan kodenya. Terlebih melihat Framework Sebelah (Yii Framework) yang telah memiliki library Bootstrap sendiri sehingga penerapan Bootstrap menjadi mudah tentunya membuat Anda iri dan tentunya ingin merasakan kemudahan tersebut. Tenang, sekarang saya telah membuatkan sebuah library yang bernama CodeIgniterStrap. Library ini digunakan sebagai penterjemah kode php menjadi html kode yang sesuai dengan komponen pada Twitter Bootsrap. CodeIgniterStrap sendiri telah mendukung Twitter Bootstrap 3. Sebagai gambaran penggunaannya, berikut sedikit contoh membuat navbar dengan CodeIgniterStrap. 

Ini diterapkan pada view

<?php echo Tb::navbar(array(
    'brandLabel' => 'Project Name',
    'brandUrl' => '#',
    'items' => array(
        array(
            'items' => array(
                array('label' => 'Link', 'url' => site_url()),
                array('label' => 'Link', 'url' => '#'),
                array('label' => 'Link', 'url' => '#'),
                array('label' => 'Dropdown', 'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else here', 'url' => '#'),
                    '-',
                    array('header' => true, 'label' => 'Nav Header'),
                    array('label' => 'Separate link', 'url' => '#'),
                ))
            )
        )
    )
)); ?> 

kode tersebut tentunya lebih senderhana dan pendek jika dibandingkan dengan menggunakan HTML native yang akan sangat panjang walau untuk hasil yang sama.

Untuk anda yang ingin mempelajari dan menggunakan CodeIgniterStrap, berikut linknya.

CodeIgniterStrap Library : https://github.com/didanurwanda/CodeIgniterStrap
Documentation : http://www.didanurwanda.com/CodeIgniterStrap
Example : https://github.com/didanurwanda/CodeIgniterStrap/tree/example

Kamis, 25 Juli 2013

[CodeIgniter] Upload dan Resize Gambar Secara Otomatis


Saya sering mondar-mandir membaca pertanyaan-pertanyaan member di group CodeIgniter Indonesia dan tak jarang ada yang bertanya atau mempertanyakan bagaimana cara mengupload gambar dan meresize gamber tersebut secara otomatis. Nah, maka dari itu kali ini saya akan memberikan sedikit bahkan secuil contoh penggunaannya.

Buat project baru dengan codeigniter, kemudian buka controller welcome.php, kemudian isi seperti berikut.

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

class Welcome extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->helper(array('form', 'url', 'html'));
        $this->load->library(array('upload','image_lib'));
    }
   
    public function index()
    {
        $data = array();
        $data['error'] = '';
        $data['output'] = '';
        
        if(isset($_FILES['userfile']))
        {
            $this->upload->initialize(array(
                'upload_path' => './assets/',
                'allowed_types' => 'png|jpg|gif',
                'max_size' => '5000',
                'max_width' => '3000',
                'max_height' => '3000'
            )); 
        
            if($this->upload->do_upload())
            {
                $data_upload = $this->upload->data();
                $this->image_lib->initialize(array(
                    'image_library' => 'gd2',
                    'source_image' => './assets/'. $data_upload['file_name'],
                    'maintain_ratio' => false,
                    'create_thumb' => true,
                    'quality' => '20%',
                    'width' => 240,
                    'height' => 172
                ));
                
                if($this->image_lib->resize())
                {
                    $output = '<h4>Thumb - hasil Resize</h4>';
                    $output .= img('./assets/'.$data_upload['raw_name'].'_thumb'.$data_upload['file_ext']);
                    $output .= '<h4 style="margin-top: 30px">Gambar Original</h4>';
                    $output .= img('./assets/'.$data_upload['file_name']);
                    
                    $data['output'] = $output;
                }
                else
                {
                    $data['error'] = $this->image_lib->display_errors();
                }
                
            }
            else
            {
                $data['error'] = $this->upload->display_errors();
            }
        }
        
        $this->load->view('welcome_message', $data);
    }
}

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

Kemudian buka folder views/welcome_message.php dan isi seperti berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Welcome to CodeIgniter</title>

    <style type="text/css">

    ::selection{ background-color: #E13300; color: white; }
    ::moz-selection{ background-color: #E13300; color: white; }
    ::webkit-selection{ background-color: #E13300; color: white; }

    body {
        background-color: #fff;
        margin: 40px;
        font: 13px/20px normal Helvetica, Arial, sans-serif;
        color: #4F5155;
    }

    a {
        color: #003399;
        background-color: transparent;
        font-weight: normal;
    }

    h1 {
        color: #444;
        background-color: transparent;
        border-bottom: 1px solid #D0D0D0;
        font-size: 19px;
        font-weight: normal;
        margin: 0 0 14px 0;
        padding: 14px 15px 10px 15px;
    }

    code {
        font-family: Consolas, Monaco, Courier New, Courier, monospace;
        font-size: 12px;
        background-color: #f9f9f9;
        border: 1px solid #D0D0D0;
        color: #002166;
        display: block;
        margin: 14px 0 14px 0;
        padding: 12px 10px 12px 10px;
    }

    #body{
        margin: 0 15px 0 15px;
    }
    
    p.footer{
        text-align: right;
        font-size: 11px;
        border-top: 1px solid #D0D0D0;
        line-height: 32px;
        padding: 0 10px 0 10px;
        margin: 20px 0 0 0;
    }
    
    #container{
        margin: 10px;
        border: 1px solid #D0D0D0;
        -webkit-box-shadow: 0 0 8px #D0D0D0;
    }
    </style>
</head>
<body>

<div id="container">
    <h1>Upload dan Resize Gambar Otomatis <span style="float: right">Dida Nurwanda</span></h1>

    <div id="body">
        <form method="post" enctype="multipart/form-data">        
            
            <?php echo $error; ?>
            
            <div>
                <label for="userfile">Pilih gambar yang akan di upload : </label>
                <br />
                <input type="file" name="userfile" />
            </div>
            
            <div style="margin-top:20px">
                <input type="submit" value="Upload" />
            </div>
        
        </form>
        
        <div>
            <?php echo $output; ?>
        </div>
    </div>

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

</body>
</html>

Selesai deh, kodenya berantakan tapi mudah di pahami. Kalo bingung mau nambah-nambahin silahkan bertanya :D
 
Berikut penampakannya.

Download
Password : didanurwanda.blogspot.com

[Android] Contoh Penggunaan JavaScript Interface


Bagi Anda yang baru belajar pemrograman Java khususnya Android, mungkin pembahasan kali ini akan terkesan menarik, kenapa... Sebab saya akan memberikan sedikit contoh pembuatan  aplikasi Android menggunakan javascript tetapi javascript tersebut dapat mengakses java library yang terdapat pada android itu sendiri. Sebagai contoh pada artikel ini saya memakai Toast dan AlertDialog.

Silahkan anda membuat project terlebih dahulu, disini saya menamakannya "JavaScriptInterfaceDemo" dengan peckage "com.didanurwanda.javascriptinterfacedemo"
kemudian buka res\layout\main.xml (Mungkin namanya akan berbeda) dan isi seperti berikut.

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

Kemudian buka src/nama/peckage/anda dan buat class dengan nama MyJsInterface.java dan isi dengan script berikut.

package com.didanurwanda.javascriptinterfacedemo;

import android.content.Context;
import android.widget.Toast;
import android.app.AlertDialog;
import android.content.DialogInterface;

public class MyJsInterface
{
    Context context;
    
    MyJsInterface(Context context)
    {
        this.context = context;
    }
    
    public void toast(String toast, String length)
    {
        int toast_length;
        if(length.toString().equalsIgnoreCase("LONG"))
            toast_length = Toast.LENGTH_LONG;
        else
            toast_length = Toast.LENGTH_SHORT;
            
        Toast.makeText(context, toast, toast_length).show();
    }
    
    public void dialog(String message)
    {
        AlertDialog.Builder alert = new AlertDialog.Builder(context);
        alert.setMessage(message);
        alert.setCancelable(false);
        alert.setPositiveButton("Ok", new DialogInterface.OnClickListener(){
            @Override
            public void onClick(DialogInterface intface, int id)
            {
                toast("Anda menekan tombol pada dialog", "LONG");
            }
        });
        alert.show();
    }
}

Selanjutnya buka MainActivity.java dan isi juga seperti berikut.

package com.didanurwanda.javascriptinterfacedemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Window;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity
{
    WebView webview;
    WebSettings websettings;
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        
        webview = (WebView) findViewById(R.id.webview);
        websettings = webview.getSettings();
        websettings.setJavaScriptEnabled(true);
        webview.setWebViewClient(new WebViewClient());
        webview.addJavascriptInterface(new MyJsInterface(this), "didanurwanda");
        webview.loadUrl("file:///android_asset/www/index.html");
    }
    
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event)
    {
        if((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack())
        {
            webview.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

Setelah itu buka folder assets kemudian buat folder www, ini digunakan untuk menyimpan file html dan javascript. setelah itu buka folder www tadi dan tambahkan atau buat file index.html dan isi seperti berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript Interface Demo</title>
    <style type="text/css">
        body { text-align: center }
    </style>
    
    <script type="text/javascript">
        function tampil_toast()
        {
            didanurwanda.toast('Anda sedang menampilkan toast menggunakan javascript', 'LONG');
        }
        
        function tampil_dialog()
        {
            didanurwanda.dialog('Anda menampilkan dialog menggunakan javascript');
        }        
    </script>
</head>
<body>
    <h2>Demo JavaScript Interface pada Android</h2>
    <a href="http://didanurwanda.blogspot.com">http://didanurwanda.blogspot.com</a>
    <br />
    <button onClick="tampil_toast()">Tampilkan Toast</button>
    <br />
    <button onClick="tampil_dialog()">Tampilkan Dialog</button>
</body>
</html>

dan buka juga AndroidManifest.xml kemudian tambahkan

<uses-permission android:name="android.permission.INTERNET" /> 

Mudah bukan, hhehe. Untuk penjelasan sepertinya tidak perlu, sebab dengan melihat kodenya pasti anda sudah mengerti.

Berikut Penampakannya



Download
Password : didanurwanda.blogspot.com

Selasa, 02 Juli 2013

[Tools] Konversi Html ke Markdown menggunakan Redactor Html Editor


Bingung belajar menulis dokumen dengan format markdown, jangan nyerah. Sebab kali ini saya akan memberikan tools yang akan sedikit banyak membantu Anda dalam menulis dokumen. Tools ini sebenarnya berasal dari jQuery to-markdown yang di buat Dom Christie, tetapi saya kombonasikan dengan WYSIWYG Redactor sehingga akan sangan mempermudah anda karena Anda tidak perlu menulis dengan format HTML, Anda cukup membuat dokumen seperti di Microsoft Office Word saja.


Jumat, 28 Juni 2013

[Tools] FPDF Generator - Mempermudah Pembuatan Code Untuk FPDF


Explanation

Cell
MultiCell
SetX
SetY
SetXY
SetFont
SetFillColor
Image

$pdf->Output();
?>


Source : http://fpdfgenerator.sourceforge.net

[PHP] Membuat dan Mengextract File Zip dengan PHP


Oh, sudah lama nggak buat artikel tentang php dan kali ini saya akan sedikit memberikan cara membuat file Zip dan mengextractnya dengan PHP.

Pertama buat file zip.php dan isi dengan script berikut

<?php

/**
 * Class CZipArchive  
 * Digunakan untuk membuat dan mengextract file zip
 * 
 * @dibuat        Dida Nurwanda
 * @email        dida_n@ymail.com
 * @blog        didanurwanda.blogspot.com
 */

class CZipArchive extends ZipArchive
{
    public function create($fileName='', $overwrite=false, $fileAndDir='')
    {
        if(file_exists($fileName) && !$overwrite)
        {
            return false;
        }
        
        if(is_array($fileAndDir))
        {
            $vFile=array();
            
            foreach($fileAndDir as $file)
            {
                if(file_exists($file))
                {
                    $vFile[]=$file;
                }
            }
            
            if(count($vFile))
            {
                if($this->open($fileName, $overwrite ? ZIPARCHIVE::OVERWRITE : ZIPARCHIVE::CREATE) !== true)
                {
                    return false;
                }
            
                foreach($vFile as $file)
                {
                    $this->addFile($file,$file);
                }
                
                $this->close();
            
                return file_exists($fileName) ? true : false;
            }
            else
            {
                return false;
            }
        }
        else
        {
            if($this->open($fileName, $overwrite ? ZIPARCHIVE::OVERWRITE : ZIPARCHIVE::CREATE) !== true)
            {
                return false;
            }
            $this->addFile($fileAndDir,$fileAndDir);
            $this->close();
            return file_exists($fileName) ? true : false;
        }
        
    }
    
    public function extract($to='', $file='')
    {
        if($this->open($file)===true)
        {
            $this->extractTo($to);
            $this->close();
            return true;
        }
        else
        {
            return false;
        }
    }
}

Kemudian buat contoh file untuk penggunaannya, saya menggunakan nama index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Zip Dengan PHP - Dida Nurwanda</title>
</head>
<body>
<center><h1>Create dan Extract Zip dengan PHP</h1></center>
<center><h4>Dida Nurwanda</h4></center>
<center><a href="http://didanurwanda.blogspot.com">didanurwanda.blogspot.com</a></center>
<br /><br />
<a href="?type=create">Create ZIP</a><br />
<a href="?type=extract">Extract Zip</a><br />

<?php
require_once dirname(__FILE__).'/zip.php';
$zip=new CZipArchive;

// membuat zip
if(isset($_GET['type']) && $_GET['type']=='create')
{
    $return=$zip->create('data.zip',true,array('zip.php','index.php'));
    if($return)
    {
        echo "<center><h3><i>Anda berhasil membuat file ZIP</i></h3></center>";
    }
    else
    {
        echo "<center><h3><i>Anda gagal membuat file ZIP</i></h3></center>"; 
    }
}
elseif(isset($_GET['type']) && $_GET['type']=='extract')
{
    $return=$zip->extract('./folder','data.zip');
    if($return)
    {
        echo "<center><h3><i>Anda berhasil mengextract file ZIP</i></h3></center>";
    }
    else
    {
        echo "<center><h3><i>Anda gagal mengextract file ZIP</i></h3></center>"; 
    }
}
?>
</body>
</html>

Sedikit menjelaskan tentang Class yang saya buat, untuk fungsi create($fileName='', $overwrite=false, $fileAndDir='') sebagai berikut :
  • $fileName itu merupakan nama file Zip yang akan anda buat,
  • $overwrite berfungsi untuk menimpa file Zip yang telah ada, default false
  • $fileAndDir merupakan nama file yang akan dibuat Zip, pada variable ini anda dapat memasukan banyak file sekaligus dengan array atau hanya satu file dengan string
Untuk fungsi extract($to='', $file='') sebagai berikut :
  • $to merupakan direktory tempan mengextract file Zip
  • $file merupakan nama file Zip yang akan di extract
Berikut penampakan contoh programnya

Download
Password : didanurwanda.blogspot.com

Rabu, 26 Juni 2013

[Android] Membuat aplikasi Android dengan HTML 5, CSS, dan JS tanpa PhoneGap


Sebenarnya membuat aplikasi Android dengan HTML 5, CSS, dan JS bisa menggunakan framework yang bernama PhoneGap, tetapi untuk kali ini saya tidak akan menjelaskan cara menggunakan PhoneGap melainkan menggunakan Native Android.

Pertama Anda buat project, disini saya menamakannya dengan AndroidHtml. kemudian buka file AndroidManifest.xml dan tambahkan

<uses-permission android:name="android.permission.INTERNET" />

Script lengkapnya seperti berikut

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.didanurwanda.androidhtml"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="16" />
       <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.didanurwanda.androidhtml.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest> 

untuk layoutnya, disini saya pakai nama main.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/> 

Kemudian untuk MainActivity.java

package com.didanurwanda.androidhtml;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    WebView webview;
    WebSettings websettings;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        
        webview=(WebView)findViewById(R.id.webview);
        websettings=webview.getSettings();
        websettings.setJavaScriptEnabled(true);
        webview.setWebViewClient(new WebViewClient());
        webview.loadUrl("file:///android_asset/www/index.html");
        
    }    
}

Setelah itu buat folder pada direktori assets dengan nama www dan tambahkan file index.html pada folder tersebut, direktori lengkapnya assets/www/index.html. File index.html ini merupakan file yang akan di tampilkan oleh aplikasi, anda dapat menambahkan CSS, JS ataupun file HTML lain pada folder ini.

Untuk contoh, pada index.html berisi sebagai berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Android HTML</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>didanurwanda.blogspot.com</p>
</body>
</html> 

Berikut adalah penampakannya

Download
 Password: didanurwanda.blogspot.com

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