Checkbox multi delete seperti di Gmail, kita bisa memilih untukmenghapus message dalam inbox kita dengan mengklik tanda checkbox pada data – data yang ingin kita hapus. Tutorial kali ini akan membuat contoh aplikasi untuk menghapus data – data tertentu yang ditandai dengan checkbox (seperti di Gmail).
Ok, langsung praktik saja.
Step 1 : Persiapkan Database
- Buat database dengan nama db_tutorial
- Siapkan tabel dengan nama tb_book, dengan struktur tabel seperti gambar dibawah ini.
- Insert kan beberapa sample data, seperti gambar dibawah
- Done!
Step 2 : Persiapkan Folder Kerja
- Buat folder dengan nama tutorphp dalam document root anda
- Simpan semua file dalam tutorial ini dalam folder tersebut.
Step 3 : Membuat script koneksi ke Database
- Ketikkan script berikut,
<?php
$host = "localhost";
$user = "root";//adjust according to your mysql setting
$pass = ""; //adjust according to your mysql setting, i use no password here
$dbName = "db_tutorial";
mysql_connect($host, $user, $pass);
mysql_select_db($dbName)
or die ("Connect Failed !! : ".mysql_error());
?>
- simpan dengan nama connect.php
Step 4 : Membuat Script untuk menampilkan data
- Ketikkan script berikut,
<html><head>
<title>Itx.Web.Id</title>
<script type="text/javascript" src="pilihan.js"></script>
<script type="text/javascript" src="warning.js"></script>
</head>
<body>
<h2> The Data <h2>
<?php
include 'connect.php';
$query = "SELECT * FROM tb_book"; //the query for get all data in tb_student
$result = mysql_query($query);
?>
<form name="myform" method="post" action="prosesdeletemulti.php">
<?php
echo "<table border='0' cellpadding='2' cellspacing='2'>";
echo "<tr bgcolor='orange'>
<td> <b> Title </b> </td>
<td> <b> Author </b> </td>
</tr>";
$i = 0;
while ($data = mysql_fetch_array($result)) { //mysql_fetch_array = get the query data into array
echo "<tr>
<td>".$data['title']."</td>
<td>".$data['author']."</td> "; ?>
<td><input type="checkbox" name="id[<?php echo $i;?>]" value="<?php echo $data['id'];?>" /></td>
<?php
$i++;
}
echo "</table>";
?>
<td> <input type="submit" value="Delete" onClick="return warning();" name="submit">
<input type="reset" value="Cancel" name="reset"> </td>
</form>
</body>
</html>
- simpan dengan nama student_data1.php
Step 5 : Membuat Javascript untuk menampilkan warning
- Ketikkan script berikut,
function warning() {
return confirm('Are You Sure to Delete This Data?');
}
- simpan dengan nama formupdate.php
Step 6 : Membuat Javascript untuk mendapatkan komponen yang tercentang checkbox nya
- Ketikkan script berikut,
function pilihan()
{
// read the component from 'myform'
var jumKomponen = document.myform.length;
// no check all
if (document.myform[0].checked == false)
{
for (i=1; i<=jumKomponen; i++)
{
if (document.myform[i].type == "checkbox") document.myform[i].checked = false;
}
}
}
- simpan dengan nama pilihan.js
Step 7 : Membuat Script untuk Menghapus Data Multi
- Ketikkan script berikut,
<?php
include 'connect.php';
$data = $_POST['id']; //get all the id book that will be deleted
foreach($data as $data1) { //looping according to the total data that checked
//echo $data1;
$query = "DELETE FROM tb_book where id = $data1"; //the query to delete data according to id
$result = mysql_query($query);
}
if ($result) {
include "student_data1.php";
echo "Delete sucess";
}
?>
- simpan dengan nama prosesdeletemulti.php
Step 8 : Testing Code
- Pergi ke http://localhost/tutorphp/student_data1.php. Beri tanda centang pada data yang ingin anda delete.
- Muncul konfirmasi hapus data. Pilih OK untuk menghapus data
- Maka konfirmasi sukses delete ditampilkan. Cek juga database anda, pastikan bahwa data telah terhapus
DEMO
DEMO | DOWNLOAD (2321)
DEMO
DEMO | DOWNLOAD
DEMO | DOWNLOAD
DEMO | DOWNLOAD
DOWNLOAD
DEMO | DOWNLOAD
DEMO | DOWNLOAD
DEMO | DOWNLOAD
DEMO
DEMO
DEMO | DOWNLOAD
