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_id, comment_subject, comment_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.
