1 00:00:00,870 --> 00:00:06,300 All right, things are starting to come along, but so far all we're doing when we show pages is writing 2 00:00:06,300 --> 00:00:11,110 a little string of text to the browser window, and that's not exactly useful. 3 00:00:11,490 --> 00:00:15,570 So let's look at how we can actually serve real Web pages. 4 00:00:16,080 --> 00:00:22,000 And to do that, we're going to use a package that's built into the standard library called HTML template. 5 00:00:22,500 --> 00:00:24,560 But before we do that, let's clean things up. 6 00:00:24,570 --> 00:00:29,790 So I'm going to get rid of this inside the about handler and leave that empty. 7 00:00:30,390 --> 00:00:35,960 I'll get rid of this inside the home template and leave that the home page handler and leave that empty. 8 00:00:36,510 --> 00:00:41,970 I don't need these add and divide values which were serving no real purpose except to show how it functions 9 00:00:41,970 --> 00:00:42,270 work. 10 00:00:42,900 --> 00:00:45,750 So let's get through here and get rid of this. 11 00:00:47,100 --> 00:00:49,920 And we don't have don't need this handler anymore. 12 00:00:49,950 --> 00:00:57,600 So so far we just have two handlers to Handler Funk's inside the main menu that point to two functions 13 00:00:57,600 --> 00:00:58,350 that do nothing. 14 00:00:58,380 --> 00:01:03,360 And these functions both take a response writer and a request object, a pointer to a request object, 15 00:01:03,720 --> 00:01:05,880 as all handlers must. 16 00:01:06,210 --> 00:01:11,550 So now let's go back over here or delete this binary because they don't need it anymore. 17 00:01:12,120 --> 00:01:14,550 And I'll create a new file and a new folder. 18 00:01:14,550 --> 00:01:16,080 Actually, I'm going to create a new folder. 19 00:01:17,040 --> 00:01:21,990 So new directory and I'm going to call this templates. 20 00:01:22,320 --> 00:01:25,710 And this is where our HTML templates will live. 21 00:01:26,400 --> 00:01:33,990 So inside of that, I'll create two templates, one called Home Page Template, and I'm going to use 22 00:01:33,990 --> 00:01:35,340 that extension HTML. 23 00:01:35,340 --> 00:01:38,580 If you want to use HTML or something like that, you feel free to do so. 24 00:01:39,420 --> 00:01:45,390 But I like to keep things organized and point out the fact that this will eventually be a and a Goldwing 25 00:01:45,390 --> 00:01:47,610 template and not a standard HTML file. 26 00:01:47,620 --> 00:01:55,170 So I'll create that and I'll create another template called about vote page template. 27 00:01:55,920 --> 00:02:01,040 So these are both inside of templates directory in the root project of my application. 28 00:02:01,590 --> 00:02:04,380 So let's go to the home one first and I'm going to create a template. 29 00:02:04,380 --> 00:02:08,370 So I'm using Emet and if you're not familiar with Emet, you should look it up. 30 00:02:08,370 --> 00:02:15,420 It's a nice little extension available for both Visual Studio Code and built into GEP brains. 31 00:02:15,600 --> 00:02:25,150 Langue or goaland HGP sorry HTML five and there that creates an empty template for me. 32 00:02:25,320 --> 00:02:26,790 So this is a standard template. 33 00:02:26,790 --> 00:02:30,180 It's just a little bit of HTML in here. 34 00:02:30,180 --> 00:02:31,530 I'll just put each one. 35 00:02:32,220 --> 00:02:36,180 This is the homepage just so I can tell what it is. 36 00:02:38,190 --> 00:02:41,130 And over here under a boat I'll do the same thing. 37 00:02:41,370 --> 00:02:45,150 HTML five and I'll call this H1. 38 00:02:46,230 --> 00:02:49,830 This is the both page. 39 00:02:49,860 --> 00:02:50,300 All right. 40 00:02:50,310 --> 00:02:51,690 So I've created two templates. 41 00:02:52,080 --> 00:02:53,490 They're just HTML. 42 00:02:53,490 --> 00:02:55,170 They're not doing anything dynamic. 43 00:02:55,200 --> 00:02:56,200 They will eventually. 44 00:02:56,220 --> 00:02:57,240 So bear with me. 45 00:02:57,240 --> 00:02:58,700 But right now I've just created those. 46 00:02:59,190 --> 00:03:06,720 Now I need to tell these handlers back in main go to render those templates and I need to render them 47 00:03:06,720 --> 00:03:10,320 as actual goaland templates, which means I can pass them data. 48 00:03:10,320 --> 00:03:11,910 I can have dynamic content in there. 49 00:03:11,940 --> 00:03:13,260 We're not going to do that in this election. 50 00:03:13,260 --> 00:03:14,100 We're just this election. 51 00:03:14,100 --> 00:03:15,600 We're just going to get the pages up and running. 52 00:03:16,350 --> 00:03:17,850 But how do I do that? 53 00:03:17,910 --> 00:03:22,830 Well, in order to do that, I need to render the template and I'm going to render a template here and 54 00:03:22,830 --> 00:03:24,240 I'm going to render a template here. 55 00:03:24,450 --> 00:03:28,650 And if I have a 500 more pages, I'm going to render that template 500 times. 56 00:03:28,920 --> 00:03:31,740 This seems like a really good place to put a function in there. 57 00:03:31,740 --> 00:03:38,430 So I'm going to create a function func render template and it's going to take two arguments, a W, 58 00:03:38,580 --> 00:03:45,690 which is an al-Qaeda response writer, and it's also going to take a string naming the template I want 59 00:03:45,690 --> 00:03:46,200 it to render. 60 00:03:46,200 --> 00:03:51,630 So I'll call that tampoe and it's just type string and it doesn't actually return anything because it 61 00:03:51,630 --> 00:03:56,520 writes everything to the the response writer. 62 00:03:56,640 --> 00:03:58,710 So what am I going to do inside this function? 63 00:03:58,710 --> 00:04:04,440 Well, I'm going to first of all, pass the template whenever I'm going to use a template in go like 64 00:04:04,440 --> 00:04:05,370 the HTML template. 65 00:04:05,370 --> 00:04:07,380 We're going to look at a different template again later on. 66 00:04:07,380 --> 00:04:09,810 But right now we're going to use one that's part of the standard library. 67 00:04:10,140 --> 00:04:10,980 I need to pass it. 68 00:04:10,980 --> 00:04:16,440 So I'm going to create a variable past template and that is going to be equal to something. 69 00:04:16,440 --> 00:04:21,990 But it also takes a second argument, which I'm getting Nawfal right now, and that is going to be assigned 70 00:04:21,990 --> 00:04:29,670 the values of built into the template system right in to go template is the name of the package DOT 71 00:04:30,360 --> 00:04:33,240 and I'm going to pass files. 72 00:04:33,910 --> 00:04:35,820 So that's built into the application. 73 00:04:35,820 --> 00:04:43,470 And a better backspace because they didn't do the import for me template dot pass files and now it's 74 00:04:43,470 --> 00:04:50,690 important up here for me, so I don't have to do that manually and that just takes a path dot slash, 75 00:04:51,000 --> 00:04:53,190 templates slash. 76 00:04:53,370 --> 00:04:56,010 And then I'm going to append to that the name of the template. 77 00:04:56,400 --> 00:04:59,130 OK, so this actually. 78 00:04:59,530 --> 00:05:04,690 Loads of file from the root level of my application, which is what DOT means, so that's inside this 79 00:05:04,690 --> 00:05:05,740 hollow world folder. 80 00:05:06,520 --> 00:05:10,480 Inside of that, there's a directory called Templates, which is this folder right here. 81 00:05:10,930 --> 00:05:15,160 And I'm going to take the argument of the template I want to pass as a string. 82 00:05:15,460 --> 00:05:15,790 Great. 83 00:05:16,000 --> 00:05:17,520 So I've got that. 84 00:05:17,770 --> 00:05:18,670 Now, what do I do with it? 85 00:05:18,880 --> 00:05:26,260 Error is assigned first template, which is the variable I just created, and it actually has some some 86 00:05:26,350 --> 00:05:27,310 functions built into it. 87 00:05:27,310 --> 00:05:28,720 And the one I want is execute. 88 00:05:30,400 --> 00:05:34,470 So I'm going to execute that template and I'm going to pass it. 89 00:05:34,480 --> 00:05:39,190 The response writer that I want it to pass the template and write to and I'm going to pass it. 90 00:05:39,190 --> 00:05:44,200 No data, no OK, if error is not equal to nil. 91 00:05:44,230 --> 00:05:47,640 Now my standard error, checking what I want to do. 92 00:05:47,650 --> 00:05:51,400 Well, let's just write to the error, to the standard log file. 93 00:05:51,410 --> 00:05:54,790 So we'll just say format, print line 94 00:05:57,460 --> 00:06:00,010 and I'll pass in an error or the error message. 95 00:06:00,010 --> 00:06:07,120 Error, error, error messages aren't supposed to start with capital letters, error per second template. 96 00:06:07,120 --> 00:06:11,920 And then I'll actually write the error itself so I can see what it is if there happens to be one and 97 00:06:11,920 --> 00:06:12,440 I'll return. 98 00:06:12,970 --> 00:06:13,380 All right. 99 00:06:13,510 --> 00:06:19,030 So now I have this function here render template that allows me to basically take a response writer 100 00:06:19,810 --> 00:06:25,060 and the name of a template I want to pass, pass it and read it to the browser window. 101 00:06:25,090 --> 00:06:25,950 So how do I do that? 102 00:06:25,990 --> 00:06:30,430 Well, up here, let's give it a try in the homepage, render a template. 103 00:06:30,490 --> 00:06:34,360 I'm going to call that function and it lit up there so you can see that it's actually being called now 104 00:06:35,800 --> 00:06:37,550 and I'm going to pass it. 105 00:06:37,570 --> 00:06:43,750 My response writer and the name of the template I want to pass, which is home page of template. 106 00:06:44,620 --> 00:06:47,460 So that should actually work just for the home page. 107 00:06:47,470 --> 00:06:54,370 So I'm not doing anything about yet, but let's open up a terminal window, clear the screen and run 108 00:06:54,370 --> 00:06:55,750 our main go package. 109 00:06:56,920 --> 00:06:59,020 Go, run, main go. 110 00:07:02,340 --> 00:07:09,090 It's running, so let's go to our browser window and open up a new browser window and go to localhost 111 00:07:09,750 --> 00:07:12,320 party and there it is. 112 00:07:12,720 --> 00:07:15,230 So it passed that past that home page template. 113 00:07:15,960 --> 00:07:18,280 So let's go back here and see if we can do something else. 114 00:07:19,080 --> 00:07:23,530 I'm going to open up that homepage again and I'm going to give it a paragraph of text underneath it. 115 00:07:27,900 --> 00:07:30,600 This is some text, so I save that. 116 00:07:31,410 --> 00:07:33,900 Go back, reload the page and there it is. 117 00:07:33,930 --> 00:07:35,160 That seems to work very well. 118 00:07:35,910 --> 00:07:39,990 So we can do the same thing, of course, for the about page, which is a different template. 119 00:07:40,320 --> 00:07:42,870 And I forgot to close that H1 tag, so I better do that. 120 00:07:44,100 --> 00:07:49,710 Go back to my main application and I'm just going to copy this, paste it in here. 121 00:07:51,090 --> 00:07:55,760 But this time I want to render the about page now because I change the actual function. 122 00:07:55,770 --> 00:08:01,710 I can't just come over here and say about I can, but all it's going to give me is a blank screen because 123 00:08:01,920 --> 00:08:04,010 this function has not yet been compiled. 124 00:08:04,020 --> 00:08:11,160 So I need to stop the application, rerun it, go back to my browser and reload the about page. 125 00:08:11,160 --> 00:08:13,160 And there's that, this is the about page. 126 00:08:13,830 --> 00:08:17,580 So that's the basic logic for how we can render templates. 127 00:08:17,580 --> 00:08:18,680 And it's very straightforward. 128 00:08:19,080 --> 00:08:26,310 There's a as I said earlier, Go has an extremely robust and rich standard library, and one of the 129 00:08:26,310 --> 00:08:30,930 things built into it is the ability to render templates with dynamic content. 130 00:08:30,960 --> 00:08:32,970 Now, we haven't passed any data to these yet. 131 00:08:32,980 --> 00:08:34,350 We're going to do that very shortly. 132 00:08:35,070 --> 00:08:37,470 But there's a couple of other things I want to get out of the way first. 133 00:08:37,920 --> 00:08:44,550 So that's how you can render HTML templates and the templates themselves have some logic built in. 134 00:08:44,550 --> 00:08:48,210 You can range over data, you can make decisions about what data to show. 135 00:08:48,960 --> 00:08:51,030 It's an extremely powerful system. 136 00:08:51,510 --> 00:08:55,290 Now we're going to go through this templating system, the one that's built in to go first. 137 00:08:55,290 --> 00:09:01,530 And then a little bit later on, we'll look at a different template engine to render our content. 138 00:09:01,830 --> 00:09:02,730 But that's enough for now. 139 00:09:02,730 --> 00:09:08,160 In the next lecture, we'll look at how we can structure things a little more logically, and we'll 140 00:09:08,160 --> 00:09:11,190 also look at how we can pass some data to templates. 141 00:09:11,670 --> 00:09:12,480 That's enough for now.