Pada tutorial kali ini kita akan belajar bagaimana cara membuat notifikasi desktop dengan Java Script, jika pernah berkunjung ke sebuah website atau blog dimana disaat kita mengunjunginya, akan muncul sebuah popup, apakah kita ingin mengaktifkan notifikasi atau tidak pada website/blog tersebut, jika kita aktifkan notifikasinya maka kita akan mendapatkan notifikasi informasi informasi terbaru dari website/blog tersebut, namun jika kita tidak mengaktifkan notifikasi dari website/blog tersebut maka kita tidak akan mendapatkan notifikasi informasi informasi terbaru dari website/blog tersebut. Kalian penasaran kan bagaimana cara membuatnya, berikut tutorialnya cara membuat notifikasi dekstop menggunakan Java Script.
Membuat file dan folder
Sebelum kita memulai menulis syntax programnya, ada beberapa persiapan yang harus disiapkan.
Buatlah folder bernama desktop_notify pada folder htdocs bagi yang memakai XAMPP atau buat pada folder html bagi yang memakai LAMP Server.
Didalam folder desktop_notify, buatlah sebuah folder bernama img, dimana folder img akan menampung sebuah icon/logo, silahkan tambahkan sebuah icon/logo, yang nantinya akan menjadi icon/logo pada sebuah notifikasi dan buatlah file bernama index.html
Contoh herarki file dan foldernya dapat dilihat pada gambar dibawah ini.
Mulai Ngoding...
Setelah anda membuat file dan folder, sekarang kita akan menulis syntax programnya, silahkan buka file index.html, kemudian tulis syntax HTML seperti dibawah ini.
<h1>Demo Notifikasi Dekstop</h1> <p>Klik Subcribe Us, untuk medapatkan artikel terbaru dari kami</p> <a href="#" id="subcribe">Subcribe Us</a>
Kemudian, tambahkan syntax CSS berikut.
a{
display: inline-block;
text-decoration: none;
padding: 15px;
background-color: #0067E7;
color: #fff;
}
Setelah itu, buka web browser anda, kemudian ketikan
localhost/desktop_notify
Tekan enter, tampilannya dapat dilihat pada gambar berikut.
Setelah menulis syntax HTML dan CSS, selanjutnya tambahkan syntax Java Script, seperti dibawah ini.
// mengambil element berdasarkan id
var subcribe = document.getElementById('subcribe');
subcribe.addEventListener('click', function(e) {
e.preventDefault();
// jika web browser tidak mendukung notifikasi
if (!window.Notification) {
alert('Mohon maaf, notifikasi tidak mendukung');
} else {
Notification.requestPermission(function(p) {
// jika notifikasi diblokir
if (p == 'denied') {
alert("Terima Kasih telah tidak berlangganan");
}
// jika notifikasi diizinkan
else if (p == 'granted') {
alert("Terima kasih telah berlangganan");
}
});
}
});
addEventListener('load', function(p) {
var notify;
p.preventDefault();
// jika notifikasi di izinkan
if(Notification.permission == 'granted'){
notify = new Notification("Artikel Terbaru Kode Kuliahan",{
// judul notifikasi
body : "Tutorial Membuat Notifikasi Dekstop",
// icon notifikasi
icon : "img/logo.png"
});
}
});
Kemudian, buka web browser, lalu refresh halaman browser.
Cara Kerjannya Begini...
Jadi, ketika mengklik tombol “Subcribe Us”, akan muncul sebuah popup, dimana pada popup tersebut terdapat tombol “Izinkan” dan “Blokir”, dapat dilihat pada gambar dibawah ini.
Jika kita mengklik tombol “Izinkan”, maka akan muncul sebuah alert “Terima kasih telah berlangganan”, dapat diliihat pada gambar dibawah ini.
Sebaliknya, jika kita mengklik tombol “Blokir”, maka akan menampilkan alert “Terima kasih telah tidak berlangganan”, dapat dilihat pada gambar dibawah ini.
Jika notifikasinya diizinkan, refresh halaman browser dengan command CRT+R, setelah itu akan menampilkan notifikasi seperti gambar dibawah ini.
Namun, jika notifikasinya diblokir, maka notifikasi tidak akan muncul, seperti gambar diatas.
Demikian tutorial membuat notifikasi dekstop dengan Java Script, jika ada kesalahan, kekurangan atau hal hal lainnya, silahkan tulis komentar anda pada kolom komentar dibawah ya, Terima Kasih.
Semoga Bermanfaat.
Bang kalau kita mau nambah info lagi yg di input dengan form gimana?
ReplyDelete