WEBVTT 0 00:01.080 --> 00:08.430 So now that we've completed all of the first column where we have pre planned how our server should respond 1 00:08.850 --> 00:16.420 when somebody makes a HTTP request with get or post or delete to our articles route, the 2 00:16.440 --> 00:19.260 next step is to move on to the next column. 3 00:19.320 --> 00:25.260 And now in this case our route is actually a specific article 4 00:25.260 --> 00:30.330 in this case and it could be anything. And when we're writing our server code we're writing it to be 5 00:30.510 --> 00:31.950 all encompassing. 6 00:31.950 --> 00:38.070 But when the user or the client rather targets a particular route, they will put in something like 7 00:38.070 --> 00:43.470 /articles/jack-bauer or /jquery or whatever it may be 8 00:43.560 --> 00:49.360 that is the specific resource that they're looking for inside the articles collection. 9 00:49.410 --> 00:55.660 And now we have to write our server code on how it should handle these requests. 10 00:55.680 --> 01:03.000 So as an example in this table you'll see everything referring to a specific article say an article 11 01:03.030 --> 01:03.830 on Jack Bauer. 12 01:03.930 --> 01:09.870 But when we write the code as you'll see in just a minute we're actually writing the code to encompass 13 01:10.050 --> 01:13.350 any single article within the articles collection. 14 01:13.830 --> 01:15.540 So let's get started. 15 01:15.540 --> 01:22.830 So first things first we have to make provisions for how to handle the GET request on that particular 16 01:22.920 --> 01:23.760 route. 17 01:23.820 --> 01:30.060 Now previously, we've been using our trusty app.get method but now that you've learnt about chaining 18 01:30.120 --> 01:40.980 these route handlers, I want you as a challenge to write the code for our next GET request using the chained 19 01:41.010 --> 01:44.170 syntax that you saw in the last lesson. 20 01:44.220 --> 01:57.740 So pause the video now and try to complete this challenge by writing the code for our GET request. 21 01:57.860 --> 01:58.230 All right. 22 01:58.260 --> 02:00.860 So how did that go? 23 02:00.870 --> 02:07.760 So now that we're no longer using app.get instead we're using app.route. 24 02:07.800 --> 02:15.000 And if you had any trouble at all, always remember the first point of call is the documentation and it's 25 02:15.000 --> 02:17.520 super detailed on how you can use it. 26 02:17.760 --> 02:20.660 So it shouldn't be too difficult to get started there. 27 02:20.730 --> 02:28.320 So now that we have app.route and then inside the parentheses we add in the actual route and then 28 02:28.380 --> 02:35.460 we chain on to that method a .get method and then the rest is exactly the same as we've done before. 29 02:35.880 --> 02:37.710 So let's see it in practice. 30 02:37.710 --> 02:47.250 So right up here I'm just going to add a quick comment and this is going to be the "Requests targeting 31 02:48.180 --> 02:53.550 all articles". And then I'm going to copy and paste that down here. 32 02:53.790 --> 03:00.700 And this one is going to be "Requests targeting a specific article." 33 03:00.780 --> 03:05.880 So now that we've got our sections divided up makes it a little bit easier for us to see the next time 34 03:06.180 --> 03:08.760 when we're just going through our code. 35 03:08.760 --> 03:17.070 So now I'm going to write my app.route because we now have a different route whereas previously 36 03:17.160 --> 03:22.580 our app.route and all of its chain methods dealt with the articles route, 37 03:22.590 --> 03:26.690 now we are dealing with a specific article. 38 03:26.850 --> 03:30.420 So the way that we structure this will be articles, 39 03:30.510 --> 03:36.240 so the same as before, but then we have another forward slash and then this is where the client should 40 03:36.240 --> 03:40.860 specify the particular resource that they want. 41 03:40.860 --> 03:47.970 Now again if we go back to our Express documentation you should remember that previously we had talked 42 03:47.970 --> 03:55.620 about route parameters and this is where inside that particular URL we added in a colon and then 43 03:55.650 --> 04:02.490 basically kind of like a variable name which we will assign to whatever the client assigns to their 44 04:02.490 --> 04:03.900 URL request. 45 04:03.900 --> 04:11.010 So in their example here you can see that the route path is /users/:userId 46 04:11.010 --> 04:15.750 and when the client makes the request the URL looks like this. 47 04:15.750 --> 04:19.950 And so you've got /user/34. 48 04:19.980 --> 04:26.550 So when that enters the server then 34 will get assigned to a variable named userId and we'll be 49 04:26.550 --> 04:29.280 able to use it inside that callback. 50 04:29.730 --> 04:36.220 So this is exactly what we're going to do for our specific resource which is a single article. 51 04:36.510 --> 04:43.230 Now in our case let's say that the client has to use the article title as that parameter. 52 04:43.470 --> 04:51.960 So I'm going to call it articleTitle. And now we've basically completed our route. 53 04:51.960 --> 04:57.630 So it's time to chain on our method which is the get method and I'm going to separate it out so that 54 04:57.630 --> 04:59.240 we can see it a little bit easier. 55 05:00.820 --> 05:04.740 So the get method is going to be the same as what we've done before 56 05:04.750 --> 05:06.200 minus the route. 57 05:06.280 --> 05:11.590 So it's simply just going to be a callback function with a request and response. 58 05:11.590 --> 05:18.370 Now if we're going to run our code right now before I get the chance to write the other chained on methods 59 05:18.610 --> 05:25.780 then we have to add a semicolon here to cap all of those chained methods off so that it doesn't flow 60 05:25.780 --> 05:28.550 on to the next line. 61 05:28.570 --> 05:32.470 So now inside my app.get essentially. 62 05:33.010 --> 05:38.800 So now inside the callback function in my app.get effectively 63 05:38.920 --> 05:47.940 then I'm going to need to read from my database to look for a specific article with that article title. 64 05:47.980 --> 05:52.000 So in this case I'm only expecting a single match. 65 05:52.270 --> 05:59.320 So instead of using the find method I'm going to be using the fineOne method. And then I'm going to 66 05:59.320 --> 06:06.430 specify the conditions that it has to match namely that its title has to match that title parameter 67 06:06.460 --> 06:08.070 that we got in through the URL. 68 06:08.560 --> 06:14.590 And then we're going to add the callback to see if there were any errors or if we got the resulting 69 06:14.680 --> 06:15.380 document. 70 06:16.090 --> 06:24.820 So inside our app.get I'm going to write article which is the name of my model .findOne. And 71 06:24.820 --> 06:31.330 then the condition is that the document has to have a title that is the same as the one that was requested 72 06:31.510 --> 06:33.520 by the client inside here. 73 06:33.910 --> 06:46.480 So now if we had say something like localhost:3000/articles/Jack-Bauer 74 06:46.990 --> 06:59.500 then inside our app.route we should be able to tap into the req.params.articleTitle 75 06:59.830 --> 07:06.190 and that will be equal to whatever the value the user put in to that URL. 76 07:06.250 --> 07:08.250 So in this case it'll be Jack Bauer. 77 07:08.410 --> 07:12.590 If they were looking for localhost:3000/articles/ say 78 07:12.580 --> 07:15.460 jQuer,y then this will be equal to 79 07:15.460 --> 07:17.240 jQuery instead. 80 07:17.260 --> 07:25.690 Now if that is at all confusing and this feels new to you then be sure to flip a few modules back and 81 07:25.780 --> 07:33.640 revisit that lesson where we covered Express parameters in more detail and also be sure to read through 82 07:33.910 --> 07:36.490 the Express documentation on this. 83 07:36.580 --> 07:41.980 So I'm assuming that this is all very familiar to you because we've used it many times before. 84 07:41.980 --> 07:44.880 So now I'm gonna go into my get method 85 07:44.890 --> 07:53.110 so when a user makes a get request then we should be able to tap into that request or req and we should 86 07:53.110 --> 08:00.880 be able to tap into the params that were passed in with the request and also the name of the variable 87 08:01.150 --> 08:04.120 which in this case is called articleTitle. 88 08:04.510 --> 08:11.200 So this is going to go over here and that is going to be essentially the search condition. 89 08:11.320 --> 08:16.270 So we're going to look through our collection of articles, we're gonna find one document where the title 90 08:16.360 --> 08:20.320 is equal to the one inside the request parameters 91 08:20.320 --> 08:28.150 that is the articleTitle. And once that is complete then we're going to carve a callback function with 92 08:28.150 --> 08:28.970 an error 93 08:29.020 --> 08:36.110 and also the foundArticle. Now in this case it should be singular because we're only expecting one document 94 08:36.110 --> 08:43.010 to come back whereas up here we use find I tend to have that variable name as plural. 95 08:43.240 --> 08:51.040 So now that we've got our found article the next step is to add our curly braces and inside here is where 96 08:51.340 --> 08:53.490 all the action is going to happen. 97 08:53.530 --> 08:56.110 So what do we want to happen? 98 08:56.110 --> 09:04.900 Well if there indeed was an article that was found inside our articles collection that matches the title 99 09:04.960 --> 09:11.890 that the client put in the URL, then in that case we're probably going to send that back to the client. 100 09:12.280 --> 09:19.810 So in this case we'll say something like if there indeed was a found article then we're going to res 101 09:19.900 --> 09:27.250 .send that found article. But if there weren't any articles that were found then we're going to 102 09:27.250 --> 09:35.620 res.send the text "No articles matching that title was found." 103 09:35.620 --> 09:42.670 And now we can close off everything with semicolons and get rid of all our warnings and errors and we're 104 09:42.670 --> 09:45.010 ready to test our code. 105 09:45.040 --> 09:52.870 So let's go into our Postman and let's change the method from delete to get 106 09:53.440 --> 10:00.900 and we're going to change also the URL from /articles to localhost:3000 107 10:01.610 --> 10:12.330 /articles/ whatever it is that we want to put in as the articleTitle parameter. 108 10:12.350 --> 10:17.450 Now if we were to search for say an article on 109 10:17.450 --> 10:21.350 JQuery then we would write /articles/ 110 10:21.350 --> 10:22.260 JQuery. 111 10:22.280 --> 10:26.410 Now before we can test it, if you look inside Robo 3T 112 10:26.600 --> 10:34.040 remember that the last HTTP request that we made inside Postman was to ask the server to delete 113 10:34.340 --> 10:36.220 all of our articles. 114 10:36.320 --> 10:44.450 So if we clicked on view documents you should be able to see precisely zero documents inside that collection. 115 10:44.450 --> 10:50.540 So remember where previously I said copy what already exists inside our collection so we can quickly 116 10:50.540 --> 10:51.410 fill it back up, 117 10:51.740 --> 10:53.810 well this is the time for that. 118 10:54.200 --> 11:00.970 So we want to go and add or insert our documents all in one go. 119 11:01.040 --> 11:07.910 Now if you have, for some reason, lost that copy and paste then don't worry because if you go to that 120 11:07.910 --> 11:14.600 GitHub page for the project and scroll right down then you should see a section where it says repopulate 121 11:14.600 --> 11:15.160 database. 122 11:15.590 --> 11:24.210 And I've got all of these documents over here for you to copy and simply paste into Robo 3T. 123 11:24.290 --> 11:29.210 So we're gonna delete the existing braces and then we're going to paste everything that we copied over 124 11:29.630 --> 11:31.380 and now we're gonna hit save. 125 11:31.490 --> 11:37.460 And when we view documents again then voila! We've got all our documents back 126 11:37.640 --> 11:39.290 which is wonderful. 127 11:39.290 --> 11:45.110 So we're now ready to go into Postman and query for a particular article. So you can see we've got articles 128 11:45.140 --> 11:49.640 with titles such as REST, API, Bootstrap DOM, Jack Bauer. 129 11:49.640 --> 11:51.650 So let's go for one of those. 130 11:51.650 --> 11:56.630 Let's just put REST in here and I'm going to type it out exactly the same way as I see over here. 131 11:56.990 --> 12:04.280 So now when I click send it should be making a GET request to the route that is /articles/ 132 12:04.370 --> 12:05.360 REST. 133 12:05.540 --> 12:14.510 And that will fall into this method right here and we're going to look inside the request parameters 134 12:14.840 --> 12:20.180 for something called articleTitle which is of course whatever comes after the slash after articles. 135 12:20.660 --> 12:26.600 And then we're going to look through our articles collection to find a document that has that title. And if 136 12:26.660 --> 12:33.020 we did have a found title that matches it then we should get it sent back from the server. 137 12:33.650 --> 12:41.690 So let's go ahead and click it. And you can see I have now got back my article on REST and I've got the 138 12:41.690 --> 12:44.210 title and the content. 139 12:44.810 --> 12:52.940 So now if we wanted to make a request and we wanted the client to be able to access a articletitle 140 12:52.940 --> 12:58.940 that has a space in it, you have to remember that the way that URL encoding works is that a space 141 12:59.420 --> 13:05.350 is usually represented in URL form as %20. 142 13:05.390 --> 13:11.990 And we've looked at this previously but if you'd just wanted a quick reminder then if you go to the reference 143 13:11.990 --> 13:19.670 page on HTML URL Encoding then you can take a look down on this table and see that the space character 144 13:20.060 --> 13:27.180 is represented by %20 and all of these other characters which also have their representations. 145 13:27.200 --> 13:35.630 So that means that if we wanted to make a GET request to find the article that has a title of Jack 146 13:36.020 --> 13:42.260 Bauer, then we would write something like Jack%20Bauer 147 13:42.350 --> 13:49.820 and when I hit send I get back my title on Jack Bauer and my content as well. 148 13:49.820 --> 13:56.810 So remember that when it comes into here that %20 gets decoded into a space and we get Jack 149 13:56.930 --> 14:00.890 Bauer that we get to used to search our articles for.