Yang ingin request tutorial atau contoh program silahkan kirim permintaan anda ke email didanurwanda@gmail.com

Selasa, 09 April 2013

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


23 komentar:

  1. mantap gan...ijin download ya..hehehehe

    BalasHapus
  2. Izin Download ya Mas Dida, maklum Baru belajar Codeigniter

    BalasHapus
  3. Ane lg nyari contoh crud CI + JQuery, eh nyasar ke sini :D
    ijin donlod Gan...

    BalasHapus
  4. nice tutorial...
    tapi pas yang delete data ko pas di klik malah ilang tombol delete nya..
    mhon bantuannya..

    BalasHapus
    Balasan
    1. oh iya bener, itu kalo di chrome ya.

      bisa di ganti javascriptnya yang bagian

      function remove()
      diganti jadi
      function hapus()

      dan jangan lupa di onClicknya juga ubah.

      Hapus
  5. nice tutorial...
    tp setelah didownload n diextract folder CRUD yang berisi index,create,update n delete ngak ada tuh gang,,,
    mohon pencerahannya thx

    BalasHapus
    Balasan
    1. lah, emang nggak ada file itu bro,

      cuma ada
      -controller (crud.php)
      -model (crud_model.php)
      -view (crud.php dan grid.php)

      sisanya cuma sql terus js dan css di folder assets

      Hapus
  6. gan kalau pengen ditambahin gambar di gridnya n cara update gambarnya itu gimana codingnya ya, ane udah muter2 kagak nemnu juga codingnya :(

    <*img src="ane isi filed='nama fieldnya'">kok kagak muncul di form editnya ya..

    mohon bantuannya,, thx b4

    BalasHapus
  7. akhirnya dapat juga stlah mencari2 tutorial sprt ini. oya mas dida untuk membuat hscroll ditabel gridnya bagaimana ya?karena field2 tabelnya banyak. mohon bantuannya ya mas dida
    salam kenal mas
    thx,

    BalasHapus
  8. Mas mau tanya untuk menambah fungsi searchnya gimana ya,, mohon bantuannya..

    BalasHapus
  9. kalo di html biasa buat ng link ke halaman lain pake a href, kalo di ci gimana caranya bikin link ke halaman lain yah? thanks

    BalasHapus
    Balasan
    1. gampang kok, lihat di controller pada bagian fungsi getJson
      saya ambil contoh bagian 'type'=>$data['type'], di bikin link, tinggal 'type'=>'Link Dida Nurwanda',

      Hapus
  10. Gan.. gimana cara jalaninya ya.. thx ya gan.. maklum nubie

    BalasHapus
  11. hapusnya ga bisa, malah button hapus mobilnya yg ilang

    BalasHapus
    Balasan
    1. udah di bahas di atas,
      --------------------------------------------------
      oh iya bener, itu kalo di chrome ya.

      bisa di ganti javascriptnya yang bagian

      function remove()
      diganti jadi
      function hapus()

      dan jangan lupa di onClicknya juga ubah.

      Hapus
  12. om kalo mau atur limit pagination nya gimana? ane udah edit skrip ini tp ga' ngaruh:

    $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 5;

    mohon bantuannya om.. thx

    BalasHapus
  13. halo bro,
    itu flash messagenya sepertinya tidak jalan deh bro,

    if($this->crud_model->update($id))
    echo json_encode(array('success'=>true));
    else
    echo json_encode(array('msg'=>'Gagal mengubah data'));

    itu seharusnya kan tampil window kecil gitu kan,
    tp saya coba koq ga muncul apa2 ya bro,
    dmn kira2 salah nya ya?

    BalasHapus
  14. kenapa tampilanya malah kosong kak? apakah nama databasenya yang saya buat perlu di atur? atau ada konfigurasinya yang di rubah tapi di kelas php di bagian mana yah?. padahal saya sudah import table itu ke database saya.

    BalasHapus

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.