Creating Real Time Notification System in PHP and AJAX

by Shahroze Nawaz  July 4, 2017

Ever wonder how social media websites pops up a notification for every action that happen on your timeline?

This real time notification system keeps track of every action you and your friends do on these social channels. Notifications form a big part of the real time engagement feature of these platforms. Even you are not online, you could still receive these notifications. A PHP notification system could be could be easily built using a mix of vanilla PHP and JavaScript. This system provides real time notification in a PHP powered application.

real time php notification system

In this article I will show you how to create a simple notification system by using PHP and AJAX. I will also use jQuery and Bootstrap. For the purpose of this article, I’m assuming that you have already signed up on Cloudways and have launched a server with the PHP application.

Let’s get started.

Import Tables in Database

Cloudways has custom-built MySQL manager and you get a pre-built database with every PHP application. Just move to the Application Access area and launch the database manager.

Now run the following query in the SQL box.

This query will create a table comments and its four columns ‘comment_id’ ‘comment_subject’ ‘comment_text’ and comment_status. All user comments will be entered in this database and then the notifications will be generated.

You might be interested in: How To Connect MySQL Database With PHP Websites

Create Navigation And Form To Display Realtime Notifications

I will use the basic navigation and Bootstrap forms by declaring the CDN. Simple copy and paste the code in the index.php file.

Insert New Records in Database

Create a connect.php file to create database connection. Add the following code in it:

Next, I will create insert.php and simply insert new comments in MySQL through the following code:

This code snippet is pretty much self explanatory. It gets the form values and then push them to the database tables.

Fetch Records and Send to AJAX Call

For this action, create a new file named fetch.php. This will check whether the AJAX view is updated with new comments. If not, it will select unique comments and show them in the notification window. Once the user has seen these notifications, the status would be updated to reflect that these notifications have been reviewed. Here, I will send the $data array to the AJAX call for updating the view.

You might be interested in: Build Live Search Box Using PHP, MySQL And AJAX

Paste the following code in the fetch.php file:

Submit Form and Update HTML with AJAX

Now comes the interesting part!

In the previous step, I sent the data array, which will caught by the AJAX response for updating the inner HTML on the navigation bar.

Now, I will create a submit method in jQuery which will validate the input data, and select the latest notification(s), which I have inserted in insert.php. In the next onclick function, I will update the count which will be shown in the Bootstrap’s red pill. Here is the complete code that you need to paste in the index.php.

Testing The PHP Notification System

Now it’s time to test the notification system. You will see a window like this:

Enter the subject and the comment, and then submit the form. You will get the new notification (see the following image) when you click the dropdown.

Final Words

Notifications offers a quick view for all the actions performed on the website. You can easily click them in the dropdown list and optionally carry out further actions. This article presents a basic real time notification system in PHP that could be further extended to fit your requirements.

If you find any query and questions, feel free to comment below.

Create PHP websites without the worry of server management.

Deploy your PHP app on optimized PHP hosting servers.

About Shahroze Nawaz

Shahroze is a PHP Community Manager at Cloudways - A Managed PHP Hosting Platform. He’s always in search of new frameworks and methods to implement them. Besides his coding life, he loves movies and playing soccer with friends. You can email him at shahroze.nawaz@cloudways.com

Stay Connected:

You Might Also Like...