WEBVTT 0 00:00.620 --> 00:00.940 All right. 1 00:00.940 --> 00:04.010 So this is the current state of our website. 2 00:04.120 --> 00:11.680 We're able to add new posts through the compose page and once we hit publish then our posts all appear 3 00:11.770 --> 00:14.030 right up here on our home page. 4 00:14.230 --> 00:17.760 As you might imagine a blog post is usually a bit longer than this right? 5 00:17.770 --> 00:25.000 It might be five or six paragraphs long. And having all of that cluttering the home page is not a great 6 00:25.000 --> 00:29.470 thing and you probably usually wouldn't read it from the home page. 7 00:29.590 --> 00:34.600 If you think about the blogs that you read, you probably could click on the blog title and it would take 8 00:34.600 --> 00:41.600 you to a full page version of where the entire page is dedicated to that one blog post 9 00:41.620 --> 00:42.400 right? 10 00:42.400 --> 00:48.970 So if we wanted to implement that then we kind of have to have a way of accessing that page so it would 11 00:48.970 --> 00:58.860 be something like /posts/day-0 right? And then when we hit enter it would take 12 00:58.860 --> 01:04.410 us straight to a single page which is dedicated to a single blog post. 13 01:04.410 --> 01:07.760 Now you see the style of URLs all over the Web 14 01:07.800 --> 01:08.130 right? 15 01:08.140 --> 01:15.660 Say if we go to BBC News and you have a look at all the different topics that they have, say technology 16 01:15.690 --> 01:21.900 right? You access that through /news/technology and then politics is /news/politics 17 01:22.200 --> 01:24.300 business, world etc.. 18 01:24.390 --> 01:29.450 right? Now on one hand you could create this by creating separate paths 19 01:29.520 --> 01:29.820 right? 20 01:29.820 --> 01:37.440 So where your route is simply this /news/business and you render a custom page for each and 21 01:37.440 --> 01:39.310 every one of these topics. 22 01:39.450 --> 01:45.390 But if you click down more you can see there's like loads of different topics and that seems a little 23 01:45.390 --> 01:47.880 bit repetitive and quite painful. 24 01:47.880 --> 01:56.040 So I want to introduce you to something that Express allows us to do which is to use route parameters. 25 01:57.060 --> 02:01.770 Have a look at this page. I'll link to it in the course resources for this lesson. 26 02:01.950 --> 02:05.470 And I want you to read the section on route parameters. 27 02:05.490 --> 02:07.800 It goes into detail about how it works. 28 02:07.950 --> 02:09.640 But let me summarize it for you. 29 02:09.780 --> 02:16.930 Essentially what Express allows you to do is you can use a colon and then a parameter name. 30 02:17.130 --> 02:25.380 And when the user heads over to that page say /user/123, then you will be able to tap into 31 02:25.380 --> 02:30.820 that parameter stored inside this user id that is 123. 32 02:30.870 --> 02:36.030 Now in order for this to make more sense I want to show you how it works rather than just tell you. 33 02:36.210 --> 02:42.240 So I've set up a Node.js playground on KataCoda which is a really nice tool for demonstrating some of 34 02:42.240 --> 02:49.080 these things because we can utilize this standalone playground just to demonstrate one very simple thing. 35 02:49.320 --> 02:50.640 You don't have to follow along. 36 02:50.640 --> 02:53.190 I just wanted to show you how it works. 37 02:53.190 --> 03:00.180 So over here we've got our app.js and I've installed some Node modules on this playground. So I've 38 03:00.180 --> 03:08.400 got Express and I can use it inside my app.js. I've created my new app using Express and I've set 39 03:08.400 --> 03:11.170 my app to listen on port 3000. 40 03:11.210 --> 03:18.450 Now if I head over to the linked page on KataCoda then I can view that page and this is the home route 41 03:18.480 --> 03:20.700 or the root route. 42 03:20.700 --> 03:26.310 Currently there's nothing there because I haven't told it to do anything because I haven't actually 43 03:26.310 --> 03:33.960 run my app in the terminal. So I'm going to use nodemon to start up my server and now my server is running 44 03:33.960 --> 03:35.100 on port 3000. 45 03:35.100 --> 03:41.940 So now if I hit display port then tells me 'cannot get /' which means I have no get route 46 03:42.030 --> 03:44.620 for my root route which is fine. 47 03:44.640 --> 03:45.740 That's completely fine. 48 03:45.750 --> 03:52.900 But just so you realize, this stand alone playground doesn't have body-parser, it doesn't have EJS. 49 03:52.950 --> 03:56.780 We're just looking at pure Node.js with Express tagged on. 50 03:56.880 --> 04:00.540 So this is a feature of Express is basically what I'm trying to say. 51 04:00.810 --> 04:09.900 Now let's say that we create a route with app.get and we use something like /news/ 52 04:09.900 --> 04:16.800 : and then we get to give that parameter name let's say topic as the name. 53 04:16.800 --> 04:19.470 And now we're going to add our callback 54 04:19.470 --> 04:22.400 so our req and res. 55 04:22.410 --> 04:29.370 And then we're going to open up a set of curly braces and inside here all I'm going to do is I'm going 56 04:29.370 --> 04:33.640 to say console.log this parameter topic 57 04:33.660 --> 04:34.370 right? 58 04:34.380 --> 04:39.180 And in order to access it using Express the syntax is req, 59 04:39.180 --> 04:46.230 so we're tapping into the request object when this route gets triggered and then we say req.params 60 04:47.010 --> 04:52.750 dot the name of our param which is just topic without the colon. 61 04:52.830 --> 04:56.970 This is the syntax that you will see in the documentation here 62 04:57.240 --> 04:57.540 right? 63 04:57.540 --> 05:04.200 We're tapping into req.params and that gives us access to all of the parameters that have 64 05:04.200 --> 05:07.610 a colon in front of it and it gives us their values. 65 05:07.620 --> 05:16.710 So what this means is that if I head over to localhost:3000/news/science then it should 66 05:16.800 --> 05:18.770 log science over here. 67 05:18.930 --> 05:25.770 Let's head over here and let's go to the /new/politics right? 68 05:25.800 --> 05:26.640 Hit enter. 69 05:26.640 --> 05:31.860 So now if we head back over here and we check out our console then you can see politics is logged down 70 05:31.860 --> 05:32.330 here. 71 05:32.550 --> 05:35.090 So let's go ahead and change that URL again. 72 05:35.100 --> 05:39.360 Let's just say, uhm I don't know, movies. 73 05:39.360 --> 05:40.730 Hit enter. Now 74 05:40.770 --> 05:42.030 movies gets logged here. 75 05:42.030 --> 05:48.840 So this is a way for us to be able to tap into that part of the URL which we've pre-specified as a 76 05:48.840 --> 05:50.120 parameter. 77 05:50.250 --> 05:59.570 So instead of creating a route for every single one of these say you know news/science news/ 78 06:00.770 --> 06:02.170 politics, 79 06:02.240 --> 06:10.100 we can actually use the express routing parameters to do it dynamically and we can tap into that part 80 06:10.190 --> 06:16.220 and then decide what to do instead of having to pre specify every single topic which is quite painful, 81 06:16.220 --> 06:16.900 right? 82 06:17.030 --> 06:23.060 So Express routing parameters are really simple and once you wrap your head around it, it's really really 83 06:23.060 --> 06:24.500 powerful as well. 84 06:24.680 --> 06:30.950 Before you tackle this challenge I recommend that you head over here and read about route parameters. 85 06:31.430 --> 06:37.170 And once you're ready then you can go ahead and test it out in our upcoming challenge.