SymfonyWorld Online 2020
100% online
30+ talks + workshops
Live + Replay watch talks later

Paso 9: Configurando un panel de administración

5.0 version
Maintained

Configurando un panel de administración

Añadir las próximas conferencias a la base de datos es tarea de los administradores del proyecto. Un panel de administración es una sección protegida del sitio web donde los administradores del proyecto pueden gestionar los datos del sitio web, moderar los comentarios y efectuar otro tipo de operaciones.

¿Cómo podemos crearlo rápidamente? Utilizando un bundle que genera un panel de administración a partir del modelo del proyecto. EasyAdmin es perfecto para esta tarea.

Configurando EasyAdmin

En primer lugar, añade EasyAdmin como una dependencia del proyecto:

1
$ symfony composer req "admin:^2.0"

Para configurar EasyAdmin, se ha generado un nuevo archivo de configuración a través de su receta de Flex:

config/packages/easy_admin.yaml
1
2
3
4
5
6
#easy_admin:
#    entities:
#        # List the entity class name you want to manage
#        - App\Entity\Product
#        - App\Entity\Category
#        - App\Entity\User

La práctica totalidad de los paquetes instalados tienen una configuración similar a ésta en el directorio config/packages/. Casi siempre, los valores predeterminados habrán sido escogidos cuidadosamente para que funcionen en la mayoría de las aplicaciones.

Quita la marca de comentarios del primer par de líneas y agrega las clases del modelo del proyecto:

config/packages/easy_admin.yaml
1
2
3
4
easy_admin:
    entities:
        - App\Entity\Conference
        - App\Entity\Comment

Accede al panel de administración generado en /admin. ¡Boom! Ya dispones de una interfaz de administración para conferencias y comentarios agradable y rica en funciones:

Truco

¿Por qué se puede acceder al panel desde /admin? Es el prefijo configurado por defecto en config/routes/easy_admin.yaml:

config/routes/easy_admin.yaml
1
2
3
4
easy_admin_bundle:
    resource: '@EasyAdminBundle/Controller/EasyAdminController.php'
    prefix: /admin
    type: annotation

Puedes cambiarlo por lo que quieras.

No es posible añadir conferencias y comentarios todavía, ya que obtendríamos el error: Object of class App\Entity\Conference could not be converted to string. EasyAdmin intenta mostrar la conferencia relacionada con los comentarios, pero sólo puede hacerlo si hay una representación como cadena de una conferencia. Arréglalo añadiendo un método __toString() en la clase Conference:

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
--- a/src/Entity/Conference.php
+++ b/src/Entity/Conference.php
@@ -43,6 +43,11 @@ class Conference
         $this->comments = new ArrayCollection();
     }

+    public function __toString(): string
+    {
+        return $this->city.' '.$this->year;
+    }
+
     public function getId(): ?int
     {
         return $this->id;

Haz lo mismo para la clase Comment:

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
--- a/src/Entity/Comment.php
+++ b/src/Entity/Comment.php
@@ -48,6 +48,11 @@ class Comment
      */
     private $photoFilename;

+    public function __toString(): string
+    {
+        return (string) $this->getEmail();
+    }
+
     public function getId(): ?int
     {
         return $this->id;

Ahora puedes añadir/modificar/eliminar conferencias directamente desde el panel de administración. Juega con él y añade al menos una conferencia.

Añade algunos comentarios sin fotos. De momento, configura la fecha manualmente; rellenaremos la columna createdAt automáticamente en un paso posterior.

Personalizando EasyAdmin

El panel de administración por defecto funciona bien, pero se puede personalizar de muchas maneras para mejorar la experiencia. Hagamos algunos cambios sencillos para demostrar sus posibilidades. Sustituye la configuración actual por la siguiente:

config/packages/easy_admin.yaml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
easy_admin:
    site_name: Conference Guestbook

    design:
        menu:
            - { route: 'homepage', label: 'Back to the website', icon: 'home' }
            - { entity: 'Conference', label: 'Conferences', icon: 'map-marker' }
            - { entity: 'Comment', label: 'Comments', icon: 'comments' }

    entities:
        Conference:
            class: App\Entity\Conference

        Comment:
            class: App\Entity\Comment
            list:
                fields:
                    - author
                    - { property: 'email', type: 'email' }
                    - { property: 'createdAt', type: 'datetime' }
                sort: ['createdAt', 'ASC']
                filters: ['conference']
            edit:
                fields:
                    - { property: 'conference' }
                    - { property: 'createdAt', type: datetime, type_options: { attr: { readonly: true } } }
                    - 'author'
                    - { property: 'email', type: 'email' }
                    - text

Hemos sobreescrito la sección design para añadir iconos a los elementos del menú y para añadir un enlace de vuelta a la página principal del sitio web.

Para la sección Comment, el listado de campos nos permite ordenarlos como queramos. Algunos campos se pueden modificar, como por ejemplo para establecer la fecha de creación como de sólo lectura. La sección filters define los filtros que se deben mostrar en la parte superior del campo de búsqueda.

Estas personalizaciones son solo una pequeña introducción a las posibilidades que ofrece EasyAdmin.

Juega con el panel, filtra los comentarios por conferencia, o busca comentarios por correo electrónico, por ejemplo. Pero todavía nos queda algo por resolver: cualquiera puede acceder al panel de administración. No te preocupes, lo protegeremos más adelante.

1
$ symfony run psql -c "TRUNCATE conference RESTART IDENTITY CASCADE"

  • « Previous Paso 8: Describiendo la estructura de datos
  • Next » Paso 10: Construyendo la interfaz de usuario

This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.