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,

avatar akbarimawandwicahya_google
@akbarimawandwicahya_google

11 Kontribusi 2 Poin

Dipost 3 tahun yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban