Quiero devolver HTML para esta página.
Podríamos poner ese HTML dentro del controlador...
pero eso se va a poner feo rápidamente.
Afortunadamente, hay una forma mejor: utilizar una biblioteca de plantillas llamada Twig.
En tu terminal, asegúrate de haber confirmado tus cambios,
porque quiero ver qué añade la receta de este nuevo paquete a nuestro proyecto.
Ya lo he hecho.
Instálalo con: composer require twig Probablemente reconozcas que twig es un alias...
esta vez de un paquete llamado symfony/twig-pack.
Y la palabra "paquete" es importante en Symfony.
Un paquete es...
una especie de paquete falso que ayuda a instalar varios paquetes a la vez.
Observa: abre composer.json.
En lugar de un nuevo paquete aquí llamado symfony/twig-pack, tenemos tres nuevos paquetes...
¡y twig-pack ni siquiera es uno de ellos!
Los tres paquetes nos dan todo lo que necesitamos para una configuración Twig completa y robusta.
Así que cuando veas la palabra "paquete", no es
sólo un atajo para instalar varios paquetes a la vez.
Bien, ¡vamos a ver qué ha hecho la receta!
Ejecuta: git status Vemos los habituales composer.json, composer.lock y symfony.lock.
Pero, por primera vez, también vemos una modificación de config/bundles.php.
Un bundle es un paquete PHP que se integra con Symfony...
es básicamente un plugin de Symfony.
Siempre que instales un bundle, tienes que activarlo en este archivo bundles.php.
Pero honestamente, el sistema de recetas siempre hará eso por nosotros...
así que es bueno darse cuenta, pero nunca editaremos este archivo a mano.
Lo segundo que hizo la receta fue crear un archivo config/packages/twig.yaml.
La finalidad de cada archivo de config/packages/ es configurar un bundle.
Por ejemplo, twig.yaml controla el comportamiento de TwigBundle.
Esta línea de aquí le dice a Twig: ¡Eh!
Todos mis archivos de plantilla terminarán en .twig.
Hay muchas más cosas que podríamos configurar, pero no es necesario.
Y profundizaremos en estos archivos de configuración en el próximo tutorial.
Lo último que hizo la receta fue añadir un directorio templates/, que....
¡lo has adivinado!
Es donde vivirán nuestros archivos de plantilla
Incluso nos inició con un archivo base.html.twig del que hablaremos en unos minutos.
Así que ¡vamos a renderizar nuestra primera plantilla!
Para ello, haz que tu controlador extienda una clase base llamada AbstractController.
Asegúrate de pulsar el tabulador para que añada la declaración use en la parte superior.
Extender esta clase base es opcional, pero nos proporciona un montón de métodos abreviados. Por ejemplo,
copia la cadena y luego, para renderizar una plantilla escribe return $this->render()
y pasa un nombre de archivo a una plantilla.
Utiliza: main/homepage.html.twig.
El nombre de archivo de tu plantilla puede ser el que quieras, pero lo estándar es tener un directorio
que coincida con el nombre de tu controlador y un nombre de archivo que coincida con el nombre de tu método.
¡Vamos a crearlo!
En templates/, añade un nuevo directorio llamado main.
Y dentro de él, un archivo llamado homepage.html.twig.
Voy a pegar...
luego añadiré un h1 y lo pondré alrededor de todo.
¡Hagamos esto!
Actualiza. ¡Ya está!
Y por cierto, ¿qué está devolviendo nuestro controlador?
¡Sigue siendo un objeto Response!
Lo sé porque tenemos un tipo de retorno Response...
y nuestro código no está explotando.
render() es sólo un atajo para renderizar esta plantilla, coger esa cadena de HTML
y ponerla en un objeto Response.
Así que, aunque estemos renderizando una plantilla, seguimos volviendo a la idea
de que un controlador devuelve una respuesta.
¿Y si pasamos datos a la plantilla?
Quizá consultemos la base de datos y le pasemos el número total de naves estelares.
Aún no tenemos una base de datos en nuestra aplicación, así que vamos a fingirlo diciendo que $starshipCount es igual a...
No sé...
457. Parece un número falso creíble.
Para pasar variables a la plantilla, añade un segundo argumento a render(): una matriz.
Pasa numberOfStarships ajustado a $starshipCount.
La clave se convertirá en el nombre de la variable dentro de la plantilla Twig.
En la plantilla, añadiré un div y algo de texto.
Para imprimir el número, escribe {{, el nombre de la variable, cierra }}.
¡Vale! Muévete y pruébalo.
¡Ya está! ¡Y acabamos de ver nuestro primer código Twig!
Twig es su propio lenguaje, pero es superamigable.
Sólo tiene tres sintaxis diferentes.
La primera es {{ y yo la llamo la sintaxis "decir algo".
Si estás imprimiendo algo, utilizarás {{.
Dentro de los rizos, estamos escribiendo Twig, que es muy similar a JavaScript.
Por ejemplo, podríamos imprimir la cadena 'numberOfStarships'...
o la variable numberOfStarships...
o incluso numberOfStarships multiplicado por 10.
La segunda sintaxis de las tres empieza por {%.
Yo la llamo la sintaxis "hacer algo".
No imprime nada.
En su lugar, se utiliza para construcciones del lenguaje como las sentencias if, los bucles for o establecer una variable.
Para hacer una sentencia if, di if numberOfStarships > 400, y ciérrala con {% endif %}.
Dentro, añadiré un comentario.
¡Pruébalo!
¡Eso también funciona!
Twig es su propia biblioteca, pero está mantenida por Symfony...
por lo que su documentación se encuentra en https://twig.symfony.com.
Haz clic en el enlace "Docs" y desplázate hacia abajo.
¿Ves las "etiquetas"? Resulta
que hay un número finito de cosas que puedes utilizar
con la sintaxis "hacer algo": son estas etiquetas.
Por ejemplo, no puedes decir {% applesauce...
simplemente no funcionará.
Sólo puedes usar {% y luego una de estas etiquetas.
La lista es bastante corta...
y probablemente sólo utilice 5 de ellas a diario.
La tercera y última sintaxis de Twig ni siquiera es una sintaxis: es para los comentarios.
{# para escribir un comentario.
Así que estamos pasando un simple número a Twig e imprimiéndolo.
Pero Twig puede manejar cualquier dato complejo que le lances.
Por ejemplo, en el controlador, crea una nueva variable $myShip, configurada como una matriz asociativa.
Luego pásala a la plantilla como una nueva variable: myShip.
En la plantilla, añade otro div...
algo de texto y una tabla para imprimir los datos.
En , no podemos imprimir simplemente myShip...
porque imprimir una matriz asociativa no tiene sentido en PHP...
y tampoco tiene sentido en Twig.
Obtendrás el famoso error sobre la conversión de array a cadena.
Lo que queremos es imprimir la clave name de esa matriz.
La forma de hacerlo es exactamente igual que en JavaScript: myShip.name.
Ya está
Y... funciona.
Voy a pegar el resto de nuestra plantilla, que imprime las demás claves de la matriz.
Tiene buena pinta.
Twig tiene algunos trucos más en la manga, pero nada complejo.
Tiene funciones...
que funcionan como las funciones de cualquier lenguaje.
También tiene algo llamado pruebas, que son un poco exclusivas
de Twig, pero bastante sencillas de entender.
Mi concepto favorito probablemente sean los filtros, que son básicamente funciones
con una sintaxis más cool y hipster.
Por ejemplo, hay un filtro llamado upper para enviar una cadena a mayúsculas.
Para utilizar un filtro, busca la cadena que quieres pasar a mayúsculas y añade | y upper.
El valor de la izquierda se pasa a través del filtro,
muy parecido a utilizar una tubería en la línea de comandos.
Funciona de maravilla....
y puedes volverte loco con los filtros: pipeando a upper,
luego a lower y después a title case sólo para confundir a tus compañeros.
Vale, acabamos de aprender prácticamente todo Twig en una sesión , excepto
una cosa: la herencia de plantillas.
Eso a continuación.