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/Presentation/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\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,
	) {
	}
}

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/Presentation/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 $id): void
{
	$post = $this->database
		->table('posts')
		->get($id);

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

Cuando se proporciona el parámetro id, 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 id, significa que se añadirá un nuevo mensaje.

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

Ahora puede añadir un enlace a la plantilla app/Presentation/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.

  1. Documentación
  2. Cree su primera aplicación
  3. Creación y edición de entradas