Yii2+Pusher, Push Notifications

Langsung aja nih, kali ini saya coba bikin Notification di Web menggunakan Yii dan pusher, apa itu pusher, baca aja sendiri :D https://pusher.com/ , untuk menggunakan pusher ini anda harus mendaftar terlebih dahulu kemudian anda akan mendapatkan id,key, secret, yang nantinya digunakan sebagai token ke pusher,(lihat contoh di situsnya)  naa untuk menambahkan ke yii kita menggunakan composer installnya ambil di github di sini https://github.com/pusher/pusher-http-php , naa baru lanjut ke yii, saya gunakan yii advanced,

 

  • backend – PushController.php

use Pusher;

...

...

...

public function actionPush()
{

$model = new DynamicModel(['msg']);
$model->addRule(['msg'], 'string', ['max' => 128]);

if ($model->load(Yii::$app->request->post())){
$msg=$model->msg;
$app_id = 'YOUR_APP_ID';
$app_key = 'YOUR_APP_KEY';
$app_secret = 'YOUR_APP_SECRET';

$pusher = new Pusher( $app_key, $app_secret, $app_id );
$pusher->trigger('test_channel', 'my_event', ['message' => $msg] );
return $this->redirect(['push','model'=>$model]);

}else{

return $this->render('push',[
'model'=>$model,
]);
}
}

  • View/Push.php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;

$this->title = 'Notifikasi';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="site-login">
<h1><?= Html::encode($this->title) ?></h1>
<div class="row">
<div class="col-lg-5">
<?php $form = ActiveForm::begin(['id' => 'push-form']); ?>

<?= $form->field($model, 'msg')->label('Pesan')->textInput(['autofocus' => true]) ?>

<div class="form-group">
<?= Html::submitButton('Push', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
</div>

<?php ActiveForm::end(); ?>
</div>
</div>
</div>

selanjutnya untuk di frontend

  • view – main.php

<script src="https://js.pusher.com/3.1/pusher.min.js"></script>
<script>

// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;

var pusher = new Pusher('ce901ef053e354fcd965', {
encrypted: true
});

var channel = pusher.subscribe('test_channel');
channel.bind('my_event', function(data) {
// alert(data.message);
var message = data.message;
toastr.info(message);
});
</script>

  • appasset.php

public $css = [
'css/site.css',
"//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"
];
public $js = [
'//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js'
];

naa udah gitu aja master, kemudian jalankan bagian backend (atas) jalankan frontend (bawah) di window tab baru,

1

kemudian isi dan tekan push

2

hasilnya begitu lah master😀 , moga mengerti dan paham, sama sama belajar kita😀

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: