Freelancer

12.

Marzo

Hazlo fácil con EasyAdmin Bundle

Crea tu backoffice en cuestión de minutos

12/03/2017

Este fue sin duda uno de los mayores descubrimientos a la hora de hacer un gestor de contenidos tipo CRUD, mediante una estructura de datos ya definida. Es decir, antes de configurar el bundle, sería conveniente que tuviéramos claro a grosso modo qué entidades va a tener nuestro proyecto.

Una vez tengamos las entidades definidas con los getters y setters, pasamos a instalar el bundle. Para ello, lo hacemos mediante composer desde la raíz del proyecto:

Después lanzaremos el composer update para que nos lo instale en la carpeta /vendors

Luego añadimos el bundle en el fichero AppKernel.php de Symfony.

Ahora, cargamos las rutas del bundle en nuestro fichero routing.yml

Como el bundle usa alguna hoja de estilos y algún javascript, se necesitará pasar el comando assets:install, el cual dependiendo de nuestra versión de Symfony, será de una u otra manera. El ejemplo mostrado es para Symfony 2

Ahora, nos queda configurar las entidades de las cuales queremos hacer el CRUD. Esta configuración se lleva toda a cabo en el fichero config.yml de nuestra aplicación. Pondré un ejemplo del código que uso, para hacer esta misma web, para la cual he usado este bundle. El ejemplo será sobre la entidad Post, de la cual se redactan cada uno de los artículos de esta web, entre ellos este.

Cabe destacar que hay muchas más opciones que podéis ver en la documentación oficial.

En el código podemos ver 4 partes, de las cuales la más importante es la de entidades (entities):

site_name

Aquí simplemente se configura el título de nuestro gestor de contenidos. En mi caso, dhvarela.

design

En esta parte tenemos varias configuraciones de aspecto visual. Por ejemplo,

  • brand_color será el color de la barra superior de menú.
  • color_scheme puede adoptar dos valores (dark o light)
  • assets es la parte donde le decimos las rutas de los css y js que hemos copiado antes con el comando assets:install, y además también podemos poner un icono, para sustituir al icono de symfony por defecto.
  • menu contendrá un listado de todas las entidades que vamos a querer crear/editar/borrar , a las cuales se les puede poner un icono de los que posee la librería FontAwesome (http://fontawesome.io/icons/)

formats

En esta parte podemos configurar cómo se van a mostrar las fechas y números principalmente.

entities

Esta es sin duda la parte donde está todo nuestro sistema de CRUD. Si observáis, lo primero que se le dice es el nombre de la clase (Entidad), después ponemos el label que vamos a mostrar en el backoffice. Esto simplemente es un tema de namings, podemos llamar a la entidad de una manera internamente, y en el backoffice de otra.

Ahora el punto a entender son las 3 posibilidades que tenemos de CRUD (lista, ver y edición).

Si nos detenemos en la primera de ellas (lista) vemos cómo configurar los campos que queremos mostrar a modo de resumen en nuestro listado de registros que tendremos almacenados de esa entidad. Esto se configura en el atributo fields. En nuestro caso queremos descatar el id, fecha, nombre, título, imagen, orden y si está o no activo. Para la imagen luego muestro cómo podemos configurarlo de manera sencilla con VichUploaderBundle

En la parte actions configuramos qué acciones queremos realizar sobre los registros listados. Lo más común es habilitar las opciones de ver, editar y eliminar.

Luego tenemos la parte de CRUD de edición (form), es la más importante. Aquí han de aparecer todos los campos que queremos permitir crear/editar. Son bastante intuitivos, y podríamos destacar los campos "text" y "imageFile". El primero lo queremos hacer que sea editable mediante un editor WYSIWYG , en nuestro caso vamos a escoger el ckeditor. Y para subir imágenes, escogemos el ya comentado vichUploader. Ambos hay que configurarlos, y ahora explicaremos como.

La última parte es simplemente, visualizar un registro. En ella le indicamos qué campos queremos visualizar. Una vez tengamos estas configuraciones hechas, si vamos a la url de nuestro panel de administración ya deberíamos de ver el CRUD montado. Para ello vamos a www.tudominio.com/admin

Es importante tener configurado esta parte como privada, para que solamente los usuarios con el Role ADMIN puedan entrar en este backoffice. Esta parte no se trata en el post, pero la configuración se tendría que hacer en el fichero security.yml en el cual deberíamos de tener algo así.

 

Instalando VichUploaderBundle para poder cargar una imagen

Para poder subir imágenes, usaremos Vich Uploader. Habrán 3 cosas a configurar.

  • Archivo config del bundle
  • Campo de la entidad donde queremos subir imágenes
  • Archivo config de nuestro admin

Pero antes, hay que instalar de la forma habitual el bundle:

i) Archivo de configuración de Vich Uploader:

Aquí es donde informaremos de los diferentes tipos de imágenes que vamos a subir a nuestra web. Podemos crear diferentes "mappings", en el ejemplo solamente se ha creado un mapeo con la nomenclatura blog_images a la cual le especificamos el directorio donde se van a subir las imágenes desde nuestro backoffice. La idea es que si estamos editando la entidad de pedidos, por ejemplo, las subamos de manera ordenada en la carpeta de /images/pedidos. Si tenemos imágenes para nuestros posts, como es el caso, en la carpeta /images/blog.

ii) Campo de la entidad que usaremos para subir las imágenes:

Dentro de la entidad le especificamos al campo $imageFile que va a ser una variable del tipo File, y le añadimos la annotación Uploadable, especificando además el mapeo que hemos creado en el paso primero. Es importante que coincida el mapeo ya que sino nos dará un error al no encontrarlo.

iii) Archivo de configuración de nuestro admin:

El ejemplo lo he reducido para que se vea claramente el campo imageFile al cual le asignamos un type con valor 'vich_image'

Y con esto, si hacemos la prueba ya tendríamos el resultado que buscamos. Nos debe de aparecer en el formulario de edición la opción de subir una imagen.

 

Instalando ckeditor bundle para editor de textos

El bundle de EasyAdmin no trae instalado ningún editor de texto WYSIWYG. En el propio bundle se recomienda instalar ckeditor mediante el bundle IvoryCKEditorBundle. Para ello, lo obtenemos mediante composer y lo añadimos al AppKernel de la aplicación.

Después en la configuración del bundle en el config.yml añadiremos el valor 'ckeditor' al atributo 'type' al campo que queremos se muestre con el editor, en ejemplo anterior será el campo Text.

Para personalizar las opciones de la barra de herramientas del editor de texto, lo podemos configurar en el fichero config.yml . Pongo un ejemplo del que he utilizado yo y lo comento.

Hay varias opciones ya predefinidas y las podemos indicar en el atributo 'default_config'. En mi caso he usado la configuración 'simple_config' la cual creo que es la que se muestran las opciones más habituales. Por otra parte, es importante añadir la opción 'extraAllowContent' con los valores que os indico en el ejemplo. Sobretodo con esto evitaremos que el editor nos reemplace etiquetas html que queramos meter en el texto expresamente. Si nos gusta editar un poco el HTML mediante la opción Fuente HTML, tendremos que poner esta opción para que nos permita libertad de etiquetas.

 

Referencias y documentación oficial:

  1. Configuración general del bundle en este link.
  2. Configurar ckeditor dentro de EasyAdmin en este link.
  3. Integración de VichUploader dentro de EasyAdmin aquí.

Daniel Hernández Varela

Programador PHP

Symfony | Javascript | MySQL | HTML5 | CSS3 | LESS | Git | jQuery | WordPress | Prestashop