Création d’un système News (un blog) en PHP

Création d’un système News

L’objectif de ce TP est de créer un système de news qui permettra d’ajouter des news qui seront lus par les visiteurs, qui par la suite, auront la possibilité de poster des commentaires. Notre TP aura deux grandes parties : la partie administration qui permettra à l’administrateur d’ajouter, modifier et supprimer les news ; et la partie qui permettra aux visiteurs de consulter les news. Bref, si vous voyez, c’est un blog que nous allons coder.

Pour mieux aborder ce TP, nous allons le découper en plusieurs parties :

Les tables
Ajouter des news
Afficher les news
Supprimer des news
Modifier des news
Poster et afficher les commentaires

1. Les tables

Faites-moi le plaisir de me créer ces deux tables :

Table news :

id (int) : identifiant du news, clé primaire et auto_increment ;
titre (varchar 255) : titre du news ;
contenu (text) : contenu du news ;
url (varchar 500) : le lien de l’image du news
date(timestamp) : la date et l’ heure de création du news.

Table commentaires :

id (int) : identifiant du commentaire, clé primaire et auto_increment ;
id_news (int) : identifiant du news. Elle nous permettra de savoir qu’un tel commentaire appartient à un tel news;
auteur (varchar 255) : auteur du commentaire ;
commentaire (text) : contenu du commentaire ;
date (timestamp) : la date et l’heure auxquelles le commentaire a été posté.

2. Ajouter des news

La page qui nous permet d’ajouter les news s’appelle add_news.php. Il contient le formulaire et le code PHP traitant les données. Bien évidement, vous pouvez bien le faire, car nous avons déjà fait quelque chose de semblable.

Pour vous montrer comment va ressembler notre formulaire, voici une capture d’écran.

Voici le code html de notre formulaire,si vous ne comprenez pas lisez notre cours sur les formulaires:
<form method="post" action="add_news.php"> Titre du news : <input name="titre"/><br/> Contenu:<br/> contenu :<br/> <textarea name="contenu" rows="10" cols="45"> </textarea> <br/> url de l'image : <input name="url"/><br/> <input type="submit" value="Envoyer"/> </form>

Voici le code PHP bien commenté:
<?php mysql_connect("localhost", "root", "");// on se connecte a Mysql mysql_select_db("samo");// on selectionne la base if (isset($_POST['titre']) && isset($_POST['contenu'])) { $titre = addslashes($_POST['titre']); $contenu = addslashes($_POST['contenu']); $url = addslashes($_POST['url']); //on verifie si le champ titre et le champ contenu ne sont pas vides if ($_POST['titre'] != NULL && $_POST['contenu'] != NULL ) { //on balance tous dans la table mysql_query ("insert into news values ('', '". $titre ."','". $contenu ."', '" .$url."', '" .time()."')"); //on confirme l'envoie des données echo"news ajouté."; } else// sinon on affiche un message d'erreur { echo"verifiez si le titre et le contenu ont été saisis."; } } mysql_close();// on ferme la connexion ?>

3. Afficher les news

La page qui doit afficher les news, est nommée news.php. Bien évidement, vous pouvez la nommer comme vous voulez. L’objectif ici est d’afficher au maximum 3 news à chaque page. On compte le nombre de pages, puis on affiche des numéros qui pointent vers les pages. Comme on l’a fait sur notre TP concernant la réalisation d’un livre d’or.
A la fin de chaque news, on met un lien qui pointe vers la page qui nous permet de lire et d’ajouter des commentaires sur ce news.

Vous voyez ce que je veux dire ?

Sans trop bavarder, voici le code PHP bien commenté :
<?php mysql_connect("localhost","root",""); mysql_select_db("samo"); // le nombre de news (3) qu'on veut afficher dans une page $MessagesPerPage = 3; // On récupère le nombre total de messages $return = mysql_query('SELECT COUNT(*) AS nb_messages FROM news'); $data = mysql_fetch_array($return); $Messages = $data['nb_messages']; // On calcule le nombre de pages à créer $Pages = ceil($Messages / $MessagesPerPage); // Puis on fait une boucle pour écrire les liens vers chacune des pages echo 'Page : '; for ($i = 1 ; $i <= $Pages ; $i++) { echo '<a href="news.php?page=' . $i . '">' . $i . '</a> '; } // On récupère les 3 dernières news if (isset($_GET['page'])) { $page = $_GET['page']; // On récupère le numéro de la page indiqué dans l'adresse ( exemple news.php?page=4) } else // si non la variable n'existe pas, c'est la première fois qu'on charge la page { $page = 1; // On affiche la page 1, la page par defaut } $firstmessage = ($page - 1) * $MessagesPerPage; $result = mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT ' . $firstmessage . ', ' . $MessagesPerPage); while ($data = mysql_fetch_array($result)) { ?> <h2> <?php echo stripslashes($data['titre']); //on recupère titre ?> </h2> <em> Ajouté le <?php echo date('d/m/Y à H\hi', $data['timestamp']); //on recupère la date ?></em> <BR> <?php $url = $data['url']; // s'il n'y a l'url de l'image, on affiche le contenu if (empty($url)) { $contenu = nl2br(stripslashes($data['contenu'])); echo $contenu; } else// sinon on affiche l'image puis le contenu { ?> <img alt="image de news" src="<?php echo $url ?>"/> <?php $contenu = nl2br(stripslashes($data['contenu'])); echo $contenu; } //Nous affichons le lien nous dirigeant vers les commentaires ?> <br/><em><a href="commentaires.php?news=<?php echo $data['id']; ?>">Commentaires</a></em> <?php } // Fin de la boucle des news ?>

4. Supprimer des news

Le but de cette partie est de pouvoir supprimer les news qu’on n’a pas besoin. Pour cela, nous allons afficher les titres des news et placer un lien qui nous permettra de supprimer le news qu’on veut supprimer en se basant sur son id. La page qui nous permet de lister les titres de news afin de pouvoir supprimer les news non désirés, s’appelle delete_news.php.
Sans trop bavarder, voici le code PHP bien commenté : <?php //d'abord on va se connecter à la bas mysql_connect("localhost", "root","" ); mysql_select_db("samo"); // on se demande de supprimer le news s'il existe if(isset($_GET['deleteID'])) { //on va travailler à partir de l'id du news $id = intval($_GET['deleteID']); // on supprime le news selectionné $result = mysql_query("DELETE FROM `news` WHERE id='$id'"); echo mysql_error(); // si le news a été supprimé, on affiche la confirmation if($result) echo "Message supprimé"; } // on peut aussi ajouter un else, pour dire le news n'a pas été trouvé ?> <table border="1"><tr> <th>Titre</th> <th>Supprimer</th> </tr> <?php // On selectionne les news par ordre( du nouveau à l'ancien) $return = mysql_query('SELECT * FROM news ORDER BY id DESC'); /* On fait une boucle while pour lister les news en affichant leurs titres un lien "supprimer" pour chaque news */ while ($data = mysql_fetch_array($return)) { ?> <tr> <td><?php echo stripslashes($data['titre']); ?></td> <td><?php echo '<a href="delete_news.php?deleteID=' . $data['id'] . '">'; ?>Supprimer</a></td> </tr> <?php } // Fin de la boucle ?> </table>

4. Modifier des news

Il peut vous arriver de vouloir mettre à jour vos news. Eh bien cette partie consiste la modification des news. Nous allons la faire avec deux pages :

La page edit_news.php qui consiste d’afficher les titres des news, un lien modifier pour chaque news et en fin le formulaire de modification des news
La page edit_news_ok.php qui sera chargé de traiter les données.

Comme d’habitude, je vous liste les codes bien commentés :

la page edit_news.php:
<?php //d'abord on va se connecter à la bas mysql_connect("localhost", "root","" ); mysql_select_db("samo"); if (isset($_GET['id'])) { $_GET['id'] = mysql_real_escape_string(htmlspecialchars($_GET['id'])); // On récupère seulement les informations de la news en fonction de son id. $return = mysql_query('SELECT * FROM news WHERE id=\'' . $_GET['id'] . '\''); $data = mysql_fetch_array($return); // declaration du titre $titre = addslashes ($data['titre']); // declaration du contenu $contenu = addslashes($data['contenu']); // declaration de l'url $url = addslashes($data['url']); $id_news = $data['id']; // Nous jouons sur cette variable pour la modification. } ?> <center> <h3>Modifier l'article </h3>  <form method="post" action="edit_news_ok.php"> Titre du news : <input name="titre" value="<?php echo $titre; ?>"/><br /> contenu :<br /> <input type="hidden" name="id_news" value="<?php echo $id_news; ?>" /> <textarea name="contenu" rows="10" cols="45"><?php echo $contenu; ?></textarea> <br /> url de l'image : <input name="url" value="<?php echo $url; ?>"/><br /> <input type="submit" value="Envoyer" /> </form>  </center> <table border="1"><tr> <th>Titre</th> <th>Modifier</th> </tr> <?php // On selectionne les news par ordre( du nouveau à l'ancien) $return = mysql_query('SELECT * FROM news ORDER BY id DESC'); /* On fait une boucle while pour lister les news en affichant leurs titres un lien "modifier" pour chaque news */ while ($data = mysql_fetch_array($return)) { ?> <tr> <td><?php echo stripslashes($data['titre']); ?></td> <td><?php echo '<a href="edit_news.php?id=' . $data['id'] . '">'; ?>Modifier</a></td> </tr> <?php } // Fin de la boucle ?>

la page edit_news_ok.php:
<?php mysql_connect("localhost", "root","" ); mysql_select_db("samo"); $titre = addslashes($_POST['titre']); $url = addslashes($_POST['url']); $contenu = addslashes($_POST['contenu']); //on verifie si l'id selectioné existe if ($_POST['id_news']) { // on modifie le news e mysql_query("UPDATE news SET titre='" . $titre . "', url='" . $url . "', contenu='" . $contenu . "' WHERE id=" . $_POST['id_news']); // et on affiche un message de confirmation echo "article modifié"; } else { // sinon on affiche un message d'erreur echo "Desolé mais l'article que vous voulez modifier n'existe pas"; } ?>

6. Poster et afficher les commentaires

La page qui nous permet de poster et d’afficher les commentaires des news s’appelle commentaires.php
IL contiendra un formulaire permettant d’ajouter les commentaires. Pour pouvoir savoir qu’un commentaire correspond à un news quelconque, nous allons nous baser sur id_news. C'est-à-dire que nous allons vérifier si l’id de la table news est égale à id_news de la table commentaires.
L’ajout des commentaires est presque identique à l’ajout des news sauf qu'ici on va sécuriser les données contre les attaques XSS et les injections SQL. J’ai juste repris le code add_news.php avec une légère modification. Pour l’affichage des commentaires, c’est aussi presque identique à l’affichage des news. Donc vous voyez que même si je n’étais pas là pour vous guider, vous serez en mesure de le faire vous-même.

Voici le code php bien commenté :
<?php //d'abord on va se connecter à la bas mysql_connect("localhost", "root","" ); mysql_select_db("samo"); if (isset($_GET['news'])) { //on selection la tabble news afin de recuperer l'id de news $_GET['news'] = mysql_real_escape_string(htmlspecialchars($_GET['news'])); $return = mysql_query('SELECT * FROM news WHERE id=\'' . $_GET['news'] . '\''); $data = mysql_fetch_array($return); /*cette variable pour la modification nous permettra de savoir le news correspondant aux commentaires */ $id_news = $data['id']; } if (isset($_POST['auteur']) && isset($_POST['commentaire'])) { $auteur = htmlspecialchars(stripcslashes($_POST['auteur'])); $commentaire = htmlspecialchars(stripcslashes($_POST['commentaire'])); $id_news = htmlspecialchars(stripcslashes($_POST['id_news'])); //on verifie si le champ auteur et le champ commentaire ne sont pas vides if ( $auteur != NULL && $commentaire != NULL ) { //on balance tous dans la table commentaires mysql_query ("insert into commentaires values ('', '". mysql_real_escape_string($id_news )."','".mysql_real_escape_string( $auteur) ."','". mysql_real_escape_string($commentaire)."', '" .time()."')"); //on confirme l'envoie des données echo"le commentaire a été ajouté."; } else// sinon on affiche un message d'erreur { echo"verifiez si l'auteur et le commentaire ont été saisis."; } } // la partie ci-dessous s'en charge d'afficher les commentaires $result = mysql_query('SELECT * FROM commentaires WHERE id_news=\'' . $_GET['news'] . '\''); while ($data = mysql_fetch_array($result)) { ?> Ajouté par <?php echo stripslashes($data['auteur']); //on recupère l'auteur ?> <em> le <?php echo date('d/m/Y à H\hi', $data['timestamp']); //on recupère la date ?></em> <BR> <?php $commentaire = nl2br(stripslashes($data['commentaire'])); echo $commentaire; ?> <BR> <?php } // Fin de la boucle des commentaires ?> <center> <h3>Ajouter un commentaire </h3> <form method="post" action="commentaires.php"> <input type="hidden" name="id_news" value="<?php echo $id_news; ?>" /> Auteur: <input name="auteur"/><br /> Commentaire :<br /> <textarea name="commentaire" rows="10" cols="45"></textarea> <br /> <input type="submit" value="Envoyer" /> </form> </center>

Maintenant notre TP est terminé. Le but était de vous pousser à appliquer ce que vous avez appris dans ce site. Si vous remarquez bien, je n’ai pas cherché à optimiser le code ni à m’occuper de la mise en forme. De toute façon ce sont des choses que vous pouvez faire facilement.
Maintenant si vous pensez améliorer ce code et l’utiliser dans votre site, il ne faut pas oublier de sécuriser tous les fichiers de la partie administration : add_news.php, delete_news.php, edit_news.php, edit_news_ok.php . Ce que je vous propose, est de les mettre dans un dossier et sécuriser le dossier. Pour savoir comment sécuriser un dossier, regardez ce cours.
Si vous avez un problème, le forum est là pour vos questions.