Inline editing itu apa sih? Saya kasih contoh ya , Saat anda komentar di Facebook, lalu anda sadar ada yang salah dikomentar, anda mengeditnya bukan? Yup, itulah yang namanya inline editing. Inline editing adalah teknik untuk mengedit data langsung ditempat, tanpa membuka halaman baru yang berisi form.

Ada berbagai macam cara untuk mengimplementasikan inline editing, cara termudah adalah mengunakan JQuery dan PHP. dalam tutorial ini, kita akan membuat inline editing untuk mengedit judul film. Berikut ini adalah langkah langkahnya

  1. Buat tabel film
  2. Buat halaman untuk menampilkan data dari tabel film ketabel
  3. Buat script Ajax untuk menangani event click dan keydown.
  4. Buat script PHP untuk menyimpan data

buat tabel Film

CREATE TABLE IF NOT EXISTS `film` (
  `idfilm` int(11) NOT NULL AUTO_INCREMENT,
  `judul` varchar(100) NOT NULL,
  PRIMARY KEY (`idfilm`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;

Buat halaman untuk menampikan data di tabel

<h2 id="headings"> Data film</h2>
<p class='text-success'>Note: klik di nama film untuk mengeditnya </p>	
<div class='span4'>
<table class='table table-bordered'>
	<thead><th><td>Judul</td></th></thead>
		<tbody>
			<?php
		$query="SELECT idfilm,judul from film order by idfilm limit 5";


$result=mysql_query($query) or die(mysql_error());
$no=1;
//proses menampilkan data
while($rows=mysql_fetch_object($result)){

			?>
			<tr>
				<td><? echo $no
				?></td>
			<td class="edit judul <?=$rows->idfilm?>">
<? echo $rows -> judul; ?></td>			
				
			</tr>
			<?	$no++;
				}
			?>			
		</tbody>
	</table>

</div>

Buat script untuk menangani event click dan keydown.

Event click disini adalah event saat user mengklik nama film di tabel. Click ini akan mengubah isi tabel menjadi form input text. Sedangkan keydown dipakai untuk menyimpan data. Keydown adalah saat anda menekan enter setelah mengedit data atau keluar dari form input edit.

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript">
			$(document).ready(function() {
	//event keydown
		$('td.edit').keydown(function(event) {
			arr = $(this).attr('class').split(" ");
			if (event.which == 13) {
				$.ajax({
					type : "POST",
					url : "inc/config.php",
					data : "value=" + $('.ajax input').val() + "&rownum=" 
+ arr[2] + "&field=" + arr[1],
					success : function(data) {
						$('.ajax').html($('.ajax input').val());
						$('.ajax').removeClass('ajax');
					}
				});
			}

		});
		//event click
$('td.edit').click(function(){

 	$('.ajax').html($('.ajax input').val());
 	$('.ajax').removeClass('ajax');

 	$(this).addClass('ajax');
 	$(this).html('<input id="editbox" size="'+
	$(this).text().length+'" type="text" value="' +
 	$(this).text() + '">');

	$('#editbox').focus();								        

});

		// editbox
$('#editbox').live('blur',function(){
		$('.ajax').html($('.ajax input').val());
		$('.ajax').removeClass('ajax');
});



	}); </script>

script update data

skrip ini ada di file config.php. Fungsinya menyimpan data update ke tabel film.


function update_data($field, $data, $rownum)
{

	$sql = "update film set ".$field." = '".$data."'
 where idfilm = ".$rownum;
echo $sql;
	mysql_query($sql) or die(mysql_error());

}
 
	if(isset($_POST['rownum']))
{
	update_data($_POST['field'],$_POST['value'],$_POST['rownum']);
}


Demo dan source code

Seperti biasa, anda bisa mencoba demonya disini dan mendownload source code lengkap disini .

Penulis: Candra Adi Putra

CandraLab Studio adalah Software house di Yogyakarta, Indonesia yang fokus ke aplikasi Mobile (Android) dan Web . Hubungi saya di candraadiputra(at) gmail.com

Tagged on:     

6 thoughts on “Tutorial Inline Editing AJax PHP

  • 27 June , 2013 at 4:07 pm
    Permalink

    pada saat di edit inline memang berubah datanya tapi pada saat di refresh, data ny kembali ke data semula gan
    kok ga di update yaa?

    Reply
  • 20 June , 2013 at 2:36 am
    Permalink

    keren bro…….
    thanks tutorialnya

    Reply
  • 1 May , 2013 at 3:16 pm
    Permalink

    bro…ane udh cek untuk inline database nya…jikalau ane mau tampilin gambar sama sinopsisnya juga …script update data gimana bro…ane masih bingung…

    trims.

    Reply
    • 3 May , 2013 at 8:46 pm
      Permalink

      langsung menuju website jeasyui aja bro..

  • 6 April , 2013 at 4:56 am
    Permalink

    klo dibuat autosave gmn mas bro… trus lek colomnya lebih dari satu

    Reply

Tinggalin komentar dong!