Artikel

Panduan membuat Live CRUD dengan Codeigniter dan Ajax

    Dibaca 24218 kali Javascript

Jumpa lagi dengan artikel tutorial hari ini.

 

Hari ini saya akan membagikan tutorial dengan framework codeigniter cara membuat model live CRUD (create,read,update,delete) didalam table.


Kata live disini maksudnya adalah, saat kita melakukan penambahan atau perubahan data pada table atau didalam sel table,hanya dengan menekan tombol 'Enter' maka semua data yang kita tambahkan/ubah akan langsung dikirim dan diupdate ke database tanpa perlu mereload halaman. Semua request akan dilakukan dengan Ajax.



Pada proses delete, akan muncul dialog konfirmasi untuk memastikan agar tidak mengalami penghapusan data secara tidak sengaja. Dialog konfirmasi ini menggunakan plugin sweetalert


 

Dalam tutorial kali ini kita akan memerlukan beberapa komponen komponen. Yaitu: bootstap,codeigniter,jquery dan sweetalert.

 


Saya sudah menyediakan contoh yang sudah jadi,sudah lengkap beserta semua komponen yang saya sebutkan diatas.
Silahkan kamu download lalu jalankan ke localhost kamu.


Download


File yang barusan kamu download adalah sudah merupakan final project. Silahkan kamu import database yang sudah ada disitu, jalankan project kamu di localhost dan silahkan dipelajari sendiri.


Nah berikut ini adalah tutorial project tersebut dari awal sampai selesai. Silahkan diikuti.
Untuk komponen dan assets yang akan diperlukan, silahkan copy dan gunakan komponen/assets dari final project yang barusan kamu download.


Mari kita mulai...

 

Pesiapan


Masuklah ke localhost kamu dan buat sebuah database baru bernama crud


Masuk pada database tersebut, lalu Import file crud.sql.
Jika berhasil import, maka database crud sudah memiliki table member dan telah berisi data.



Selanjutnya buat folder project baru pada localhost kamu yang bernama "crud" lalu masukan file file framework codeigniter didalamnya.



atur databasenya di application/config/database.php
nama databasenya gunakan crud



buka application/config/config.php
lalu atur base url menjadi
http://localhost/crud/


Buat controller baru didalam folder application/controllers/ dengan nama Crud.php


Buat model baru didalam folder application/models/ dengan nama Crud_model.php

 

Buat view baru didalam folder application/views/ dengan nama crud_view.php

 

buat folder assets lalu taru semua file file bootstrap,sweetalert dan jquery didalam folder tersebut.
Hasilnya seperti ini


 

Coding

 

Buka file controler bernama Crud.php
Lalu masukan code berikut ini

 

 

<?php

class Crud extends CI_Controller
{

function __construct(){
parent::__construct();
$this->load->model('crud_model');
$this->load->helper('url');
$this->load->database();
}


function index(){

$data["people"]=$this->crud_model->read();
$this->load->view("crud_view",$data);

}

function create(){

}

function update(){

}

function delete(){

}

}

 


Lalu buka juga file model bernama Crud_model.php
Lalu masukan code berikut ini

 

 

<?php

class Crud_model extends CI_Model
{

function __construct(){
parent::__construct(); 
}

function create(){

}


function read(){
$this->db->order_by("id","desc");
$query=$this->db->get("member");
return $query->result_array();
}


function update($id,$value,$modul){

}

function delete($id){

}


}

 


Sekaran buka file view bernama crud_view.php
Lalu masukan code berikut ini

 

 

 

<html>
<head>
<title>Live CRUD</title>


<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/sweetalert/sweetalert.css'); ?>">

<script type="text/javascript" src="<?php echo base_url('assets/jquery.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/sweetalert/sweetalert.min.js'); ?>"></script>

<style type="text/css">

td {
cursor: pointer;
}

.editor{
display: none;
}

</style>

 

</head>
<body>


<div class="container">

<div class="row">
<div class="col-md-6">

<h2>Latihan live CRUD</h2>

<button class="btn btn-info" id="tambah-data"><i class="glyphicon glyphicon-plus-sign"></i> Tambah </button>

<br>
<br>
<br>
<table id="table-data" class="table table-striped">

<thead>
<tr>
<th>Nama</th>
<th>Email</th>
<th>Phone</th>
<th>Hapus</th>
</tr>
</thead>

<tbody id="table-body">
<?php

foreach ($people as $member) {
echo "<tr data-id='$member[id]'>
<td><span class='span-nama caption' data-id='$member[id]'>$member[nama]</span> <input type='text' class='field-nama form-control editor' value='$member[nama]' data-id='$member[id]' /></td>
<td><span class='span-email caption' data-id='$member[id]'>$member[email]</span> <input type='text' class='field-email form-control editor' value='$member[email]' data-id='$member[id]' /></td>
<td><span class='span-phone caption' data-id='$member[id]'>$member[phone]</span> <input type='text' class='field-phone form-control editor' value='$member[phone]' data-id='$member[id]' /></td>
<td><button class='btn btn-xs btn-danger hapus-member' data-id='$member[id]'><i class='glyphicon glyphicon-remove'></i> Hapus</button></td>
</tr>";
}


?>
</tbody>

</table>

</div>
</div>

</div>

 

<script type="text/javascript">

</script>

</body>
</html>

 


Sekarang buka browser kamu lalu masuk ke alamat ini
http://localhost/crud/index.php/crud
Maka kamu akan mendapatkan hasil seperi ini



Tapi table tersebut belum bisa diapa-apain, belum bisa diedit, ditambah, dan dihapus.
Sekarang kita akan memasuki tahap paling keren.


1. Menampilkan field input ketika sel table diklik


File crud_view.php
tambahkan code berikut didalam tag "script" yang sudah ada

 

 

$(function(){

$.ajaxSetup({
type:"post",
cache:false,
dataType: "json"
});


$(document).on("click","td",function(){
$(this).find("span[class~='caption']").hide();
$(this).find("input[class~='editor']").fadeIn().focus();
});


});

 

Refresh browser kamu dan coba mulai klik data yg ada didalam sel-sel table. Sel-selnya langsung bisa editable.



Namun data yang diedit belum bisa tersimpan ke database. Janjut ketahap selanjutnya


2. Mengirim dan update data ke database (Ajax)


Masih pada file crud_view.php,
Pada bagian javascriptnya , tambahkan code beberapa code didalamnya sehingga menjadi seperti berikut ini

 

$(function(){

$.ajaxSetup({
type:"post",
cache:false,
dataType: "json"
});


$(document).on("click","td",function(){
$(this).find("span[class~='caption']").hide();
$(this).find("input[class~='editor']").fadeIn().focus();
});


$(document).on("keydown",".editor",function(e){
if(e.keyCode==13){
var target=$(e.target);
var value=target.val();
var id=target.attr("data-id");
var data={id:id,value:value};
if(target.is(".field-nama")){
data.modul="nama";
}else if(target.is(".field-email")){
data.modul="email";
}else if(target.is(".field-phone")){
data.modul="phone";
}

$.ajax({
data:data,
url:"<?php echo base_url('index.php/crud/update'); ?>",
success: function(a){
target.hide();
target.siblings("span[class~='caption']").html(value).fadeIn();
}

})

}

});


});

 

 

Sekarang pada file Crud.php,
Tambahkan code didalm fungsi update.

 

<?php

class Crud extends CI_Controller
{

function __construct(){
parent::__construct();
$this->load->model('crud_model');
$this->load->helper('url');
$this->load->database();
}


function index(){

$data["people"]=$this->crud_model->read();
$this->load->view("crud_view",$data);

}

function create(){

}

function update(){
$id= $this->input->post("id");
$value= $this->input->post("value");
$modul= $this->input->post("modul");
$this->crud_model->update($id,$value,$modul);
echo "{}";
}

function delete(){

}

}

 


Sekarang pada file Crud_model.php,
Tambahkan juga code didalam fungsi update sehingga menjadi sperti ini.

 

<?php

class Crud_model extends CI_Model
{

function __construct(){
parent::__construct(); 
}

function create(){

}


function read(){
$this->db->order_by("id","desc");
$query=$this->db->get("member");
return $query->result_array();
}


function update($id,$value,$modul){
$this->db->where(array("id"=>$id));
$this->db->update("member",array($modul=>$value));
}

function delete($id){

}


}

 


Refresh browser kamu lalu.
Klik sel didalam table, edit data didalam lalu tekan tombol "enter". Data sudah langsung terupdate :)



3. Membuat (create) baris data baru
tambahkan code javascript sehingga menjadi seperti ini

 

$(function(){

$.ajaxSetup({
type:"post",
cache:false,
dataType: "json"
});


$(document).on("click","td",function(){
$(this).find("span[class~='caption']").hide();
$(this).find("input[class~='editor']").fadeIn().focus();
});


$("#tambah-data").click(function(){
$.ajax({
url:"<?php echo base_url('index.php/crud/create'); ?>",
success: function(a){
var ele="";
ele+="<tr data-id='"+a.id+"'>";
ele+="<td><span class='span-nama caption' data-id='"+a.id+"'></span> <input type='text' class='field-nama form-control editor' data-id='"+a.id+"' /></td>";
ele+="<td><span class='span-email caption' data-id='"+a.id+"'></span> <input type='text' class='field-email form-control editor' data-id='"+a.id+"' /></td>";
ele+="<td><span class='span-phone caption' data-id='"+a.id+"'></span> <input type='text' class='field-phone form-control editor' data-id='"+a.id+"' /></td>";
ele+="<td><button class='btn btn-xs btn-danger hapus-member' data-id='"+a.id+"'><i class='glyphicon glyphicon-remove'></i> Hapus</button></td>";
ele+="</tr>";

var element=$(ele);
element.hide();
element.prependTo("#table-body").fadeIn(1500);

}
});
});


$(document).on("keydown",".editor",function(e){
if(e.keyCode==13){
var target=$(e.target);
var value=target.val();
var id=target.attr("data-id");
var data={id:id,value:value};
if(target.is(".field-nama")){
data.modul="nama";
}else if(target.is(".field-email")){
data.modul="email";
}else if(target.is(".field-phone")){
data.modul="phone";
}

$.ajax({
data:data,
url:"<?php echo base_url('index.php/crud/update'); ?>",
success: function(a){
target.hide();
target.siblings("span[class~='caption']").html(value).fadeIn();
}

})

}

});


});

 


Pada file Crud.php
buat jadi seperti ini

 

<?php

class Crud extends CI_Controller
{

function __construct(){
parent::__construct();
$this->load->model('crud_model');
$this->load->helper('url');
$this->load->database();
}


function index(){

$data["people"]=$this->crud_model->read();
$this->load->view("crud_view",$data);

}

function create(){
echo json_encode(array("id"=>$this->crud_model->create()));
}

function update(){
$id= $this->input->post("id");
$value= $this->input->post("value");
$modul= $this->input->post("modul");
$this->crud_model->update($id,$value,$modul);
echo "{}";
}

function delete(){

}

}

 


Pada file Crud_model.php
buat jadi seperti ini

 

<?php

class Crud_model extends CI_Model
{

function __construct(){
parent::__construct(); 
}

function create(){
$this->db->insert("member",array("nama"=>""));
return $this->db->insert_id();
}


function read(){
$this->db->order_by("id","desc");
$query=$this->db->get("member");
return $query->result_array();
}


function update($id,$value,$modul){
$this->db->where(array("id"=>$id));
$this->db->update("member",array($modul=>$value));
}

function delete($id){

}


}

 


Refresh lagi browser kamu lalu tekan tombol "tambah".
Akan muncul baris baru, dan sel-nya sudah bisa kamu edit



4. Menghapus Data
Tambahkan lagi code javascript sehingga menjadi seperti ini:

 

$(function(){

$.ajaxSetup({
type:"post",
cache:false,
dataType: "json"
});


$(document).on("click","td",function(){
$(this).find("span[class~='caption']").hide();
$(this).find("input[class~='editor']").fadeIn().focus();
});


$("#tambah-data").click(function(){
$.ajax({
url:"<?php echo base_url('index.php/crud/create'); ?>",
success: function(a){
var ele="";
ele+="<tr data-id='"+a.id+"'>";
ele+="<td><span class='span-nama caption' data-id='"+a.id+"'></span> <input type='text' class='field-nama form-control editor' data-id='"+a.id+"' /></td>";
ele+="<td><span class='span-email caption' data-id='"+a.id+"'></span> <input type='text' class='field-email form-control editor' data-id='"+a.id+"' /></td>";
ele+="<td><span class='span-phone caption' data-id='"+a.id+"'></span> <input type='text' class='field-phone form-control editor' data-id='"+a.id+"' /></td>";
ele+="<td><button class='btn btn-xs btn-danger hapus-member' data-id='"+a.id+"'><i class='glyphicon glyphicon-remove'></i> Hapus</button></td>";
ele+="</tr>";

var element=$(ele);
element.hide();
element.prependTo("#table-body").fadeIn(1500);

}
});
});


$(document).on("keydown",".editor",function(e){
if(e.keyCode==13){
var target=$(e.target);
var value=target.val();
var id=target.attr("data-id");
var data={id:id,value:value};
if(target.is(".field-nama")){
data.modul="nama";
}else if(target.is(".field-email")){
data.modul="email";
}else if(target.is(".field-phone")){
data.modul="phone";
}

$.ajax({
data:data,
url:"<?php echo base_url('index.php/crud/update'); ?>",
success: function(a){
target.hide();
target.siblings("span[class~='caption']").html(value).fadeIn();
}

})

}

});

 

$(document).on("click",".hapus-member",function(){
var id=$(this).attr("data-id");
swal({
title:"Hapus Member",
text:"Yakin akan menghapus member ini?",
type: "warning",
showCancelButton: true,
confirmButtonText: "Hapus",
closeOnConfirm: true,
},
function(){
$.ajax({
url:"<?php echo base_url('index.php/crud/delete'); ?>",
data:{id:id},
success: function(){
$("tr[data-id='"+id+"']").fadeOut("fast",function(){
$(this).remove();
});
}
});
});
});


});

 



Pada file Crud.php

 

<?php

class Crud extends CI_Controller
{

function __construct(){
parent::__construct();
$this->load->model('crud_model');
$this->load->helper('url');
$this->load->database();
}


function index(){

$data["people"]=$this->crud_model->read();
$this->load->view("crud_view",$data);

}

function create(){
echo json_encode(array("id"=>$this->crud_model->create()));
}

function update(){
$id= $this->input->post("id");
$value= $this->input->post("value");
$modul= $this->input->post("modul");
$this->crud_model->update($id,$value,$modul);
echo "{}";
}

function delete(){
$id= $this->input->post("id");
$this->crud_model->delete($id);
echo "{}"; 
}

}



Pada file Crud_model.php

 

<?php

class Crud_model extends CI_Model
{

function __construct(){
parent::__construct(); 
}

function create(){
$this->db->insert("member",array("nama"=>""));
return $this->db->insert_id();
}


function read(){
$this->db->order_by("id","desc");
$query=$this->db->get("member");
return $query->result_array();
}


function update($id,$value,$modul){
$this->db->where(array("id"=>$id));
$this->db->update("member",array($modul=>$value));
}

function delete($id){
$this->db->where("id",$id);
$this->db->delete("member"); 
}


}

 


Refresh browser kamu lalu klik tombol hapus yang berwarna merah.
Ini dia hasilnya


 

klik lagi tomboh "Hapus", maka data yang hendak dihapus akan menghilang.


Yup! Itu dia keseluruhan codenya, silahkan dikembangkan dan dipelajari.
Jika mengalami masalah, silahkan download project yang sudah jadi dibawah ini


Download


Demikian tutorial kali ini, sampai jumpa lagi ditutorial selanjutnya.
Jika ada kesalahan, error, pada tutorial ini, ataupun jika ada pertanyaan, silahkan berikan komentar anda.


Semoga bermanfaat.