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

By Sigit Prasetya Nugroho ∙ February 8, 2017 ∙ Javascript, PHP ∙ 88 Comments

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

Table of Contents

1 Lets start the tutorial How to make web push notifications in PHP, JQuery , AJAX And Mysql
- 1.1 Okay, thus article about how to make web push notification in PHP, JQuery, Ajax and MySQL, hope usefull 🙂

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

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');

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

<?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>https://seegatesite.com</h3>


<h4>admin user : admin , password : 123</h4>


<h5>user : ronaldo , password : 123</h5>


<h5>user : donald , password : 123</h5>


</body>
</html>

<?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>

<table>

<tr>

<td>Username</td>

</tr>

<tr>

<td>Password</td>

</tr>

<tr>

<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

<?php SESSION_START(); unset($_SESSION['username']); header('Location: login.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

<?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);	
		
	}
}
?>

<?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

<?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;
		}
	}
}

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

<?php if(!isset($_SESSION['username'])) { header('Location: login.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

<?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>

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>

<table>

<tr>

<td>Message</td>

</tr>

<tr>

<td>Broadcast time</td>

</tr>

<tr>

<?php

for ($i=1; $i<=5 ; $i++) { ?>

<?php } ?>

</select> time</td>

</tr>

<tr>

<td>Loop Every</td>

<?php

for ($i=1; $i<=60 ; $i++) { ?>

<?php } ?>

</select> Minute</td>

</tr>

<tr>

<?php foreach ($user[1] as $key) { ?>

<?php } ?>

</select></td>

</tr>

<tr>

<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';

}

<thead>

<tr>

<td>Next Schedule</td>

<td>Message</td>

<td>Remains</td>

</tr>

</thead>

<tbody>

<?php $a =1; $list = $sql->listNotif();

foreach ($list[1] as $key) {

<tr>

</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

<?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>

<?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 :)

</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

<?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);
?>

<?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

$(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)
			{

			}
		});	

	}
};

$(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.

$(document).ready(function() {
	checknotif();
	setInterval(function(){ checknotif(); }, 30000);
})

$(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.

	if (!Notification) {
		$('body').append('
<h4 style="color:red">*Browser does not support Web Notification</h4>

');
		return;
	}

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

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 &gt;= 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)
			{

			}
		});	

	}

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.

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);

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!!

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Comments

biplob says
March 21, 2017 at 5:16 am
( ! ) 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
Reply
- Sigit Prasetya Nugroho says
  March 23, 2017 at 7:25 am
  Change with your database username and password in dbconn.php
  Reply
mrx says
March 29, 2017 at 7:42 am
kodingan login salah!mohon cek ulang..
Reply
- Sigit Prasetya Nugroho says
  March 29, 2017 at 7:52 am
  salah? saya coba baik2 saja gan. errornya apa ya?
  terimakasih
  Reply
mrx says
March 30, 2017 at 2:07 am
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
Reply
- Sigit Prasetya Nugroho says
  March 30, 2017 at 3:03 am
  Kalo error ini mungkin path anda ada yang salah.. 🙂
  Reply
mrx says
March 30, 2017 at 2:12 am
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
Reply
- Sigit Prasetya Nugroho says
  March 30, 2017 at 3:01 am
  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
  Reply
mrx says
March 30, 2017 at 4:47 am
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
Reply
- Sigit Prasetya Nugroho says
  March 30, 2017 at 9:33 am
  sudah saya sediakan kok mas di bagian akhir artikel… https://seegatesite.com/notification-2/
  Reply
joko Ma'ruf says
April 25, 2017 at 2:26 am
makasih mas, terbantu sekali 😉
Reply
- Sigit Prasetya Nugroho says
  April 25, 2017 at 7:09 am
  sama-sama 🙂
  Reply
joko Ma'ruf says
April 25, 2017 at 10:18 am
mas, cara set waktu show upnya notifikasinya gmana ya?? saya coba g pakai setinterval kok masih hilang sendiri
Reply
- Sigit Prasetya Nugroho says
  April 25, 2017 at 10:28 am
  [php]
  setTimeout(function(){
  notifikasi.close();
  },20000);
  [/php]
  dibagian javascript gan function checknotif, ubah 8000 menjadi 20000 (20 detik)
  Reply
prasanna says
May 25, 2017 at 12:24 pm
my code is working but not notification
Reply
- Sigit Prasetya Nugroho says
  May 25, 2017 at 12:59 pm
  check again your browser notification setting, this code work perfectly 🙂
  Reply
maria noemi says
July 31, 2017 at 7:32 pm
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
Reply
- Sigit Prasetya Nugroho says
  August 1, 2017 at 1:22 am
  you can remove the following script in the function checknotif
  setTimeout(function(){ notifikasi.close(); }, 5000);
  1
  2
  3
  setTimeout(function(){
  notifikasi.close();
  }, 5000);
  Reply
Andrea says
August 24, 2017 at 6:05 pm
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
Reply
- Sigit Prasetya Nugroho says
  August 25, 2017 at 2:35 am
  Sorry I have not found the solution yet. I’ll update if it works 🙂
  Reply
Marcelo says
November 13, 2017 at 4:42 pm
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?
Reply
- Sigit Prasetya Nugroho says
  November 14, 2017 at 1:25 am
  Dear marcelo,
  I dont understand what are you mean about system open?
  🙂
  Reply
  - Marcelo says
    November 15, 2017 at 2:14 am
    If it is necessary for the user to enter the system to receive the notification. For example, when I turn on my notebook, before I even open the browser I already receive notifications from some pages.
    Reply
    - Sigit Prasetya Nugroho says
      November 15, 2017 at 2:22 am
      Yes the user needs to open the browser to get notifications, because push notifications is the default feature from the browser
      CMIIW 🙂
      Reply
Maxmiler Freitas says
November 13, 2017 at 10:00 pm
The notification only comes if I access the home page. How to send the notification automatically?
Reply
- Sigit Prasetya Nugroho says
  November 14, 2017 at 1:24 am
  using setInterval javascript
  https://www.w3schools.com/jsref/met_win_setinterval.asp
  Reply
  - Maxmiler Freitas says
    November 14, 2017 at 11:29 am
    Thank you! I’ll work on it.
    Reply
Marcelo says
November 15, 2017 at 2:08 am
Can I customize the style of the notification?
Reply
- Sigit Prasetya Nugroho says
  November 15, 2017 at 2:20 am
  Sorry, I’ve never tried it to change the push notifications style 🙂
  Reply
Maxmiler Freitas says
November 15, 2017 at 1:12 pm
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?
Reply
- Sigit Prasetya Nugroho says
  November 16, 2017 at 1:31 am
  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.
  Reply
Ehsan Khan says
January 8, 2018 at 2:55 pm
Working Great .. thanks…. can this work with cookies without login system?
Reply
- Sigit Prasetya Nugroho says
  January 9, 2018 at 9:12 am
  It should be, but I’ve never tried it 🙂
  Reply
- baja says
  January 22, 2018 at 5:32 am
  sir how to change the mysql query to receive notification the all user?
  Reply
yokim says
January 22, 2018 at 5:27 am
help me sir
Reply
baja says
January 22, 2018 at 5:42 am
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.
Reply
- Sigit Prasetya Nugroho says
  January 23, 2018 at 1:38 am
  Sory, i dont understand what you want, but if you need query to all unregister user you can use the following query
  $stmt = $db->prepare("SELECT * FROM notif WHERE (username not in(select username from user)) AND notif_loop > 0 AND notif_time <= CURRENT_TIMESTAMP()");
  1
  2
  3
  4
  $stmt = $db->prepare("SELECT * FROM notif
  WHERE (username not in(select username from user))
  AND notif_loop > 0
  AND notif_time <= CURRENT_TIMESTAMP()");
  Hope useful 🙂
  Reply
  - Baja says
    January 23, 2018 at 2:06 am
    thanks sir,, I have another question sir. if I want to send a notification to all user what should I do? can u give me idea?
    Reply
Baja says
January 23, 2018 at 3:37 am
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!!
Reply
- Sigit Prasetya Nugroho says
  January 23, 2018 at 4:45 am
  logically as follows,
  change the code in broadcast.php
  add new option value in select box user –> value=”alluser”
  and then , add change the query listNotifUser with code below
  $stmt = $db->prepare("SELECT * FROM notif WHERE (username= :user or username= 'alluser') AND notif_loop > 0 AND notif_time <= CURRENT_TIMESTAMP()");
  1
  2
  3
  4
  $stmt = $db->prepare("SELECT * FROM notif
  WHERE (username= :user or username= 'alluser')
  AND notif_loop > 0
  AND notif_time <= CURRENT_TIMESTAMP()");
  Reply
  - baja says
    January 23, 2018 at 5:32 am
    For
    <option value="”>
    sir can you edit for me how to change? the value hehehehe sorry I’m still learning in php hehehe
    Reply
    - Sigit Prasetya Nugroho says
      January 23, 2018 at 6:08 am
      here
      <option value="alluser">all user</option>
      1
      <option value="alluser">all user</option>
      Reply
      - Baja says
        January 23, 2018 at 8:17 am
        thank you sir
farheen says
January 23, 2018 at 5:08 am
working perfectly on localhost but not on my server ?
Reply
- Sigit Prasetya Nugroho says
  January 23, 2018 at 5:09 am
  can you show me the error ?
  Reply
  - farheen says
    January 23, 2018 at 5:18 am
    there is no no error
    able to send but not receiving
    Reply
    - Sigit Prasetya Nugroho says
      January 23, 2018 at 5:20 am
      Check your notifications Allow or block in your browser.
      this script not working on phone device
      🙂
      Reply
      - farheen says
        January 23, 2018 at 6:28 am
        it still didn’t work
- pk says
  February 27, 2019 at 10:14 am
  I am also having same problem its not working in web server , also not getting any errors.
  Reply
Baja says
January 27, 2018 at 8:50 am
Push.create("NEGROS ISLAND FESTIVAL",{ body: "masskara festival sa bacolod", icon: "image/CPSU_official_logo_seal.jpg", });
1
2
3
4
5
Push.create("NEGROS ISLAND FESTIVAL",{
body: "masskara festival sa bacolod",
icon: "image/CPSU_official_logo_seal.jpg",

});
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
Reply
- Sigit Prasetya Nugroho says
  January 29, 2018 at 1:13 am
  every week :
  You can do mysql search using the day parameter, an example every monday
  $stmt = $db->prepare("SELECT * FROM notif WHERE (username= :user or username= 'alluser') AND notif_loop > 0 AND notif_time <= CURRENT_TIMESTAMP() and dayname(now()) = 'monday'");
  1
  2
  3
  4
  $stmt = $db->prepare("SELECT * FROM notif
  WHERE (username= :user or username= 'alluser')
  AND notif_loop > 0
  AND notif_time <= CURRENT_TIMESTAMP() and dayname(now()) = 'monday'");
  Every month :
  You can do mysql search using the date parameter, an example every 5th in a month
  $stmt = $db->prepare("SELECT * FROM notif WHERE (username= :user or username= 'alluser') AND notif_loop > 0 AND notif_time <= CURRENT_TIMESTAMP() and day(now()) = '5'");
  1
  2
  3
  4
  $stmt = $db->prepare("SELECT * FROM notif
  WHERE (username= :user or username= 'alluser')
  AND notif_loop > 0
  AND notif_time <= CURRENT_TIMESTAMP() and day(now()) = '5'");
  Hope useful 🙂
  Reply
Yohan says
February 8, 2018 at 1:58 pm
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 ?
Reply
- Sigit Prasetya Nugroho says
  February 9, 2018 at 8:03 am
  yes, its not work in smartphone now. You can use google firebase to create push notification in pc browser or smartphone browser. But i have never tried it. Check it out here https://firebase.google.com/docs/cloud-messaging/?hl=en
  Reply
Usama Saeed says
February 16, 2018 at 4:12 pm
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?
Reply
- Sigit Prasetya Nugroho says
  February 17, 2018 at 3:38 am
  can u share your multiple code to me ??
  🙂
  Reply
  - usama saeed says
    February 17, 2018 at 3:02 pm
    same as tutorial code, just change for loop to foreach loop. Both didnt work for me
    if(data.result == true){
    var data_notif = data.notif;
    data_notif.forEach(function(entry) {
    console.log(entry);
    var theurl = entry[‘url’];
    var notifikasi = new Notification(entry[‘title’], {
    icon: entry[‘icon’],
    body: entry[‘message’],
    });
    notifikasi.onclick = function () {
    window.open(theurl);
    notifikasi.close();
    };
    setTimeout(function(){
    notifikasi.close();
    }, 5000);
    });
    Reply
    - Sigit Prasetya Nugroho says
      February 19, 2018 at 1:15 am
      You can check your error from console.log . what is the error show?
      Reply
      - usama says
        February 20, 2018 at 3:50 pm
        No error on console. Same tutorial code not working for multiple notification for me
      - Sigit Prasetya Nugroho says
        February 21, 2018 at 8:22 am
        working perfectly with foreach in my test 🙂
Mustafa Contractor says
February 18, 2018 at 5:21 pm
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?
Reply
- Sigit Prasetya Nugroho says
  February 19, 2018 at 1:22 am
  You can read the comment before
  https://seegatesite.com/how-to-make-web-push-notifications-in-php-jquery-ajax-and-mysql/#comment-4940
  Reply
Alfredo says
March 21, 2018 at 5:09 pm
Very good tutorial !
Reply
maruti dange says
April 4, 2018 at 12:20 pm
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
Reply
- Sigit Prasetya Nugroho says
  April 4, 2018 at 3:37 pm
  Access denied for user ‘root’@’localhost’
  1
  Access denied for user ‘root’@’localhost’
  Change your database settings with yours 🙂
  Reply
maruti dange says
April 5, 2018 at 2:30 am
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
Reply
- Sigit Prasetya Nugroho says
  April 5, 2018 at 3:38 am
  Have you checked mysql database settings? Open the dbconn.php file and customize it with your own database settings 🙂
  Reply
  - maruti dange says
    April 5, 2018 at 7:50 am
    thank u so much sir,
    now everything is working But Notification is NOT Showing when the user is login
    Reply
    - maruti dange says
      April 5, 2018 at 8:41 am
      i checked in console this is only 1 error :
      Uncaught Syntax Error: Invalid or unexpected token mynotif.js:10
      Reply
      - Sigit Prasetya Nugroho says
        April 5, 2018 at 9:24 am
        Click your error from console. and check it. your error in row 10 mynotif.js
        $('body').append('<h4 style="color:red">*Browser does not support Web Notification</h4>');
        1
        $('body').append('<h4 style="color:red">*Browser does not support Web Notification</h4>');
      - Sigit Prasetya Nugroho says
        April 5, 2018 at 9:24 am
        delete the space 🙂
maruti dange says
April 11, 2018 at 12:59 pm
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
Reply
- Sigit Prasetya Nugroho says
  April 13, 2018 at 1:36 am
  please more specific 🙂
  Reply
maruti dange says
April 12, 2018 at 9:30 am
please help me sir i am waiting for your reply
Reply
Thiago says
August 15, 2018 at 6:30 am
Excelent code. Please, send the code to working mobile devices…..
This code not work in android e Ios devices
Reply
- Sigit Prasetya Nugroho says
  August 17, 2018 at 1:16 am
  not working in mobile phone
  Reply
gurvinder kaur says
August 16, 2018 at 11:01 am
No error… but still notification not working
Reply
- Sigit Prasetya Nugroho says
  August 17, 2018 at 1:16 am
  not working in mobile phone
  Reply
Gurvinder says
August 16, 2018 at 11:14 am
Works amazingly now… thank you sir… 🙂
Reply
RAB says
September 21, 2018 at 6:06 am
Hi Sir! works perfectly.. Thank you very much!
Reply
feng says
October 3, 2018 at 3:57 am
hello. sir.
I didn’t get any bug. But I can’t get the notification.
Please help.Thanks
Reply
- Sigit Prasetya Nugroho says
  October 5, 2018 at 1:10 am
  using phone or pc ?
  Reply
Rana says
December 16, 2018 at 6:21 pm
hello sir..
without login Notification alert?
Reply
- Sigit Prasetya Nugroho says
  December 17, 2018 at 1:24 am
  Yes. You can do this without creating a login page. The login page is only used to search for messages to be sent
  Reply
Mark Lewis says
January 3, 2019 at 8:00 pm
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.
Reply
Khatri Pavan says
September 17, 2019 at 7:13 am
Can you provide me a code of chat message notification for codeigniter in localhost database not in online database.
Reply
- Sigit Prasetya Nugroho says
  September 23, 2019 at 8:50 am
  sorry I have never tried it
  Reply
zokham says
January 16, 2020 at 4:29 am
Hello there,
Is it complusory to have SSL certificate to implement push notifications on localhost or live server please reply asap.
Thanks.
Reply
- Sigit Prasetya Nugroho says
  January 18, 2020 at 7:09 am
  Not mandatory
  Reply

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

Create a login page

Create logout script.

Create MySQL Connection With PDO

Create class sql query syntax on the sql.php file

Create PHP function to check user login

Creating a page for adding a list of notifications

Create Index or Dashboard Page

Create a file that will be called by the Jquery ajax

Create a javascript file that will execute the notification

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

About Sigit Prasetya Nugroho

Reader Interactions

Comments

Leave a Reply Cancel reply