Cara Membuat Custom Notifikasi / Alert dengan Sweet Alert

Posted on

Cara Membuat Custom Notifikasi / Alert dengan Sweet Alert

Halo sahabat programmer, jumpa lagi dengan lambecode. Pembahasan kita kali ini adalah Cara Membuat Custom Notifikasi/Alert JavaScript dengan Menggunakan Sweet AlertJavaScript merupakan bahasa pemograman yang digunakan untuk menambahkan fitur interaktif pada website. Seperti halnya css, dengan adanya JavaScript, tampilan website akan lebih dinamis dan interaktif. Oleh karena itu, JavaScript sangat sering digunakan oleh programmer website maupun sistem informasi. JavaScript dikenal lebih sulit dari pada bahasa pemrograman lainnya karena strukturnya yang sedikit berbeda. Namun, hal itu dianggap wajar bagi pemula. Dalam bahasa pemrograman JavaScript, untuk membuat notifikasi dikenal dengan alert. Secara default alert pada JavaScript mungkin sering dijumpain pada browser – browser pada umumnya. Yang akan kita pelajari yaitu membuat custom alert dengan bantuan plugin Sweet Alert.

Sweet Alert

Sweet Alert merupakan sebuah plugin yang digunakan untuk mempercantik pesan notifikasi / alert pada halaman browser. Seperti contoh untuk menampilkan pesan eror, pesan sukses, dan memberi warning. Pada umumnya, JavaScript telah menyediakan function alert() untuk membuat notifikasi secara default pada halaman browser. Namun, notifikasi tersebut terlihat kurang menarik. Seperti contoh berikut ini, tampilan alert default  dari JavaScript dan alert dari Sweet Alert.

Default Alert JavaScript

default alert javascript

Sweet Alert

sweet alert

Seperti itu perbedaan alert secara default dengan alert yang ditambah plugin Sweet Alert. Jika dilihat dari sisi tampilan, Sweet Alert memang lebih interaktif. Ada animasi zoom in ketika alert ini muncul namun tidak dapat dilihat jika hanya dengan gambar saja. Intinya Sweet Alert memberikan kemudahan dan kenyamanan bagi penggunanya. Untuk cara instlasi dan menggunakan, akan dijelaskan di bawah ini.

Instalasi Sweet Alert

Ada 3 cara proses instalasi Sweet Alert dan semuanya sangat mudah untuk dijalankan.

  • NPM/Yarn

  • CDN

  • Offline Installer download di sini

 

Cara Menggunakan Sweet Alert

Untuk menggunakan Sweet Alert sangat mudah. Hanya dengan menggunakan function swal(). Function swal() memiliki 3 argumen. Argumen yang pertama berisi judul modal, argumen kedua berisi text modal, dan argumen terakhir berisi icon yang berhubungan dengan notifikasi pesan. Seperti contoh ikon untuk menampilkan pesan eror, sukses, warning, dan info. Lebih jelasnya seperti di bawah ini bentuk function dan argumen dari swal().

Untuk lebih jelasnya, perhatikan demo untuk penggunaan plugin Sweet Alert

See the Pen MzmpBZ by b1em8in (@b1em8in) on CodePen.

Selain itu, Sweet Alert memberi kemudahan untuk melakukan kustomisasi terhadap alert yang ingin dibuat oleh penggunanya. Berikut ini sebagi contoh beberapa kustomisasi function swal() untuk membuat alert.

Sekian tutorial dari lambecode, jika ada yang perlu didiskusikan silahkan kontak admin atau kunjungi website dari Sweet Alert.

2 thoughts on “Cara Membuat Custom Notifikasi / Alert dengan Sweet Alert

Leave a Reply

Your email address will not be published. Required fields are marked *