CRUD Menggunakan Framework CI, Boostrap dan DataTable Part 2

   Agak telat update lanjutan buat CRUD Menggunakan Framework CI, Boostrap dan DataTable Part 1. Kali ini kita akan memasuki babak baru. Yaitu melakukan proses SELECT, CREAD, UPDATE dan DELETE database menggunakan MODEL yang akan kita panggil di layout web browser kita melalui CONTROLLER.

   Agak lumayan mendramatisir.(HeHeHe)

   Biar otak lebih rileks n’ encer dulu bro.

  Tapi, sebelum kita masuk ke CRUD Menggunakan Framework CI, Boostrap dan DataTable Part 2. Wajib hukumnya membaca CRUD Menggunakan Framework CI, Boostrap dan DataTable Part 1, atau bisa langsung mengambil file hasil praktik di tahap sebelumnya dibawah ini.

Oke, kalau semua persiapin tahap 1 sudah selesai, kita langsung mulai saja pembelajarannya. Yang pertama kita lakukan adalah kita membuat terlebih dahulu file MODEL di dalam folder Apllication->models yang kita beri nama barang_model.php. Setelah itu copy code berikut ke dalam model barang_model.php:

defined('BASEPATH') OR exit('No direct script access allowed');

class Barang_model extends CI_Model {

 var $table="barang";
 var $column= array('barcode','nama','satuan','harga','stok' );
 var $order=array('id' => 'desc' );

 public function __construct()
 {
  parent::__construct();
  $this->load->database();
 }

 private function _get_datatables_query()
 {

  $this->db->from($this->table);
  $i = 0;

  foreach ($this->column as $item)
  {
   if ($_POST['search']['value'])
    ($i===0) ? $this->db->like($item, $_POST['search']['value']) : $this->db->or_like($item, $_POST['search']['value']);
   $column[$i]=$item;
   $i++;

  }

  if (isset($_POST['order'])) 
  {
   $this->db->order_by($column[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
  }
  elseif (isset($this->order)) 
  {
   $order=$this->order;
   $this->db->order_by(key($order), $order[key($order)]);
  }
 }

 function get_datatables()
 {
  $this->_get_datatables_query();
  if ($_POST['length'] != 1) 
  $this->db->limit($_POST['length'], $_POST['start']);
  $query= $this->db->get();
  return $query->result();
 }

 function count_filtered()
 {
  $this->_get_datatables_query();
  $query = $this->db->get();
  return $query->num_rows();
 }

 public function count_all()
 {
  $this->db->from($this->table);
  return $this->db->count_all_results();
 }

 public function get_by_id($id)
 {
  $this->db->from($this->table);
  $this->db->where('id',$id);
  $query = $this->db->get();

  return $query->row();
 }
}

Kemudian di folder CONTROLLER tepatnya di file barang.php, tambahakan code seperti dibawah in:

public function ajax_list()
{
 $list = $this->barang->get_datatables();
 $data = array();
 $no = $_POST['start'];
 foreach ($list as $barang) {
  $no++;
  $row = array();
  $row[] = $no;
  $row[] = $barang->barcode;
  $row[] = $barang->nama;
  $row[] = $barang->satuan;
  $row[] = $barang->harga;
  $row[] = $barang->stok;
   //add html for action
  $row[] = '<a class="btn btn-xs btn-primary" href="javascript:void()" title="Edit" onclick="edit_barang('."'".$barang->id."'".')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
     <a class="btn btn-xs btn-danger" href="javascript:void()" title="Hapus" onclick="delete_barang('."'".$barang->id."'".')"><i class="glyphicon glyphicon-trash"></i> Delete</a>';
  
  $data[] = $row;
 }
 $output = array(
   "draw" => $_POST['draw'],
   "recordsTotal" => $this->barang->count_all(),
   "recordsFiltered" => $this->barang->count_filtered(),
   "data" => $data,
    );
 //output to json format
 echo json_encode($output);
}

public function ajax_edit($id)
{
 $data = $this->barang->get_by_id($id);
 echo json_encode($data);
}

Dan jangan lupa di bagian function __construct() kita load model yang berhubungan dengan database, dalam hal ini barang_model.php sehingga kita tambahkan code seperti dibawah ini:

$this->load->model('barang_model','barang');

Dan tahap selanjutnya adalah, kita mebuat script untuk mengload data ajax yang sudah kita buat dan menampilkan ke dalam layout. Dalam hal ini kita tampilkan di VIEW. Kita masuk ke barang.php yang terdapat di folder VIEW, kemudian kita tambahkan script dibawah ini di dalam tag javascript:

      var save_method; //methode untuk menyimpan data
      var table;
      $(document).ready(function() {
        table = $('#table').DataTable({ 
          "sPaginationType":"full_numbers",
          "scrollY": "350px",
          "scrollCollapse": true,
          "serverSide": true, 
          
          "ajax": {
              "url": "<?php echo site_url('barang/ajax_list')?>",
              "type": "POST"
          },

          "columnDefs": [
          { 
            "targets": [ -1 ], 
            "orderable": false
          },
          {
            "searchable": false,
              "targets": 0 ,            
              "orderable": false,
          },
          ],

          //fungsi ini untuk memberikan total pada footer
          "footerCallback": function ( row, data, start, end, display ) {
              var api = this.api(), data;
   
              var intVal = function ( i ) {
                  return typeof i === 'string' ?
                      i.replace(/[\$,]/g, '')*1 :
                      typeof i === 'number' ?
                          i : 0;
              };
   
              total = api
                  .column( 4 )
                  .data()
                  .reduce( function (a, b) {
                      return intVal(a) + intVal(b);
                  }, 0 );
   
              pageTotal = api
                  .column( 4, { page: 'current'} )
                  .data()
                  .reduce( function (a, b) {
                      return intVal(a) + intVal(b);
                  }, 0 );
   
              $( api.column( 4 ).footer() ).html(
                  'Rp '+pageTotal +' ( Rp '+ total +' total)'
              );
          }
        });

        $("div.toolbar").html('<b>Data Barang </b>');
    });

    function edit_barang(id)
        {
          save_method = 'update';
          $('#form')[0].reset(); // reset form/ menghapus isi field form

          //load data dari ajax dan menampilkan ke form
          $.ajax({
            url : "<?php echo site_url('barang/ajax_edit/')?>/" + id,
            type: "GET",
            dataType: "JSON",
            success: function(data)
            {
               
                $('[name="id"]').val(data.id);
                $('[name="barcode"]').val(data.barcode);
                $('[name="nama"]').val(data.nama);
                $('[name="satuan"]').val(data.satuan);
                $('[name="harga"]').val(data.harga);
                $('[name="stok"]').val(data.stok);
                
                $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                $('.modal-title').text('Edit Data barang'); // Set title to Bootstrap modal title
                
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Error get data from ajax');
            }
        });
    }

Semua sudah siap, tapi ada 1 hal yang harus kita setting terlebih dahulu, yaitu di bagian konfigurasi database. Masuk ke foldel Application->config->database.php. Setelah itu setting sesuai dengan konfigurasi database yang kalian lakukan di MySQL:

$db['default'] = array(
 'dsn' => '',
 'hostname' => 'localhost',//nama host atau bisa ip 127.0.0.1
 'username' => 'root',// username MySQL
 'password' => '',//Password MySQL
 'database' => 'crud',// nama database
 'dbdriver' => 'mysqli',
 'dbprefix' => '',
 'pconnect' => FALSE,
 'db_debug' => (ENVIRONMENT !== 'production'),
 'cache_on' => FALSE,
 'cachedir' => '',
 'char_set' => 'utf8',
 'dbcollat' => 'utf8_general_ci',
 'swap_pre' => '',
 'encrypt' => FALSE,
 'compress' => FALSE,
 'stricton' => FALSE,
 'failover' => array(),
 'save_queries' => TRUE
);

Jika sudah, coba jalankan sistemnya menggunakan browser. Dengan mengetik: http://localhost/latihanCRUD/

Kalau terdapat masalah, jangan sungkan untuk bertanya di komentar.

SELAMAT MENCOBA J

Share this post