MEMBUAT KONFIRMASI HAPUS DATA PHP JAVASCRIPT

Pembaca yang budiman, apabila kita memiliki tabel dengan tombol hapus, maka kita perlu menambahkan konfirmasi saat hapus data dilakukan. Hal ini berguna untuk mencegah user yang tidak sengaja meng click tombol hapus.

Lalu bagaimana cara membuat konfirmasi hapus data tersebut ? Untuk membuat konfirmasi saat hapus data kita bisa menggunakan javascript confirm.

KONFIRMASI HAPUS DATA SEDERHANA

Berikut ini adalah cara paling sederhana dalam menggunakan javascript confirm.

1	<a href="hapus.php?id=123" onclick="javascript: return confirm('Anda yakin hapus ?')">Hapus</a>

Kita buat juga file hapus.php sebagai berikut:

1 2 3 4 5 6 7 8

<?php $id = isset($_REQUEST['id']) ? $_REQUEST['id'] : ''; if ($id <> '') { //    jalankan perintah hapus data //    mysql_query("DELETE FROM tabel WHERE id='$id'");     echo 'data dengan id = '.$id.' berhasil dihapus'; } ?>

Cobalah dengan mengklik link hapus, maka akan muncul jendela konfirmasi sebelum anda menghapus data tersebut.

KONFIRMASI HAPUS DATA YANG LEBIH KOMPLEKS

Pada contoh yang lebih kompleks, kita dapat menambahkan fungsi lain bila pengguna memiliki OK dalam jendela confirm. Berikut ini kita menggunakan jquery dan mengirimkan data yang akan di hapus menggunakan $.post. Dalam contoh ini kita menggunakan data-id untuk mengenali data mana yang akan dihapus. Berikut ini adalah contohnya.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<a data-id="123" class="hapus">Hapus</a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script>     $(".hapus").click(function () {         var jawab = confirm("Press a button!");         if (jawab === true) { //            kita set hapus false untuk mencegah duplicate request             var hapus = false;             if (!hapus) {                 hapus = true;                 $.post('hapus.php', {id: $(this).attr('data-id')},                 function (data) {                     alert(data);                 });                 hapus = false;             }         } else {             return false;         }     }); </script>

Bila anda klik hapus, maka akan muncul jendela konfirmasi, bila anda pilih OK, maka akan dilakukan proses pengirimana data-id ke hapus.php menggunakan $post jquery. Pada hapus.php menangkap data-id kemudian melakukan proses hapus data. Salah satu kelebihan ajax seperti contoh di atas yaitu tidak terjadi refresh halaman, sehingga data diolah dengan lebih cepat.

Silahkan dicoba.. semoga artikel singkat ini bermanfaat. Terima kasih telah berkunjung ke harviacode.com.