Créer et modifier des messages
C'est le moment idéal. Nous avons un nouveau blog super cool, les gens discutent dans les commentaires et nous avons enfin du temps pour plus de programmation. Bien que nous aimions Adminer, il n'est pas si facile d'y écrire des articles de blog. C'est peut-être le bon moment pour ajouter un formulaire simple pour ajouter de nouveaux articles directement depuis notre application. C'est parti.
Commençons par concevoir l'interface utilisateur :
- Sur la page d'accueil, ajoutons un lien „Write new post“.
- Il affichera un formulaire avec un titre et une zone de texte pour le contenu.
- Lorsque vous cliquez sur le bouton „Enregistrer“, l'article de blog est enregistré.
Plus tard, nous ajouterons également l'authentification et autoriserons uniquement les utilisateurs connectés à ajouter de nouveaux articles. Mais nous ferons cela plus tard. Quel code devrons-nous écrire pour que cela fonctionne ?
- Créer un nouveau présentateur avec un formulaire pour ajouter des articles.
- Définissez un callback qui sera déclenché après l'envoi réussi du formulaire et qui enregistrera le nouvel article dans la base de données.
- Créez un nouveau modèle pour le formulaire.
- Ajoutez un lien vers le formulaire dans le modèle de page principale.
Nouveau présentateur
Nommez le nouveau présentateur EditPresenter et enregistrez-le dans app/UI/Edit/. Il doit également
se connecter à la base de données, donc ici aussi nous écrivons un constructeur qui nécessitera une connexion à la base de
données :
<?php
namespace App\UI\Edit;
use Nette;
use Nette\Application\UI\Form;
final class EditPresenter extends Nette\Application\UI\Presenter
{
public function __construct(
private Nette\Database\Explorer $database,
) {
}
}
Formulaire de sauvegarde des messages
Les formulaires et les composants ont déjà été abordés lorsque nous avons ajouté le support des commentaires. Si vous êtes confus sur le sujet, allez voir comment fonctionnent les formulaires et les composants, nous attendrons ici ;)
Maintenant, ajoutez cette méthode à l'adresse EditPresenter:
protected function createComponentPostForm(): Form
{
$form = new Form;
$form->addText('title', 'Title:')
->setRequired();
$form->addTextArea('content', 'Content:')
->setRequired();
$form->addSubmit('send', 'Save and publish');
$form->onSuccess[] = $this->postFormSucceeded(...);
return $form;
}
Enregistrement d'un nouveau message à partir d'un formulaire
Continuez en ajoutant une méthode de gestion.
private function postFormSucceeded(array $data): void
{
$post = $this->database
->table('posts')
->insert($data);
$this->flashMessage('Post was published', 'success');
$this->redirect('Post:show', $post->id);
}
Une explication rapide : il récupère les valeurs du formulaire, les insère dans la base de données, crée un message pour l'utilisateur indiquant que le message a été enregistré avec succès, et redirige vers la page où ce message est publié afin que vous puissiez voir à quoi il ressemble.
Page de création d'un nouveau message
Créons simplement le modèle Edit/create.latte:
{block content}
<h1>New post</h1>
{control postForm}
Tout devrait être clair maintenant. La dernière ligne montre le formulaire que nous sommes sur le point de créer.
Nous pourrions également créer une méthode correspondante à l'adresse renderCreate, mais ce n'est pas
nécessaire. Nous n'avons pas besoin d'obtenir des données de la base de données et de les transmettre au modèle, donc cette
méthode serait vide. Dans ce cas, la méthode peut ne pas exister du tout.
Lien pour la création de messages
Vous savez probablement déjà comment ajouter un lien à EditPresenter et à son action create.
Essayez-le.
Il suffit d'ajouter au fichier app/UI/Home/default.latte:
<a n:href="Edit:create">Write new post</a>
Modifier les messages
Ajoutons également la possibilité de modifier des messages existants. Ce sera assez simple – nous avons déjà
postForm et nous pouvons l'utiliser pour l'édition également.
Nous allons ajouter une nouvelle page edit au site EditPresenter:
public function renderEdit(int $id): void
{
$post = $this->database
->table('posts')
->get($id);
if (!$post) {
$this->error('Post not found');
}
$this->getComponent('postForm')
->setDefaults($post->toArray());
}
Et créer le modèle Edit/edit.latte:
{block content}
<h1>Edit post</h1>
{control postForm}
Et mettre à jour la méthode postFormSucceeded, qui permettra soit d'ajouter un nouveau message (comme
maintenant), soit de modifier les messages existants :
private function postFormSucceeded(array $data): void
{
$id = $this->getParameter('id');
if ($id) {
$post = $this->database
->table('posts')
->get($id);
$post->update($data);
} else {
$post = $this->database
->table('posts')
->insert($data);
}
$this->flashMessage('Post was published', 'success');
$this->redirect('Post:show', $post->id);
}
Lorsque le paramètre id est fourni, cela signifie qu'un message est en cours de modification. Dans ce cas, nous
vérifierons que le message existe réellement et si c'est le cas, nous le mettrons à jour dans la base de données. Si le
paramètre id n'est pas fourni, cela signifie qu'un nouveau message sera ajouté.
Mais d'où vient le id? C'est le paramètre passé à la méthode renderEdit.
Vous pouvez maintenant ajouter un lien vers le modèle app/UI/Post/show.latte:
<a n:href="Edit:edit $post->id">Edit this post</a>
Résumé
Le blog fonctionne, les gens commentent rapidement et nous ne dépendons plus de l'Adminer pour ajouter de nouveaux articles. Il est totalement indépendant et même les gens normaux peuvent y poster. Mais attendez, ce n'est probablement pas bien, que n'importe qui, je veux dire vraiment n'importe qui sur Internet, puisse poster sur notre blog. Une certaine forme d'authentification est nécessaire pour que seuls les utilisateurs connectés puissent publier des messages. Nous l'ajouterons dans le prochain chapitre.