Sistema de notificación push PHP y MySQL: Ejemplo Completo
Sistema de notificación push PHP y MySQL. En este artículo describiremos como incorporar un método para enviar mensajes personalizados y mostrarlo en los navegadores web como por ejemplo Chrome, Firefox, Opera, entre otros.
Sin embargo, las notificaciones push son útiles para informar a los usuarios con noticias específicas, correo electrónico nuevo, etc. Por lo tanto, si estás pensando en implementar un sistema de notificación web con PHP y MySQL, déjame decirte que estás en el lugar correcto.
Sistema de notificación push PHP y MySQL: Ejemplo Completo
Al terminar de analizar este artículo aprenderás a implementar el sistema de notificaciones push web con PHP y almacenarlo en la base de datos MySQL.
¿Cómo funciona el sistema de notificaciones Push?
Este sistema es muy intuitivo y funciona de la siguiente manera. El administrador puede crear notificaciones push web y esas notificaciones serán visibles a los usuarios que han iniciado sesión en su navegador. A continuación detallaremos algunos procesos que podemos realizar con el sistema.
- La notificación creada por el administrador puede mostrarse muchas veces según la configuración realizada.
- También podemos definir el tiempo de intervalo para la siguiente notificación que se emitirá.
- La notificación emitida se cerrará después de tiempo determinado por el administrador.
Estructura de archivos del sistema de notificaciones.
A continuación, mostraremos una imagen con la estructura del sistema mencionado.
CONTENIDO DEL SISTEMA DE NOTIFICACIONES PUSH
Siguiendo con la explicación, a continuación mostraremos los pasos y procesos del sistema.
Primer paso: Crear la base de datos y sus tablas.
Para que el sistema funcione tenemos que crear una tabla de notificaciones y esta tabla tendrá como nombre «notif
» para almacenar las notificaciones que serán visibles en el navegador. Esta consulta lo tienes que ejecutar en el PHPMyAdmin.
CREATE TABLE `notif` ( `id` int(11) NOT NULL, `title` varchar(250) NOT NULL, `notif_msg` text NOT NULL, `notif_time` datetime DEFAULT NULL, `notif_repeat` int(11) DEFAULT '1', `notif_loop` int(11) NOT NULL DEFAULT '1', `publish_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, `username` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO `notif` (`id`, `title`, `notif_msg`, `notif_time`, `notif_repeat`, `notif_loop`, `publish_date`, `username`) VALUES (3, 'Meteoritos caéra en la Tierra', 'Llegada de los meteoritos a la tierra.', '2019-05-07 15:15:17', 1, 1, '2019-05-07 20:21:11', 'baulphp'); ALTER TABLE `notif` ADD PRIMARY KEY (`id`); ALTER TABLE `notif` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
Ahora, también crearemos una tabla llamada «notif_user
«, en esta tabla se almacenara los usuarios que hacen login en nuestra página y/o sistema web. A continuación la consulta SQL que podrías ejecutar en el gestor de base de datos PHPMyAdmin.
CREATE TABLE `notif_user` ( `id` int(11) NOT NULL, `username` varchar(100) DEFAULT NULL, `password` varchar(100) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO `notif_user` (`id`, `username`, `password`) VALUES (1, 'baulphp', '12345'); ALTER TABLE `notif_user` ADD PRIMARY KEY (`id`); ALTER TABLE `notif_user` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
Segundo paso: Crear formulario para login de usuarios.
En este punto tenemos que estructurar un formulario HTML para iniciar sesión en el navegador. Recordemos que las notificaciones serán visibles a los usuarios registrados y que hayan iniciado sesión en la página web.
<?php include('container.php');?> <div class="container"> <h2>Iniciar Sesión:</h2> <div class="row"> <div class="col-sm-4"> <form method="post"> <div class="form-group"> <?php if ($loginError ) { ?> <div class="alert alert-warning"><?php echo $loginError; ?></div> <?php } ?> </div> <div class="form-group"> <label for="username">Usuario:</label> <input type="username" class="form-control" name="username" required> </div> <div class="form-group"> <label for="pwd">Contraseña:</label> <input type="password" class="form-control" name="pwd" required> </div> <button type="submit" name="login" class="btn btn-default">Iniciar Sesion</button> </form><br> <strong>Datos demo:</strong><br> <strong>Usuario:</strong> baulphp <br> <strong>Contraseña:</strong> 12345 </div> </div> </div> <?php include('footer.php');?>
Un formulario no podría iniciar sesión. Por lo tanto, se tendría que apoyar en un lenguaje de programación como PHP y aquí mostraremos la estructura del mismo.
<?php session_start(); include('header.php'); $loginError = ''; if (!empty($_POST['username']) && !empty($_POST['pwd'])) { include ('Push.php'); $push = new Push(); $user = $push->loginUsers($_POST['username'], $_POST['pwd']); if(!empty($user)) { $_SESSION['username'] = $user[0]['username']; header("Location:index.php"); } else { $loginError = "Invalido el usuario o contraseña!"; } } ?>
Tercer paso: Ingresar notificación al sistema
Para que las notificaciones se emitan, primeramente tenemos que agregar una notificación para enviar a los usuarios. Por lo tanto, el fichero encargado de este trabajo es «manage_notification.php
«. Este fichero mostrara un formulario HTML en el cual nos permitirá crear la notificación con diversos campos.
<div class="container"> <h2>Ejemplo: Sistema de Notificación PUSH usando PHP y MySQL</h2> <a href="index.php">Portada</a> | <a href="logout.php">Salir</a> <hr> <div class="row"> <div class="col-sm-6"> <h3>Agregar nueva notificacion:</h3> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <table class="table borderless"> <tr> <td>Titulo</td> <td><input type="text" name="title" class="form-control" required></td> </tr> <tr> <td>Mensaje</td> <td><textarea name="msg" cols="50" rows="4" class="form-control" required></textarea></td> </tr> <tr> <td>Tiempo de Emision</td> <td><select name="time" class="form-control"><option>Ahora</option></select> </td> </tr> <tr> <td>Bucle (tiempo)</td> <td><select name="loops" class="form-control"> <?php for ($i=1; $i<=5 ; $i++) { ?> <option value="<?php echo $i ?>"><?php echo $i ?></option> <?php } ?> </select></td> </tr> <tr> <td>Bucle cada (Minutos)</td> <td><select name="loop_every" class="form-control"> <?php for ($i=1; $i<=60 ; $i++) { ?> <option value="<?php echo $i ?>"><?php echo $i ?></option> <?php } ?> </select> </td> </tr> <tr> <td>Por</td> <td><select name="user" class="form-control"> <?php $user = $push->listUsers(); foreach ($user as $key) { ?> <option value="<?php echo $key['username'] ?>"><?php echo $key['username'] ?></option> <?php } ?> </select></td> </tr> <tr> <td colspan=1></td> <td colspan=1></td> </tr> <tr> <td colspan=1></td> <td><button name="submit" type="submit" class="btn btn-info">Agregar Mensaje</button></td> </tr> </table> </form> </div> </div>
A continuación, para complementar el formulario mostraremos el script encargado de enviar esa información a la base de datos MySQL.
<?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'])) { $title = $_POST['title']; $msg = $_POST['msg']; $time = date('Y-m-d H:i:s'); $loop= $_POST['loops']; $loop_every=$_POST['loop_every']; $user = $_POST['user']; $isSaved = $push->saveNotification($title, $msg,$time,$loop,$loop_every,$user); if($isSaved) { echo '* Guardar nueva notificación de éxito'; } else { echo 'error guardando informacion'; } } else { echo '* completado el parámetro de arriba'; } } ?> <h3>Notificaciones Lista:</h3>
Una vez ingresada las notificaciones a la base de datos tendremos que mostrar esas notificaciones en registros para poder visualizarlo. En tal sentido, aquí les dejare el script que muestra las notificaciones ingresadas a la base de datos.
<h3>Notificaciones Lista:</h3> <table class="table"> <thead> <tr> <th>No</th> <th>Siguiente horario</th> <th>Titulo</th> <th>Mensaje</th> <th>permanece</th> <th>Usuario</th> </tr> </thead> <tbody> <?php $a =1; $notifList = $push->listNotification(); foreach ($notifList as $key) { ?> <tr> <td><?php echo $a ?></td> <td><?php echo $key['notif_time'] ?></td> <td><?php echo $key['title'] ?></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> </div>
Cuarto paso: Crear la conexión con la base de datos
La conexión de PHP y MySQL es muy importante para este sistema. Por lo tanto, el fichero que maneja la conexión se llama «Push.php
«. Aquí les dejare el contenido de dicho fichero.
<?php class Push{ private $host = 'localhost'; private $user = 'root'; private $password = ''; private $database = 'php_push'; private $notifTable = 'notif'; private $userTable = 'notif_user'; private $dbConnect = false; public function __construct(){ if(!$this->dbConnect){ $conn = new mysqli($this->host, $this->user, $this->password, $this->database); if($conn->connect_error){ die("Error failed to connect to MySQL: " . $conn->connect_error); }else{ $this->dbConnect = $conn; } } } private function getData($sqlQuery) { $result = mysqli_query($this->dbConnect, $sqlQuery); if(!$result){ die('Error in query: '. mysqli_error()); } $data= array(); while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) { $data[]=$row; } return $data; } public function listNotification(){ $sqlQuery = 'SELECT * FROM '.$this->notifTable; return $this->getData($sqlQuery); } public function listNotificationUser($user){ $sqlQuery = "SELECT * FROM ".$this->notifTable." WHERE username='$user' AND notif_loop > 0 AND notif_time <= CURRENT_TIMESTAMP()"; return $this->getData($sqlQuery); } public function listUsers(){ $sqlQuery = "SELECT * FROM ".$this->userTable." WHERE username != 'admin'"; return $this->getData($sqlQuery); } public function loginUsers($username, $password){ $sqlQuery = "SELECT id as userid, username, password FROM ".$this->userTable." WHERE username='$username' AND password='$password'"; return $this->getData($sqlQuery); } public function saveNotification($msg, $time, $loop, $loop_every, $user){ $sqlQuery = "INSERT INTO ".$this->notifTable."(notif_msg, notif_time, notif_repeat, notif_loop, username) VALUES('$msg', '$time', '$loop', '$loop_every', '$user')"; $result = mysqli_query($this->dbConnect, $sqlQuery); if(!$result){ return ('Error in query: '. mysqli_error()); } else { return $result; } } public function updateNotification($id, $nextTime) { $sqlUpdate = "UPDATE ".$this->notifTable." SET notif_time = '$nextTime', publish_date=CURRENT_TIMESTAMP(), notif_loop = notif_loop-1 WHERE id='$id')"; mysqli_query($this->dbConnect, $sqlUpdate); } } ?>
CONCLUSION DEL SISTEMA
En este artículo describimos las características, los ficheros necesarios y como funciona este sistema de notificaciones con ventanas emergentes.
Su uso es recomendado y su implementación es muy sencilla, solo tenemos que adaptarlo a nuestras necesidades. Sin embargo, tenemos que usarlo con moderación.
Además, les dejare un archivo comprimido donde contendrá los ficheros necesarios y la base de datos del sistema para que puedan instalarlo sin problemas y realizar las respectivas pruebas.
Notificaciones PUSH con MySQL y PHP: Descargar
Muchas gracias, funciona correctamente, solo tengo una duda, si el navegador está cerrado, ¿hay forma de recibir notificaciones? Gracias y excelente tutorial.
Me parece que esto no funciona…
El archivo Push.php tiene un error en la línea 58. Al final de la línea dice ‘$id’)»; pero debería decir ‘$id'»;
Al arreglar eso el código me funciona pero solo en PC, no trabaja en el Chrome de Android.
Sigue funcionando? Ya Cargue todo, conecte las dbs, entre como admin y usuario, estoy en movil y pc y no me muestra nada.
hola, quisiera saber donde descargo los archivos para realizar el si stema?
Ya lo intente probar pero manda error en el .js y no muestra las notificaciones.
Uncaught SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
parseJSON jQuery
success http://localhost/notificacion/notification.js:17
jQuery 6
showNotification http://localhost/notificacion/notification.js:13
http://localhost/notificacion/notification.js:3
setInterval handler* http://localhost/notificacion/notification.js:3
el problema es en icon duplica la barra el el error images\/avatar.png
No funciona da errores
es posible hacer el proceso, pero quiero enviar las notificaciones a todos los usuarios que hayan aceptado las notificaciones de mi web, sin necesidad que hayan echo login
holapodra ayudarme con el sistema de notificaciones, no m muestra las notificaciones.
Muy buen aporte era lo que estaba buscando tema notificaciones push desde php
Nestor, muchas gracias por el aporte. me funciono bien, solo realice la conexion bd
consultarte, que se debe agregar para que funcione en el celular la web movil de chorme. mi dominio tiene seguridad ssl.(https)
Me carga las notificaci9ones en la BBDD pero no me las muestra en la ventana
Realiza el registro en Base de Datos, pero las notificaciones no se muestran, tengo la version de php 7
hola, no me muestra las notificaciones. puedo ingresar, agregar nuevas pero no me muestra la notificacion.
que version de php debe tener para que ande
Hola Alvaro,
Para el sistema notificaciones bastaria la version php7, algunos servidores locales tienen la version muy elevada y aveces ocasiona errores.
Lo recomendable es usar una version estandar del PHP
no me funciona por que?
Hola Koke,
Revisa la conexion con la base de datos, deberia de funcionar.
Tambien, revisa que versión de PHP estas usando.
Saludos
Buenas tardes Nestor, en mi caso no logro hacerlo funcionar, el error de la consola es :
ncaught SyntaxError: Unexpected end of JSON input
at Function.parse [as parseJSON] ()
at Object.success (notification.js:17)
at c (jquery-3.5.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.5.1.min.js:2)
at l (jquery-3.5.1.min.js:2)
at XMLHttpRequest. (jquery-3.5.1.min.js:2)
Incluso probé actulizar la version de jquery,Bootstrap, etc..
La version de php es PHP Version 7.3.9.
Gracias.
Hola posiblemente sea por el error en los caracteres especiales de la publicación que ya esta cargada por defecto. A mi me dió ese error.