WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.066 --> 00:00:03.236 align:middle
I want to return HTML for this page.

00:00:03.656 --> 00:00:06.946 align:middle
We could put that HTML right
inside the controller...

00:00:07.146 --> 00:00:09.236 align:middle
but that's going to get ugly fast.

00:00:09.236 --> 00:00:14.696 align:middle
Fortunately, there's a better way: by
using a templating library called Twig.

00:00:15.196 --> 00:00:17.576 align:middle
At your terminal, make sure
you've committed your changes,

00:00:17.686 --> 00:00:21.976 align:middle
because I want to see what this new
package's recipe adds to our project.

00:00:22.216 --> 00:00:23.306 align:middle
I've already done that.

00:00:23.886 --> 00:00:29.836 align:middle
Install it with: composer require twig You
probably recognize that twig is an alias...

00:00:30.136 --> 00:00:33.136 align:middle
this time to a package called symfony/twig-pack.

00:00:33.426 --> 00:00:36.066 align:middle
And the word "pack" is important in Symfony.

00:00:36.456 --> 00:00:37.346 align:middle
A pack is...

00:00:37.526 --> 00:00:41.616 align:middle
kind of a fake package that helps
install multiple packages at once.

00:00:42.126 --> 00:00:44.426 align:middle
Watch: open up composer.json.

00:00:44.856 --> 00:00:50.726 align:middle
Instead of one new package in here called
symfony/twig-pack, we have three new packages...

00:00:50.906 --> 00:00:53.496 align:middle
and twig-pack isn't even one of them!

00:00:53.946 --> 00:00:58.446 align:middle
The three packages give us everything
we need for a full, robust Twig setup.

00:00:58.856 --> 00:01:01.766 align:middle
So when you see the word
"pack", it's not a huge deal:

00:01:02.016 --> 00:01:05.576 align:middle
just a shortcut to install
multiple packages at once.

00:01:06.496 --> 00:01:08.146 align:middle
Ok, let's see what the recipe did!

00:01:08.716 --> 00:01:14.946 align:middle
Run: git status We see the usual
composer.json, composer.lock and symfony.lock.

00:01:15.256 --> 00:01:20.446 align:middle
But for the first time, we also see
a modification to config/bundles.php.

00:01:21.056 --> 00:01:24.146 align:middle
A bundle is a PHP package that
integrates with Symfony...

00:01:24.336 --> 00:01:26.496 align:middle
it's basically a Symfony plugin.

00:01:26.856 --> 00:01:31.166 align:middle
Whenever you install a bundle, you need
to activate it in this bundles.php file.

00:01:31.856 --> 00:01:35.446 align:middle
But honestly, the recipe system
will always do that for us...

00:01:35.446 --> 00:01:39.406 align:middle
so it's a good thing to notice, but
we'll never edit this file by hand.

00:01:40.256 --> 00:01:44.436 align:middle
The second thing the recipe did was
create a config/packages/twig.yaml file.

00:01:45.056 --> 00:01:49.676 align:middle
The purpose of each file in
config/packages/ is to configure a bundle.

00:01:49.676 --> 00:01:53.766 align:middle
For example, twig.yaml controls
the behavior of TwigBundle.

00:01:54.426 --> 00:01:56.326 align:middle
This line here tells Twig: Hey!

00:01:56.576 --> 00:01:59.296 align:middle
All my template files will end in .twig.

00:01:59.796 --> 00:02:03.466 align:middle
There's a lot more that we could
configure, but we don't need to.

00:02:03.736 --> 00:02:07.266 align:middle
And we'll dive deeper into these
config files in the next tutorial.

00:02:07.956 --> 00:02:11.476 align:middle
The final thing the recipe did was
add a templates/ directory, which....

00:02:11.636 --> 00:02:12.446 align:middle
you guessed it!

00:02:12.646 --> 00:02:14.646 align:middle
Is where our template files will live!

00:02:14.646 --> 00:02:20.216 align:middle
It even started us with a base.html.twig
file that we'll talk about in a few minutes.

00:02:20.746 --> 00:02:22.746 align:middle
So let's render our first template!

00:02:23.236 --> 00:02:28.296 align:middle
To do that, make your controller extend
a base class called AbstractController.

00:02:28.756 --> 00:02:31.976 align:middle
Be sure to hit tab so that it
adds the use statement on top.

00:02:32.476 --> 00:02:36.976 align:middle
Extending this base class is optional, but
it gives us a bunch of shortcut methods.

00:02:36.976 --> 00:02:44.336 align:middle
For example, copy the string and then, to
render a template type return $this->render()

00:02:44.506 --> 00:02:46.576 align:middle
and pass a filename to a template.

00:02:46.956 --> 00:02:49.726 align:middle
Use: main/homepage.html.twig.

00:02:50.296 --> 00:02:54.546 align:middle
Your template filename can be whatever you
want, but the standard is to have a directory

00:02:54.546 --> 00:02:58.636 align:middle
that matches your controller name and a
filename that matches your method name.

00:02:59.246 --> 00:03:00.546 align:middle
Let's go create that!

00:03:01.046 --> 00:03:03.396 align:middle
In templates/, add a new directory called main.

00:03:04.246 --> 00:03:08.016 align:middle
And inside that, a file called
homepage.html.twig.

00:03:08.826 --> 00:03:09.536 align:middle
I'll paste...

00:03:10.086 --> 00:03:12.966 align:middle
then add an h1 and put it around everything.

00:03:14.786 --> 00:03:15.646 align:middle
Let's do this!

00:03:15.946 --> 00:03:17.886 align:middle
Refresh. Got it!

00:03:18.596 --> 00:03:21.266 align:middle
And by the way, what is our
controller returning?

00:03:21.686 --> 00:03:23.706 align:middle
It's still a Response object!

00:03:24.046 --> 00:03:26.746 align:middle
I know because we have a Response return type...

00:03:27.026 --> 00:03:29.126 align:middle
and our code isn't exploding.

00:03:29.686 --> 00:03:34.236 align:middle
render() is just a shortcut to render
this template, grab that string of HTML

00:03:34.406 --> 00:03:36.676 align:middle
and put it into a Response object.

00:03:37.256 --> 00:03:40.986 align:middle
So even though we're rendering a
template, it still goes back to the idea

00:03:40.986 --> 00:03:43.206 align:middle
that a controller returns a response.

00:03:43.686 --> 00:03:45.246 align:middle
What about passing data to the template?

00:03:45.736 --> 00:03:49.736 align:middle
Maybe we query the database and pass
in the total number of starships.

00:03:50.266 --> 00:03:56.036 align:middle
We don't have a database in our app yet, so
let's fake it by saying $starshipCount equals...

00:03:56.296 --> 00:03:56.846 align:middle
I don't know...

00:03:56.846 --> 00:04:00.826 align:middle
457. That seems like a believable fake number.

00:04:01.356 --> 00:04:05.796 align:middle
To pass variables to the template, add
a second argument to render(): an array.

00:04:06.726 --> 00:04:09.846 align:middle
Pass numberOfStarships set to $starshipCount.

00:04:10.446 --> 00:04:14.046 align:middle
The key will become the name of the
variable inside the Twig template.

00:04:14.626 --> 00:04:17.686 align:middle
In the template, I'll add a div, and some text.

00:04:18.126 --> 00:04:23.236 align:middle
To print the number, write {{,
the variable name, close }}.

00:04:23.236 --> 00:04:27.006 align:middle
Ok! Move over and try it.

00:04:27.526 --> 00:04:30.466 align:middle
Got it! And we just saw our first Twig code!

00:04:31.026 --> 00:04:34.306 align:middle
Twig is its own language,
but it's super friendly.

00:04:34.696 --> 00:04:36.966 align:middle
It has just three different syntaxes.

00:04:37.626 --> 00:04:41.496 align:middle
The first is {{ and I call this
the "say something" syntax.

00:04:41.876 --> 00:04:43.726 align:middle
If you're printing something, you'll use {{.

00:04:43.726 --> 00:04:50.166 align:middle
Inside the curlies, we're writing Twig,
which is very similar to JavaScript.

00:04:50.166 --> 00:04:53.986 align:middle
For example, we could print the
string 'numberOfStarships'...

00:04:53.986 --> 00:04:56.176 align:middle
or the variable numberOfStarships...

00:04:56.256 --> 00:04:58.936 align:middle
or even numberOfStarships times 10.

00:05:00.346 --> 00:05:04.256 align:middle
The second syntax of the three starts with {%.

00:05:04.656 --> 00:05:07.236 align:middle
I call this the "do something" syntax.

00:05:07.666 --> 00:05:09.086 align:middle
This doesn't print anything.

00:05:09.486 --> 00:05:15.096 align:middle
Instead, it's used for language constructs like
if statements, for loops or setting a variable.

00:05:15.836 --> 00:05:23.926 align:middle
To do an if statement say if numberOfStarships
> 400, then close this with {% endif %}.

00:05:23.926 --> 00:05:25.456 align:middle
Inside, I'll add a comment.

00:05:28.016 --> 00:05:28.746 align:middle
Try it out!

00:05:29.456 --> 00:05:30.656 align:middle
That works too!

00:05:31.226 --> 00:05:34.526 align:middle
Twig is its own library, but
it's maintained by Symfony...

00:05:34.696 --> 00:05:37.596 align:middle
so its docs live at https://twig.symfony.com.

00:05:38.266 --> 00:05:40.736 align:middle
Click the "Docs" link then scroll down.

00:05:41.266 --> 00:05:42.156 align:middle
See the "tags"?

00:05:42.616 --> 00:05:46.176 align:middle
It turns out that there are a
finite number of things you can use

00:05:46.176 --> 00:05:49.916 align:middle
with the do something syntax: it's these tags.

00:05:50.396 --> 00:05:53.186 align:middle
Like, you can't say {% applesauce...

00:05:53.276 --> 00:05:54.606 align:middle
it just won't work.

00:05:54.896 --> 00:05:58.536 align:middle
You can only use {% then one of these tags.

00:05:58.956 --> 00:06:00.276 align:middle
The list is pretty short...

00:06:00.276 --> 00:06:03.566 align:middle
and I probably only use 5
of these on a daily basis.

00:06:04.336 --> 00:06:09.646 align:middle
The third and final syntax of Twig isn't
even a syntax at all: it's for comments.

00:06:10.026 --> 00:06:12.276 align:middle
{# to write a comment.

00:06:13.006 --> 00:06:16.036 align:middle
So we're passing a simple
number to Twig and printing it.

00:06:16.386 --> 00:06:19.576 align:middle
But Twig can handle whatever
complex data you throw at it.

00:06:19.576 --> 00:06:26.246 align:middle
For example, in the controller, create a new
$myShip variable, set to an associative array.

00:06:26.766 --> 00:06:30.676 align:middle
Then pass that into the template
as a new variable: myShip.

00:06:31.596 --> 00:06:33.516 align:middle
In the template, add another div...

00:06:34.296 --> 00:06:38.946 align:middle
some text and a table to print the data.

00:06:41.016 --> 00:06:44.156 align:middle
In the <td>, we can't just print myShip...

00:06:44.426 --> 00:06:47.946 align:middle
because printing an associative
array doesn't make sense in PHP...

00:06:47.946 --> 00:06:49.986 align:middle
and so it doesn't make sense in Twig.

00:06:50.756 --> 00:06:53.966 align:middle
You get the famous error about
array to string conversion.

00:06:54.576 --> 00:06:57.666 align:middle
What we want is to print
the name key on that array.

00:06:58.196 --> 00:07:02.396 align:middle
The way we do that looks exactly
like JavaScript: myShip.name.

00:07:02.926 --> 00:07:03.536 align:middle
That's it!

00:07:03.916 --> 00:07:05.836 align:middle
And... it works.

00:07:06.466 --> 00:07:10.656 align:middle
I'll paste in the rest of our template,
which prints the other keys from the array.

00:07:12.086 --> 00:07:13.146 align:middle
Looking good.

00:07:13.626 --> 00:07:17.346 align:middle
Twig does have a few other tricks
up its sleeve, but nothing complex.

00:07:17.646 --> 00:07:19.016 align:middle
It has functions...

00:07:19.046 --> 00:07:21.626 align:middle
which work like functions in any language.

00:07:22.196 --> 00:07:25.556 align:middle
It also has something called
tests, which are a bit unique

00:07:25.556 --> 00:07:27.706 align:middle
to Twig, but simple enough to understand.

00:07:28.206 --> 00:07:32.236 align:middle
My favorite concept is probably
filters, which are basically functions

00:07:32.236 --> 00:07:34.586 align:middle
with a cooler, more hipster syntax.

00:07:34.586 --> 00:07:39.376 align:middle
For example, there's a filter called
upper to send a string to uppercase.

00:07:39.906 --> 00:07:45.746 align:middle
To use a filter, find the string that you want
to turn into uppercase then add a | and upper.

00:07:47.246 --> 00:07:49.896 align:middle
The value on the left gets
passed through the filter,

00:07:50.026 --> 00:07:52.256 align:middle
a lot like using a pipe at the command line.

00:07:53.596 --> 00:07:55.136 align:middle
It works beautifully....

00:07:55.646 --> 00:07:59.126 align:middle
and you can go crazy with
filters: piping to upper,

00:07:59.216 --> 00:08:03.736 align:middle
then lower then to title case
just to confuse your teammates.

00:08:04.386 --> 00:08:08.296 align:middle
Okay, we pretty much just learned
all of Twig in one session except

00:08:08.296 --> 00:08:10.876 align:middle
for one thing: template inheritance.

00:08:11.116 --> 00:08:12.036 align:middle
That's next.