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

2018-03-22 - Categorías: PHP / Symfony
Symfony 1 el enrutamiento

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!

14 respuestas a “Symfony: tutorial 1: extendiendo el ¡hola mundo! y el enrutador de URLs”

  1. Emerson dice:

    se ve muy bien, seguire todos los posts

  2. YDG dice:

    Muy bueno, de una forma muy sencilla y amena, me ha permitido conocer las principales características de Symfony 5.

    Escribo el comentario ahora que he completado todos los tutoriales y mi consejo es que los hagan todos tal cual los propone el Autor, hagan los ejercicios independientes para agarrar soltura con los comandos, parece repetitivo pero después del 4to tutorial notaran el efecto que tiene.

    Felicidades Jnj, y muchas gracias, este es el mejor tutorial que he encontrado para comenzar desde 0 con Symfony 5, y he leído y visto videos de muchos.

  3. simon dice:

    Ya con la versión 5.2.4 es imposible seguir con la forma de trabajo que este tutorial fue hecho, se necesitaría actualizar. Ojala el autor se tome la molestia de actualizarlo para que podamos aprender bajo su metodología de trabajo.

  4. Edgar Ernesot Prada dice:

    hola tengo un problema he visto varios ejercicios tuyos pero a la hora de ingresar a la url http://localhost:8012/static/ me dice que no existe pero si ingreso a http://localhost:8000/symfony-tutorial-1/public/ si me abre pero no me deja acceder a las otras url , arrojando error 404

  5. Adalberto santodomingo dice:

    utilizo xampp en la carpeta htdocs tengo mi proyecto y siguiendo tus instrucciones no he podido iniciar, aparece
    http://localhost/static/page-url-1
    Not Found
    The requested URL was not found on this server.

    Apache/2.4.53 (Win64) OpenSSL/1.1.1n PHP/8.1.6 Server at localhost Port 80
    de antemano, muchas gracias

    • Jnj dice:

      Buenos días Adalberto.

      Para que funcione en Xampp tienes que configurarlo de forma que cargue el directorio raíz del host desde el directorio symfony-tutorial-1/public/

      Igual es más sencillo entrar al directorio y lanzar lo siguiente:
      cd symfony-tutorial-1/
      symfony server:start
      ..el comando de Symfony automáticamente sabe que tiene que cargar el fichero public/index.php

      O puedes probar también usando el comando de PHP para lanzar un servidor siguiente:
      cd symfony-tutorial-1/public/
      php -S localhost:8000

      Para usar Xampp, Apache, Nginx, etc.. la idea es que el directorio public/ es la raíz del proyecto. Dentro de este public/ hay un fichero index.php desde donde puedes ver cómo se cargan las rutas y todos los ficheros del framework. Pero recapitulando, te recomiendo que uses el comando de symfony.

      Saludos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

© 2024 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.