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.
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:
- Notification may appear several times according to schedule
- The user can define the interval the next notification will come out.
- The system will check the notification every 30 seconds
- 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“.
2. Create 2 table with name user and notif like the following image :
or please execute the following SQL code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | DROP TABLE IF EXISTS 'notif'; CREATE TABLE 'notif' ( 'id' int(11) NOT NULL AUTO_INCREMENT, 'notif_msg' text, 'notif_time' datetime DEFAULT NULL, 'notif_repeat' int(11) DEFAULT '1' COMMENT 'schedule in minute', 'notif_loop' int(11) DEFAULT '1', 'publish_date' timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, 'username' varchar(13) DEFAULT NULL, PRIMARY KEY ('id') ) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1; /*Data for the table 'notif' */ insert into 'notif'('id','notif_msg','notif_time','notif_repeat','notif_loop','publish_date','username') values (1,'hello, this is sample web push notification, you will redirect to seegatesite.com after click this notify','2017-02-08 08:48:54',1,0,'2017-02-08 08:47:54','ronaldo'); insert into 'notif'('id','notif_msg','notif_time','notif_repeat','notif_loop','publish_date','username') values (2,'hello, this is sample web push notification, you will redirect to seegatesite.com after click this notify','2017-02-08 09:17:11',1,2,'2017-02-08 09:16:11','donald'); /*Table structure for table 'user' */ DROP TABLE IF EXISTS 'user'; CREATE TABLE 'user' ( 'username' varchar(20) DEFAULT NULL, 'password' varchar(20) DEFAULT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1; /*Data for the table 'user' */ insert into 'user'('username','password') values ('admin','123'); insert into 'user'('username','password') values ('donald','123'); insert into 'user'('username','password') values ('ronaldo','123'); insert into 'user'('username','password') values ('messi','123'); |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | <?php SESSION_START(); if(isset($_SESSION['username'])) { header('Location: index.php'); } include "dbconn.php"; include "sql.php"; $sql = new sql(); $user = $sql->listUser(); ?> <!DOCTYPE html> <html> <head> <title>Login</title> </head> <body> <h2>Login Application</h2> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?> "> <table> <tr> <td>Username</td> <td><input type="text" name="username"></td> </tr> <tr> <td>Password</td> <td><input type="password" name="pass"></td> </tr> <tr> <td colspan=2> <hr> </td> </tr> <tr> <td><button type="submit" name="submit">Login</button></td> </tr> </table> </form> <?php if(isset($_POST['submit'])){ if(isset($_POST['username']) and isset($_POST['pass'])) { /*check login*/ $check = $sql->getLogin($_POST['username'],$_POST['pass']); if($check[2] == 1) { $_SESSION['username'] = $_POST['username']; header('Location: index.php'); }else { echo '* username or password not valid'; } } } ?> <h2>How To Make Web Push Notifications in PHP, JQuery , AJAX And Mysql</h2> <h3>http://seegatesite.com</h3> <h4>admin user : admin , password : 123</h4> <h5>user : ronaldo , password : 123</h5> <h5>user : donald , password : 123</h5> </body> </html> |
Create logout script.
Copy the code below and save at logout.php
1 | <?php SESSION_START(); unset($_SESSION['username']); header('Location: login.php'); ?> |
Create MySQL Connection With PDO
Copy the code below and save in dbconn.php file
1 2 3 4 5 6 | <?php class dbconn { public $dblocal; public function __construct() { } public function initDBO() { $this->dblocal = new PDO("mysql:host=localhost;dbname=notifikasi;charset=latin1","root","123456",array(PDO::ATTR_PERSISTENT => true)); $this->dblocal->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); } } ?> |
Create class sql query syntax on the sql.php file
Copy the following code and save in sql.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | <?php class sql extends dbconn { public function __construct() { $this->initDBO(); } public function saveNotif($msg,$time,$loop,$loop_every,$user){ $db = $this->dblocal; try { $stmt = $db->prepare("insert into notif(notif_msg, notif_time, notif_repeat, notif_loop,username) values(:msg , :bctime , :repeat , :loop,:user) "); $stmt->bindParam("msg", $msg); $stmt->bindParam("bctime", $time); $stmt->bindParam("loop", $loop); $stmt->bindParam("repeat", $loop_every); $stmt->bindParam("user", $user); $stmt->execute(); $stat[0] = true; $stat[1] = 'sukses'; return $stat; } catch(PDOException $ex) { $stat[0] = false; $stat[1] = $ex->getMessage(); return $stat; } } public function updateNotif($id,$nextime) { $db = $this->dblocal; try { $stmt = $db->prepare("update notif set notif_time = :nextime, publish_date=CURRENT_TIMESTAMP(), notif_loop = notif_loop-1 where id=:id "); $stmt->bindParam("id", $id); $stmt->bindParam("nextime", $nextime); $stmt->execute(); $stat[0] = true; $stat[1] = 'sukses'; return $stat; } catch(PDOException $ex) { $stat[0] = false; $stat[1] = $ex->getMessage(); return $stat; } } public function listNotifUser($user){ $db = $this->dblocal; try { $stmt = $db->prepare("SELECT * FROM notif WHERE username= :user AND notif_loop > 0 AND notif_time <= CURRENT_TIMESTAMP()"); $stmt->bindParam("user", $user); $stmt->execute(); $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(); return $stat; } } public function getLogin($user,$pass){ $db = $this->dblocal; try { $stmt = $db->prepare("select * from user where username = :user and password = :pass"); $stmt->bindParam("user", $user); $stmt->bindParam("pass", $pass); $stmt->execute(); $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(); return $stat; } } public function listUser(){ $db = $this->dblocal; try { $stmt = $db->prepare("select * from user"); $stmt->execute(); $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(); return $stat; } } public function listNotif(){ $db = $this->dblocal; try { $stmt = $db->prepare("select * from notif"); $stmt->execute(); $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(); return $stat; } } } |
Create PHP function to check user login
Copy the following code and save it in a file isLogin.php
1 | <?php if(!isset($_SESSION['username'])) { header('Location: login.php'); } ?> |
Creating a page for adding a list of notifications
Copy the following code and save the file broadcast.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 | <?php SESSION_START(); include "isLogin.php"; include "dbconn.php"; include "sql.php"; $sql = new sql(); $user = $sql->listUser(); ?> <!DOCTYPE html> <html> <head> <title>Broadcast Menu</title> </head> <body> <h2>Simple Broadcast Message Menu</h2> <a href="index.php">Home</a> | <a href="logout.php">Logout</a> <hr> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?> "> <table> <tr> <td>Message</td> <td><textarea name="msg" cols="50" rows="4"></textarea></td> </tr> <tr> <td>Broadcast time</td> <td><select name="time"><option>Now</option></select> </td> </tr> <tr> <td>Loop</td> <td><select name="loops"> <?php for ($i=1; $i<=5 ; $i++) { ?> <option value="<?php echo $i ?>"><?php echo $i ?></option> <?php } ?> </select> time</td> </tr> <tr> <td>Loop Every</td> <td><select name="loop_every"> <?php for ($i=1; $i<=60 ; $i++) { ?> <option value="<?php echo $i ?>"><?php echo $i ?></option> <?php } ?> </select> Minute</td> </tr> <tr> <td>For</td> <td><select name="user"> <?php foreach ($user[1] as $key) { ?> <option value="<?php echo $key['username'] ?>"><?php echo $key['username'] ?></option> <?php } ?> </select></td> </tr> <tr> <td colspan=2> <hr> </td> </tr> <tr> <td><button name="submit" type="submit">Broadcast </button></td> </tr> </table> </form> <?php if (isset($_POST['submit'])) { if(isset($_POST['msg']) and isset($_POST['time']) and isset($_POST['loops']) and isset($_POST['loop_every']) and isset($_POST['user'])) { $msg = $_POST['msg']; $time = date('Y-m-d H:i:s'); $loop= $_POST['loops']; $loop_every=$_POST['loop_every']; $user = $_POST['user']; /*save Notification*/ $save = $sql->saveNotif($msg,$time,$loop,$loop_every,$user); if($save[0] == true) { echo '* save new notification success'; }else{ echo 'error save data : '.$save[1]; } }else{ echo '* completed the parameter above'; } } ?> <table border=1> <thead> <tr> <td>No</td> <td>Next Schedule</td> <td>Message</td> <td>Remains</td> <td>User</td> </tr> </thead> <tbody> <?php $a =1; $list = $sql->listNotif(); foreach ($list[1] as $key) { ?> <tr> <td><?php echo $a ?></td> <td><?php echo $key['notif_time'] ?></td> <td><?php echo $key['notif_msg'] ?></td> <td><?php echo $key['notif_loop']; ?></td> <td><?php echo $key['username'] ?></td> </tr> <?php $a++; } ?> </tbody> </table> </body> </html> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <?php SESSION_START(); include "isLogin.php"; include "dbconn.php"; include "sql.php"; $sql = new sql(); $user = $sql->listUser(); ?> <!DOCTYPE html> <html> <head> <title>test web browser notifikasi</title> </head> <body> <h2>Dashboard </h2> <?php if($_SESSION['username'] == 'admin') { ?> <a href="broadcast.php">Notification Menu</a> | <?php } ?> <a href="logout.php">Logout</a> <hr> <h4>Welcome back <strong><?php echo $_SESSION['username'] ?></strong></h4> This is example web push notification from <a href="https://seegatesite.com">seegatesite.com</a>, wait your notify please :) <!-- Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Notifikasi Script --> <script src="mynotif.js"></script> </body> </html> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?php SESSION_START(); include "isLogin.php"; include "dbconn.php"; include "sql.php"; $sql = new sql(); $array=array(); $rows=array(); $listnotif = $sql->listNotifUser($_SESSION['username']); foreach ($listnotif[1] as $key) { $data['title'] = 'Notification Title'; $data['msg'] = $key['notif_msg']; $data['icon'] = 'http://localhost/notification/avatar2.png'; $data['url'] = 'https://seegatesite.com'; $rows[] = $data; // update notification database $nextime = date('Y-m-d H:i:s',strtotime(date('Y-m-d H:i:s'))+($key['notif_repeat']*60)); $sql->updateNotif($key['id'],$nextime); } $array['notif'] = $rows; $array['count'] = $listnotif[2]; $array['result'] = $listnotif[0]; echo json_encode($array); ?> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | $(document).ready(function() { checknotif(); setInterval(function(){ checknotif(); }, 10000); }); function checknotif() { if (!Notification) { $('body').append(' <h4 style="color:red">*Browser does not support Web Notification</h4> '); return; } if (Notification.permission !== "granted") Notification.requestPermission(); else { $.ajax( { url : "ajax.php", type: "POST", success: function(data, textStatus, jqXHR) { var data = jQuery.parseJSON(data); if(data.result == true){ var data_notif = data.notif; for (var i = data_notif.length - 1; i >= 0; i--) { var theurl = data_notif[i]['url']; var notifikasi = new Notification(data_notif[i]['title'], { icon: data_notif[i]['icon'], body: data_notif[i]['msg'], }); notifikasi.onclick = function () { window.open(theurl); notifikasi.close(); }; setTimeout(function(){ notifikasi.close(); }, 5000); }; }else{ } }, error: function(jqXHR, textStatus, errorThrown) { } }); } }; |
Explanation: The main part of this article, contained in the above code.
1 2 3 4 | $(document).ready(function() { checknotif(); setInterval(function(){ checknotif(); }, 30000); }) |
When the page is ready, will execute the javascript checknotif() function and it is always executed after 30 seconds.
1 2 3 4 5 6 7 | if (!Notification) { $('body').append(' <h4 style="color:red">*Browser does not support Web Notification</h4> '); return; } |
Javascript will check whether the browser supports notification feature
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | if (Notification.permission !== "granted") Notification.requestPermission(); else { $.ajax( { url : "ajax.php", type: "POST", success: function(data, textStatus, jqXHR) { var data = jQuery.parseJSON(data); if(data.result == true){ var data_notif = data.notif; for (var i = data_notif.length - 1; i >= 0; i--) { var theurl = data_notif[i]['url']; var notifikasi = new Notification(data_notif[i]['title'], { icon: data_notif[i]['icon'], body: data_notif[i]['msg'], }); notifikasi.onclick = function () { window.open(theurl); notifikasi.close(); }; setTimeout(function(){ notifikasi.close(); }, 8000); }; }else{ } }, error: function(jqXHR, textStatus, errorThrown) { } }); } |
The browser will submit a request to web push notification. Users will get a request like the following picture:
If the access receipt, then javascript will execute ajax to check for notification of each user.
1 2 3 4 5 6 7 8 9 10 11 12 | var theurl = data_notif[i]['url']; var notifikasi = new Notification(data_notif[i]['title'], { icon: data_notif[i]['icon'], body: data_notif[i]['msg'], }); notifikasi.onclick = function () { window.open(theurl); notifikasi.close(); }; setTimeout(function(){ notifikasi.close(); }, 8000); |
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 : http://wp.me/a65Dpx-I9
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.
Latest posts by Sigit Prasetya Nugroho (see all)
- Easily Display The Date And Time Using Moment.js - September 14, 2017
- How To Use Select2 Remote AJAX With Example in JQuery, PHP And MySQL - September 11, 2017
- Simple Tutorial Get Geolocation IP With PHP - September 6, 2017
( ! ) 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
Change with your database username and password in dbconn.php
kodingan login salah!mohon cek ulang..
salah? saya coba baik2 saja gan. errornya apa ya?
terimakasih
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
Kalo error ini mungkin path anda ada yang salah.. 🙂
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:
[php]
public function getLogin($user,$pass){
$db = $this->dblocal;
try
{
$stmt = $db->prepare("select * from user where username = :user and password = :pass");
$stmt->bindParam("user", $user);
$stmt->bindParam("pass", $pass);
$stmt->execute();
$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;
}
}
[/php]
3. Dan di bagian login.php di bagian script php nya diubah seperti ini:
[php]
//……………..
if(isset($_POST[‘submit’])){
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’);
}else
{
echo ‘* error : ‘.$check[1];
}
}
}
[/php]
Semoga membantu, jika masih ada error silahkan hubungi saya kembali. terimakasih
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
sudah saya sediakan kok mas di bagian akhir artikel… https://seegatesite.com/notification-2/
makasih mas, terbantu sekali 😉
sama-sama 🙂
mas, cara set waktu show upnya notifikasinya gmana ya?? saya coba g pakai setinterval kok masih hilang sendiri
[php]
setTimeout(function(){
notifikasi.close();
},20000);
[/php]
dibagian javascript gan function checknotif, ubah 8000 menjadi 20000 (20 detik)
my code is working but not notification
check again your browser notification setting, this code work perfectly 🙂
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
you can remove the following script in the function checknotif
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?
Thanks
Sorry I have not found the solution yet. I’ll update if it works 🙂