WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.066 --> 00:00:03.346 align:middle Go back to the "show" page for a question. 00:00:03.916 --> 00:00:05.996 align:middle The logo on top is a link... 00:00:06.276 --> 00:00:08.666 align:middle that doesn't go anywhere yet. 00:00:09.036 --> 00:00:11.376 align:middle This should take us back to the homepage. 00:00:11.776 --> 00:00:16.796 align:middle Because this is part of the layout, the link lives in base.html.twig. 00:00:17.976 --> 00:00:21.376 align:middle Here it is: navbar-brand with href="#". 00:00:21.426 --> 00:00:27.566 align:middle To make this link back to the homepage, we can just change this to /, right? 00:00:28.036 --> 00:00:33.086 align:middle You could do this, but in Symfony, a better way is to ask Symfony 00:00:33.086 --> 00:00:36.736 align:middle to generate the URL to this route. 00:00:37.106 --> 00:00:42.836 align:middle That way, if we decide to change this URL later, all our links will update automatically. 00:00:43.576 --> 00:00:46.566 align:middle To see how to do that, find your terminal and run: 00:00:46.566 --> 00:00:53.086 align:middle php bin/console debug:router This lists every route in the system... 00:00:53.086 --> 00:00:58.076 align:middle and hey! Since the last time we ran this, there are a bunch of new routes. 00:00:58.546 --> 00:01:03.776 align:middle These power the web debug toolbar and the profiler and are added automatically 00:01:03.776 --> 00:01:07.256 align:middle by the WebProfilerBundle when we're in dev mode. 00:01:08.316 --> 00:01:12.156 align:middle Anyways, what I really want to look at is the "Name" column. 00:01:12.556 --> 00:01:18.136 align:middle Every route has an internal name, including the two routes that we made. 00:01:18.526 --> 00:01:23.646 align:middle Apparently their names are app_question_homepage and app_question_show. 00:01:24.206 --> 00:01:25.266 align:middle But... uh... 00:01:25.266 --> 00:01:26.876 align:middle where did those come from? 00:01:26.876 --> 00:01:29.496 align:middle I don't remember typing either of these! 00:01:29.556 --> 00:01:35.176 align:middle So... every route must be given an internal name. 00:01:35.646 --> 00:01:38.036 align:middle But when you use annotation routes... 00:01:38.396 --> 00:01:45.166 align:middle it lets you cheat: it chooses a name for you based on the controller class and method... 00:01:45.166 --> 00:01:46.606 align:middle which is awesome! 00:01:47.056 --> 00:01:51.066 align:middle But... as soon as you need to generate the URL to a route, 00:01:51.266 --> 00:01:58.386 align:middle I recommend giving it an explicit name, instead of relying on this auto-generated name, 00:01:58.686 --> 00:02:01.776 align:middle which could change suddenly if you rename your method. 00:02:02.516 --> 00:02:06.506 align:middle To give the route a name, add name="" and... 00:02:06.806 --> 00:02:08.166 align:middle how about: app_homepage. 00:02:08.166 --> 00:02:13.656 align:middle I like to keep my route names short, but app_ makes it long enough 00:02:13.846 --> 00:02:17.926 align:middle that I could search my project for this string if I ever needed to. 00:02:18.546 --> 00:02:22.136 align:middle Now if we run debug:router again: Nice! 00:02:22.406 --> 00:02:24.486 align:middle We are in control of the route's name. 00:02:25.316 --> 00:02:30.236 align:middle Copy the app_homepage name and then go back to base.html.twig. 00:02:30.876 --> 00:02:34.366 align:middle The goal is simple, we want to say: Hey Symfony! 00:02:34.716 --> 00:02:39.336 align:middle Can you please give me the URL to the app_homepage route? 00:02:39.776 --> 00:02:42.456 align:middle To do that in Twig, use {{ path() }} and pass it the route name. 00:02:42.666 --> 00:02:45.436 align:middle That's it! 00:02:46.276 --> 00:02:48.936 align:middle When we move over and refresh... 00:02:49.246 --> 00:02:51.566 align:middle now this links to the homepage. 00:02:52.236 --> 00:02:55.586 align:middle On the homepage, we have two hard-coded questions... 00:02:55.996 --> 00:02:59.546 align:middle and each has two links that currently go nowhere. 00:03:00.486 --> 00:03:01.516 align:middle Let's fix these! 00:03:01.566 --> 00:03:09.016 align:middle Step one: now that we want to generate a URL to this route, find the route 00:03:09.016 --> 00:03:12.196 align:middle and add name="app_question_show". 00:03:12.976 --> 00:03:18.076 align:middle Copy this and open the template: templates/question/homepage.html.twig. 00:03:19.286 --> 00:03:20.246 align:middle Let's see... 00:03:20.246 --> 00:03:28.326 align:middle right below the voting stuff, here's the first link to a "Reversing a spell" question. 00:03:30.606 --> 00:03:35.806 align:middle Remove the pound sign, add {{ path() }} and paste in app_question_show. 00:03:36.416 --> 00:03:38.706 align:middle But... we can't stop here. 00:03:39.276 --> 00:03:42.486 align:middle If we try the page now, a glorious error! 00:03:42.916 --> 00:03:47.176 align:middle Some mandatory parameters are missing - "slug" That makes sense! 00:03:47.476 --> 00:03:52.256 align:middle We can't just say "generate the URL to app_question_show" 00:03:52.686 --> 00:03:55.536 align:middle because that route has a wildcard! 00:03:55.946 --> 00:03:59.616 align:middle Symfony needs to know what value it should use for {slug}. 00:04:00.546 --> 00:04:01.536 align:middle How do we tell it? 00:04:01.826 --> 00:04:05.426 align:middle Add a second argument to path() with {}. 00:04:05.426 --> 00:04:10.556 align:middle The {} is a Twig associative array... 00:04:11.116 --> 00:04:13.266 align:middle again, just like JavaScript. 00:04:13.896 --> 00:04:15.966 align:middle Pass slug set to... 00:04:16.186 --> 00:04:16.876 align:middle let's see... 00:04:17.146 --> 00:04:21.816 align:middle this is a hardcoded question right now, so hardcode reversing-a-spell. 00:04:21.816 --> 00:04:28.266 align:middle Copy that entire thing, because there's one other link down here for the same question. 00:04:31.586 --> 00:04:32.826 align:middle For the second question... 00:04:32.826 --> 00:04:36.636 align:middle paste again, but change it to pausing-a-spell to match the name. 00:04:37.046 --> 00:04:38.496 align:middle I'll copy that... 00:04:38.496 --> 00:04:40.696 align:middle find the last spot... 00:04:41.116 --> 00:04:41.676 align:middle and paste. 00:04:42.576 --> 00:04:46.546 align:middle Later, when we introduce a database, we'll make this fancier 00:04:46.846 --> 00:04:49.646 align:middle and avoid repeating ourselves so many times. 00:04:50.086 --> 00:04:52.586 align:middle But! If we move over, refresh... 00:04:52.916 --> 00:04:55.626 align:middle and click a link, it works! 00:04:57.546 --> 00:05:01.266 align:middle Both pages go to the same route, but with a different slug value. 00:05:01.266 --> 00:05:07.886 align:middle Next, let's take our site to the next level by creating a JSON API endpoint 00:05:08.086 --> 00:05:10.436 align:middle that we will consume with JavaScript.