Membuat Notifikasi Header Seperti Facebook Menggunakan PHP Ajax Bootstrap Pada aplikasi berbasis web

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
June 01, 2018

Selamat sore sobat blogger kali ini kami akan share cara Membuat Notification Header Seperti Facebook Menggunakan PHP Ajax Bootstrap Pada aplikasi berbasis web. Artike ini berasal dari website lain nanti pada postingan terakhir kami akan menuliskan sumbernya.



Dalam posting ini kami telah menampilkan pemberitahuan pada header halaman. Pertama-tama pemberitahuan berarti apa aktivitas yang dilakukan di sistem kami dan memberitahukan aktivitas itu kepada pengguna. Jadi pengguna dapat diperbarui mengenai aktivitas apa yang telah terjadi dalam sistem.

Jadi Pemberitahuan Pemberitahuan PHP ketika catatan baru dimasukkan ke dalam sistem dan kemudian setelah pengguna akan diberitahu oleh jumlah pemberitahuan telah muncul di header halaman. Jadi ketika user telah melihat notifikasi alert maka count sudah di hapus dari halaman header yang artinya user telah melihat notifikasi itu.

Jadi ini adalah fitur yang sangat membantu dalam aplikasi web apa pun dan pengguna akan diperbarui dengan data baru. Di sini kami telah membuat sistem Notifikasi PHP sederhana seperti Facebook.

Sekarang mari kita mulai membahas tentang Bagaimana membuat Facebook seperti Pemberitahuan dropdown dengan menggunakan PHP Ajax JQuery dengan Bootstrap Framework.

Pertama yang harus anda lakukan adalah membuat database pada mysql anda dengan nama database"testing".

 --
-- Table structure for table `comments`
--

CREATE TABLE IF NOT EXISTS `comments` (
  `comment_id` int(11) NOT NULL,
  `comment_subject` varchar(250) NOT NULL,
  `comment_text` text NOT NULL,
  `comment_status` int(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `comments`
--
ALTER TABLE `comments`
  ADD PRIMARY KEY (`comment_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `comments`
--
ALTER TABLE `comments`
  MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT; 

Tabel komentar ini dengan empat kolom seperti comment_id, comment_subject, comment_text dan comment_status. Di kolom comment_status kami memiliki tipe data integer dan jadi ketika catatan baru dimasukkan kemudian di kolom ini akan memasukkan nol, di sini nol berarti itu belum dibaca dan ketika kita akan melihat pemberitahuan maka ini akan diperbarui ke satu, itu berarti catatan ini telah dibaca oleh pengguna.

 <!DOCTYPE html>
<html>
<head>
  <title>NOTIFIKASI</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <br /><br />
  <div class="container">
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
     <div class="navbar-header">
      <a class="navbar-brand" href="#">NOTIFICATION</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-envelope" style="font-size:18px;"></span></a>
       <ul class="dropdown-menu"></ul>
     </li>
   </ul>
 </div>
</nav>
<br />
<h2 align="center">NOTIFIKASI SEDERHANA</h2>
<br />
<form method="post" id="comment_form">
  <div class="form-group">
   <label>ENTER SUBECT</label>
   <input type="text" name="subject" id="subject" class="form-control">
 </div>
 <div class="form-group">
   <label>ENTER COMMENT</label>
   <textarea name="comment" id="comment" class="form-control" rows="5"></textarea>
 </div>
 <div class="form-group">
   <input type="submit" name="post" id="post" class="btn btn-info" value="Post" />
 </div>
</form>

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

<script>
  $(document).ready(function(){
   
   function load_unseen_notification(view = '')
   {
    $.ajax({
     url:"fetch.php",
     method:"POST",
     data:{view:view},
     dataType:"json",
     success:function(data)
     {
      $('.dropdown-menu').html(data.notification);
      if(data.unseen_notification > 0)
      {
       $('.count').html(data.unseen_notification);
     }
   }
 });
  }
  
  load_unseen_notification();
  
  $('#comment_form').on('submit', function(event){
    event.preventDefault();
    if($('#subject').val() != '' && $('#comment').val() != '')
    {
     var form_data = $(this).serialize();
     $.ajax({
      url:"insert.php",
      method:"POST",
      data:form_data,
      success:function(data)
      {
       $('#comment_form')[0].reset();
       load_unseen_notification();
     }
   });
   }
   else
   {
     alert("Both Fields are Required");
   }
 });
  
  $(document).on('click', '.dropdown-toggle', function(){
    $('.count').html('');
    load_unseen_notification('yes');
  });
  
  setInterval(function(){ 
    load_unseen_notification();; 
  }, 5000);
  
});
</script>
 
Ini adalah halaman indeks kami dan di halaman ini kami telah menggunakan Jquery dan Bootstrap Framework. Pada halaman ini kami telah membuat satu Header dengan menggunakan Bootstrap CSS Library.

Untuk tampilan Pemberitahuan dalam format dropdown, kami telah menggunakan kelas dropdown Bootstrap. Dengan menggunakan kelas ini kita akan menampilkan notifikasi yang belum dibaca dalam format dropdown.

Di bawah header untuk menampilkan gambar pemberitahuan yang belum dibaca yang telah kami definisikan menjadi tag span dengan jumlah kelas. Dalam tag ini kami menampilkan angka pemberitahuan yang belum dibaca. Dalam posting ini untuk mendapatkan Pemberitahuan, kami telah membuat satu formulir sederhana untuk membuat pemberitahuan. Jadi ketika formulir ini telah dikirim maka pemberitahuan baru telah dibuat dan ditampilkan di header.

Untuk pemberitahuan beban pada pemuatan halaman, jadi kami telah membuat fungsi jquery load_unseen_notification (), ketika halaman telah dimuat, fungsi ini akan dipanggil dan akan menampilkan pemberitahuan pada header halaman. Dalam fungsi ini kita menambahkan satu argumen tampilan dengan nilai kosong. Jadi, Ketika fungsi ini dipanggil tanpa argumen, maka fungsi ini hanya akan mengambil pemberitahuan dari tabel Mysql tetapi ketika fungsi ini dipanggil dengan nilai argumen tampilan apa pun, fungsi ini akan mengambil pemberitahuan dari tabel dan akan memperbarui semua kolom pemberitahuan yang belum dibaca seperti comment_status ke nol hingga satu. Itu berarti semua pemberitahuan telah dibaca oleh pengguna.

Kemudian setelah kita menulis kode jquery untuk mengirimkan data formulir ke tabel myql. Ketika formulir telah dikirimkan maka pemberitahuan baru telah dibuat sehingga untuk menampilkan pemberitahuan yang kita sebut fungsi load_unseen_notification () di bawah permintaan Ajax.

Sekarang ketika kita telah mengklik ikon notifikasi maka jumlah label pemberitahuan telah dihapus dari header. Jadi kami telah menulis kode jquery pada kelas dropdown-toggle pada acara klik. Di sini ketika pengguna mengklik untuk melihat pemberitahuan, jadi di sini kita memiliki kelas hitungan pertama yang jelas di mana kita telah menampilkan nomor notifikasi dengan menggunakan metode html dengan nilai kosong. Dan untuk mengubah status pemberitahuan dari yang belum dibaca menjadi dibaca, kami telah memanggil fungsi load_unseen_notification () dengan tampilan argumen sama dengan ya, itu berarti fungsi ini tidak hanya akan mengambil data notifikasi tetapi juga akan memperbarui nilai kolom comment_status ke nol ke satu .

Untuk mendapatkan pemberitahuan otomatis di halaman web tanpa halaman yang menyegarkan, kami ingin memanggil fungsi load_unseen_notification () pada interval waktu reguler. Jadi kita telah menggunakan metode setInterval () dengan lima ribu milidetik. Metode ini disebut fungsi load_unseen_notification () pada setiap lima detik. Dan itu akan menampilkan notifikasi di halaman web.

 <?php
//fetch.php;
if(isset($_POST["view"]))
{
 include("connect.php");
 if($_POST["view"] != '')
 {
  $update_query = "UPDATE comments SET comment_status=1 WHERE comment_status=0";
  mysqli_query($connect, $update_query);
 }
 $query = "SELECT * FROM comments ORDER BY comment_id DESC LIMIT 5";
 $result = mysqli_query($connect, $query);
 $output = '';
 
 if(mysqli_num_rows($result) > 0)
 {
  while($row = mysqli_fetch_array($result))
  {
   $output .= '
   <li>
    <a href="#">
     <strong>'.$row["comment_subject"].'</strong><br />
     <small><em>'.$row["comment_text"].'</em></small>
    </a>
   </li>
   <li class="divider"></li>
   ';
  }
 }
 else
 {
  $output .= '<li><a href="#" class="text-bold text-italic">No Notification Found</a></li>';
 }
 
 $query_1 = "SELECT * FROM comments WHERE comment_status=0";
 $result_1 = mysqli_query($connect, $query_1);
 $count = mysqli_num_rows($result_1);
 $data = array(
  'notification'   => $output,
  'unseen_notification' => $count
 );
 echo json_encode($data);
}
?>
 
Halaman ini telah menerima permintaan dari fungsi load_unseen_notification (). Jika halaman ini menerima fungsi dengan nilai argumen maka itu juga akan memperbarui nilai kolom column_status nilai dari 0 hingga 1. Di sini nol berarti pemberitahuan yang belum dibaca dan 1 berarti pemberitahuan terbaca. Setelah fungsi ini telah mengambil lima data pemberitahuan terakhir dari tabel dan kirim ke fungsi. Dalam fungsi ini juga akan menghitung total pemberitahuan yang belum dibaca juga.

 <?php
//insert.php
if(isset($_POST["subject"]))
{
 include("connect.php");
 $subject = mysqli_real_escape_string($connect, $_POST["subject"]);
 $comment = mysqli_real_escape_string($connect, $_POST["comment"]);
 $query = "
 INSERT INTO comments(comment_subject, comment_text)
 VALUES ('$subject', '$comment')
 ";
 mysqli_query($connect, $query);
}
?> 

Halaman ini telah dipanggil ketika data formulir telah dikirim, maka ini berfungsi pertama membersihkan data bidang formulir dan ini akan dimasukkan ke dalam tabel komentar.

 <?php 
//connect.php;
$connect = mysqli_connect("localhost", "root", "", "testing");
?> 

Halaman ini digunakan untuk membuat koneksi database dan kami telah menggunakan halaman ini di semua halaman dengan menggunakan pernyataan include () .

Sekian share kali ini semog apa yang kami share bisa bermanfaat bagi kalian semua, Jika anda masih bingun silahkan kunjungi langsung link sumber yang telah kami taro dibawah.

 https://www.webslesson.info/2017/02/facebook-style-notifications-in-php.html 


Artikel Menarik Lainnya


SUBSCRIBE TO OUR NEWSLETTER