Introduction to Twig Templating
What's up developers and welcome back to a new video where we're going to talk about the templating engine that is being used in Symfony, which is Twig.
Quick pause. Do you want to support the channel and want me to continue on creating content? You can support the channel on Patreon right now where your benefits just as a private discord group where you can share your coding issues and other developers will help you out. If you are interested to join, the link will be in the description down below.
Usually when you create websites using php, Symfony, or any other framework, you'll want to reuse components on your website. Especially when it comes to layouts, you don't want to redefine your stylesheet, javascript files, Font Awesomes, and all those other utilities that you're pulling in on every single page.
I've told you that by default Twig has a base.html.twig file and we got the index file that we created ourselves. Think about it, do you want to define your head tags for every single page? In most cases, you don't want to do that. What you should be doing is passing in the base.html.twig file as your layout and add the actual content inside the index file.
Understanding Twig Blocks for Template Inheritance
Now in our base file, you'll see some new elements that we haven't talked about before. So let's go over them one by one. We obviously have our plain HTML template. So our doctype, html, head, meta, title, and link. And I kind of expect you guys to understand the meaning behind all of these tags.
But if we look at the title for instance, you'll see something inside of it where we haven't used that much. We've got our opening title tag and our closing title tag, but we have a curly brace right here, follow the percentage sign, the keyword block, and a block is basically a place or location where a child's template can extend their content.
In this specific case, the title tag is defined inside our head. But if we extend the base file inside the index file, you don't need to define the title tag that we have right here, but you can simply change up the block right here. Next to the keyword block, you'll see a name that changes for every single block. We got the title right here, we have a stylesheet, javascript, and we have a body block.
Right now the block of our title that we have is called title. If we use this title block inside our index file, the value will replace 'welcome!' If you want to extend this piece of block, you need to call this specific block inside the index page without the title tag. The main content of the index page will be replaced with the body block that we have right here. Then we need to add data that you want to have on your index page in between the opening and closing block.
Extending Base Templates and Overriding Blocks
So let's start off by extending the base file inside the index file. So let's remove everything that we have, we don't need it anymore, and let's create a construct since we're going to run some logic. What we're going to do is to create a new extends. So let's write down extends and hit enter. It has pulled in extends so I open a curly brace, percentage sign. It's telling us that it needs to extend something and what it needs to extend is a template. Now we can remove the keyword template that we have in here and what we need to say is what we want to extend. In our case it is the base.html.twig file.
Behind the scenes we have pulled in this entire file in our index file but you won't see it. So what we can do right now is overwrite the block title. So let's do that. So we can create a block by ourselves by saying curly brace, percentage sign, and adding the keyword block of title. But this is quite a lot of work so let's just use a shortcut. Let's write down block and hit enter. And as you can see it has created an opening and closing block for us. We do need to change up the name to title. Now the value needs to be placed in between the opening closing block so let's say 'Movies Page'.
Before we test this out in the browser, let's do it one more time for the actual content which like I said, is located inside the body block. So let's create a new block. Let's give it a name of body and we need to add content in here. So let's say that we want to create a new h1 and inside of h1 we have a value of title that's coming from our controller right here.
Inspecting the Rendered Output
If we save it and navigate to the browser, refresh the page, you will see that The Avengers: Endgame has been printed out, which is coming from a controller. The most important thing right here isn't the fact that Avengers has been printed out, but if we inspect the page and open our head tag you'll see that our title tag has a value of 'Movies Page', which we have added inside our index file right here, which is overriding the 'welcome!' block.
So what we can do is to open our index page again and let's remove the entire block. Save it, navigate back to Brave, refresh the page, and as you could see, 'welcome' has been printed out right now from the base file.
Looping Through Data with for
All right, now let's work with some more data from the controller. I went over some IMDB movies, so let's add them inside an array in our movies controller. Right above our return statement, let's create a new array called movies and let's set it equal to a set of brackets. Inside our movies array, we're going to define a value of 'Avengers: Endgame'. I need more because I obviously have an array. So the second one is 'Inception', then we have 'Loki', and we finally have 'Black Widow'.
We do need to change up our return value so let's remove the entire array that we have. And after the comma of our view, we're going to define an array method. And let's go inside the parenthesis and hit enter. And what we're going to do right here is passing in a key value pair. The key in single quotes will be called movies and the value will be our variable movies that we have up here.
If we save it and open our index.html.twig file we should be able to do something with the movies we just passed in. So inside our block, let's remove the title that we have with the variable movies. If we save it and navigate to the browser, let me close off the console, refresh the page... we got an exception. And it's basically telling us what we're trying to do. We're trying to print out an array as a string. When working with arrays inside an interface, you do need to loop over your array values before you can print them out.
So let's navigate back to Visual Studio code and let's remove the entire h1 tag. So we need to create a for loop. So let's write down for and hit tab. Alright, the syntax has been created, but it is a little bit different than in PHP. In PHP, you use the loop the other way around. You're usually going to loop over an array as one single item. In Twig, you're going to loop over one specific item inside an array. So we're going to loop over a movie in the array movies. What we want to do next is to go inside our for loop, create a list item, and, well, we're basically going to say curly braces and print out one specific movie. If we save it and navigate back to the browser, refresh it, you will indeed see that all the movies have been printed out as a list item.
Now, if we navigate back to the code editor, I need to show you one more syntax, and that is used for comments. Sometimes you just want to comment something out and use it later on. What you can do is replacing the second curly brace with a hashtag and the first one from the closing curly brace. As you can see, the color has been changed to a darker gray. And if we save it and navigate back to Brave, refresh it, you will only see list items without the actual value.
Before I wrap up the video there are a couple more variables that I want to show you, and these are called global variables, which are available throughout all views without passing them through the controller. But let's navigate back to Visual Studio Code and let's remove our entire for block. And inside our body block we're basically going to say, well, we're going to print out a variable so we need a curly brace _self. Save it, navigate back to the browser, let's refresh it. And right here you'll see that the current page name has been printed out, which obviously is index.html.
The second global variable is called _charset. Save it, navigate back to the browser, refresh it, and right here you'll see that the current charset is obviously UTF-8.
The last one is actually something that you might be using quite a lot when programming in Symfony.
Creating Custom Global Variables
Sometimes you want to define a variable and use it throughout your entire application. Let's navigate back to Visual Studio Code. Let's scroll up. Inside our config folder, we have a packages folder. Let's open it and in here we have a twig.yaml file. We can define global variables right below our default_path that we have right here. We can define a new section, so let's do it, called globals. We do need to add a colon because we want to set it equal to a value. Then on the line below we can define a new section for globals and this kind of looks a key value pair.
Now the key will be, let's say, author, colon, and the value will be Code With Dary. If we save it and navigate back to our index.html.twig file, we can simply replace the _charset with author. If we save it and navigate back to the browser, refresh it, you will see that 'Code With Dary' has been printed out.
That being said, this was it for this video where I showed you some basics of Twig and Symfony. In the next video, we will be diving into assets in Symfony. If you do like my content and you want to see more, leave this video a thumbs up. And if you're new to this channel, please hit the subscribe button.
