WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.226 --> 00:00:04.766 align:middle The Symfony Plugin has all kinds of awesome setup for Twig integration. 00:00:04.876 --> 00:00:09.726 align:middle So let's render a template here, movie/new.html.twig: 00:00:09.936 --> 00:00:14.376 align:middle PHPStorm highlights this immediately because it's missing its template, how thoughtful! 00:00:15.136 --> 00:00:19.956 align:middle Let's make that template, in app/Resources/views we'll create a directory called movie 00:00:19.956 --> 00:00:25.226 align:middle and a file called new.html.twig. 00:00:27.476 --> 00:00:31.946 align:middle Like always, start by extending the base template, but notice we get autocomplete 00:00:31.946 --> 00:00:34.566 align:middle on that extends tag which is fantastic! 00:00:34.956 --> 00:00:37.176 align:middle And we even get autocomplete on the template name. 00:00:38.456 --> 00:00:44.046 align:middle Down here, we get more autocomplete on block and endblock -- it's like Christmas morning! 00:00:45.546 --> 00:00:48.986 align:middle For our h1 tag we'll say 'New Samuel L Jackson Movie'. 00:00:48.986 --> 00:00:53.196 align:middle And because the plugin gives us intelligence on the Twig file names, 00:00:53.196 --> 00:00:57.076 align:middle you can hover over any template name, hold command, and click it to go there. 00:01:01.686 --> 00:01:06.626 align:middle You can even do the same thing on a block: holding command and clicking block body takes us 00:01:06.626 --> 00:01:10.746 align:middle to the block body in base.html.twig because it knows where that's coming from. 00:01:11.746 --> 00:01:13.976 align:middle I'll close these two templates and go back to our controller. 00:01:16.376 --> 00:01:18.356 align:middle When we refresh we've got our functional page. 00:01:19.876 --> 00:01:23.436 align:middle Now, to the left of newAction, we have a cute little icon that appeared. 00:01:23.726 --> 00:01:26.936 align:middle When you click it, it shows you related files to this controller. 00:01:27.166 --> 00:01:31.706 align:middle So we see here we've got the controller itself and the template, and this list will get longer 00:01:31.706 --> 00:01:34.706 align:middle as we start referencing more things like repositories and services. 00:01:35.806 --> 00:01:37.996 align:middle Like most templates, we're going to want to use some variables. 00:01:38.236 --> 00:01:42.436 align:middle Let's start with a quote variable that we'll display in the form for inspiration. 00:01:42.926 --> 00:01:46.326 align:middle Eventually we'll have this generated randomly but for now we'll just hardcode it in: 00:01:46.326 --> 00:01:51.306 align:middle "If my answers frighten you then you should cease asking scary questions". 00:01:51.876 --> 00:01:53.396 align:middle Oh Sam you're too much! 00:01:53.566 --> 00:01:58.256 align:middle I could just go to my tree and double click new.html.twig to open it again, 00:01:58.346 --> 00:02:02.056 align:middle but instead I'm going to hold command and click the name in the controller to get us there. 00:02:02.056 --> 00:02:08.486 align:middle In the template we'll use the normal `{{ }}` inside a p tag, but watch this: 00:02:08.776 --> 00:02:10.846 align:middle we get autocomplete on our quote variable. 00:02:11.136 --> 00:02:12.966 align:middle That is huge! 00:02:12.966 --> 00:02:18.856 align:middle In my experience, it doesn't work 100% of the time, but it does work most of the time. 00:02:18.856 --> 00:02:22.846 align:middle It will even look inside your controller to see what kind of object it is 00:02:22.876 --> 00:02:24.876 align:middle and give you autocomplete on its methods. 00:02:25.806 --> 00:02:28.276 align:middle And remember, anywhere that you get autocomplete, 00:02:28.276 --> 00:02:31.796 align:middle you can hit command+space to see all of your options. 00:02:32.356 --> 00:02:36.096 align:middle Here it shows us the variable and all of the function names and filters that come 00:02:36.096 --> 00:02:37.966 align:middle from everywhere inside of Symfony and Twig. 00:02:41.216 --> 00:02:45.056 align:middle For example, if you start using the upper filter, you'll get that autocompleted. 00:02:47.986 --> 00:02:51.626 align:middle Same goes for the date filter, and as you're typing date you'll see the arguments 00:02:51.626 --> 00:02:52.176 align:middle you'll need. 00:02:53.036 --> 00:02:56.856 align:middle The first is the value to the left and the second here - format - 00:02:56.996 --> 00:02:59.206 align:middle is what we'll use on the filter itself: 00:02:59.946 --> 00:03:02.516 align:middle it's a nice reminder we need to pass something like Y-m-d. 00:03:02.516 --> 00:03:09.236 align:middle To make this a bit clearer I'll add 'Today is:' before the date is actually rendered 00:03:09.236 --> 00:03:13.486 align:middle and we'll put our quote in an h3 tag. 00:03:13.486 --> 00:03:15.726 align:middle If you really can't remember how the date filter works, 00:03:15.916 --> 00:03:17.726 align:middle you can hold command now and click into it. 00:03:18.246 --> 00:03:20.716 align:middle That's going to take you to whatever class provides that filter. 00:03:20.716 --> 00:03:22.166 align:middle In this case there's two. 00:03:22.296 --> 00:03:26.156 align:middle If you ever see something like this: where one is in the cache directory, 00:03:26.156 --> 00:03:28.546 align:middle just ignore that and click the other option. 00:03:31.406 --> 00:03:35.526 align:middle The Twig environment is passed first and after that you have the date, the format 00:03:35.526 --> 00:03:38.826 align:middle and the timezone and you can just see how things work. 00:03:39.386 --> 00:03:40.926 align:middle This is wonderful for debugging. 00:03:42.836 --> 00:03:45.606 align:middle Eventually we're going to have a form so I'll go ahead 00:03:45.606 --> 00:03:51.816 align:middle and create a new template called _form.html.twig and put my fake form tag stuff right there. 00:03:54.936 --> 00:03:59.676 align:middle Heck, go crazy and throw a button in too: You're seeing another trick with PHPStorm, 00:03:59.676 --> 00:04:03.196 align:middle the mini-code generation comes from a feature called live templates. 00:04:03.586 --> 00:04:06.636 align:middle I just type form, hit tab, and it builds the tag for me. 00:04:07.396 --> 00:04:12.506 align:middle The same works with button then tab, textarea then tab and a lot of other things. 00:04:12.506 --> 00:04:15.386 align:middle We'll create our own live templates in a bit. 00:04:16.376 --> 00:04:19.516 align:middle Back in new.html.twig, you know how this works. 00:04:21.566 --> 00:04:25.566 align:middle We use the include function and not only do you get autocomplete on that function name, 00:04:25.566 --> 00:04:27.956 align:middle but you also get it on the template name. 00:04:28.966 --> 00:04:31.026 align:middle Don't worry about the "movie" part of the name, 00:04:31.186 --> 00:04:34.546 align:middle just start typing _form.html.twig and you're all set. 00:04:34.546 --> 00:04:39.386 align:middle And there are two formats here: both valid, but I like the first one, it's cleaner. 00:04:41.136 --> 00:04:44.406 align:middle Go back and refresh, beautiful! 00:04:44.586 --> 00:04:48.446 align:middle Everything looks awesome, except I guess my button is ugly. 00:04:48.446 --> 00:04:51.646 align:middle So I'll throw in some twitter bootstrap classes to make this a bit prettier. 00:04:55.846 --> 00:04:56.996 align:middle Ahh there we go! 00:04:57.336 --> 00:04:59.626 align:middle And that's some of what you can expect now with Twig!