This tutorial will show you how to create a simple pop-up notification using AJAX/JQuery. In this tutorial, I’ve set up the information to appear at the bottom, but you can change its position depending on your preference. Also, I’ve used bootstrap to improve the visuals slightly.
Note: Scripts and CSS used in this tutorial are hosted.
Table of Contents
Creating a Database
A first and most important step in to create our database:
1. Open phpMyAdmin.
2. Click databases, create a database and name it as “notif”.
3. After creating a database, click the SQL and paste the below code. See image below for detailed instruction.
CREATE TABLE `user` ( `userid` INT(11) NOT NULL AUTO_INCREMENT, `firstname` VARCHAR(10) NOT NULL, `lastname` VARCHAR(10) NOT NULL, `seen_status` INT(1) NOT NULL, PRIMARY KEY(`userid`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Creating a Connection
Next step is to create a database connection and save it as “conn.php”. This file will serve as our bridge between our form and our database. To create the file, open your HTML code editor and paste the code below after the tag.
<?php
//MySQLi Procedural
$conn = mysqli_connect("localhost","root","","notif");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>Creating a Main Page
Next step is to create our main page that contains our add form and the place that the notification will appear. We name this as “index.php”.
<?php
include('conn.php');
?>
<!DOCTYPE html>
<html lang = "en">
<head>
<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>
<title>PHP Pop-up Notification using AJAX Bootstrap</title>
<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>
<div style="height:30px;"></div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 well">
<div class="row">
<div class="col-lg-12">
<center><h2 class="text-primary">PHP Pop-up Notification using AJAX Bootstrap</h2></center>
<hr>
<div>
<form class="form-inline" method="POST" id="add_form">
<div class="form-group">
<label>Firstname:</label>
<input type="text" name="firstname" id="firstname" class="form-control">
</div>
<div class="form-group">
<label>Lastname:</label>
<input type="text" name="lastname" id="lastname" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="addnew" id="addnew" class="btn btn-primary" value="Add">
</div>
</form>
</div>
</div>
</div><br>
</div>
<div class = "col-md-3">
</div>
</div>
<div id="alert_popover">
<div class="wrapper">
<div class="content">
</div>
</div>
</div>
</body>
<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);
}
})
}
$('#add_form').on('submit', function(event){
event.preventDefault();
if($('#firstname').val() != '' && $('#lastname').val() != ''){
var form_data = $(this).serialize();
$.ajax({
url:"addnew.php",
method:"POST",
data:form_data,
success:function(data){
$('#add_form')[0].reset();
}
})
}
else{
alert("Please input data first");
}
});
});
</script>
</html>Creating a Fetch Code
Next, we create our fetch code that will fetch data from our database and return to us via notification. We name this as “fetch.php”.
<?php
//fetch.php;
include('conn.php');
$query=mysqli_query($conn,"select * from `user` where seen_status='0' order by userid desc");
$output = '';
while($row=mysqli_fetch_array($query)){
$output .= '
<div class="alert alert_default">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p>Firstname: <strong>'.$row['firstname'].'</strong><br>
Lastname: <strong>'.$row['lastname'].'</strong></p>
</div>
';
}
mysqli_query($conn,"update `user` set seen_status='1' where seen_status='0'");
echo $output;
?>Creating a Add Code
Lastly, we create our add code that will add data into our database. We name this as “addnew.php”.
<?php
//insert.php
if(isset($_POST["firstname"]))
{
include('conn.php');
$firstname = mysqli_real_escape_string($conn, $_POST['firstname']);
$lastname = mysqli_real_escape_string($conn, $_POST['lastname']);
mysqli_query($conn,"insert into `user` (firstname, lastname) values ('$firstname', '$lastname')");
}
?>Happy Coding!
Download Here
How can I make pop up notifications that do not need filling a form to take place?
Like a pop up every time someone purchases a course, the pop up should be displayed to every other user/visitor of the website
is it possible to have a form where you enter a date and time and a message and then when its reached pops up the message.
Yes