Cara Mempercantik Alert Javascript Dengan Sweet Alert – Pada artikel kali ini saya ingin membuat artikel yang tentunya lumayan menarik untuk dibuat. Yup, 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. Nah, untuk mempercantik tampilan pesan error atau notifikasi ini pada web yang kita punya, kita bisa menggunakannya dengan Sweet Alert. Sweet Alert sangat interaktif dan juga sweet alert ini lebih keren dan ada sedikit effectnya.
Apakah kalian penasaran perbedaan Alert Javascript dengan Alert dari Sweet Alert? Silahkan liat gambar dibawah ini untuk melihat perbedaannya.
Tampilan Alert dari Sweet Alert:
Tampilan Alert Javascript:
Terlihat perbedaannya bukan? Alert dari Sweet Alert lebih bagus, menarik, dan interaktif.
Cara Mempercantik Alert Javascript Dengan Sweet Alert
Nah, sekarang kalian sudah tau perbedaan antara keduanya. Jadi sekarang kita langsung saja masuk kedalam tutorialnya!.
Sebelum tutorialnya dimulai, silahkan kalian download terlebih dahulu file Sweet Alert nya disini. Kalau filenya sudah didownload, nanti filenya akan berada didalam folder yang bernama “sweetalert”.
Sekarang yang akan kita lakukan adalah membuat file HTML terlebih dahulu dan memanggil file sweet alert yang sudah kita download barusan. Silahkan ketikkan kode dibawah ini pada text editor kesayangan anda masing-masing.
<!DOCTYPE html>
<html>
<head>
<title>Sweet Alert - Iltekkomputer.com</title>
<link rel="stylesheet" href="sweetalert/style.css">
<script src="sweetalert/script.js"></script>
</head>
<body>
<script>
swal ("Hello World!");
</script>
</body>
</html>
Yang perlu diperhatikan adalah bagian yang diberikan highlight pada kode diatas, karena itu merupakan file sweet alert kita.
Jika sudah, silahkan simpan filenya dengan nama alert.html kemudian jalankan pada browser. Maka nanti tampilannya akan seperti dibawah ini:
Sampai sini kita sudah berhasil membuat alert dengan sweet alert. Tapi gimana kalo kita mau buat sweet alertnya kalo user mengklik tombol yang kita buat? Caranya cukup mudah, kita hanya perlu membuat sebuah function didalamnya, silahkan ketik dan perhatikan kode dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Sweet Alert - Iltekkomputer.com</title>
<link rel="stylesheet" href="sweetalert/style.css">
<script src="sweetalert/script.js"></script>
</head>
<body>
<button onclick="klik()">Klik aku mas!</button>
<script>
function klik(){
swal ("Yes!", "Makasih udah diklik mas", "success")
}
</script>
</body>
</html>
String pertama digunakan “title“, string kedua digunakan untuk “isi/deskripsi“, string ketiga digunakan sebagai arguments yang nilainya ada 4 “success”, “warning”, “error”, “info”.
Jika script diatas dijalankan, maka hasilnya akan menjadi seperti ini:
Bagaimana? Menakjubkan bukan, cara penggunannya sangat simple dan mudah tapi tampilannya sangat bagus dan elegant. Sebenarnya masih banyak lagi yang bisa dilakukan pada sweet alert ini, tapi tidak mungkin saya bahas semuanya dalam artikel ini, jika ingin tau kalian bisa langsung mengunjungi website resminya disini