CRUD sederhana dengan jquery, jqueryui, dan Codeigniter

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
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);
  }
}

Sedangkan Modelnya

<?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);
  }

}

Saya memiliki dua buah view yaitu input.php dan show.php yang scriptnya sebagai berikut.
input.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>

show.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>

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 🙂