PHP tutorial - Notification


Notification

As a manager of your website, you might want to get notification about any change to the website caused by visitors. For example, for a web site that allows visitors to post comments, to get the notification of the new posts and then to reply immediately, the notification feature should be implemented. In the previous page, you learnt to add comment form to a web page. In this tutorial, you learn to implement the notification feature in PHP. It is notified when the visitors post new comments. Typically, the notification is updated without reloading the page. So, AJAX plays the main role to accomplish this task. In the code below, the setInterval function of JavaScript is used to execute AJAX code by calling the getCom() function in every one minute. As the getCom() function is called, the request will be sent to the server. As the request is sent to the server, the getComment.php file at the server is executed. The server replies with the number of comments posted and all data in the tblcomments table. The tblcomments stores all comments posted by the vistors on the web site.

adminpage.php page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Notification in PHP</title>

<style>
#img{
position: absolute;
top: 10px;
left: 73px;
color: #ff0000;

}
#num{
position: absolute;
top: 2px;
left: 80px;
color: #ff0000;

}

#com{
width: 50%;
display: none;
position: absolute;
top: 35px;
z-index: 10;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color:#fff;
border-radius: 3px 3px 3px 3px;
height: 200px;
overflow-y: auto;


}

#arr{
width: 20px;
display: none;
position: absolute;
top: 20px;
left: 73px;
}

#divtop{

background-color: #333;
width: 400px;
}

</style>
<script>
//get the number of comments and comments from server
getcom();
//get the number of comments and comments from server in every minute
var seconds = 60;
setInterval(function(){getcom();}, seconds * 1000)
function getcom()
{

var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{

if(xmlhttp.responseText.length>1){
var parst=xmlhttp.responseText.split("**");
var num=document.getElementById("num");
num.innerHTML=parst[0];
var divcom=document.getElementById("com");
divcom.innerHTML=parst[1];


}
}
}
xmlhttp.open("GET","getcomment.php",true);
xmlhttp.send();
}

//this function is called to display the comments when the notification image is clicked
function showComment(){

var divcom=document.getElementById("com");
var divtop=document.getElementById("arr");
divcom.style.display='block';
divtop.style.display='block';
}

//this function is called to hide the comments when the user leaves the comment section
function hideComment(divcom,divtop){
var divcom=document.getElementById("com");
var divtop=document.getElementById("arr");
divcom.style.display='none';
divtop.style.display='none';
}

</script>
</head>

<body onclick="showCcmment();">
<div id="divtop">
<a href="#" onclick="showComment()">
<img src="noteimg.png" id="img"/>
<span id="num"></span>
</a>
</div>

<div id="arr">
<img src="arr.png"/>
</div>
<div id="com" onmouseleave="hideComment()">
</div>

</body>
</html>

getComment.php file

<?php
include("datamanip.php");
$dbhandler=new DataHandler("localhost","test","test","test");
echo $dbhandler->getNumRows()."**".$dbhandler->getNewComments("tblcomments");
$dbhandler->closeConnection();
?>

 

notification in php

You can download the package of the files to implement the notification feature in PHP from here.



Comments

ewr comment

 ewr

ret


2015-09-23




This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.