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

Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

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.

 

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
21 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Fa Guz PC
Fa Guz PC
3 años atrás

excelente sistema me ayudara mucho con mi problema de notificaciones

saludos

Devs - Collective Cloud Perú
Devs - Collective Cloud Perú
Reply to  Fa Guz PC
3 años atrás

Que bueno que te ayudo Fa Guz PC, sigue adelante.

Angelica Luna
Angelica Luna
3 años atrás

Realice la prueba de tu demo desde mi navegador en chrome normal y en una ventana de incognito y puedo ver que las notificaciones llegan sin necesidad de actualizar la pagina, pero no me queda claro en que parte se realizó esto, agradezco tu respuesta

Devs - Collective Cloud Perú
Devs - Collective Cloud Perú
Reply to  Angelica Luna
3 años atrás

Hola Angelica, gracias por visitar nuestro blog, si revisas bien verás que si actualiza la página, lo hace muy rápido, vuelve a probar y míralo con mas calma podrás apreciar que se refresca en cada notificación.

Angelica Luna
Angelica Luna
Reply to  Devs - Collective Cloud Perú
3 años atrás

Si, claro eso lo note, lo que no me queda claro es q parte del código se encarga de refrescar

Nube Colectiva
Nube Colectiva
Reply to  Angelica Luna
1 año atrás

Se hace en el código PHP:

header( ‘Location: ../’ ) ;

saludos Angelica

trackback
5 Tips para Mejorar la UX (Experiencia del usuario) de un menú Web creado con Bootstrap 4 | Blog Nube Colectiva
1 año atrás

[…] Si en tu Sitio Web con Bootstrap 4 estas generando contenidos y novedades puedes implementar un sistema de notificaciones mediante un Badget, puedes crear uno con PHP, MySQL, Ajax y Bootstrap 4 siguiendo este tutorial Sistema de Notificaciones con PHP, MySQL, jQuery Ajax y Bootstrap 4 […]

Israel Palmeros
Israel Palmeros
1 año atrás

 
Hola, funciona genial para ser vista por una persona, pero si tengo varios usuarios, si uno de ellos lo ve, borra la notificacion y los demas usuarios no ven la notificacion, como puedo hacer para que por medio de la sesion id del usuario, marque si ya se vio la notificacion o no por el resto de los usuarios? trate de hacer un insert en otra tabla aparte guardando la sesion del usuario, pero no funciona esa logica, que me recomendarias? 

Martín
Martín
1 año atrás

Hola buenas tardes en mi caso funciona pero no aparece el comentario en el listado como aparece en la demo

Martín
Martín
Reply to  Nube Colectiva
1 año atrás

Hola ya encontré el error, el id no tenía activado el AUTO_INCREMENT


Antonio
Antonio
1 año atrás

Hola, funciona a la perfeccion el codigo. aconsejaria agregarle un ajax con intervalo y quitar el $(“#notification-count”).remove();  ya que es innecesario y produce conflicto en el badge, debido al refresh del ajax. Saludos.

Antonio
Antonio
Reply to  Nube Colectiva
1 año atrás

Lo que ocupe modificar fue: <?php     include('../apiConnect/connect.php');     $count=0;     $sql2="SELECT * FROM notifications_reservation WHERE state_notifreserv = 0";     $result=mysqli_query($conn, $sql2);     $count=mysqli_num_rows($result);      if ($count>0) {         echo $count;      } ?> 1234567891011121314 <?php     include('../apiConnect/connect.php');     $count=0;     $sql2="SELECT * FROM notifications_reservation WHERE state_notifreserv = 0";    $result=mysqli_query($conn, $sql2);    $count=mysqli_num_rows($result);      if ($count>0) {        echo $count;     }?> Trasladar la consulta aun file php 2- crear el ajax con un intervalo de tiempo function refresh_count_notif() {             jQuery.ajax({                 url: 'apiManagePanel/query_count_notifications.php',                 type: 'POST',                 success: function(results) {                     jQuery(".badge-notify").html(results);                 }             });         } notif = setInterval(refresh_count_notif, 1000); 12345678910 function refresh_count_notif() {            jQuery.ajax({                url: 'apiManagePanel/query_count_notifications.php',                type: 'POST',                success: function(results) {                    jQuery(".badge-notify").html(results);                }            });        }notif = setInterval(refresh_count_notif, 1000); el ajax asignarlo en la pagina, invocando el query anterior 3- Asignar el div “badge-notify” en donde mostrara el result del ajax <div class="badge badge-danger badge-counter badge-notify"></div> 1 <div class="badge badge-danger badge-counter badge-notify"></div> 4- Por ultimo quitar los codigos que causan conflicto. $("#notification-count").remove(); header( 'Location: ../' ) ; 12 $("#notification-count").remove();header( 'Location: ../' ) ; Espero haberme explicado correctamente y gracias por la oportunidad de… Leer más »

Last edited 1 año atrás by Antonio
rodrigo
rodrigo
2 meses atrás

muy buenas se puede utilizar por ejemplo con la entrega de notificación de documentos atrasados jugando con las fechas sin contar con domingos y sabados

Rodrigo
Rodrigo
14 días atrás

¿Como deberia llamar cada archivo…?