Membuat konfirmasi hapus dengan box alert merupakan cara baru membuat script coding yang berfungsi untuk memberikan informasi yang disampaikan kepada pengguna sebelum melakukan tindakan penghapusan salah satu file pada halaman tabel form sebuah website. Script konfirmasi sebelum menghapus sebuah file sangatlah penting, hal ini dikarenakan tombol edit dan hapus dibuat berdekatan pada kolom Aksi tabel halaman website. Sehingga terkadang pengguna tanpa sengaja menekan tombol hapus tersebut. Efeknya,, sudah pasti data salah klik tersebut akan akan terhapus apabila tidak dibuatkan box alert untuk dialog konfirmasi peringatan.
Postingan tutorial ini akan membahas tentang proses dan langkah-langkah membuat konfirmasi dialog hapus dengan box alert pada PHP yang akan ditampilkan menggunakan script-script dan komponen bawaan boostrap, baik itu CSS maupun javascript-nya. Dengan demikian tampilan dialog alert box akan menggunakan modal bootstrap. Sehingga apabila ditampilkan alert box tersebut maka akan muncul seperti contoh gambar berikut:
Contoh gambar konfirmasi hapus dengan sweet alert box
Dengan adanya konfirmasi dialog hapus seperti gambar diatas maka pengguna dapat memastikan apakah akan menghapus data atau tidak ?, karena seperti yang kita lihat pada tampilan tersebut terdapat 2 (dua) tombol yaitu hapus atau cancel. Kemudian, bagaimana membuat konfirmasi hapus dengan box sweet alert pada php.?. Silahkan simak proses dan langkah-langkanya sebagai berikut:
- Ciptakan sebuah database pada phpmyadmin terlebih dahulu untuk penampungan data, contoh database tutorial ini yaitu (materi).
- Buatkan sebuah tabel pada database (materi) tersebut, contoh tabel (file_materi) seperti gambar berikut:
Contoh gambar pembuatan database dan tabel database
- Insert (inputkan) beberapa data pada tabel database (file_materi) yang telah dibuat tadi dengan cara input pada tools insert pada phpmyadmin atau mengunjungi postingan sebelumnya tentang Membuat Alert Inputan Berhasil Tersimpan Auto Close, PHP dan MySQL. Data hasil inputan tersebut yang kemudian akan dijadikan simulasi hapus file, karena tutorial ini tidak menyertakan proses input file.
- Pastikan pada tabel database telah terinput beberapa data seperti contoh gambar berikut:
- Apabila tabel database telah terinput selanjutnya buat sebuah folder pada xampp yang telah ter-instal pada komputer anda, contoh (C:\xampp\htdocs\contoh-hapus) yang berfungsi untuk penyimpanan file PHP yang akan dibuat, contoh seperti gambar berikut:
- Langkah berikutnya siapkan sebuah file PHP untuk pembuatan tombol hapus file (contoh tutorial ini: index.php) kemudian masukan source code php berikut:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kodingbuton.com</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<h3> Membuat Konfirmasi Hapus Dengan Box Alert Pada PHP</h3>
<h3> Tutorial <a href="https://www.kodingbuton.com/">kodingbuton.com</a></h3>
</center>
<?php
$conn=@mysql_connect("localhost","root","") or die("Tidak Terkoneksi");
$db=@mysql_select_db("materi") or die ("Database Tidak Ditemukan");
?>
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-5">
<div class="panel-body">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th><b>No.</b></th>
<th><b>Judul </b></th>
<th><b>Hapus</b></th>
</tr>
</thead>
<?php
$sql = mysql_query("SELECT * FROM file_materi");
$no=1;
while ($r=mysql_fetch_array($sql)){
?>
<?php
echo "<tr><td>$no</td>
<td>$r[judul]</td>";
?>
<td> <a href="#" onClick="confirm_modal('hapus.php?&id_file=<?php echo $r['id_file']; ?>');"><button class="btn btn-danger btn-xs" title="Hapus">Hapus</button></a> </td>
<?php
$no++;
} ?>
</table></div></div></div>
<!-- Modal Popup untuk delete-->
<div class="modal fade" id="modal_delete">
<div class="modal-dialog">
<div class="modal-content" style="margin-top:100px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" style="text-align:center;">Anda yakin akan menghapus data ini.. ?</h4>
</div>
<div class="modal-footer" style="margin:0px; border-top:0px; text-align:center;">
<a href="#" class="btn btn-danger btn-sm" id="delete_link">Hapus</a>
<button type="button" class="btn btn-success btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Javascript untuk popup modal Delete-->
<script type="text/javascript">
function confirm_modal(delete_url)
{
$('#modal_delete').modal('show', {backdrop: 'static'});
document.getElementById('delete_link').setAttribute('href' , delete_url);
}
</script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
- Jika proses pembuatan file index.php telah selesai, buatkan lagi sebuah file PHP yang berfungsi untuk proses eksekusi penghaspusan file (contoh: hapus.php) dan masukan source code php berikut:
$conn=@mysql_connect("localhost","root","") or die("Tidak Terkoneksi");
$db=@mysql_select_db("materi") or die ("Database Tidak Ditemukan");
$id_file=$_GET['id_file'];
$modal=mysql_query("Delete FROM file_materi WHERE id_file='$id_file'");
echo '<script language="javascript" type="text/javascript">
alert("data berhasil di hapus!");</script>';
echo "<meta http-equiv='refresh' content='2; url=index.php'>";
?>
- Berikutnya, simpan kedua file tersebut pada folder yang telah disiapkan seperti langka 3 (tiga) diatas tadi.
- Selanjutnya buka browser dan ketikan url localhost/contoh-hapus pada address bar. Jika proses pengkodean berhasil maka akan tampil seperti gambar berikut:
- Apabila sudah tampil seperti gambar di atas maka
proses berikutnya yaitu simulasi atau pengetesan sintaks yang sudah dibuat
dengan cara menekan tombol Hapus untuk menampilkan alert dialog konfirmasi
hapus. Jika berhasil maka akan tampak seperti gambar pertama di atas.
Keterangan** :
- Teks yang berlatar belakang kuning merupakan sintaks yang berfungsi untuk mengkoneksikan database;
- Teks berwarna merah merupakan sintaks PHP yang berfungsi untuk pemanggilan data dari database agar tampil pada halaman tabel website;
- Teks yang berlatar belakang hijau merupakan sintaks yang berfungsi untuk membuat tombol Hapus pada tabel;
- Teks yang berlatar belakang ungu merupakan sintaks Modal Popup Bootstrap yang befungsi untuk menampilkan alert dialog konfirmasi menghapus data atau tidak ?. modal popup tersebut akan tampil apabila pengguna melakukan klik pada tombol Hapus;
- Teks yang berlatar belakang biru merupakan sintaks javascrip yang akan meng-eksekusi popup modal agar tampil dialog sweet alert konfirmasi hapus.
- Semua file komponen tambahan dan sitaks tentang Membuat Konfirmasi Hapus Dengan Box Alert Pada PHP diatas dapat diperoleh secara gratis dengan cara Download disini...
Demikian tutorial tentang langkah-langkah membuat konfirmasi dialog hapus dengan box sweet alert pada PHP, semoga bermanfaat untuk bahan pembelajaran dan memberi inspirasi buat proses pembuatan coding website yang dikerjakan...!
|
þ |
Silahkan kunjungi Sitemap
(peta situs kami) untuk menemukan Source Code
dari: Aplikasi, Sistem
Informasi, Sistem
Pendukung Keputusan, Sistem
Pakar, E-Commerce serta Inspirasi lainnya seperti: Tutorial, Edukasi, Judul
Skripsi dan lain-lain. |
|
þ |
Kami juga menerima jasa pembuatan Aplikasi untuk Skripsi/Tugas
Akhir, dan lain-lain. |
Post a Comment