Jobeet, Día 4: El Controlador y la Vista

Symfony

Bueno como ya comenté, con la parte que pueda reutilizar del texto del documento original haré copy&paste como buen programador xD

 

En el día anterior, hemos explorado cómo Symfony simplifica la gestión de bases de datos por abstracción, y mediante la conversión de elementos relacionales con útiles clases orientadas a objetos. También hemos jugado con Doctrine para describir el esquema de base de datos, crear las tablas, y llenar la base de datos con algunos datos iniciales.

Hoy, vamos a personalizar el controller para job creado el día anterior. El controlador job existente tiene todo el código que necesitamos para Jobeet:

Una página que lista todos los puestos de trabajo

Una página para crear un nuevo puesto de trabajo

Una página para actualizar un puesto de trabajo existente

Una página para eliminar un puesto de trabajo

Aunque el código está listo para ser utilizado como esta, vamos a refactorizar las plantillas para adaptarlas lo más cerca a los mockups Jobeet. (Esto sería en la 1.4 porque el crud que genera Symfony2 es pésimo xD)

La arquitectura MVC

Si estás desarrollando con PHP sitios web sin ningún framework, probablemente uses el paradigma de un archivo PHP por página HTML. Estos archivos PHP probablemente contengan el mismo tipo de estructura: inicialización y configuración global, lógica de negocio relacionada con la página solicitada, busqueda de registros en la base, y finalmente el código HTML que arma la página.

Puedes utilizar un motor de plantillas para separar la lógica del HTML. Tal vez utilizas una capa de abstracción de la base de datos para separar el modelo de la lógica de negocio. Sin embargo, la mayoría de las veces, terminas con un montón de código que es una pesadilla para mantener. Es rápido para construir, pero con el tiempo, es más y más difícil de hacer cambios, especialmente porque nadie, excepto tú entiende cómo se construye y cómo funciona.

Al igual que con todos los problemas, hay soluciones agradables. Para desarrollo web, la solución más común para la organización de su código de hoy en día es el patrón de diseño MVC. En resumen, el patrón de diseño MVC define una manera de organizar el código de acuerdo a su naturaleza. Este patrón separa el código en tres capas:

  • La capa Modelo define la lógica de negocio (la base de datos pertenece a esta capa). Ya sabes que Symfony guarda todas las clases y archivos relacionados con el modelo en el directorio Entity/ de cada Bundle.
  • La Vista es con lo que el usuario interactúa (un motor de plantillas es parte de esta capa). En Symfony2, para la vista usaremos el motor Twig. Estas son guardadas en varios directorios de Resources/views/ como veremos más adelante en el día de hoy.
  • El Controlador es la pieza de código que llama al Modelo para obtener algunos datos que le pasa a la Vista para la presentación al cliente. Cuando instalamos Symfony el primer día, vimos que todas las solicitudes son gestionadas por un controlador frontal (app.php, app_dev.php, …). Estos controladores frontales delegaran la verdadera labor a las acciones. Como vimos ayer, estas acciones son, lógicamente, agrupadas en Controladores dentro de la carpeta Controller/.
Modelo Vista Controlador

El diseño

En primer lugar, si miraste de cerca los mockups, te darás cuenta de que gran parte de cada una de las páginas tiene el mismo aspecto. Ya sabes que la duplicación de código esta mal, ya sea si estamos hablando de código HTML, PHP o Twig, por lo que necesitamos encontrar una manera de prevenir estos elementos de vista común resultantes de la duplicación de código.

Una forma de resolver el problema es definir un encabezado y un pie de página y lo incluyes en cada plantilla:

Diseño Cabecera-Pie

Pero los archivos de la cabecera y el pie de página no contienen HTML válido. Debe haber una mejor manera. En lugar de reinventar la rueda, vamos a utilizar otro patrón de diseño para resolver este problema: el patrón de diseño decorador. El patrón de diseño decorador resuelve el problema al revés: la plantilla es decorada después de que el contenido es mostrado por una plantilla global, llamada layout:

Patrón de diseño decoradorCrearemos entonces una plantilla base para toda la aplicación y la guardaremos en app/Resources/views/ también podríamos crearla dentro de la propia carpeta src/MDUA/JobeetBundle/Resources/views/ del bundle, a gustos los colores, como creo que es algo que usaremos en toda la aplicación la guardaré en la carpeta para las vistas de la aplicación sustituyendo a la que ya hay.

Como no es intención el diseño usare el html4 original para no perder tiempo en ello.

Para definir partes de la plantilla que posteriormente redefiniremos usamos {% block %} de las dos maneras que aparecen arriba

o

Las Hojas de Estilo, Imágenes, y JavaScripts

Ya que este tutorial no es acerca de diseño web, tenemos ya preparado todo lo necesario que usaremos para Jobeet: descarga los archivo gráficos y copiarlos dentro del directorio src/JobeetBundle/Resources/public/images/; descarga los archivo de hojas de estilo y copiarlos dentro del directorio src/JobeetBundle/Resources/public/css/.

Y el favicon directamente en la carpeta web

Para copiar los recursos de cada bundle en la carpeta web deberemos ejecutar

php app/console assets:install web

y esto nos lo guardará en una carpeta con el nombre del bundle en web/bundles/

Ahora solo nos queda por decirle a cada uno de nuestras vistas de que plantilla extiende y modificar lo que necesitemos.

La Página Principal de Puesto de Trabajo

Como vimos el día tres el listado de trabajos se genera desde indexAction en el controlador JobController. Si vamos al archivo job.yml dentro de JobeetBundleResourcesconfigrouting vemos que las primeras tres lineas son:

Recordar que job.yml se incluye desde JobeetBundleResourcesrouting.yml

Que le coloca el directorio job a la ruta, por lo que si vamos a www.jobeet.dev/job/ Symfony2 nos mandará al método indexAction del controlador JobController del bundle MDUAJobeetBundle.

El método no llene nada de especial

Usamos el entity manager de doctrine para llamar al repositorio de la entidad y usar la función findAll, que nos devuelve todas las entidades existentes.

Posteriormente renderizamos la vista pasándole un array con las variables que necesitamos.

En la vista solo tenemos que indicar de donde extiende con

y sobreescribir ciertos bloques

Con {{ parent() }} lo que hacemos es cargar el contenido del bloque padre, por lo que en este caso el bloque stylesheets no lo estamos sobrescribiendo sino que le estamos añadiendo otro css.

Listado de trabajos sin limpiar

Si vamos ahora a www.job.dev/jobs/ podemos ver algo mas decente  la vista, pero como hay mucha información que nos sobra haremos limpieza y maqueteramos la nueva información.

lo que nos da algo bastante más amigable

Listado de trabajos

 

La Plantilla para los Puestos de Trabajo

Ahora haremos lo mismo con mostrar.

Mostrar puesto de trabajo

El método que genera esta página es showAction

Que usa el método find del repositorio para encontrar el trabajo que le pasamos por la url y si no encuentra el trabajo en la base de datos se lanzará una excepción que en desarrollo se verá como:

Excepcion trabajo no encontrado

pero en producción saldría un error “404 not Found”

Bueno y parece ser que esto es todo por hoy…. reconozco que solo llevo 4 días y ya estoy un poco cansado… porque lo de explicar no se me da nada bien y por un día que tengo libre para hacer cosas a la semana para hacer mis cosas lo gasto en esto… pff.  A saber cuando escribiré el día 5 xD

2 Responses to “Jobeet, Día 4: El Controlador y la Vista”

  1. guillermo

    Hola. Vas a seguir con el tutorial? Porque estaba bueno para aprender symfony2, me sirve mucho y me gustaria, si tienes tiempo por supuesto, que sigas con los demas capitulos del jobeet. Saludos

    Responder
    • Aprendiz

      Me gustaría poder terminarlo la verdad pero pff no tengo tiempo actualmente :( y más ahora que se ha venido la novia a vivir conmigo jaja (menos mal que no lee esto sino me pega xD)

      Si queires más tutos siempre tienes el libro de javier eguiluz que fue el primero que me leí yo y es muy bueno por solo 10€.

      También tienes un tutorial que lo transcribí aquí de como crear un blog.

Deja un comentario

  • (will not be published)


7 + = 14