CRUD sederhana dengan jquery, jqueryui, dan Codeigniter

50 Replies

Codeigniter
CRUD adalah singkatan dari Create Read Update dan Delete. Setiap aplikasi biasanya kebanyakan memiliki fungsi CRUD di dalamnya. Fungsi ini digunakan untuk menyimpan / menambahkan data, kemudian mengedit data dan menghapus data.

Kali ini saya akan coba memberikan contoh aplikasi CRUD sederhana, yang saya bangun menggunakan Codeigniter dan digabung dengan Jquery serta JQueryui. Apabila ada yang bertanya apa itu Codeigniter, Jquery dan Jqueryui, silahkan googling dulu, atau juga dapat mencari pada artikel blog ini (mungkin ada mungkin juga tidak 😀 ). Sehingga saya anggap, kita sudah biasa menggunakan Codeigniter dan Jquery.

Saya juga tidak akan menjelaskan config.php, kemudian database nya, karena saya anggap itu sudah Anda lakukan 🙂

OK, tanpa perlu berpanjang lebar, saya menggunakan Jqueryui library javascript yang merupakan bagian dari jquery yang di dalamnya banyak ditemukan fungsi-fungsi untuk penanganan interface. Contohnya adalah Dialog, Autocomplete, Drag and Drop, Sortable dan lain sebagainya.

Jqueryui saya gunakan untuk membuat form dialog. Fungsinya, ketika saya akan input data, maka akan muncul sebuah dialog yang berisi form inputan data, kemudian dengan ajax, data akan dimasukkan dalam tabel. Begitu juga dalam proses Edit dan Delete data. Untuk lebih jelasnya bisa di lihat di halaman demo ini 🙂

Berikut script untuk controller yang saya gunakan

[php]
<?php
class Daily extends Controller{
function __construct (){
parent::Controller();
$this->load->model(‘MDaily’);
}

function index(){
$data[‘query’] = $this->MDaily->getAll();
$this->load->view(‘daily/input’,$data);
}

function submit(){
if ($this->input->post(‘ajax’)){
if ($this->input->post(‘id’)){
$this->MDaily->update();
$data[‘query’] = $this->MDaily->getAll();
$this->load->view(‘daily/show’,$data);
}else{
$this->MDaily->save();
$data[‘query’] = $this->MDaily->getAll();
$this->load->view(‘daily/show’,$data);
}
}
}

function delete(){
$id = $this->input->post(‘id’);
$this->db->delete(‘daily’, array(‘id’ => $id));
$data[‘query’] = $this->MDaily->getAll();
$this->load->view(‘daily/show’,$data);
}
}

[/php]

Sedangkan Modelnya

[php]
<?php
class MDaily extends Model{
function __construct (){
parent::Model();
}

function getAll(){
$this->db->select(‘*’);
$this->db->from(‘daily’);
$this->db->limit(5);
$this->db->order_by(‘id’,’ASC’);
$query = $this->db->get();

return $query->result();
}

function get($id){
$query = $this->db->getwhere(‘daily’,array(‘id’=>$id));
return $query->row_array();
}

function save(){
$date = $this->input->post(‘date’);
$name = $this->input->post(‘name’);
$amount=$this->input->post(‘amount’);
$data = array(
‘date’=>$date,
‘name’=>$name,
‘amount’=>$amount
);
$this->db->insert(‘daily’,$data);
}

function update(){
$id = $this->input->post(‘id’);
$date = $this->input->post(‘date’);
$name = $this->input->post(‘name’);
$amount=$this->input->post(‘amount’);
$data = array(
‘date’=>$date,
‘name’=>$name,
‘amount’=>$amount
);
$this->db->where(‘id’,$id);
$this->db->update(‘daily’,$data);
}

}
[/php]

Saya memiliki dua buah view yaitu input.php dan show.php yang scriptnya sebagai berikut.
input.php

[php]
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Daily Notes</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<meta charset="UTF-8">
<style>
body { font-size: 75%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
h1 { font-size: 1.2em; margin: .6em 0; }
a{text-decoration:none;}
{font-size:60%};
</style>
<script>
$(function() {

$( "#dialog:ui-dialog" ).dialog( "destroy" );

$( "#dialog-confirm" ).dialog({
autoOpen: false,
resizable: false,
height:140,
modal: true,
hide: ‘Slide’,
buttons: {
"Delete": function() {
var del_id = {id : $("#del_id").val()};
$.ajax({
type: "POST",
url : "<?php echo site_url(‘daily/delete’)?>",
data: del_id,
success: function(msg){
$(‘#show’).html(msg);
$(‘#dialog-confirm’ ).dialog( "close" );
//$( ".selector" ).dialog( "option", "hide", ‘slide’ );
}
});

},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});

$( "#form_input" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: false,
hide: ‘Slide’,
buttons: {
"Add": function() {
var form_data = {
id: $(‘#id’).val(),
date: $(‘#date’).val(),
name: $(‘#name’).val(),
amount: $(‘#amount’).val(),
ajax:1
};

$(‘#date’).attr("disabled",true);
$(‘#name’).attr("disabled",true);
$(‘#amount’).attr("disabled",true);

$.ajax({
url : "<?php echo site_url(‘daily/submit’)?>",
type : ‘POST’,
data : form_data,
success: function(msg){
$(‘#show’).html(msg),
$(‘#date’).val(‘<?php echo date(‘Y-m-d’); ?>’),
$(‘#id’).val(”),
$(‘#name’).val(”),
$(‘#amount’).val(”),
$(‘#date’).attr("disabled",false);
$(‘#name’).attr("disabled",false);
$(‘#amount’).attr("disabled",false);
$( ‘#form_input’ ).dialog( "close" )
}
});

},
Cancel: function() {
$(‘#id’).val(”),
$(‘#name’).val(”);
$(‘#amount’).val(”);
$( this ).dialog( "close" );
}
},
close: function() {
$(‘#id’).val(”),
$(‘#name’).val(”);
$(‘#amount’).val(”);
}
});

$( "#create-daily" )
.button()
.click(function() {
$( "#form_input" ).dialog( "open" );
});
});

$(".edit").live("click",function(){
var id = $(this).attr("id");
var date = $(this).attr("date");
var name = $(this).attr("name");
var amount = $(this).attr("amount");

$(‘#id’).val(id);
$(‘#date’).val(date);
$(‘#name’).val(name);
$(‘#amount’).val(amount);

$( "#form_input" ).dialog( "open" );

return false;
});

$(".delbutton").live("click",function(){
var element = $(this);
var del_id = element.attr("id");
var info = ‘id=’ + del_id;
$(‘#del_id’).val(del_id);
$( "#dialog-confirm" ).dialog( "open" );

return false;
});
</script>

</head>

<body>
<div id="show">
<?php $this->load->view(‘daily/show’); ?>
</div>
<p>
<button id="create-daily">Input New</button>
</p>

<div id="form_input">
<table>
<?php echo form_open(‘daily/submit’); ?>
<input type="hidden" value=” id="id" name="id">
<tr >
<td> <?php echo form_label(‘Date : ‘); ?></td>
<td> <?php echo form_input(‘date’,date(‘Y-m-d’),’id="date"’); ?></td>
</tr>
<tr>
<td> <?php echo form_label(‘Name : ‘);?> </td>
<td> <?php echo form_input(‘name’,”,’id="name"’); ?></td>
</tr>
<tr>
<td> <?php echo form_label(‘Amount : ‘);?> </td>
<td> <?php echo form_input(‘amount’,”,’id="amount"’); ?></td>
</tr>
</table>
</div>

<div id="dialog-confirm" title="Delete Item ?">
<p>
<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
<input type="hidden" value=” id="del_id" name="del_id">
Are you sure?</p>
</div>

</body>
</html>

[/php]

show.php

[php]
<h1>Daily Notes</h1>
<table id="daily" class="ui-widget ui-widget-content" width="400px">
<tr class="ui-widget-header ">
<th>No</th>
<th>Date</th>
<th>Name</th>
<th>Amount</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<?
$i=0;
foreach ($query as $row){
$i++;
echo "<tr class=\"record\">";
echo "<td>$i</td>";
echo "<td>$row->date</td>";
echo "<td>$row->name</td>";
echo "<td>$row->amount</td>";
echo "<td><a href=\"#\" class=\"edit\" id=\"$row->id\" date=\"$row->date\" name=\"$row->name\" amount=\"$row->amount\">Edit</a></td>";
echo "<td><a class=\"delbutton\" id=\"$row->id\" href=\"#\" >Delete</a></td>";
echo "</tr>";
}
?>
</table>
[/php]

Ini adalah tutorial dasar, jadi masih banyak yang harus diperbaiki dan ditambahkan apabila Anda akan memakai script ini dalam aplilkasi Anda. Apabila ada yang mau menambahkan silahkan masukkan di kolom komentar 🙂 karena saya juga masih belajar.

Source code dapat ditemukan pada github saya di : http://github.com/dwijonarko/ci_ku

Semoga berhasil 🙂

50 thoughts on “CRUD sederhana dengan jquery, jqueryui, dan Codeigniter”

    1. dudu Post author

      buat aja div baru, tar isinya gambar loading. kalo udah sukses div nya di hilangin. Teorinya gitu, prakteknya belum dicoba, besok-besok ya 😀

      Reply ↓
  3. Wilmen

    mas Dudu,
    saya lagi mencoba membangun CRUD dengan form yang sama dengan tambahan untuk upload image(single file)
    apakah hal ini dapat diakomodir dengan ajax jquery yang disediakan?
    mohon dibantu ya : )

    thanks

    Reply ↓
    1. dudu Post author

      kalo sederhanya nya seperti ini mas ditambahkan div seperti ini
      [php]
      <div id="loading"><img src="<?php echo base_url()?>images/loading.gif" alt="loading.." /></div>
      [/php]
      Kemudian di jquery function() nya dikasih atribut hide :
      [php]
      $(‘#loading’).hide();
      [/php]
      pas di submit di bagian di kasih :
      [php]
      $(‘#loading’).show();
      [/php]
      kemudian di .ajax ketika success loadingnya di hilangin
      [php]
      $(‘#loading’).hide();
      [/php]
      sudaj saya tambahkan di github saya mas, cuma di tutorial belum ada 🙂

      mungkin itu bisa membantu,,

      Reply ↓
  6. nda

    gan, ane mau tanya nih…
    klo update trus salah satu fieldnya memakai select gimana supaya langsung select ke opsi yg dipilih?

    Reply ↓
    1. dudu Post author

      Seharusnya bisa sih. tapi kalo di aplikasikan langsung dalam contoh di atas ya ga bisa. Saya rasa harus banyak perubahannya deh, terutama di script utk jquery nya.

      Reply ↓
  9. tanya

    masnya, tanya.

    saya mau upload file bareng data input lain (nama, umur,dll) dalam satu form gimana caranya ya? bingung.

    Reply ↓
  12. gong

    mas, kalo mau bikin ajax auto refresh di CI gimana ya? jadi walaupun halaman gak direfresh ajax tetep jalan, seperti notifikasi di facebook gitu. makasih.

    Reply ↓
    1. dudu Post author

      kalo seperti teknologi facebook itu sulit, karena browser tidak meminta ke client, tetapi server facebook yang mempush notifikasi ke server. (kemungkinan Menggunakan teknologi comet)

      Jika akan membuat load halaman setiap beberapa waktu mungkin bisa seperti ini :
      [php]
      var auto_refresh = setInterval(
      function()
      {
      $(‘#load_page’).fadeOut(‘slow’).load(‘page_loaded.php’).fadeIn("slow");
      }, 3000);
      [/php]

      dengan page yang akan diload adalah page_loaded.php dan diletakkan pada div dengan id “load_page”

      Kalo udah berhasil, kasih tau ya 😀

      Reply ↓
  13. newbie

    gan,
    ane mau tanya gimana caranya memvalidasi input kosong,.
    jadi kalo dalam teksbox ada datanya,data berhasil di simpan,.
    tapi kalo inputan di teksboz kosong, muncul alert kalo inputan kosong.

    mohon pencerahannya..

    Reply ↓
  17. bay

    mas tanya,
    semisal ane dah bikin ya untuk delete itu ada di suatu controller misal :
    http://localhost/web/produk/delete/3

    nah produk kan controllernya, disna ada method delete dan 3 itu ID produknya..
    di model ane pake $this->uri->segment(3) tuk ambil nilai IDproduk yang akan di delete

    buatan ane udah jalan, tapi kalo ane mo nambahin jqueryui dialog confirmation ketika user mau hapus, jadi ketika pencet delete bakal menuju URL http://localhost/web/produk/delete/3 dan ketika cancel ya di close aja dialognya itu bagaimana mas ?

    terima kasih banyak sebelumnya
    “Lemah Teles, Gusti Allah seng mbales” 🙂

    Reply ↓
    1. dudu Post author

      pakai modal-confirmation seperti yang di demo http://jqueryui.com/demos/dialog/#modal-confirmation

      yang perlu dibuat mungkin seperti ini
      [php]
      $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
      "Delete items": function() {
      //proses delete bisa pake ajax 🙂 contohnya disini http://dudu.web.id/2010/04/codeigniter-dasar-menghapus-data-dengan-jquery/
      },
      Cancel: function() {
      $( this ).dialog( "close" );
      }
      }
      });
      [/php]

      semoga berhasil

      contoh delete pake ajax sederhana http://dudu.web.id/2010/04/codeigniter-dasar-menghapus-data-dengan-jquery/

      Reply ↓
  20. Jaino

    Mas, sy mau tanya, kenapa form untuk input punya sy kosong, tdk ada tulisan apa-apa (label, input box,dll), hanya ada tombol Add dan Cancel saja, mohon pencerahannya.

    Reply ↓
  21. Jaino

    codenya sdh sama kok mas dgn yg di github, semua jalan, hanya form input kosong tdk ada label, input box,dll. sehingga tdk bisa tambah/edit data, maaf soalnya masih newbie… 🙁

    Reply ↓
      1. Pancasona

        numbernya di ilangi juga mas,ada contonya gak? jadi PK nya berdasarkan yg kita input atau yg di select.
        -Thanks-

        Reply ↓
  24. faisol

    assalamualaikum gan
    sorigan gangu ane mau nanya
    kok ini pas ane buka cuman muncul kayak yang di bawa aja ni gan?
    mohon pencerahannya ane masih baru nih gan?

    demo program :
    CRUD with JQueryUILoad Data with JQgridAutocomplete with JQueryUIChained Select
    Page rendered in 0.4462 seconds

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.