Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Membuat Pesan Popup yang Cantik Menggunakan SweetAlert2

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Sesekali, Anda harus menunjukkan kotak peringatan (alert box) kepada pengguna Anda untuk memberi tahu mereka tentang kesalahan atau pemberitahuan. Masalah dengan kotak peringatan standar yang disediakan oleh browser adalah bahwa mereka tidaklah terlalu menarik. Saat Anda membuat sebuah website dengan kombinasi warna dan animasi yang bagus untuk meningkatkan pengalaman dalam penjelajahan dari pengguna Anda, kotak peringatan yang tidak tertata akan terlihat janggal.

Dalam tutorial ini, Anda akan belajar tentang pustaka bernama SweetAlert2 yang memungkinkan kita untuk membuat semua jenis pesan peringatan yang dapat disesuaikan agar sesuai dengan tampilan dan nuansa pada website kita sendiri.

Menampilkan Pesan Peringatan yang Sederhana

Sebelum Anda dapat menampilkan semua pesan peringatan dengan SweetAlert ini kepada pengguna, Anda harus menginstal pustaka dan memasukkannya ke dalam proyek Anda. Jika Anda menggunakan npm atau bower, Anda dapat menginstalnya dengan menjalankan perintah berikut:

Anda juga bisa mendapatkan tautan CDN untuk versi terbaru dari pustaka ini dan memasukkannya pada halaman web Anda menggunakan tag script:

Selain file JavaScript, Anda juga harus memuat file CSS yang digunakan untuk mengatur semua kotak peringatan yang dibuat oleh pustaka:

Setelah Anda menginstal pustaka ini, membuat SweetAlert sebenarnya sangatlah mudah. Yang harus Anda lakukan hanyalah memanggil fungsi swal(). Pastikan saja bahwa fungsi tersebut dipanggil setelah DOM dimuat.

Ada dua cara untuk membuat SweetAlert menggunakan fungsi swal(). Anda dapat meneruskan judul, teks pada bagian body, dan nilai ikon dalam tiga argumen berbeda atau Anda dapat menyampaikan argumen tunggal sebagai objek dengan nilai yang berbeda sebagai pasangan nilai-kuncinya. Melewati segala sesuatu dalam suatu objek yang berguna ketika Anda ingin menentukan nilai untuk beberapa argumen.

Ketika satu argumen dilewatkan dan itu adalah string, SweetAlert hanya akan menampilkan judul dan tombol OK. Pengguna akan dapat mengklik di mana saja di luar peringatan atau pada tombol OK untuk mengabaikannya.

Ketika dua argumen dilewatkan, yang pertama menjadi judul dan yang kedua menjadi teks di dalam peringatan. Anda juga dapat menampilkan ikon pada kotak peringatan dengan meneruskan argumen ketiga. Ini dapat memiliki salah satu dari lima nilai yang telah ditetapkan: warningerrorsuccessinfo, dan question. Jika Anda tidak melewati argumen ketiga, tidak ada ikon yang akan ditampilkan di dalam pesan peringatan.

Pilihan-pilihan Konfigurasi untuk Menyesuaikan Peringatan

Jika Anda hanya ingin menampilkan beberapa informasi dasar di dalam kotak peringatan, contoh sebelumnya akan baik-baik saja. Namun, pustaka SweetAlert sebenarnya dapat melakukan lebih dari sekadar menunjukkan kepada pengguna beberapa teks di dalam pesan peringatan. Anda dapat mengubah setiap aspek pesan peringatan ini sesuai dengan kebutuhan Anda sendiri.

Pustaka ini telah mencakup judul, teks, dan ikon di dalam pesan SweetAlert. Ada juga pilihan untuk mengubah tombol di dalamnya dan mengontrol perilaku mereka. Secara standar, peringatan hanya akan memiliki satu tombol konfirmasi dengan teks yang bertuliskan "OK". Anda dapat mengubah teks di dalam tombol konfirmasi dengan mengatur nilai properti dari confirmButtonText. Jika Anda juga ingin menunjukkan tombol batal dalam pesan peringatan Anda, yang harus Anda lakukan hanyalah mengatur nilai showCancelButton menjadi true. Teks di dalam tombol batal dapat diubah menggunakan properti cancelbuttonText.

Masing-masing tombol ini dapat diberi latar belakang warna yang berbeda menggunakan properti confirmButtonColor dan cancelButtonColor. Warna standar untuk tombol konfirmasi adalah #3085d6, sedangkan warna standar untuk tombol batal adalah #aaa. Jika Anda ingin menerapkan penyesuaian lainnya pada tombol konfirmasi atau pembatalan, Anda cukup menggunakan properti confirmButtonClass dan cancelButtonClass untuk menambahkan kelas baru ke dalamnya. Setelah kelas ditambahkan, Anda akan dapat menggunakan CSS untuk mengubah tampilan tombol-tombol tersebut. Anda juga dapat menambahkan kelas pada bagian modal utama itu sendiri dengan menggunakan properti customClass.

Jika Anda berinteraksi dengan pesan peringatan dalam contoh yang pertama, Anda mungkin telah memperhatikan bahwa modal dapat ditutup dengan menekan tombol Enter atau Escape. Demikian pula, Anda juga dapat mengklik di mana saja di luar modal untuk mengabaikannya. Ini terjadi karena nilai allowEnterKey, allowEscapeKey, dan allowOutsideClick secara standar diatur ke true.

Saat Anda menunjukkan dua tombol berbeda di dalam modal, tombol konfirmasi adalah yang berada di fokus secara standar. Anda dapat menghapus fokus dari tombol konfirmasi dengan menetapkan nilai focusConfirm menjadi false. Demikian pula, Anda juga dapat mengatur fokus pada tombol batal dengan mengatur nilai focusCancel menjadi true.

Secara standar tombol konfirmasi selalu ditampilkan di sisi kiri. Anda memiliki opsi untuk membalik posisi konfirmasi dan tombol pembatalan dengan mengatur nilai dari reverseButtons menjadi true.

Selain mengubah posisi dan warna tombol di dalam pesan peringatan, Anda juga dapat mengubah latar belakang dan posisi dari pesan peringatan atau latar belakang di sekitarnya. Tidak hanya itu, meskipun pustaka SweetAlert juga memungkinkan Anda untuk menampilkan ikon atau gambar kustom Anda sendiri pada pesan peringatan. Ini dapat membantu dalam banyak situasi.

Anda dapat menyesuaikan latar belakang dari SweetAlert menggunakan properti backdrop. Properti ini menerima Boolean atau string sebagai nilainya. Secara standar, latar belakang dari pesan peringatan terdiri dari sebagian besar warna abu-abu transparan. Anda dapat menyembunyikannya secara penuh dengan menetapkan nilai backdrop menjadi false. Demikian pula, Anda juga dapat menampilkan gambar Anda sendiri pada latar belakang dengan menetapkan nilai backdrop sebagai string. Dalam kasus semacam itu, seluruh nilai string backdrop ditetapkan ke properti CSS background. Latar belakang dari pesan SweetAlert dapat dikontrol menggunakan properti background. Secara standar semua pesan peringatan memiliki latar belakang putih sepenuhnya.

Secara standar semua pesan peringatan muncul di tengah windows. Namun, Anda dapat membuatnya muncul dari lokasi lain menggunakan properti position. Properti ini dapat memiliki sembilan nilai yang berbeda dengan nama yang cukup jelas: toptop-starttop-endcentercenter-startcenter-endbottombottom-start, dan bottom-end.

Anda dapat menonaktifkan animasi ketika modal popup muncul dengan mengatur nilai properti animation menjadi false. Pustaka ini juga menyediakan properti timer sebagai pengaturan waktu yang dapat digunakan untuk menutup secara otomatis setelah beberapa milidetik berlalu.

Dalam contoh berikut, saya telah menggunakan kombinasi yang berbeda dari semua properti yang dibahas pada bagian ini untuk membuat empat pesan peringatan yang berbeda. Ini seharusnya dapat menunjukkan bagaimana Anda benar-benar dapat mengubah penampilan dan perilaku dari modal yang dibuat oleh pustaka SweetAlert2.

Metode penting dari SweetAlert2

Menginisialisasi pesan SweetAlert yang berbeda untuk menunjukkannya kepada pengguna adalah salah satu hal, tetapi terkadang Anda juga perlu akses ke metode yang mengontrol perilaku pesan peringatan tersebut setelah inisialisasi. Untungnya, pustaka SweetAlert2 menyediakan banyak metode yang dapat digunakan untuk menampilkan atau menyembunyikan modal serta mendapatkan judul, teks, gambar, dll.

Anda dapat memeriksa apakah modal terlihat atau tersembunyi menggunakan metode isVisible(). Anda juga dapat secara terprogram menutup modal yang terbuka dengan menggunakan metode close() atau closeModal(). Jika Anda kebetulan menggunakan kumpulan properti yang sama untuk beberapa pesan peringatan selama inisialisasi mereka, Anda cukup memanggil metode setDefaults({configurationObject}) di awal untuk mengatur nilai dari semua properti itu sekaligus. Pustaka SweetAlert juga menyediakan metode resetDefaults() untuk mengatur ulang semua properti ke nilai standarnya (default).

Anda bisa mendapatkan judul, konten, dan gambar dari modal menggunakan metode getTitle(), getContent(), dan getImage(). Demikian pula, Anda juga bisa mendapatkan HTML yang membentuk tombol konfirmasi dan tombol pembatalan menggunakan metode getConfirmButton() dan getCancelButton().

Ada banyak metode lain yang dapat digunakan untuk melakukan tugas lainnya seperti melakukan klik secara terprogram pada tombol konfirmasi atau tombol pembatalan.

Penutup

Pustaka SweetAlert2 membuatnya sangat mudah bagi pengembang untuk membuat pesan peringatan khusus agar dapat ditampilkan kepada pengguna mereka dengan hanya mengatur beberapa nilai dari properti. Tutorial ini bertujuan untuk mencakup dasar-dasar pustaka ini sehingga Anda dapat membuat pesan peringatan khusus sendiri dengan cepat.

Untuk mencegah tulisan ini menjadi terlalu besar, saya hanya membahas metode dan properti yang paling umum digunakan. Jika Anda ingin membaca tentang semua metode dan properti lain yang dapat digunakan untuk membuat pesan peringatan secara lanjutan, Anda harus mengunjungi dokumentasi yang mendetail dari pustaka ini.

Jangan lupa juga untuk memeriksa JavaScript lainnya yang kami miliki di Envato Market.

Jangan ragu untuk memberi tahu saya, jika ada sesuatu yang Anda ingin saya klarifikasi dalam tutorial ini.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.