Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
This tutorial has a new version, check it out!

La Receta de Twig

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

Salvo que estés creando una API pura - y hablaremos de retornar JSON más tarde en este tutorial - necesitarás escribir algo de HTML. Y... poner texto o HTML en un controlador así es... horrible.

No te preocupes! Symfony tiene una excelente integración con una increíble librería de templates llamada Twig. Hay solo un problema: nuestra app de Symfony es tan pequeña que Twig ni siquiera está instalado! Ah, pero eso no es realmente un problema... gracias al sistema de recetas.

Instalar Twig

Vuelve a https://flex.symfony.com y haz una búsqueda por "template". Ahí está! Aparentemente la librería de templates recomendada por Symfony es also llamado twig-pack. ¡Instalémosla!

composer require template

Esto instala algunos paquetes... Y sí! 2 recetas! Veamos lo que hicieron:

git status

Chequeando los Cambios de la Receta

Wow, impresionante. Muy bien: los cambios en composer.json composer.lock y symfony.lock eran de esperarse. Todo lo demás fue hecho por estas recetas.

¿Qué son los Bundles?

Veamos bundles.php primero:

git diff config/bundles.php

Interesante: agregó dos lineas. Abre ese archivo: config/bundles.php.

... lines 1 - 2
return [
Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle::class => ['all' => true],
Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
];

Un "bundle" es un plugin de Symfony. Comúnmente, cuando quieres agregar una funcionalidad a tu app, instalas un bundle. Y cuando instalas un bundle, necesitas habilitarlo en tu aplicación. Hace mucho tiempo atrás, lo hacíamos manualmente. Pero gracias a Symfony Flex, siempre que instalas un bundle de Symfony, automáticamente actualiza este archivo para habilitarla por tí. Así que... ahora que hemos hablado de este archivo, probablemente jamás necesitarás pensar en esto de nuevo.

Los directorios templates/ y config/

La receta también agregó un directorio templates/. Así que si te preguntabas donde se supone que viven tus templates... la receta contestó esa pregunta! También agregó un archivo de layout base.html.twig del cual hablaremos pronto.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>

Entones... aparentemente nuestros templates se supone que viven en templates/. ¿Pero por qué? Quiero decir, esa ruta está fijada en algún archivo interno de la librería de Twig? No! Vive justo en nuestro código, gracias al archivo twig.yaml que fue creado por la receta. Revisémoslo: config/packages/twig.yaml.

twig:
default_path: '%kernel.project_dir%/templates'

Hablaremos más sobre estos archivos YAML en otro tutorial. Pero sin comprender demasiado sobre este archivo, él mismo... ya tiene sentido! Esta configuración default_path apunta al directorio templates/. ¿Quieres que tus templates vivan en algún otro lugar? Solo cambia esto y... Listo! Tú tienes el control.

Por cierto, no te preocupes por esta rara sintaxis %kernel.project_dir%. Aprenderemos sobre esto más adelante. Pero básicamente, es una forma sofisticada de apuntar al directorio raíz de nuestro proyecto.

La receta también creó otro archivo twig.yaml el cual es menos importante: config/packages/test/twig.yaml. El mismo hace un pequeño cambio a Twig para tus tests automatizados. Los detalles no importan realmente. El punto es: Hemos instalado Twig y su receta se encargó de todo lo demás. Estamos 100% listos para usarlo en nuestra app. ¡Hagamos esto a continuación!

Leave a comment!

6
Login or Register to join the conversation
Nahom B. Avatar
Nahom B. Avatar Nahom B. | posted hace 2 años

Hi guys there is best way to create controller with php bin/console make:controller and it ask you a name like PizzaController and it create a controller with a folder and file in template

Reply

Hey Nahom B.!

Yes, you're totally right! I love that command - we only don't show it here because I want people to get used to what steps are necessary for a route, controller and template. But in a real project, yea, use it!

Cheers!

Reply
Federico R. Avatar
Federico R. Avatar Federico R. | posted hace 2 años

Hi:

There's a way you can make a start project with all the recipes you need? Or you have to call every project from zero?

Thanks in advance

Reply

Hey Federico R.

When you install a bundle Symfony Flex installs any recipes that it comes with. So, in a new project you'll have to install all the bundles that you will need. Installing recipes without its correspondent bundle makes no sense because you will be adding configuration files and structure that nothing in your application will use

Cheers!

Reply
Richard Avatar

Why is it that I can "composer require template" yet "composer recipes template" says no such recipe? That's very confusing since any install requires a recipe...

Reply

Hey Maxii123,

Good question! I don't know the exact reason why "composer recipes" command does not work with aliases fairly speaking. Feel free to ask this question on symfony/symfony repository. Probably it's just a lack of implementation for now. Or probably there're some other blocking reasons behind of this that I don't know.

Cheers!

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.3.0 || ^8.0.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "easycorp/easy-log-handler": "^1.0.7", // v1.0.9
        "sensio/framework-extra-bundle": "^6.0", // v6.2.1
        "symfony/asset": "5.0.*", // v5.0.11
        "symfony/console": "5.0.*", // v5.0.11
        "symfony/debug-bundle": "5.0.*", // v5.0.11
        "symfony/dotenv": "5.0.*", // v5.0.11
        "symfony/flex": "^1.3.1", // v1.17.5
        "symfony/framework-bundle": "5.0.*", // v5.0.11
        "symfony/monolog-bundle": "^3.0", // v3.5.0
        "symfony/profiler-pack": "*", // v1.0.5
        "symfony/routing": "5.1.*", // v5.1.11
        "symfony/twig-pack": "^1.0", // v1.0.1
        "symfony/var-dumper": "5.0.*", // v5.0.11
        "symfony/webpack-encore-bundle": "^1.7", // v1.8.0
        "symfony/yaml": "5.0.*" // v5.0.11
    },
    "require-dev": {
        "symfony/profiler-pack": "^1.0" // v1.0.5
    }
}