WEBVTT 00:01.800 --> 00:06.120 So now that we appear to have a means of rendering templates, let's go build some templates. 00:06.150 --> 00:12.270 So what I'm going to do is go over to my Web browser and go to bootstrap and I'm going to click on the 00:12.270 --> 00:13.520 getting started button. 00:13.530 --> 00:19.620 So I'm on get bootstrap dotcom the home page and I'll click on Getting Started and just scroll down 00:19.620 --> 00:26.610 to find the starter template and I'll copy that and go back to Visual Studio Code and I'll open up that 00:26.610 --> 00:30.840 based on layout html file I have inside the templates folder. 00:30.840 --> 00:35.380 Inside the web folder that I see, I have a missing quotation marks. 00:35.380 --> 00:40.830 So let's put that in and let's paste that right in there at the top here and we'll make a few changes. 00:41.700 --> 00:46.440 First of all, I'll get rid of these because I'll get these all off of this CDN and I'll get rid of 00:46.440 --> 00:51.450 this because I'll get that off of a CDN and I'll save this. 00:53.070 --> 00:58.130 And I want to associate HTML files with GULLING templates. 00:58.230 --> 00:59.960 So let's figure out how we do that. 01:01.170 --> 01:04.060 So let's see if there's any extensions that'll fix this for us. 01:04.110 --> 01:06.470 I'll come in here and I'll search for go. 01:07.830 --> 01:08.510 Let's see. 01:08.520 --> 01:10.050 Go go nightly. 01:10.830 --> 01:11.970 Let's try go template. 01:14.570 --> 01:16.760 Go template support, I'm going to install that. 01:18.980 --> 01:24.890 OK, so that's now installed and now I'm going to close this and make the change there. 01:24.890 --> 01:25.730 But it will in a moment. 01:26.030 --> 01:28.250 Let's go to our view menu and choose. 01:28.250 --> 01:29.420 You may not have to do this. 01:29.420 --> 01:30.890 If you have the status bar at the bottom. 01:30.890 --> 01:32.270 You don't have to turn it on like I am. 01:32.270 --> 01:38.360 But I'm going to the view menu choosing appearance show, status bar and I'll click plaintext where 01:38.360 --> 01:43.340 it's here and see if there's anything for go go template right there. 01:44.300 --> 01:47.570 And that seems to take care of it closes. 01:48.980 --> 01:50.300 That's a little closer anyway. 01:50.820 --> 01:54.810 OK, so now I have this template, but it's not exactly what I want. 01:54.830 --> 02:02.450 So let's go back to our Web browser and back to the top of this and find the link. 02:02.460 --> 02:02.930 Here it is. 02:02.930 --> 02:08.390 I want to get the keys for Bootstrap, so I'll copy that and come back here and I'll paste it in the 02:08.390 --> 02:12.830 head and then I'll go back here and find the JavaScript for it. 02:12.920 --> 02:15.020 So I'll choose this bundle right here. 02:15.030 --> 02:16.070 That'll probably do the trick. 02:16.100 --> 02:20.320 Copy that and I'll put it just before the closing HTML. 02:21.800 --> 02:27.290 Now, the other thing I want to do is I don't want the title Hello World at every page, so delete that. 02:27.440 --> 02:33.530 And inside of the title tags I'll define a block, which I'll call title and I'm going to pass data 02:33.530 --> 02:33.980 to it. 02:33.980 --> 02:40.220 So I'll put the dot and then I'll give it a blank line and put end down here in the body. 02:40.220 --> 02:49.940 I'll get rid of this hello world and I'll put in div class equals container and close. 02:50.060 --> 02:56.600 Do do an inside of that I'll put a do class equals row and close that div. 03:00.610 --> 03:07.440 And inside that that'll put a day of class equals good call sufficient for our purposes and close that 03:07.460 --> 03:12.180 divide in the middle of that third nested div. 03:12.640 --> 03:19.290 I'll put in a block, which I'll call content, and I'll pass data to it and I'll just give it its end 03:19.290 --> 03:20.620 right here on the same line. 03:20.850 --> 03:27.720 OK, now the other thing I'm going to want to do at some point is before the closing HTML tag are probably 03:27.720 --> 03:30.330 going to have my own JavaScript, so I'll put a block in there. 03:30.880 --> 03:37.880 I'll say block or call it jazz and I'll pass data to it and I'll close with it. 03:38.250 --> 03:43.650 OK, so there's my bass template and that's enough for now. 03:43.650 --> 03:46.300 Will will be modifying this as time goes on. 03:46.350 --> 03:52.410 Now I need a template to render my virtual terminal, so I'll put a new file in there and I'll call 03:52.410 --> 03:55.620 it, say, terminal page dot temple. 03:56.100 --> 04:02.980 And this will use the base template we just find so template place and hand data to it. 04:03.060 --> 04:07.050 So now we can pass data to this template and we'll define the title. 04:07.380 --> 04:09.510 So define title. 04:09.660 --> 04:16.230 That's the block we specified in our base layout and I'll just call this virtual terminal 04:18.960 --> 04:23.340 and that and move this over. 04:25.920 --> 04:29.460 And I will define the content, define content. 04:31.800 --> 04:41.180 And they're all just for now, say to virtual terminal two and close it and I'll put it in empty just 04:41.280 --> 04:46.500 one as well, I don't need to, but I'm going to be putting JavaScript in here before too long to find 04:46.530 --> 04:47.190 James 04:50.080 --> 04:50.350 and. 04:51.290 --> 04:52.740 OK, so now I have my templates. 04:53.560 --> 04:55.110 Let's go back to our handlers. 04:55.740 --> 05:00.300 And instead of printing to the terminal, let's actually render that page. 05:00.710 --> 05:02.910 So I'll delete this info log line. 05:03.780 --> 05:04.920 So render the template. 05:04.920 --> 05:09.000 And I recall that the render template function returns an error, so I'll check for that and I'll do 05:09.000 --> 05:18.330 it the shorthand way if error equals Abdon render template and I hand it my response writer, my request, 05:18.510 --> 05:21.120 the name of the template I want, but just the first part. 05:21.120 --> 05:22.170 And that's terminal. 05:24.030 --> 05:26.560 No data and nothing else. 05:26.580 --> 05:28.020 So no parshall's yet. 05:28.020 --> 05:33.510 So we'll do that and close it with a semicolon and say error is not equal to nil. 05:36.810 --> 05:38.160 Then after error. 05:38.160 --> 05:42.180 Log print line print here. 05:42.990 --> 05:48.650 OK, now if everything worked as expected, I should be able to start my application and hit that page. 05:48.660 --> 05:57.450 So let's open the terminal for open our terminal, clear the screen, go run seyoum dot slash cmd slash 05:57.450 --> 05:57.740 web. 06:00.720 --> 06:02.500 Everything compiled that's promising. 06:02.520 --> 06:10.170 Let's go back to our Web browser and go to the tab, which I still have open, I just reload this and 06:10.170 --> 06:15.030 there is a virtual terminal, not very pretty, but now we are successfully rendering a template. 06:15.900 --> 06:19.860 Now, there's one of the thing I want to draw to your attention here, because it's going to get irritating 06:19.860 --> 06:22.700 starting and stopping your application all the time. 06:22.710 --> 06:27.750 So go back to your your ID and stop your application. 06:28.050 --> 06:30.180 And I'm going to hide that status because I don't like it. 06:30.780 --> 06:37.230 So you appearance hide the status bar, that's better. 06:37.920 --> 06:43.270 And now go to your Web browser and you'll find a link to this on the course resources for this page. 06:43.890 --> 06:49.800 This is a little application that will automatically reload and recompile our application any time we 06:49.800 --> 06:51.850 make a change to the source code. 06:52.110 --> 06:54.330 So if you scroll down here, it's called air. 06:54.450 --> 06:55.860 It shows you how to install it. 06:55.860 --> 07:02.010 And I use this one right here, prefer install S.H. the first one, and that will install it into the 07:02.010 --> 07:05.730 appropriate directory in your gopalnath beam signature. 07:06.420 --> 07:08.640 So copy that, paste it into your terminal window. 07:08.640 --> 07:13.620 And when you're done, you need to create a configuration file and you'll find that on the course resources 07:13.620 --> 07:14.600 for this lecture as well. 07:14.610 --> 07:16.110 So I already have installed. 07:16.110 --> 07:22.110 So I'm going to go back to my ID and I'm going to create a new file right at the root level of my application. 07:22.410 --> 07:27.120 And it has to be called dot er dot com. 07:27.330 --> 07:32.780 So it starts with a dot and it has a dot after the word error and t o m l. 07:33.810 --> 07:39.870 So I've already copied the contents of dot er html to my clipboard and I'll just paste it in here and 07:39.870 --> 07:41.640 you could read through this to your heart's content. 07:41.640 --> 07:46.860 It's got all kinds of comments that tells you how everything works, but get it in there, make sure 07:46.860 --> 07:53.280 it's at the root level of your application and then to run your application instead of typing, go run 07:53.280 --> 07:55.310 dot slash cmd web. 07:55.320 --> 07:59.850 You can just type error and that will actually compile a temporary binary. 08:00.000 --> 08:07.140 And any time I make a change, so let's say I go to main door, go and down here after flag pass, watch 08:07.140 --> 08:14.580 what happens down here in the terminal window after I put something in here like oh just say a log print 08:14.580 --> 08:14.970 line. 08:17.580 --> 08:20.780 Hello world it recompile it. 08:21.120 --> 08:25.890 So first time it failed because I was halfway through a command, but then it recompile it instantly 08:25.890 --> 08:28.940 afterwards and that's going to make working a lot simpler for you. 08:29.490 --> 08:31.980 So if you don't want to do that, it's absolutely not a requirement. 08:31.980 --> 08:37.680 You can just type the the go run dot slash cmd slash web and that'll work fine. 08:38.190 --> 08:42.160 But I like this because it automatically reloads my code as I work on it. 08:42.780 --> 08:45.420 All right, so we have the render function working. 08:45.420 --> 08:46.620 It's putting a template up. 08:46.620 --> 08:52.560 The next step is to put up a form that will use to actually charge someone's credit card and we'll get 08:52.560 --> 08:54.390 started on that in the next lecture.