Minggu, 22 Desember 2013

12/22/2013
26
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

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
Download
Password: didanurwanda.blogspot.com

26 komentar:

  1. artikel nya bagus kang ,btw boleh minta source offline yang geci.pusku.com kang,ane mau belajar tapi koneksi lambat jadi kalau ada versi offline nya ane lebih gampang buat belajar componen2 dari geci nya hehe..

    nuhun..

    BalasHapus
    Balasan
    1. maksudnya dokumentasinya, sayang nggak ada backupannya. langsung aja download pake http://pagenest.com/

      Hapus
    2. di download aja pake httrack,, bro klo buat ofline

      Hapus
  2. Sangat bermanfaat mas,, (h)

    Kok gx ada model a mas ??

    BalasHapus
    Balasan
    1. kan cuma contoh, lagian cuma dipake sekali fungsi2nya, jadi nggak berulang. tapi intinya sih males =))

      Hapus
  3. ada maslah dikit, misal saya klik edit, tapi ngga jadi edit terus saya tambah user baru, yang muncul bukan form kosong, malah berisi yang tadi akan di edit tapi ngga jadi. :>)

    BalasHapus
  4. Mantab Mas.., Bgmana kalau menerapkan ajax, datatable dan bootstrap pakai CI ??

    BalasHapus
    Balasan
    1. postingan selanjutnya deh bro. tunggu aja :-d

      Hapus
  5. anda lupa mencantumkan darimana mendapatkan Twitter Bootstrap nya.. bagaimanapun juga masukkan jgua di akhir tulisan.

    BalasHapus
    Balasan
    1. kemungkinan pengunjung sudah tahu dimana bisa mendapatkan twitter bootstrap. itu sebabnya mereka membaca tutorial ini. karena mereka tentunya sudah mencoba dan ingin menerapkan.

      Hapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. saya coba jalanin kok hasilnya berantakan ya..?
    apanya yang kurang ya

    BalasHapus
    Balasan
    1. udah di siapin Twitter Bootstrap-nya ?
      udah di siapin juga Library CodeIgniterStrap-nya ?
      udah di siapin juga jQuery-nya ?

      Hapus
  8. Terima Kasih, mas kalau fomr nya ditambah untuk upload gambar bisa gak?

    BalasHapus
  9. Makasi bro,,, ijin comot source-nya, mau sy utak - atik... (o)

    BalasHapus
    Balasan
    1. silahkan bro, di ancurin atau di kembangkan monggo :)

      Hapus
  10. bro, ada ebooknya gak. nanggung nih kalo tutorialnya begini aja.

    BalasHapus
  11. bro , kok line 13 error. Tb itu

    BalasHapus
  12. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  13. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  14. mas ko ini folder 'system' nya ga ada ya? biasanya kan kalo CI itu folder paling luar ada folder 'application' dan folder 'system'.
    Mohon pencerahan nya mas. Makasih.

    BalasHapus

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.