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

3 minuto(s)

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.

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.

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.

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.

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.


Puedes descargarte el código completo en Github con el archivo SQL para que lo pruebes en tu servidor.

No olvides seguirnos en nuestras redes sociales, nos vemos hasta un próximo Artículo.