Aller au menu - Aller au contenu

Icône TP : un blog avec des commentaires

Par Avatar Mathieu Nebra (M@teo21)
Mise à jour : 03/04/2010
Difficulté : Facile Facile Creative Commons BY-NC-SA
133 390 visites depuis 7 jours, dont 1 306 sur ce chapitre classé 2/786
Le blog est probablement l'application la plus courante que l'on réalise en PHP avec MySQL. Bien qu'il soit conseillé d'utiliser un système tout prêt (en téléchargeant Wordpress ou Dotclear par exemple), en créer un de toutes pièces est un excellent exercice.

Le but de ce TP n'est pas de vous faire créer un blog de A à Z, car ce serait un peu long, mais plutôt d'appliquer les dernières notions de SQL que vous venez d'apprendre sur les fonctions et les dates en SQL.

Chaque billet du blog possèdera ses propres commentaires. Nous nous concentrerons dans ce TP uniquement sur l'affichage des billets et des commentaires, ce sera à vous ensuite de compléter le blog pour y insérer des formulaires d'ajout et de modification du contenu. ;)
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Instructions pour réaliser le TP

Pour ce TP comme pour le précédent, nous allons nous préparer ensemble en passant en revue les points suivants :

  • Prérequis
  • Objectifs
  • Structure de la table MySQL
  • Structure des pages PHP


Prérequis



Dans ce TP, nous allons nous concentrer sur la base de données. Nous aurons besoin des notions suivantes :

  • Lire dans une table
  • Utilisation de PDO et des requêtes préparées
  • Utilisation de fonctions SQL
  • Manipulation des dates en SQL


Objectifs



Commençons par définir ce qu'on veut arriver à faire. Un système de blog avec des commentaires, oui, mais encore ? Il faut savoir jusqu'où on veut aller, ce qu'on a l'intention de réaliser et ce qu'on va mettre de côté.

Si on est trop ambitieux, on risque de le regretter : on pourrait en effet y passer des jours et ce TP deviendrait long, complexe et fastidieux. Je vous propose donc de réaliser l'affichage de base d'un blog et des commentaires associés aux billets, et je vous inviterai par la suite à l'améliorer pour créer l'interface de gestion des billets et d'ajout de commentaires.

L'ajout de billets et de commentaires ne sont donc pas au programme de ce TP, ce qui va nous permettre de nous concentrer sur leur affichage.

Les pages à développer



Il y aura 2 pages à réaliser :

  • index.php : liste des 5 derniers billets
  • commentaires.php : affichage d'un billet et de ses commentaires


Voici à quoi devrait ressembler la liste des 5 derniers billets (index.php) :

Liste des billets


Voici à quoi devrait ressembler l'affichage d'un billet et de ses commentaires (commentaires.php) :

Liste des commentaires


Comme vous pouvez le constater, l'affichage est minimaliste. Le but n'est pas de réaliser le design de ce blog mais bel et bien d'avoir quelque chose de fonctionnel. ;)

Le CSS



Voici le fichier CSS (très simple) que j'utiliserai pour ce TP :

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
h1, h3
{
    text-align:center;
}
h3
{
    background-color:black;
    color:white;
    font-size:0.9em;
    margin-bottom:0px;
}
.news p
{
    background-color:#CCCCCC;
    margin-top:0px;
}
.news
{
    width:70%;
    margin:auto;
}

a
{
    text-decoration: none;
    color: blue;
}


Libre à vous de l'utiliser ou non, de le modifier, bref faites-en ce que vous voulez. :)

Structure des tables MySQL



Eh oui, cette fois nous allons travailler avec non pas une mais deux tables :

  • billets : liste des billets du blog
  • commentaires : liste des commentaires du blog pour chaque billet


On va vraiment stocker tous les commentaires dans une seule table, même s'ils concernent des billets différents ?


Oui. C'est la bonne façon de faire. Tous les commentaires, quel que soit le billet auquel ils se rapportent, seront stockés dans la même table. On pourra faire le tri facilement à l'aide d'un champ id_billet qui indiquera pour chaque commentaire le numéro du billet associé.

Voici la structure que je propose pour la table billets :

  • id (int) : identifiant du billet, clé primaire et auto_increment
  • titre (varchar 255) : titre du billet
  • contenu (text) : contenu du billet
  • date_creation (datetime) : date et heure de création du billet


De même, voici la structure que l'on va utiliser pour la table commentaires :

  • id (int) : identifiant du commentaire, clé primaire et auto_increment
  • id_billet (int) : identifiant du billet auquel correspond ce commentaire
  • auteur (varchar 255) : auteur du commentaire
  • commentaire (text) : contenu du commentaire
  • date_commentaire (datetime) : date et heure à laquelle le commentaire a été posté.


C'est vraiment la base. Vous pouvez rajouter d'autres champs si vous le désirez. Par exemple, on n'a pas défini de champ auteur pour les billets.

Notez qu'il est possible d'ajouter des champs à tout moment, comme nous l'avons vu il y a peu. L'interface phpMyAdmin propose des options pour cela.


Comme nous n'allons pas créer les formulaires d'ajout de billets et de commentaires dans un premier temps, je vous conseille de remplir vous-mêmes les tables à l'aide de phpMyAdmin après les avoir créées.

Si vous êtes du genre flemmard, vous pouvez aussi télécharger mes tables toutes prêtes avec quelques données à l'intérieur, mais je vous recommande de vous entraîner à les créer vous-mêmes.

Télécharger les tables du blog



Structure des pages PHP



Etant donné que nous nous concentrons sur l'affichage, la structure des pages reste très simple :

Structure des pages du blog


Le visiteur arrive d'abord sur l'index où sont affichés les derniers billets. S'il choisit d'afficher les commentaires de l'un d'eux, il charge la page commentaires.php qui affichera le billet sélectionné ainsi que tous ses commentaires. Bien entendu, il faudra envoyer un paramètre à la page commentaires.php pour qu'elle sache quoi afficher, je vous laisse deviner lequel. ;)

Il sera possible de revenir à la liste des billets depuis les commentaires à l'aide d'un lien de retour.

A vous de jouer !



Je vous en ai assez dit, la réalisation de ce TP devrait être relativement simple pour vous si vous avez bien suivi jusqu'ici.

N'oubliez pas les éléments essentiels de sécurité, notamment la protection de tous les textes par htmlspecialchars(). Et ne faites jamais confiance à l'utilisateur ! :p
Retour en haut

Correction

Si vous lisez ces lignes, c'est que vous devez être venu à bout de ce TP. Celui-ci ne présentait pas de difficultés particulières mais il était l'occasion de vous exercer un peu plus avec MySQL tout en faisant appel aux fonctions et dates en SQL.

index.php : la liste des derniers billets



Le TP est constitué de 2 pages, voici la correction que je propose pour la page index.php qui liste les derniers billets du blog :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title>Mon blog</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="style.css" rel="stylesheet" type="text/css" /> 
    </head>
        
    <body>
        <h1>Mon super blog !</h1>
        <p>Derniers billets du blog :</p>
 
<?php
// Connexion à la base de données
try
{
    $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
    $bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '', $pdo_options);
	
    // On récupère les 5 derniers billets
    $req = $bdd->query('SELECT id, titre, contenu, DATE_FORMAT(date_creation, \'%d/%m/%Y à %Hh%imin%ss\') AS date_creation_fr FROM billets ORDER BY date_creation DESC LIMIT 0, 5');
    
    while ($donnees = $req->fetch())
    {
    ?>
    <div class="news">
        <h3>
            <?php echo htmlspecialchars($donnees['titre']); ?>
            <em>le <?php echo $donnees['date_creation_fr']; ?></em>
        </h3>
        
        <p>
        <?php
        // On affiche le contenu du billet
        echo nl2br(htmlspecialchars($donnees['contenu']));
        ?>
        <br />
        <em><a href="commentaires.php?billet=<?php echo $donnees['id']; ?>">Commentaires</a></em>
        </p>
    </div>
    <?php
    } // Fin de la boucle des billets
    $req->closeCursor();
    
}
catch(Exception $e)
{
    die('Erreur : '.$e->getMessage());
}
?>

</body>
</html>


Vous constaterez que tous les textes, y compris les titres, sont protégés par htmlspecialchars(). J'utilise par ailleurs une fonction qui doit être nouvelle pour vous : nl2br(). Elle permet de convertir les retours à la ligne en balises HTML <br />. C'est une fonction dont vous aurez sûrement besoin pour conserver facilement les retours à la ligne saisis dans les formulaires.

Côté SQL, cette page ne fait qu'une seule requête : celle qui récupère les 5 derniers billets.

Code : SQL
1
SELECT id, titre, contenu, DATE_FORMAT(date_creation, '%d/%m/%Y à %Hh%imin%ss') AS date_creation_fr FROM billets ORDER BY date_creation DESC LIMIT 0, 5


On récupère toutes les données qui nous intéressent dans cette table, en mettant en forme au passage la date. Pour cela, on utilise la fonction scalaire DATE_FORMAT qui nous permet d'obtenir une date dans un format français.

Les billets sont ordonnés par date décroissante, le plus récent étant donc en haut de la page.

Enfin, chaque billet est suivi d'un lien vers la page commentaires.php en transmettant le numéro du billet dans l'URL :

Code : PHP
1
<a href="commentaires.php?billet=<?php echo $donnees['id']; ?>">Commentaires</a>


commentaires.php : affichage d'un billet et de ses commentaires



Cette page présente des similitudes avec la précédente mais elle est un peu plus complexe. En effet, pour afficher un billet ainsi que ses commentaires, nous avons besoin de faire 2 requêtes SQL :

  • Une requête pour récupérer le contenu du billet
  • Une requête pour récupérer les commentaires associés au billet


Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title>Mon blog</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="style.css" rel="stylesheet" type="text/css" /> 
    </head>
        
    <body>
        <h1>Mon super blog !</h1>
        <p><a href="index.php">Retour à la liste des billets</a></p>
 
<?php
// Connexion à la base de données
try
{
    $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
    $bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '', $pdo_options);
    
    // Récupération du billet
    $req = $bdd->prepare('SELECT id, titre, contenu, DATE_FORMAT(date_creation, \'%d/%m/%Y à %Hh%imin%ss\') AS date_creation_fr FROM billets WHERE id = ?');
    $req->execute(array($_GET['billet']));
    $donnees = $req->fetch();
    ?>
    
    <div class="news">
        <h3>
            <?php echo htmlspecialchars($donnees['titre']); ?>
            <em>le <?php echo $donnees['date_creation_fr']; ?></em>
        </h3>
        
        <p>
        <?php
        echo nl2br(htmlspecialchars($donnees['contenu']));
        ?>
        </p>
    </div>
    
    <h2>Commentaires</h2>
    
    <?php
    $req->closeCursor(); // Important : on libère le curseur pour la prochaine requête
    
    // Récupération des commentaires
    $req = $bdd->prepare('SELECT auteur, commentaire, DATE_FORMAT(date_commentaire, \'%d/%m/%Y à %Hh%imin%ss\') AS date_commentaire_fr FROM commentaires WHERE id_billet = ? ORDER BY date_commentaire');
    $req->execute(array($_GET['billet']));
    
    while ($donnees = $req->fetch())
    {
    ?>
    <p><strong><?php echo htmlspecialchars($donnees['auteur']); ?></strong> le <?php echo $donnees['date_commentaire_fr']; ?></p>
    <p><?php echo nl2br(htmlspecialchars($donnees['commentaire'])); ?></p>
    <?php
    } // Fin de la boucle des commentaires
    $req->closeCursor();

}
catch(Exception $e)
{
    die('Erreur : '.$e->getMessage());
}
?>
</body>
</html>


Ce code est un peu gros mais on peut le découper en 2 parties :

  • Affichage du billet
  • Affichage des commentaires


La requête qui récupère le billet ressemble à celle de la page précédente, à la différence près qu'il s'agit d'une requête préparée car elle dépend d'un paramètre : l'id du billet (fourni par $_GET['billet'] qu'on a reçu dans l'URL).

Comme on récupère forcément un seul billet, il est inutile de faire une boucle. L'affichage est identique à celui qu'on faisait pour chaque billet sur la page précédente, à l'exception du lien vers la page des commentaires qui ne sert plus à rien (puisque nous sommes sur la page des commentaires :D ).

On pense à libérer le curseur après l'affichage du billet avec :

Code : PHP
1
2
3
<?php
$req->closeCursor();
?>


En effet, cela permet de "terminer" le traitement de la requête pour pouvoir traiter la prochaine requête sans problème.

La récupération des commentaires se fait ensuite via la requête suivante :

Code : SQL
1
SELECT auteur, commentaire, DATE_FORMAT(date_commentaire, '%d/%m/%Y à %Hh%imin%ss') AS date_commentaire_fr FROM commentaires WHERE id_billet = ? ORDER BY date_commentaire


Vous noterez que l'on ne se connecte à la base de données qu'une fois par page. Pas besoin donc de se reconnecter pour effectuer cette seconde requête.


On récupère avec cette requête tous les commentaires liés au billet correspondant à l'id reçu dans l'URL. Les commentaires sont triés par date croissante comme c'est habituellement le cas sur les blogs, mais vous pouvez changer cet ordre si vous le désirez, c'est facile. ;)
Retour en haut

Aller plus loin

Ce TP ne concernait que la structure de base d'un blog avec commentaires. Comme il est relativement simple, les possibilités d'extension ne manquent pas. ^^

Alors, comment pourrait-on améliorer notre blog ? Voici quelques suggestions que je vous conseille d'étudier, cela vous fera progresser. :)

Un formulaire d'ajout de commentaire



Sur la page commentaires.php, rajoutez un formulaire pour que n'importe quel visiteur puisse poster un commentaire.

Ce formulaire redirigera vers une page qui enregistrera le commentaire puis qui redirigera vers la liste des commentaires, de la même façon qu'on l'avait fait avec le Mini-Chat.

Structure des pages avec ajout de commentaire


C'est de votre niveau vous avez déjà réussi à le faire, allez-y ! ;)

Utiliser les includes



Certaines portions de codes sont un peu répétitives. Par exemple, on retrouve le même bloc affichant un billet sur la page des billets sur celle des commentaires.

Il serait peut-être plus simple d'avoir un seul code dans un fichier que l'on inclurait ensuite depuis index.php et commentaires.php. :)

Vérifier si le billet existe sur la page des commentaires



Imaginez que le visiteur s'amuse à modifier l'URL de la page des commentaires. Par exemple s'il essaie d'accéder à commentaires.php?billet=819202 et que le billet no 819202 n'existe pas, il n'aura pas de message d'erreur (en fait le contenu de la page sera vide). Pour que votre site paraisse un peu plus sérieux, vous devriez afficher une erreur.

Pour cela, regardez si la requête qui récupère le contenu du billet renvoie des données. Pour cela, le plus simple est de vérifier après le fetch() si la variable $donnees est vide ou non grâce à la fonction empty().

Ainsi, si la variable est vide, vous pourrez afficher un message d'erreur comme "Ce billet n'existe pas". Sinon, vous afficherez le reste de la page normalement. :)

Paginer les billets et commentaires



Quand vous commencerez à avoir beaucoup de billets (et beaucoup de commentaires) vous voudrez peut-être ne pas tout afficher sur la même page. Pour cela, il faut créer un système de pagination.

Supposons que vous souhaitiez afficher uniquement 5 billets par page. Si vous voulez afficher des liens vers chacune des pages, il faut savoir combien votre blog comporte de billets.

Par exemple, si vous avez 5 billets, il n'y aura qu'une seule page. Si vous avez 12 billets, il y aura 3 pages. Pour connaître le nombre de billets, une requête SQL avec COUNT(*) est indispensable :

Code : SQL
1
SELECT COUNT(*) AS nb_billets FROM billets


Une fois ce nombre de billets récupéré, vous pouvez trouver le nombre de pages et créer des liens vers chacune d'elles :

Page : 1 2 3 4

Chacun de ces nombres amènera vers la page correspondante et ajoutera dans l'url le numéro de celle-ci :

Code : HTML
1
<a href="index.php?page=2">2</a>


A l'aide du paramètre $_GET['page'] vous pourrez déterminer quelle page vous devez afficher. A vous d'adapter la requête SQL pour commencer uniquement à partir du billet no X. Par exemple, si vous demandez à afficher la page 2, vous voudrez afficher uniquement les billets no 5 à 9 (n'oubliez pas qu'on commence à compter à partir de 0 !). Revoyez la section sur LIMIT au besoin.

Et si aucun numéro de page n'est défini dans l'URL, lorsqu'on arrive la première fois sur le blog ?


Dans ce cas, si $_GET['page'] n'est pas définie, vous devrez considérer que le visiteur veut afficher la page 1 (la plus récente).

Ca demande un peu de réflexion mais le jeu en vaut la chandelle ! N'hésitez pas à demander de l'aide sur les forums au besoin. :)

Réaliser une interface d'administration du blog



C'est probablement l'amélioration la plus longue. Il faudra créer des pages qui permettent de modifier, supprimer et ajouter des nouveaux billets.

Un problème cependant : comment protéger l'accès à ces pages ? En effet, vous devriez être le seul à avoir accès à votre interface d'administration, sinon n'importe qui pourra ajouter des billets s'il connaît l'URL de la page d'administration !

Plusieurs techniques existent pour protéger l'accès à l'administration. Le plus simple dans ce cas est de créer un sous-dossier admin qui contiendra tous les fichiers d'administration du blog (ajouter.php, modifier.php, supprimer.php...). Ce dossier admin sera entièrement protégé à l'aide des fichiers .htaccess et .htpasswd, ce qui fait que personne ne pourra charger les pages qu'il contient à moins de connaître le login et le mot de passe.

Structure des pages avec admin


Pour en savoir plus sur la protection d'un dossier avec ces fichiers .htaccess et .htpasswd, je vous invite à consulter cette annexe au cours. :)

Allez, au boulot ! :)
Retour en haut
Je vous avais prévenu : ce TP ne vous montre que les bases du blog (l'affichage) mais c'est à vous de jouer si vous voulez construire le reste du blog ! Réalisez les améliorations que je propose, cela vous prendra sûrement un peu de temps mais vous progresserez beaucoup en faisant cela.

N'hésitez pas à vous faire aider si une amélioration vous bloque trop longtemps. N'abandonnez pas à la première difficulté ! ;)
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
80 commentaires pour "TP : un blog avec des commentaires"
Note moyenne : 3.61 / 4 (2518 votes)
Pseudo Commentaire
Hors ligne RedKak # Posté le 04/04/2012 à 20:06:28

En fait j'ai plus de problème, il fallait juste que je recharge la page "billet"!
ça marche maintenant!
Hors ligne franki29 # Posté le 11/04/2012 à 03:25:20
quebecois de souche
Avatar

Avis : Très bon

super TP le premier je l'ai eu vite mais lui alors... j'ai du regarder quelquefois le corriger et par la suite j'ai réussi(sans css)
Hors ligne Raynald # Posté le 11/04/2012 à 13:42:25
Avatar

 Bonjour, est ce qu'il est possible de trouver les fichiers sources de ce TP, avec toutes les pages ?

index.php
commentaires.php
commentaires_post.php

La pagination et l'admin serait un plus :)


Merci :)
Hors ligne julien077 # Posté le 22/04/2012 à 09:42:18

Salut Raynald,

Tu trouveras dans les messages précédents les pages index, commentaires et commentaires_post avec pagination.
Mais à mon avis le but est de chercher d'abord par soi-même pour progresser
A+
Hors ligne Meriaam # Posté le 26/04/2012 à 01:28:29

SVP, voulez-vs m'aider de savoir ou est 'billet' ? RedKak a parlé de recharge de la page 'billet' .. ou as tu la trouver? comment ça marche?
Merciiiii d'avance pr votre aide :)

Voir tous les commentaires