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 :

  1. Sur la page d'accueil, ajoutons un lien “Write new post”.
  2. Il affichera un formulaire avec un titre et une zone de texte pour le contenu.
  3. 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 ?

  1. Créer un nouveau présentateur avec un formulaire pour ajouter des articles.
  2. 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.
  3. Créez un nouveau modèle pour le formulaire.
  4. 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/Presenters/EditPresenter.php. 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\Presenters;

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.

public 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.

Vous savez probablement déjà comment ajouter un lien à EditPresenter et à son action create. Essayez-le.

Il suffit d'ajouter au fichier app/Presenters/templates/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 $postId): void
{
	$post = $this->database
		->table('posts')
		->get($postId);

	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 :

public function postFormSucceeded(array $data): void
{
	$postId = $this->getParameter('postId');

	if ($postId) {
		$post = $this->database
			->table('posts')
			->get($postId);
		$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 postId 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 postId n'est pas fourni, cela signifie qu'un nouveau message sera ajouté.

Mais d'où vient le postId? C'est le paramètre passé à la méthode renderEdit.

Vous pouvez maintenant ajouter un lien vers le modèle app/Presenters/templates/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.