CRUD dengan AJAX jQuery Codeigniter (Datatables Part 2)

Datatables Part 2

Salam buat rekan-rekan sekalian, maaf baru bisa nulis lagi soalnya lg banyak kegiatan, oke langsung aj deh. Materi kali ini merupakan lanjutan dari materti saya yang sebelumnya Datatables Part 1, dalah materi lanjutan ini kita akan mencoba membuat CRUD (Create Read Used Delete) dengan codeigniter menggunakan AJAX jQuery. Berikut tahapannya :

 

Tahap pertama

Untuk tahap pertama ini kalian buka file view_datatables.php, kemudian tambahkan beberapa baris berikut :

<table id="tbl_contoh" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
 <tr>
   <th>#</th>
   <th>INDEX</th>
   <th>KODE</th>
   <th>DESKRIPSI</th>
   <th>KETERANGAN</th>
 </tr>
    </thead>
    <tbody>
  </tbody>
</table>

Menjadi seperti berikut :

<div class="btn-group" style="margin-bottom:-47.5px;">
 <button type="button" id="btnTambah" class="btn btn-sm btn-success" data-toggle="modal" methodType="Add" data-target=".myModalTambah" ><span class="fa fa-plus" aria-hidden="true"></span> Tambah</button> 
 <button class="btn btn-default btn-sm btn-reload"><i class="glyphicon glyphicon-refresh"></i> Muat Ulang</button>
</div>

<table id="tbl_contoh" class="table table-striped table-bordered" cellspacing="0" width="100%">
 <thead>
  <tr>
   <th>#</th>
   <th>INDEX</th>
   <th>KODE</th>
   <th>DESKRIPSI</th>
   <th>KETERANGAN</th>
   <th>OPSI</th> 
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>


<div class="modal fade myModalTambah" tabindex="-1" role="dialog" aria-labelledby="myModal">
<div class="modal-dialog modal-sm " role="document">
<div class="modal-content">
  <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 <h4 class="modal-title" id="ModalLabel">Tambah Data</h4>
  </div>
  <div class="modal-body"><!-- Form Start-->
  <div id="err_mssg"></div>
 <form id="form" method="POST">
 <div class="form-group">
  <div class="row">
   <div class="col-md-12">
    <label>ID Satuan</label>
    <div class="input-group">
     <div class="input-group-addon"><i class="glyphicon glyphicon-qrcode" aria-hidden="true"></i></div>
     <input type="hidden" id="INDEX" name="INDEX">
     <input type="text" id="KODE" name="KODE" maxlength="15" class="form-control" placeholder="Kode Produk..." required>
    </div>
   </div>      
  </div>
 </div> 
 <div class="form-group">
  <div class="row">
   <div class="col-md-12" >
    <label>Deskripsi</label>
    <div class="input-group">
     <div class="input-group-addon"><i class="glyphicon glyphicon-align-left" aria-hidden="true"></i></div>
     <input type="text" id="DESKRIPSI" name="DESKRIPSI" class="form-control" placeholder="Deskripsi..." required>
    </div>
   </div>      
  </div>
 </div> 
 <div class="form-group">
  <div class="row">
   <div class="col-md-12" >
    <label>Keterangan</label>
    <div class="input-group">
     <div class="input-group-addon"><i class="glyphicon glyphicon-align-left" aria-hidden="true"></i></div>
     <input type="text" id="KETERANGAN" name="KETERANGAN" class="form-control" placeholder="Keterangan Barang..." required>
    </div>
   </div>
  </div>
 </div>
 
 </form>    
  </div> <!-- Form End -->
  <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" id="btn-send" class="btn btn-primary"></button>
  </div>
  
</div>
</div>
</div>

<div class="modal fade bs-example-modal-sm myModalDelete" tabindex="-1" role="dialog" aria-labelledby="myModal">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
  <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 <h4 class="modal-title" id="exampleModalLabel"><i class="glyphicon glyphicon-trash"></i> Delete</h4>
  </div>
  <div class="modal-body">
  <form id="FormDel">
 <p>Apakah anda yang akan menghapus data produk berikut?<span id="iINDEX" style="opacity: 0;"></span><br>
 <b>KODE :</b><span id="iKODE"></span><br>
 <b>DESKRIPSI :</b><span id="iDESKRIPSI"></span><br>
 </p>
 </form>
  </div>
  <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" id="btn-delete" class="btn btn-danger">Delete</button>
  </div>
</div>
</div>
</div>

Selanjutnya tambahkan baris code ini di dalam tag script jQuery:

function reload_table(){
  table.ajax.reload(null,false); 
 }
 $('.btn-reload').on('click', function(){
  reload_table();
 });
 $('#btnTambah').on('click', function(){
  $("#btn-send").text('Save');
  $('.myModalTambah #ModalLabel').text('Tambah Data');
  $('#form')[0].reset();   
 });
 $('#tbl_contoh tbody').on('click', 'tr', function () {
  var dataID = table.row(this).data();
  $.ajax({
   url : "",
   type: "POST",
   data:"iINDEX="+dataID[1],
   dataType: "JSON",
   success: function(data)
   {
    
    $('#INDEX').val(data.INDEX);
    $('#KODE').val(data.KODE);
    $('#DESKRIPSI').val(data.DESKRIPSI);
    $('#KETERANGAN').val(data.KETERANGAN);
    
    
    $('#iINDEX').text(data.INDEX);
    $('#iKODE').text(data.KODE);
    $('#iDESKRIPSI').text(data.DESKRIPSI);

    $("#btn-send").text('Update');
   },
    error: function (jqXHR, textStatus, errorThrown)
   {
    alert('Error get data from ajax');
   }
  });
 });
 
 
 $('#btn-send').on('click', function(e){
  var Syntax = $("#btn-send").text();
  if(Syntax =='Update'){
   var form = $('form')[0]; 
   var formData = new FormData(form);
   $.ajax({
    url: "",   
    type: "POST",    
    data: new FormData($("#form")[0]),
    contentType: false,       
    cache: false,             
    processData:false,    
    success: function(data) {   
     
     
     $('#form')[0].reset();
     $(".myModalTambah").modal('hide');
     reload_table();
     
    }
   });
  }else{
   $.ajax({
    url: "",   
    type: "POST",    
    data: new FormData($("#form")[0]),
    contentType: false,       
    cache: false,           
    processData:false,    
    success: function(data) {
     $('#form')[0].reset();
     $(".myModalTambah").modal('hide');
     reload_table();
    }
   });
  }
  });
 
 
 
 $('#btn-delete').on('click', function(){
  var iINDEX = $("#iINDEX").text();
   $.ajax({
    url: "", 
    type: "POST",  
    data: "iINDEX="+iINDEX, 
    success: function(data) { 
     $('#FormDel')[0].reset();
     $(".myModalDelete").modal('hide');
     reload_table();
    }
   });
  });

Tahap ke 2 :
Kemudian buka file controller Datatables.php, cari dan ubah filenya :

$row[] = $no;
$row[] = $dtBarang->INDEX;
$row[] = $dtBarang->KODE;
$row[] = $dtBarang->DESKRIPSI;
$row[] = $dtBarang->KETERANGAN;

Menjadi Menjadi

$row[] = $no;
$row[] = $dtBarang->INDEX;
$row[] = $dtBarang->KODE;
$row[] = $dtBarang->DESKRIPSI;
$row[] = $dtBarang->KETERANGAN;
 $row[] ='<div class="btn-group"> 
  <a href="#" data-toggle="modal" methodType="edit" data-target=".myModalTambahPegawai" class="PegawaiModalEdit btn btn-info btn-xs "><i class="glyphicon glyphicon-pencil"></i></a>
  <a href="#" data-toggle="modal" data-target=".myModalDelete"class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-trash"></i></a>  
  </div>
';

Kemudian tambahkan beberapa function seperti berikut :

function read(){
  $id= $this->input->post('iINDEX');
  $data = $this->datatables_model->getdataby_id($id);
  echo json_encode($data);  
 }
 function add() {
  $data = array(
   'KODE'    => $this->input->post('KODE'),
   'DESKRIPSI'  => $this->input->post('DESKRIPSI'),
   'KETERANGAN'  => $this->input->post('KETERANGAN')

   );
  $insert = $this->datatables_model->save($data);
  echo json_encode(array("status" => TRUE));
 }
 function update() {
  $data = array(
   'KODE'    => $this->input->post('KODE'),
   'DESKRIPSI'  => $this->input->post('DESKRIPSI'),
   'KETERANGAN'  => $this->input->post('KETERANGAN')

   );
  $insert = $this->datatables_model->update(array('INDEX' =>$this->input->post('INDEX')),$data);
  echo json_encode(array("status" => TRUE));
 }
 
 public function delete()
    {
  $iINDEX = $this->input->post('iINDEX');
        $this->datatables_model->delete($iINDEX);
        echo json_encode(array("status" => TRUE));
    }

Tahap 3
Untuk tahap ketiga ini kita akan menambahkan beberapa function pada file model kita yaitu datatables_model.php, dan tambahkan beberapa fungsi ini didalamnya :

public function getdataby_id($id) {
  $this->db->select('*');
  $this->db->where('INDEX',$id);
        $query = $this->db->get($this->table); 
  return $query->row();
    }
 public function save($data) { 
        $this->db->insert($this->table, $data);
        return $this->db->insert_id(); 
 }
 public function update($where, $data) { 
        $this->db->update($this->table, $data, $where);
        return $this->db->affected_rows();
 }
 public function delete($iINDEX)
    {
        $this->db->where('INDEX', $iINDEX);
        $this->db->delete($this->table);
    }

Dan sebagai langkah terakhir silahkan kamu coba dibroser, apakah ada perubahan, bila ia berarti CRUD dengan Ajax jQuery kita telah berhasil. Berikut jika kamu kesulitan mengikuti, kamu bisa download file lengkapnya di :DropBox