1 00:00:00,580 --> 00:00:07,480 Now that we have finished configuring our server to serve static files, let's see how we are going 2 00:00:07,480 --> 00:00:10,180 to render HTML templates. 3 00:00:10,180 --> 00:00:18,750 And for this, you can use any CSS framework, for example, bootstrap boom or tearing CSS. 4 00:00:18,760 --> 00:00:26,650 But lucky for us we are going to use this template and this is what we designed and the CSS of this 5 00:00:26,650 --> 00:00:30,820 course and I'll provide all the templates for you. 6 00:00:30,880 --> 00:00:36,550 But before we get into that, let's take note about this point. 7 00:00:36,580 --> 00:00:41,590 Point number one is we are going to have two endpoints or two. 8 00:00:41,590 --> 00:00:46,600 You are l The first one will point to the actual API. 9 00:00:46,630 --> 00:00:51,730 For example, if we want to create a post, we need a backend API. 10 00:00:51,730 --> 00:00:59,650 So this one is for the back end and we are going to have another route or you are not going to be the 11 00:00:59,650 --> 00:01:03,610 client side, meaning the front side of the application. 12 00:01:03,610 --> 00:01:10,540 So let's say that if I want to render a form I'm going to target you are on the front end. 13 00:01:10,540 --> 00:01:14,170 So this one is for the front end part of the application. 14 00:01:14,260 --> 00:01:21,010 And lastly, before we can render any template, we need to create a route for this. 15 00:01:21,220 --> 00:01:25,600 So the first template that you are going to render is this one. 16 00:01:25,600 --> 00:01:29,830 We are going to use our server to render these templates. 17 00:01:30,010 --> 00:01:37,420 But before we get into that, let's fix this inside this server file for this line of code. 18 00:01:37,420 --> 00:01:44,140 Let's bring forward slash before the public, meaning we are targeting the public folder. 19 00:01:44,230 --> 00:01:49,960 And lastly for the view folder is called Views but not view. 20 00:01:49,960 --> 00:01:55,390 So let's add as to it, name it as it is, otherwise it will not work. 21 00:01:55,630 --> 00:01:56,260 All right. 22 00:01:56,260 --> 00:02:02,830 So the first step is that we need to know the template that we are going to render and I'll provide 23 00:02:02,830 --> 00:02:04,030 the template for you. 24 00:02:04,030 --> 00:02:10,870 So I'm going to copy the template for the home page and our place it inside the views folder. 25 00:02:10,930 --> 00:02:15,340 And I'm going to rename the extension to edges. 26 00:02:16,660 --> 00:02:18,440 So why eggs? 27 00:02:18,520 --> 00:02:27,430 Well, if we stick to raw HMO, our life is going to be difficult because unless we write custom clients 28 00:02:27,430 --> 00:02:32,390 or JavaScript before we can interact with the data inside the HTML. 29 00:02:32,410 --> 00:02:35,810 But with Edge is our life is going to be pretty easy. 30 00:02:35,830 --> 00:02:36,280 All right. 31 00:02:36,280 --> 00:02:42,230 So now that we have the template to render, the next step is that we need to create a route for that. 32 00:02:42,250 --> 00:02:44,650 So let's get back to the server. 33 00:02:44,680 --> 00:02:49,430 This is where I want to create a route to render the homepage. 34 00:02:49,450 --> 00:02:56,620 So here I'm going to add a comment by saying render home page, and because it's a route that would 35 00:02:56,620 --> 00:02:59,050 make use of app dot gates. 36 00:02:59,440 --> 00:03:06,800 And for this we are going to pass in the endpoint and this endpoint will point to the client side. 37 00:03:06,820 --> 00:03:13,240 So I'm going to be forward slash because it's a home page and I pass in the callback function. 38 00:03:13,270 --> 00:03:19,420 I'll have access to rec and response and my function as that. 39 00:03:19,480 --> 00:03:28,300 And to be able to render a template, we are going to use a special method on the response as response 40 00:03:28,300 --> 00:03:29,470 dot render. 41 00:03:29,470 --> 00:03:32,650 So make use of response dot render. 42 00:03:33,830 --> 00:03:38,080 And this takes in the template that we want to render. 43 00:03:38,090 --> 00:03:41,710 And for us, our template is inside the views. 44 00:03:41,720 --> 00:03:46,120 So we are going to use the index dot edges. 45 00:03:46,130 --> 00:03:49,520 That is what inside the views folder. 46 00:03:49,640 --> 00:03:55,400 So with this one if we visit look lookup host call on 9000. 47 00:03:55,520 --> 00:04:02,150 You're going to see the template being rendered as that and this is the template. 48 00:04:02,270 --> 00:04:06,200 There is no or the images are not being saved. 49 00:04:06,200 --> 00:04:09,350 So let's go ahead and then fix that. 50 00:04:09,590 --> 00:04:18,350 Remember, we are requiring the CSS inside the HTML with this path, but with this one there is no path 51 00:04:18,350 --> 00:04:19,790 that matches this. 52 00:04:19,790 --> 00:04:28,580 So we are going to create a folder inside the public and call it a CSS and I'm going to copy the CSS 53 00:04:28,580 --> 00:04:34,700 for the home page and I'm going to place it inside the CSS folder as that. 54 00:04:34,700 --> 00:04:38,840 And the next folder I want to create is called Images. 55 00:04:39,470 --> 00:04:40,160 Perfect. 56 00:04:40,160 --> 00:04:48,620 So now let's go ahead and then require the CSS inside our index add edges and this is where we are going 57 00:04:48,620 --> 00:04:50,630 to require the CSS. 58 00:04:50,630 --> 00:04:52,970 So let's remove everything from here. 59 00:04:53,660 --> 00:05:01,370 Remember, because the CSS is inside the public, we are going to navigate into the CSS. 60 00:05:01,370 --> 00:05:07,310 So going to be asked for a slash CSS forward slash style. 61 00:05:07,970 --> 00:05:09,590 Don't see us. 62 00:05:09,830 --> 00:05:10,280 All right. 63 00:05:10,280 --> 00:05:14,360 So let me check again if the name is Tiger, those cases. 64 00:05:14,360 --> 00:05:17,180 And there we go with this one. 65 00:05:17,180 --> 00:05:20,000 If I reverse the page, let's have a look. 66 00:05:20,000 --> 00:05:24,140 And we can see we have the case being applied. 67 00:05:24,140 --> 00:05:30,710 But our logo, which is the image, is not being saved because there is no image for that. 68 00:05:30,710 --> 00:05:39,170 So let's get back to the public and I'm going to place the logo inside the images folder as that. 69 00:05:39,170 --> 00:05:45,140 So next step is that let's go ahead and require the image inside the index dot. 70 00:05:46,160 --> 00:05:55,160 And this is a link for the image and I'm going to make this off for a slash images forward slash logo, 71 00:05:55,370 --> 00:05:59,120 dot P and G, And let's have a look. 72 00:05:59,710 --> 00:06:02,230 And you can see it worked fine. 73 00:06:02,260 --> 00:06:06,780 The next step is about the background of the header. 74 00:06:06,790 --> 00:06:13,810 You can see for the final one we have this image and the name of the image is called header BG. 75 00:06:13,840 --> 00:06:18,700 And I'm going to copy the image and place it inside the images folder. 76 00:06:18,730 --> 00:06:24,540 And for this one, I use the image inside the case of the home page. 77 00:06:24,550 --> 00:06:30,260 So under CCIS, let's locate the image, which is this one. 78 00:06:30,280 --> 00:06:33,760 So with this one, I'm going to remove the dot. 79 00:06:33,790 --> 00:06:36,340 Meaning I'm pointing into the public. 80 00:06:36,340 --> 00:06:42,310 And in there I have a folder called images and I have the actual file when I save it. 81 00:06:42,340 --> 00:06:43,540 Let's have a look. 82 00:06:43,630 --> 00:06:46,700 And you can see it worked fine. 83 00:06:46,720 --> 00:06:51,310 So the next video, let's go ahead and render the log in form.