[CodeIgniter] CRUD dengan EasyUI
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
mantap gan...ijin download ya..hehehehe
BalasHapusSilahkan pak :D
HapusIzin Download ya Mas Dida, maklum Baru belajar Codeigniter
BalasHapusSilahkan om :D
HapusAne lg nyari contoh crud CI + JQuery, eh nyasar ke sini :D
BalasHapusijin donlod Gan...
sering2 nyasar aja bro. hehehe
Hapusnice tutorial...
BalasHapustapi pas yang delete data ko pas di klik malah ilang tombol delete nya..
mhon bantuannya..
oh iya bener, itu kalo di chrome ya.
Hapusbisa di ganti javascriptnya yang bagian
function remove()
diganti jadi
function hapus()
dan jangan lupa di onClicknya juga ubah.
nice tutorial...
BalasHapustp setelah didownload n diextract folder CRUD yang berisi index,create,update n delete ngak ada tuh gang,,,
mohon pencerahannya thx
lah, emang nggak ada file itu bro,
Hapuscuma ada
-controller (crud.php)
-model (crud_model.php)
-view (crud.php dan grid.php)
sisanya cuma sql terus js dan css di folder assets
gan kalau pengen ditambahin gambar di gridnya n cara update gambarnya itu gimana codingnya ya, ane udah muter2 kagak nemnu juga codingnya :(
BalasHapus<*img src="ane isi filed='nama fieldnya'">kok kagak muncul di form editnya ya..
mohon bantuannya,, thx b4
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
BalasHapussalam kenal mas
thx,
Mas mau tanya untuk menambah fungsi searchnya gimana ya,, mohon bantuannya..
BalasHapusthanks nice tutor
BalasHapuskalo di html biasa buat ng link ke halaman lain pake a href, kalo di ci gimana caranya bikin link ke halaman lain yah? thanks
BalasHapusgampang kok, lihat di controller pada bagian fungsi getJson
Hapussaya ambil contoh bagian 'type'=>$data['type'], di bikin link, tinggal 'type'=>'Link Dida Nurwanda',
Gan.. gimana cara jalaninya ya.. thx ya gan.. maklum nubie
BalasHapushapusnya ga bisa, malah button hapus mobilnya yg ilang
BalasHapusudah di bahas di atas,
Hapus--------------------------------------------------
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.
ijin download
BalasHapusom kalo mau atur limit pagination nya gimana? ane udah edit skrip ini tp ga' ngaruh:
BalasHapus$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 5;
mohon bantuannya om.. thx
halo bro,
BalasHapusitu 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?
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.
BalasHapuspada grid.php jgn lupa disetting ke folder controller anda, kalau saya menggunakan
Hapusurl="<?php echo base_url().('latihan/ctr/crud');
karena pada crud(),..
Hapuspada bariss..
echo $this->model->getJson();
..
berfungsi untuk memanggil data pada database jika salah url tidak akan tampil data dari database..
hatur nuhung kang sangat bermanfaat :)
BalasHapussaya sudah ikuti cara diatas, tapi saya mencoba membuat baru dengan cara yg sama. Tapi jadinya tidak bisa Update dan Delete. Mohon bantuannya
BalasHapusgan klau mau nambah searchingnya bagaimana ya? jadi bisa di kelompokan gitu
BalasHapusgan updatenya ko ga jalan yah mohon bantuannya? saya udh coba ulik tetep ga jalan :D makasih, from karir.fathan@gmail.com
BalasHapusmau tanya kok , kalau udah di tambah gak reload dan close form-dialognya
BalasHapusmaksudnya, browsernya gk reload. ini kan memang full ajax, jadi gk ada reload
Hapuscara dapatin id nya gimana , untuk href(nge link)
HapusKeren gan sangat bermanfaat
BalasHapusMantap kang, terimakasih
BalasHapusmantap jiwa ...terimkasih mastah
BalasHapuslink mati bos
BalasHapuswaduh, saya gak ada backupnya... copas aja bos kode2nya =))
Hapuseh mati apanya, aktif ko itu
HapusSelamat siang, saya mau tanya.
BalasHapustutorial yang anda buat dengan ci Versi berapa 2/3
tutorialnya bagus+keren (h)
terima kasih
CI2, tapi di CI3 juga bisa
HapusLink download nya mati gan
BalasHapus2020 here, 4 shared udah gak jaman gan :v
Hapus