Sistema de Notificaciones con PHP, MySQL, jQuery Ajax y Bootstrap 4

3 minuto(s)

En esta página:

Demo Github

Si decides informar a tus usuarios de alguna novedad en tu Proyecto, no hay nada mejor que las Notificaciones. Puedes usar una Base de datos para almacenarlas y tenerlas disponibles durante el tiempo que decidas mostrarlo. Este sistema lo puedes crear con un Framework, pero yo lo haré sencillo con PHP básico para que vean como es la lógica, ya luego ven donde y como lo implementan.

Estructura de la Tabla en la base de datos

Voy a crear una base de datos llamada ‘notificaciones’ y dentro de ella una tabla llamada datos, dentro de esta tabla creare los siguientes campos o columnas: id, mensaje, estado, autor y fecha.

Agregando una nueva Notificación

Bien voy a conectar a la base de datos llamada notificaciones, luego insertare una nueva notificación en mi tabla datos, los campos que le insertaré son autor y mensaje y por último selecciono las notificaciones que tenga el estado en 0, cuando sean leídas el sistema las cambiara a 1 pasando a ser leídas.


<?php
	$conn = new mysqli("localhost","root","","notificaciones");
	$count=0;
	if(!empty($_POST['add'])) {
		$autor = mysqli_real_escape_string($conn,$_POST["autor"]);
		$mensaje = mysqli_real_escape_string($conn,$_POST["mensaje"]);
		$sql = "INSERT INTO datos (autor,mensaje) VALUES('" . $autor . "','" . $mensaje . "')";
		mysqli_query($conn, $sql);
	}
	$sql2="SELECT * FROM datos WHERE estado = 0";
	$result=mysqli_query($conn, $sql2);
	$count=mysqli_num_rows($result);
	header( 'Location: ../' ) ;
?>

<?php

$conn = new mysqli("localhost","root","","notificaciones");

$count=0;

if(!empty($_POST['add'])) {

$autor = mysqli_real_escape_string($conn,$_POST["autor"]);

$mensaje = mysqli_real_escape_string($conn,$_POST["mensaje"]);

$sql = "INSERT INTO datos (autor,mensaje) VALUES('" . $autor . "','" . $mensaje . "')";

mysqli_query($conn, $sql);

}

$sql2="SELECT * FROM datos WHERE estado = 0";

$result=mysqli_query($conn, $sql2);

$count=mysqli_num_rows($result);

header( 'Location: ../' ) ;

Gestionando las Notificaciones en el Servidor

Ahora una vez que el usuario lea las notificaciones le cambiamos el estado de 0 a 1 que significa que ha sido Leída, asimismo le digo al sistema que solo me muestre las últimas 5 notificaciones cargadas.


<?php
$conn = new mysqli("localhost","root","","notificaciones");
$sql = "UPDATE datos SET estado = 1 WHERE estado = 0";	
$result = mysqli_query($conn, $sql);
$sql = "SELECT * FROM datos ORDER BY id DESC limit 5";
$result = mysqli_query($conn, $sql);
$response='';
while($row=mysqli_fetch_array($result)) {
	/* Formate fecha */
	$fechaOriginal = $row["fecha"];
	$fechaFormateada = date("d-m-Y", strtotime($fechaOriginal));
	$response = $response . "<div class='notification-item'>" .
	"<div class='notification-subject'>". $row["autor"] . " - <span>". $fechaFormateada . "</span> </div>" . 
	"<div class='notification-comment'>" . $row["mensaje"]  . "</div>" .
	"</div>";
}
if(!empty($response)) {
	print $response;
}
?>

<?php

$conn = new mysqli("localhost","root","","notificaciones");

$sql = "UPDATE datos SET estado = 1 WHERE estado = 0";

$result = mysqli_query($conn, $sql);

$sql = "SELECT * FROM datos ORDER BY id DESC limit 5";

$result = mysqli_query($conn, $sql);

$response='';

while($row=mysqli_fetch_array($result)) {

/* Formate fecha */

$fechaOriginal = $row["fecha"];

$fechaFormateada = date("d-m-Y", strtotime($fechaOriginal));

$response = $response . "<div class='notification-item'>" .

"<div class='notification-subject'>". $row["autor"] . " - <span>". $fechaFormateada . "</span> </div>" .

"<div class='notification-comment'>" . $row["mensaje"] . "</div>" .

"</div>";

}

if(!empty($response)) {

print $response;

}

Mostrando la barra de Notificaciones

Ahora crearemos la vista para mostrar las notificaciones al usuario, en un archivo aparte llamado ‘conexion.php’ realizo la conexión al servidor, luego creo un contenedor en donde colocaré un botón para mostrar las notificaciones con su contador de nuevas notificaciones y finalmente la lista que se desplega al hacer click en el icono y va mostrar la lista de notificaciones.


<?php
   include("php/conexion.php");
?>                        

<div class="demo-content">
   <div id="notification-header">
        <div style="position:relative">
            <button id="notification-icon" name="button" onclick="myFunction()" class="dropbtn"><span id="notification-count"><?php if($count>0) { echo $count; } ?></span><img src="img/icono.png" /></button>
            <div id="notification-latest"></div>
        </div>          
   </div>
</div>

<?php if(isset($message)) { ?> <div class="error"><?php echo $message; ?></div> <?php } ?>
<?php if(isset($success)) { ?> <div class="success"><?php echo $success;?></div> <?php } ?>

<?php

include("php/conexion.php");

<button id="notification-icon" name="button" onclick="myFunction()" class="dropbtn"><span id="notification-count"><?php if($count>0) { echo $count; } ?></span><img src="img/icono.png" /></button>

</div>

<?php if(isset($message)) { ?> <div class="error"><?php echo $message; ?></div> <?php } ?>

<?php if(isset($success)) { ?> <div class="success"><?php echo $success;?></div> <?php } ?>

Solicitudes con jQuery Ajax

Ahora realizaremos peticiones asíncronas con Ajax, mediante la librería jQuery enviamos un POST al archivo que creamos anteriormente llamado ‘notificaciones.php’ para su ejecución respectiva y luego nos muestre y oculte las notificaciones según las acciones del usuario.


<script type="text/javascript">
      function myFunction() {
        $.ajax({
          url: "php/notificaciones.php",
          type: "POST",
          processData:false,
          success: function(data){
            $("#notification-count").remove();                  
            $("#notification-latest").show();$("#notification-latest").html(data);
          },
          error: function(){}           
        });
      }
                                 
      $(document).ready(function() {
        $('body').click(function(e){
          if ( e.target.id != 'notification-icon'){
            $("#notification-latest").hide();
          }
        });
      });                                     
    </script>

function myFunction() {

$.ajax({

url: "php/notificaciones.php",

type: "POST",

processData:false,

success: function(data){

$("#notification-count").remove();

$("#notification-latest").show();$("#notification-latest").html(data);

error: function(){}

});

}

$(document).ready(function() {

$('body').click(function(e){

if ( e.target.id != 'notification-icon'){

$("#notification-latest").hide();

}

});

</script>

Formulario para crear Notificaciones

Ahora con elementos de Bootstrap 4 creo un sencillo formulario para poner el nombre y el mensaje de mi notificación.


<form name="frmNotification" id="frmNotification" action="php/agregarnotificacion.php" method="post" >
   <div class="form-group">
       <label for="autor">Autor </label>
       <input type="text" class="form-control" name="autor" id="autor" placeholder="Ingresa Autor" required>
   </div>
   <div class="form-group">
       <label for="mensaje">Mensaje </label>
       <textarea class="form-control" name="mensaje" id="mensaje" rows="3" placeholder="Mensaje" required></textarea>
   </div>
   <div class="form-group">
       <input type="submit" name="add" id="btn-send" value="Enviar">
   </div>
</form>