Cómo implementar notificaciones en el header tal y como lo hace Facebook con PHP

En Facebook, como en otras redes sociales, podemos ver las notificaciones de la plataforma en el header de la página. En este tutorial vamos a agregar notificaciones en el header para avisar al usuario de las últimas novedades para con la plataforma. Esto es la mar de útil para mantener al usuario actualizado en todo momento.

En este ejemplo, mostraremos un icono en el header de la página junto a un contador que indicará el número de notificaciones no vistas del usuario. Al hacer clic en dicho icono, listaremos los últimos elementos.

Publicando nueva información en las notificaciones

Este código muestra un formulario HTML que nos servirá para publicar nueva información que después se mostrará al usuario. Después de enviar esta nueva información, se almacenará en la base de datos con el estado a 0 en el campo read. La información que esté marcada con el campo read a 0 es la información que aún no ha leído el usuario. La suma de los mensajes no leídos se calcula y se muestra cerca del icono que mostraremos en el header.

<?php
	$conn = new mysqli("localhost","root","","blog_samples");
	$count=0;
	if(!empty($_POST['add'])) {
		$subject = mysqli_real_escape_string($conn,$_POST["subject"]);
		$comment = mysqli_real_escape_string($conn,$_POST["comment"]);
		$sql = "INSERT INTO comments (subject,comment) VALUES('" . $subject . "','" . $comment . "')";
		mysqli_query($conn, $sql);
	}
	$sql2="SELECT * FROM comments WHERE status = 0";
	$result=mysqli_query($conn, $sql2);
	$count=mysqli_num_rows($result);
?>
<form name="frmNotification" id="frmNotification" action="" method="post" >
	<div id="form-header" class="form-row">Add New Message</div>
	<div class="form-row">
		<div class="form-label">Subject:</div><div class="error" id="subject"></div>
		<div class="form-element">
			<input type="text"  name="subject" id="subject" required>
			
		</div>
	</div>
	<div class="form-row">
		<div class="form-label">Comment:</div><div class="error" id="comment"></div>
		<div class="form-element">
			<textarea rows="4" cols="30" name="comment" id="comment"></textarea>
		</div>
	</div>
	<div class="form-row">
		<div class="form-element">
			<input type="submit" name="add" id="btn-send" value="Submit">
		</div>
	</div>
</form>

Mostrar notificaciones utilizando jQuery

Ahora llamaremos a un script jQuery en el evento clic de nuestro icono para mostrar las notificaciones. En este script, llamaremos a un fichero de PHP mediante AJAX para obtener las últimas notificaciones del usuario.

Al hacer clic en el icono de las notificaciones, restableceremos el campo read a 1 para indicar que el usuario ya las ha leido y listaremos todas las notificaciones. Lo haríamos tal que así:

<script type="text/javascript">
	function myFunction() {
		$.ajax({
			url: "view_notification.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>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP