WEBVTT

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

00:00:01.076 --> 00:00:01.716 align:middle
Back to work!

00:00:02.416 --> 00:00:03.696 align:middle
Open ArticleController.

00:00:04.776 --> 00:00:10.346 align:middle
As soon as you want to render a template, you
need to extend a base class: AbstractController.

00:00:11.706 --> 00:00:15.606 align:middle
Obviously, your controller
does not need to extend this.

00:00:16.016 --> 00:00:17.416 align:middle
But they usually will...

00:00:17.416 --> 00:00:20.536 align:middle
because this class gives you shortcut methods!

00:00:22.306 --> 00:00:26.066 align:middle
The one we want is return $this->render().

00:00:27.146 --> 00:00:32.806 align:middle
Pass it a template filename:
how about article/show.html.twig

00:00:33.116 --> 00:00:35.336 align:middle
to be consistent with the controller name.

00:00:36.486 --> 00:00:41.446 align:middle
The second argument is an array of variables
that you want to pass into your template.

00:00:42.306 --> 00:00:45.006 align:middle
Eventually, we're going to load
articles from the database.

00:00:45.316 --> 00:00:46.356 align:middle
But... hang on!

00:00:46.606 --> 00:00:48.166 align:middle
We're not quite ready yet.

00:00:48.926 --> 00:00:50.636 align:middle
So let's fake it 'til we make it!

00:00:51.406 --> 00:00:55.646 align:middle
Pass a title variable set to a
title-ized version of the slug.

00:00:58.076 --> 00:01:00.796 align:middle
Great! Let's go add that template!

00:01:01.746 --> 00:01:08.636 align:middle
Inside templates/, create an article
directory then the file: show.html.twig.

00:01:09.956 --> 00:01:15.686 align:middle
Add an h1, then print that
title variable: {{ title }}.

00:01:15.866 --> 00:01:20.026 align:middle
If you're new to Twig, welcome!

00:01:20.256 --> 00:01:22.096 align:middle
You're going to love it!

00:01:22.746 --> 00:01:24.686 align:middle
Twig only has 2 syntaxes.

00:01:25.146 --> 00:01:28.226 align:middle
The first is {{ }}.

00:01:28.746 --> 00:01:32.676 align:middle
I call this the "say something"
tag, because it prints.

00:01:33.456 --> 00:01:40.066 align:middle
And just like PHP, you can print anything: a
variable, a string or a complex expression.

00:01:41.216 --> 00:01:45.276 align:middle
The second syntax is {% %}.

00:01:46.116 --> 00:01:48.406 align:middle
I call this the "do something" tag.

00:01:48.906 --> 00:01:54.146 align:middle
It's used whenever you need to, um,
do something, instead of printing,

00:01:54.516 --> 00:01:57.256 align:middle
like an if statement or for loop.

00:01:58.176 --> 00:02:02.976 align:middle
We'll look at the full list of
do something tags in a minute.

00:02:02.976 --> 00:02:03.906 align:middle
And... yea, that's it!

00:02:04.856 --> 00:02:06.756 align:middle
Well, ok, I totally lied.

00:02:07.006 --> 00:02:11.786 align:middle
There is a third syntax: {# #}: comments!

00:02:12.286 --> 00:02:19.516 align:middle
At the bottom of this page, I'll paste some
extra hard-coded content to spice things up!

00:02:20.526 --> 00:02:21.316 align:middle
Let's go try it!

00:02:21.776 --> 00:02:23.586 align:middle
Find your browser and refresh!

00:02:24.906 --> 00:02:27.626 align:middle
Boom! We have content!

00:02:28.516 --> 00:02:31.076 align:middle
But check it out: if you view the page source...

00:02:31.316 --> 00:02:36.576 align:middle
it's just this content: we don't have
any layout or HTML structure yet.

00:02:37.066 --> 00:02:38.526 align:middle
But, we will soon!

00:02:39.746 --> 00:02:40.836 align:middle
Go back to your controller.

00:02:42.276 --> 00:02:46.306 align:middle
Eventually, users will need to be
able to comment on the articles,

00:02:46.546 --> 00:02:50.766 align:middle
so they can respectfully debate
the article's conclusions based

00:02:50.766 --> 00:02:53.106 align:middle
on objective analysis and research.

00:02:53.636 --> 00:02:54.096 align:middle
Ya know...

00:02:54.216 --> 00:02:57.456 align:middle
no different than any other
news commenting section.

00:02:58.426 --> 00:03:00.276 align:middle
Ahem. I'll paste in 3 fake comments.

00:03:03.406 --> 00:03:06.836 align:middle
Add a second variable called comments
to pass these into the template.

00:03:07.816 --> 00:03:12.756 align:middle
This time, we can't just print that
array: we need to loop over it.

00:03:13.486 --> 00:03:18.026 align:middle
At the bottom, and an h2 that
says "Comments" and then add a ul.

00:03:19.406 --> 00:03:22.596 align:middle
To loop, we need our first do something tag!

00:03:23.246 --> 00:03:30.426 align:middle
Woo! Use {% for comment in comments %}.

00:03:30.426 --> 00:03:37.106 align:middle
Most "do" something tags also
have a closing tag: {% endfor %}.

00:03:38.166 --> 00:03:41.606 align:middle
Inside the loop, comment
represents the individual comment.

00:03:41.856 --> 00:03:45.016 align:middle
So, just print it: {{ comment }}.

00:03:46.706 --> 00:03:49.856 align:middle
Try it! Brilliant!

00:03:50.266 --> 00:03:52.356 align:middle
I mean, it's really ugly...

00:03:52.576 --> 00:03:54.836 align:middle
oof. But we'll fix that later.

00:03:55.576 --> 00:03:59.366 align:middle
Go to twig.symfony.com and
click on the Documentation link.

00:04:00.736 --> 00:04:05.376 align:middle
Scroll down a little until you see a
set of columns: the Twig Reference.

00:04:06.286 --> 00:04:08.366 align:middle
This is awesome!

00:04:08.836 --> 00:04:10.256 align:middle
See the tags on the left?

00:04:10.776 --> 00:04:15.366 align:middle
That is the entire list of
possible "do something" tags.

00:04:16.216 --> 00:04:24.186 align:middle
Yep, it will always be {% and then one
of these: for, if, extends, tractorbeam.

00:04:24.946 --> 00:04:29.776 align:middle
And honestly, you're only going to
use about 5 of these most of the time.

00:04:30.466 --> 00:04:32.046 align:middle
Twig also has functions...

00:04:32.246 --> 00:04:36.616 align:middle
which work like every other language
- and a cool thing called "tests".

00:04:37.546 --> 00:04:40.706 align:middle
Those are a bit unique, but not too difficult,

00:04:41.346 --> 00:04:45.606 align:middle
they allow you to say things
like if foo is defined or...

00:04:46.106 --> 00:04:48.026 align:middle
if space is empty.

00:04:49.176 --> 00:04:52.696 align:middle
The most useful part of this
reference is the filter section.

00:04:52.696 --> 00:04:57.946 align:middle
Filters are like functions but with
a different, way more hipster syntax.

00:04:58.476 --> 00:05:00.176 align:middle
Let's try our the length filter.

00:05:01.576 --> 00:05:02.596 align:middle
Go back to our template.

00:05:03.036 --> 00:05:05.996 align:middle
I want to print out the total
number of comments.

00:05:06.686 --> 00:05:12.376 align:middle
Add a set of parentheses and
then say {{ comments|length }}.

00:05:13.176 --> 00:05:22.096 align:middle
That is a filter: the comments value passes
from the left to right, just like a Unix pipe.

00:05:22.816 --> 00:05:26.876 align:middle
The length filter counts whatever was
passed to it, and we print the result.

00:05:27.846 --> 00:05:30.276 align:middle
You can even use multiple filters!

00:05:32.306 --> 00:05:37.616 align:middle
Twig has one last killer feature:
it's template inheritance system.

00:05:38.076 --> 00:05:38.956 align:middle
Because remember!

00:05:39.246 --> 00:05:44.936 align:middle
We don't yet have a real HTML page:
just the content from the template.

00:05:46.576 --> 00:05:54.716 align:middle
To fix this, at the top of the template,
add {% extends 'base.html.twig' %}.

00:05:54.716 --> 00:05:58.956 align:middle
This refers to the base.html.twig
file that was added by the recipe.

00:05:58.956 --> 00:06:05.086 align:middle
It's simple now, but this is our layout
file and we'll customize it over time.

00:06:06.076 --> 00:06:10.816 align:middle
By extending it, we should at least
get this basic HTML structure.

00:06:11.296 --> 00:06:12.766 align:middle
But when we refresh...

00:06:14.026 --> 00:06:16.296 align:middle
surprise! An error!

00:06:16.876 --> 00:06:19.366 align:middle
And probably one that you'll see at some point!

00:06:20.166 --> 00:06:25.836 align:middle
A template that extends another one cannot
include content outside Twig blocks Huh.

00:06:26.746 --> 00:06:33.606 align:middle
Look at the base template again: it's basically
an HTML layout plus a bunch of blocks...

00:06:34.016 --> 00:06:35.656 align:middle
most of which are empty.

00:06:36.316 --> 00:06:39.856 align:middle
When you extend a template,
you're telling Twig that you want

00:06:39.856 --> 00:06:43.706 align:middle
to put your content inside of that template.

00:06:44.416 --> 00:06:50.876 align:middle
The blocks, are the "holes" into which
our child template can put content.

00:06:50.936 --> 00:06:58.016 align:middle
For example, there's a block called body, and
that's really where we want to put our content.

00:06:59.136 --> 00:07:02.426 align:middle
To do that, we need to override that block.

00:07:03.806 --> 00:07:12.946 align:middle
At the top of the content, add {% block
body %}, and at the bottom, {% endblock %}.

00:07:15.206 --> 00:07:20.006 align:middle
Now our content should go inside
of that block in base.html.twig.

00:07:21.116 --> 00:07:22.616 align:middle
Try it! Refresh!

00:07:23.516 --> 00:07:29.576 align:middle
Yes! Well, it doesn't look any different,
but we do have a proper HTML body.

00:07:30.386 --> 00:07:35.486 align:middle
You're completely free to customize this
template as much as you want: rename the blocks,

00:07:35.766 --> 00:07:40.246 align:middle
add more blocks, and, hopefully,
make the site look less ugly!

00:07:40.746 --> 00:07:43.356 align:middle
Oh, and most of the time, the blocks are empty.

00:07:43.756 --> 00:07:48.556 align:middle
But you can give the block some
default content, like with title.

00:07:49.246 --> 00:07:51.716 align:middle
Yep, the browser tab's title is Welcome.

00:07:52.916 --> 00:07:53.806 align:middle
Let's override that!

00:07:54.316 --> 00:07:55.006 align:middle
At the top...

00:07:55.146 --> 00:07:59.066 align:middle
or really, anywhere, add {% block title %}.

00:07:59.066 --> 00:08:03.536 align:middle
Then say Read , print the title
variable, and {% endblock %}.

00:08:05.536 --> 00:08:07.866 align:middle
Try that! Yes!

00:08:08.316 --> 00:08:09.926 align:middle
The page title changes.

00:08:10.516 --> 00:08:11.436 align:middle
And... voilà!

00:08:11.956 --> 00:08:12.856 align:middle
That's Twig.

00:08:13.346 --> 00:08:15.216 align:middle
You're going to love it.

00:08:16.316 --> 00:08:21.446 align:middle
Next let's check out one of Symfony's
most killer features: the profiler.