Breaking

Post Top Ad

Your Ad Spot

jueves, 10 de mayo de 2018

Cómo implementar notificaciones en el Header

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>

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas