Kali ini saya akan memberikan sedikit contoh Ajax CRUD CodeIgniter dengan library Twitter Bootstrap 3, tak lain dan tak bukan yaitu CodeIgniterStrap. Mungkin dengan melihat contoh ini, Anda akan mendapat gambaran mudahnya menerapkan Twitter Bootstrap pada 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
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.
Setalah itu buat view dengan nama index.php
Atur lokasi css dan js Twitter Bootstrap dan jQuery Anda. Jika sudah, buat juga file view dengan nama form.php
Selesai deh, silahkan di test dan berikut penampakannya.
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.
Halaman utama
Form input
Form validation dengan ajax
List data
Form edit masih satu form dengan form input
Konfirmasi penghapusan data
Konfirmasi penghapusan semua data
Download
Password: didanurwanda.blogspot.com
