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

1 archivo(s) 23.6 KB

Descargar