CRUD codeigniter 3.0.4 dengan EXTJS 4.2

ExtJs merupakan Javascript UI framework untuk pengembangan aplikasi berbasis web. Sebagai perbandingan, Ext JS ini bisa disejajarkan dengan jQuery UI yang lebih dulu populer. Pada intinya Ext JS meruapakan library untuk membuat tampilan front-end yang berjalan di browser. Ext JS dikembangkan oleh Sencha. Versi terbaru dari ExtJS saat ini adalah versi 6.

Di karenakan ExtJS ini berbayar, dan saat ini di kantor tempat ku bekerja memakai ExtJS versi 4.2, maka kali ini saya hanya akan membahas cara membuat CRUD dengan ExtJS 4.2 dan saya akan memakai codeigniter 3.0.4. Terdapat 2 lisensi pada ExtJS yaitu lisensi GPL, dan lisensi berbayar. Untuk mem-praktikan tutorial ini kamu bisa menggunakan ExtJS yang berlisensi GPL, download aja di official site-nya.

Di pembahasan kali ini, saya akan pisahkan keduanya jadi dua bagian, yaitu, kita akan menggunakan codeigniter sebagai server side-nya dan extJS sebagai client side-nya.

Alur-nya, nanti codeigniter akan mengirimkan data berupa data JSON, dan data JSON yang di kirimkan itu akan di tangkap oleh ExtJS. lalu setelah itu, extJS akan menapilkan data tersebut di browser.

Ringkasan spesifikasi source :

• ExtJS 4.2
• Codeigniter 3.0.4
• MYSQL

Mulai Praktik

Langkah pertama, buat 3 folder dengan nama :

• ext , folder ini akan di isi dengan file master extjs yang telah kamu download
• ext-codeigniter, folder ini akan di isi dengan codeingiter yang akan di jadikan sebagai server.
• ext-view, folder ini akan di isi dengan file kodingan extjs yang berfungsi sebagai client side.

Langkah kedua, buat tabel terlebih dahulu di mysql (nama tabel : log). Untuk database kamu atur sendiri namanya. Berikut adalah fieldnya :

Untuk membuat tabel, agar mudah kamu tinggal jalankan query berikut ini

CREATE TABLE  `log` (
  `log_id` int(11) NOT NULL AUTO_INCREMENT,
  `log_ip` varchar(15) NOT NULL,
  `log_os` varchar(25) NOT NULL,
  `log_browser` varchar(30) NOT NULL,
  `log_type` enum('access', 'activity', 'modify') NOT NULL,
  `log_status` enum('login', 'logout', 'timeout', 'failed_in', 'hack') NOT NULL,
  `log_time` varchar(150) NOT NULL,
  `log_email` varchar(50) NOT NULL,
  `log_password` varchar(40) NOT NULL,
  `log_url` text NOT NULL,
  PRIMARY KEY (`log_id`)
) 
ENGINE=InnoDB;

Keterangan :
untuk field log_status, isi data enum dengan : 'login','logout','timeout','failed_in','hack' . Maaf, pada gambar di atas agak ke tutup enumnya.

Langkah ketiga, Buat 1 controller dengan nama Extjs.php , atur codeingiter sesuai kebutuhan. simpan codeigniter pada folder ext-codeigniter.

<?php

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

class Extjs extends CI_Controller {

    function __construct() {
        parent::__construct();
    }

    function index() {
        $set = $this->db->limit($this->input->get("limit"), $this->input->get("start"))->get('log');
        
        $count = $this->db->get('log');
        $arr_value = array(
            'response' => $set->result(),
            'jumlah' => $count->num_rows()
        );
        
        echo json_encode($arr_value);
        exit;
    }

    function save() {
        $this->db->select("*");
        $this->db->from("log");
        $this->db->where("log_id", $this->input->post('log_id', TRUE));
        $query = $this->db->get();
        $hasil = array(
            "responseText" => "Gagal",
            "success" => false
        );
        if ($query->num_rows() >= 1) {
            $data = array(
                'log_ip' => $this->input->post("log_ip"),
                'log_os' => $this->input->post("log_os"),
                'log_browser' => $this->input->post("log_browser"),
                'log_type' => $this->input->post("log_type"),
                'log_status' => $this->input->post("log_status"),
                'log_time' => $this->input->post("log_time"),
                'log_email' => $this->input->post("log_email"),
                'log_password' => $this->input->post("log_password"),
                'log_url' => $this->input->post("log_url")
            );
            $sukses = $this->db->where("log_id", $this->input->post("log_id"))->update("log", $data);
        } else {
            $data = array(
                'log_ip' => $this->input->post("log_ip"),
                'log_os' => $this->input->post("log_os"),
                'log_browser' => $this->input->post("log_browser"),
                'log_type' => $this->input->post("log_type"),
                'log_status' => $this->input->post("log_status"),
                'log_time' => $this->input->post("log_time"),
                'log_email' => $this->input->post("log_email"),
                'log_password' => $this->input->post("log_password"),
                'log_url' => $this->input->post("log_url")
            );
            $sukses = $this->db->insert("log", $data);
        }
        if ($sukses) {
            $pesan = "Berhasil menyimpan data";
        } else {
            $pesan = "Gagal menyimpan data";
        }
        $hasil = array(
            "responseText" => $pesan,
            "success" => $sukses
        );
        echo json_encode($hasil);
        exit;
    }

    function delete() {
        $id = explode(";", $this->input->post('id'));
        $sukses = false;
        foreach ($id as $val) {
            if (empty($val))
                continue;
            $sukses = $this->db->where("log_id", $val)->delete("log");
        }

        if ($sukses) {
            $pesan = "Berhasil menghapus data";
        } else {
            $pesan = "Gagal menghapus data";
        }
        $hasil = array(
            "responseText" => $pesan,
            "success" => $sukses
        );
        echo json_encode($hasil);
        exit;
    }

}

Langkah empat, buat file dengan nama index.php, lalu simpan di folder ext-view.

<?php $base_url = "http://localhost/ext-codeigniter/index.php/extjs"; ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Log Akses - kang cahya</title>
        <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="../ext/ext-all.js"></script>
        <script type="text/javascript">
            Ext.onReady(function () {
                //Buat Form Untuk isian
                var frmGrid = Ext.create('Ext.form.Panel', {
                    bodyPadding: 5,
                    frame: true,
                    items: [{
                            xtype: 'hidden',
                            name: 'log_id'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'IP',
                            name: 'log_ip',
                            value: "<?= $_SERVER['REMOTE_ADDR']; ?>",
                            readonly: true
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'OS',
                            name: 'log_os'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Browser',
                            name: 'log_browser'
                        }, {
                            xtype: 'radiogroup',
                            items: [
                                {boxLabel: 'Access', name: 'log_type', inputValue: 'access', checked: true},
                                {boxLabel: 'Activity', name: 'log_type', inputValue: 'activity'},
                                {boxLabel: 'Modify', name: 'log_type', inputValue: 'modify'}
                            ],
                            fieldLabel: 'Type',
                        }, {
                            xtype: 'combobox',
                            store: Ext.create('Ext.data.Store', {
                                fields: ['valx', 'name'],
                                data: [
                                    {"valx": "login", "name": "login"},
                                    {"valx": "logout", "name": "logout"},
                                    {"valx": "timeout", "name": "timeout"},
                                    {"valx": "failed_in", "name": "failed_in"},
                                    {"valx": "hack", "name": "hack"}
                                ]
                            }),
                            queryMode: 'local',
                            displayField: 'name',
                            valueField: 'valx',
                            fieldLabel: 'Status',
                            name: 'log_status'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Time',
                            name: 'log_time'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Email',
                            name: 'log_email'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Password',
                            name: 'log_password'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'URL',
                            name: 'log_url'
                        }]
                });

                //Buat object Windows
                var winGrid = Ext.create('widget.window', {
                    title: 'Tambah Data',
                    width: 400,
                    height: 350,
                    modal: true,
                    closeAction: 'hide',
                    items: frmGrid,
                    layout: 'fit',
                    bodyPadding: 5,
                    buttons: [{
                            text: 'OK',
                            handler: function () {
                                frmGrid.el.mask('Saving data ...', 'x-mask-loading');
                                frmGrid.getForm().submit({
                                    method: 'POST',
                                    url: '<?= $base_url; ?>/save',
                                    success: function (form, action) {
                                        frmGrid.el.unmask();
                                        storeGrid.loadPage(1);
                                        winGrid.hide();
                                    }, failure: function (form, action) {
                                        frmGrid.el.unmask();
                                        var res = Ext.decode(action.response.responseText);
                                        Ext.Msg.alert('Informasi!', res.responseText);
                                    }
                                });
                            }
                        }, {
                            text: 'Cancel',
                            handler: function () {
                                winGrid.hide();
                            }
                        }]
                });

                Ext.define('treeMenu', {
                    extend: 'Ext.data.Model',
                    fields: ['log_id', 'log_ip', 'log_os', 'log_browser', 'log_type', 'log_status', 'log_time', 'log_email', 'log_password', 'log_url']
                });

                var storeGrid = Ext.create('Ext.data.Store', {
                    model: 'treeMenu',
                    proxy: {
                        type: 'ajax',
                        url: '<?= $base_url; ?>',
                        noCache: false,
                        params: {
                            start: 0,
                            limit: 20
                        },
                        actionMethods: 'GET',
                        reader: {
                            type: 'json',
                            root: 'response',
                            totalProperty: 'jumlah',
                            idProperty: 'log_id'
                        }
                    },
                    pageSize: 20,
                    autoLoad: true,
                    sorters: [{
                            property: 'log_id',
                            direction: 'ASC'
                        }]
                });

                var smGrid = Ext.create('Ext.selection.CheckboxModel');
                // create the Grid
                var grid = Ext.create('Ext.grid.Panel', {
                    store: storeGrid,
                    columns: [
                        {header: 'Log Id', width: 50, sortable: true, dataIndex: 'log_id'},
                        {header: 'Log Ip', width: 50, sortable: true, dataIndex: 'log_ip'},
                        {header: 'Log Os', width: 100, sortable: true, dataIndex: 'log_os'},
                        {header: 'Log Browser', width: 100, sortable: true, dataIndex: 'log_browser'},
                        {header: 'Log Type', width: 100, sortable: true, dataIndex: 'log_type'},
                        {header: 'Log Status', width: 100, sortable: true, dataIndex: 'log_status'},
                        {header: 'Log Time', width: 100, sortable: true, dataIndex: 'log_time'},
                        {header: 'Log Email', width: 100, sortable: true, dataIndex: 'log_email'},
                        {header: 'Log Password', width: 150, sortable: true, dataIndex: 'log_password'},
                        {header: 'Log URL', width: 250, sortable: true, dataIndex: 'log_url'}
                    ],
                    height: 450,
                    selModel: smGrid,
                    width: 1200,
                    title: 'Log Access',
                    renderTo: 'grid-view',
                    viewConfig: {
                        stripeRows: true
                    },
                    tbar: [{
                            text: 'Tambah',
                            handler: function () {
                                frmGrid.getForm().reset();
                                winGrid.show();
                            }
                        },
                        '-',
                        {
                            text: 'Ubah',
                            disabled: true,
                            id: 'ubah',
                            handler: function () {
                                var sel = grid.getSelectionModel();

                                if (sel.lastSelected) {
                                    frmGrid.getForm().loadRecord(sel.lastSelected);
                                    winGrid.show();
                                } else {
                                    Ext.MessageBox.alert('Information', 'Pilih data yang akan diedit.');
                                }
                            }
                        },
                        '-',
                        {
                            text: 'Hapus',
                            disabled: true,
                            id: "hapus",
                            handler: function () {
                                Ext.MessageBox.confirm('Information', 'Anda yakin akan menghapus data ini ?', deleteGrid);
                            },
                        }],
                    bbar: new Ext.PagingToolbar({
                        store: storeGrid,
                        displayInfo: true,
                        displayMsg: 'Data yang ada {0} - {1} Dari {2}',
                        emptyMsg: "Tidak ada data"
                    }),
                    listeners: {
                        selectionchange: function () {
                            console.log("testing");
                            var hapus = Ext.getCmp("hapus");
                            var ubah = Ext.getCmp("ubah");

                            if (hapus.isDisabled()) {
                                hapus.setDisabled(false);
                            } else {
                                hapus.setDisabled(true);
                            }

                            if (ubah.isDisabled()) {
                                ubah.setDisabled(false);
                            } else {
                                ubah.setDisabled(true);
                            }
                        }
                    }
                });

                var deleteGrid = function (btn) {
                    if (btn == 'yes') {
                        var s = grid.getSelectionModel().selected.items;

                        var id_del = "";
                        for (var i = 0, r; r = s[i]; i++) {
                            id_del = id_del + ';' + r.data.log_id;
                        }
                        ;
                        Ext.Ajax.request({
                            waitMsg: 'Delete ...',
                            url: '<?= $base_url; ?>/delete',
                            params: {
                                id: id_del
                            },
                            success: function (response, options) {
                                frmGrid.getForm().reset();
                                storeGrid.loadPage(1);
                            },
                            failure: function (response, options) {
                                var rsp = Ext.decode(response.responseText);
                                Ext.MessageBox.alert('Delete', rsp.responseText);
                            }
                        });
                    }
                }
            });
        </script>
    </head>
    <body>
        <div id="grid-view"></div>
    </body>
</html>

Keterangan :
Atur base url pada bagian atas, dekat tag html.

DEMO

:: Download source lengkap di github => [KLIK]

Mungkin cukup sekian, sudah ngantuk. Jangan sungkan komen yah :)
DANKE :)