Comentarios
***********

El blog se ha puesto en marcha, hemos escrito algunas entradas muy buenas y las hemos publicado a través de Adminer. La gente está leyendo el blog y les apasionan nuestras ideas. Estamos recibiendo muchos correos electrónicos con elogios cada día. Pero, ¿para qué sirven todos esos elogios si sólo los recibimos en el correo electrónico, de modo que nadie más puede leerlos? ¿No sería mejor que la gente pudiera comentar directamente en el blog para que todo el mundo pudiera leer lo increíbles que somos?

Hagamos que todos los artículos se puedan comentar.


Crear una nueva tabla .[#toc-creating-a-new-table]
==================================================

Inicie Adminer de nuevo y cree una nueva tabla llamada `comments` con estas columnas:

- `id` int, comprobar autoincremento (AI)
- `post_id`, una clave externa que hace referencia a la tabla `posts`
- `name` varchar, longitud 255
- `email` varchar, longitud 255
- `content` texto
- `created_at` timestamp

Debería tener este aspecto:

[* adminer-comments.webp *]

No olvides usar el almacenamiento de tablas InnoDB y pulsa Guardar.

```sql
CREATE TABLE `comments` (
	`id` int NOT NULL AUTO_INCREMENT PRIMARY KEY,
	`post_id` int(11) NOT NULL,
	`name` varchar(250) NOT NULL,
	`email` varchar(250) NOT NULL,
	`content` text NOT NULL,
	`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
	FOREIGN KEY (`post_id`) REFERENCES `posts` (`id`)
) ENGINE=InnoDB CHARSET=utf8;
```


Formulario de comentarios .[#toc-form-for-commenting]
=====================================================

Primero, necesitamos crear un formulario, que permitirá a los usuarios comentar en nuestra página. Nette Framework tiene un soporte impresionante para formularios. Pueden ser configurados en un presentador y renderizados en una plantilla.

Nette Framework tiene un concepto de *componentes*. Un **componente** es una clase reutilizable o una pieza de código, que puede ser adjuntada a otro componente. Incluso un presentador es un componente. Cada componente se crea utilizando la fábrica de componentes. Así que vamos a definir la fábrica de formularios de comentarios en `PostPresenter`.

```php .{file:app/UI/Post/PostPresenter.php}
protected function createComponentCommentForm(): Form
{
	$form = new Form; // means Nette\Application\UI\Form

	$form->addText('name', 'Your name:')
		->setRequired();

	$form->addEmail('email', 'Email:');

	$form->addTextArea('content', 'Comment:')
		->setRequired();

	$form->addSubmit('send', 'Publish comment');

	return $form;
}
```

Vamos a explicarlo un poco. La primera línea crea una nueva instancia del componente `Form`. Los siguientes métodos están adjuntando entradas HTML en la definición del formulario. `->addText` se renderizará como `<input type=text name=name>`con `<label>Your name:</label>`. Como ya habrás adivinado en este momento, el `->addTextArea` adjunta un `<textarea>` y `->addSubmit` añade un `<input type=submit>`. Hay más métodos como este, pero esto es todo lo que tienes que saber por ahora. Puedes [aprender más en la documentación |forms:].

Una vez definido el componente formulario en un presentador, podemos renderizarlo (mostrarlo) en una plantilla. Para ello, coloque la etiqueta `{control}` al final de la plantilla de detalles de la entrada, en `Post/show.latte`. Dado que el nombre del componente es `commentForm` (se deriva del nombre del método `createComponentCommentForm`), la etiqueta tendrá el siguiente aspecto

```latte .{file:app/UI/Post/show.latte}
...
<h2>Post new comment</h2>

{control commentForm}
```

Ahora, si revisas el detalle de algún post, habrá un nuevo formulario para publicar comentarios.


Guardar en base de datos .[#toc-saving-to-database]
===================================================

¿Ha intentado enviar algunos datos? Te habrás dado cuenta de que el formulario no realiza ninguna acción. Simplemente está ahí, con un aspecto chulo y sin hacer nada. Tenemos que adjuntarle un método callback, que guardará los datos enviados.

Coloca la siguiente línea antes de la línea `return` en la fábrica del componente `commentForm`:

```php
$form->onSuccess[] = $this->commentFormSucceeded(...);
```

Significa "después de que el formulario se envíe correctamente, llama al método `commentFormSucceeded` del presentador actual". Este método no existe todavía, así que vamos a crearlo.

```php .{file:app/UI/Post/PostPresenter.php}
private function commentFormSucceeded(\stdClass $data): void
{
	$postId = $this->getParameter('postId');

	$this->database->table('comments')->insert([
		'post_id' => $postId,
		'name' => $data->name,
		'email' => $data->email,
		'content' => $data->content,
	]);

	$this->flashMessage('Thank you for your comment', 'success');
	$this->redirect('this');
}
```

Debes colocarlo justo después de la fábrica del componente `commentForm`.

El nuevo método tiene un argumento que es la instancia del formulario que se está enviando, creada por la fábrica de componentes. Recibimos los valores enviados en `$data`. Y luego insertamos los datos en la tabla de la base de datos `comments`.

Hay otras dos llamadas a métodos que explicar. La redirección redirige literalmente a la página actual. Deberías hacer eso cada vez que el formulario es enviado, válido, y la operación callback hizo lo que debería haber hecho. Además, cuando redirija la página después de enviar el formulario, no verá el conocido mensaje `Would you like to submit the post data again?` que a veces puede ver en el navegador. (En general, después de enviar un formulario por el método `POST`, siempre debes redirigir al usuario a una acción `GET` ).

El `flashMessage` sirve para informar al usuario del resultado de alguna operación. Debido a que estamos redirigiendo, el mensaje no puede ser pasado directamente a la plantilla y renderizado. Así que existe este método, que lo almacenará y lo hará disponible en la siguiente carga de página. Los mensajes flash son renderizados en el archivo por defecto `app/UI/@layout.latte`, y se ve así:

```latte
<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">
	{$flash->message}
</div>
```

Como ya sabemos, se pasan automáticamente a la plantilla, así que no tienes que pensar mucho en ello, simplemente funciona. Para más detalles [consulta la documentación |application:presenters#flash-messages].


Renderizando los Comentarios .[#toc-rendering-the-comments]
===========================================================

Esta es una de las cosas que te encantará. La Base de Datos Nette tiene esta característica genial llamada [Explorador |database:explorer]. ¿Recuerdas que hemos creado las tablas como InnoDB? Adminer ha creado las llamadas [claves foráneas |https://dev.mysql.com/doc/refman/8.0/en/create-table-foreign-keys.html] que nos ahorrarán un montón de trabajo.

Nette Database Explorer utiliza las claves externas para resolver las relaciones entre las tablas, y conociendo las relaciones, puede crear automáticamente consultas para usted.

Como recordará, hemos pasado la variable `$post` a la plantilla en `PostPresenter::renderShow()` y ahora queremos iterar por todos los comentarios que tengan la columna `post_id` igual a nuestra `$post->id`. Puedes hacerlo llamando a `$post->related('comments')`. Así de sencillo. Mira el código resultante.

```php .{file:app/UI/Post/PostPresenter.php}
public function renderShow(int $postId): void
{
	...
	$this->template->post = $post;
	$this->template->comments = $post->related('comments')->order('created_at');
}
```

Y la plantilla:

```latte .{file:app/UI/Post/show.latte}
...
<h2>Comments</h2>

<div class="comments">
	{foreach $comments as $comment}
		<p><b><a href="mailto:{$comment->email}" n:tag-if="$comment->email">
			{$comment->name}
		</a></b> said:</p>

		<div>{$comment->content}</div>
	{/foreach}
</div>
...
```

Fíjate en el atributo especial `n:tag-if`. Ya sabes cómo funciona `n: attributes`. Pues bien, si antepones al atributo `tag-`, sólo envolverá las etiquetas, no su contenido. Esto le permite convertir el nombre del comentarista en un enlace si ha proporcionado su dirección de correo electrónico. Los resultados de estas dos líneas son idénticos:

```latte
<strong n:tag-if="$important"> Hello there! </strong>

{if $important}<strong>{/if} Hello there! {if $important}</strong>{/if}
```

{{priority: -1}}
{{sitename: Nette Quickstart}}