Cara menggunakan bootstrap 4 alert popup

Artikel ini berisi tutorial cara membuat tampilan pop-up alert menggunakan SweetAlert.

Ciptakan lingkungan belajar yang lebih MENYENANGKAN dengan GAME-BASED LEARNING!

Yuk, belajar di GAMELAB ACADEMY, belajar kapan saja, di mana saja. Kurikulum berbasis industri. Dapatkan SERTIFIKAT ketika kamu sudah selesai!

Halo teman-teman, kali ini saya akan membagikan tutorial membuat pop-up alert menggunakan SweetAlert!

Pop-up alert sendiri merupakan hal yang sering dibuat dalam sebuah website. Alert digunakan untuk menampilkan sebuah pesan atau peringatan kepada pengguna dengan jendela dialog.

Alert dapat dibuat menggunakan fungsi alert() pada bahasa JavaScript. Namun, tampilan yang dihasilkan dengan fungsi bawaan tersebut terkesan sederhana dan kaku sehingga perlu menggunakan library JavaScript tambahan untuk dapat membuat pop-up alert yang lebih menarik dan dapat didesain sesuai dengan keinginan kita. Salah satu library JavaScript tersebut adalah SweetAlert.

SweetAlert merupakan library JavaScript yang menyediakan berbagai pilihan bagi kita untuk membuat berbagai jenis pop-up alert seperti alert biasa, alert error, alert success, alert konfirmasi, dan sebagainya.

Penulisan kode SweetAlert sangatlah singkat seperti menulis menggunakan fungsi bawaan JavaScript. Hal tersebut membuat SweetAlert banyak diminati oleh para web developer dalam membuat sebuah pop-up alert pada website mereka.

Langkah-Langkah Menggunakan SweetAlert

Berikut ini merupakan langkah-langkah dalam membuat sebuah pop-up alert menggunakan SweetAlert :

1. Kunjungi halaman SweetAlert menggunakan browser masing-masing. Silakan klik link berikut ini untuk mengunjungi website SweetAlert : https://sweetalert.js.org/
2. Langkah kedua adalah menginstal SweetAlert dengan cara menambahkan kode berikut ini ke dalam file website kita. Kode tersebut yaitu :
3. Setelah menambahkan kode tersebut, kita dapat langsung menggunakan beberapa contoh pop-up alert yang tersedia di library SweetAlert tersebut.

Berikut ini adalah contoh penggunaan SweetAlert pada tampilan halaman website. Silakan copy kode di bawah ini untuk dapat melihat hasilnya.

    

    

    

    

    

    





    


        
Contoh Pop-up Alert Menggunakan SweetAlert

        Klik disini

    

    

    

Hasil

Hasil dari kode tersebut dapat dilihat pada gambar di bawah ini :

Baca Juga : Kolaborasi Seru Setitik Cultureware dan Gamelab Indonesia

Penjelasan

1. Saat kita menekan tombol “Klik disini” maka fungsi contoh() yang ada dalam kode berikut ini akan dijalankan. Kode tersebut yaitu : Klik disini
2. Pada fungsi contoh() terdapat kode perintah swal yang merupakan perintah dari library SweetAlert. Di dalam kode swal tersebut terdapat beberapa kode lain yang dapat kita ubah sesuai dengan kebutuhan. Kode title merupakan kode untuk judul pada pop-up alert, kode text merupakan kode untuk menampilkan teks yang ada pada pop-up alert, kode icon untuk mengubah simbol, dan kode button untuk mengatur tombol yang ada dalam pop-up alert. Selain kode tersebut, masih banyak kode lain yang dapat kita coba untuk membuat pop-up alert sesuai dengan kebutuhan kita. Fungsi contoh() dapat dilihat pada kode berikut ini : 

function contoh() {

            swal({

                title: "Berhasil!",

                text: "Pop-up berhasil ditampilkan",

                icon: "success",

                button: true

            });

        }

Demikian artikel mengenai cara membuat pop-up alert menggunakan SweetAlert pada halaman website. Semoga artikel yang saya tulis dapat memberi manfaat kepada para pembaca. Penulis menyadari bahwa artikel ini masih jauh dari kata sempurna. Maka dari itu, apabila ada informasi atau kata-kata yang kurang berkenan saya mohon maaf. Sekian artikel dari saya, terima kasih. Tetap semangat dan jangan menyerah dalam berkarya.