Tutorial Javascript : Multiple Delete Data via Checkbox Dengan PHP + Javascript

Ternyata postingan saya yang kemarin, tentang acara konversi nilai di kampus+ada seorang teman yang bisa dibilang “ngamuk-ngamuk” di facebook, membuat si teman saya tersebut geram. Hal ini saya ketahui ketika membaca statusnya di wall facebook saya. Hehe..senang juga bisa membuat orang marah hanya melalui sebuah tulisan, walaupun tulisan saya termasuk masih acak-acakan. Nah, daripada ruwet ngurusin yang begituan, mending saya lanjut posting aja di blog ini. Kali ini saya mau berbagi penglaman sedikit tentang, “Bagaimana sih caranya membuat multiple delete data checkbox dengan PHP + javascript???”. Mungkin sudah banyak blog yang mengulas tentang tutorial yang satu ini. Dulu saya pernah menemukan studi kasus yang demikian ketika membuat web kelas saat masih duduk di bangku STM.

Logikanya cukup sederhana, dengan mengambil id elemen checkbox yang sudah diberikan penamaan yang unique.  Id elemenn checkbox tersebut dipanggil dengan menggunakan fungsi document.getElementById(“nama_id_elemen”) melalui sebuah radio button. Ketika telah dipanggil, kemudian semua checkbox tersebut diberikan properti checked=true untuk mencentang semuanya atau checked=false untuk menghapus semua centangnya. Implementasi kode PHP-nya, kira-kira seperti di bawah ini :

<?php
	include('koneksi.php');
	$q = mysql_query("select * from tbl_data");
	$no = 1;
	while($row=mysql_fetch_array($q))
	{
	echo"<table border='0'><tr>
	<td><input type=checkbox name=cek[] value=".$row[id_notifications]." id=id-".$no.">".$no." . </td>
	<td>".$row[notifications]."</td>
	</tr></table>";
	$no++;
	}
?>

Checkbox diberikana nama cek[] yang bertipekan array. Kemudian diberikan id dengan aturan penamaan, id-‘$no’. $no disini maksudnya adalah sebuah angka hasil perulanga, agar lebih mudah juga ketika dipanggil saat ingin menghapus centang atau memberi centang pada semua checkbox melalui radio button.

<input type=radio name=pilih onClick='for (i=1;i<<?php echo $no; ?>;i++){document.getElementById("id-"+i).checked=true;}'>
	Centang Semua
	<input type=radio name=pilih onClick='for (i=1;i<<?php echo $no; ?>;i++){document.getElementById("id-"+i).checked=false;}'>
	Hapus Semua Centang
	<input type='submit' value='Hapus' class='hapusButton hapus'
	onClick='return confirm("Anda yakin ingin menghapus data yang terpilih???")'>

Dengan event onClick, yang diberikan perintah perulangan untuk mencentang semua checkbox dengan id yang sudah ditentukan tadi. “Terus, bagaimana dengan proses hapus datanya???”. Gampang kok, tinggal menghitung berapa jumlah checkbox yang tercentang oleh user.

<?php
	if(count($_POST['cek']) < 1)
	{
		?>
			<meta http-equiv='refresh' content='0; url=index.php'>
			<script type="text/javascript">
				alert("Tidak ada data yang terpilih...!!!");
			</script>
		<?php
	}
	else
	{
		//---- query mysql disini -----///
		/*include('koneksi.php');
		$cek = $_POST['cek'];
		for($i=0;$i<count($_POST['cek']);$i++){
		  $hapus=mysql_query("DELETE FROM tbl_data WHERE id_notifications='$cek[$i]'");
		}*/
		?>
			<meta http-equiv='refresh' content='0; url=index.php'>
			<script type="text/javascript">
				alert("Data yang terpilih berhasil dihapus..!!!");
			</script>
		<?php
	}
?>

Gampang kan pembuatannya???. Di bawah ini, sudah ada contoh jadinya, tapi untuk query-nya saya disable. OK deh, semoga bisa bermanfaat untuk rekan-rekan yang juga kebetulan menemukan studi kasus seperti saya di atas.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!

Download Aplikasi

8 comments

  1. armado Reply

    mantap nih info tutorialnya bang gede, klo bisa share dunk membuat cms web dengan codeigniter yang umum.

  2. andi Reply

    bermanfaat banget nich. udah lama cari-cari tutorial kayak gini baru nemu di blog ini. makasih banyak sob, salam kenal…

  3. Pingback: | » Tutorial jQuery : Membuat “Multiple Delete Data” Via AJAX Dengan jQuery | Ng`Blog Biar Gak GobloG – BlogNya Gede Lumbung |

  4. ahmad imaddudin Reply

    ehm maaf mas…
    tapi misalnya kalau select all n unselect all lewat input type select kayak contoh di atas itu gimana ngerubah nya mas….

    karena jika data yg di tampilkan trlalu bnyak malah repot nyecroll nya.
    kan kalau di buat pkek select lebih simple gtu kyak nya..

    mhon pnjelasannya

  5. Jamal Reply

    link sdh tidak fungsi… tolong diupdate gan buat belajar bersama. thnx