Tutorial jQuery : Membuat “Multiple Delete Data” Via AJAX Dengan jQuery

Tak terasa sudah hampir jam 3 malam, padahal tadi lagi asik-asiknya mojok sendirian di ruang UKM menunggu hasil donlod video tutorial aplikasi Android + bereksperimen dengan jQuery. Diselingi dengan insiden pecahnya kaca helm KYT kesayangan yang sudah menemani saya 3 tahun belakangan ini. Gara-garanya tuh helm yang lagi adem ayem hinggap di atas motor, disenggol sama seorang mahasiswi yang baru kali ini saya lihat mampir ke basecamp UKM dan sudah membuat ulah dengan memecahkan tuh kaca helm (yang beginian gak usah ditiru). Tuh mahasiswi minta maaf dan bersedia mengganti kaca helm milik saya. Tapi berhubung tuh helm sudah usang+bulukan+jamuran, saya jadi malu sendiri untuk meminta ganti rugi. Yaw saya ikhlaskan saja, mungkin sudah waktunya ganti helm.

Lanjut lagi bereksperimen dengan jQuery, yang kebetulan kemarin ada yang menanyakan tentang Multiple Delete Data via AJAX dengan jQuery melalui YM. Hmm,,sebenarnya hampir sama saja dengan tutorial yang saya buat beberapa waktu lalu. Bedanya hanya tinggal menambahkan fitur AJAX, dimana data-data yang akan dihapus, kodenya disimpan dalam sebuah array dan dikirimkan via AJAX dengan menggunakan library jQuery. Di file delete.php, kita hanya perlu menangkap variabel yang dikirim dengan method POST dan mulai menghapus data yang terdapat di dalam database. Nah, pada postingan kali ini saya akan mencoba menjelaskan penerapan AJAX dengn jQuery untuk menghapus multiple data.

1. Tutorial ini saya kembangkan dari tutorial sebelumnya, yang bisa dilihat disini.

2. Tampilkan semua data yang terdapat di dalam tabel lengkap beserta komponen checkbox-nya. Checkbox diberikan nama yang berupa array, agar mudah ketika disimpan ke dalam array javascript.

<table cellpadding="5" cellspacing="0" border="1">
<tr align="center"><td><a href="#" class="hapus">Hapus</a></td><td>Kode Dosen</td><td>Nama Dosen</td></tr>
$q = mysql_query("select * from tbl_orang");
$no=1;
while($b = mysql_fetch_array($q))
{
	echo '<tr align="center">
	<td><input type="checkbox" value="'.$b["id_orang"].'" name="chk[]" class="chk" id="chk-'.$no.'" /></td>
	<td>'.$b["id_orang"].'</td>
	<td>'.$b["nama"].'</td>
	</tr>';
	$no++;
}
?>
<tr>
<td colspan="3">
<input type=radio name=pilih onClick='for (i=1;i<<?php echo $no; ?>;i++){document.getElementById("chk-"+i).checked=true;}'>Centang Semua
<input type=radio name=pilih onClick='for (i=1;i<<?php echo $no; ?>;i++){document.getElementById("chk-"+i).checked=false;}'>Hapus Semua Centang
</td></tr>
</table>

3. Kita lanjutkan ke langkah untuk memanfaatkan fungsi dari jQuery untuk menyimpan array dan mengirim data. Keduanya juga sudah saya pernah paparkan di tutorial-tutorial sebelumnya.

$(function(){
	$("a.hapus").click(function(){
		id_array=new Array()
		i=0;
		$("input.chk:checked").each(function(){
			id_array[i]=$(this).val();
			i++;
		})

		$.ajax({
			url:'delete.php',
			data:"kode="+id_array,
			type:"POST",
			success:function(respon)
			{
				if(respon==1)
				{
					$("input.chk:checked").each(function(){
						$(this).parent().parent().remove('.chk').animate({ opacity: "hide" }, "slow");
					})
				}
			}
		})
		return false;
	})
})

4. Yang terakhir, kita akan membuat query untuk menghapus data-data yang terseleksi. Parameternya dikirim dalam bentuk array dan berjumlah lebih dari satu, maka dari itu saya menggunakan fungsi IN yang dimiliki mysql. Tujuannya tidak lain dan tidak bukan, agar tidak perlu repot-repot melakukan perulangan untuk menghapus datanya :D.

$kode_orang=$_POST['kode'];
$query = mysql_query('delete from tbl_orang where id_orang in ('.$kode_orang.')');
if($query){
	echo 1;
}
else{
	echo 0;
}

Gampang kan cara penerapannya…??? Berhubung sudah malam :), sekian dulu tutorial saya kali ini. Semoga bisa bermanfaat untuk rekan-rekan.

Happy Blogging and Keep Coding

Cheerrrss….!!!!

[to_like][/to_like]