WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.056 --> 00:00:04.996 align:middle Unless you're building a pure API, Twig is your new best friend. 00:00:05.506 --> 00:00:08.916 align:middle Rarely do you find a library that's this much fun to use. 00:00:09.226 --> 00:00:12.246 align:middle It's also really easy, so let me just give you a quick intro. 00:00:13.176 --> 00:00:19.426 align:middle Twig has two syntaxes: {{ }} - which is the "say something" tag - 00:00:20.146 --> 00:00:25.206 align:middle and {% %} - which is the "do something" tag. 00:00:27.206 --> 00:00:31.506 align:middle If you're printing something, you aways write {{ then a variable name, 00:00:31.616 --> 00:00:36.026 align:middle a string or any expression: Twig looks a lot like JavaScript. 00:00:36.636 --> 00:00:41.076 align:middle But if you're writing code that won't print something - like an if statement a for loop, 00:00:41.076 --> 00:00:44.016 align:middle or setting a variable, you'll use {% %}. 00:00:44.946 --> 00:00:48.156 align:middle Head over to Twig's website at twig.sensiolabs.org, 00:00:48.636 --> 00:00:50.386 align:middle click Documentation and scroll down. 00:00:51.726 --> 00:00:55.256 align:middle Ah, this is a list of everything Twig does. 00:00:56.216 --> 00:01:01.606 align:middle Look at the Tags column first: this is the short list of all "do something" tags. 00:01:02.546 --> 00:01:04.206 align:middle Click on if to see some usage. 00:01:05.036 --> 00:01:11.816 align:middle Do something tags are always {% and then if or set or one of these "tags". 00:01:13.076 --> 00:01:17.676 align:middle The for tag - used as {% for %} is for looping. 00:01:18.626 --> 00:01:21.556 align:middle You'll probably end up only using 5 or 6 of these commonly. 00:01:23.076 --> 00:01:25.616 align:middle Twig also has other things like functions... 00:01:25.846 --> 00:01:29.646 align:middle which are exactly like functions in every language ever. 00:01:31.736 --> 00:01:34.916 align:middle Filters are a bit more interesting: check out lower. 00:01:35.806 --> 00:01:40.406 align:middle Really, these are functions, but with a trendier syntax: just print something, 00:01:40.766 --> 00:01:43.676 align:middle then use the pipe (|) to pass that value into a filter. 00:01:44.736 --> 00:01:47.656 align:middle You can have filter after filter. 00:01:48.676 --> 00:01:50.186 align:middle And, you can create your own. 00:01:50.886 --> 00:01:52.786 align:middle Let's make some magic happen in our Twig template. 00:01:52.786 --> 00:01:57.866 align:middle Our Aquanauts will take notes about each genus, and those will render on this page. 00:01:58.536 --> 00:02:00.926 align:middle Create a cool $notes variable with some hardcoded text 00:02:00.926 --> 00:02:03.206 align:middle and pass it into our Twig template: 00:02:06.576 --> 00:02:12.026 align:middle But before we loop over this, I want to show you a small piece of awesome: the dump() function: 00:02:13.316 --> 00:02:18.756 align:middle This is like var_dump() in PHP, but better, and you can use it without any arguments 00:02:18.756 --> 00:02:21.646 align:middle to print details about every available variable. 00:02:22.586 --> 00:02:23.376 align:middle Refresh the browser! 00:02:26.236 --> 00:02:30.526 align:middle There's the name variable, notes and a bonus: app - 00:02:31.016 --> 00:02:34.056 align:middle a global variable that Symfony adds to every template. 00:02:34.676 --> 00:02:35.696 align:middle More on that in the future. 00:02:36.796 --> 00:02:40.176 align:middle With the dump() function, you can expand the variables in really cool ways. 00:02:41.646 --> 00:02:47.636 align:middle Oh, and bonus time: you can also use dump() in PHP code: Symfony gives us that function. 00:02:47.636 --> 00:02:56.296 align:middle To print out the notes, add a and open up a for tag with {% for note in notes %}. 00:02:56.336 --> 00:02:59.276 align:middle Close it with an {% endfor %} tag. 00:03:00.016 --> 00:03:02.986 align:middle Now, it's simple: print out each note, which is a string: 00:03:07.356 --> 00:03:09.126 align:middle Back to the browser to see what we've got. 00:03:09.446 --> 00:03:13.796 align:middle Refresh! Well, it's not pretty yet, but it is working. 00:03:15.136 --> 00:03:21.556 align:middle Open the source: it's still just this html, there's no HTML layout. 00:03:22.526 --> 00:03:23.466 align:middle Time to fix that.