Alert merupakan bidang atau tampilan pemberitahuan yang biasanya terdapat pesan singkat seperti success, error, warning, info dan lain-lain. Pada beberapa penggunaannya, alert biasanya digunakan untuk papan dialog dengan action yes atau no, seperti penggunaan untuk fitur delete akan ada semacam confirmation dialog apakah user yakin ingin menghapus data atau tidak.
Pada artikel ini akan dibahas cara mempercantik alert Javascript dengan sweet alert, biasanya ketika kita ingin menampilkan pesan error atau notifikasi di Javascript kita akan membuatnya dengan alert Javascript. Alert Javascript tentunya sangat interaktif dan simple dalam menggunakannya, tapi alert Javascript ini tampilannya kurang menarik dan membuat beberapa orang bosan melihatnya. Untuk mempercantik tampilan pesan error atau notifikasi pada web, kita bisa menggunakannya dengan Sweet Alert.
Berikut cara untuk membuat alert dengan sweet alert :
- Silahkan download terlebih dahulu file Sweet Alert nya disini.
- Buat folder baru, misal dengan nama belajar_sweetalert
- Di dalam folder belajar_sweetalert buatkan lagi folder baru dengan nama sweetalert
- Extract filer sweetalert2-11.4.4 yang sudah didownload, kemudian pindahkan semua file yang ada dalam folder dist ke folder sweetalert
- Buat file HTML, misal dengan nama alert.html dan panggil file sweet alert yang yang ada dalam folder sweetalert, dengan sintak seperti berikut ini :
<!DOCTYPE html> <html> <head> <title>Belajar Sweet Alert - agussuratna.net</title> <link rel="stylesheet" type="text/css" href="sweetalert/sweetalert2.css"> <script src="sweetalert/sweetalert2.js"></script> </head> <body> <script> Swal.fire("Hello World!"); </script> </body> </html> - Jalankan file alert.html pada browser, maka hasilnya akan seperti berikut :
Sampai sini kita sudah berhasil membuat alert dengan sweet alert, tapi bagaimana kalau kita mau menerapkan sweet alertnya untuk tombol yang akan di klik oleh user. Caranya kita hanya perlu membuat sebuah function didalamnya, seperti contoh kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Sweet Alert - agussuratna.net</title>
<link rel="stylesheet" type="text/css" href="sweetalert/sweetalert2.css">
<script src="sweetalert/sweetalert2.js"></script>
</head>
<body>
<button onclick="klik()">Klik aku dong !</button>
<script>
function klik() {
Swal.fire("Yes!", "Terima kasih sudah diklik", "success");
}
</script>
</body>
</html>
Perhatikan sintak di atas, pada sintak :
Swal.fire("Yes!", "Terima kasih sudah diklik", "success");
Fungsi Swal.fire berisi 3 parameter, parameter pertama berisi “title“, parameter kedua berisi “isi/deskripsi“, parameter ketiga berisi arguments yang nilainya ada 4, yaitu :
- success,
- warning,
- error,
- info,
Jika script diatas dijalankan, maka hasilnya akan menjadi seperti ini : 
Demikian tutorial cara penggunan sweet alert, sangat simple dan mudah tapi tampilannya sangat bagus dan elegant. Masih banyak lagi yang bisa dilakukan pada sweet alert ini, jika ingin mengetahui lebih banyak tentang sweet alert kita bisa langsung mengunjungi website resminya disini.
Jika ada pertanyaan silahkan tuliskan pada kolom komentar, semoga bermanfaat, terima kasih.
Be the first to comment