Creazione e modifica dei post

È fantastico! Abbiamo un nuovo blog super cool, le persone discutono animatamente nei commenti e noi abbiamo finalmente un po' di tempo per programmare ulteriormente. Sebbene Adminer sia uno strumento eccellente, non è del tutto ideale per scrivere nuovi post sul blog. Probabilmente è il momento giusto per creare un semplice form per aggiungere nuovi post direttamente dall'applicazione. Facciamolo.

Iniziamo progettando l'interfaccia utente:

Nella pagina iniziale aggiungeremo un link “Scrivi un nuovo post”.
Questo link visualizzerà un form con un titolo e una textarea per il contenuto del post.
Quando clicchiamo sul pulsante Salva, il post verrà salvato nel database.

Successivamente aggiungeremo anche il login e permetteremo l'aggiunta di post solo agli utenti loggati. Ma questo più tardi. Quale codice dobbiamo scrivere ora affinché tutto funzioni?

Creeremo un nuovo presenter con un form per aggiungere post.
Definiremo un callback che verrà eseguito dopo l'invio riuscito del form e che salverà il nuovo post nel database.
Creeremo un nuovo template su cui sarà presente quel form.
Aggiungeremo un link al form nel template della pagina principale.

Nuovo presenter

Chiameremo il nuovo presenter EditPresenter e lo salveremo in app/Presentation/Edit/EditPresenter.php. Ha anche bisogno di connettersi al database, quindi scriveremo di nuovo un costruttore che richiederà la connessione al database:

<?php
namespace App\Presentation\Edit;

use Nette;
use Nette\Application\UI\Form;

final class EditPresenter extends Nette\Application\UI\Presenter
{
	public function __construct(
		private Nette\Database\Explorer $database,
	) {
	}
}

Form per il salvataggio dei post

Abbiamo già spiegato i form e i componenti durante la creazione dei commenti. Se non è ancora chiaro, andate a rivedere la creazione di form e componenti, noi aspetteremo qui ;)

Ora aggiungiamo questo metodo al presenter EditPresenter:

protected function createComponentPostForm(): Form
{
	$form = new Form;
	$form->addText('title', 'Titolo:')
		->setRequired();
	$form->addTextArea('content', 'Contenuto:')
		->setRequired();

	$form->addSubmit('send', 'Salva e pubblica');
	$form->onSuccess[] = $this->postFormSucceeded(...);

	return $form;
}

Salvataggio di un nuovo post dal form

Continuiamo aggiungendo un metodo che elabori i dati dal form:

private function postFormSucceeded(array $data): void
{
	$post = $this->database
		->table('posts')
		->insert($data);

	$this->flashMessage("Il post è stato pubblicato con successo.", 'success');
	$this->redirect('Post:show', $post->id);
}

Solo un rapido riepilogo: questo metodo ottiene i dati dal form, li inserisce nel database, crea un messaggio per l'utente sull'avvenuto salvataggio del post e reindirizza alla pagina con il nuovo post, così vedremo subito come appare.

Pagina per la creazione di un nuovo post

Creiamo ora il template Edit/create.latte:

{block content}
<h1>Nuovo post</h1>

{control postForm}

Tutto dovrebbe essere già chiaro. L'ultima riga renderizza il form che creeremo a breve.

Potremmo creare anche il metodo renderCreate() corrispondente nel presenter, ma non è necessario. Non abbiamo bisogno di ottenere dati dal database e passarli al template, quindi quel metodo sarebbe vuoto. In questi casi, il metodo render<View> può essere omesso.

Link per la creazione dei post

Probabilmente sapete già come aggiungere un link a EditPresenter e alla sua azione create. Provateci.

Basta aggiungere al file app/Presentation/Home/default.latte:

<a n:href="Edit:create">Scrivi un nuovo post</a>

Modifica dei post

Ora aggiungeremo anche la possibilità di modificare un post. Sarà molto semplice. Abbiamo già pronto il form postForm e possiamo usarlo anche per la modifica.

Aggiungiamo una nuova pagina edit al presenter EditPresenter:

public function renderEdit(int $id): void
{
	$post = $this->database
		->table('posts')
		->get($id);

	if (!$post) {
		$this->error('Post non trovato');
	}

	$this->getComponent('postForm')
		->setDefaults($post->toArray());
}

E creiamo un altro template Edit/edit.latte:

{block content}
<h1>Modifica post</h1>

{control postForm}

E modifichiamo il metodo postFormSucceeded, che sarà in grado sia di aggiungere un nuovo articolo (come fa ora) sia di modificare un articolo già esistente:

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('Il post è stato pubblicato con successo.', 'success');
	$this->redirect('Post:show', $post->id);
}

Se il parametro id è disponibile, significa che modificheremo il post. In tal caso, verifichiamo che il post richiesto esista davvero e, in caso affermativo, lo aggiorniamo nel database. Se il parametro id non è disponibile, significa che dovrebbe essere aggiunto un nuovo post.

Ma da dove viene il parametro id? Si tratta del parametro che è stato inserito nel metodo renderEdit.

Ora possiamo aggiungere un link al template app/Presentation/Post/show.latte:

<a n:href="Edit:edit $post->id">Modifica post</a>

Shrnutí

Il blog è ora funzionante, i visitatori commentano attivamente e non abbiamo più bisogno di Adminer per la pubblicazione. L'applicazione è completamente indipendente e chiunque può aggiungere un nuovo post. Aspetta un attimo, probabilmente non è del tutto corretto che chiunque – e intendo davvero chiunque abbia accesso a Internet – possa aggiungere nuovi post. È necessaria una qualche forma di sicurezza affinché solo un utente loggato possa aggiungere un nuovo post. Vedremo questo nel prossimo capitolo.