Membuat Notifikasi Realtime Dengan PHP

Beranda
Komunitas
Tech
Programmer Forum
Membuat Notifikasi Realtime Dengan PHP

itganteng

08-10-2018 15:09

Membuat Notifikasi Realtime Dengan PHP

Halo, selamat datang di postingan pertama ane.

Pada kesempatan kali ini, ITGanteng mencoba membuat suatu program yang akan menampilkan Notifikasi secara Realtime dengan bahasa pemrograman PHP. Dimana dalam program ini, semua user yang sedang aktif atau sedang berkunjung di website agan/sista akan mendapatkan notifikasi secara realtime.

So, let's begin with the basic.

Realtime itu apa si? Realtime itu bisa di artikan sebagai suatu proses yang instan. Dalam konteks programming, instan berarti ketika proses masukkan dilakukan, maka proses keluaran pun akan langsung muncul seketika itu juga, nah misalkan ketika agan/sista ingin menampilkan suatu pesan notifikasi kepada client yang sedang aktif, client tidak perlu me-refresh terlebih dahulu halaman yang sedang dia kunjungi, agan/sista hanya perlu menentukan apa yang akan ditampilkan di user, dengan sendirinya pesan agan/sista akan muncul di bagian manapun didalam jendela user, sesuai dengan format yang telah agan/sista tetapkan sendiri.

Sedikit tambahan info sebelum eksekusi nih gan/sis, kita akan menggunakan layanan Pusher sebagai notification service nya. Pusher sendiri merupakan salah satu layanan pendukung komunikasi secara realtime menggunakan websocket yang dapat berkomunikasi dengan program/aplikasi PHP, Android, Java, Python, dan lainnya yang kita buat.

Step 1
Sebelum membuat Aplikasi Notifikasi Realtime, kita harus mendaftar terlebih dahulu ke layanan Pusher dengan mengunjungi link berikut ini.

Setelah proses registrasi layanan Pusher selesai, click tombol Create New App untuk membuat app baru di akun Pusher Anda.
Membuat Notifikasi Realtime Dengan PHP

Setelah menekan tombol Create New App akan muncul dialog Create your Channels app, pada dialog tersebut isikan data yang diperlukan sesuai dengan gambar dibawah ini.
Membuat Notifikasi Realtime Dengan PHP

Quote:

Pada gambar kedua, kolom front-end tech nomor 3 kita pilih Android agar nantinya project yang dibuat sekarang ini bisa terkoneksi dengan Android App untuk realtime notifikasi nya. Singkatnya akan ada part 2 untuk mengkoneksikan antara php dan android nya. So stay tuned.

Sedangkan untuk kolom nomor 4 nya kita pilih php untuk back-end nya dikarenakan program yang dibuat sekarang menggunakan bahasa pemrograman php.

Setelah semua data terisi, agan/sista bisa mengclick tombol Create my app dan agan akan dialihkan ke Dashboard app yang telah agan/sista buat tadi. Penampakan nya sebagai berikut.
Membuat Notifikasi Realtime Dengan PHP

Baiklah agan/sista semua, setelah sukses registrasi di Pusher, step selanjutnya yaitu meingstall Composeruntuk mengunduh repository pusher dari GitHub.

Untuk menginstall composer yaitu bisa dengan mengunduh file Composer Setup lalu ikuti proses installasi seperti biasanya.

Setelah installasi Composer selesai, silahkan agan/sista buka Command Prompt dengan cara tekan tombol START pada keyboard, lalu ketikkan CMD pada Keyboard. Selanjutnya pada list program di start menu, pilih Command Prompt dan click kanan lalu pilih Run as Administrator seperti pada gambar dibawah ini.
Membuat Notifikasi Realtime Dengan PHP

Jendela Command Prompt akan terbuka, selanjutnya ketikkan composer lalu tekan enter pada keyboard. Apabila tampilan keluaran dari perintah tersebut seperti dibawah ini, itu artinya composer sudah terinstall di komputer agan/sista.
Membuat Notifikasi Realtime Dengan PHP

Selanjutnya pada jendela Command Prompt masuk ke directory Localhost anda (disini ane menggunakan XAMPP sebagai server PHP nya). Untuk masuk ke directory htdocs di Command Prompt ketikkan command berikut:

Quote:

cd C:\xampp\htdocs\

Setelah directory sudah di set ke folder htdocs, ketikkan command berikut untuk membuat folder baru dengan nama NotifikasiRealtime.

Quote:

mkdir NotifikasiRealtime

Selanjut nya tekan enter, lalu ketikan lagi cd NotifikasiRealtimeuntuk masuk ke folder yang baru saja agan/sista buat. Berikut penampakan nya setelah semua Command berhasil di eksekusi.
Membuat Notifikasi Realtime Dengan PHP

Pada jendela Command Prompt yang masih aktif, ketikkan command berikut untuk mendownload repository pusher.

Quote:

composer require pusher/pusher-php-server

Command tersebut akan mendownload repo pusher kedalam folder vendoryang sudah diset sebelumnya.
Membuat Notifikasi Realtime Dengan PHP

Pada gambar diatas, folder vendor akan otomatis dibuat didalam folder yang telah agan/sista set, pada tahap ini semua persiapan sudah siap. Dan selanjutnya barulah mulai pengcodingan untuk kirim masukan dan tampilkan keluaran notifikasi melalui program php.

Step 2
Setelah Step 1 selesai, selanjutnya kita akan membuat script php yang akan mensubmit sekaligus menerima notifikasi secara realtime Gan/Sista. Kita akan membuat 2 file saja yaitu index.php dan proses.php.

File index akan menampilkan form beserta table dibawah nya yang akan mensubmit data inputan dengan AJAX ke file proses.
File proses sendiri akan mengirimkan data yang diterima dari index ke Pusher.
Lalu Pusher akan mengirimkan response nya ke file index dan index akan menampilkan response dari Pusher ke dalam table.

Quote:

NOTE
Sebelum membuat ke 2 file tersebut, Agan/Sista harus mencatat terlebih dahulu app_id, app_key, app_secretdan app_cluster yang sudah diberikan oleh Pusher.

Beberapa item tersebut bisa didapat dari:
1. Click Channel Apps
2. Click Notifikasi Realtime
3. Pada Jendela Overview lah beberapa items tersebut ditampilkan. Penampakannya sebagai berikut:
Membuat Notifikasi Realtime Dengan PHP

Spoiler for Script file index.php:

<html>
<head>
<title>Notifikasi Realtime</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
[removed][removed]
[removed][removed]
[removed][removed]
[removed][removed]

<style type="text/css">
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(loading.gif) center no-repeat #fff;
}
</style>

[removed]

$(document).ready(function () {

$(".se-pre-con").fadeOut("slow");

//Pusher.logToConsole = true;
var app_id = 'app_id dari items pusher'
var cluster = 'app_cluster dari items pusher'
var pusher = new Pusher(app_id, {
cluster: app_cluster, encrypted: true
});

var channel = pusher.subscribe('user');

channel.bind('notifications', function(data) {
$("#notification_table").find('tbody').append($('<tr>').append($('<td>'+ data.message +'</td>' + '<td>'+ data.waktu +'</td>').append()));
});

$("#submit").click(function(){
$.ajax({
type: "POST",
url: "proses.php",
data: $('#form_submit').serialize(),
beforeSend: function () { },
success: function (response) { },
error: function(request, status, error) {
alert(err.Message);
}
});
});

});

[removed]

<body>
<div class="se-pre-con"></div>
<br />
<div class="container">

<div class="card">

<div class="card-body">
<h2>Notifikasi Realtime</h2>
<p>Notifikasi Realtime menggunakan Pusher.</p>

<br />

<form method="post" id="form_submit">
<div class="form-group row">
<label for="dna" class="col-sm-2 col-form-label">Message</label>
<div class="col-sm-10">
<textarea id="message" class="form-control" name="message" placeholder="Message" required></textarea>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<input type="button" id="submit" value="SEND PUSH NOTIFICATION" class="btn btn-info" />
</div>
</div>
</form>

<br />

<table id="notification_table" class="table table-hover table-bordered">

<thead>
<tr>
<th width="25%">Message</th>
<th width="25%">Waktu</th>
</tr>
</thead>
<tbody></tbody>
</thead>

</table>

</div>
</div>

<br />

</div>
<br />
</body>
</html>

Spoiler for Script file index.php:

<?php

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

require('vendor/autoload.php');

$app_id = 'app_id dari items pusher';
$app_key = 'app_key dari items pusher';
$app_secret = 'app_secret dari items pusher';
$app_cluster = 'app_cluster dari items pusher';

$pusher = new Pusher\Pusher( $app_key, $app_secret, $app_id, array('cluster' => $app_cluster, 'encrypted' => true, 'useTLS' => true));
$waktu = date("F j, Y, g:i:s a");

$message = $_POST['message'];

$data['message'] = $message;
$data['waktu'] = $waktu;

$pusher->trigger('user', 'notifications', $data);
}

?>

Kedua file tersebut di simpan ke folder NotifikasiRealtimeyang telah dibuat melalui command prompt.
Pada file index.php ada script yang di hapus saat ane edit post ini, jadi script lengkap nya bisa didownload DISINI

Sekian untuk pembuatan Aplikasi Notifikasi Realtime Dengan PHP.
Semoga bermanfaat.

emoticon-Menang

Terimakasih.

Diubah oleh itganteng 12-10-2018 11:01

nona212 memberi reputasi

Kutip

Balasan

Komentar yang asik ya

Urutan

Terbaru

Terlama

Komentar yang asik ya

Komunitas Pilihan