Crud Codeigniter 3.0.4 Dengan Extjs 4.2
ExtJs merupakan Javascript UI framework untuk pengembangan aplikasi berbasis web. Sebagai perbandingan, Ext JS ini sanggup disejajarkan dengan jQuery UI yang lebih dulu populer. Pada pada dasarnya Ext JS meruapakan library untuk menciptakan tampilan front-end yang berjalan di browser. Ext JS dikembangkan oleh Sencha. Versi terbaru dari ExtJS ketika ini ialah versi 6.
Di karenakan ExtJS ini berbayar, dan ketika ini di kantor kawasan ku bekerja menggunakan ExtJS versi 4.2, maka kali ini aku hanya akan membahas cara menciptakan CRUD dengan ExtJS 4.2 dan aku akan menggunakan codeigniter 3.0.4. Terdapat 2 lisensi pada ExtJS yaitu lisensi GPL, dan lisensi berbayar. Untuk mem-praktikan tutorial ini kau sanggup menggunakan ExtJS yang berlisensi GPL, d0wnl0ad aja di official site-nya.
Di pembahasan kali ini, aku 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. kemudian sehabis 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 kau d0wnl0ad
- 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 kau atur sendiri namanya. Berikut ialah fieldnya :
Untuk menciptakan tabel, biar gampang kau 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', 'h4ck') 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','h4ck' . 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, kemudian 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/j4vascript" src="../ext/ext-all.js"></script> <script type="text/j4vascript"> 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": "h4ck", "name": "h4ck"} ] }), 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 bab atas, akrab tag html.
DEMO
:: Download source lengkap di github => [KLIK]
Mungkin cukup sekian, sudah ngantuk. Jangan sungkan komen yah :)
DANKE :)
Sumber http://www.kang-cahya.com
0 Response to "Crud Codeigniter 3.0.4 Dengan Extjs 4.2"
Posting Komentar