Mempercantik Alert JavaScript dengan Sweet Alert
Ibnu Jakaria 11 Januari 2016
Kehadiran javascript dalam dunia web programming membawa banyak sekali perubahan. Salah satu perubahan yang paling signifikan adalah ajax. Yang awalnya setiap request yang kita buat kepada server harus melalui proses reload page, sekarang kita bisa melakukannya tanpa perlu me-reload page, request seolah-olah berjalan di balik layar. Dan ini tentu saja membuat aplikasi web menjadi lebih interaktif, tidak kalah dengan aplikasi desktop mau pun mobile.
Dengan hadirnya javascript pula, sekarang sangat memungkinkan sekali untuk membangun sebuah web dengan hanya satu halaman saja, atau biasa kita kenal dengan SPA (single page application), dan sudah banyak sekali framework-framework js yang hadir untuk mempermudah kita dalam membangun web berbasis SPA.
Dengan segala kekayaan fitur js, juga dengan segala kemampuan menakjubkan yang dibawanya, tetapi ada satu hal yang sedikit mengganjal. Yaitu perintah alert pada javascript yang tampilannya sangat sederhana dan klasik. Padahal alert adalah sesuatu yang penting, yang bisa kita gunakan untuk menampilkan pesan kepada user secara interaktif. Maka jika alert pada aplikasi kita tampilannya masih klasik, bisa mempengaruhi user experience secara keseluruhan terhadap aplikasi kita.
Lalu, bagaimana cara mempercantik alert pada javascript?
Jawabannya adalah: ada banyak. Kita bisa membuat sendiri popup menu from scratch (ngoding dari awal), atau menggunakan modal dari framework bootstrap, dan banyak sekali. Tetapi, dalam kesempatan kali ini, kita akan menggunakan sweet alert js.
Perhatikan penampilan alert bawaan dari js:
Dan perhatikan bagaimana alert dengan sweet alert:
Cantik bukan?
Langsung saja…
Kita bisa melakukan instalasi sweet alert melalui tiga cara:
Melalui bower
$ bower install sweetalert
Melalui npm
$ npm install sweetalert
Manual download
- Download file master di https://github.com/t4t5/sweetalert/archive/master.zip
- Extract file tersebut.
- Copy folder dist ke folder project.
swal("Good job!", "You clicked the button!", "success");
Contoh program:
<!DOCTYPE html>
<html>
<head>
<title>Sweet Alert</title>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<script type="text/javascript" src="dist/sweetalert.min.js"></script>
</head>
<body>
<button onclick="classic()">Normal Alert</button>
<button onclick="sweet()">Sweet Alert</button>
<script>
function normal () {
alert("Normal Alert!");
}
function sweet (){
swal("Good job!", "You clicked the button!", "success");
}
</script>
</body>
</html>
Untuk dokumentasi selengkapnya, bisa dilihat di http://t4t5.github.io/sweetalert/