Log Of Oyazhuryachna

Membuat Dialog Konfirmasi dengan Modal Bootstrap

Dialog konfirmasi diperlukan saat kita membuat aplikasi yang membutuhkan interaksi dengan user terhadap suatu proses yang akan dilaksanakan sehingga proses yang terjadi benar-benar merupakan atas keinginan user dan menghindari ketidaksengajaan dalam menjalankan suatu proses.

Contoh nyata dalam penggunaan dialog konfirmasi adalah ketika akan menghapus data, aplikasi yang baik adalah dengan memberikan peringatan berupa dialog konfirmasi untuk memastikan apakah user akan menghapus data atau tidak ?

Secara sederhana konfirmasi dialog bisa dibuat dengan menggunakan javascript script menggunalan alert function, sebagai contoh perhatikan konfirmasi dialog dibawah ini !

Perhatikan dialog konfirmasi diatas, tampak kaku bukan ?? dan hasilnya akan berbeda di setiap browser.

Tutorial kali ini akan membuat tampilan dialog konfirmasi tampak lebih cantik dengan menggunakan modal bootstrap. Sehingga apabila dijalankan akan tampak seperti berikut :

Bandingkan dua contoh dialog konfirmasi diatas ! mana yang lebih cantk ? tentu dengan modal bootstrap, dengan modal bootstrap anda bisa menambahkan image, video atau suara jadi intinya lebih flexible dan lebih elegan.

Komponen utama untuk membuat dialog konfirmasi dengan modal bootstrap adalah tentunya bootstrap itu sendiri. Contoh kaliĀ  ini penulis terapkan pada framework Codeigniter sehingga bentuk link href yang dibuat adalah sebagai berikut :

<a href=”‘.site_url(‘mahasiswa/hapus/’.$row[‘nim’]).'” data-confirm=”Anda yakin akan menghapus mahasiswa atas nama ‘.$row[‘nama’].’ ?”><i class=”fa fa-trash”></i></a>

Dari bentuk href diatas yang perlu anda sesuaikan adalah value atribut href dan silahkan ganti nilai atribut dari data-confirm sesuai kehendak anda.

Berikutnya buat script jquery sebelum penutup </body> seperti berikut :

Sebagai bahan pembelajaran silahkan download scriptnya

DOWNLOAD VIA GOOGLE DRIVE

, , , ,

2 thoughts on “Membuat Dialog Konfirmasi dengan Modal Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *