Symfony: tutorial 1: extendiendo el ¡hola mundo! y el enrutador de URLs

En este segundo tutorial de la serie sobre Symfony. Dejo aquí explicado cómo se cargan las URLs. Para esto, tenemos aquí este clásico tutorial al estilo de ¡Hola Mundo! un poco más azucarado que el post el anterior. Lo primero en lo que hay que pensar son los puntos de entrada a la web: qué URLs vamos a tener y de qué forma, qué prefijos y sufijos van a tener, cómo se va a dividir la web desde el punto de vista del visitante que va viendo las URLs.

Todo esto es lo que llamaremos el enrutamiento de la web. Es decir, todas las URLs de entrada a la web pasan por un enrutador. Este enrutamiento se encargará de saber lo que tiene que hacer, llevando la visita al controlador que corresponda para hacer lo que tenga que hacer, y devolver al visitante la respuesta con la página que corresponda.

Creando el proyecto

Vamos a ir al grano, ejecutamos lo siguiente desde línea de comandos, terminal, consola, o como queramos llamarlo.. para tener lo indispensable para este tutorial:

composer create-project symfony/skeleton symfony-tutorial-1
cd symfony-tutorial-1

A partir de Symfony 5 tenemos disponible el comando de symfony que es más sencillo. Podemos hacer así entonces:

symfony new symfony-tutorial-1
cd symfony-tutorial-1

Instalando los componentes necesarios

Antes de Symfony 5 podíamos hacer lo siguiente para comenzar:

composer require server profiler symfony/maker-bundle --dev
composer require annotations twig

Ahora en Symfony 5 podemos hacer lo siguiente:

composer require profiler symfony/maker-bundle --dev
composer require annotations twig

Fíjate que pongo varios componentes instalados sólo para el entorno de desarrollo, por eso tienen el –dev.

Creando el primer controlador

Para esto hemos instalado el componente symfony/maker-bundle que nos ahorrará mucho tiempo. No sólo para crear controladores, sino que también tiene generador de códigos fuentes para crear formularios, CRUDs, entidades para guardar en base de datos, comandos de consola, subscribers, etc.. Entonces, ejecutamos desde línea de comandos:

php bin/console make:controller

Cuando nos pregunte le podemos poner de nombre por ejempo StaticController ya que va a encargarse de servir páginas estáticas. Esto crea los 3 ficheros siguientes:

symfony-tutorial-1/src/Controller/StaticController.php
symfony-tutorial-1/templates/base.html.twig
symfony-tutorial-1/templates/static/index.html.twig

Este controlador inicial se creará para recibir las visitas a la URL http://localhost:8000/static ya que por convención, el maker de controladores aplica estas configuraciones.

Editando las rutas de entrada, las URLs de la web

Para comprender cómo funciona el enrutamiento de Symfony con las anotaciones, vamos a hacer un ejercicio muy simple: vamos a modificar el controlador recién creado para que admita muchas URLs de entrada con sólo 3 funciones. Usaremos la variable {pageUrl} en la ruta de URL para esto.

Estoy acostumbrado a usar las anotaciones en los controladores para ser más prácticos. Es decir, que las anotaciones en los controladores te ayudan a trabajar los códigos mejor en el día a día de la programación. Así que.. vamos al grano: vamos modificar el controlador para permitir que reciba visitas en las siguientes URLs:

http://localhost:8000/
http://localhost:8000/static/
http://localhost:8000/static/cualquier-cadena
http://localhost:8000/cualquier-cadena

Editamos el fichero symfony-tutorial-1/src/Controller/StaticController.php para dejarlo como este:

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class StaticController extends AbstractController
{
    /**
     * @Route("/", name="home")
     * @Route("/static/", name="home_static")
     */
    public function home()
    {
        return $this->render('static/index.html.twig', [
            'controller_name' => 'StaticController/home',
        ]);
    }

    /**
     * @Route("/static/{pageUrl}", name="static_page")
     */
    public function staticPage($pageUrl)
    {
        return $this->render('static/'.$pageUrl.'.html.twig', [
            'controller_name' => 'StaticController/staticPage',
        ]);
    }

    /**
     * @Route("/{pageUrl}", name="static_page_other")
     */
    public function staticPageOther($pageUrl)
    {
        return $this->render('static/'.$pageUrl.'.html.twig', [
            'controller_name' => 'StaticController/staticPageOther',
        ]);
    }
}

Fíjate que he marcado en negrita las anotaciones que especifican qué URLs recibe este controlador. Vamos ahora con las plantillas.

Las plantillas en Twig

Antes de crear el controlador, al principio cuando instalábamos los componentes de Symfony que íbamos a utilizar, hemos instalado el componente de Twig. Esto nos facilita la vida, sobre todo a los maquetadores. Todas las plantillas en Symfony van a estar ahora bajo la ruta del proyecto templates/ . De esta forma duplicamos el fichero:

symfony-tutorial-1/templates/static/index.html.twig

Y creamos los ficheros:

symfony-tutorial-1/templates/static/page-url-1.html.twig
symfony-tutorial-1/templates/static/page-url-2.html.twig

..con el mismo contenido que el index.html.twig . Arrancamos entonces el proyecto para ver los resultados. Antes de Symfony 5 podíamos hacer esto si instalábamos dentro del proyecto el servidor de desarrollo:

php bin/console server:start

A partir de Symfony 5 tenemos que usar el comando symfony siguiente:

symfony server:start

Y tenemos que poder acceder con el navegador a las siguientes URLs:

http://localhost:8000/
http://localhost:8000/static/
http://localhost:8000/static/page-url-1
http://localhost:8000/page-url-1
http://localhost:8000/static/page-url-2
http://localhost:8000/page-url-2

Terminando

Fíjate la potencia que nos dan las anotaciones en los controladores. También con el uso de variables puedes cargar dinámicamente las plantillas. Incluso generar páginas que no existen, o con contenido 100% dinámico en función de la URL de entrada. Con esto puedes internacionalizar una web desde el principio cargando el código de idioma al inicio de la URL. Cualquier cosa que se te ocurra hacer con las URLs que se pongan en el navegador se puede hacer.

Llegó el momento de volver atrás, revisar los códigos fuentes de arriba y hacer probaturas. Espero que no me haya quedado el post demasiado espeso, el enrutamiento es simple pero se pueden hacer muchas cosas a partir del enrutamiento. Para cualquier cosa no lo dudes, mensaje aquí abajo y con gusto contestaré 😉

Tienes los códigos fuentes subidos a GitHub aquí:
https://github.com/jaimenj/symfony-starter-tutorials

Sólo me queda remitirte a la documentación oficial relacionada con este post:
https://symfony.com/doc/current/page_creation.html

¡Un saludo!