By SweetAlert 2 adalah library JavaScript yang digunakan untuk membuat notifikasi dan modals interaktif dengan tampilan yang menarik. Library ini merupakan pengembangan dari SweetAlert, yang memiliki fitur lebih lengkap dan responsif. Dalam artikel ini, kita akan menjelajahi cara menggunakan SweetAlert 2 untuk membuat notifikasi yang menarik dan interaktif pada website Anda.
Persyaratan
Sebelum kita mulai, pastikan Anda memiliki pemahaman dasar tentang HTML, CSS, dan JavaScript. Anda juga harus memiliki teks editor dan web browser terinstall pada komputer Anda. Selain itu, pastikan Anda telah menambahkan library SweetAlert 2 pada proyek Anda. Anda dapat menambahkannya dengan men-download file-nya dari website resmi SweetAlert 2 atau menggunakan package manager seperti npm atau yarn.
Langkah 1: Persiapan Struktur HTML
Pertama, buatlah file HTML baru dan buat struktur dasar:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membuat Notifikasi dengan SweetAlert 2</title>
<!-- Tambahkan link CSS SweetAlert 2 -->
<link rel="stylesheet" href="sweetalert2.min.css">
</head>
<body>
<h1>Selamat Datang di Website Kami</h1>
<!-- Tambahkan button untuk menampilkan notifikasi -->
<button id="btnNotifikasi">Tampilkan Notifikasi</button>
<!-- Tambahkan script SweetAlert 2 -->
<script src="sweetalert2.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Langkah 2: Membuat Notifikasi dengan SweetAlert 2
Selanjutnya, buatlah file dengan nama “script.js” dan tambahkan kode berikut:
// Ambil button notifikasi dari DOM
const btnNotifikasi = document.getElementById('btnNotifikasi');
// Tambahkan event listener untuk button notifikasi
btnNotifikasi.addEventListener('click', () => {
// Tampilkan notifikasi SweetAlert 2
Swal.fire({
title: 'Hello!',
text: 'Ini adalah contoh notifikasi SweetAlert 2.',
icon: 'success',
confirmButtonText: 'Ok'
});
});
Langkah 3: Pengujian
Selanjutnya, simpan semua file HTML, CSS, dan JavaScript di direktori yang sama. Lalu, buka file HTML di web browser Anda. Anda akan melihat tombol “Tampilkan Notifikasi” pada halaman, dan saat Anda mengklik tombol tersebut, sebuah notifikasi SweetAlert 2 akan muncul dengan judul “Hello!” dan teks “Ini adalah contoh notifikasi SweetAlert 2.” serta ikon success. Anda dapat menyesuaikan judul, teks, dan ikon notifikasi sesuai dengan kebutuhan proyek Anda.
Kesimpulan
Dalam artikel ini, kita telah berhasil menggunakan SweetAlert 2 untuk membuat notifikasi interaktif pada website. Dengan menggunakan SweetAlert 2, kita dapat dengan mudah menampilkan notifikasi yang menarik dan responsif kepada pengguna, sehingga meningkatkan pengalaman pengguna pada website. Anda juga dapat memodifikasi notifikasi sesuai dengan desain dan kebutuhan proyek Anda. Selamat mencoba dan semoga berhasil!
