Image Load

Hello world,

Sweetalert adalah salah satu plugin javascript yang dibuat untuk mempercantik popup/alert pada website yang cukup banyak penggunanya termasuk saya. Jika kita sering menemukan fitur popup atau alert dalam sebuah website bisa jadi fitur tersebut berasal dari sweet alert. SweetAlert atau Swal punya ciri khas pada desainnya seperti pada gambar di atas. Sweetalert memberikan kemudahan dalam membuat alert hanya dengan code yang singkat dengan beberapa penggunaan seperti alert biasa, popup konfirmasi, success alert, error alert dan lain-lain. Seberapa mudah penggunaannya mari kita ikutin contoh di bawah ini.

Instalasi

Untuk instalasi sangat mudah. Kalau saya cukup pakai CDN saja seperti berikut.

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>


Penggunaan

Ada beberapa penggunaan sweetalert seperti berikut yang biasa saya gunakan.

Alert biasa

Alert biasa disini maksudnya adalah alert yang hanya digunakan untuk pemberitahuan sederhana seperti pemberitahuan success/error/warning tanpa ada tidak lanjut tertentu. Contoh ketika kita klik sebuah tombol dan ketika proses selesai atau gagal akan muncul alert ini.

Contoh 1 Title

swal("Hello world!");

Contoh 2 dengan Subtitle

swal("Here's the title!", "...and here's the sub title!");

Contoh 3 dengan tipe alert

swal("Good job!", "You clicked the button!", "success");

Pada tipe kita bisa menggunakan success, warning, error, dan info.

Contoh 4. dengan options

Option di sini maksudnya adalah penggunaan penamaan object pada masing-masing fungsi di swal seperti title, text, icon dan button.

swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
  button: "Aww yiss!",
});


Contoh penggunaan.

<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<title>Hello, world!</title>
</head>

<body>
<div class="container text-center">
<h1>Hello, world!</h1>
<button class="btn btn-primary" onClick="showAlert()">Alert</button>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script>
function showAlert() {
swal({
title: "Good job!",
text: "You clicked the button!",
icon: "success",
});

}
</script>
</body>

</html>


Penggunaan Konfirmasi Alert

Biasanya kita menggunakan alert untuk memberikan fitur konfirmasi saat akan menghapus data atau memilih opsi tertentu pada website.

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    //proses hapus di sini bisa pakai ajax
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

Contoh.

<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<title>Hello, world!</title>
</head>

<body>
<div class="container text-center">
<h1>Hello, world!</h1>
<button class="btn btn-primary" onClick="showAlert()">Alert</button>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script>
function showAlert() {
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
// proses hapus di sini bisa pakai ajax
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
}
</script>
</body>

</html>


Cukup mudah bukan?

Selamat mencoba :)