Langsung saja sesuai judulnya, tutorial yang saya buat adalah mengenai bagaimana caranya menghapus sebuah data tanpa mereload halaman dengan bantuan Jquery dan Ajax (Asynchronous Javascript and XML).
Langkah pertama kita buat terlebih dahulu databasenya dan tabel mahasiswa, bisa di lihat dibawah ini.
CREATE TABLE IF NOT EXISTS `mahasiswa` ( `id_mahasiswa` int(3) NOT NULL AUTO_INCREMENT, `nim` varchar(20) NOT NULL, `nama_mhs` varchar(100) NOT NULL, `semester` int(3) NOT NULL, `password` varchar(100) NOT NULL, `jurusan` varchar(100) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, PRIMARY KEY (`id_mahasiswa`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ; -- -- Dumping data untuk tabel `mahasiswa` -- INSERT INTO `mahasiswa` (`id_mahasiswa`, `nim`, `nama_mhs`, `semester`, `password`, `jurusan`) VALUES (1, '09.01.000', 'Ahmad Subaini', 1, '25f9e794323b453885f5181f1b624d0b', 'Sistem Informasi '), (2, '09.01.001', 'Aris Pratama', 2, '25f9e794323b453885f5181f1b624d0b', 'Sistem Komputer'), (3, '09.01.002', 'Jarot Jaya Kusuma', 1, '25f9e794323b453885f5181f1b624d0b', 'Teknik Informatika'), (4, '09.01.003', 'Dian Pratiwi', 5, '25f9e794323b453885f5181f1b624d0b', 'Teknik Informatika'), (5, '010.01.000', 'Andre Rosi', 7, '5a47a5034c83d1a0cab5b802b1d631ea', 'Teknik Informatika');
Kemudian download terlebih dahulu file jquery disini dan jqueryUI disini karena kita akan mengunakan kotak konfirmasi tidak menggunakan javascript tapi menggunakan effect dialog yang terdapat di jqueryUI ini, biar kelihatan wow gitu :D. silakan pilih tema atau kostumisasi sendiri di situs tersebut.
Panggil file tersebut di script yang anda buat.Buat script php yang berguna untuk menghapus data yg dikirimkan oleh ajax contoh seperti dibawah ini.
<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
if (isset($_POST['id'])) {
mysql_query("delete from mahasiswa where id_mahasiswa= '".$_POST['id']."'");
}
?>
Selanjutnya kita akan membuat tabel untuk menampilkan data yang kita ambil dari database dan tag id html untuk kotak dialognya.<table border="1" align="center">
<thead>
<tr >
<th>Nim</th>
<th>Nama</th>
<th>Semester</th>
<th>Jurusan</th>
<th width="100px">Pilihan</th>
</tr>
</thead>
<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
$sql= "select * from mahasiswa";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result)) {
?>
<tr align="center" id="<?php echo $row['id_mahasiswa'];?>">
<td><?php echo $row['nim'];?></td>
<td><?php echo $row['nama_mhs'];?></td>
<td><?php echo $row['semester'];?></td>
<td><?php echo $row['jurusan'];?></td>
<td width="100px"><center>
<img class="hapus" id="<?php echo $row['id_mahasiswa'];?>" src="del.png" style="cursor: pointer;" />
</center></td>
</tr>
<?php } ?>
</table>
<div id="konfirm-box"> Apakah Anda yakin akan menghapus ini?</div>
Dibawah ini adalah script jquery dan ajaxnya. $(function () {
//Box Konfirmasi Hapus
$('#konfirm-box').dialog({
modal: true,
autoOpen: false,
show: "bounce",
hide: "explode",
title: "Konfirmasi",
buttons: {
"Ya": function () {
jQuery.ajax({
type: "POST",
url: "delete.php",
data: 'id=' +id,
success: function(){
$('#'+id).animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
});
$(this).dialog("close");
},
"Batal": function () {
//jika memilih tombol batal
$(this).dialog("close");
}
}
});
//Tombol hapus diklik
$('.hapus').click(function () {
$('#konfirm-box').dialog("open");
//ambil nomor id
id = $(this).attr('id');
});
});
Penjelasan sedikit script diatas adalah ketika tombol yang memiliki class hapus di klik maka akan membuka box dialog id konfirm-box, ketika tombol "YA" di klik maka ajax akan melakukan tugasnya yaitu mengirimkan data ke script php delete.php yg kita buat sebelumya berdasarkan data yg telah kita ambil dengan membaca nilai tag id. Script delete.php akan menghapus data tersebut. Jquery akan menyembunyikan tampilan yang memuat tag id yang telah kita buat di tabel, tutup box dialog. jika tombol "Batal" diklik tutup box dialog.
Untuk link demo dan download source codenya bisa klik link dibawah ini .
