Beautifull Alert with Sweet Alert

     Pada beberapa artikel sebelumnya SkripKu Dotkom sudah pernah membahas tentang Membuat Alert Box (Kotak Peringatan) dengan JavaScript, mungkin bagi kita yang emang baru belajar segitu juga udah lumayan. Tapi bagi kita yang mulai memperdalam dunia Web Development terutama dibagian Front-End nya, maka kita akan mulai sadar bahwa ternyata tampilan alert yang default disediakan oleh JavaScript terlalu simple dan polos. Sebagai alternatif lain, kita bisa ngoding bikin Alert sendiri dengan CSS dan JS (saya belum pernah nyoba) karena saya pengen yang agak mudah maka saya sering menggunakan Modal dari Bootstrap. Tapi lama kelamaan saya mulai menemukan alternatif lain lagi yang ternyata lebih mudah dan lebih cantik. Yaps, sesuai judul diatas namanya adalah "Sweet Alert".
     Sweet Alert adalah Library JavaScript dan CSS untuk membuat Alert (Kotak Peringatan), dengan menggunakan Sweet Alert ini Alert Box yang kita buat bisa jadi lebih enak di lihat dari pada menggunakan Alert yang bawaan JavaScript. Silahkan bandingkan dua alert dibawah, yang satu pake alert bawaan JavaScript dan yang kedua menggunakan SweetAlert:

      Bisa dilihat kan perbedaannya? Itu baru contoh sederhana, selanjutnya kita bisa bikin yang lebih kompleks seperti alert buat konfirmasi dan lain-lain.

Cara Menggunakan Sweet Alert 

1. Pertama-tama yang harus kita lakukan adalah mendapatkan source code Sweet Alert. Kita bisa mendownloadnya disini: https://github.com/t4t5/sweetalert/archive/master.zip
2. Extract dan copy-kan folder dist ke project kita.
3. Setelah folder dist ada dalam project kita, langkah selanjutnya adalah memanggil/ meload file CSS (sweetalert.css) dan file JS (sweetalert.min.js) ke file HTML kita.
4. Untuk percobaan, coba panggil fungsi berikut:
Kalau full code-nya kurang lebih seperti ini:
Jika semua berjalan lancar, maka akan mengeluarkan output alert seperti contoh yang tadi saya liatin. Oke, untuk dokumentasi lengkapnya kita bisa buka disini.

Sekian tutorial kali ini, semoga bermanfaat.
Wassalamualaikum Warahmatullahi Wabarakatuh..

4 komentar

CI itu kan Back-End Framework, jadi implementasinya ya ngikutin aturan CI. Tapi enggak beda jauh ko, kalau mas belajar CI-nya dari dasar saya yakin pasti bisa :)


EmoticonEmoticon