This is one more post on Facebook style notification and in this post we have make simple Facebook type Footer Pop up notification by using PHP script with Ajax Jquery method and Bootstrap framework. In one of the previous post we have already made discussion on How to make Facebook style header notification by using PHP code with Bootstrap Ajax and JQuery. In that post we have display notification alert on page header pop up number and after click on notification menu we can seen list of notification. But in this post if any event has made done then we will pop up notification on left bottom side of page and after some time of interval notification alert message will be disappear from web page.
This is the second part of Facebook style notification alert by using PHP language with Ajax Jquery and Bootstrap. This type of feature we have seen in Facebook, if you have familiar with Facebook, then in that if you have share any link or image and some one has like or share your post or image then you have seen pop up notification with message on web page left bottom side and after some time of interval that alert notification has been remove from webpage. So here some one has like or share you photo or link then one event has been occur and that event notification you have seen on your web page.
So this type of Notification system we have going to develop in PHP by using Ajax JQuery method with Bootstrap framework. We have use simple Form data insert data event has use to implement this pop up alert notification system. So when we have enter data into database then at that time we will received alert pop up notification on web page. We have use Ajax with Jquery for fetch data from database. And for display Alert notification we have use Bootstrap alert class. So By using Bootstrap Ajax JQuery with PHP we have make simple Facebook style pop up notification feature. I hope you will enjoy this post and learn something new from this post. So, Keep visiting our website for web tutorial.
Source Code
index.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Facebook Style Popup 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>
<style>
#alert_popover
{
display:block;
position:absolute;
bottom:50px;
left:50px;
}
.wrapper {
display: table-cell;
vertical-align: bottom;
height: auto;
width:200px;
}
.alert_default
{
color: #333333;
background-color: #f2f2f2;
border-color: #cccccc;
}
</style>
</head>
<body>
<br /><br />
<div class="container">
<br />
<h2 align="center">Facebook Style Popup Notification using PHP Ajax Bootstrap</h2>
<br />
<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 id="alert_popover">
<div class="wrapper">
<div class="content">
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
setInterval(function(){
load_last_notification();
}, 5000);
function load_last_notification()
{
$.ajax({
url:"fetch.php",
method:"POST",
success:function(data)
{
$('.content').html(data);
}
})
}
$('#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();
}
})
}
else
{
alert("Both Fields are Required");
}
});
});
</script>
fetch.php
<?php
//fetch.php;
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM comments WHERE comment_status = 0 ORDER BY comment_id DESC";
$result = mysqli_query($connect, $query);
$output = '';
while($row = mysqli_fetch_array($result))
{
$output .= '
<div class="alert alert_default">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p><strong>'.$row["comment_subject"].'</strong>
<small><em>'.$row["comment_text"].'</em></small>
</p>
</div>
';
}
$update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status = 0";
mysqli_query($connect, $update_query);
echo $output;
?>
insert.php
<?php
//insert.php
if(isset($_POST["subject"]))
{
$connect = mysqli_connect("localhost", "root", "", "testing");
$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);
}
?>
Database
--
-- 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;
Muito bom, parabéns!!! =D
ReplyDeleteawesome
ReplyDeletei really like your tutorial, please could you use a human voice for the youtube tutorials
ReplyDeleteThank you very much for this tutorial. It's really educational.
ReplyDeleteI had a little worry. For example, if several users attack the same table. Normally each of them should be able to see the notification. But in the case of your tutorial if only one of its users clicks on the notification, the others will not see it because the value of the attribute '' 'comment_status' is 1. What can say that it was already read.
How to manage this problem so that everyone can see its notifications.
thank you in advance
How can i implement this using codeigniter
ReplyDeletegood
ReplyDeleteThanks a lot!
ReplyDeleteشسیشسی
ReplyDeletepopup notifation can not cancle it retern back
ReplyDeletehow we can use this link in google
ReplyDeletemapuki dw post my comment
ReplyDeletenot working please help.
ReplyDeletegreat tutor u r. Sir!!
ReplyDeletewaiting for your reply.
ReplyDeletei am using plsdesk hosting panel.
ReplyDelete?
ReplyDeleteplease change all your cdn from maxcdn.bootstrap to stackpath.bootstrap since stackpath is the currently active domain
ReplyDelete