PHP Pop-up Notification using AJAX Bootstrap

May 31, 2020

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">&times;</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!

PHP Pop-up Notification using AJAX Bootstrap

Creating a Database

Creating a Connection

Creating a Main Page

Creating a Fetch Code

Creating a Add Code

Anime and Cartoon Photo Gallery from image directory in PHP

Creating a Sign Up and Log In Page

Create a Simple Search Box in PHP MySQL

How to Install Laravel – A PHP Framework

Leave a Reply Cancel reply