0
1
00:00:00,620 --> 00:00:00,940
All right.
1

2
00:00:00,940 --> 00:00:04,010
So this is the current state of our website.
2

3
00:00:04,120 --> 00: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

4
00:00:11,770 --> 00:00:14,030
right up here on our home page.
4

5
00:00:14,230 --> 00:00:17,760
As you might imagine a blog post is usually a bit longer than this right?
5

6
00:00:17,770 --> 00: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

7
00:00:25,000 --> 00:00:29,470
thing and you probably usually wouldn't read it from the home page.
7

8
00:00:29,590 --> 00: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

9
00:00:34,600 --> 00:00:41,600
you to a full page version of where the entire page is dedicated to that one blog post
9

10
00:00:41,620 --> 00:00:42,400
right?
10

11
00:00:42,400 --> 00: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

12
00:00:48,970 --> 00:00:58,860
be something like /posts/day-0 right? And then when we hit enter it would take
12

13
00:00:58,860 --> 00:01:04,410
us straight to a single page which is dedicated to a single blog post.
13

14
00:01:04,410 --> 00:01:07,760
Now you see the style of URLs all over the Web
14

15
00:01:07,800 --> 00:01:08,130
right?
15

16
00:01:08,140 --> 00: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

17
00:01:15,690 --> 00:01:21,900
right? You access that through /news/technology and then politics is /news/politics
17

18
00:01:22,200 --> 00:01:24,300
business, world etc..
18

19
00:01:24,390 --> 00:01:29,450
right? Now on one hand you could create this by creating separate paths
19

20
00:01:29,520 --> 00:01:29,820
right?
20

21
00:01:29,820 --> 00:01:37,440
So where your route is simply this /news/business and you render a custom page for each and
21

22
00:01:37,440 --> 00:01:39,310
every one of these topics.
22

23
00:01:39,450 --> 00: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

24
00:01:45,390 --> 00:01:47,880
bit repetitive and quite painful.
24

25
00:01:47,880 --> 00:01:56,040
So I want to introduce you to something that Express allows us to do which is to use route parameters.
25

26
00:01:57,060 --> 00:02:01,770
Have a look at this page. I'll link to it in the course resources for this lesson.
26

27
00:02:01,950 --> 00:02:05,470
And I want you to read the section on route parameters.
27

28
00:02:05,490 --> 00:02:07,800
It goes into detail about how it works.
28

29
00:02:07,950 --> 00:02:09,640
But let me summarize it for you.
29

30
00:02:09,780 --> 00:02:16,930
Essentially what Express allows you to do is you can use a colon and then a parameter name.
30

31
00:02:17,130 --> 00:02:25,380
And when the user heads over to that page say /user/123, then you will be able to tap into
31

32
00:02:25,380 --> 00:02:30,820
that parameter stored inside this user id that is 123.
32

33
00:02:30,870 --> 00: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

34
00:02:36,210 --> 00: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

35
00:02:42,240 --> 00:02:49,080
these things because we can utilize this standalone playground just to demonstrate one very simple thing.
35

36
00:02:49,320 --> 00:02:50,640
You don't have to follow along.
36

37
00:02:50,640 --> 00:02:53,190
I just wanted to show you how it works.
37

38
00:02:53,190 --> 00: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

39
00:03:00,180 --> 00: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

40
00:03:08,400 --> 00:03:11,170
my app to listen on port 3000.
40

41
00:03:11,210 --> 00: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

42
00:03:18,480 --> 00:03:20,700
or the root route.
42

43
00:03:20,700 --> 00:03:26,310
Currently there's nothing there because I haven't told it to do anything because I haven't actually
43

44
00:03:26,310 --> 00: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

45
00:03:33,960 --> 00:03:35,100
on port 3000.
45

46
00:03:35,100 --> 00:03:41,940
So now if I hit display port then tells me 'cannot get /' which means I have no get route
46

47
00:03:42,030 --> 00:03:44,620
for my root route which is fine.
47

48
00:03:44,640 --> 00:03:45,740
That's completely fine.
48

49
00:03:45,750 --> 00:03:52,900
But just so you realize, this stand alone playground doesn't have body-parser, it doesn't have EJS.
49

50
00:03:52,950 --> 00:03:56,780
We're just looking at pure Node.js with Express tagged on.
50

51
00:03:56,880 --> 00:04:00,540
So this is a feature of Express is basically what I'm trying to say.
51

52
00:04:00,810 --> 00:04:09,900
Now let's say that we create a route with app.get and we use something like /news/
52

53
00:04:09,900 --> 00:04:16,800
: and then we get to give that parameter name let's say topic as the name.
53

54
00:04:16,800 --> 00:04:19,470
And now we're going to add our callback
54

55
00:04:19,470 --> 00:04:22,400
so our req and res.
55

56
00:04:22,410 --> 00: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

57
00:04:29,370 --> 00:04:33,640
to say console.log this parameter topic
57

58
00:04:33,660 --> 00:04:34,370
right?
58

59
00:04:34,380 --> 00:04:39,180
And in order to access it using Express the syntax is req,
59

60
00:04:39,180 --> 00:04:46,230
so we're tapping into the request object when this route gets triggered and then we say req.params
60

61
00:04:47,010 --> 00:04:52,750
dot the name of our param which is just topic without the colon.
61

62
00:04:52,830 --> 00:04:56,970
This is the syntax that you will see in the documentation here
62

63
00:04:57,240 --> 00:04:57,540
right?
63

64
00:04:57,540 --> 00:05:04,200
We're tapping into req.params and that gives us access to all of the parameters that have
64

65
00:05:04,200 --> 00:05:07,610
a colon in front of it and it gives us their values.
65

66
00:05:07,620 --> 00:05:16,710
So what this means is that if I head over to localhost:3000/news/science then it should
66

67
00:05:16,800 --> 00:05:18,770
log science over here.
67

68
00:05:18,930 --> 00:05:25,770
Let's head over here and let's go to the /new/politics right?
68

69
00:05:25,800 --> 00:05:26,640
Hit enter.
69

70
00:05:26,640 --> 00: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

71
00:05:31,860 --> 00:05:32,330
here.
71

72
00:05:32,550 --> 00:05:35,090
So let's go ahead and change that URL again.
72

73
00:05:35,100 --> 00:05:39,360
Let's just say, uhm I don't know, movies.
73

74
00:05:39,360 --> 00:05:40,730
Hit enter. Now
74

75
00:05:40,770 --> 00:05:42,030
movies gets logged here.
75

76
00:05:42,030 --> 00: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

77
00:05:48,840 --> 00:05:50,120
parameter.
77

78
00:05:50,250 --> 00:05:59,570
So instead of creating a route for every single one of these say you know news/science news/
78

79
00:06:00,770 --> 00:06:02,170
politics,
79

80
00:06:02,240 --> 00:06:10,100
we can actually use the express routing parameters to do it dynamically and we can tap into that part
80

81
00:06:10,190 --> 00:06:16,220
and then decide what to do instead of having to pre specify every single topic which is quite painful,
81

82
00:06:16,220 --> 00:06:16,900
right?
82

83
00:06:17,030 --> 00:06:23,060
So Express routing parameters are really simple and once you wrap your head around it, it's really really
83

84
00:06:23,060 --> 00:06:24,500
powerful as well.
84

85
00:06:24,680 --> 00:06:30,950
Before you tackle this challenge I recommend that you head over here and read about route parameters.
85

86
00:06:31,430 --> 00:06:37,170
And once you're ready then you can go ahead and test it out in our upcoming challenge.