Facebook Like Header Notification in PHP

In Facebook like social networking websites we can see notification alert in page header. In this tutorial we are going to add such header notification to notify user about latest data. This will be helpful to keep the user updated by notifying what is new.

In this example, we have a notification icon in page header. We show the notification count to represent how many new items are there as unread. On clicking the notification icon, we list the latest items.

View Demo

facebook-like-header-notification-in-php

Posting New Data to Notify

This code shows a HTML form to post new message to be notified to the user. After submitting this new message it will be stored in database with read status 0. The messages with read status 0 are unread messages. The sum of the unread messages are calculated and displayed near to the notification icon in header.

<?php
	$conn = new mysqli("localhost","root","","blog_samples");
	$count=0;
	if(!empty($_POST['add'])) {
		$subject = mysqli_real_escape_string($conn,$_POST["subject"]);
		$comment = mysqli_real_escape_string($conn,$_POST["comment"]);
		$sql = "INSERT INTO comments (subject,comment) VALUES('" . $subject . "','" . $comment . "')";
		mysqli_query($conn, $sql);
	}
	$sql2="SELECT * FROM comments WHERE status = 0";
	$result=mysqli_query($conn, $sql2);
	$count=mysqli_num_rows($result);
?>
<form name="frmNotification" id="frmNotification" action="" method="post" >
	<div id="form-header" class="form-row">Add New Message</div>
	<div class="form-row">
		<div class="form-label">Subject:</div><div class="error" id="subject"></div>
		<div class="form-element">
			<input type="text"  name="subject" id="subject" required>
			
		</div>
	</div>
	<div class="form-row">
		<div class="form-label">Comment:</div><div class="error" id="comment"></div>
		<div class="form-element">
			<textarea rows="4" cols="30" name="comment" id="comment"></textarea>
		</div>
	</div>
	<div class="form-row">
		<div class="form-element">
			<input type="submit" name="add" id="btn-send" value="Submit">
		</div>
	</div>
</form>

Show Notification Data using jQuery

We call a jQuery script on the click event of the notification icon. In this jQuery script we call PHP via AJAX to get latest messages from database.

On cliking notification icon, it remove the notification count from header and list all the latest data. The script is,

<script type="text/javascript">
	function myFunction() {
		$.ajax({
			url: "view_notification.php",
			type: "POST",
			processData:false,
			success: function(data){
				$("#notification-count").remove();					
				$("#notification-latest").show();$("#notification-latest").html(data);
			},
			error: function(){}           
		});
	 }
	 
	 $(document).ready(function() {
		$('body').click(function(e){
			if ( e.target.id != 'notification-icon'){
				$("#notification-latest").hide();
			}
		});
	});		 
</script>

View DemoDownload

This PHP code tutorial was published on November 22, 2016.

↑ Back to Top