[CodeIgniter] Ajax CRUD CodeIgniter dengan CodeIgniterStrap
Langsung saja, siapkan CodeIgniterStrap library dan simpan pada folder libraries. Kemudian siapkan juga Twitter Bootstrap 3 dan jquery simpan pada folder assets. Setelah itu, buat database dengan nama user atau terserah anda dan isi dengan table seperti berikut
CREATE TABLE IF NOT EXISTS `user` ( `id` int(3) NOT NULL AUTO_INCREMENT, `nama` varchar(100) NOT NULL, `status` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 ;
Setelah itu buat controller dengan nama User.php dan isi seperti berikut. Oya jangan luma ubah setting routernya agar ke controller user dan atur juga databasenya sesuai dengan yang Anda buat tadi.
<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); class User extends CI_Controller { public function __construct() { parent::__construct(); $this->load->database(); $this->load->helper(array('form', 'url')); $this->load->library('form_validation'); } public function index() { $this->load->view('index'); } public function getList() { $db = $this->db->get('user'); if ($db->num_rows() == 0) { echo '<tr><td colspan="4">Masih Kosong</td></tr>'; } else { foreach ($db->result_object() as $row) { echo '<tr>'; echo '<td>' . $row->id . '</td>'; echo '<td>' . $row->nama . '</td>'; echo '<td>' . $row->status . '</td>'; echo '<td width="140">'; // EDIT BUTTON echo Tb::button('Edit', array( 'type' => Tb::BUTTON_TYPE_LINK, 'onclick' => "editUser('$row->id', '$row->nama', '$row->status')", 'size' => Tb::BUTTON_SIZE_SMALL, 'color' => Tb::BUTTON_COLOR_SUCCESS )); // DELETE BUTTON echo Tb::button('Hapus', array( 'type' => Tb::BUTTON_TYPE_LINK, 'onclick' => "setUserDeleteId('$row->id')", 'size' => Tb::BUTTON_SIZE_SMALL, 'color' => Tb::BUTTON_COLOR_DANGER, 'url' => '#modal_confirm', 'data-toggle' => 'modal' )); echo '</td>'; echo '</tr>'; } } } public function simpan() { $this->form_validation->set_rules('nama', 'Nama', 'required|xss_clean|trim'); $this->form_validation->set_rules('status', 'Status', 'required|xss_clean|trim'); if ($this->form_validation->run()) { if (isset($_POST['id']) && $_POST['id'] != '') { $this->db->where('id', $this->input->post('id')); $this->db->update('user', $this->input->post(NULL, true)); } else { $this->db->insert('user', $this->input->post(NULL, true)); } echo json_encode(array('status' => 'success', 'msg' => 'Berhasil')); } else { echo json_encode(array('status' => 'error', 'msg' => validation_errors())); } } public function hapus() { if (isset($_POST)) { $this->db->delete('user', $this->input->post(NULL, true)); } } public function hapusSemua() { if (isset($_POST)) { $this->db->query('truncate user'); } } }
Setalah itu buat view dengan nama index.php
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax CRUD CodeIgniter dengan CodeIgniterStrap</title> <link rel="stylesheet" href="<?php echo base_url('assets/twbs/css/bootstrap.css'); ?>" /> <script type="text/javascript" src="<?php echo base_url('assets/jquery.js'); ?>"></script> <script type="text/javascript" src="<?php echo base_url('assets/twbs/js/bootstrap.js'); ?>"></script> </head> <body> <!-- NAVBAR top --> <?php echo Tb::navbar(array( 'brandLabel' => 'Ajax CRUD', 'position' => Tb::NAVBAR_FIXED_TOP )); ?> <div class="container" style="margin-top: 60px"> <div class="row"> <div class="col-lg-3"> <?php echo Tb::navs(array( 'stacked' => true, 'items' => array( array('label' => 'Tambah User', 'active' => true, 'url' => '#modal_user_input', 'linkOptions' => array('data-toggle' => 'modal')), array('label' => 'Hapus Semua User', 'active' => true, 'url'=> '#modal_hapus_user', 'linkOptions' => array('data-toggle' => 'modal')) ) )); ?> </div> <div class="col-lg-9"> <table class="table table-bordered table-condensed"> <thead> <tr> <th>ID</th> <th>Nama</th> <th>Status</th> <th>Action</th> </tr> </thead> <tbody></tbody> </table> </div> </div> </div> <!-- NAVBAR footer --> <?php echo Tb::navbar(array( 'position' => Tb::NAVBAR_FIXED_BOTTOM, 'items' => array( Tb::link('http://didanurwanda.blogspot.com', 'Dida Nurwanda', array('class' => 'navbar-text navbar-link')), Tb::p('Ajax CRUD CodeIgniter dengan CodeIgniterStrap', array('class' => 'navbar-text pull-right')), ) )); ?> <!-- MODAL form input --> <?php echo Tb::modal(array( 'id' => 'modal_user_input', 'header' => 'User Form', 'body' => $this->load->view('form', array(), true), )); ?> <!-- MODAL delete confirm --> <?php echo Tb::modal(array( 'id' => 'modal_confirm', 'header' => 'Hapus', 'body' => '<strong>Apa anda yakin akan menghapus data ini ?</strong>', 'footer' => array( Tb::button('Ya', array('onclick' => 'hapusUser()', 'color' => Tb::BUTTON_COLOR_WARNING)), TB::button('Tidak', array('data-dismiss' => 'modal')) ) )); ?> <!-- MODAL delete semua --> <?php echo Tb::modal(array( 'id' => 'modal_hapus_user', 'header' => 'Hapus Semua', 'body' => '<strong>Apa anda yakin akan menghapus semua data ini ?</strong>', 'footer' => array( Tb::button('Ya', array('onclick' => 'hapusSemua()', 'color' => Tb::BUTTON_COLOR_WARNING)), Tb::button('Tidak', array('data-dismiss' => 'modal')) ) )); ?> <script type="text/javascript"> var userId; function getListTableUser() { $('.table tbody').load('<?php echo site_url('user/getList'); ?>'); } getListTableUser(); function editUser(id, nama, status) { $('a[href="#modal_user_input"]').trigger('click'); document.form_user.nama.value = nama; document.form_user.status.value = status; document.form_user.id.value = id; } function setUserDeleteId(id){ userId = id; } function hapusUser(){ $.post('<?php echo site_url('user/hapus'); ?>', {id: userId}, function(e) { getListTableUser(); }); $('.close').trigger('click'); // close modal userId = null; // hapus id } function hapusSemua() { $.post('<?php echo site_url('user/hapusSemua'); ?>', [], function(e){ getListTableUser(); }); $('.close').trigger('click'); // close modal } </script> </body> </html>
Atur lokasi css dan js Twitter Bootstrap dan jQuery Anda. Jika sudah, buat juga file view dengan nama form.php
<!-- NOTIFICATION --> <?php echo Tb::alert('<p class="error_msg"></p>', array( 'color' => Tb::ALERT_COLOR_DANGER, 'id' => 'user_form_validation', 'style' => 'display: none' )); ?> <!-- FORM --> <?php $form = Tb::form(array( 'type' => Tb::FORM_TYPE_HORIZONTAL, 'leftRow' => 3, 'rightRow' => 9, 'action' => site_url('user/simpan'), 'id' => 'form_user', 'name' => 'form_user' )); echo $form->textField('id', '', array('type' => 'hidden')); // HIDDEN FIELD echo $form->textFieldRow('nama', 'Nama', array('placeholder' => 'Nama')); echo $form->textFieldRow('status', 'Status', array('placeholder' => 'Status')); echo $form->submitButton('Simpan', array('color' => Tb::BUTTON_COLOR_SUCCESS)); $form->end(); ?> <script type="text/javascript"> $(document).ready(function(){ $('#form_user').on('submit', function(e){ // submit handler e.preventDefault(); $.post(this.action, $(this).serialize(), function(data){ // ajax post var data = eval('('+ data + ')'); if(data.status == "success") { getListTableUser(); document.form_user.nama.value = ""; document.form_user.status.value = ""; document.form_user.id.value = ""; $('.close').trigger('click'); // close modal clearMsg(); } else if(data.status == "error") { $('#user_form_validation').show(); $('.error_msg').html(data.msg); } }); }); function clearMsg(){ $('#user_form_validation').hide(); $('.error_msg').html(""); } }); </script>
Selesai deh, silahkan di test dan berikut penampakannya.