Dans ce didacticiel, nous allons créer un système de commentaires avec PHP, MySQL et AJAX (JavaScript). Le système de commentaires ajoutera des fonctionnalités à votre site Web (blog, site Web d'actualités, etc.) que vos invités pourront utiliser pour soumettre du contenu.
Le système de commentaires que nous allons créer aujourd'hui sera minimal, propre et rapide ! Et avec l'utilisation d'AJAX, vous pouvez implémenter le système de manière transparente sur n'importe quelle page Web.
Les commentaires soumis seront stockés et récupérés dans et à partir d'une base de données MySQL, et renseignés avec PHP et HTML.
Le package Advanced comprend des fonctionnalités supplémentaires et un lien de téléchargement vers le code source.
1. Mise en route
Vous devrez installer un environnement de serveur Web si vous souhaitez tester le système de commentaires sur votre propre système informatique. Suivez les instructions ci-dessous.
- Installez un package de solution d'environnement de serveur Web - Je vous recommande d'installer XAMPP .
- Si vous avez votre propre serveur de production (VPS, Dédié, etc.), vous devrez installer PHP, Apache, MySQL et phpMyAdmin (Remarque : ceux-ci sont déjà inclus avec XAMPP).
- Installez un éditeur de code. Vous pouvez utiliser le Bloc-notes mais je ne le recommande pas, utilisez plutôt l'un des éléments suivants : Notepad++ , Visual Studio Code ou Atom .
2. Création de la base de données et configuration des tables
Nous devons créer la base de données MySQL et créer la table des commentaires car c'est ce que nous utiliserons pour stocker et récupérer tous nos commentaires. Nous pouvons le faire avec phpMyAdmin.
Accédez à phpMyAdmin (par exemple http://localhost/phpmyadmin/) dans votre navigateur et suivez les instructions ci-dessous :
- Cliquez sur l' onglet Bases de données en haut
- Sous Créer une base de données , saisissez phpcomments dans la zone de texte
- Sélectionnez utf8_general_ci comme collation (UTF-8 est l'encodage par défaut dans HTML5)
- Cliquez sur Créer
Lorsque la base de données est sélectionnée, cliquez sur l'onglet SQL et exécutez le code d'instruction suivant :
SQL
CREATETABLEIFNOTEXISTS`comments`(
`id`int(11)NOTNULLAUTO_INCREMENT,
`page_id`int(11)NOTNULL,
`parent_id`int(11)NOTNULLDEFAULT'-1',
`name`varchar(255)NOTNULL,
`content`textNOTNULL,
`submit_date`datetimeNOTNULLDEFAULTCURRENT_TIMESTAMP,
PRIMARYKEY(`id`)
)ENGINE=InnoDBAUTO_INCREMENT=4DEFAULTCHARSET=utf8;
INSERTINTO`comments`(`id`,`page_id`,`parent_id`,`name`,`content`,`submit_date`)VALUES
(1,1,-1,'John Doe','Thank you for taking the time to write this article, I really enjoyed reading it!\r\n\r\nThank you, David!','2020-07-22 14:35:15'),
(2,1,11,'David Adams','It''s good to hear that you enjoyed this article.','2020-07-22 14:36:19'),
(3,1,-1,'Michael','I appreciate the time and effort you spent writing this article, good job!','2020-07-22 14:37:43');
L'instruction SQL ci-dessus créera la table des commentaires avec les colonnes suivantes :
- id — L'identifiant unique du commentaire.
- page_id - Cela déterminera quel commentaire est pour quelle page, ce sera l'ID de page que vous pouvez spécifier sur n'importe quelle page Web.
- parent_id - L'ID de commentaire parent que nous utiliserons pour les réponses aux commentaires.
- name — Le nom de l'utilisateur (par exemple Joe Bloggs).
- content — Le contenu du commentaire sera ce que l'utilisateur saisira via le formulaire.
- submit_date — La date à laquelle le commentaire a été publié.
Les données que nous insérons dans le tableau des commentaires seront à des fins de test.
Dans phpMyAdmin, la structure du tableau devrait ressembler à ceci :
3. Création des feuilles de style (CSS3)
Nous allons créer deux feuilles de style pour notre système de commentaires, l'une pour notre page d'accueil car cette page sera utilisée comme exemple de la façon dont nous allons implémenter le système de commentaires, et l'autre feuille de style sera utilisée pour le système de commentaires lui-même .
Les feuilles de style sont utilisées pour formater la mise en page de notre système de commentaires.
Créez le fichier style.css et ajoutez :
CSS
* {box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont,"segoe ui", roboto, oxygen, ubuntu, cantarell,"fira sans","droid sans","helvetica neue", Arial, sans-serif;
font-size:16px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}body {background-color:#FFFFFF;
margin:0;
}.navtop {background-color:#3f69a8;
height:60px;
width:100%;
border:0;
}.navtop div {display:flex;
margin:0auto;
width:1000px;
height:100%;
}.navtop div h1, .navtop div a {display:inline-flex;
align-items:center;
}.navtop div h1 {flex:1;
font-size:24px;
padding:0;
margin:0;
color:#ecf0f6;
font-weight:normal;
}.navtop div a {padding:020px;
text-decoration:none;
color:#c5d2e5;
font-weight:bold;
}.navtop div a i {padding:2px8px00;
}.navtop div a:hover {color:#ecf0f6;
}.content {width:1000px;
margin:0auto;
}.content h2 {margin:0;
padding:25px0;
font-size:22px;
border-bottom:1px solid#ebebeb;
color:#666666;
}
Créez le fichier comments.css et ajoutez :
CSS
.comments .comment_header {display:flex;
justify-content:space-between;
border-bottom:1px solid#eee;
padding:15px0;
margin-bottom:10px;
align-items:center;
}.comments .comment_header .total {color:#777777;
font-size:14px;
}.comments .comment_header .write_comment_btn {margin:0;
}.comments .write_comment_btn, .comments .write_comment button {display:inline-block;
background-color:#565656;
color:#fff;
text-decoration:none;
margin:10px000;
padding:5px10px;
border-radius:5px;
font-size:14px;
font-weight:600;
border:0;
}.comments .write_comment_btn:hover, .comments .write_comment button:hover {background-color:#636363;
}.comments .write_comment {display:none;
padding:20px010px0;
}.comments .write_comment textarea {width:100%;
padding:10px;
border:1px solid#ddd;
border-radius:5px;
height:150px;
margin-top:10px;
}.comments .write_comment input {display:block;
width:250px;
padding:10px;
border:1px solid#ddd;
border-radius:5px;
margin-top:10px;
}.comments .write_comment button {cursor:pointer;
}.comments .comment {padding-top:10px;
}.comments .comment .name {display:inline;
padding:05px3px0;
margin:0;
font-size:16px;
color:#555555;
}.comments .comment .date {color:#888888;
font-size:14px;
}.comments .comment .content {padding:5px05px0;
}.comments .comment .reply_comment_btn {display:inline-block;
text-decoration:none;
margin-bottom:10px;
font-size:14px;
color:#888888;
}.comments .comment .replies {padding-left:30px;
}
N'hésitez pas à personnaliser les feuilles de style ci-dessus et à ajouter vos propres règles.
4. Création du système de commentaires avec PHP
Nous allons maintenant commencer à coder notre système de commentaires avec PHP. Dans cette section, nous allons nous connecter à la base de données à l'aide de PDO, créer les fonctions de modèle et exécuter des requêtes à l'aide d'instructions préparées (empêche l'injection SQL).
Créez le fichier comments.php et ajoutez :
PHP
<?php// Update the details below with your MySQL details
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phpcomments';
try {
$pdo = new PDO('mysql:host=' . $DATABASE_HOST . ';dbname=' . $DATABASE_NAME . ';charset=utf8', $DATABASE_USER, $DATABASE_PASS);
} catch (PDOException $exception) {
// If there is an error with the connection, stop the script and display the error
exit('Failed to connect to database!');
}
Le code ci-dessus se connectera à notre base de données MySQL en utilisant l'interface PDO. N'oubliez pas de mettre à jour les variables de connexion si les vôtres sont différentes.
Ajouter après :
PHP
// Below function will convert datetime to time elapsed stringfunctiontime_elapsed_string($datetime,$full=false){
$now=newDateTime;
$ago=newDateTime($datetime);
$diff=$now->diff($ago);
$diff->w=floor($diff->d/7);
$diff->d-=$diff->w*7;
$string=array('y'=>'year','m'=>'month','w'=>'week','d'=>'day','h'=>'hour','i'=>'minute','s'=>'second');
foreach($stringas$k=>&$v){
if($diff->$k){
$v=$diff->$k.' '.$v.($diff->$k>1?'s':'');
}else{
unset($string[$k]);
}
}
if(!$full)$string=array_slice($string,0,1);
return$string?implode(', ',$string).' ago':'just now';
}
La fonction ci-dessus convertira notre date et heure en une chaîne écoulée, dans la section des commentaires, cela apparaîtra comme "il y a 1 jour", etc.
Ajouter après :
PHP
// This function will populate the comments and comments replies using a loopfunctionshow_comments($comments,$parent_id=-1){
$html='';
if($parent_id!=-1){
// If the comments are replies sort them by the "submit_date" column
array_multisort(array_column($comments,'submit_date'),SORT_ASC,$comments);
}
// Iterate the comments using the foreach loop
foreach($commentsas$comment){
if($comment['parent_id']==$parent_id){
// Add the comment to the $html variable
$html.='
<divclass="comment">
<div>
<h3class="name">' . htmlspecialchars($comment['name'], ENT_QUOTES) . '</h3>
<spanclass="date">' . time_elapsed_string($comment['submit_date']) . '</span>
</div>
<pclass="content">' . nl2br(htmlspecialchars($comment['content'], ENT_QUOTES)) . '</p>
<aclass="reply_comment_btn"href="#"data-comment-id="' . $comment['id'] . '">Reply</a>
' . show_write_comment_form($comment['id']) . '
<divclass="replies">
' . show_comments($comments, $comment['id']) . '
</div>
</div>
';
}
}
return$html;
}
Cette fonction remplira le tableau de commentaires et renverra la valeur au format HTML. Les réponses sont remplies en exécutant la même fonction avec l'ID de commentaire parent.
le htmlspecialchars convertira les caractères spéciaux en entités HTML, ce qui empêchera les attaques XSS.
Ajouter après :
PHP
// This function is the template for the write comment formfunctionshow_write_comment_form($parent_id=-1){
$html='
<divclass="write_comment"data-comment-id="' . $parent_id . '">
<form>
<input name="parent_id"type="hidden"value="' . $parent_id . '">
<input name="name"type="text"placeholder="Your Name"required>
<textarea name="content"placeholder="Write your comment here..."required></textarea>
<button type="submit">Submit Comment</button>
</form>
</div>
';
return$html;
}
Cette fonction contient le modèle de notre formulaire "rédiger un commentaire", qui sera utilisé par les visiteurs pour rédiger des commentaires et les soumettre.
Ajouter après :
PHP
// Page ID needs to exist, this is used to determine which comments are for which pageif(isset($_GET['page_id'])){
// Check if the submitted form variables exist
if(isset($_POST['name'],$_POST['content'])){
// POST variables exist, insert a new comment into the MySQL comments table (user submitted form)
$stmt=$pdo->prepare('INSERT INTO comments (page_id, parent_id, name, content, submit_date) VALUES (?,?,?,?,NOW())');
$stmt->execute([$_GET['page_id'],$_POST['parent_id'],$_POST['name'],$_POST['content']]);
exit('Your comment has been submitted!');
}
// Get all comments by the Page ID ordered by the submit date
$stmt=$pdo->prepare('SELECT * FROM comments WHERE page_id = ? ORDER BY submit_date DESC');
$stmt->execute([$_GET['page_id']]);
$comments=$stmt->fetchAll(PDO::FETCH_ASSOC);
// Get the total number of comments
$stmt=$pdo->prepare('SELECT COUNT(*) AS total_comments FROM comments WHERE page_id = ?');
$stmt->execute([$_GET['page_id']]);
$comments_info=$stmt->fetch(PDO::FETCH_ASSOC);
}else{
exit('No page ID specified!');
}?>
Le code ci-dessus vérifiera si la variable d'ID de page est spécifiée car elle est utilisée pour déterminer quels commentaires afficher sur quelle page. Si l'ID de page n'est pas spécifié, arrêtez le script et affichez l'erreur.
Les commentaires sont ensuite extraits de la base de données (classés par date de soumission dans l'ordre décroissant) et sont stockés dans un tableau associatif. Le nombre total de commentaires est calculé à l'aide de MySQLCOUNT(*) une fonction.
Ajouter après :
PHP
<div class="comment_header"><span class="total"><?=$comments_info['total_comments']?>comments</span>
<a href="#" class="write_comment_btn" data-comment-id="-1">Write Comment</a>
</div> <?=show_write_comment_form()?> <?=show_comments($comments)?>
Ceci est le modèle de notre système de commentaires, les commentaires sont remplis en exécutant le show_comments() fonction avec la variable de tableau associatif de commentaires que nous avons précédemment définie.
le show_write_comment_form() affichera le formulaire que les visiteurs peuvent utiliser pour écrire et soumettre des commentaires.
C'est tout ce dont nous avons besoin pour coder dans ce fichier. L'étape suivante consiste à implémenter le système de commentaires sur une page Web à l'aide d'AJAX.
5. Implémentation du système de commentaires dans notre page Web avec AJAX
Maintenant que nous avons créé notre fichier PHP côté serveur, nous pouvons implémenter le système de commentaires sur notre page Web.
Créez le fichier index.html et ajoutez :
HTML
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>Comments System</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="comments.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navtop">
<div>
<h1>Comments System</h1>
</div>
</nav>
<div class="content home">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique vel leo a vestibulum. Praesent varius ex elit, vitae pretium felis laoreet in. Nullam sit amet pretium nulla. Aliquam convallis sem vitae tincidunt pulvinar. Integer id ex efficitur, vulputate ante et, vulputate risus. Maecenas ac nunc est. Donec nisl turpis, aliquet quis turpis mollis, dictum pulvinar est. Vivamus ut suscipit turpis. Sed metus leo, dignissim non vehicula non, tincidunt ac velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nunc id lacinia mauris. Aliquam pellentesque orci et neque egestas, vel lobortis risus egestas. Curabitur non rhoncus nibh. Donec ante lorem, luctus eget ex eget, malesuada ornare nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam consectetur egestas magna non dignissim. Pellentesque sit amet mollis mauris. Nunc quis arcu ac diam tempus auctor. Proin nec commodo nisl. Duis gravida lorem quis ipsum mattis, id finibus tortor pretium. Nam maximus pretium nisi, ullamcorper tincidunt dolor sagittis ac. Donec suscipit neque lectus, id fringilla tortor pellentesque ut. Maecenas quam lectus, pharetra vitae commodo sit amet, iaculis quis massa. Aenean varius quam quis posuere viverra. Nullam varius condimentum sem, sit amet bibendum augue porttitor in.</p>
<p>Morbi purus turpis, finibus vel fermentum nec, egestas eu elit. Fusce eleifend ac massa sit amet eleifend. Suspendisse sit amet facilisis augue. Praesent vitae dui lacus. Suspendisse sodales nisl massa, quis vehicula ante rutrum vitae. Proin scelerisque vestibulum purus, ac ultrices sapien malesuada vel. Proin sit amet tristique orci. Vestibulum in tortor ante.</p>
</div>
</body>
</html>
Ceci est la page d'exemple que nous utiliserons pour afficher nos commentaires, le fichier n'a pas besoin d'être au format PHP car nous utiliserons AJAX pour récupérer les commentaires de notre page comments.php .
Ajoutez ce code juste avant la balise body de fermeture :
HTML
<div class="comments"></div> <script>
const comments_page_id = 1; // This number should be unique on every page
fetch("comments.php?page_id=" + comments_page_id).then(response => response.text()).then(data => {
document.querySelector(".comments").innerHTML = data;
document.querySelectorAll(".comments .write_comment_btn, .comments .reply_comment_btn").forEach(element => {
element.onclick = event => {
event.preventDefault();
document.querySelectorAll(".comments .write_comment").forEach(element => element.style.display = 'none');
document.querySelector("div[data-comment-id='" + element.getAttribute("data-comment-id") + "']").style.display = 'block';
document.querySelector("div[data-comment-id='" + element.getAttribute("data-comment-id") + "'] input[name='name']").focus();
};
});
document.querySelectorAll(".comments .write_comment form").forEach(element => {
element.onsubmit = event => {
event.preventDefault();
fetch("comments.php?page_id=" + comments_page_id, {
method: 'POST',
body: new FormData(element)
}).then(response => response.text()).then(data => {
element.parentElement.innerHTML = data;
});
};
});
});
</script>
Le code JavaScript ci-dessus récupérera les commentaires à l'aide de l' API de récupération et les ajoutera au conteneur de commentaires.
Si vous comptez ajouter des commentaires sur une autre page, vous devrez mettre à jour lecomments_page_idvariable car le numéro doit être unique sur chaque page, à moins que vous n'affichiez les mêmes commentaires.
Et maintenant, si nous naviguons vers ce fichier dans notre navigateur Web (via localhost), nous devrions voir quelque chose comme ceci :
N'oubliez pas de tester les fonctionnalités du système de commentaires et assurez-vous que tout fonctionne comme il se doit.
Conclusion
Toutes nos félicitations! Vous avez créé avec succès un système de commentaires avec PHP, MySQL et AJAX.
Et ensuite ? Envisagez d'implémenter vos propres fonctionnalités dans le système et d'intégrer le système à vos propres projets.
N'hésitez pas à partager cet article et à laisser un commentaire si vous l'avez apprécié.
Si vous souhaitez nous soutenir, envisagez d'acheter un package ci-dessous, cela nous aidera grandement à créer plus de didacticiels et à maintenir notre serveur opérationnel, les packages incluent un code amélioré et davantage de fonctionnalités.