Web hosting

«  Creando un blog en Symfony2   ::   Contenido   ::   [Parte 2] — Página de contacto: Validadores, formularios y correo electrónico  »

[Parte 1] — Configurando Symfony2 y sus plantillas

Descripción

Este capítulo cubre los primeros pasos para crear un sitio web Symfony2. Descargaremos y configuraremos la Edición estándar de Symfony2, crearemos el paquete del Blog y adjuntaremos las principales plantillas HTML. Al final de este capítulo habremos configurado un sitio web Symfony2 que estará disponible a través de un dominio local, por ejemplo, http://symblog.dev/. El sitio web contendrá la estructura HTML principal del blog junto con algún insulso contenido.

En este capítulo cubriremos las siguientes áreas:

  1. La creación de una aplicación Symfony2
  2. Configurando un dominio de desarrollo
  3. Los paquetes de Symfony2
  4. El enrutado
  5. Los controladores
  6. Las plantillas con Twig

Descargando e instalando

Como ya dijimos, vamos a utilizar la Edición estándar de Symfony2. Esta distribución viene con las bibliotecas del núcleo de Symfony2 y los paquetes más comunes que se requieren para crear sitios web. Puedes descargar el paquete de Symfony2 de su sitio web. Puesto que no quiero repetir la excelente documentación proporcionada por el libro de Symfony2, por favor consulta el capítulo de la Instalación y configuración de Symfony2 para ver los requisitos detallados. Este te guiará a través del proceso de cuál es el paquete a descargar, cómo instalar los proveedores necesarios, y la forma correcta de asignar permisos a los directorios.

Advertencia

Es importante prestar especial atención a la sección Configuración de Permisos en el capítulo de instalación. Este explica las distintas formas en que puedes asignar permisos a los directorios app/cache y app/logs para que el usuario del servidor web y el usuario de línea de ordenes tengan acceso de escritura a ellos.

Creando un dominio de Desarrollo

A efectos de esta guía vamos a utilizar el dominio local http://symblog.dev/ sin embargo, puedes elegir cualquier dominio que desees. Estas instrucciones son específicas para Apache y se supone que ya has configurado Apache y está corriendo en tu máquina. Si te sientes cómodo configurando dominios locales, o utilizas un servidor web diferente, tal como nginx puedes omitir esta sección.

Nota

Estos pasos se llevaron a cabo en la distribución Fedora de Linux por lo tanto los nombres de ruta, etc., pueden variar en función de tu sistema operativo.

Vamos a empezar creando un servidor virtual con Apache. Busca el archivo de configuración de Apache y anexa los siguientes ajustes, asegurándote de cambiar las rutas de DocumentRoot y Directory consecuentemente. La ubicación y nombre del archivo de configuración de Apache puede variar mucho dependiendo de tu sistema operativo. En Fedora se encuentra ubicado en /etc/httpd/conf/httpd.conf. Tendrás que editar este archivo con privilegios sudo:

# /etc/httpd/conf/httpd.conf

NameVirtualHost 127.0.0.1

<VirtualHost 127.0.0.1>
  ServerName symblog.dev
  DocumentRoot "/var/www/html/symblog.dev/web"
  DirectoryIndex app.php
  <Directory "/var/www/html/symblog.dev/web">
    AllowOverride All
    Allow from All
  </Directory>
</VirtualHost>

Luego agrega un nuevo dominio en la parte inferior del archivo host ubicado en /etc/hosts. Una vez más, tendrás que editar este archivo con privilegios sudo.

# /etc/hosts
127.0.0.1     symblog.dev

Por último no olvides reiniciar el servicio Apache. Esto deberá cargar los ajustes de configuración actualizados que hemos hecho.

$ sudo service httpd restart

Truco

Si te encuentras creando dominios virtuales todo el tiempo, puedes simplificar este proceso, usando servidores virtuales dinámicos.

Ahora deberías poder visitar http://symblog.dev/app_dev.php/.

Página de bienvenida de Symfony2

Si esta es tu primera visita a la página de bienvenida de Symfony2, dedica algún tiempo para ver las páginas de demostración. Cada página de demostración ofrece fragmentos de código que muestran cómo funciona cada página en segundo plano.

Nota

También notarás una barra de herramientas en la parte inferior de la pantalla de bienvenida. Esta es la barra de depuración web y te proporcionará información muy valiosa sobre el estado de tu aplicación. La información incluye el tiempo consumido en la elaboración de la página, el uso de memoria, las consultas hechas a la base de datos, el estado de autenticación y puedes ver mucho más desde esta barra de herramientas. Por omisión, la barra de herramientas sólo está visible cuando se ejecuta en el entorno dev, puesto que proporcionar la barra de herramientas en producción sería un gran riesgo de seguridad ya que expone una gran cantidad de información interna de tu aplicación. A través de esta guía, nos referiremos constantemente a la barra de herramientas a medida que introduzcamos nuevas características.

Configurando Symfony: La interfaz Web

Symfony2 introduce una interfaz web para configurar varios aspectos relacionados con el sitio web, tal como la configuración de la base de datos. Para este proyecto necesitamos una base de datos, por lo tanto esto nos permite empezar utilizando el configurador.

Visita http://symblog.dev/app_dev.php/ y haz clic en el botón Configurar. Introduce los detalles de configuración de la base de datos (esta guía asume el uso de MySQL, pero puedes elegir cualquier otra base de datos a la que tengas acceso), seguidos —en la siguiente página— por la generación de un segmento CSRF. Se te presentará la configuración de los parámetros que Symfony2 ha generado. Presta especial atención a la notificación en la página, es probable que tu archivo app/config/parameters.yml no se pueda escribir, por lo tanto tendrás que copiar y pegar los ajustes en el archivo que se encuentra en app/config/parameters.yml (esta configuración puede sustituir los ajustes existentes en ese archivo).

Paquetes: bloques de construcción de Symfony2

Los paquetes son el elemento fundamental de cualquier aplicación Symfony2, de hecho Symfony2 en sí mismo es un paquete. Los paquetes nos permiten separar la funcionalidad proporcionando unidades de código reutilizable. Ellos encierran todo lo necesario para apoyar el propósito del paquete incluyendo controladores, modelo, plantillas, y diversos recursos, como imágenes y CSS. Vamos a crear un paquete para nuestro sitio web bajo el espacio de nombres Blogger. Si no estás familiarizado con los espacios de nombres en PHP debes dedicar algún tiempo leyendo sobre ellos, ya que en Symfony2 se utilizan profusamente, todo es un espacio de nombres. Ve el cargador automático de Symfony2 para obtener detalles específicos sobre cómo logra Symfony2 cargar tus clases automáticamente.

Truco

Una buena comprensión de los espacios de nombres, te puede ayudar a evitar problemas comunes que puedes encontrar cuando la estructuración de directorios no se hace correctamente al asignar las estructuras del espacio de nombres.

Creando el paquete

Para encapsular la funcionalidad del blog vamos a crear un paquete, le daremos un nombre original para salir de lo común y corriente, lo llamaremos Blog. Este contará con todos los archivos y recursos necesarios, por lo tanto fácilmente se podría instalar en otra aplicación de Symfony2. Symfony2 ofrece una serie de tareas que nos ayudarán a realizar las operaciones más comunes. Una de estas tareas es el generador de paquetes.

Para arrancar el generador de paquetes ejecuta la siguiente orden. Se te presentará una serie de instrucciones que te permitirán la manera de configurar tu paquete. En esta ocasión, vamos a utilizar el valor predeterminado para cada pregunta.

$ php app/console generate:bundle --namespace=Blogger/BlogBundle --format=yml

Una vez finalizado el generador, Symfony2 habrá construido el diseño básico para el paquete. Aquí debemos tener en cuenta unos cuantos cambios importantes.

Truco

No es obligatorio que utilices el generador de tareas proporcionado por Symfony2, este simplemente está ahí para ayudarte. Podrías haber creado manualmente la estructura de directorios y los archivos del paquete. Si bien no es obligatorio usar los generadores, proporcionan algunos beneficios, como son la rapidez y ejecución de todas las tareas requeridas para conseguir todo lo necesario en el paquete y funcionando. Un ejemplo de ello es el registro del paquete.

Registrando el paquete

Nuestro nuevo paquete BloggerBlogBundle automáticamente se ha registrado en el núcleo de nuestra aplicación situado en app/AppKernel.php. Symfony2 nos obliga a registrar todos los paquetes que necesita usar la aplicación. También notarás que algunos paquetes se registran sólo cuando estás en el entorno dev o test. Cargar esos paquetes en el entorno prod (por ‘producción’) sería introducir una sobrecarga adicional de cierta funcionalidad que no se utilizaría. El siguiente fragmento de código muestra cómo se ha registrado el paquete BloggerBlogBundle.

// app/AppKernel.php
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
        // ..
            new Blogger\BlogBundle\BloggerBlogBundle(),
        );
        // ..

        return $bundles;
    }

    // ..
}

Enrutado

El enrutado del paquete se ha importado al archivo de enrutado principal de la aplicación ubicado en app/config/routing.yml.

# app/config/routing.yml
BloggerBlogBundle:
    resource: "@BloggerBlogBundle/Resources/config/routing.yml"
    prefix:   /

La opción prefix nos permite montar todo el enrutado de BloggerBlogBundle con un prefijo. En nuestro caso hemos optado por montarlo en el valor predeterminado /. Si por ejemplo quisieras que todas tus rutas llevaran el prefijo /blogger sólo tienes que cambiar el prefijo a prefix: /blogger.

Estructura predeterminada

Por omisión el diseño del paquete se crea bajo el directorio src. Esto comienza en el nivel superior con el directorio Blogger, el cual corresponde directamente con el espacio de nombres Blogger, en el que hemos creado nuestro paquete. Bajo este, tenemos el directorio BlogBundle el cual contiene el paquete real. Examinaremos el contenido de este directorio a medida que vayamos avanzando. Si estás familiarizado con las plataformas MVC, algunos de los directorios se explican por sí mismos.

El controlador predeterminado

Como parte del generador de paquetes, Symfony2 ha creado un controlador predeterminado. Podemos ejecutar este controlador visitando la dirección http://symblog.dev/app_dev.php/hello/symblog. Deberías ver una página con un simple saludo. Intenta cambiando la parte symblog de la URL por tu nombre. Podemos examinar cómo se generó esta página a un alto nivel.

Enrutado

El archivo de enrutado del BloggerBlogBundle ubicado en src/Blogger/BlogBundle/Resources/config/routing.yml contiene la siguiente regla de enrutado:

# src/Blogger/BlogBundle/Resources/config/routing.yml
BloggerBlogBundle_homepage:
    pattern:  /hello/{name}
    defaults: { _controller: BloggerBlogBundle:Default:index }

La ruta se compone de un patrón y algunas opciones predeterminadas. El patrón se compara con la URL, y las opciones defaults especifican el controlador que se ejecutará si coincide la ruta. En el patrón /hello/{name}, el marcador de posición {name} coincide con cualquier valor puesto que no se han establecido requisitos específicos. La ruta tampoco especifica ningún formato, método HTML, o región. Puesto que no existen requisitos para métodos HTTP, todas las peticiones GET, POST, PUT, etc., serán elegibles para concordar con el patrón.

Si la ruta reúne todos los criterios especificados, será ejecutada por el _controller de la opción defaults. La opción _controller especifica el nombre lógico del controlador que permite a Symfony2 asignarla a un archivo específico. El ejemplo anterior hará que se ejecute la acción index del controlador Default ubicado en src/Blogger/BlogBundle/Controller/DefaultController.php.

El controlador

El controlador en este ejemplo es muy sencillo. La clase DefaultController extiende la clase Controller que proporciona algunos métodos útiles, como el método render que utilizaremos a continuación. Debido a que nuestra ruta define un marcador de posición, este se pasa a la acción como el argumento $name. La acción no hace más que llamar al método render especificando la plantilla index.html.twig ubicada en el directorio Default de las vistas del BloggerBlogBundle. El formato del nombre de la plantilla es paquete:controlador:plantilla. En nuestro ejemplo, este es BloggerBlogBundle:Default:index.html.twig el cual designa a la plantilla index.html.twig, ubicada en el directorio Default de las vistas del BloggerBlogBundle, o físicamente en el archivo src/Blogger/BlogBundle/Resources/views/Default/index.html.twig. Puedes utilizar diferentes variaciones del formato de la plantilla para reproducir plantillas en diferentes lugares de tu aplicación y sus paquetes. Veremos esto más adelante en este capítulo.

También le pasamos la variable $name a la plantilla a través de una matriz de opciones.

<?php
// src/Blogger/BlogBundle/Controller/DefaultController.php

namespace Blogger\BlogBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class DefaultController extends Controller
{
    public function indexAction($name)
    {
        return $this->render('BloggerBlogBundle:Default:index.html.twig', array('name' => $name));
    }
}

La plantilla (la Vista)

Como puedes ver la plantilla es muy simple. Esta imprime Hello seguido por el argumento name pasado desde el controlador.

{# src/Blogger/BlogBundle/Resources/views/Default/index.html.twig #}
Hello {{ name }}!

Limpiando

Puesto que no necesitamos algunos de los archivos creados por el generador de paquetes, podemos limpiar un poco.

Puedes eliminar el archivo del controlador src/Blogger/BlogBundle/Controller/DefaultController.php, junto con el directorio de la vista y su contenido en src/Blogger/BlogBundle/Resources/views/Default/. Por último, elimina la ruta definida en src/Blogger/BlogBundle/Resources/config/routing.yml

Plantillas

Cuando utilizamos Symfony2, tenemos 2 opciones predeterminadas para el motor de plantillas; Twig y PHP. Incluso, podrías optar por no usar ninguno de estos y elegir una biblioteca diferente. Esto es posible gracias al contenedor de inyección de dependencias de Symfony2. Vamos a usar Twig como nuestro motor de plantillas por una serie de razones:

  1. Twig es rápido — Las plantillas Twig se compilan hasta clases PHP por lo que hay muy poca sobrecarga al usar las plantillas Twig.
  2. Twig es conciso — Twig nos permite realizar funcionalidad de plantillas con muy poco código. Comparando esto con PHP en que algunas declaraciones son muy detalladas.
  3. Twig admite la herencia entre plantillas — Esto personalmente es uno de mis favoritos. Las plantillas tienen la capacidad de extender y sustituir otras plantillas, lo cual permite a las plantillas hijas cambiar los valores predeterminados proporcionados por sus padres.
  4. Twig es seguro — De manera predeterminada Twig tiene activado el escape de toda su producción, e incluso proporciona un entorno como recinto de seguridad para plantillas importadas.
  5. Twig es extensible — Twig viene con un montón de funcionalidades básicas comunes que se espera tenga un motor de plantillas, pero para aquellas ocasiones donde se requiere una funcionalidad adicional a medida, fácilmente puedes extender a Twig.

Estos sólo son algunos de los beneficios de Twig. Para más razones por las que debes utilizar Twig ve el sitio oficial de Twig.

Estructurando el diseño

Debido a que Twig admite la herencia entre plantillas, vamos a utilizar el enfoque de la herencia de tres niveles. Este enfoque nos permite modificar la vista en tres distintos niveles dentro de la aplicación, lo cual nos da un montón de espacio para nuestras personalizaciones.

La plantilla principal — Nivel 1

Vamos a empezar creando nuestra plantilla básica a nivel de bloques para symblog. Aquí, necesitaremos dos archivos, la plantilla y la hoja de estilo — CSS. Puesto que Symfony2 es compatible con HTML5 también lo vamos a utilizar.

<!-- app/Resources/views/base.html.twig -->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
        <title>{% block title %}symblog{% endblock %} - symblog</title>
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        {% block stylesheets %}
            <link href='http://fonts.googleapis.com/css?family=Irish+Grover' rel='stylesheet' type='text/css'>
            <link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore' rel='stylesheet' type='text/css'>
            <link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
        {% endblock %}
        <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>

        <section id="wrapper">
            <header id="header">
                <div class="top">
                    {% block navigation %}
                        <nav>
                            <ul class="navigation">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </nav>
                    {% endblock %}
                </div>

                <hgroup>
                    <h2>{% block blog_title %}<a href="#">symblog</a>{% endblock %}</h2>
                    <h3>{% block blog_tagline %}<a href="#">creando un blog en Symfony2</a>{% endblock %}</h3>
                </hgroup>
            </header>

            <section class="main-col">
                {% block body %}{% endblock %}
            </section>
            <aside class="sidebar">
                {% block sidebar %}{% endblock %}
            </aside>

            <div id="footer">
                {% block footer %}
                    Symfony2 blog tutorial - created by <a href="https://github.com/dsyph3r">dsyph3r</a>
                {% endblock %}
            </div>
        </section>

        {% block javascripts %}{% endblock %}
    </body>
</html>

Nota

Hay tres archivos externos incluidos en la plantilla, un JavaScript y dos CSS. El archivo JavaScript corrige la carencia de apoyo para HTML5 en los navegadores IE previos a la versión 9. Los dos archivos CSS importan tipos de letra desde Google Web font.

Esta plantilla marca la estructura principal de nuestro sitio web. La mayor parte de la plantilla está compuesta por HTML, con las extrañas directivas de Twig. Ahora vamos a examinar estas directivas de Twig.

Empecemos enfocándonos en el HEAD del documento. Veamos de cerca el título:

<title>{% block title %}symblog{% endblock %} - symblog</title>

La primer cosa que notamos es esa extraña etiqueta {%. Esta no es HTML, y definitivamente tampoco es PHP. Esta es una de las tres etiquetas de Twig. Esta etiqueta es la etiqueta de Twig que Hace algo. Se utiliza para ejecutar expresiones tales como instrucciones de control y para definir elementos de bloque. Puedes encontrar una lista completa de las estructuras de control en la documentación de Twig. El bloque Twig que definimos en el título hace dos cosas; Establece el identificador del bloque para el título, y proporciona una salida predeterminada entre las directivas block y endblock. Al definir un bloque podemos tomar ventaja del modelo de herencia de Twig. Por ejemplo, en una página para mostrar un blog deseamos que el título de la página refleje el título del blog. Lo podemos lograr extendiendo la plantilla y reemplazando el bloque del título.

{% extends '::base.html.twig' %}

{% block title %}The blog title goes here{% endblock %}

En el ejemplo anterior hemos extendido la plantilla base de la aplicación que por primera vez definió el bloque título. Notarás que al formato de plantilla utilizado en la directiva extends le faltan las partes paquete y controlador, recuerda que el formato de la plantilla es paquete:controlador:plantilla. Al excluir las partes paquete y controlador estamos especificando que se usen las plantillas de la aplicación definidas a nivel de app/Resources/views/.

A continuación definimos otro bloque de título y pusimos un cierto contenido, en este caso el título del blog. Puesto que la plantilla principal ya contiene un bloque título, este lo sustituye por el nuestro. El título ahora reproduce ‘El título del blog va aquí - symblog’. Esta funcionalidad proporcionada por Twig se utiliza profusamente en la creación de plantillas.

En el bloque stylesheet introdujimos la siguiente etiqueta de Twig, la etiqueta {{, o la etiqueta que Dice algo.

<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />

Esta etiqueta se utiliza para imprimir el valor de una variable o expresión. En el ejemplo anterior esta imprime el valor devuelto por la función asset, el cual nos proporciona una forma portátil para vincular nuestros elementos de la aplicación, tales como CSS, JavaScript e imágenes.

La etiqueta {{ también se puede combinar con filtros para manipular la salida antes de imprimirla.

{{ blog.created|date("d-m-Y") }}

Para ver una lista completa de los filtros ve la documentación de Twig.

La última etiqueta de Twig, que hasta ahora no hemos visto en las plantillas, es la etiqueta de comentario {#. Su uso es el siguiente:

{# La rápida zorra marrón salta sobre el perro perezoso #}

No hay otros conceptos a introducir en esta plantilla. Esta proporciona el diseño principal que necesitamos listo para personalizarlo.

A continuación vamos a añadir algunos estilos. Crea una hoja de estilos en web/css/screen.css y añade el siguiente contenido. Esto agregará estilos para la plantilla principal.

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body { line-height: 1;font-family: Arial, Helvetica, sans-serif;font-size: 12px; width: 100%; height: 100%; color: #000; font-size: 14px; }
.clear { clear: both; }

#wrapper { margin: 0 auto; width: 1000px; }
#wrapper a { text-decoration: none; color: #F48A00; }
#wrapper span.highlight { color: #F48A00; }

#header { border-bottom: 1px solid #ccc; margin-bottom: 20px; }
#header .top { border-bottom: 1px solid #ccc; margin-bottom: 10px; }
#header ul.navigation { list-style: none; text-align: right; }
#header .navigation li { display: inline }
#header .navigation li a { display: inline-block; padding: 10px 15px; border-left: 1px solid #ccc; }
#header h2 { font-family: 'Irish Grover', cursive; font-size: 92px; text-align: center; line-height: 110px; }
#header h2 a { color: #000; }
#header h3 { text-align: center; font-family: 'La Belle Aurore', cursive; font-size: 24px; margin-bottom: 20px; font-weight: normal; }

.main-col { width: 700px; display: inline-block; float: left; border-right: 1px solid #ccc; padding: 20px; margin-bottom: 20px; }
.sidebar { width: 239px; padding: 10px; display: inline-block; }

.main-col a { color: #F48A00; }
.main-col h1,
.main-col h2
    { line-height: 1.2em; font-size: 32px; margin-bottom: 10px; font-weight: normal; color: #F48A00; }
.main-col p { line-height: 1.5em; margin-bottom: 20px; }

#footer { border-top: 1px solid #ccc; clear: both; text-align: center; padding: 10px; color: #aaa; }

Plantilla del paquete — nivel 2

Ahora, pasemos a la creación del diseño del paquete Blog. Crea un archivo ubicado en src/Blogger/BlogBundle/Resources/views/base.html.twig con el siguiente contenido:

{# src/Blogger/BlogBundle/Resources/views/base.html.twig #}
{% extends '::base.html.twig' %}

{% block sidebar %}
    Sidebar content
{% endblock %}

A primera vista, esta plantilla puede parecer un tanto simple, pero su simplicidad es la clave. En primer lugar, esta extiende a la plantilla base de la aplicación, la cual hemos creado antes. En segundo lugar, sustituye el bloque de la barra lateral padre con cierto texto. Debido a que la barra lateral estará presente en todas las páginas de nuestro blog tiene sentido llevar a cabo la personalización en este nivel. Puedes preguntarte ¿por qué no sólo ponemos la personalización en la plantilla de la aplicación, ya que estará presente en todas las páginas? Esto es simple, la aplicación no sabe nada sobre el paquete y tampoco debería. El paquete debe autocontener toda su funcionalidad y hacer que la barra lateral sea parte de esta funcionalidad. Bien, así que ¿por qué no basta con colocar la barra lateral en cada una de las plantillas de página? Una vez más esto es simple, tendríamos que duplicar la barra lateral cada vez que agreguemos una página. Además, esta plantilla de nivel 2 nos da la flexibilidad para que en el futuro agreguemos otras personalizaciones que heredarán todas las plantillas hijas. Por ejemplo, posiblemente queramos cambiar los derechos de autor del pie de página en todas las páginas, este sería un gran lugar para hacerlo.

Plantillas de página — Nivel 3

Finalmente estamos listos para el diseño del controlador. Estos diseños comúnmente se relacionan con un controlador de acción, es decir, la acción show del blog debe tener una plantilla show para mostrar el blog.

Vamos a empezar creando el controlador de la página inicial y su plantilla. Ya que se trata de la primera página que estamos creando, es necesario crear el controlador. Crea el controlador en src/Blogger/BlogBundle/Controller/PageController.php con el siguiente contenido:

<?php
// src/Blogger/BlogBundle/Controller/PageController.php

namespace Blogger\BlogBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class PageController extends Controller
{
    public function indexAction()
    {
        return $this->render('BloggerBlogBundle:Page:index.html.twig');
    }
}

Ahora crea la plantilla para esta acción. Como puedes ver en la acción del controlador vamos a reproducir la plantilla de la página índice. Crea la plantilla en src/Blogger/BlogBundle/Resources/views/Page/index.html.twig

{# src/Blogger/BlogBundle/Resources/views/Page/index.html.twig #}
{% extends 'BloggerBlogBundle::base.html.twig' %}

{% block body %}
    Blog homepage
{% endblock %}

Esta introduce el formato que queramos especificar a la plantilla final. En este ejemplo, la plantilla BloggerBlogBundle::base.html.twig extiende a la plantilla nombrada pero omitimos la parte del Controlador. Al excluir la parte del Controlador estamos especificando que se use la plantilla a nivel del paquete creada en src/Blogger/BlogBundle/Resources/views/base.html.twig.

Ahora vamos a agregar una ruta para nuestra página inicial. Actualiza la configuración de ruta del paquete ubicada en src/Blogger/BlogBundle/Resources/config/routing.yml.

# src/Blogger/BlogBundle/Resources/config/routing.yml
BloggerBlogBundle_homepage:
    pattern:  /
    defaults: { _controller: BloggerBlogBundle:Page:index }
    requirements:
        _method:  GET

Por último tenemos que eliminar la ruta predeterminada para la pantalla de bienvenida de Symfony2. Elimina la ruta _welcome de la parte superior del archivo de enrutado dev ubicado en app/config/routing_dev.yml.

Ahora estamos listos para ver nuestra plantilla del blogger. Apunta tu navegador a http://symblog.dev/app_dev.php/.

diseño principal de la plantilla de symblog

Deberías ver el diseño básico del blog, con el contenido principal y la barra lateral reflejando los bloques que hemos sustituido en las plantillas correspondientes.

La página Sobre

La tarea final de esta parte de la guía es crear una página estática para la página sobre. Esta te mostrará la manera de vincular las páginas y, además, cumplir el criterio de la herencia de tres niveles que hemos adoptado.

La ruta

Al crear una nueva página, una de las primeras tareas debería ser crear su ruta. Abre el archivo de enrutado del BloggerBlogBundle ubicado en src/Blogger/BlogBundle/Resources/config/routing.yml y añade la siguiente regla de enrutado.

# src/Blogger/BlogBundle/Resources/config/routing.yml
BloggerBlogBundle_about:
    pattern:  /about
    defaults: { _controller: BloggerBlogBundle:Page:about }
    requirements:
        _method:  GET

El controlador

A continuación abre el controlador de la Página que se encuentra en src/Blogger/BlogBundle/Controller/PageController.php y agrega la acción para procesar la página sobre.

// src/Blogger/BlogBundle/Controller/PageController.php
class PageController extends Controller
{
    //  ..

    public function aboutAction()
    {
        return $this->render('BloggerBlogBundle:Page:about.html.twig');
    }
}

La vista

Para la vista, crea un nuevo archivo situado en src/Blogger/BlogBundle/Resources/views/Page/about.html.twig y copia el siguiente contenido.

{# src/Blogger/BlogBundle/Resources/views/Page/about.html.twig #}
{% extends 'BloggerBlogBundle::base.html.twig' %}

{% block title %}About{% endblock%}

{% block body %}
    <header>
        <h1>About symblog</h1>
    </header>
    <article>
        <p>Donec imperdiet ante sed diam consequat et dictum erat faucibus. Aliquam sit
        amet vehicula leo. Morbi urna dui, tempor ac posuere et, rutrum at dui.
        Curabitur neque quam, ultricies ut imperdiet id, ornare varius arcu. Ut congue
        urna sit amet tellus malesuada nec elementum risus molestie. Donec gravida
        tellus sed tortor adipiscing fringilla. Donec nulla mauris, mollis egestas
        condimentum laoreet, lacinia vel lorem. Morbi vitae justo sit amet felis
        vehicula commodo a placerat lacus. Mauris at est elit, nec vehicula urna. Duis a
        lacus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
        posuere cubilia Curae.</p>
    </article>
{% endblock %}

La página sobre no es nada espectacular. Su única acción es reproducir un archivo de plantilla con un insípido contenido. Sin embargo, sí nos lleva a la siguiente tarea.

Enlazando páginas

Ahora casi tenemos lista la página. Echa un vistazo a http://symblog.dev/app_dev.php/about para ver esto. En su estado actual no hay forma de que un usuario de tu blog vea la página sobre, a no ser que escriba la URL completa al igual que lo hicimos nosotros. Como era de esperar Symfony2 ofrece ambas partes de la ecuación de enrutado. Puede coincidir rutas, como hemos visto, y también puede generar las URL de esas rutas. Siempre debes usar las funciones de enrutado que proporciona Symfony2. En tu aplicación nunca deberías tener la tentación de poner lo siguiente:

<a href="/contact">Contact</a>

<?php $this->redirect("/contact"); ?>

Tal vez te estés preguntando qué es lo incorrecto con este enfoque, tal vez es la forma en que siempre enlazas tus páginas. Sin embargo, hay una serie de problemas con este enfoque.

  1. Este utiliza un enlace duro e ignora el sistema de enrutado de Symfony2 por completo. Si, en algún momento, quieres cambiar la ubicación de la página de contacto tendrías que encontrar todas las referencias al enlace duro y cambiarlas.
  2. Este ignora el entorno de tus controladores. El entorno es algo que no hemos explicado todavía, pero que has estado utilizando. El controlador frontal app_dev.php nos da acceso a nuestra aplicación en el entorno dev. Si sustituyes app_dev.php con app.php vas a ejecutar la aplicación en el entorno prod. La importancia de estos entornos se explica más adelante en la guía, pero por ahora es importante tener en cuenta que el enlace fijo definido anteriormente no mantiene el entorno actual en que nos encontramos, el controlador frontal no se antepone a la URL.

La forma correcta para enlazar páginas, es con los métodos path y url proporcionados por Twig. Ambos son muy similares, excepto que el método url nos proporcionará direcciones URL absolutas. Actualicemos la plantilla principal de la aplicación ubicada en app/Resources/views/base.html.twig para enlazar la página sobre y la página inicial.

<!-- app/Resources/views/base.html.twig -->
{% block navigation %}
    <nav>
        <ul class="navigation">
            <li><a href="{{ path('BloggerBlogBundle_homepage') }}">Home</a></li>
            <li><a href="{{ path('BloggerBlogBundle_about') }}">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
{% endblock %}

Ahora actualiza tu navegador para ver que los enlaces de las páginas Inicio y Sobre trabajan como se esperaba. Si ves el código fuente de las páginas te darás cuenta de que el enlace se ha prefijado con /app_dev.php/. Este es el controlador frontal explicado más arriba, y como puedes ver al usar path lo ha mantenido.

Finalmente actualicemos los enlaces del logotipo para que redirijan a la página inicial. Actualiza la plantilla ubicada en app/Resources/views/base.html.twig.

<!-- app/Resources/views/base.html.twig -->
<hgroup>
    <h2>{% block blog_title %}<a href="{{ path('BloggerBlogBundle_homepage') }}">symblog</a>{% endblock %}</h2>
    <h3>{% block blog_tagline %}<a href="{{ path('BloggerBlogBundle_homepage') }}">creando un blog en Symfony2</a>{% endblock %}</h3>
</hgroup>

Conclusión

Hemos cubierto los aspectos básicos respecto a una aplicación de Symfony2 incluyendo cierta personalización de la aplicación y ahora está funcionando. Comenzamos a explorar los conceptos fundamentales detrás de una aplicación Symfony2, incluyendo el enrutado y el motor de plantillas Twig.

A continuación veremos cómo se crea la página de Contacto. Esta página es un poco más complicada que la página Sobre, ya que permite a los usuarios interactuar con un formulario web para enviar consultas. El siguiente capítulo introducirá conceptos más avanzados como la validación y formularios.

comentarios del blog accionados por Disqus

«  Creando un blog en Symfony2   ::   Contenido   ::   [Parte 2] — Página de contacto: Validadores, formularios y correo electrónico  »