WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.146 --> 00:00:03.466 align:middle Most of these links don't got anywhere yet. 00:00:03.746 --> 00:00:05.256 align:middle Whatever! No problem! 00:00:05.616 --> 00:00:07.966 align:middle We're going to fill them in as we continue. 00:00:08.576 --> 00:00:14.426 align:middle Besides, most of our users will be in hypersleep for at least a few more decades. 00:00:15.176 --> 00:00:18.046 align:middle But we can hook up some of these - 00:00:18.386 --> 00:00:23.476 align:middle like the "Space Bar" logo text - that should go to the homepage. 00:00:24.826 --> 00:00:29.526 align:middle Open templates/base.html.twig and search for "The Space Bar". 00:00:30.906 --> 00:00:33.816 align:middle Ok - let's point this link to the homepage. 00:00:34.626 --> 00:00:39.306 align:middle And yep, we could just say href="/". 00:00:39.936 --> 00:00:42.366 align:middle But... there's a better way. 00:00:43.156 --> 00:00:47.626 align:middle Instead, we're going to generate a URL to the route. 00:00:48.826 --> 00:00:52.526 align:middle Yep, we're going to ask Symfony to give us the URL 00:00:52.666 --> 00:00:56.156 align:middle to the route that's above our homepage action. 00:00:57.046 --> 00:01:04.316 align:middle Why? Because if we ever decided to change this route's URL - like to /news - 00:01:04.786 --> 00:01:11.096 align:middle if we generate the URL instead of hardcoding it, all the links will automatically update. 00:01:11.886 --> 00:01:14.836 align:middle Magic! So how can we do this? 00:01:14.836 --> 00:01:17.926 align:middle First, find your terminal and run: . 00:01:18.266 --> 00:01:24.496 align:middle /bin/console debug:router This is an awesome little tool that shows you a list 00:01:24.696 --> 00:01:27.066 align:middle of all of the routes in your app. 00:01:28.196 --> 00:01:34.616 align:middle You can see our two routes and a bunch of routes that help the profiler and web debug toolbar. 00:01:35.586 --> 00:01:39.226 align:middle There's one thing about routes that we haven't really talked 00:01:39.226 --> 00:01:43.096 align:middle about yet: each route has an internal name. 00:01:43.876 --> 00:01:50.606 align:middle This is never shown to the user, it only exists so that we can refer to that route in our code. 00:01:50.696 --> 00:01:56.496 align:middle For annotation routes, by default, that name is created for us. 00:01:57.496 --> 00:02:04.116 align:middle This means, to generate a URL to the homepage, copy the route name, go back to base.html.twig, 00:02:04.706 --> 00:02:08.656 align:middle add {{ path() }} and paste the route name. 00:02:09.646 --> 00:02:10.966 align:middle That's it! 00:02:12.346 --> 00:02:14.736 align:middle Refresh! Click it! 00:02:15.726 --> 00:02:18.066 align:middle Yes! We're back on the homepage. 00:02:18.806 --> 00:02:24.476 align:middle But... actually I don't like to rely on auto-created route names 00:02:24.576 --> 00:02:28.596 align:middle because they could change if we renamed certain parts of our code. 00:02:29.306 --> 00:02:33.506 align:middle Instead, as soon as I want to generate a URL to a route, 00:02:33.876 --> 00:02:38.886 align:middle I add a name option: name="app_homepage". 00:02:40.306 --> 00:02:46.976 align:middle Run debug:router again: The only thing that changed is the name of the route. 00:02:48.286 --> 00:02:52.636 align:middle Now go back to base.html.twig and use the new route name here. 00:02:55.806 --> 00:03:01.536 align:middle It still works exactly like before, but we're in complete control of the route name. 00:03:02.376 --> 00:03:05.116 align:middle We now have a link to our homepage... 00:03:05.296 --> 00:03:10.146 align:middle but I don't know why you'd want to go here: it's super ugly! 00:03:10.766 --> 00:03:12.026 align:middle So let's render a template. 00:03:12.026 --> 00:03:15.936 align:middle In ArticleController, instead of returning a Response, 00:03:16.256 --> 00:03:22.036 align:middle return $this->render() with article/homepage.html.twig. 00:03:23.326 --> 00:03:26.286 align:middle For now, don't pass any variables to the template. 00:03:26.846 --> 00:03:28.836 align:middle This template does not exist yet. 00:03:29.516 --> 00:03:33.966 align:middle But if you look again in the tutorial/ directory from the code download, 00:03:34.466 --> 00:03:37.406 align:middle I've created a homepage template for us. 00:03:37.406 --> 00:03:42.536 align:middle Sweet! Copy that and paste it into templates/article. 00:03:44.236 --> 00:03:50.306 align:middle It's nothing special: just a bunch of hardcoded information and fascinating space articles. 00:03:52.706 --> 00:03:55.196 align:middle It does make for a prety cool-looking homepage. 00:03:55.906 --> 00:03:59.696 align:middle And yea, we'll make this all dynamic once we have a database. 00:04:00.906 --> 00:04:04.656 align:middle One of the hardcoded articles is the one we've been playing with: 00:04:05.146 --> 00:04:07.316 align:middle Why Asteroids Taste like Bacon! 00:04:08.096 --> 00:04:11.036 align:middle The link doesn't go anywhere yet, so let's fix 00:04:11.036 --> 00:04:14.956 align:middle that by generating a URL to our article show page! 00:04:16.296 --> 00:04:22.656 align:middle Step 1: now that we want to link to this route, give it a name: article_show. 00:04:23.986 --> 00:04:28.576 align:middle Step 2: inside homepage.html.twig, find the article... 00:04:30.976 --> 00:04:36.346 align:middle and... for the href, use {{ path('article_show') }}. 00:04:37.546 --> 00:04:38.866 align:middle That should work... 00:04:38.866 --> 00:04:40.686 align:middle right? Refresh! 00:04:43.006 --> 00:04:46.636 align:middle No! It's a huge, horrible, error! 00:04:47.196 --> 00:04:52.626 align:middle Some mandatory parameters are missing - {slug} - to generate a URL for article_show. 00:04:53.316 --> 00:04:55.716 align:middle That totally makes sense! 00:04:56.306 --> 00:04:58.456 align:middle This route has a wildcard... 00:04:58.896 --> 00:05:01.466 align:middle so we can't just generate a URL to it. 00:05:02.116 --> 00:05:09.776 align:middle Nope, we need to also tell Symfony what value it should use for the {slug} part. 00:05:11.046 --> 00:05:15.636 align:middle How? Add a second argument to path(): {}. 00:05:16.366 --> 00:05:22.576 align:middle That's the syntax for an associative array when you're inside Twig - it's similar to JavaScript. 00:05:23.436 --> 00:05:28.836 align:middle Give this a slug key set to why-asteroids-taste-like-bacon. 00:05:31.636 --> 00:05:33.406 align:middle Try it - refresh! 00:05:34.476 --> 00:05:35.536 align:middle Error gone! 00:05:36.076 --> 00:05:39.126 align:middle And check this out: the link goes to our show page. 00:05:40.306 --> 00:05:43.916 align:middle Next, let's add some JavaScript and an API endpoint 00:05:44.066 --> 00:05:46.406 align:middle to bring this little heart icon to life!