Tutorial Inline Editing AJax PHP

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 .