Minggu, 22 Desember 2013

[CodeIgniter] Ajax CRUD CodeIgniter dengan CodeIgniterStrap


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

Rabu, 11 Desember 2013

[Android] Alternatif Pembuatan Aplikasi Android dengan HTML selain PhoneGap



Di sela-sela waktu kuliah, saya teringat akan blok kesayangan saya ini. Dengan sedikit waktu luang, saya menyempatkan diri untuk membuat postingan mengenai Android tentunya. 
Ada beberapa teman saya yang mananyakan cara membuat aplikasi Android tetapi dia tidak mengerti pemrograman Java dan XML alhasil saya menyarankanya untuk menggunakan Framework yang bernama PhoneGap. Ya, karena Framework inilah yang paling terkenal dalam membuat aplikasi android bahkan Cross Platform hanya dengan menggunakan HTML5, CSS dan JavaScript. Akan tetapi disamping itu, saya juga menyarankan alternatif lain. Nah berikut beberapa alternatif Framework untuk membuat aplikasi Android.

1. MoSync
MoSync merupakan Framework untuk membuat aplikasi mobile dan tentunya Cross Platform. MoSync sendiri support untuk pembuatan aplikasi mobile dengan C++, HTML5 dan Hibride C++ dengan HTML5. Keunggulan lain yaitu MoSync ada fitur UI yang cukup menarik, yaitu NativeUI untuk HTML5. MoSync juga support dengan javascriptnya PhoneGap

Appspresso mungkin akan menjadi perhatian penting bagi Anda. Sebab Appspresso membikiki banyak library tambahan. Bahkan untuk KitchenSink-nya saja Appspresso menghadirkan fitur yang sangat menarik, bahkan sangat berbeda dengan PhoneGap.

Titanium Appcelerator merupakan Framework yang cukup terkenal. Framework ini mendukung pembuatan aplikasi dengan HTML5. Tetapi fitur unggulan Titanium Appcelerator adalah pembuatan aplikasi Native dengan menggunakan JavaScript.