Real Time Notification System in PHP and AJAX

This real time notification system keeps track of every action you and your friends do on these social channels. Notifications form a big part of the real time engagement feature of these platforms. Even you are not online, you could still receive these notifications. A PHP notification system could be could be easily built using a mix of vanilla PHP and JavaScript. This system provides real time notification in a PHP powered application.

real time php notification system

In this article I will show you how to create a simple notification system by using PHP and AJAX. I will also use jQuery and Bootstrap. For the purpose of this article, I’m assuming that you have already signed up on Cloudways which provides Best PHP Hosting and have launched a server with the PHP application.

Let’s get started.

Import Tables in Database

Cloudways has custom-built MySQL manager and you get a pre-built database with every PHP application. Just move to the Application Access area and launch the database manager.

Now run the following query in the SQL box.

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";


CREATE TABLE `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 `comments`

 ADD PRIMARY KEY (`comment_id`);


ALTER TABLE `comments`

 MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;

This query will create a table comments and its four columns ‘comment_id’ ‘comment_subject’ ‘comment_text’ and comment_status. All user comments will be entered in this database and then the notifications will be generated.

Create Navigation And Form To Display Realtime Notifications

I will use the basic navigation and Bootstrap forms by declaring the CDN. Simple copy and paste the code in the index.php file.

<!DOCTYPE html>

<html>

<head>

 <title>Notification using PHP Ajax Bootstrap</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="#">PHP Notification Tutorial</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-bell" style="font-size:18px;"></span></a>

      <ul class="dropdown-menu"></ul>

     </li>

    </ul>

   </div>

  </nav>

  <br />

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

   <div class="form-group">

    <label>Enter Subject</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>

Insert New Records in Database

Create a connect.php file to create database connection. Add the following code in it:

<?php

$con = mysqli_connect("localhost", "root", "", "notif");

?>

Next, I will create insert.php and simply insert new comments in MySQL through the following code:

<?php

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

{

include("connect.php");

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

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

$query = "INSERT INTO comments(comment_subject, comment_text)VALUES ('$subject', '$comment')";

mysqli_query($con, $query);

}

?>

This code snippet is pretty much self explanatory. It gets the form values and then push them to the database tables.

Fetch Records and Send to AJAX Call

For this action, create a new file named fetch.php. This will check whether the AJAX view is updated with new comments. If not, it will select unique comments and show them in the notification window. Once the user has seen these notifications, the status would be updated to reflect that these notifications have been reviewed. Here, I will send the $data array to the AJAX call for updating the view.

Paste the following code in the fetch.php file:

<?php

include('connect.php');

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

// $con = mysqli_connect("localhost", "root", "", "notif");

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

{
   $update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status=0";
   mysqli_query($con, $update_query);
}

$query = "SELECT * FROM comments ORDER BY comment_id DESC LIMIT 5";
$result = mysqli_query($con, $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>

  ';
}
}

else{
    $output .= '<li><a href="#" class="text-bold text-italic">No Noti Found</a></li>';
}

$status_query = "SELECT * FROM comments WHERE comment_status=0";
$result_query = mysqli_query($con, $status_query);
$count = mysqli_num_rows($result_query);

$data = array(
   'notification' => $output,
   'unseen_notification'  => $count
);

echo json_encode($data);
}
?>

Submit Form and Update HTML with AJAX

Now comes the interesting part!

In the previous step, I sent the data array, which will caught by the AJAX response for updating the inner HTML on the navigation bar.

Now, I will create a submit method in jQuery which will validate the input data, and select the latest notification(s), which I have inserted in insert.php. In the next onclick function, I will update the count which will be shown in the Bootstrap’s red pill. Here is the complete code that you need to paste in the index.php.

<script>

$(document).ready(function(){

// updating the view with notifications using ajax

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();

// submit form and get new records

$('#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");
 }

});

// load new notifications

$(document).on('click', '.dropdown-toggle', function(){

 $('.count').html('');

 load_unseen_notification('yes');

});

setInterval(function(){

 load_unseen_notification();;

}, 5000);

});

</script>

Testing The PHP Notification System

Now it’s time to test the notification system. You will see a window like this:

Enter the subject and the comment, and then submit the form. You will get the new notification (see the following image) when you click the dropdown.

Final Words

Notifications offers a quick view for all the actions performed on the website. You can easily click them in the dropdown list and optionally carry out further actions. This article presents a basic real time notification system in PHP that could be further extended to fit your requirements.

If you find any query and questions, feel free to comment below.