Alert 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:
- Instal SweetAlert dengan cara menambahkan kode berikut ini ke dalam file website kita. Kode bisa didownload dari web sweetalert langsung atau bisa mengambil library online. Kode tersebut yaitu : <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
- Setelah menambahkan kode tersebut, kita dapat langsung menggunakan beberapa contoh pop-up alert yang tersedia di library SweetAlert tersebut.
| Success | swal({
title: "Berhasil!",
text: "Pop-up Success",
icon: "success",
button: true
});
|
| Warning | swal({
title: "Berhasil!",
text: "Pop-up Warning",
icon: "warning",
button: true
});
|
| Error | swal({
title: "Berhasil!",
text: "Pop-up Error",
icon: "error",
button: true
});
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <title>Contoh SweetAlert</title> </head> <body> <div class="container"> <h1>Contoh Alert Menggunakan SweetAlert</h1> <hr> <table class="table"> <tr> <td>Original</td> <td><button class="btn btn-primary" onclick="alert_ori()">Alert Ori</button></td> </tr> <tr> <td>SweetAlert Success</td> <td><button class="btn btn-primary" onclick="alert_success()">SweetAlert Success</button></td> </tr> <tr> <td>SweetAlert Warning</td> <td><button class="btn btn-primary" onclick="alert_warning()">SweetAlert Warning</button></td> </tr> <tr> <td>SweetAlert Error</td> <td><button class="btn btn-primary" onclick="alert_error()">SweetAlert Error</button></td> </tr> </table> </div> <script type="text/javascript"> function alert_ori(){ alert("Alert Original Javascript"); } function alert_success() { swal({ title: "Berhasil!", text: "Pop-up Success", icon: "success", button: true }); } function alert_warning() { swal({ title: "Berhasil!", text: "Pop-up Warning", icon: "warning", button: true }); } function alert_error() { swal({ title: "Berhasil!", text: "Pop-up Error", icon: "error", button: true }); } </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>
0 Komentar