Cara menggunakan konfirmasi hapus di php

Membuat Konfirmasi Hapus Javascript. Ketika ingin menghapus sebuah data biasanya terdapat konfirmasi atau notifikasi peringatan yang menunjukkan informasi kepada user apakah benar-benar ingin menghapus data tersebut. Jika ya maka data di hapus dan tidak akan kembali dan tidak melakukan eksekusi apapun. Berikut ini cara membuatnya dengan javascript yang mudah.

Kegunaan dari konfirmasi ini adalah agar jika user atau admin tidak sengaja melakukan klik maka tidak langsung terhapus. Ini lebih membuat data cenderung lebih aman dan terhidar dari kehilangan data. Biasanya hal seperti ini dianggap sepele oleh beberapa programmer, namun pada dasarnya fungsi-fungsi seperti ini adalah penting guna menjaga keamanan data agar tidak hilang dengan mudah.

Berhubungan dengan keamanan, Saya juga pernah posting tentang sensor kata php yang berguna untuk menyensor kata kata.

Oke lanjut lagi ke pembahasan, berikut ini tutorialnya.

Membuat Konfirmasi Hapus Javascript

Caranya cukup mudah, bahkan sambil tidur juga bisa wkkw. Gak juga ya,, koding kok sambil tidur, Se enggaknya ini mudah kok dibuat:

1. Pertama buat script javascript berikut ini. Dan letakkan pada pemrograman yang ingin anda letakkan konfirmasi link hapus, boleh disekitarnya.

<script type="text/javascript" language="JavaScript">
 function konfirmasi()
 {
 tanya = confirm("Anda Yakin Akan Menghapus Data ?");
 if (tanya == true) return true;
 else return false;
 }</script>

Script diatas dibuat menggunakan fungsi konfirmasi() yang mana penamaan tersebut dibuat sendiri, untuk kasus Anda silahkan disesuaikan penamaannya.

Perkembangan bootstrap memang sangat cepat, banyak fundation yang menggunakan aplikasi bootstrap, sekarang ini kita akan membahas Cara Membuat Konfirmasi Alert Box dengan Modal Bootstrap, Modal alert box disini bisa untuk digunakan untuk konfirmasi Delete / Hapus data di database lo, jika di kolaborasikan dengan PHP mysql, jadi sebelum kita menghapus data didatabase , kita akan mendapat konfirmasi Ya, No , Untuk menghapus Data, Tentu lebih userfriendly kan..?

Berikut ini merupakan Gambar Dari Konfirmasi dengan Modal Bootstrap sebelum hapus data :

 Demover1code Download

Versi. 1 CODE

Bootstrap :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

CSS:

<style>
.trash{padding:2px; border:1px solid red; margin-left:10px; background-color:red; color:#fff}
td{padding:5px}
</style>

Javascript Code

<script>
$('.trash').click(function(){
    var id=$(this).data('id');
    $('#modalDelete').attr('href','delete-cover.php?id='+id);
})
</script>

Modal HTML Code :

<div class="modal small fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h3 id="myModalLabel">Delete Confirmation</h3>

            </div>
            <div class="modal-body">
                <p class="error-text"><i class="fa fa-warning modal-icon"></i>Are you sure you want to delete the cover?
                    <br>This cannot be undone.</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-default"data-dismiss="modal" aria-hidden="true">Cancel</button> <a href="#" class="btn btn-danger"  id="modalDelete" >Delete</a>

            </div>
        </div>
    </div>
</div>

<table>
    <thead>
        <th>Cover Name</th>
        <th>Sum Insured</th>
        <th>Info</th>
        <th style="width: 3.5em;"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>name 1</td>
            <td>insured 1</td>
            <td>info 1</td>
            <td> <a href="cover-type.php?id=1"><i class="fa fa-pencil"></i></a>
 <a href="#myModal" class="trash" data-id="1" role="button" data-toggle="modal"><i class="fa fa-trash-o">x</i></a>

            </td>
        </tr>
        <td>name 2</td>
        <td>insured 2</td>
        <td>info 2</td>
        <td> <a href="cover-type.php?id=2"><i class="fa fa-pencil"></i></a>
 <a href="#myModal" class="trash" data-id="2" role="button" data-toggle="modal"><i class="fa fa-trash-o">x</i></a>

        </td>
        </tr>
        <td>name 3</td>
        <td>insured 3</td>
        <td>info 3</td>
        <td> <a href="cover-type.php?id=3"><i class="fa fa-pencil"></i></a>
 <a href="#myModal" class="trash" data-id="3" role="button" data-toggle="modal"><i class="fa fa-trash-o">x</i></a>

        </td>
        </tr>
    </tbody>
</table>

Versi. 2 CODE

Berikut ini adalah cara lain.. anda tinggal CTRL+C , mengcopy.. lalu mempaste.. dan simpan dengan .html , jalankan dengan ke adaan koneksi internet aktif..