Membuat Notifikasi Facebook Menggunakan PHP AJAX

Membuat Notifikasi Facebook Menggunakan PHP AJAX

Pada kesempatan kali ini saya akan Membuat Notifikasi Facebook Menggunakan PHP AJAX. Dimana animasi notifikasi akan dibuat mirip seperti di tampilan facebook.

Langkah pertama untuk Membuat Notifikasi Facebook Menggunakan PHP AJAX adalah membuat design databasenya terlebuh dahulu atau teman-teman bisa salin script di bawah ini.

CREATE TABLE IF NOT EXISTS `shelli_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;

--

ALTER TABLE `shelli_comments`

  ADD PRIMARY KEY (`comment_id`);

--

ALTER TABLE `shelli_comments`

  MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT;

Jika sudah berikutnya kita akan membuat tampilan struktur html seperti berikut. Simpan dengan nama index.php

<!DOCTYPE html>

<html>

 <head>

  <title>Membuat Notifikasi Facebook Menggunakan PHP Ajax</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-light bg-danger">

    <div class="container-fluid">

     <div class="navbar-header">

      <a class="navbar-brand" href="#">Membuat Notifikasi Facebook Menggunakan PHP Ajax</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">Isi Komentar Anda</h2>

   <br />

   <form method="post" id="comment_form">

    <div class="form-group">

     <label>Nama</label>

     <input type="text" name="subject" id="subject" class="form-control">

    </div>

    <div class="form-group">

     <label>Komentar</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>

Dan selanjutnya masih dalam satu file, saya akan membuat script ajax untuk dapat membuat proses simpan dan menampilkan data notifikasi.

<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>

Dan dilanjutkan dengan membuat file baru dengan nama insert.php untuk perintah simpan ke database menggunakan PHP.

<?php

$connect = mysqli_connect("localhost", "dumet", "school", "test");

if(isset($_POST["subject"])){

 $subject = mysqli_real_escape_string($connect, $_POST["subject"]);

 $comment = mysqli_real_escape_string($connect, $_POST["comment"]);

 $query = "

      INSERT INTO shelli_comments(comment_subject, comment_text)

      VALUES ('$subject', '$comment')

 ";

 mysqli_query($connect, $query);

}

?>

Langkah terakhir buatlah file baru dengan nama fetch.php untuk mengambil data yang akan ditampilkan.

<?php

$connect = mysqli_connect("localhost", "dumet", "school", "test");

if(isset($_POST["view"])){

  if($_POST["view"] != ''){

    $update_query = "UPDATE shelli_comments SET comment_status=1 WHERE comment_status=0";

    mysqli_query($connect, $update_query);

   }

  $query = "SELECT * FROM shelli_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 shelli_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);

}

?>

Dan jika ditampilkan di halaman browser maka akan seperti pada gambar di bawah ini.

Membuat Notifikasi Facebook Menggunakan PHP AJAX

Dan jika dibuka notifikasinya maka akan tampil seperti ini.

Membuat Notifikasi Facebook Menggunakan PHP AJAX

Demikian artikel tentang Membuat Notifikasi Facebook Menggunakan PHP AJAX.

25 Juni 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat