Postingan lainnya
penggunaan pusher untuk real time 2 notifikasi di navbar
haloo para mastah mau bertanya tentang penggunaan pusher, disini saya mempunyai 2 notifikasi di navbar seperti di gambar dibawah
notif.jpg
nah untuk notif yg ber icon bell udah berhasil ke trigger real time tetapi untuk yg icon komentar masih belum berhasil
ini view untuk menampung pushernya saya taruh di controller
public function notifPesan(){
//pesan
$getTotPesan= $this->App_model->getTotPesan();
$pesan = $this->App_model->pesan();
//notif pesan nng navbar//
$html = '<a class="notif nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-danger navbar-badge">'.$getTotPesan.'</span>
</a>';
$html .= '<div class="notif dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-item dropdown-header">'.$getTotPesan.' Pesan</span>
<div class="dropdown-divider"></div>';
foreach ($pesan as $ps) {
$html .= '<a href="#" class="dropdown-item">
<div class="media">
<i style="font-size: 30px;" class="fas fa-user mr-3"></i>
<div class="media-body">
<span class="float-right text-muted text-sm">'.$ps->tanggal.'</span>
<h3 style="color: blue;" class="dropdown-item-title">
'.$ps->nama.'
</h3>
<p class="text-sm">'.$ps->pesan.'</p>
</div>
</div>
</a>';
}
$html .= '<div class="dropdown-divider"></div>
<a href="'. site_url('pesan') .'" class="dropdown-item dropdown-footer">Lihat Semua Pesan</a>';
$html .= '</div>';
//end notif pesan//
echo $html;
}
public function notifKomentar(){
//komentar
$getTotKomentar = $this->App_model->getTotKomentar();
$komentar= $this->App_model->komen();
//notif komentar navbar//
$html = '<a class="notifKomen nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comment"></i>
<span class="badge badge-warning navbar-badge"> '.$getTotKomentar.' </span>
</a>
<div class="notifkomen dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-item dropdown-header"> '.$getTotKomentar.' Komentar</span>';
foreach ($komentar as $km) {
$html .= '<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<div class="media">
<img src=" '. ('../image/avatar/') . $km->avatar .' " alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
'.$km->nama.'
</h3>
<p class="text-sm"> '.$km->komentar.'</p>
<p class="text-sm text-muted"> <i class="far fa-clock mr-1"></i> '.$km->waktu .' WIB</p>
</div>
</div>
</a>';
}
$html .= '<div class="dropdown-divider"></div>
<a href="'. site_url('komentar') .'" class="dropdown-item dropdown-footer">Lihat Semua komentar</a>
</div>';
//end notif komentar//
echo $html;
}
ini view yg ada di navbar
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown notif">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-danger navbar-badge"><?= $getTotPesan ?></span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-item dropdown-header"><?= $getTotPesan ?> Pesan</span>
<div class="dropdown-divider"></div>
<?php foreach ($pesan as $ps) { ?>
<a href="#" id="ayo" data-id="<?= $ps->id_pesan ?>" data-toggle="modal" class="dropdown-item">
<div class="media">
<i style="font-size: 30px;" class="fas fa-user mr-3"></i>
<div class="media-body">
<span class="float-right text-muted text-sm"><?= $ps->tanggal ?></span>
<h3 style="color: blue;" class="dropdown-item-title">
<?= $ps->nama ?>
</h3>
<p class="text-sm"><?= $ps->pesan ?></p>
</div>
</div>
</a>
<?php } ?>
<div class="dropdown-divider"></div>
<a href="<?= site_url('pesan') ?>" class="dropdown-item dropdown-footer">Lihat Semua Pesan</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comment"></i>
<span class="badge badge-warning navbar-badge"><?= $getTotKomentar ?></span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-item dropdown-header"><?= $getTotKomentar ?> Komentar</span>
<?php foreach ($komentar as $km) { ?>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<div class="media">
<img src="<?= base_url() . '../image/avatar/' . $km->avatar ?>" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
<?= $km->nama ?>
</h3>
<p class="text-sm"><?= $km->komentar ?></p>
<p class="text-sm text-muted"> <i class="far fa-clock mr-1"></i><?= $km->waktu ?> WIB</p>
</div>
</div>
</a>
<?php } ?>
<div class="dropdown-divider"></div>
<a href="<?= site_url('komentar') ?>" class="dropdown-item dropdown-footer">Lihat Semua komentar</a>
</div>
</li>
dan ini script untuk yg ada di view, memakai script dibawah ini berhasil cuman ketika mau nambah untuk notifikasi yg komentar bagaimana?
<script>
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('80b0ba92724a5cd4e02b', {
cluster: 'ap1'
});
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
$.ajax({
method : "POST",
url : "<?= base_url('Dashboard/notifPesan') ?>",
success : function(response){
alert(response);
$('.notif').html(response);
}
});
});
</script>
saya mencoba menggunakan document ready untuk ke 2 notifikasi diatas malah tidak berhasil mas, ini script yg menggunakan document ready
<script>
$(document).ready(function(){
Pusher.logToConsole = true;
var pusher = new Pusher('80b0ba92724a5cd4e02b', {
cluster: 'ap1'
});
notifPesan();
notifKomen();
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
});
});
function notifPesan() {
ajax({
method : "POST",
url : "<?= base_url('Dashboard/notifPesan') ?>",
success : function(response){
alert(response);
$('.notif').html(response);
}
});
}
function notifKomen() {
ajax({
method : "POST",
url : "<?= base_url('Dashboard/notifkomentar') ?>",
success : function(response){
$('.notifKomen').html(response);
}
});
}
</script>
mungkin ada yg bisa bantu untuk masalah diatas,
Belum ada Jawaban. Jadi yang pertama Jawaban
Login untuk ikut Jawaban