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>
<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">×</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">×</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>
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();
}
});
});
Kemudian buka file controller Datatables.php, cari dan ubah filenya :
$row[] = $no;
$row[] = $dtBarang->INDEX;
$row[] = $dtBarang->KODE;
$row[] = $dtBarang->DESKRIPSI;
$row[] = $dtBarang->KETERANGAN;
$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));
}
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);
}
No comments:
Post a Comment