Système de notification

Création d'un système de notification en temps réel en PHP et AJAX


Vous êtes-vous déjà demandé comment les sites de médias sociaux affichent une notification pour chaque action sur votre calendrier ?

Ce système de notification en temps réel assure le suivi de toutes les actions que vous et vos amis effectuez sur ces canaux sociaux. Les notifications constituent une grande partie de la fonction d'engagement en temps réel de ces plates-formes. Même si vous n'êtes pas en ligne, vous pouvez toujours recevoir ces notifications. Un système de notification PHP pourrait être facilement construit en utilisant un mélange de PHP et de JavaScript. Ce système fournit une notification en temps réel dans une application PHP.


Dans cet article, je vais vous montrer comment créer un système de notification simple en utilisant PHP et AJAX. Je vais aussi utiliser jQuery et Bootstrap.


C'est parti !


Importation des tables dans une base de données

Exécutez maintenant la requête suivante.

CREATE TABLE  `comments`  (
    `comment_id`  int(255)  NOT  NULL,
    `comment_subject`  varchar(255)  NOT  NULL,
    `comment_text`  text NOT  NULL,
    `comment_status`  int(1)  NOT  NULL
)  ENGINE=InnoDB DEFAULT  CHARSET=latin1;

ALTER TABLE  `comments`
ADD PRIMARY KEY  (`comment_id`);
ALTER TABLE  `comments`
MODIFY  `comment_id`  int(255)  NOT  NULL  AUTO_INCREMENT,  AUTO_INCREMENT=1;

Cette requête créera une table comments avec quatre colonnes comment_idcomment_subjectcomment_text et comment_status. Tous les commentaires des utilisateurs seront entrés dans cette base de données et les notifications seront générées.


Créer une navigation et un formulaire pour afficher les notifications en temps réel

Je vais utiliser les formulaires de navigation de base et Bootstrap en déclarant le CDN. Copiez et collez le code dans le fichier index.php.

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
		<title>Notification avec PHP / Ajax</title>		
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	</head>
	<body>
		<br/>
		<br/>
		<div class="container">
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<div class="navbar-header">
						<a class="navbar-brand" href="#">Tuto PHP Notification</a>
					</div>
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<span class="label label-pill label-danger count" style="border-radius:10px;"></span>  
                                <span class="glyphicon glyphicon-bell" style="font-size:18px;"></span>
                            </a>
                            <ul class="dropdown-menu"></ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <br/>
            <form method="post" id="comment_form">
            	<div class="form-group">
            		<label>Sujet</label>
            		<input type="text" name="subject" id="subject" class="form-control">
            	</div>
                <div class="form-group">
                	<label>Commentaire</label>
                	<textarea name="comment" id="comment" class="form-control" rows="5"></textarea>
                </div>
                <div class="form-group">
                	<input type="submit" name="post" id="post" class="btn btn-info" value="Envoyer"/>
                </div>
            </form>
        </div>
    </body>
</html>


Insérer des enregistrements dans la base de données

Créez un fichier connect.php pour créer une connexion à la base de données. Ajoutez-y le code suivant :

<?php
	try{ 
		$con = new PDO('mysql:host=localhost;dbname=notification;charset=utf8', 'root', ''); 
	}catch (Exception $e){ 
		die('Erreur : ' . $e->getMessage()); 
	}
?>

Ensuite, je vais créer insert.php et insérer simplement de nouveaux commentaires dans MySQL via le code suivant :

<?php
	include("connect.php");
	
	if(isset($_POST["subject"])){
		$subject = (String) $_POST["subject"];
		$comment = (String) $_POST["comment"];
		$query = $con->prepare("INSERT INTO comments(comment_subject, comment_text) VALUES (?, ?)");
		$query->execute(array($subject, $comment))
	}
?>

Cet extrait de code est assez explicite. Il récupère les valeurs du formulaire, puis les transmet aux tables de la base de données.


Récupérer des enregistrements et envoyer des appelles à AJAX

Pour cette action, créez un nouveau fichier nommé fetch.php. Cela permettra de vérifier si la vue AJAX est mise à jour avec les nouveaux commentaires. Sinon, il sélectionnera des commentaires uniques et les affichera dans la fenêtre de notification. Une fois que l'utilisateur aura vu ces notifications, le statut sera mis à jour pour indiquer que ces notifications ont été examinées. Ici, je vais envoyer le tableau de données $ à l'appel AJAX pour mettre à jour la vue.

Collez le code suivant dans le fichier fetch.php :

<?php
	include('connect.php');


        if(isset($_POST['view'])){
            if($_POST["view"] !=  ''){
                $update_query = $con->prepare("UPDATE comments SET comment_status = ? WHERE comment_status = ?");
                $update_query->execute(array(1, 0));
            }


            $query = $con->prepare("SELECT * 
                FROM comments 
                ORDER BY comment_id DESC 
                LIMIT 5");
            $result = $query->execute;
            $output = '';


            if($result->RowCount() > 0){
                while($row = $result->fetch()){
                    $output  .=  '
                        <li>
                            <a href="#">
                                <strong>'.$row["comment_subject"].'</strong><br />
                                <small><em>'.$row["comment_text"].'</em></small>
                            </a>
                        </li>
                ';
                }
            }else{
                $output .= '<li><a href="#" class="text-bold text-italic">No Noti Found</a></li>';
            }


            $status_query = $con->prepare("SELECT * 
                FROM comments 
            WHERE comment_status = ?");
            $result_query = $status_query->executre(array(0));
            $count = $result_query->RowCount();
            $data  =  array(
                'notification'  =>  $output,
                'unseen_notification'  =>  $count
            );
        echo  json_encode($data);
    }
?>


Soumettre le formulaire et mettre à jour le HTML avec AJAX

Maintenant vient la partie intéressante !

A l'étape précédente, j'ai envoyé le tableau de données, qui sera attrapé par la réponse AJAX pour mettre à jour le code HTML interne dans la barre de navigation.

Maintenant, je vais créer une méthode submit dans jQuery pour valider les données d'entrée et sélectionner les dernières notifications que j'ai insérées dans insert.php. Dans la prochaine fonction onclick, je mettrai à jour le compte qui sera affiché dans la pilule rouge du Bootstrap. Voici le code complet que vous devez coller dans le fichier index.php.

<script>
        $(document).ready(function(){
        // Mettre à jour la vue avec les notifications en utilisant ajaxfunction load_unseen_notification(view = ''){
            $.ajax({
                url:"fetch.php",
                method:"POST",
                data:{view:view},
                dataType:"json",
                success:function(data){
                    $('.dropdown-menu').html(data.notification);
                    if(data.unseen_notification > 0){
                        $('.count').html(data.unseen_notification);
                    }
                }
            });
        }

    load_unseen_notification();
        // Soumettre le formulaire et obtenir de nouveaux enregistrements
        $('#comment_form').on('submit',  function(event){
            event.preventDefault();
            if($('#subject').val()  !=  ''  &&  $('#comment').val()  !=  ''){
                var  form_data  =  $(this).serialize();
                $.ajax({
                    url:"insert.php",
                    method:"POST",
                    data:form_data,
                    success:function(data){
                        $('#comment_form')[0].reset();
                        load_unseen_notification();
                    }
                });
            }else{
                alert("Les deux champs sont obligatoires");
            }
    });

// Chargement des nouvelles notifications
    $(document).on('click',  '.dropdown-toggle',  function(){
            $('.count').html('');
            load_unseen_notification('yes');
    });
    setInterval(function(){
            load_unseen_notification();;
            },  5000);
    });
</script>


Test du système de notification PHP

Il est maintenant temps de tester le système de notification.

Entrez l'objet et le commentaire, puis soumettez le formulaire. Vous recevrez la nouvelle notification lorsque vous cliquez sur la liste déroulante.

Cette pub permet au site de vivre ...
Voir d'autres articles
Créer son site
Première page (index.php)
Créer son site
Le langage HTML
Créer son site
Utilisation de Bootstrap
Cette pub permet au site de vivre ...