Dalam pengembangan web, pop-up sering digunakan untuk memberikan informasi atau konfirmasi kepada user. Namun, pop-up default JavaScript, seperti alert(), sering kali terlihat tidak menarik dan kurang sesuai dengan desain website modern. Di sinilah SweetAlert berfungsi.

SweetAlert adalah library untuk membuat pop-up yang tidak hanya menarik secara visual, tetapi juga customizable. Dengan Sweet Alert, kamu bisa mengubah hampir semua aspek tampilan pop-up, mulai dari teks, warna, icon, hingga animasi. Library ini memberikan kebebasan bagi developer agar konsisten dengan desain website secara keseluruhan.

Sweet Alert juga mendukung responsivitas, membuat tampilan pop-up bisa disesuaikan di berbagai ukuran layar. Selain itu, SweetAlert telah dirancang untuk memenuhi standar aksesibilitas (WAI-ARIA), membuatnya bisa dipakai oleh berbagai user, termasuk yang menggunakan screen reader.

Bagi pemula, memahami dan menggunakan SweetAlert bisa menjadi langkah awal yang tepat untuk meningkatkan kualitas interaksi user di website. Yuk, simak cara instal dan pakai SweetAlert di sini!

Cara Install SweetAlert

Berikut langkah-langkah untuk menginstal SweetAlert:

Langkah 1: pilih metode instalasi

Ada beberapa cara untuk menginstal SweetAlert:

• Menggunakan npm (Node Package Manager): jika kamu menggunakan library atau framework seperti React atau Vue, disarankan untuk menginstal SweetAlert melalui NPM. Cara ini memudahkan manajemen ketergantungan dan integrasi dengan sistem build. Instal SweetAlert dengan perintah berikut di terminal:

Perintah di atas menambahkan SweetAlert ke dalam node_modules dan kamu dapat mengimpornya ke proyek.

• Menggunakan CDN (Content Delivery Network): untuk proyek yang menggunakan JavaScript murni (vanilla JavaScript), menggunakan CDN bisa lebih praktis. Caranya, tambahkan tag script berikut ke dalam < head > atau sebelum tag penutup < /body > di HTML:

Langkah 2: tambahkan SweetAlert ke proyek

Setelah memilih metode instalasi dan menambahkan SweetAlert, langkah selanjutnya adalah mengintegrasikannya ke dalam proyek.

• Jika menggunakan npm: impor SweetAlert ke dalam file JavaScript yang kamu butuhkan. Contohnya, import Swal from 'sweetalert2';
• Jika menggunakan CDN: tidak perlu langkah tambahan karena SweetAlert sudah siap digunakan setelah kamu menambahkan script tag.

Langkah 3: uji SweetAlert

Untuk memastikan SweetAlert telah terinstal dengan tepat, tambahkan kode berikut ke dalam file JavaScript atau langsung di dalam tag < script > di HTML:

Kode ini akan menampilkan pop-up SweetAlert dengan pesan sukses. Jika pop-up muncul, berarti SweetAlert telah berhasil diinstal dan siap digunakan dalam proyek.

Cara Menggunakan SweetAlert

Setelah menginstal SweetAlert, berikut cara menggunakannya:

Langkah 1: memanggil SweetAlert

Untuk menggunakan SweetAlert, kamu perlu memanggilnya dalam kode JavaScript. Langkah ini dapat dilakukan dengan menggunakan fungsi Swal.fire().

Struktur dasar SweetAlert adalah sebagai berikut:

Langkah 2: mengonfigurasi opsi

SweetAlert menawarkan berbagai opsi konfigurasi untuk menyesuaikan tampilan pop-up. Beberapa opsi umum yang dapat kamu konfigurasikan termasuk:

• title: judul pop-up.
• text: teks isi pop-up.
• icon: jenis ikon (misalnya, 'success', 'error', 'warning', 'info', 'question').
• confirmButtonText: teks pada tombol konfirmasi.
• showCancelButton: menampilkan atau menyembunyikan tombol batal.
• cancelButtonText: teks pada tombol batal.

Contoh konfigurasi dasar:

Langkah 3: menangani respons

SweetAlert mendukung promise yang memungkinkan kamu menangani respons user setelah mereka mengeklik tombol pada pop-up. Kamu bisa menggunakan .then() untuk menangani respons ini.

Contoh menangani respons:

Langkah 4: kustomisasi lanjutan (opsional)

Pada kustomisasi lanjutan, kamu dapat menggunakan opsi tambahan, seperti customClass untuk menambahkan class CSS custom dan timer untuk membuat pop-up tertutup secara otomatis setelah waktu tertentu.

Contoh kustomisasi lanjutan:

Contoh Penggunaan SweetAlert

Berikut beberapa contoh penggunaan SweetAlert untuk berbagai skenario:

Menampilkan pesan sukses

Pesan sukses biasanya ditampilkan setelah user berhasil melakukan suatu aksi, seperti menyimpan data atau menyelesaikan sebuah proses.

Swal.fire('Berhasil!', 'Data Anda berhasil disimpan.', 'success');

Menampilkan pesan error

Pesan error dipakai untuk memberitahukan user bahwa terjadi kesalahan, misalnya saat pengiriman formulir gagal atau terjadi masalah pada server.

Swal.fire('Oops...', 'Terjadi kesalahan saat memproses permintaan Anda!', 'error');

Konfirmasi tindakan

Konfirmasi tindakan berguna untuk meminta user memastikan pilihan mereka sebelum melanjutkan, seperti menghapus data atau keluar dari halaman.

FAQ (Frequently Ask Questions)

Apakah SweetAlert dapat digunakan dengan berbagai jenis proyek web dan framework?

Ya, SweetAlert bisa digunakan dengan berbagai jenis proyek web dan framework.

SweetAlert adalah library JavaScript yang independen dan tidak bergantung pada framework tertentu, sehingga dapat diintegrasikan dengan mudah ke dalam berbagai proyek web, termasuk yang menggunakan framework populer seperti React, Vue, Angular, dan lainnya.

Kamu hanya perlu memastikan SweetAlert diimpor dan diinisialisasi dengan benar dalam konteks proyek atau framework yang kamu gunakan.

Bagaimana cara menambahkan gambar atau ikon ke dalam pesan SweetAlert?

Untuk menambahkan gambar atau icon kustom ke dalam pesan SweetAlert, kamu bisa menggunakan opsi imageUrl, imageWidth, imageHeight, dan imageAlt.

Selain itu, SweetAlert juga menyediakan icon bawaan seperti 'warning', 'error', 'success', 'info', dan 'question' yang dapat digunakan dengan mengatur opsi icon.

Apakah SweetAlert memiliki opsi untuk menambahkan tindakan (aksi) tambahan dalam pesan pop-up?

Ya, SweetAlert memiliki opsi untuk menambahkan tindakan tambahan dalam pesan pop-up.

Kamu dapat menambahkan tombol kustom selain tombol konfirmasi dan batal standar. Ini dapat dilakukan dengan menggunakan opsi showCancelButton untuk menampilkan tombol batal, dan confirmButtonText serta cancelButtonText untuk mengubah teks pada tombol-tombol tersebut. Kamu juga bisa menangani tindakan yang berbeda berdasarkan tombol mana yang diklik pengguna dengan menggunakan promise yang dikembalikan oleh Swal.fire().