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

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.

Hagamos que la acción show() del controlador renderé código HTML usando un template. Tan pronto como quieras representar un template, necesitarás que tu controlador herede del AbstractController. No olvides permitir que PhpStorm lo autocomplete para que pueda agregar el import necesario.

Ahora, obviamente, un controlador no necesita heredar esta clase base - A Symfony no le interesa eso. Pero, es usual heredar del AbstractController por una simple razón: nos brinda métodos útiles!

... lines 1 - 4
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
... lines 6 - 8
class QuestionController extends AbstractController
{
... lines 11 - 27
}

Rendereando un Template

El primer método útil es render. Podemos decir: return this->render() y pasar dos argumentos. El primero es el nombre del archivo del template: podemos poner lo que sea aquí, pero usualmente - porque valoramos nuestra cordura - lo nombramos igual que el controlador: question/show.html.twig.

El segundo argumento es un array de todas las variables que queremos pasar al template. Eventualmente, vamos a hacer una query específica a la base de datos y pasaremos los datos al template. Por el momento, hay que fingirlo. Voy a copiar la linea ucwords() y borrar el código viejo. Pasemos una variable al template llamada - que tal: question - asignada a este string.

... lines 1 - 8
class QuestionController extends AbstractController
{
... lines 11 - 21
public function show($slug)
{
return $this->render('question/show.html.twig', [
'question' => ucwords(str_replace('-', ' ', $slug))
]);
}
}

Es hora de una pregunta! Qué valor crees que regresa el método render()? Un string? alguna otra cosa? La respuesta es: un objeto Response... conteniendo HTML. Porque recuerda: la única regla de un controlador es que siempre debe de regresar un objeto tipo Response.

Tip

Un controlador puede regresar algo distinto a un objeto Response, pero no te preocupes por eso ahorita... o tal vez nunca.

Creando el Template

Entonces, creemos ese template! Dentro de templates/, crea el subdirectorio question, luego un nuevo archivo llamado show.html.twig. Empecemos sencillo: un <h1> y luego {{ question }} para representar la variable question. Y... voy a poner un poco más de sintaxis.

<h1>{{ question }}</h1>
<div>
Eventually, we'll print the full question here!
</div>

Las 3 Sintaxis de Twig!

Acabamos de escribir nuestro primer código de Twig! Twig es muy amigable: es un simple archivo HTML hasta que escribes una de sus dos sintaxis.

La primera es la sintaxis "imprime algo". {{, lo que quieres imprimir, luego }}. Dentro de las llaves, estás escribiendo código en Twig... el cual es muy similar a JavaScript. Esto imprime la variable question. Si pones comillas alrededor, imprimirá la palabra question. Y claro, puedes hacer cosas mas complejas - como el operador terneario. Es decir, es muy similar a JavaScrip.

La segunda sintaxis es la que yo llamo "haz algo". Va de esta forma {% seguido por lo que quieres hacer, por ejemplo un if o un for. Hablaremos más de esto en un momento.

Y... eso es todo! O estás imprimiendo algo con {{ o haciendo algo, como un if, con {%.

Ok, una pequeña mentira, existe una tercera sintaxis... pero es solo para comentarios: {#, el comentario... luego #}.

<h1>{{ question }}</h1>
{# oh, I'm just a comment hiding here #}
<div>
Eventually, we'll print the full question here!
</div>

Veamos si funciona! Abre la página, refresca y... Lo tenemos! Si miras el código fuente, puedes notar que no hay una estructura HTML aun. Es literalmente la estructura de nuestro template y nada mas. Le vamos a agregar una estructura base en algunos minutos.

Haciendo Bucles con el Tag {%

Ok: tenemos una pregunta falsa. Creo que se merece algunas respuestas falsas! De regreso al controlador, en la acción show(), voy a pegar 3 respuestas falsas.

... lines 1 - 8
class QuestionController extends AbstractController
{
... lines 11 - 21
public function show($slug)
{
$answers = [
'Make sure your cat is sitting purrrfectly still ?',
'Honestly, I like furry shoes better than MY cat',
'Maybe... try saying the spell backwards?',
];
... lines 29 - 33
}
}

Como he dicho, una vez que hayamos hablado sobre base de datos, vamos a hacer un query en lugar de esto. Pero para comenzar, esto va a funcionar de maravilla. Pasalas al template como la segunda variable llamada answers.

... lines 1 - 8
class QuestionController extends AbstractController
{
... lines 11 - 21
public function show($slug)
{
$answers = [
'Make sure your cat is sitting purrrfectly still ?',
'Honestly, I like furry shoes better than MY cat',
'Maybe... try saying the spell backwards?',
];
return $this->render('question/show.html.twig', [
'question' => ucwords(str_replace('-', ' ', $slug)),
'answers' => $answers,
]);
}
}

De regreso al template. Como las podríamos imprimir? No podemos solo decir {{ answers }}... porque es un array. Lo que realmente queremos hacer es recorrer el array e imprimir cada respuesta individual. Para poder hacer esto, tenemos que hacer uso de nuestra primer función "haz algo"! Se vería algo así: {% for answer in answers %}. y la mayoría de las etiquetas "haz algo" también tienen una etiqueta de cierre: {% endfor %}.

Ponle una etiqueta ul alrededor y, dentro del ciclo, di <li> y {{ answer }}.

... lines 1 - 8
<h2>Answers</h2>
<ul>
{% for answer in answers %}
<li>{{ answer }}</li>
{% endfor %}
</ul>
... lines 16 - 17

Me fascina! Ok navegador, refresca! Funciona! Digo, está muy, muy feo... pero lo vamos a arreglar pronto.

La Referencia de Twig: Tags, Filtros, Funciones

Dirígete a https://twig.symfony.com. Twig es su propia librería con su propia documentación. Aquí hay un montón de cosas útiles... Pero lo que realmente me gusta está aquí abajo: la Referencia de Twig.

Ves esas "Etiquetas" a la izquierda? Esas son todas las etiquetas "Haz algo" que existen. Asi es, siempre será {% y luego una de estas palabras - por ejemplo, for, if o {% set. Si intentas {% pizza, yo voy a pensar que es gracioso, pero Twig te va a gritar.

Twig también tiene funciones... como cualquier lenguaje... y una agradable funcionalidad llamada "tests", la cual es algo única. Esto te permite decir cosas como: if foo is defined o if number is even.

Pero la mayor y mejor sección es la de los "filtros". Los filtros son básicamente funciones... pero más hipster. Mira el filtro length. Los filtros funcionan como las "cadenas" en la linea de comandos: solo que aquí unimos la variable users en el filtro length, el cual solo los cuenta. El valor va de izquierda a derecha. Los filtros son en realidad funciones... con una sintaxis más amigable.

Usemos este filtro para imprimir el número de respuestas. Voy a poner algunos paréntesis, luego {{ answer|length }} Cuando lo probamos... de lujo!

... lines 1 - 7
<h2>Answers {{ answers|length }}</h2>
... lines 11 - 17

Herencia con Templates de Twig: extends

En este punto, ya eres apto para convertirte en un profesional de Twig. Solo hay una funcionalidad importante más de la cual hablar. y es una buena: herencia de templates.

La mayoría de nuestras páginas van a compartir una estructura HTML. Actualmente, no contamos con ninguna estructura HTML. Para hacer una, arriba del template, escribe {% extends 'base.html.twig' %}.

{% extends 'base.html.twig' %}
<h1>{{ question }}</h1>
... lines 4 - 19

Esto le dice a Twig que queremos usar el template base.html.twig como la estructura base. En este momento, este archivo es muy básico, pero es nuestro para modificarlo - y lo haremos pronto.

Pero si refrescas la página... huye! Un gran error!

Un template que hereda de otro no puede incluir contenido fuera de los bloques de Twig.

Cuando heredas de un template, estás diciendo que quieres que el contenido de este template vaya dentro de base.html.twig. Pero... donde? debería Twig ponerlo arriba? Abajo? En algún lugar del medio? Twig no lo sabe!

Estoy seguro que ya habías notado estos bloques, como stylesheets, title y body. Los bloques son "hoyos" donde un template hijo puede agregar contenido. No podemos simplemente heredar de base.html.twig: necesitamos decirle en cuál bloque debe ir el contenido. El bloque body es el lugar perfecto.

Como hacemos esto? Arriba del contenido agrega {% block body %}, y después, {% endblock %}.

{% extends 'base.html.twig' %}
{% block body %}
... lines 4 - 18
{% endblock %}
... lines 20 - 21

Ahora intentalo. Funciona! No pareciera que es mucho... porque la estructura base es tan simple, pero si revisas el código fuente de la página, tenemos la estructura HTML básica.

Agregar, Remover, Cambiar Bloques?

Por cierto, estos bloques en base.html.twig no son especiales: los puedes renombrar, moverlos de lugar, agregar o remover. Entre más bloques agregues, más flexible es tu template "hijo" para agregar contenido en lugares diferentes.

La mayoría de los bloques existentes están vacíos... pero el bloque puede definir contenido por defecto. Como el bloque title. Ves ese Welcome? No es sorpresa, ese es el título actual de la página.

Como se encuentra dentro de un bloque, podemos sobreescribirlo en cualquier template. Mira esto: en donde sea dentro de show.html.twig, escribe {% block title %}, Question, imprime la pregunta, luego {% endblock %}.

{% extends 'base.html.twig' %}
{% block title %}Question: {{ question }}{% endblock %}
{% block body %}
... lines 6 - 20
{% endblock %}
... lines 22 - 23

Esta vez cuando recargamos... tenemos un nuevo título!

Ok, con Twig en nuestras espaldas, vamos a ver una de las funcionalidades más útiles de Symfony... y tu nuevo mejor amigo para depurar: Symfony profiler.

Leave a comment!

40
Login or Register to join the conversation
Gog sp. z o.o. Avatar
Gog sp. z o.o. Avatar Gog sp. z o.o. | posted hace 2 años

I really have to say one thing - I do love how you run those lessons. It's a true pleasure to watch them!

1 Reply
Steven-pascal K. Avatar
Steven-pascal K. Avatar Steven-pascal K. | posted hace 11 meses

I just do the same as the code here but it does'nt work for my code
littlebit confusing if someone knows where the Problem is, Please text me.

Reply

Hey @Rexorlive

Could you let us know the error message you got and what were you exactly doing?

Cheers!

Reply
Azar A. Avatar
Azar A. Avatar Azar A. | posted hace 1 año

Hello everyone!
For some reason, on any question, it returns the '>" sign at the beginning
screen http://joxi.ru/Vm6w9lKC3QokD2
code http://joxi.ru/52aKvEXulNjn0r http://joxi.ru/Y2LxKBlixbZgg2
this is normal?

Reply
Azar A. Avatar

It turns out that my translator was adding ...
Sorry to bother you, henceforth I will be more attentive and do not disturb on trifles

Reply
Azar A. Avatar
Azar A. Avatar Azar A. | Azar A. | posted hace 1 año | edited

Azar A. help me please :)

Reply
Azar A. Avatar

I figured out what was going on, I copied the code from the documentation
after opening the tag, for some reason, extra> added

from the text that is attached under the video
<h1>>{{ question }}</h1>
<div>
Eventually, we'll print the full question here!
</div>

that's right, I suffered a little without understanding what was going on :)

<h1>{{ question }}</h1>
<div>
Eventually, we'll print the full question here!
</div>

Reply

Hey Azar A.

Is it possible that that sign comes from your template? Or perhaps you accidentally added it to your questions in the DB

Cheers!

Reply
Azar A. Avatar

It turns out that my translator was adding ...
Sorry to bother you, henceforth I will be more attentive and do not disturb on trifles

Reply

No worries, you're welcome :)

Reply
James Y. Avatar
James Y. Avatar James Y. | posted hace 1 año

Is this using twig 3? I tried to follow along and ended up with an error: InvalidArgumentException: LoaderLoadException: There is no extension able to load the configuration for "twig" (in ...\config/packages/twig.yaml"). Looked for namespace "twig", found ""framework", "sensio_framework_extra"" in ...config/packages/twig.yaml (which is being imported from ...\src\Kernel.php").

Once I uninstalled, then 'composer require twig/twig:3.0' it worked fine.

Reply

Hey James,

A little-known fact: you can know what versions exactly are used in the course code - just find the Versions tab near the Script and Conversation tags. That Versions tab will show you the exact versions that are used in the course. Though, because we requested a Twig pack in the composer that wasn't unpacked - it's difficult to say what Twig version. I just downloaded the course code and check it for you - we're using v3.3.0 of twig/twig package.

Hope this helps! Good catch on removing and installing again :)

Cheers!

Reply
Israel L. Avatar
Israel L. Avatar Israel L. | posted hace 1 año

I'm from a Javascript background and know absolutely nothing in php but my job requires me to learn Symfony and everything seems so smooth.
Big Thanks man

Reply

Hey Israel!

Thank you for your feedback! We're really happy to hear that our learning curve is smooth for you! You made your day ;)

Good luck with learning Symfony! If you ever have any questions about following our tutorials - just let us know in the comments below the video and we will help you :)

Cheers!

Reply
Farshad Avatar

I typed in: return $this->render('form/measurements'...
I got an error saying that measurments doesn't exist.
I added .html.twig after and it worked: return $this->render('form/measurements.html.twig'
How does it work without .html.twig in this video?

Reply

Hey Farry7,

I do see the file extension in the video and in the code blocks https://symfonycasts.com/sc...
Anyways, you have to specify the file extension, otherwise Twig won't be able to find it

Cheers!

Reply
Nahom B. Avatar
Nahom B. Avatar Nahom B. | posted hace 2 años

The best of best tutorial of all time. You teach with fun!!! I was looking for this kind of tutorials all my life 😉😁😜

Reply
triemli Avatar

Guys, can you help me?
I try to override 404 page for something more fancy on production mode.
I found this https://symfony.com/doc/cur...

I have isntalled composer require symfony/twig-pack

But i don't have any templates/bundles/TwigBundle/Exception/ folder or example templates.
I just created error404.html.twig file. How the twig will know about it? Config maybe somewhere for read templates?
Right now i see template error from /vendor/symfony/error-handler/Resources/views/error.html.php
Thanks!

Reply

Hey triemli

you need to create that folder structure so the Twig bundle can find it and detect that you're overriding the errors templates. You can see an example in the documentation link that you sent but basically it's just another, boring, Twig template

Cheers!

Reply
triemli Avatar

Thanks a lot, it works!
Actually I found also this solution:

framework:
error_controller: App\Controller\ErrorController::show

Reply

as you have seen there are many ways to override that behavior

Reply
Johannes Avatar
Johannes Avatar Johannes | posted hace 2 años

You guys do a great job with SymfonyCasts! I'm so glad to found it! Thank you :-)

Reply

Thanks for the kind words!

Reply
Michel Avatar

Hi all!

I've tried to install the code from this course.
Upon running the symfony server all looks good from the terminal:

bash-3.2$ ls
README.md finish start
bash-3.2$ cd start
bash-3.2$ symfony server:start
Jul 31 09:40:17 |DEBUG| PHP Reloading PHP versions
Jul 31 09:40:17 |DEBUG| PHP Using PHP version 7.4.4 (from default version in $PATH)
Jul 31 09:40:17 |INFO | PHP listening path="/usr/local/Cellar/php/7.4.4/sbin/php-fpm" php="7.4.4" port=53835
Jul 31 09:40:17 |DEBUG| PHP started
Jul 31 09:40:17 |INFO | PHP 'user' directive is ignored when FPM is not running as root
Jul 31 09:40:17 |INFO | PHP 'group' directive is ignored when FPM is not running as root
Jul 31 09:40:17 |INFO | PHP fpm is running, pid 19990
Jul 31 09:40:17 |INFO | PHP ready to handle connections

[OK] Web server listening
The Web server is using PHP FPM 7.4.4
https://127.0.0.1:8000

However when I load the page in my browser I get

Warning: require(/Users/michel/Sites/code-symfony_31-07-2020/start/vendor/autoload.php): failed to open stream: No such file or directory in /Users/michel/Sites/code-symfony_31-07-2020/start/config/bootstrap.php on line 5

Fatal error: require(): Failed opening required '/Users/michel/Sites/code-symfony_31-07-2020/start/vendor/autoload.php' (include_path='.:/usr/local/Cellar/php/7.4.4/share/php/pear') in /Users/michel/Sites/code-symfony_31-07-2020/start/config/bootstrap.php on line 5

Any clue as to why this is happening?
All help is very much appreciated!

Reply

Hey Michel

I'm afraid you have to grab the nearest hammer and smash your computer - J/K
I believe you forgot to install composer. Just run composer install and try again

Cheers!

Reply
Michel Avatar

Thanks Diego! That fixed it for me! Luckily I didn't put a hammer to my macbook ;-)

Reply

haha I'm glad to hear that!

Reply
Default user avatar

Twig\Error\LoaderError:
Unable to find template "question/show.html.twig"

i'm sure there is a file named show.html.twig and directory named question

Help me please :(

Reply

Hey Shayma,

What exact path to the template that's relative to the project root dir? Is it exactly "templates/question/show.html.twig" for you? And what exactly value do you use in your render() function in the controller?

Please, double check spelling. Sometimes it's easy to miss a letter in the file path. Also, you can try to clear the cache first with, it may help too.

Cheers!

Reply
Default user avatar

Hey Victor,

Yes it's exactly "templates/question/show.html.twig". In RenderI Used:


public function show($slug)
{
// ...
return $this->render('question/show.html.twig', [
'question' => ucwords(str_replace('-', ' ', $slug))
]);
}

And for avoiding spelling mistakes I just copyed the code from the script bellow

Can i ask you which cash you mean?

This is the whole error i have:

Twig\Error\LoaderError
in C:\Users\shaym\cauldron_overflow\vendor\twig\twig\src\Loader\FilesystemLoader.php (line 227)
if (!$throw) { return null; } throw new LoaderError($this->errorCache[$name]); } private function normalizeName(string $name): string { return preg_replace('#/{2,}#', '/', str_replace('\\', '/', $name));
Reply

Hey Shayma,

What version of Symfony do you use? Did you download the course code and started from start/ directory? Or did you download a completely new Symfony version and started from scratch?

Hm, the error looks weird to me. Do you see that error on every page or only on the question show page? Could you make a screenshot of the error page? You can upload the screenshot to Imgur.com for example and send the link to it in a comment

Cheers!

Reply
Default user avatar

Hey Victor,

I did download a copletely new Symfony version (5) from the symfony website, because i'm using windows 10, not mac as in the course.
I have this error only on the question page. the other page is just working
Here is a screenshot. https://imgur.com/Y3jVzGO

Thanks!

Reply

Hey Shayma,

This doesn't matter what OS you use, you still can download the course code and start from the start/ directory. The course code contains only Symfony application that is cross-platform PHP application. We do recommend our users to follow our courses with downloaded code.

Thank you for sharing the screenshot! I see cache word on the error line, so first of all, I'd recommend you to clear the cache. Basically, you can remove everything in the var/cache/ directory. Then, try again and let me know if it does not help and you still see the same error. From the stack trace it looks like you did it correct, so not sure what else it may be if not a cache problem.

Cheers!

Reply
Default user avatar

Hello,

i have some problems since the beginning...
- the server is not working so i'm using MAMP
- if i add in the URL questions/is there any witch here , i have an error (not found)
-when i write into the twig file, i see on the navigator the delimitors. It's like it doesnt translate from twig to html
i checked my code with the php bon/console debug:server, it says everything is ok..

Do you have an idea of what it is happening?

Kind Regards

Reply

Hey @Ethel!

Sorry about the issues - that's no fun! A few things:

1) What problems were you having with the Symfony server? You can absolutely use MAMP, it just requires a bit more setup work, which means that there are also more opportunities to run into issues, which may be your problem!

2) My guess is that this is related to the above: it sounds like Apache isn't doing URL rewriting. If you're using MAMP, try running composer require symfony/apache-pack. That's a fancy way to add a public/.htaccess file for Apache which should (hopefully) fix the URL rewriting issue. The correct URL that you will need to go to will "vary", however, based on how your MAMP is setup. It may be, for example, http://localhost/cauldron_overflow/public assuming you have the project setup in a cauldron_overflow inside the MAMP document root. When you get the URL correct, it will (ideally) execute the public/index.php file and boot Symfony.

3) I also think this is related to the stuff above :). No matter what web server you are using, ultimately, no matter *what* URL you are going to, you want your web server to execute the public/index.php file. That boots Symfony and runs your app. I think in your case, your web server is pointing at the root of your project - and so the public/index.php file isn't being executed. When you navigate to your Twig templates, you're correct that they're not being rendered: your browser is just returning them as text. Basically, if we can get your web server setup correctly, life will be much better.

Sorry for the troubles :). This is super annoying setup stuff that (unfortunately) is common to any web framework. I remember learning it, and it's a pain. If you can get beyond it, the other stuff is more fun.

Cheers!

Reply
Richard Avatar

I can appreciate the video not being done but its inexcusable not to include the code in the script. Using the code in the downloaded "finish":-

An exception has been thrown during the rendering of a template ("Could not find the entrypoints file from Webpack: the file "/home/maxi/Dropbox/homefiles/development/Symfony/cauldron_overflow/public/build/entrypoints.json" does not exist.").

Reply

Hey Richard!

Sorry about that :). When a video isn't published yet, it often means that it isn't quite finished yet. The code blocks are added to our queue to add as soon as the video becomes available - we have a dashboard for that. I just finished this video yesterday afternoon - so the team hasn't yet added the code block for this.

But, hopefully I can help with the error :). At the end of the tutorial, we will introduce Webpack Encore as an optional feature. So, to get the final code to work, you will need to run


yarn install
yarn encore dev

However, I'm glad you messaged us... because I don't want Encore to be a *requirement* to run the final code :). So, I'm going to commit the built assets at the end of the tutorial so that they are part of the code download. Then you *can* use Encore if you want, but the files will be there either way.

Cheers!

1 Reply
Richard Avatar

Thanks for the ever polite reply. Sorry if I sounds a bit short. It's a tough day ;)

1 Reply

No worries - you helped us spot that entrypoints issue :). Hope your day gets better!

2 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
    }
}