Symfony 4: Twig Love

Video loading...

  • 0:03
    Symfony 4: Twig Love with Ryan Weaver
  • 0:07
    Back to work.
  • 0:08
    Open ArticleController.
  • 0:10
    As soon as you want to render a template,
  • 0:12
    you need to extend a base class: AbstractController.
  • 0:17
    Obviously, your controller does not need to extend this,
  • 0:21
    but they usually will, because this class gives you
  • 0:25
    shortcut methods.
  • 0:28
    The one we want is return $this->render.
  • 0:32
    Pass it a template filename.
  • 0:34
    How about (‘article/show.html.twig’)
  • 0:38
    to be consistent with the controller name.
  • 0:42
    The second argument is an array of variables
  • 0:44
    that you want to pass into your template.
  • 0:48
    Eventually, we’re going to load articles from the database,
  • 0:51
    but, hang on, we’re not quite ready yet.
  • 0:54
    So, let’s fake it 'til we make it!
  • 0:57
    Pass a 'title' variable set to a titleized version of the $slug.
  • 1:03
    Great!
  • 1:05
    Let’s go add that template.
  • 1:07
    Inside Templates, create an article directory,
  • 1:10
    then the file, show.html.twig.
  • 1:15
    Add an h1 that prints that title variable
  • 1:20
    {{ title }}.
  • 1:23
    If you’re new to Twig, welcome!
  • 1:25
    You’re going to love it!
  • 1:28
    Twig only has 2 syntaxes.
  • 1:30
    The first is {{ }}.
  • 1:34
    I call this the “say something” tag because it prints,
  • 1:39
    and, just like PHP, you can print anything -
  • 1:42
    a variable, a string, or a complex expression.
  • 1:46
    The second syntax is {% %}
  • 1:51
    I call this the “do something” tag.
  • 1:54
    It’s used whenever you need to… do something, instead of printing,
  • 2:00
    like an “if” statement or “for” loop.
  • 2:03
    We’ll look at the full list of “do something” tags in a minute.
  • 2:07
    And yeah, that’s it.
  • 2:10
    Well, OK, I totally lied; there is a third syntax,
  • 2:15
    {# #} – comments.
  • 2:20
    At the bottom of this page,
  • 2:21
    I’ll paste some extra hard-coded content to spice things up.
  • 2:26
    Let’s go try it!
  • 2:27
    Find your browser and refresh.
  • 2:30
    Boom! We have content!
  • 2:34
    But check it out,
  • 2:35
    if you view the page source, it’s just this content.
  • 2:39
    We don’t have any layout or HTML structure yet,
  • 2:42
    but we will soon.
  • 2:45
    Go back to your controller.
  • 2:48
    Eventually, users will need to be able to comment on the articles,
  • 2:52
    so they can respectfully debate the article’s conclusions
  • 2:56
    based on objective analysis and research.
  • 2:59
    You know, no different than any other news commenting section.
  • 3:04
    I’ll paste in 3 fake comments.
  • 3:09
    Add a second variable called 'comments' to pass these
  • 3:12
    into the template.
  • 3:13
    This time, we can’t just print that array.
  • 3:16
    We need to loop over it.
  • 3:19
    At the bottom, add an h2 that says Comments,
  • 3:22
    and then add a ul.
  • 3:25
    To loop, we need our first “do something” tag.
  • 3:29
    Woo!
  • 3:30
    Use {% for comment in comments %}.
  • 3:36
    Most “do something” tags also have a closing tag,
  • 3:39
    {% endfor %}.
  • 3:43
    Inside the loop,
  • 3:44
    comment represents the individual comment,
  • 3:47
    so just print it, {{ comment }}.
  • 3:52
    Try it.
  • 3:54
    Brilliant!
  • 3:56
    I mean, it’s really ugly – oof!
  • 3:59
    But we’ll fix that later.
  • 4:01
    Go to twig.symfony.com and click on the Documentation link.
  • 4:06
    Scroll down a little until you see a set of columns -
  • 4:09
    the Twig reference.
  • 4:12
    This is awesome!
  • 4:14
    See the tags on the left?
  • 4:16
    That is the entire list of possible “do something” tags.
  • 4:21
    Yep, it will always be {% and then one of these -
  • 4:26
    for, if, extends, tractor beam!
  • 4:30
    And honestly, you’re only going to use about 5 of these
  • 4:35
    most of the time.
  • 4:36
    Twig also has functions, which work like every other language,
  • 4:40
    and a cool thing called Tests.
  • 4:43
    Those are a bit unique, but not too difficult.
  • 4:47
    They allow you to say things like, {% if foo is defined %}
  • 4:51
    or {% if space is empty %}.
  • 4:54
    The most useful part of this reference is the Filters section.
  • 4:58
    Filters are like functions, but with a different,
  • 5:01
    way more hipster syntax.
  • 5:04
    Let’s try out the length filter.
  • 5:07
    Go back to our template.
  • 5:08
    I want to print out the total number of comments.
  • 5:12
    Add a set of parentheses, and then say, {{ comments|length }}.
  • 5:18
    That is a filter.
  • 5:21
    The comments value passes from the left to right,
  • 5:25
    just like a Unix pipe.
  • 5:28
    The length filter counts whatever was passed to it,
  • 5:31
    and we print the result.
  • 5:33
    You can even use multiple filters.
  • 5:38
    Twig has 1 last killer feature - its template inheritance system,
  • 5:43
    because remember, we don’t yet have a real HTML page,
  • 5:48
    just the content from the template.
  • 5:52
    To fix this, at the top of the template,
  • 5:54
    add {% extends ‘base.html.twig’ %}.
  • 6:00
    This refers to the base.html.twig file that was added by the recipe.
  • 6:05
    It’s simple now, but this is our layout file,
  • 6:09
    and we’ll customize it over time.
  • 6:11
    By extending it,
  • 6:13
    we should at least get this basic HTML structure.
  • 6:17
    But when we refresh,
  • 6:19
    surprise!
  • 6:20
    An error!
  • 6:22
    And probably one that you’ll see at some point.
  • 6:25
    A template that extends another one
  • 6:27
    cannot include content outside Twig blocks.
  • 6:32
    Huh! Look at the base template again.
  • 6:34
    It’s basically an HTML layout plus a bunch of blocks,
  • 6:39
    most of which are empty.
  • 6:42
    When you extend a template, you’re telling Twig
  • 6:45
    that you want to put your content inside of that template.
  • 6:50
    The blocks are the holes into which our child template can put content.
  • 6:57
    For example, there’s a block called body,
  • 7:00
    and that’s really where we want to put our content.
  • 7:04
    To do that, we need to override that block.
  • 7:09
    At the top of the content,
  • 7:11
    add {% block body %}
  • 7:15
    and at the bottom {% endblock %}.
  • 7:20
    Now our content should go inside of that block in base.html.twig.
  • 7:26
    Try it.
  • 7:27
    Refresh.
  • 7:29
    Yes!
  • 7:30
    Well, it doesn’t look any different,
  • 7:32
    but we do have a proper HTML body.
  • 7:36
    You’re completely free to customize this template as much as you want.
  • 7:40
    Rename the blocks, add more blocks,
  • 7:42
    and hopefully, make the site look less ugly.
  • 7:46
    Oh, and most of the time, the blocks are empty,
  • 7:49
    but you can give the blocks some default content, like with title.
  • 7:54
    Yep, the browser tab’s title is Welcome.
  • 7:58
    Let’s override that.
  • 8:00
    At the top, or really, anywhere,
  • 8:02
    add {% block title %}, then say Read,
  • 8:06
    print the title variable, and {% endblock %}.
  • 8:11
    Try that.
  • 8:12
    Yes!
  • 8:14
    The page title changes.
  • 8:16
    And voila,
  • 8:17
    that’s Twig!
  • 8:19
    You’re going to love it!
  • 8:22
    Next, let’s check out one of Symfony’s most killer features -
  • 8:26
    the Profiler!

Stellar Development with Symfony 4

Loading ...

Symfony 4: Twig Love

Loading...
8 minutes 34 seconds // HDCC //

In this tutorial, we'll implement a template for our Symfony app using Twig. You'll learn a few Twig basics along the way.

Downloads: 
Log in or sign up to download companion files.
Additional resources: 

Share