WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:00.036 --> 00:00:05.516 align:middle Symfony controller classes do not need to extend a base class. 00:00:05.936 --> 00:00:10.076 align:middle As long as your controller function returns a Response object, 00:00:10.076 --> 00:00:13.426 align:middle Symfony doesn't care what your controller looks like. 00:00:13.926 --> 00:00:18.906 align:middle But usually, you will extend a class called AbstractController. 00:00:19.526 --> 00:00:23.276 align:middle Why? Because it gives us shortcut methods. 00:00:23.566 --> 00:00:28.516 align:middle And the first shortcut is render(): the method for rendering a template. 00:00:29.166 --> 00:00:32.926 align:middle So return $this->render() and pass it two things. 00:00:33.736 --> 00:00:35.896 align:middle The first is the name of the template. 00:00:36.346 --> 00:00:40.296 align:middle How about vinyl/homepage.html.twig. 00:00:40.916 --> 00:00:45.606 align:middle It's not required, but it's common to have a directory with the same know 00:00:45.606 --> 00:00:52.526 align:middle as your controller class and filename that's the same as your method, but you can do whatever. 00:00:53.456 --> 00:00:59.176 align:middle The second argument is an array of any variables that you want to pass into the template. 00:01:00.006 --> 00:01:06.896 align:middle Let's pass in a variable called title and set it to our mix tape title: "PB and Jams". 00:01:08.576 --> 00:01:09.906 align:middle Done in here. 00:01:10.176 --> 00:01:11.876 align:middle Oh, but pop quiz! 00:01:12.206 --> 00:01:15.446 align:middle What do you think the render() method returns? 00:01:16.286 --> 00:01:23.506 align:middle Yea, it's the thing I keep repeating: a controller must always return a Response object. 00:01:23.926 --> 00:01:28.446 align:middle render() is just a shortcut to render a template, get that string 00:01:28.576 --> 00:01:30.786 align:middle and put it into a Response object. 00:01:31.186 --> 00:01:33.926 align:middle render() returns a Response. 00:01:34.026 --> 00:01:37.136 align:middle We know from earlier that when you render a template, 00:01:37.356 --> 00:01:39.466 align:middle Twig looks in the templates/ directory. 00:01:39.636 --> 00:01:42.586 align:middle So create a new vinyl/ sub-directory... 00:01:43.056 --> 00:01:47.606 align:middle and inside of that, a file called homepage.html.twig. 00:01:48.876 --> 00:01:53.956 align:middle To start, add an h1 and then print the title variable 00:01:54.006 --> 00:01:59.396 align:middle with a special Twig syntax: {{ title }}. 00:01:59.476 --> 00:02:03.776 align:middle And... I'll add some hardcoded TODO text. 00:02:05.776 --> 00:02:07.816 align:middle Let's... go see if this works! 00:02:08.486 --> 00:02:12.226 align:middle We were working on our homepage, so go there and... 00:02:12.546 --> 00:02:14.296 align:middle hello Twig! 00:02:14.816 --> 00:02:19.556 align:middle Twig is one of the nicest parts of Symfony, and also one of the easiest. 00:02:19.986 --> 00:02:22.356 align:middle We're going to go through everything you need to know... 00:02:22.536 --> 00:02:24.776 align:middle in basically the next ten minutes. 00:02:25.556 --> 00:02:28.496 align:middle Twig has exactly three different syntaxes. 00:02:28.576 --> 00:02:31.336 align:middle If you need to print something, use {{. 00:02:31.336 --> 00:02:36.376 align:middle I call this the "say something" syntax. 00:02:37.056 --> 00:02:42.226 align:middle If I say {{ saySomething }} that would print a variable called saySomething. 00:02:42.776 --> 00:02:47.286 align:middle Once you're inside Twig, it looks a lot like JavaScript. 00:02:47.366 --> 00:02:53.796 align:middle For example, if I surround this in quotes, now I'm printing the string saySomething. 00:02:54.816 --> 00:02:56.166 align:middle Twig has functions... 00:02:56.946 --> 00:03:00.036 align:middle so that would call the function and print the result. 00:03:00.036 --> 00:03:08.666 align:middle So syntax #1 - the "say something" syntax - is {{ The second syntax... 00:03:08.696 --> 00:03:10.336 align:middle doesn't really count. 00:03:10.526 --> 00:03:14.136 align:middle It's {# to create a comment... 00:03:14.466 --> 00:03:17.236 align:middle and that's it. 00:03:17.286 --> 00:03:21.966 align:middle The third and final syntax I call the "do something" syntax. 00:03:22.186 --> 00:03:26.886 align:middle This is when you're not printing, your doing something in the language. 00:03:27.446 --> 00:03:33.416 align:middle Examples of "doing something" would be if statements, for loops or setting variables. 00:03:34.146 --> 00:03:35.566 align:middle Let's try a for loop. 00:03:36.256 --> 00:03:37.306 align:middle Go back to the controller. 00:03:37.866 --> 00:03:40.486 align:middle I'm going to paste in a tracks list... 00:03:41.086 --> 00:03:46.346 align:middle and then pass a tracks variable into the template set to that array. 00:03:47.936 --> 00:03:51.106 align:middle Now, unlike title, tracks is an array... 00:03:51.426 --> 00:03:53.666 align:middle so we can't just print it. 00:03:53.966 --> 00:03:55.566 align:middle But, we can try! 00:03:57.076 --> 00:04:00.786 align:middle Ha! That gives us an array to string conversion. 00:04:01.406 --> 00:04:04.016 align:middle Nope, we need to loop over tracks. 00:04:04.726 --> 00:04:06.726 align:middle Add a header and a ul. 00:04:08.176 --> 00:04:16.206 align:middle To loop, we'll use the "do something" syntax, which is {% and then the thing 00:04:16.206 --> 00:04:19.876 align:middle that you want to do, like for, if or set. 00:04:22.436 --> 00:04:27.166 align:middle I'll show you the full list of do something tags in a minute. 00:04:27.166 --> 00:04:33.986 align:middle A for loop looks like this: for track in tracks, where tracks is the variable we're looping over 00:04:34.406 --> 00:04:37.556 align:middle and track will be the variable inside the loop. 00:04:37.556 --> 00:04:45.296 align:middle After this, add {% endfor %}: most "do something" tags have an end tag. 00:04:46.106 --> 00:04:51.836 align:middle Inside the loop, add an li and then use the say something syntax to print track. 00:04:53.036 --> 00:04:54.236 align:middle When we try it... 00:04:54.966 --> 00:04:58.056 align:middle nice! Oh, but let's get trickier. 00:04:58.286 --> 00:05:03.936 align:middle Back in the controller, instead of using a simple array, I'll restructure this 00:05:03.936 --> 00:05:09.406 align:middle to make each track an associative array with song and artist keys. 00:05:11.536 --> 00:05:14.066 align:middle I'll paste in that same change for the rest. 00:05:15.216 --> 00:05:17.306 align:middle What happens if we try it? 00:05:18.256 --> 00:05:21.536 align:middle Ah, we're back to the "array to string" conversion. 00:05:22.346 --> 00:05:26.106 align:middle When we loop, each track itself is now an array. 00:05:26.656 --> 00:05:30.076 align:middle How can we read the song and artist keys? 00:05:30.886 --> 00:05:34.656 align:middle Remember when I said that Twig looks a lot like JavaScript? 00:05:35.316 --> 00:05:43.306 align:middle Well then, it shouldn't be a surprise that the answer is track.song and track.artist. 00:05:43.416 --> 00:05:48.956 align:middle And... that gets our list working. 00:05:49.946 --> 00:05:55.206 align:middle Now that we have the basics of Twig down, next, let's look at the full list 00:05:55.206 --> 00:05:58.776 align:middle of "do something" tags, learn about Twig "filters" 00:05:59.066 --> 00:06:03.446 align:middle and tackle the all-important template inheritance system.