20. Les formulaires

Vous avez dû remarquer au chapitre précédent que l'on a recopié pas mal de code, les fichiers add_article et edit_article étant assez similaires. Il est temps de rendre ça plus dynamique 😉

 

Rendons nos formulaires plus dynamiques :

Voici l'état actuel de nos fichiers : 

add_article.php 

<?php $this->title = "Nouvel article"; ?>
<h1>Mon blog</h1>
<p>En construction</p>
<div>
    <form method="post" action="../public/index.php?route=addArticle">
        <label for="title">Titre</label><br>
        <input type="text" id="title" name="title"><br>
        <label for="content">Contenu</label><br>
        <textarea id="content" name="content"></textarea><br>
        <label for="author">Auteur</label><br>
        <input type="text" id="author" name="author"><br>
        <input type="submit" value="Envoyer" id="submit" name="submit">
    </form>
    <a href="../public/index.php">Retour à l'accueil</a>
</div>

 

edit_article.php : 

<?php $this->title = "Modifier l'article"; ?>
<h1>Mon blog</h1>
<p>En construction</p>
<div>
    <form method="post" action="../public/index.php?route=editArticle&articleId=<?= htmlspecialchars($article->getId()); ?>">
        <label for="title">Titre</label><br>
        <input type="text" id="title" name="title" value="<?= htmlspecialchars($article->getTitle()); ?>"><br>
        <label for="content">Contenu</label><br>
        <textarea id="content" name="content"><?= htmlspecialchars($article->getContent()); ?></textarea><br>
        <label for="author">Auteur</label><br>
        <input type="text" id="author" name="author" value="<?= htmlspecialchars($article->getAuthor()); ?>"><br>
        <input type="submit" value="Mettre à jour" id="submit" name="submit">
    </form>
    <a href="../public/index.php">Retour à l'accueil</a>
</div>

 

Voici ce que l'on va faire dans ce chapitre : 

- externaliser le formulaire (dans un fichier form_article.php)

- rendre notre route dynamique

- rendre les valeurs de notre formulaire dynamique (elles seront vide si on veut saisir un nouvel article ou préremplies si on veut en modifier un existant).

- rendre le bouton de soumission dynamique.

 

Commençons par créer notre fichier form_article.php et y mettre le contenu de notre formulaire :

<form method="post" action="../public/index.php?route=addArticle ?>">
    <label for="title">Titre</label><br>
    <input type="text" id="title" name="title"><br>
    <label for="content">Contenu</label><br>
    <textarea id="content" name="content"></textarea><br>
    <label for="author">Auteur</label><br>
    <input type="text" id="author" name="author"><br>
    <input type="submit" value="Envoyer" id="submit" name="submit">
</form>

 

Rendons maintenant nos champs dynamiques. Pour cela on va se baser sur l'existence d'un article ou pas ainsi que son identifiant. En effet : 

- si un article n'existe pas, on utilisera la route addArticle

- si un article existe, il a un identifiant associé, et on fera appel à la route editArticle en lui passant l'identifiant en conséquence.

Les champs title, content et author seront gérés de la même manière que la route, en se basant sur l'existence de l'article.

<?php
$route = isset($article) && $article->getId() ? 'editArticle&articleId='.$article->getId() : 'addArticle';
$title = isset($article) && $article->getTitle() ? htmlspecialchars($article->getTitle()) : '';
$content = isset($article) && $article->getContent() ? htmlspecialchars($article->getContent()) : '';
$author = isset($article) && $article->getAuthor() ? htmlspecialchars($article->getAuthor()) : '';
?>

<form method="post" action="../public/index.php?route=<?= $route; ?>">
    <label for="title">Titre</label><br>
    <input type="text" id="title" name="title" value="<?= $title; ?>"><br>
    <label for="content">Contenu</label><br>
    <textarea id="content" name="content"><?= $content; ?></textarea><br>
    <label for="author">Auteur</label><br>
    <input type="text" id="author" name="author" value="<?= $author; ?>"><br>
    <input type="submit" value="Envoyer" id="submit" name="submit">
</form>

 

Il ne nous reste plus qu'à rendre le bouton dynamique aussi. Pour cela, on va se baser sur la route : 

<?php
$route = isset($article) && $article->getId() ? 'editArticle&articleId='.$article->getId() : 'addArticle';
$submit = $route === 'addArticle' ? 'Envoyer' : 'Mettre à jour';
$title = isset($article) && $article->getTitle() ? htmlspecialchars($article->getTitle()) : '';
$content = isset($article) && $article->getContent() ? htmlspecialchars($article->getContent()) : '';
$author = isset($article) && $article->getAuthor() ? htmlspecialchars($article->getAuthor()) : '';
?>

<form method="post" action="../public/index.php?route=<?= $route; ?>">
    <label for="title">Titre</label><br>
    <input type="text" id="title" name="title" value="<?= $title; ?>"><br>
    <label for="content">Contenu</label><br>
    <textarea id="content" name="content"><?= $content; ?></textarea><br>
    <label for="author">Auteur</label><br>
    <input type="text" id="author" name="author" value="<?= $author; ?>"><br>
    <input type="submit" value="<?= $submit; ?>" id="submit" name="submit">
</form>

 

Et voilà le travail. 

Il ne nous reste plus qu'à faie appel à notre form_article.php depuis nos deux fichiers, add_article et edit_article : 

<?php $this->title = "Nouvel article"; ?>
<h1>Mon blog</h1>
<p>En construction</p>
<div>
    <?php include('form_article.php');?>
    <a href="../public/index.php">Retour à l'accueil</a>
</div>

Je ne mets ici que le code du fichier add_article, le principe est le même pour l'édition.

 

Essayez de votre côté d'ajouter un nouvel article, ou d'en modifier un existant, notre application fonctionne très bien.

 

Vous vous souvenez qu'on pouvait ajouter des articles sans saisir ni titre, ni contenu, ni auteur ? 

On s'occupe de ça dans le prochaine chapitre.