1 00:00:05,480 --> 00:00:06,950 Welcome back. 2 00:00:06,980 --> 00:00:14,390 In this video, what we are going to do is that we are going to respond to a request. 3 00:00:14,390 --> 00:00:22,580 For example, if a user tried to visit, let's say, slash login or register, we want to display a 4 00:00:22,580 --> 00:00:25,490 specific HTML template for that. 5 00:00:25,850 --> 00:00:30,710 Before we get into that, let's make revision about Node.js. 6 00:00:30,710 --> 00:00:32,090 What is Node.js? 7 00:00:32,090 --> 00:00:39,410 Remember, Node.js uses what is called an event driven non blocking IO model. 8 00:00:39,500 --> 00:00:50,480 The key word here is is what is an event driven meaning that upon every action that we take inside our 9 00:00:50,480 --> 00:00:55,160 application, we can respond to that action. 10 00:00:55,160 --> 00:00:56,540 To that event. 11 00:00:57,170 --> 00:01:07,520 The first event that we have taken is any time we visit the URL that is localhost semicolon, 9000, 12 00:01:07,550 --> 00:01:17,330 this is the first event and we can respond to that event because Node.js is what is an event driven. 13 00:01:17,660 --> 00:01:20,420 So how can we listen to that? 14 00:01:20,780 --> 00:01:27,980 Let's remove the code you wrote to create the file from the previous video, or if you want it, you 15 00:01:27,980 --> 00:01:29,600 can maintain it. 16 00:01:29,690 --> 00:01:32,840 So the first step is let's have a beautiful comment. 17 00:01:32,840 --> 00:01:34,970 Say listen to events. 18 00:01:34,970 --> 00:01:40,040 So how can we listen to event is pretty easy in Node.js. 19 00:01:40,550 --> 00:01:48,140 So what we are going to do is that on the instance of the server to be able to listen to event in Node.js, 20 00:01:48,140 --> 00:01:56,810 we are going to use what is called on so server dot on meaning we are already listening to an event 21 00:01:57,260 --> 00:02:01,760 and we have a couple of built in events, for example, requests. 22 00:02:02,090 --> 00:02:05,780 So this is a type of event from Node.js. 23 00:02:05,960 --> 00:02:07,820 It is not created by us. 24 00:02:07,820 --> 00:02:09,350 If you name it anything. 25 00:02:09,380 --> 00:02:14,450 This event will never find it, so name it as requests. 26 00:02:17,470 --> 00:02:18,220 Great. 27 00:02:18,340 --> 00:02:25,180 The next one is a callback function, so I'm going to pass an arrow function this time around. 28 00:02:25,180 --> 00:02:27,700 And here we go. 29 00:02:28,300 --> 00:02:34,060 And inside the callback function, we have access to the requests and their response. 30 00:02:34,480 --> 00:02:37,840 So let's try to console.log a text. 31 00:02:37,840 --> 00:02:44,200 And since that event has been fired. 32 00:02:45,100 --> 00:02:45,910 Perfect. 33 00:02:45,970 --> 00:02:46,980 So let's save it. 34 00:02:46,990 --> 00:02:55,120 Now, let's remove this console log from the previous video and now we are listening to an event inside 35 00:02:55,120 --> 00:02:55,410 this. 36 00:02:55,420 --> 00:03:02,500 It means that whenever a user tried to visit the you are, this event is going to be fired. 37 00:03:02,650 --> 00:03:04,310 So moment of truth. 38 00:03:04,330 --> 00:03:09,640 So let's shut down the server, clear the console, and then let's run again. 39 00:03:09,640 --> 00:03:12,130 So let's try to visit the URL. 40 00:03:12,130 --> 00:03:15,040 So let's refresh it and now check it out. 41 00:03:15,040 --> 00:03:19,450 And you can see that event has been fired. 42 00:03:19,510 --> 00:03:24,760 So inside here we can implement any logic. 43 00:03:25,180 --> 00:03:36,310 So the question is we need to know the you are arrow, the user is trying to request so how can we get 44 00:03:36,310 --> 00:03:37,390 the you are arrow? 45 00:03:37,600 --> 00:03:45,120 So lucky for us on the request object here if you console.log the requests. 46 00:03:45,130 --> 00:03:50,140 Now let's remove the console log because we know that indeed it has been fired. 47 00:03:50,470 --> 00:03:55,690 So let's start on the server, click the console and then let's restart again. 48 00:03:55,690 --> 00:04:02,080 Yeah, server is running so let's refresh it and let's have a look at the request object. 49 00:04:02,080 --> 00:04:08,500 We have a bunch of them but the one that we want is called dot. 50 00:04:08,500 --> 00:04:16,600 You are error meaning the you are the user is trying to make a request to so we can have a beautiful 51 00:04:16,600 --> 00:04:27,700 comment says gets the new URL so here const you are error is equal to request dot you are URL. 52 00:04:27,940 --> 00:04:32,170 Now if you try to console log the you are error. 53 00:04:32,200 --> 00:04:33,190 Let's have a look. 54 00:04:33,430 --> 00:04:41,920 Let's restart a server, click the console like this and now let's see, let's visit the end point. 55 00:04:41,950 --> 00:04:43,060 Now have a look. 56 00:04:43,090 --> 00:04:47,710 You can see that we have something incredible that is forward. 57 00:04:47,710 --> 00:04:53,140 Slash this force slash simply means the home page. 58 00:04:53,260 --> 00:04:57,190 The force slash it's same as this. 59 00:04:57,190 --> 00:05:03,640 That is the h t t p semicolon semicolon localhost. 60 00:05:04,600 --> 00:05:06,310 Semicolon, 9000. 61 00:05:06,340 --> 00:05:09,370 This is the home is equal to the fourth slash. 62 00:05:09,580 --> 00:05:12,490 So now we know that we are the home page. 63 00:05:12,760 --> 00:05:18,910 But if I try to make use of a slash log in like that. 64 00:05:18,940 --> 00:05:20,350 Now hit enter. 65 00:05:20,560 --> 00:05:22,270 Let's check the console. 66 00:05:22,540 --> 00:05:27,900 You can see we have the URL that is slash logging. 67 00:05:27,910 --> 00:05:32,670 So this is same as the one we see on the page. 68 00:05:32,680 --> 00:05:37,510 Ask look host semicolon 9000 for a slash log in. 69 00:05:37,780 --> 00:05:42,790 So now we know that you are the user is trying to make a request. 70 00:05:42,940 --> 00:05:49,060 So we can make some conditions here and render specific a HTML template. 71 00:05:49,270 --> 00:05:58,480 Now that we know that you are inside this event handler here, we can now make some conditions and check 72 00:05:58,480 --> 00:06:04,270 the kind of you are or the user is trying to visit or to get the resource from. 73 00:06:04,630 --> 00:06:10,110 So here you're going to make use of Eve and then the you are error. 74 00:06:10,120 --> 00:06:20,890 If it is equal to voice slash login, then we can go ahead and then render the login template. 75 00:06:21,070 --> 00:06:23,440 But let's see how you're going to do it. 76 00:06:23,950 --> 00:06:27,940 So the first step is we need to read the file. 77 00:06:28,690 --> 00:06:32,920 For example, looking at this one, we want to render this one. 78 00:06:32,950 --> 00:06:38,230 First of all, we need to read the content on this HTML template. 79 00:06:38,440 --> 00:06:46,660 For this one, we can use the normal HTML semantic like this one and then paste it as that is the same. 80 00:06:46,660 --> 00:06:48,130 So let's take to this. 81 00:06:48,160 --> 00:06:48,790 All right. 82 00:06:48,790 --> 00:06:51,970 So right in this one, using the function is going to be hectic. 83 00:06:51,970 --> 00:06:56,920 That is why I just added that div as that so is same as before. 84 00:06:57,220 --> 00:07:03,940 So now we are going to read the contents, as I said, and how are you going to do it? 85 00:07:03,940 --> 00:07:10,000 So let's comment here and say that read content on. 86 00:07:11,050 --> 00:07:18,010 On the login page, a two page or eight minute file. 87 00:07:18,680 --> 00:07:19,000 Okay. 88 00:07:19,000 --> 00:07:19,990 So here we go. 89 00:07:20,260 --> 00:07:23,230 We are going to use the FS module. 90 00:07:23,260 --> 00:07:25,090 Let's have some space here. 91 00:07:25,120 --> 00:07:33,080 F s dot read file and we pass in the kind of file that we want to read. 92 00:07:33,100 --> 00:07:36,340 That is the log in dot html. 93 00:07:36,850 --> 00:07:40,280 The next element is going to be the function. 94 00:07:40,300 --> 00:07:43,140 In that function, we have access to the data. 95 00:07:43,150 --> 00:07:45,270 So here let's use a function. 96 00:07:45,280 --> 00:07:49,960 This time around we have access to the error and the actual content. 97 00:07:49,960 --> 00:07:51,790 And here you go. 98 00:07:52,330 --> 00:07:56,380 So at this point, let's check for error. 99 00:07:57,520 --> 00:07:58,700 Check for error. 100 00:07:58,720 --> 00:08:02,140 So here, if error, why not? 101 00:08:02,140 --> 00:08:06,010 You go ahead and then console.log the error. 102 00:08:06,610 --> 00:08:15,790 Otherwise we are going to send this data as a response using the response dot. 103 00:08:15,790 --> 00:08:16,630 Right. 104 00:08:16,930 --> 00:08:21,910 So going to send the status code as we did inside here. 105 00:08:22,600 --> 00:08:23,020 Good. 106 00:08:23,020 --> 00:08:32,950 So now first step is we need to write to the head to tell the user that the response was okay and the 107 00:08:32,950 --> 00:08:35,280 kind of data you want to send to the user. 108 00:08:35,289 --> 00:08:36,880 So here we go. 109 00:08:37,150 --> 00:08:47,560 So errors down here and now inside here, we're going to use red dot right head. 110 00:08:49,320 --> 00:08:49,920 Right. 111 00:08:49,950 --> 00:08:58,530 Hey, as time passed in the status quo two hundredths, which means, okay, we pass in the first agreement. 112 00:08:58,560 --> 00:09:00,720 That is a status code for this case. 113 00:09:00,720 --> 00:09:03,690 Let's use 200, which simply means. 114 00:09:03,720 --> 00:09:11,370 Okay, the next man, we're going to be object to specify the kind of data you want to send and that 115 00:09:11,370 --> 00:09:13,490 is under content type. 116 00:09:13,500 --> 00:09:20,190 And then semicolon we pass in as text some around we want to send a HTML. 117 00:09:20,850 --> 00:09:29,850 Then the next step is we need to send the data that is rest that right and then pass in the data we 118 00:09:29,850 --> 00:09:34,140 got from the callback here as that and that is it. 119 00:09:34,140 --> 00:09:38,730 The last step is we need to end the response. 120 00:09:38,940 --> 00:09:42,300 Rest, rest and not rest. 121 00:09:42,300 --> 00:09:43,670 Rest that end. 122 00:09:44,110 --> 00:09:46,470 Okay, now moment of truth. 123 00:09:46,860 --> 00:09:54,750 So here because when we run the function, this one is going to be called, but we are implementing 124 00:09:54,750 --> 00:09:57,930 the logic inside this handler. 125 00:09:58,140 --> 00:10:02,910 So in that case, you're going to remove the logic here inside this. 126 00:10:02,910 --> 00:10:05,310 So now let's remove everything from here. 127 00:10:05,790 --> 00:10:11,400 So what we go from here is just the instance of server and that is all. 128 00:10:11,610 --> 00:10:18,000 So now because we've made changes to the server, let's shut down the server, control C and click the 129 00:10:18,000 --> 00:10:20,340 console and let's run the server again. 130 00:10:20,340 --> 00:10:22,200 Now the server is running. 131 00:10:22,200 --> 00:10:31,890 Now let's visit the you are error lookup host semicolon 9000 and then first slash log in when I hit 132 00:10:31,890 --> 00:10:36,030 enter a this is a game page. 133 00:10:36,480 --> 00:10:40,980 So what about if I visit home page? 134 00:10:41,010 --> 00:10:48,630 If we see that nothing seems to happen happening we see is pending because we are not handling forward 135 00:10:48,630 --> 00:10:49,590 slash. 136 00:10:49,650 --> 00:10:57,720 So here we can create different HTML templates and recall call it as home or index. 137 00:10:57,720 --> 00:11:00,210 So let's make it home as that. 138 00:11:00,420 --> 00:11:06,480 And now let's give some snippet here and h one, let's say welcome. 139 00:11:08,670 --> 00:11:09,240 Home. 140 00:11:09,240 --> 00:11:13,890 And let's give it P tag here and let's ask some dummy text here. 141 00:11:13,920 --> 00:11:16,020 Now, let's go ahead and render this. 142 00:11:16,350 --> 00:11:20,280 We can post this video and give you a set, a challenge. 143 00:11:20,310 --> 00:11:21,780 The process is the same. 144 00:11:21,780 --> 00:11:23,880 The difference here is a URL. 145 00:11:24,030 --> 00:11:27,600 So here I'm going to be the home page. 146 00:11:27,620 --> 00:11:33,390 That's going to be the log in so we can copy this one for the home page. 147 00:11:33,390 --> 00:11:36,870 So let's pull up this one and see where it ends. 148 00:11:36,870 --> 00:11:37,680 So here you go. 149 00:11:37,680 --> 00:11:39,570 Let me copy the comment also. 150 00:11:39,600 --> 00:11:44,640 And now down here, change this one to home page, home page. 151 00:11:44,640 --> 00:11:46,560 And now let's change this 1 to 4 slash. 152 00:11:46,560 --> 00:11:48,690 Remember for a slot is homepage. 153 00:11:48,690 --> 00:11:53,130 So instead of this one, I'm going to render the home and that is it. 154 00:11:53,250 --> 00:11:59,370 So now let's try to clear the console and run the server again. 155 00:11:59,460 --> 00:12:06,420 So let's go to homepage and indeed we have the page being rendered as that. 156 00:12:06,780 --> 00:12:11,280 The last step is let's also render the register page. 157 00:12:11,280 --> 00:12:18,210 So only one m so the same process, select that collapse eight and then let me select all here are going 158 00:12:18,210 --> 00:12:29,490 to be the register page register and now instead of this one, I'm going to be as register dot HTML 159 00:12:29,490 --> 00:12:36,480 and the endpoint or the URL is going to be as register and now have a look. 160 00:12:36,480 --> 00:12:44,520 When I make use of for slash register, I could see that is pending because we need to restart the server 161 00:12:44,520 --> 00:12:48,180 because we have made changes to the code and that is it. 162 00:12:48,180 --> 00:12:54,030 So now let's check it out, refresh it and this is Register Page.