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 🙂

  • aa_pratomo

    gan ane mau tanya nihh.. klo di setiap proses POST di kasih loading gimana mas..? kasi tau donk 😀

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

  • aa_pratomo

    hehe ok deh mas

  • 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

    • saya kira bisa, mungkin Anda harus mencoba dengan jquery .live()

      semoga berhasil

    • bisa tentunya. atau pake plugin jquery untuk upload file

  • aa_pratomo

    contoh sederhananya gimana mas, bingung nih 😀

    • kalo sederhanya nya seperti ini mas ditambahkan div seperti ini

      <div id="loading"><img src="<?php echo base_url()?>images/loading.gif" alt="loading.." /></div>
      

      Kemudian di jquery function() nya dikasih atribut hide :

      $('#loading').hide();
      

      pas di submit di bagian di kasih :

      $('#loading').show();
      

      kemudian di .ajax ketika success loadingnya di hilangin

      $('#loading').hide();
      

      sudaj saya tambahkan di github saya mas, cuma di tutorial belum ada 🙂

      mungkin itu bisa membantu,,

  • aa_pratomo

    ok thank’s gan 😀

  • nda

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

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

  • rani

    Gud tutorial mas,, keren..

    btw kl mw nambahin fungsi searching dari data nya gt bsa kan y? kra2 script ny gmn y?? tq..

  • ivan

    mas mau tanya juga donk, kalo CRUD tanpa jquery.js dan ui gimana mas?

    bisa minta contoh nya gak mas dudu??

  • tanya

    masnya, tanya.

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

    • caranya ya tinggal di letakkan saja biasa form uploadnya 🙂 kalo detilnya ya mungkin agak panjang

  • dede

    apa saja databasenya untuk ngejalanin source codenya gan,,,bisa di share ga??????

    • Database sudah saya berikan di post, source juga sudah ada di github saya, link nya sudah saya sertakan 🙂

  • isal

    wah mantabbbbsssss
    makasi ya ^_^

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

    • 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 :

      var auto_refresh = setInterval(
      function()
      {
      $('#load_page').fadeOut('slow').load('page_loaded.php').fadeIn("slow");
      }, 3000);
      

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

      Kalo udah berhasil, kasih tau ya 😀

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

  • teguh

    mas. qo script hrefnya ke http semua?
    apa jqgridnya ga berfugsi?

    • kan ga pake jqgrid, beda kasus

  • teguh

    itu link href sama script src memang ke http ya mas?
    ga bisa diganti dengan yang lebih simpel?

    • silahkan bisa saja ko ke file jquery dan css sendiri 🙂

  • hyank

    thanks tutorialnya, tapi punyaku kok tak bisa ngrefresh abis didelete?
    any suggest?

    • coba di cek pake firebug

  • 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” 🙂

  • mas dudu ini databasenya mana? kok ga da deh ?

  • sip deh , thank you bro

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

    • mungkin kode nya ada yang kurang

  • 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… 🙁

  • Gracias
    Saludos desde Venezuela

  • Pancasona

    kalo PK nya di input manual gimana mas?jgn pake number row kaya gitu

    • dwijonarko

      tinggal tambahkan filed untuk inputnya

      • Pancasona

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

        • dwijonarko

          kan tinggal konfigurasi inputnya,

  • 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

    • dwijonarko

      buka di mana ya? itu kan ada link nya silahkan dipilih

  • Adi_gt_loh

    Makasih Banget ni.. sangat membantu Postingan Mas