How To Make Web Push Notifications in PHP, JQuery , AJAX And Mysql

Web Push Notifications not only useful for displaying the latest blog post to increase your website traffic, but you can apply them to information systems / web base CRUD applications. Since the smartphone era, browsers such as Chrome and Firefox has started massive changes against the product to make it more user-friendly and responsive. Firefox browser has equipped with push notification since version 44 and chrome on version 42.

How To Make Web Push Notifications In PHP, JQuery , AJAX And Mysql

The application of push notification script on a web page can be various, such as:

  • The notification to display the stock runs out.
  • Chat Notification If your system there is a chat feature.
  • A notification if there is a new mail.
  • Notification for stock movement.

And much more. I think the Web Push Notifications is a requirement but not required to be applied.

Keep in mind the Web Push Notifications are not always useful. Often users are annoyed with a notification that is useless and annoying their performance.

Okay, as an example we will create a web push notification where a user does a broadcast message to another user with many options. The criteria as follows:

  1. Notification may appear several times according to schedule
  2. The user can define the interval the next notification will come out.
  3. The system will check the notification every 30 seconds
  4. A notification will be closed after 8 seconds.

See my video footage of how the application works

Lets start the tutorial How to make web push notifications in PHP, JQuery , AJAX And Mysql

1. Create a new database with the name “notifikasi“.

Create Database Mysql Notifikasi For Web Push Notification Data

2. Create 2 table with name user and notif like the following image :

Create Tabel User Web Push Notification By

Create Tabel Notif Web Push Notification By

or please execute the following SQL code

3.Create a new project folder as “notification

4. Creates 8 PHP file PHP dan 1 js file like the following :

  • ajax.php : used to hold files to be executed by jquery ajax.
  • broadcast.php : used to create notification message.
  • dbconn.php : a class who used to create a MySQL connection with PDO
  • sql.php: a class who used to keep MySQL query syntax.
  • index.php : index or dashboard page.
  • isLogin.php : to checking if user is login or not.
  • login.php : login page
  • logout.php : logout code
  • mynotif.js : Javascript code who will execute the notification message

Create a login page

Copy the code below and save in login.php

Create logout script.

Copy the code below and save at logout.php

Create MySQL Connection With PDO

Copy the code below and save in dbconn.php file

Create class sql query syntax on the sql.php file

Copy the following code and save in sql.php

Create PHP function to check user login

Copy the following code and save it in a file isLogin.php

Creating a page for adding a list of notifications

Copy the following code and save the file broadcast.php

Explanation :

I will be a little bit of explaining some of the parameters used:

  • message : The content of the message.
  • broadcast time : time the message was sent.
  • loop : the number of messages to be sent
  • loop every : The time lag sending the first message to the next message
  • for : To whom this message is addressed

Create Index or Dashboard Page

Copy the following code and save it in a file index.php

Explanation :

Notification script will be executed every 30 seconds.

Create a file that will be called by the Jquery ajax

Copy the following code and save it in a file ajax.php

Explanation: After 30 seconds, the javascript function will take the list of notification message who never been share and will accommodate the data into an array variable

Create a javascript file that will execute the notification

Copy the following code and save it in a file mynotif.js

Explanation: The main part of this article, contained in the above code.

When the page is ready, will execute the javascript checknotif() function  and it is always executed after 30 seconds.

Javascript will check whether the browser supports notification feature

The browser will submit a request to web push notification. Users will get a request like the following picture:

Web Push Notification Alert

If the access receipt, then javascript will execute ajax to check for notification of each user.

To show notification with the code above.

Lets check from the browser http://localhost/notification.

Finish, Any question ? Download link below to get full source

Url :

Okay, thus article about how to make web push notification in PHP, JQuery, Ajax and MySQL, hope usefull 🙂

update : zip file error, re-upload!!

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.


 Add your comment
  1. ( ! ) Fatal error: Uncaught exception ‘PDOException’ with message ‘SQLSTATE[28000] [1045] Access denied for user ‘root’@’localhost’ (using password: YES)’ in C:\wamp1\www\notification\dbconn.php on line 11
    ( ! ) PDOException: SQLSTATE[28000] [1045] Access denied for user ‘root’@’localhost’ (using password: YES) in C:\wamp1\www\notification\dbconn.php on line 11
    Call Stack
    # Time Memory Function Location
    1 0.0018 679744 {main}( ) ..\login.php:0
    2 0.0054 746104 sql->__construct( ) ..\login.php:9
    3 0.0054 746104 dbconn->initDBO( ) ..\sql.php:5
    4 0.0055 747352 PDO->__construct( ) ..\dbconn.php:11
    give a solution

  2. kodingan login salah!mohon cek ulang..

  3. include(isLogin.php): failed to open stream: No such file or directory in C:\xampp\htdocs\notif_wa\index.php on line 1
    include(): Failed opening ‘isLogin.php’ for inclusion (include_path=’C:\xampp\php\PEAR’) in C:\xampp\htdocs\notif_wa\index.php on line 1

  4. Notice: Undefined offset: 2 in C:\xampp\htdocs\notif_wa\login.php on line 58

    ketika mau login, tidak dapat masuk yg dimaksud $check[2] ==1 nah si angka 2 nya undefined thx before

    • ooo itu karena ketika memanggil getlogin terdapat error dan dibagian catch errornya tidak saya sertakan $stat[2] karena asumsi saya program tidak ada error karena ini hanya contoh singkat untuk notifikasi. Okay, silahkan coba solusi berikut
      1. silahkan anda buka dbconn.php dan isikan nama database, username dan password mysql anda dengan benar.
      2. Kemudian Buka sql.php, cari function getLogin() dan di bagian catch tambahkan kode $stat[2]=0 seperti kode berikut:
      public function getLogin($user,$pass){
      $db = $this->dblocal;
      $stmt = $db->prepare("select * from user where username = :user and password = :pass");
      $stmt->bindParam("user", $user);
      $stmt->bindParam("pass", $pass);
      $stat[0] = true;
      $stat[1] = $stmt->fetchAll(PDO::FETCH_ASSOC);
      $stat[2] = $stmt->rowCount();
      return $stat;
      catch(PDOException $ex)
      $stat[0] = false;
      $stat[1] = $ex->getMessage();
      $stat[2] = 0;
      return $stat;
      3. Dan di bagian login.php di bagian script php nya diubah seperti ini:
      if(isset($_POST[‘username’]) and isset($_POST[‘pass’]))
      $check = $sql->getLogin($_POST[‘username’],$_POST[‘pass’]);
      if($check[2] == 1)
      $_SESSION[‘username’] = $_POST[‘username’];
      header(‘Location: index.php’);

      echo ‘* error : ‘.$check[1];

      Semoga membantu, jika masih ada error silahkan hubungi saya kembali. terimakasih

  5. bolehkah saya minta extract dari program notifikasi tersebut??(berbentuk .zip)karna saya sudah geleng geleng kepala hehe.. makasih atas fastrespon ya sukses slalu web nya

  6. makasih mas, terbantu sekali 😉

  7. mas, cara set waktu show upnya notifikasinya gmana ya?? saya coba g pakai setinterval kok masih hilang sendiri

  8. my code is working but not notification

  9. Hi, good morning, first of all thanks for the tutorial, it’s great.
    I have a question for you, is it possible that the notifications do not close or disappear until we click on them ?, I comment because my notifications are closed, but I would like that they will only be closed if I click on them.
    thank you very much

  10. Hi, thanks is a great tutorial.
    Maybe i lost something but i’m tryng in localhost…
    It works properly on my desktop browsers (firefox and chrome)
    but no notification on my smarpthone (chrome browser).

    On my smartphone i’m connected to the index page and logged in.

    What i’m wrong?


  11. Hello, thanks for the great tutorial
    I have a doubt. For the user to receive the notification does he need to have the system open?

  12. The notification only comes if I access the home page. How to send the notification automatically?

  13. Can I customize the style of the notification?

  14. I access the page from another browser, I accept the notifications, when I fire them they do not go to that browser. Only goes to who is registered in the bank. Can you send it to someone who is not registered?

    • In the notification example I created, I sent a notification to the selected user. If you want to send a notification to the unregister user, you must change the mysql query to retrieve the data without involving the user to share to all unregister users.

  15. Working Great .. thanks…. can this work with cookies without login system?

  16. Sigit Prasetya Nugroho sir your video is great its very helpful on my thesis. im trying to change mysql query to notify the unregistered user but i have no idea both in php and mysql query im a newbie.

    • Sory, i dont understand what you want, but if you need query to all unregister user you can use the following query

      Hope useful 🙂

  17. hello sir. its possible if the admin send the notification to all the user without selecting the username.? because I want to send notification to all the user, please help me if you have an idea and how to change the code? thanks!!

  18. working perfectly on localhost but not on my server ?

  19. sir can you help me again this script on how to notify automatically every week and every month?
    I know you are the one that can solved my thesis thank you

    • every week :

      You can do mysql search using the day parameter, an example every monday

      Every month :

      You can do mysql search using the date parameter, an example every 5th in a month

      Hope useful 🙂

  20. Hi,

    Working great, but I want to use it on smartphone (iOS and Androide) but it’s doesn’t work.
    That’s possible to use it on smartphone ?

  21. Hello sir,

    Working great with one notification, but I want to send multiple notifications but it’s doesn’t work.
    Please guide me what should I do?

  22. what if i want to send notification to all the users in the database?

    Also, how is it possible that not just the login user but any visitor who Allows notification will receive notifications even if he is not registered?

  23. Very good tutorial !

  24. Fatal error: Uncaught exception ‘PDOException’ with message ‘SQLSTATE[HY000] [1045] Access denied for user ‘root’@’localhost’ (using password: YES)’ in C:\xampp\htdocs\notification\dbconn.php:7 Stack trace: #0 C:\xampp\htdocs\notification\dbconn.php(7): PDO->__construct(‘mysql:host=loca…’, ‘root’, ‘123456’, Array) #1 C:\xampp\htdocs\notification\sql.php(1): dbconn->initDBO() #2 C:\xampp\htdocs\notification\login.php(9): sql->__construct() #3 {main} thrown in C:\xampp\htdocs\notification\dbconn.php on line 7

  25. thanks sir
    i have tried but still its not getting can u help me more…………
    Access denied for user ‘root’@’localhost’
    Change your database settings with yours How to change in proper way, i am might going wrong

  26. hi sir
    great tutorial thanks a lot .
    sir i wants to store the notification in user side whenever user wants to see what are those notification . please help me sir how to do it

  27. please help me sir i am waiting for your reply

  28. Excelent code. Please, send the code to working mobile devices…..

    This code not work in android e Ios devices

  29. No error… but still notification not working

  30. Works amazingly now… thank you sir… 🙂

  31. Hi Sir! works perfectly.. Thank you very much!

  32. hello. sir.
    I didn’t get any bug. But I can’t get the notification.
    Please help.Thanks

  33. hello sir..
    without login Notification alert?

  34. Is it possible to detail how to do this without a login necessary? Ive tried playing with the code but cant seem to get it to work without the login.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.