Cara Membuat Notifikasi Realtime Dengan Pusher Part 4

08/01/2018    Ekky Ridyanto    165     Website

Agar lebih terasa dan lebih keren sistem notifikasi yang kita buat bagaimana jika kita gunakan library tambahan yaitu sweetalert. Kita akan download melalui npm install sweetalert pada terminalnya dengan menuliskan sintaks seperti berikut

Cara-Membuat-Notifikasi-Realtime-Dengan-Pusher-Part4-1

Pastikan teman teman sudah menginstall Node JS di sistem operasinya. Maka otomatis dia akan mendownload file yang dibutuhkan didalam folder node_modulesnya. Berikutnya yaitu melakukan load file CSS dan Javascriptnya didalam struktur HTML dengan menggunakan tag <script> sebagai berikut

Cara-Membuat-Notifikasi-Realtime-Dengan-Pusher-Part4-2

Kemudian kita akan melakukan sesuatu pada eventnya tidak lagi menampilkan alert tapi kita akan menjalankan metode swal() dari sweetalertnya dengan memasang beberapa opsi yakni pertama title sebagai judulnya

Cara-Membuat-Notifikasi-Realtime-Dengan-Pusher-Part4-3

Lalu ada key text sebagai isi pesannya type popupnya ada warning untuk warna kuning, success (hijau), danger (merah) dan yang terakhir akan ada button confirmnya yakni sebagai berikut

Cara-Membuat-Notifikasi-Realtime-Dengan-Pusher-Part4-4

Kita pisahkan dengan koma untuk opsi satu dengan opsi yang lainnya. Tentu opsi disini ada banyak sekali yang teman teman bisa setting. Websitenya ada di sweetalert.com/github https://github.com/t4t5/sweetalert. Tapi sebelum itu kalo teman teman belum tahu sweetAlert itu apa ? sweetAlert ini merupakan sebuah library dari javacript yang digunakan untuk menampilkan popup alert yang sangat powerfull yang telah didesign secantik mungkin. Nah sekarang kita akan kebagian servernya tentu teman teman berfikir masa setiap kita buka atau reload servernya dia akan mentrigger langsung jadi kita akan naikin satu tingkat dengan mengubah konsep alurnya dengan menambahkan satu form submit dengan method POST. Jadi idenya ketika formnya disubmit maka kita akan mentrigger push-channelnya karena kita tidak mau pada saat reload halaman servernya otomatis mentrigger sesuatu dengan mengirimkan pesan yang tidak jelas. Maka dari itu kita akan buat sistem form dari adminnya sendiri ketika disubmit tombolnya maka kita mentrigger data pesannya tentu pesannya kita ambil dari masing masing inputan.

Cara-Membuat-Notifikasi-Realtime-Dengan-Pusher-Part4-6

dan langkah berikutnya kita akan buat dua inputan yaitu inputan nama dan isi messagenya dengan menentukan masing-masing attribute namenya yakni nama dan message

Cara-Membuat-Notifikasi-Realtime-Dengan-Pusher-Part4-5

Lalu satu lagi untuk tag button submitnya. Nah jadi sekarang baik itu dari sisi client ataupun servernya pastikan tidak ada yang error. Ketika saya masukkan nama dan isi pesannya lalu submit kirim notifikasi ke semua client yang berlangganan maka di sisi client teman teman bisa lihat secara langsung sweetalertnya tampil secara bersamaan

Cara-Membuat-Notifikasi-Realtime-Dengan-Pusher-Part4-7

Cantik sekali sistem notifikasi kita berhasil dibuat. Sama sekali kita tidak reload halamannya itu semua dilakukan secara otomatis atau secara realtime. Tentu teman teman disini sudah bisa mengimplementasikan baik itu pada sisi client ataupun sisi servernya yang jelas itu dia dasar penggunaan sistem notifikasi dengan library Pushernya. Terima kasih.

Artikel, PHP, Javascript, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More