WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.066 --> 00:00:03.706 align:middle There are two different ways that we can interact with our app. 00:00:04.516 --> 00:00:06.826 align:middle The first is via the web server... 00:00:07.296 --> 00:00:09.016 align:middle and that's what we've been doing! 00:00:09.526 --> 00:00:11.706 align:middle We got to a URL and... 00:00:11.706 --> 00:00:17.556 align:middle behind the scenes, it executes public/index.php, which boots up Symfony, 00:00:17.726 --> 00:00:20.276 align:middle calls the routing and runs our controller. 00:00:21.556 --> 00:00:24.986 align:middle What's the second way we can interact with our app? 00:00:25.456 --> 00:00:31.216 align:middle We haven't seen it yet: it's via a command line tool called bin/console. 00:00:32.246 --> 00:00:35.606 align:middle At your terminal run: php bin/console ... 00:00:35.696 --> 00:00:39.626 align:middle to see a bunch of commands within this script. 00:00:40.526 --> 00:00:41.976 align:middle I love this thing. 00:00:42.736 --> 00:00:48.346 align:middle It's full of stuff to help us debug, eventually it will have code-generation commands, 00:00:48.676 --> 00:00:51.916 align:middle commands for setting secrets: all kinds of good stuff 00:00:51.916 --> 00:00:54.316 align:middle that we're going to discover little-by-little. 00:00:55.136 --> 00:00:57.276 align:middle But I do want to point out that... 00:00:57.336 --> 00:01:01.286 align:middle there's nothing special about this bin/console script! 00:01:01.866 --> 00:01:08.516 align:middle It's just a file: there's literally a bin/ directory with a console file inside. 00:01:09.176 --> 00:01:14.756 align:middle You'll probably never need to open this file or think about it, but it is useful. 00:01:15.446 --> 00:01:18.416 align:middle Oh, and on most systems, you can just run: . 00:01:18.416 --> 00:01:19.596 align:middle /bin/console ... 00:01:19.706 --> 00:01:20.856 align:middle which looks cooler. 00:01:21.576 --> 00:01:24.606 align:middle Or sometimes you may see me run: symfony console ... 00:01:24.816 --> 00:01:28.286 align:middle which is just another way to execute this file. 00:01:29.176 --> 00:01:31.876 align:middle We'll talk more about this in a future tutorial. 00:01:33.046 --> 00:01:43.096 align:middle The first command I want to check out inside of bin/console is debug:router: This is awesome. 00:01:43.546 --> 00:01:51.506 align:middle It shows us every route in our app, like our two routes for / and /browse/{slug}. 00:01:52.486 --> 00:01:54.316 align:middle What are these other routes? 00:01:55.296 --> 00:01:59.176 align:middle They come form the web debug toolbar and profiler system... 00:01:59.496 --> 00:02:02.576 align:middle and they're only here while we're developing locally. 00:02:03.846 --> 00:02:05.286 align:middle Ok, back on our site.... 00:02:05.696 --> 00:02:10.106 align:middle at the top of the page, we have two non-functional links 00:02:10.166 --> 00:02:12.356 align:middle to the homepage and browse page. 00:02:12.826 --> 00:02:13.966 align:middle Let's hook these up. 00:02:15.316 --> 00:02:18.046 align:middle Open templates/ base.html.twig... 00:02:18.306 --> 00:02:20.406 align:middle and search for a tags. 00:02:21.836 --> 00:02:22.266 align:middle Here we go. 00:02:22.866 --> 00:02:28.686 align:middle So it would be really easy to get this working by just href="/". 00:02:29.456 --> 00:02:32.846 align:middle But instead, whenever we link to a page in Symfony, 00:02:33.086 --> 00:02:38.106 align:middle we're going to ask the routing system to generate a URL for us. 00:02:38.836 --> 00:02:46.076 align:middle We'll say: Please generate the URL to the homepage's route, or the browse page's route. 00:02:46.826 --> 00:02:53.526 align:middle Then, if we ever change the URL of a route, all our links will instantly update. 00:02:54.346 --> 00:02:57.636 align:middle Magic. Let's start with the homepage. 00:02:58.136 --> 00:03:02.036 align:middle How do we ask Symfony to generate a URL to this route? 00:03:02.926 --> 00:03:06.736 align:middle Well first, we need to give the route a name. 00:03:07.346 --> 00:03:11.626 align:middle Surprise! Every route has an internal name. 00:03:11.626 --> 00:03:14.536 align:middle You can see it back in debug:router. 00:03:15.946 --> 00:03:20.146 align:middle Our route's are named app_vinyl_homepage and app_vinyl_browse. 00:03:20.516 --> 00:03:25.046 align:middle Huh, those are the exact names of my pet turtles when I was kid. 00:03:26.256 --> 00:03:28.066 align:middle Where did these names come from? 00:03:28.546 --> 00:03:34.016 align:middle By default, Symfony automatically generates a name for us, which is fine. 00:03:34.346 --> 00:03:38.836 align:middle The name isn't used at all until we generate a URL to it. 00:03:39.406 --> 00:03:42.976 align:middle And as soon as we do need to generate a URL to a route, 00:03:43.336 --> 00:03:46.596 align:middle I highly recommend taking control of this name... 00:03:46.926 --> 00:03:50.156 align:middle just to make sure it never accidentally changes. 00:03:51.216 --> 00:03:58.776 align:middle To do this, find the route and add an argument: name set to, how about, app_homepage. 00:03:59.946 --> 00:04:05.906 align:middle I like using the app_ prefix: it makes it easier to search for a route name later. 00:04:06.566 --> 00:04:10.936 align:middle By the way, PHP 8 attributes - like this Route attribute - 00:04:11.076 --> 00:04:15.586 align:middle are represented by actual, physical PHP classes. 00:04:16.406 --> 00:04:20.666 align:middle If you hold command or ctrl, you can open it and look inside. 00:04:21.556 --> 00:04:25.426 align:middle This is great: the __construct() method shows all 00:04:25.426 --> 00:04:28.236 align:middle of the different options you can pass to the attribute. 00:04:29.176 --> 00:04:31.866 align:middle For example, there's a name argument... 00:04:32.156 --> 00:04:38.476 align:middle and then we're using PHP's named argument syntax to pass this into the attribute. 00:04:39.466 --> 00:04:43.556 align:middle Opening up an attribute is a great way to learn about its options. 00:04:44.576 --> 00:04:48.316 align:middle Anyways, now that we've given this a name, go back to our terminal 00:04:48.316 --> 00:04:52.016 align:middle and run debug:router again: This time... 00:04:52.386 --> 00:04:55.996 align:middle yea! The route is named app_homepage! 00:04:56.886 --> 00:05:00.266 align:middle Copy that, then head back to base.html.twig. 00:05:01.416 --> 00:05:06.896 align:middle To generate a URL inside of twig, say {{ - because we're going to print something - 00:05:07.166 --> 00:05:10.506 align:middle and then use a Twig function called path(). 00:05:12.316 --> 00:05:14.136 align:middle Pass this the route name. 00:05:15.086 --> 00:05:16.866 align:middle Done! Refresh... 00:05:19.106 --> 00:05:22.516 align:middle and the link up here works! 00:05:23.136 --> 00:05:24.496 align:middle One more link to go. 00:05:25.406 --> 00:05:30.566 align:middle We know step one: give the route a name. 00:05:30.566 --> 00:05:34.396 align:middle So name: and, how about, app_browse. 00:05:35.396 --> 00:05:37.546 align:middle Copy that, and... 00:05:37.546 --> 00:05:38.496 align:middle scroll down a bit. 00:05:38.496 --> 00:05:42.926 align:middle Here it is: "Browse Mixes". 00:05:43.286 --> 00:05:46.966 align:middle Change that to {{ path('app_browse') }}. 00:05:50.486 --> 00:05:51.646 align:middle And now... 00:05:52.146 --> 00:05:53.836 align:middle that link works too! 00:05:54.696 --> 00:06:01.796 align:middle Oh, but on this page, we have some quick links to go to the browse page for a specific genre. 00:06:02.266 --> 00:06:04.086 align:middle And these do not work yet. 00:06:04.746 --> 00:06:06.166 align:middle This is interesting. 00:06:06.606 --> 00:06:09.386 align:middle We want to generate a URL like before... 00:06:09.646 --> 00:06:15.306 align:middle but this time we need to pass something to the {slug} wildcard. 00:06:16.536 --> 00:06:18.576 align:middle Open browse.html.twig. 00:06:19.076 --> 00:06:20.526 align:middle Here's how we do that. 00:06:21.346 --> 00:06:27.106 align:middle The first part is the same: {{ path() }} and then the name of the route: app_browse. 00:06:28.406 --> 00:06:31.616 align:middle If we stopped here, it would generate /browse. 00:06:32.066 --> 00:06:37.856 align:middle To pass values to any wildcards in a route, path() has a second argument: 00:06:38.466 --> 00:06:41.596 align:middle an associative array of those value. 00:06:42.176 --> 00:06:49.846 align:middle And, again, just like JavaScript, to create an "associative array", you use { and }. I'm going 00:06:49.846 --> 00:06:55.086 align:middle to hit enter to break this onto multiple lines... 00:06:55.266 --> 00:06:56.676 align:middle just to keep things readable. 00:06:57.416 --> 00:07:00.376 align:middle Inside add a slug key to the array... 00:07:01.046 --> 00:07:04.346 align:middle and since this is the "Pop" genre, set it to pop. 00:07:05.396 --> 00:07:11.376 align:middle Cool! Let's repeat this two more times: {{ path('app_browse') }}, 00:07:11.896 --> 00:07:17.236 align:middle pass curly braces for an associative array, with slug set to rock. 00:07:18.526 --> 00:07:20.756 align:middle And then one more time down here... 00:07:21.046 --> 00:07:23.376 align:middle which I'll do really quickly. 00:07:23.446 --> 00:07:27.226 align:middle Let's see if it works! 00:07:27.846 --> 00:07:29.136 align:middle Refresh. Ah! 00:07:29.746 --> 00:07:31.646 align:middle Variable rock doesn't exist. 00:07:32.186 --> 00:07:34.176 align:middle I bet some of you saw me do that. 00:07:34.796 --> 00:07:37.896 align:middle I forgot my quotes, so this looks like a variable. 00:07:39.806 --> 00:07:40.426 align:middle Try it again. 00:07:41.806 --> 00:07:42.846 align:middle There we go. 00:07:43.446 --> 00:07:44.526 align:middle And try the links... 00:07:45.236 --> 00:07:46.766 align:middle yes! They work! 00:07:47.876 --> 00:07:51.146 align:middle Next: we've created two HTML pages. 00:07:51.566 --> 00:07:56.006 align:middle Now let's see what it looks like to create a JSON API endpoint.