Membuat Push Notification dengan ajax dan yii


Salam Coding semuannya!

pada kesempatan kali ini saya akan membagikan bagaimana membuat push notification pada website yii dengan menggunakan ajax.
push notification adalah pemberitahuan yang masuk secara instan. contohnya pemberitahuan pada facebook teman-teman, tanpa harus merefresh browser bila ada pemberitahuan baru akan muncul icon merah dipojok kanan.

pada kesempatan kali ini saya akan membagi cara bagaimana membuat push notification pada yii dan ajax.
pertama kita menerapkan metode setInterval pada program javascript kita.

setInterval(function(){

 ambilNotification();

}, 5000);

setInterval() adalah suatu method dari javascript yang melakukan pekerjaan berulang-ulang sesuai dengan interval yang di tentukan, pada metode yang saya gunakan saya menerapkan menggunakan milisecond atau 5000 yang berarti setiap 5 detik akan menjalankan function ambilNotification();

function ambilNotification(view = ''){
             $.ajax({
              url: "<?php echo Yii::app()->createUrl('admin/notif') ?>",
              method:"POST",
              data:{view:view},
              dataType:"json",
              success:function(data){
              if (data.outputnya == null) {
                $('.notif').html("<li><a class='text-bold text-italic'>Tidak Ada Pesan</a></li>");
              }else{
                   $('.notif').html(data.outputnya);
              }

               if(data.totalpesan > 0)
               {
                $('.count-notif').html(data.totalpesan);

               }

              }

             });

}

pada function ambilNotification() diatas saya menerapkan ajax untuk mengambil data notification dari program php di url admin/notif yang berarti kita harus membuat fuction pada controller AdminController.php seperti code dibawah ini.

public function actionnotif(){
		$array=array();
		$rows=array();
                
                //$pesan adalah variabel yang mengambil data dari tabel pesan adakah pesan yang belum dibaca untuk user saat ini?
		$pesan = Pesan::model()->findAll(array(
			'condition'=>'id_user = '.Yii::app()->user->id_user.' and status = "belum dibaca" '
			));
                
                 //$pesan adalah variabel yang mengambil data dari tabel pesan adakah pesan yang belum dibaca untuk user saat ini?
		$totalpesan = Pesan::model()->findAll(array(
			'select'=>'count(id) as id',
			'condition'=>'id_user = '.Yii::app()->user->id_user.' and status = "belum dibaca" '
			));
               
                 //kondisi untuk cek ada variabel pesan ada atau tidak datanya
		if (isset($pesan)) {
                 //bila data pesan ada maka dilakukan perulangan untuk mendapatkan data pesan
			foreach ($pesan as $value) {
				$pengirim = User::model()->findByPk($value->id_pengirim);
				$isi_path = Yii::app()->baseurl .'/images/index.png';
			        $url = Yii::app()->createUrl('profile/read',array('slug'=>Yii::app()->user->slug,'id'=>$value->id));
				
                       $outputnya .= '<li><div class="pull-left">
                         <img width="50px" height="50px" src="'.$isi_path.'"  class="img-circle" alt="User Image">
                         </div><a href="'.$url.'"><h4>
                          '.$pengirim->username.' - '.$value->subject.'
                          </h4>
                          <p>'.$value->pesan.'</p> <small><i class="fa fa-clock-o"></i> '.ModelGlobal::waktu_lalu($value->tgl).'</small></li>';
			}
			$totalpesannya = $totalpesan[0]->id;

			}else{
                            //bila data pesan tidak ada maka maka hanya mengirim variabel yang berisi data kosong
				$outputnya = "<li><a class='text-bold text-italic'>Tidak Ada Pesan</a></li>";
				$totalpesannya = $totalpesan[0]->id;
			}
		       
                          //terakhir kita kembalikan data ke program ajax dengan menerapkan json encode
			echo json_encode(array('outputnya'=>$outputnya,'totalpesan'=>$totalpesannya));

	}

untuk penjelasan function notif sudah saya saya jelaskan di komentar yang ditandai dengan //. bila teman-teman merasa kesulitan membaca koding saya bisa ditanyakan dikolom komentar.
yang terakhir perlu diingat saya menerapkan notif ini pada dropdwon menu pada header bootstrap. seperti gambar dibawah ini

saya menerapkan kode pada tag class “menu notif” seperti koding dibawah ini

  <ul class="dropdown-menu">
              <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu notif">



                </ul>
              </li>

sehingga pada success ajax saya mengkondisakan data itu ada atau tidak dengan koding seperti di bawah ini :

  if (data.outputnya == null) {
                $('.notif').html("<li><a class='text-bold text-italic'>Tidak Ada Pesan</a></li>");
              }else{
                   $('.notif').html(data.outputnya);
              }

               if(data.totalpesan > 0)
               {
                $('.count-notif').html(data.totalpesan);

               }

              }

maka outputnya akan mendapatkan push notification layaknya facebook atau lainnya.

demian tutoroial push notification dari saya. terima kasih telah membaca.
salam coding!