Nette Documentation Preview

syntax
Creación y edición de entradas
******************************

Qué gran momento. Tenemos un nuevo blog super chulo, la gente discute en los comentarios y por fin tenemos algo de tiempo para programar más. Aunque nos gusta Adminer, no es tan cómodo escribir entradas de blog en él. Tal vez es el momento adecuado para añadir un sencillo formulario para añadir nuevos mensajes directamente desde nuestra aplicación. Hagámoslo.

Empecemos por diseñar la interfaz de usuario:

1. En la página de inicio, añadamos un enlace "Escribir nuevo post".
2. Mostrará un formulario con título y textarea para el contenido.
3. Al hacer clic en el botón Guardar, se guardará la entrada del blog.

Más adelante también añadiremos autenticación y permitiremos que sólo los usuarios registrados puedan añadir nuevas entradas. Pero eso lo haremos más adelante. ¿Qué código tendremos que escribir para que funcione?

1. Crea un nuevo presentador con un formulario para añadir entradas.
2. Definir un callback que se disparará tras el envío exitoso del formulario y que guardará el nuevo post en la base de datos.
3. Cree una nueva plantilla para el formulario.
4. 4. Añada un enlace al formulario en la plantilla de la página principal.


Nuevo presentador .[#toc-new-presenter]
=======================================

Nombra al nuevo presentador `EditPresenter` y guárdalo en `app/UI/Edit/`. También necesita conectarse a la base de datos, así que aquí de nuevo escribimos un constructor que requerirá una conexión a la base de datos:

```php .{file:app/UI/Edit/EditPresenter.php}
<?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,
	) {
	}
}
```


Formulario para guardar entradas .[#toc-form-for-saving-posts]
==============================================================

Los formularios y componentes ya han sido cubiertos cuando añadimos soporte para comentarios. Si estás confundido sobre el tema, revisa [cómo funcionan los formularios y componentes |comments#form-for-commenting] de nuevo, esperaremos aquí ;)

Ahora añade este método a `EditPresenter`:

```php .{file:app/UI/Edit/EditPresenter.php}
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;
}
```


Guardar nueva entrada desde el formulario .[#toc-saving-new-post-from-form]
===========================================================================

Continúe añadiendo un método manejador.

```php .{file:app/UI/Edit/EditPresenter.php}
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);
}
```

Sólo una explicación rápida: obtiene los valores del formulario, los inserta en la base de datos, crea un mensaje para el usuario indicando que la entrada se ha guardado correctamente, y redirige a la página donde se publica esa entrada para que pueda ver cómo queda.


Página para crear un nuevo post .[#toc-page-for-creating-a-new-post]
====================================================================

Vamos a crear la plantilla `Edit/create.latte`:

```latte .{file:app/UI/Edit/create.latte}
{block content}
<h1>New post</h1>

{control postForm}
```

Todo debería estar claro ahora. La última línea muestra el formulario que vamos a crear.

También podríamos crear un método `renderCreate` correspondiente, pero no es necesario. No necesitamos obtener ningún dato de la base de datos y pasarlo a la plantilla, por lo que ese método estaría vacío. En estos casos, el método puede no existir en absoluto.


Enlace para crear entradas .[#toc-link-for-creating-posts]
==========================================================

Probablemente ya sabes cómo añadir un enlace a `EditPresenter` y su acción `create`. Pruébalo.

Sólo tiene que añadir al archivo `app/UI/Home/default.latte`:

```latte
<a n:href="Edit:create">Write new post</a>
```


Editar Mensajes .[#toc-editing-posts]
=====================================

Añadamos también la capacidad de editar entradas existentes. Será bastante simple - ya tenemos `postForm` y podemos usarlo para editar también.

Añadiremos una nueva página `edit` a `EditPresenter`:

```php .{file:app/UI/Edit/EditPresenter.php}
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());
}
```

Y crearemos la plantilla `Edit/edit.latte`:

```latte .{file:app/UI/Edit/edit.latte}
{block content}
<h1>Edit post</h1>

{control postForm}
```

Y actualizar el método `postFormSucceeded`, que será capaz de añadir un nuevo mensaje (como lo hace ahora), o para editar los ya existentes:

```php .{file:app/UI/Edit/EditPresenter.php}
private 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);
}
```

Cuando se proporciona el parámetro `postId`, significa que se está editando un post. En tal caso, comprobaremos que la entrada existe realmente y, si es así, la actualizaremos en la base de datos. Si no se proporciona el parámetro `postId`, significa que se añadirá un nuevo mensaje.

¿Pero de dónde viene `postId`? Es el parámetro que se pasa al método `renderEdit`.

Ahora puede añadir un enlace a la plantilla `app/UI/Post/show.latte`:

```latte
<a n:href="Edit:edit $post->id">Edit this post</a>
```


Resumen .[#toc-summary]
=======================

El blog funciona, la gente comenta rápidamente y ya no dependemos de Adminer para añadir nuevas entradas. Es totalmente independiente e incluso la gente normal puede publicar allí. Pero espera, eso probablemente no está bien, que cualquiera, quiero decir realmente cualquier persona en Internet, puede publicar en nuestro blog. Es necesario algún tipo de autenticación para que sólo los usuarios registrados puedan publicar. Lo añadiremos en el próximo capítulo.

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

Creación y edición de entradas

Qué gran momento. Tenemos un nuevo blog super chulo, la gente discute en los comentarios y por fin tenemos algo de tiempo para programar más. Aunque nos gusta Adminer, no es tan cómodo escribir entradas de blog en él. Tal vez es el momento adecuado para añadir un sencillo formulario para añadir nuevos mensajes directamente desde nuestra aplicación. Hagámoslo.

Empecemos por diseñar la interfaz de usuario:

  1. En la página de inicio, añadamos un enlace „Escribir nuevo post“.
  2. Mostrará un formulario con título y textarea para el contenido.
  3. Al hacer clic en el botón Guardar, se guardará la entrada del blog.

Más adelante también añadiremos autenticación y permitiremos que sólo los usuarios registrados puedan añadir nuevas entradas. Pero eso lo haremos más adelante. ¿Qué código tendremos que escribir para que funcione?

  1. Crea un nuevo presentador con un formulario para añadir entradas.
  2. Definir un callback que se disparará tras el envío exitoso del formulario y que guardará el nuevo post en la base de datos.
  3. Cree una nueva plantilla para el formulario.
  4. 4. Añada un enlace al formulario en la plantilla de la página principal.

Nuevo presentador

Nombra al nuevo presentador EditPresenter y guárdalo en app/UI/Edit/. También necesita conectarse a la base de datos, así que aquí de nuevo escribimos un constructor que requerirá una conexión a la base de datos:

<?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,
	) {
	}
}

Formulario para guardar entradas

Los formularios y componentes ya han sido cubiertos cuando añadimos soporte para comentarios. Si estás confundido sobre el tema, revisa cómo funcionan los formularios y componentes de nuevo, esperaremos aquí ;)

Ahora añade este método a 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;
}

Guardar nueva entrada desde el formulario

Continúe añadiendo un método manejador.

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);
}

Sólo una explicación rápida: obtiene los valores del formulario, los inserta en la base de datos, crea un mensaje para el usuario indicando que la entrada se ha guardado correctamente, y redirige a la página donde se publica esa entrada para que pueda ver cómo queda.

Página para crear un nuevo post

Vamos a crear la plantilla Edit/create.latte:

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

{control postForm}

Todo debería estar claro ahora. La última línea muestra el formulario que vamos a crear.

También podríamos crear un método renderCreate correspondiente, pero no es necesario. No necesitamos obtener ningún dato de la base de datos y pasarlo a la plantilla, por lo que ese método estaría vacío. En estos casos, el método puede no existir en absoluto.

Probablemente ya sabes cómo añadir un enlace a EditPresenter y su acción create. Pruébalo.

Sólo tiene que añadir al archivo app/UI/Home/default.latte:

<a n:href="Edit:create">Write new post</a>

Editar Mensajes

Añadamos también la capacidad de editar entradas existentes. Será bastante simple – ya tenemos postForm y podemos usarlo para editar también.

Añadiremos una nueva página edit a 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());
}

Y crearemos la plantilla Edit/edit.latte:

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

{control postForm}

Y actualizar el método postFormSucceeded, que será capaz de añadir un nuevo mensaje (como lo hace ahora), o para editar los ya existentes:

private 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);
}

Cuando se proporciona el parámetro postId, significa que se está editando un post. En tal caso, comprobaremos que la entrada existe realmente y, si es así, la actualizaremos en la base de datos. Si no se proporciona el parámetro postId, significa que se añadirá un nuevo mensaje.

¿Pero de dónde viene postId? Es el parámetro que se pasa al método renderEdit.

Ahora puede añadir un enlace a la plantilla app/UI/Post/show.latte:

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

Resumen

El blog funciona, la gente comenta rápidamente y ya no dependemos de Adminer para añadir nuevas entradas. Es totalmente independiente e incluso la gente normal puede publicar allí. Pero espera, eso probablemente no está bien, que cualquiera, quiero decir realmente cualquier persona en Internet, puede publicar en nuestro blog. Es necesario algún tipo de autenticación para que sólo los usuarios registrados puedan publicar. Lo añadiremos en el próximo capítulo.