Cara menggunakan Sweetalert

Cara menggunakan Sweetalert

1996
6
SHARE

Halo sahabat harviacode.com… tentu kita sudah tidak asing dengan alert javascript bukan? Alert javascript merupakan cara yang paling mudah untuk menampilkan pesan. Sebenarnya selain alert, ada juga confirm yaitu untuk menampilkan kotak konfirmasi. Berikut ini adalah contoh penggunaan confirm dan alert menggunakan javascript.

Ketika kita jalankan maka akan muncul kotak konfirmasi. Jika kita menekan OK, maka akan muncul alert dengan pesan “Anda Menekan OK” dan jika kita menekan Cancel maka akan muncul pesan “Anda Menekan Cancel”. Sangat mudah dalam penggunaannya.

Tampilan kurang memuaskan.

alert javascriptYang menjadi pemasalahan untuk alert maupun konfirm adalah tampilannya yang sulit untuk diubah. Ya.. alert dan konfirm tidak menggunakan element-element HTML seperti pada umumnya, sehingga kita akan kesulitan untuk mengubah tampilannya menjadi lebih menarik. Tampilan alert dan konfirm javascript juga tergantung pada browser yang digunakan. Jika anda pengguna bootstrap, maka tampilan alert dan konfirm akan terlihat contrast dengan tampilan theme bootstrap.

Gunakan Sweetalert

Untuk mengatasi permasalah tersebut di atas, anda bisa menggunakan sweetalert. Sweetalert akan mengubah tampilan alert dan konfirm menjadi lebih menarik. Berikut ini adalah contoh tampilan alert dan konfirm menggunakan sweetalert.

Cara menggunakan Sweetalert.

Cara penggunaan sweetalert sangat mudah. Berikut ini adalah langkah-langkah yang harus Anda lakukan.
1. Download sweet-alert.min.js dan sweet-alert.css
2. Masukkan bootstrap css, sweetalert css dan sweetalert js tersebut ke dalam file Anda, seperti contoh berikut ini.

3. Tambahkan html untuk membentuk kotak alertnya, sehingga file anda akan menjadi seperti ini.

4. Tambahkan javascript sesuai kebutuhan Anda. Sebagai contoh disini saya akan membuat alert success dengan tombol OK. maka index saya akan menjadi seperti berikut ini.

Dan berikut ini adalah hasilnya jika kita jalankan.

sweetalertContoh lain, misalnya anda ingin membuat konfirmasi anda bisa melakukannya dengan mengubah baris 51 menjadi seperti ini.

Dan berikut ini adalah hasilnya untuk konfirmasi..

sweetalertAnda bisa melihat contoh contoh lain di sini.

Kini tampilan alert dan konfirmasi Anda menjadi lebih keren.. hehe.. mudah bukan… selamat mencoba, jika ada pertanyaan, saran, kritik jangan ragu untuk menuliskannya di kolom komentar.

Terima kasih telah berkunjung ke harviacode.com. Jangan lupa di like dan bantu share ya..

Bagikan artikel ini ya.. terima kasih

6 COMMENTS

  1. gan alertsnya gak berhasil tapi button sudah berubah dan tampilan masih belum ketengah dan belum ada kotak notifikasi itu knp bang mohon infonya masih pemula

  2. bang belum berhasil kotak notifikasi alertnya gak muncul cuman button nya aja yg sudah berubah itu kenapa ya bang mohon bantuanya masih newbie bang

  3. bang gak berhasil gak muncul notifikasi alertsnya tapi button sudah berubah ke bootstrap nah itu salahnya dimana bang knp ya mohon bantuannya maklum masih newbie

  4. syukur sudah bisa bang tapi tipe notif yang swal bagian script type :”warning” saya ubah ke tipe danger itu gak bisa knpa ya bang mohon bantuanya tapi typenya bisa di ubah ke type info tapi saya pengen tipe danger gimana ya bang makasih

  5. mau tanya satu lagi bang kn sdh bisa itu script klw buat manggil onclick pada tombol hapus gitu bang kn di onclick terus apa lgi kodingnya atw ada cara lain bang mohon bantuanya bang makasih

LEAVE A REPLY