Editar una Publicación Existente – Using Zend Framework 3

Translation into this language is not yet finished. You can help this project by translating the chapters and contributing your changes.

12.10. Editar una Publicación Existente

En esta sección implementaremos la página para Editar Publicación que contiene el formulario que permite editar los datos de una publicación existente, enviar nuevos datos al servidor y aplicar los cambio en la base de datos. El visitante del sitio web será capaz de ver la página web ingresando la siguiente URL en la barra de navegación del navegador web: http://localhost/posts/edit/<id>, donde <id> es el identificador único de la publicación.

Para implementar esta página necesitamos los siguientes elementos:

Crear un formulario que permitirá ingresar el título, contenido, etc., de la publicación. Para esta página, podemos reutilizar con éxito el formulario PostForm que creamos antes (solamente renombraremos el botón Crear por Guardar).
Agregar el método updatePost() al servicio PostManager. El método buscará la publicación a partir de su ID y actualizará su datos.
Agregar el método convertTagsToString() al servicio PostManager. Este método tomará la entidad publicación y de la salida producirá una cadena de caracteres separados por comas con la lista de etiquetas.
Agregar el método de acción PostController::editAction() que tomará los datos ingresados por el usuario y los pasará a los modelos para finalmente regresar los datos e imprimirlos.
Y agregar el archivo de plantilla de vista edit.phtml que imprimirá el formulario.

12.10.1. Modificar el PostManager

Primero agregamos los métodos updatePost() y convertTagsToString() al modelo de servicio PostManager de la siguiente manera:

<?php
//...
class PostManager
{
    //...

    // This method allows to update data of a single post.
    public function updatePost($post, $data)
    {
        $post->setTitle($data['title']);
        $post->setContent($data['content']);
        $post->setStatus($data['status']);

        // Add tags to post
        $this->addTagsToPost($data['tags'], $post);

        // Apply changes to database.
        $this->entityManager->flush();
    }

    // Converts tags of the given post to comma separated list (string).
    public function convertTagsToString($post)
    {
        $tags = $post->getTags();
        $tagCount = count($tags);
        $tagsStr = '';
        $i = 0;
        foreach ($tags as $tag) {
            $i ++;
            $tagsStr .= $tag->getName();
            if ($i < $tagCount)
                $tagsStr .= ', ';
        }

        return $tagsStr;
    }
}

Arriba tenemos el método updatePost() (líneas 8-19) que toma una entidad Post que existe, el nuevo título, contenido, estado y la lista de etiquetas. Luego, este actualiza las propiedades de la entidad y guarda los cambios en la base de datos usando el método flush().

Nótese que el método updatePost() no usa el método persist() del administrador de entidades, porque en este caso tenemos una publicación que existe y no una nueva.

Luego tenemos el método convertTagsToString() (líneas 22-36) que toma la publicación y recorre las entidades Tag asociadas con la publicación y las formatea regresando una lista de etiquetas separadas por coma.

12.10.2. Agregar una Acción en el Controlador y una Plantilla de Vista

Luego agregamos a la clase de tipo controlador PostController el método editAction():

<?php
namespace Application\Controller;
//...
use Application\Form\PostForm;
use Application\Entity\Post;

class PostController extends AbstractActionController
{
  // This action displays the page allowing to edit a post.
  public function editAction()
  {
    // Create the form.
    $form = new PostForm();

    // Get post ID.
    $postId = $this->params()->fromRoute('id', -1);

    // Find existing post in the database.
    $post = $this->entityManager->getRepository(Post::class)
                ->findOneById($postId);
    if ($post == null) {
      $this->getResponse()->setStatusCode(404);
      return;
    }

    // Check whether this post is a POST request.
    if ($this->getRequest()->isPost()) {

      // Get POST data.
      $data = $this->params()->fromPost();

      // Fill form with data.
      $form->setData($data);
      if ($form->isValid()) {

        // Get validated form data.
        $data = $form->getData();

        // Use post manager service to add new post to database.
        $this->postManager->updatePost($post, $data);

        // Redirect the user to "admin" page.
        return $this->redirect()->toRoute('posts', ['action'=>'admin']);
      }
    } else {
      $data = [
               'title' => $post->getTitle(),
               'content' => $post->getContent(),
               'tags' => $this->postManager->convertTagsToString($post),
               'status' => $post->getStatus()
            ];

      $form->setData($data);
    }

    // Render the view template.
    return new ViewModel([
            'form' => $form,
            'post' => $post
        ]);
  }
}

En el código de arriba extraemos el ID de la publicación usando el método fromRoute() del complemento controlador params(). Luego con el método findOneBy() del administrador de entidades y con el ID buscamos la publicación que tenga el ID dado.

Luego revisamos si es una petición POST. Si es una petición POST llenamos y validamos el formulario con los datos POST. Luego, usamos el método updatePost() del servicio PostManager.

Finalmente creamos el archivo application/post/edit.phtml dentro de la carpeta view del módulo. Colocamos el siguiente código allí:

<?php
$form = $this->form;
$form->get('title')->setAttributes([
    'class'=>'form-control',
    'placeholder'=>'Enter post title here'
    ]);
$form->get('content')->setAttributes([
    'class'=>'form-control',
    'placeholder'=>'Type content here',
    'rows'=>6
    ]);
$form->get('tags')->setAttributes([
    'class'=>'form-control',
    'placeholder'=>'comma, separated, list, of, tags'
    ]);
$form->get('status')->setAttributes([
    'class'=>'form-control'
    ]);
$form->get('submit')->setAttributes(['class'=>'btn btn-primary']);
$form->get('submit')->setValue('Save');
$form->prepare();

?>

<h1>Edit Post</h1>

<p>
    Please fill out the following form and click the *Save* button.
</p>

<div class="row">
    <div class="col-md-6">
        <?= $this->form()->openTag($form); ?>

        <div class="form-group">
            <?= $this->formLabel($form->get('title')); ?>
            <?= $this->formElement($form->get('title')); ?>
            <?= $this->formElementErrors($form->get('title')); ?>
        </div>

        <div class="form-group">
            <?= $this->formLabel($form->get('content')); ?>
            <?= $this->formElement($form->get('content')); ?>
            <?= $this->formElementErrors($form->get('content')); ?>
        </div>

        <div class="form-group">
            <?= $this->formLabel($form->get('tags')); ?>
            <?= $this->formElement($form->get('tags')); ?>
            <?= $this->formElementErrors($form->get('tags')); ?>
            <p class="help-block">Separate tags with comma.</p>
        </div>

        <div class="form-group">
            <?= $this->formLabel($form->get('status')); ?>
            <?= $this->formElement($form->get('status')); ?>
            <?= $this->formElementErrors($form->get('status')); ?>
        </div>

        <?= $this->formElement($form->get('submit')); ?>

        <?= $this->form()->closeTag(); ?>
    </div>
</div>

Ahora si abrimos la URL htpp://localhost/posts/edit/<id> en el navegador web debemos ser capaces de ver la página Editar Publicación que permite editar una publicación existente (ver la figura 12.8 abajo):

Figure 12.8. Página Editar Publicación

Haciendo clic en el botón Guardar guardaremos los cambios en la base de datos.