Sweet Alert untuk tampilan alert kalian

Dalam membuat website, kalian pasti sering menggunakan Alert. Fungsi Alert sendiri yaitu untuk menghasilkan output berupa pesan khusus kepada user berupa peringatan. Karena beberapa tampilan dari alert kurang menarik, sedangkan kita membutuhkan tampilan yang lebih menarik dan interkatif. maka kita membutuhkan Sweet Alert sebagai pengganti Alert biasa. sekarang coba kita lihat perbedaan antara Alert biasa dan Sweet Alert.

Bandingkan alert biasa seperti yang ada di bawah

Dengan sweet alert yang ada di bawah ini.

Perbedaanya cukup jelas kan antara alert yang biasa dengan sweet alert. Selain tampilannya yang lebih besar ketimbang alert biasa, sweet alert juga memiliki desain yang pastinya lebih bagus daripada alert biasa.

oke, kalo penasaran dengan Sweet Alert, saya bagi tips membuat sweet Alert. Cukup mudah dalam membuatnya. tapi di tips ini agak beda sedikit dengan sumber aslinya yaitu di https://sweetalert.js.org boleh lihat tutorial di situs resmi di atas atau lihat di tutorial di bawah ini (tapi gak beda jauh kok).

1. download foldernya di link ini

  https://drive.google.com/drive/folders/11z2sY0ZzioXCeCKREFMxAJEpnIkXRuKM?usp=sharing (bagi yang menggunakan android, browser bisa diubah menjadi situs desktop, lalu klik sweet alert yang ada di samping drive saya dan pilih download)

2. buat folder baru di htdocs lalu masukan folder yang sudah di download.

3. buat file php dengan nama bebas. 

4. salin script di bawah ini.

Untuk script di atas, itu hanya contoh saja, kalian bisa menggunakan code untuk sweet alert lainnya. Untuk script sweet alertnya sendiri, mulai dari <script language ='javascript'> hingga </script>. Script tersebut bisa juga di custom agar tidak ada button di alert tersebut dengan script 'button : false', iconnya pun juga bisa di atur sesuai jenis peringatan dengan 'icon : ' . 

5. lalu silahkan coba di localhost

6. selesai, kalian bisa coba run di browser masing-masing.

sebenarnya masih banyak alert yang disediakan Sweet Alert. Bisa disesuakan dengan kebutuhan kalian. Untuk mendapatkan script Sweet alert yang lebih lengkap, kalian boleh mengecek di link sweet alert yang sudah saya berikan di atas... 😁

sekian dulu ya blog ini, kalau ada yang mau ditanyakan silahkan tinggalkan komentar di bawah.

Bagikan Artikel ini