CMS #6 – La page d’édition (edit.php)

Maintenant que vous pouvez afficher tous vos articles sur votre page d’accueil (voir comment ICI), ainsi que les afficher individuellement (voir ICI), vous vous rendez compte que vous avez fait une erreur, sauf que vous ne voulez pas à chaque erreur devoir aller dans PhpMyAdmin et modifier case par case. Alors nous allons simplifier cela dans le chapitre d’aujourd’hui:

Comment créer une page d’édition d’article ?

Dans un premier temps, nous allons créer un nouveau fichier php dans notre dossier admin: edit.php

Sur cette page, nous voulons 2 cas possibles:

Soit $_GET[‘id’] est vide (c’est à dire que nous n’aurons pas encore choisis l’article à éditer) et dans ce cas nous affichons tous les articles éditables.
Soit $_GET[‘id’] n’est pas vide, et dans ce cas on affiche un formulaire pré-rempli avec les valeurs de l’article permettant l’édition de cet article.

Dans le body nous allons donc écrire cela:

<?php if (!empty($_GET['id'])){ ?>

<?php } else {?>

<?php } ?>

Nous choisissons d’avoir 3 parties de code php car entre chacun, il va nous être possible d’écrire du code HTML.

Il va maintenant falloir réfléchir à ce que nous devons mettre dans chaque partie pour répondre aux besoins définis précédemment.

Nous allons commencer par le cas où $_GET[‘id’] est vide. Dans ce cas nous souhaitons afficher tous les articles avec un lien cliquable pour y accéder et un bouton ‘Editer’. Comme base, nous allons reprendre le code de la page index.php, aligner l’affichage de la date avec le titre et ajouter le bouton edition.

Le code nous donne donc ça:

<?php } else {

 $sql = "SELECT * FROM articles";

 $result = mysqli_query($conn, $sql);

 if (mysqli_num_rows($result) > 0){

   while ($data = mysqli_fetch_assoc($result)){

     echo ('<a href=article.php?id='.$data['ID'].'>'.$data['title'].'</a> | <a href=edit.php?id='.$data['ID'].'>Editer</a><br /><br />');

   }

 } ?>

Nous pouvons aller sur la page pour vérifier que cela fonctionne:

Cela fonctionne. Lorsque l’on clique sur un article, cela affiche une page blanche, ce qui est rassurant puisque nous devons maintenant coder cette partie.

Pour cette partie, nous allons utiliser un formulaire. Dans les input (champs à remplir), il est possible d’ajouter ‘value=””’ et donner une valeur prédéfinie à ce champs. Pour cela nous allons faire:

‘value=”<?php echo(‘la valeur qui nous intéresse); ?>”’ et cela remplira le champ avec la valeur qui a été donnée à l’article que l’on modifie. Ceci transcrit en code donne:

<?php if (!empty($_GET['id'])){

 $id = $_GET['id'];

 $sql = "SELECT * FROM articles WHERE ID = '$id'";

 $result = mysqli_query($conn, $sql);

   while ($data = mysqli_fetch_assoc($result)){;?>

<form method="post">

 <input type="text" placeholder="Titre" name="title" required value="<?php echo ($data['title']); ?>" /><br /><br />

 <input type="text" placeholder="Sous-titre" name="subtitle" required value="<?php echo ($data['subtitle']); ?>" /><br /><br />

 Contenu de l'article:<br />

 <textarea name="content" required><?php echo ($data['content']); ?></textarea><br /><br />

 1.<input type="radio" name="note" value="1" <?php if ($data['note'] == "1"){echo('checked');}else{}?>/><br /><br />

 2.<input type="radio" name="note" value="2" <?php if ($data['note'] == "2"){echo('checked');}else{}?>/><br /><br />

 3.<input type="radio" name="note" value="3" <?php if ($data['note'] == "3"){echo('checked');}else{}?>/><br /><br />

 <input type="submit" name="submit" value="Mettre à jour"/>

</form>

Maintenant il faut définir l’action qui se passe après que l’on ait cliqué sur le bouton ‘Mettre à jour’. Cela va être simple, par défaut, $_POST est vide et lorsque l’on cliquera sur le bouton ‘submit’ $_POST ne le sera plus. Donc pour détecter lorsque le bouton mise à jour à été cliqué, il suffit de vérifier la condition suivante:

!empty($_POST)

Il faut aussi savoir la query que nous allons exécuter, ce sera la suivante:

UPDATE articles

           SET title = '$data[0]', subtitle = '$data[1]', content = '$data[2]', note = '$data[3]'

           WHERE ID = $id

Il faut définir les champs à changer par un tableau ou un autre nom de variable car l’on ne peut pas mettre ex: title = ‘$_POST[‘title’]’. Car cela créé un problème avec les guillemets. On ne peut pas non plus utiliser les doubles guillemets “” car ils le sont déjà au début et à la fin de la query. Pour résoudre ce problème, j’ai choisis d’ajouter:

 $data[0] = $_POST['title'];

 $data[1] = $_POST['subtitle'];

 $data[2] = $_POST['content'];

 $data[3] = $_POST['note'];

au début du fichier.

Maintenant, il faut exécuter la query et vérifier que son exécution se passe sans problème. Pour cela:

$update = mysqli_query($conn, $query);

 if ($update){

   echo 'Article mis à jour ! <br />'

 } else {

   echo 'Une erreur est arrivée'

 }

Finalement, on peut essayer d’utiliser cette page pour changer un titre (par exemple). Je choisis de modifier le titre ‘Titre 2’ en ‘Titre 4’:

J’accède à la page d’édition

Je clique sur ‘Éditer’ à côté de ‘Titre 2’

Je remplace ‘Titre 2’ par ‘Titre 4’

Je clique sur ‘Mettre à jour’

Je retourne sur la page d’accueil pour vérifier que la modification a bien été faite

Et cela fonctionne comme prévu ! Notre page d’édition est donc fonctionnelle.

Voici le fichier final:

<?php

$conn = mysqli_connect('localhost', 'root','', 'cms');

if (!empty($_POST) && !empty($_GET['id'])){

 $id = $_GET['id'];

 $data[0] = $_POST['title'];

 $data[1] = $_POST['subtitle'];

 $data[2] = $_POST['content'];

 $data[3] = $_POST['note'];

 $query = "UPDATE articles

           SET title = '$data[0]', subtitle = '$data[1]', content = '$data[2]', note = '$data[3]'

           WHERE ID = $id

 ";

 $update = mysqli_query($conn, $query);

 if ($update){

   echo 'Article mis à jour ! <br />';

 } else {

   echo 'Une erreur est arrivée';

 }

}

?>

<html>

<head>

 <title>Page d'édition</title>

 <meta charset="utf-8" />

</head>

<body>

<?php if (!empty($_GET['id'])){

 $id = $_GET['id'];

 $sql = "SELECT * FROM articles WHERE ID = '$id'";

 $result = mysqli_query($conn, $sql);

   while ($data = mysqli_fetch_assoc($result)){;?>

<form method="post">

 <input type="text" placeholder="Titre" name="title" required value="<?php echo ($data['title']); ?>" /><br /><br />

 <input type="text" placeholder="Sous-titre" name="subtitle" required value="<?php echo ($data['subtitle']); ?>" /><br /><br />

 Contenu de l'article:<br />

 <textarea name="content" required><?php echo ($data['content']); ?></textarea><br /><br />

 1.<input type="radio" name="note" value="1" <?php if ($data['note'] == "1"){echo('checked');}else{}?>/><br /><br />

 2.<input type="radio" name="note" value="2" <?php if ($data['note'] == "2"){echo('checked');}else{}?>/><br /><br />

 3.<input type="radio" name="note" value="3" <?php if ($data['note'] == "3"){echo('checked');}else{}?>/><br /><br />

 <input type="submit" name="submit" value="Mettre à jour"/>

</form>

<?php }} else {

 $sql = "SELECT * FROM articles";

 $result = mysqli_query($conn, $sql);

 if (mysqli_num_rows($result) > 0){

   while ($data = mysqli_fetch_assoc($result)){

     echo ('<a href=../article.php?id='.$data['ID'].'>'.$data['title'].'</a> | <a href=edit.php?id='.$data['ID'].'>Editer</a><br /><br />');

   }

 } ?>

<?php } ?>

</body>

</html>

Maintenant que nous pouvons éditer nos articles, il reste une dernière chose importante à faire dans la première partie de cette formation: Ajouter la possibilité de supprimer des articles directement depuis le site. Ce sera l’objet de notre prochain chapitre.

N’hésitez pas à partager si vous pensez que cela peut aussi permettre d’aider d’autres personnes.

Merci pour votre présence sur le blog, on avance ensemble !

Kelou.fr

CMS #6 – La page d’édition (edit.php) - 10 juin 2018

Kelou.fr

CMS #6 – La page d’édition (edit.php) - 10 juin 2018

Aller plus loin