Aug 302011
 

Assalamu’ alaikum wr wb

CRUD ExtJs 4 With CodeIgniter

ExtJS

ExtJS

Selamat Berpuasa bagi yang masih berpuasa dan Mohon maaf lahir batin buat teman – teman yang sudah merayakan Idul Fitri. Untuk menepati beberapa janji saya kepada teman – teman, yang menginginkan tutorial dan controh scrip CRUD dengan ExtJS maka akan saya bagikan sedikit tutorial tentang CRUD pada ExtJS.4 dengan menggunakan framework CodeIgniter 1.7.2.

Langsung pada permasalahan, tutorial ini masih berhubungan dengan tutorial saya yang kemaren, yang membahas tentang tree ExtJs karena databasenya masih menggunakan yang ada. yaitu treemenu.

Create table :

CREATE TABLE tbl_menu (
MN_ID int(11) NOT NULL AUTO_INCREMENT,
MN_NAME varchar(30) DEFAULT NULL,
MN_LINK varchar(50) DEFAULT NULL,
MN_PARENT int(11) DEFAULT NULL,
MN_GRP int(11) DEFAULT NULL,
MN_SORT int(11) DEFAULT NULL,
MN_STATUS int(11) DEFAULT NULL,
MN_ICON varchar(50) DEFAULT NULL,
MN_TYPE int(11) DEFAULT NULL,
PRIMARY KEY (MN_ID)
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=latin1

Kemudian buat sebuah class controller pada fodler controllers dengan nama crud

<?php

/**
* Desain by Sugik Puja Kusuma, S.Kom
* email   : sugik@do-event.com
* website : http://www.sugik.do-event.com
* ===============================================================
*      Semua sorce dalam program ini dibawah license [GPL]
*      Silakan Untuk mengembangkan dan memperbanyak source ini
*      Dengan tidak menghilangkan nama pembuat
* ===============================================================
*/

/**
* @property CI_Loader $load
* @property CI_Session $session
* @property CI_Form_validation $form_validation
* @property CI_Input $input
* @property CI_Email $email
* @property CI_DB_active_record $db
* @property CI_DB_forge $dbforge
* @property JsonCI $jsonci
*/
class Crud extends Controller {

//put your code here
var $ent;

function __construct() {
parent::Controller();
$this->load->model('entity_model');
$this->ent = new Entity_model();
}

function Index() {
$this->load->view('crud_view');
}

function get_data() {
$this->ent->set_null();
$this->ent->set_table('tbl_menu');
$this->ent->set_key_field('MN_ID');
$this->ent->set_start($this->input->post('start'));
$this->ent->set_stop($this->input->post('limit'));
$arr_value = array(
'response' => $this->ent->get_data()
, 'jumlah' => $this->ent->get_tot_rows()
);
echo json_encode($arr_value);
}

function save_data() {
$this->ent->set_null();
$this->ent->set_table('tbl_menu');
$this->ent->set_key_field('MN_ID');
$this->ent->set_params(array(
'MN_ID' => $this->input->post('MN_ID', TRUE)
));
$field = array(
'MN_NAME' => $this->input->post('MN_NAME', TRUE)
, 'MN_LINK' => $this->input->post('MN_LINK', TRUE)
, 'MN_PARENT' => $this->input->post('MN_PARENT', TRUE)
, 'MN_GRP' => $this->input->post('MN_GRP', TRUE)
, 'MN_SORT' => $this->input->post('MN_SORT', TRUE)
);
$hasil = array(
"responseText" => "Gagal"
, "success" => false
);
if ($this->ent->get_tot_rows() >= 1) {
$this->ent->set_null();
$this->ent->set_table('tbl_menu');
$this->ent->set_fields($field);
$this->ent->set_params(array(
'MN_ID' => $this->input->post('MN_ID', TRUE)
));
$sukses = $this->ent->update_data();
} else {
$this->ent->set_null();
$this->ent->set_table('tbl_menu');
$this->ent->set_fields($field);
$sukses = $this->ent->save_data();
}
if ($sukses) {
$pesan = "Berhasil menyimpan data";
} else {
$pesan = "Gagal menyimpan data";
}
$hasil = array(
"responseText" => $pesan
, "success" => $sukses
);
echo json_encode($hasil);
}

function delete_data() {
$id = explode(";", $this->input->post('id'));
$sukses = false;
foreach ($id as $val):
if (empty($val))
continue;

$this->ent->set_null();
$this->ent->set_table('tbl_menu');
$this->ent->set_key_field('MN_ID');
$this->ent->set_params(array(
'MN_ID' => $val
));
$sukses = $this->ent->delete_data();
endforeach;

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

}
?>

Buat juga sebuah view pada fodler views dengan nama crud_view

<?php
/**
* Desain by Sugik Puja Kusuma, S.Kom
* email   : sugik@do-event.com
* website : http://www.sugik.do-event.com
* ===============================================================
*      Semua sorce dalam program ini dibawah license [GPL]
*      Silakan Untuk mengembangkan dan memperbanyak source ini
*      Dengan tidak menghilangkan nama pembuat
* ===============================================================
*/
?>
<!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>Latihan Crud</title>
<link rel="stylesheet" type="text/css" href="http://latihan.lokal.com/ext-4.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://latihan.lokal.com/ext-4.0.0/bootstrap.js"></script>

<!-- page specific -->

<style type="text/css">
/* style rows on mouseover */
.x-grid-row-over .x-grid-cell-inner {
font-weight: bold;
}
/* shared styles for the ActionColumn icons */
.x-action-col-cell img {
height: 16px;
width: 16px;
cursor: pointer;
}
/* custom icon for the "buy" ActionColumn icon */
.x-action-col-cell img.buy-col {
background-image: url(../shared/icons/fam/accept.gif);
}
/* custom icon for the "alert" ActionColumn icon */
.x-action-col-cell img.alert-col {
background-image: url(../shared/icons/fam/error.gif);
}
</style>
<script type="text/javascript">
Ext.require([
'Ext.grid.*'
,'Ext.data.*'
,'Ext.util.*'
,'Ext.state.*'
,'Ext.selection.CheckboxModel'
,'Ext.window.*'
]);

Ext.onReady(function() {
Ext.QuickTips.init();
//Buat Form Untuk isian
var frmGrid = Ext.create('Ext.form.Panel',{
bodyPadding: 5
,frame  : true
,items    :[
{
xtype       : 'hidden'
,name       : 'MN_ID'
}
,{
xtype        : 'textfield'
,fieldLabel  : 'Nama Menu'
,name        : 'MN_NAME'
}
,{
xtype        : 'textfield'
,fieldLabel  : 'lINK'
,name        : 'MN_LINK'
}
,{
xtype        : 'textfield'
,fieldLabel  : 'Menu Induk'
,name        : 'MN_PARENT'
}
,{
xtype        : 'textfield'
,fieldLabel  : 'Menu Group'
,name        : 'MN_GRP'
}
,{
xtype        : 'numberfield'
,fieldLabel  : 'Urutan'
,name        : 'MN_SORT'
}
]
});

//Buat object Windows
var winGrid = Ext.create('widget.window',{
title   : 'Crud'
,width  : 400
,height : 250
,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:'<?php echo site_url('crud/save_data') ?>'
,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: [
'MN_ID'
,'MN_NAME'
,'MN_LINK'
,'MN_PARENT'
,'MN_GRP'
,'MN_SORT'
,'MN_STATUS'
,'MN_ICON'
,'MN_TYPE'
]
});

var storeGrid = Ext.create('Ext.data.Store',{
model: 'treeMenu'
,proxy: {
type: 'ajax'
,url : '<?php echo base_url() . 'index.php/crud/get_data' ?>'
,noCache    : false
,params     : Ext.encode({
start   : 0
,limit  : 20
})
,actionMethods  : 'POST'
,reader: {
type: 'json'
,root: 'response'
,totalProperty: 'jumlah'
,idProperty: 'MN_ID'
}
}
,autoLoad: true
,sorters: [{
property    : 'MN_ID',
direction   : 'ASC'
}]
});

var smGrid = Ext.create('Ext.selection.CheckboxModel');
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: storeGrid
,columns: [
{ header: 'NAMA',width: 200,sortable: true,dataIndex: 'MN_NAME'}
,{ header: 'LINK',width: 100,sortable: true,dataIndex: 'MN_LINK'}
,{ header: 'PARENT',width: 100,sortable: true,dataIndex: 'MN_PARENT'}
,{ header: 'GROUP',width: 100,sortable: true,dataIndex: 'MN_GRP'}
,{ header: 'URUTAN',width: 100,sortable: true,dataIndex: 'MN_SORT'}
,{ header: 'STATUS',width: 100,sortable: true,dataIndex: 'MN_STATUS'}
,{ header: 'ICON',width: 100,sortable: true,dataIndex: 'MN_ICON'}
,{ header: 'TYPE',width: 100,sortable: true,dataIndex: 'MN_TYPE'}
]
,height: 350
,selModel : smGrid
,width: 600
,title: 'CRUD'
,renderTo: 'grid-crud'
,viewConfig: {
stripeRows: true
}
,tbar   : [
{
text    : 'Tambah'
,handler: function(){
frmGrid.getForm().reset();
winGrid.show();
}
}
,'-'
,{
text    : 'Edit'
,handler: function(){
var sel = grid.getSelectionModel();
//console.log(sel.lastSelected);
if(sel.lastSelected){
frmGrid.getForm().loadRecord(sel.lastSelected);
winGrid.show();
}else{
Ext.MessageBox.alert('Information','Pilih data yang akan diedit.');
}
}
}
,'-'
,{
text    : 'Hapus'
,handler: function(){
Ext.MessageBox.confirm('Information','Anda yakin akan menghapus data ini. ?', deleteGrid);
}
}
]
,bbar: new Ext.PagingToolbar({
pageSize    : 20
,store      : storeGrid
,displayInfo: true
,displayMsg : 'Data yang ada {0} - {1} Dari {2}'
,emptyMsg   : "Tidak ada data"
})
});

var deleteGrid = function (btn){
if(btn=='yes'){
var s = grid.getSelectionModel().selected.items;
//                        console.log(s);
var id_del= "";
for(var i = 0, r; r = s[i]; i++){
id_del =id_del+ ';' +r.data.MN_ID;
};
Ext.Ajax.request({
waitMsg: 'Delete ...',
url: '<?php echo site_url('crud/delete_data'); ?>',
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>
<style type="text/css">
body{
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body >
<div id="grid-crud" ></div>
</body>
</html>

Setelah semua selesai maka anda tinggal menjalankan scriptnya diatas semoga membantu.
penjelasan akan saya bahas selanjutnya, maaf karena jaringan internet agak lambat jadi belum sempat upload sourcecode lengkapnya.

CRUD

CRUD

Wassalamu’ alaikum wr wb

Facebook Comments

  38 Responses to “CRUD ExtJs 4 With CodeIgniter”

  1. mas script entity_model nya mana?

    makasih

  2. mbahsomo bikin tutorial pake filter nya dong.

  3. Mantabs…. ijin belajar

  4. json_encode itu dr mana ya???

  5. @ Agustian Romy Ariansyah:
    json_encode itu bawaan dari php mas

  6. mantep tutornya…..
    ngebantu bgt tanks bray…

  7. @ chiewiel:
    Sama – sama pren

  8. Thx atas sharingnya.

    Kalo mau ditambahkan Filter u2 cari berdasarkan nama (misalnya) gimana mbah (ehm..)
    Apalagi kalo ada Print-nya.. (ngelunjak nich…hehehe)

    Thx.

  9. @ Arif:
    Kalo mau ingin untuk pencarian bisa tambahkan combo dan text fields untuk pencariannnya.
    kalo yang print biasanya saya menambahkan 2 cara bisa export ke excel atau export ke pdf.
    untuk detail caranya nanti saya buatkan tutorialnya deh

  10. Mbah, kok ga ada file Model nya ya?

    get_data(), delete_data(), dan save_data()

  11. @ Buto:
    hehe iya 😀 nanti deh saya tulis Modelnya

  12. mbahsomo wrote:

    @ Buto:
    hehe iya nanti deh saya tulis Modelnya

    mbah Somo kapan nich modelnya diupload..?please buat blajar mbah ……

  13. Iya nih mbah sudah 13 hari tak tunggu 🙁

  14. @ Buto:
    bisa minta email saja. nanti di kirim deh

  15. mbahsomo wrote:

    @ Buto:
    bisa minta email saja. nanti di kirim deh

    mbah ini email saya, terima kasih banyak dengan berbagi ilmunya 🙂

  16. gunawan wrote:

    mbahsomo wrote:

    @ Buto:
    bisa minta email saja. nanti di kirim deh

    mbah ini email saya mg.susanto@gmail.com, terima kasih banyak dengan berbagi ilmunya

  17. mbah mohon ijin belajar, jika boleh saya juga mau dikirimkan filenya 🙂

  18. @ david:
    Mohon email ke saya : mbahsomo[at]do-event[dot]com

  19. Mas, Minta skrip modelnya dong, kirim ke email saya ya mas, jhon.de.riva@gmail.com, butuh banget buat belajar mas… makasih..

  20. aku ikutan minta script modelnya dong mbah……. ni email saya alwiman88@gmail.com

  21. oke nanti segera di email.

  22. Taqabbalallaahu minna wa minkum shiyamana wa shiyamakum..
    Selamat Hari Raya Idul Fitri 1433 H

    mbah, klo boleh saya juga minta dikirim sourcecode lengkapnya ke email vikha.net@gmail.com , maaf ni saya baru belajar jadi masih bingung liat tutorial di atas.

    Terimakasih ya.
    Salam kenal mbah…

  23. Sama – sama mas

  24. mas minta modelnya jk_sonjaya@yahoo.com

    terimaksaih

  25. mbah, aku juga minta model nya dong,, hehheheh
    ridharklaten@gmail.com

  26. mbah, aku juga minta model nya dong,, hehheheh
    adhan.pribadi@gmail.com

  27. Assalamu’alaykum Mbah, aq jg minta modelnya jg y.. emailq : bl4ck4nt@gmail.com. Salam kenal.. :).
    Btw, mbahsomo ini yg biasa di diskusiweb.com y..?

  28. Mbah somo saya minta modelnya juga donk.
    arief.doctor@gmail.com

    saya pakai cara di atas kok tidak tampil yah data2nya

  29. Mbah somo boleh saya dikirim model ke l132aboy@yahoo.com

    Lagi belajar nih mbah.

  30. Waaaaahh, mantaaaap, ane izin coba gan

  31. assalamualaikum mbah, boleh minta script modelnya, ke shunmisugi@gmail.com … terima kasih mbah

  32. minta soure codenya donk Boss….
    ini email saya: mds.stylerz@gmail.com

  33. minta soure codenya donk Boss….
    ini email saya: mds.stylerz@gmail.com
    Segara ya booss.. butuh bnget nih. 😀
    Hehehe….

  34. minta script modelnya dong mbah … yunan_arifin@yahoo.com atau yunan.arifin@gmail.com
    Makasih …

  35. permisi..
    maaf , saya masih buta banget cara memulai coding dengan CI itu seperti apa..
    minta contoh aplikasi sederhana untuk belajar ci boleh gak.. yang kecil kecil aja..
    atau kalau ada yang sudah di gabung menggunaka extjs juga boleh 😀
    saya butuh banget nih.. 😀
    trims..

  36. mbah, aq juga minta model nya y..
    warizzmann@gmail.com

  37. Terima kasih artikelnya, boleh minta modelnya juga? email: yopie.instag08@gmail.com, thx

  38. post nya bagus dan jelas, bisa minta modelnya mbah? email saya adityawiranatha@gmail.com

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)