[CodeIgniter] CRUD dengan EasyUI

[CodeIgniter] CRUD dengan EasyUI

   4/09/2013       Dida Nurwanda

---

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