WEBVTT 00:01.830 --> 00:07.680 So let's get started building the page, and the first page I want to build is to sell a single product, 00:07.690 --> 00:11.940 in other words, a one time purchase and in the course resources. 00:11.940 --> 00:16.560 For this lecture, you'll find an image called Widget PMG. 00:16.950 --> 00:22.080 And you can see that I've already downloaded that, already copied it into a folder called Static at 00:22.080 --> 00:23.430 the root level of my project. 00:23.700 --> 00:26.640 And that's where I'm going to put the images for anything I want to sell. 00:27.510 --> 00:32.340 So, of course, that means that we need to open our rootstock go file, which I have already done, 00:32.340 --> 00:35.100 and we need to be able to serve static content. 00:35.130 --> 00:40.320 Now, we could embed this into our project the same way that we embedded our templates, but I find 00:40.320 --> 00:41.250 that a little awkward. 00:41.250 --> 00:45.020 And right now I'm just going to serve them from an external directory. 00:45.660 --> 00:53.700 So the first thing I'll do is after my existing routes, I'll create a variable called file server and 00:53.700 --> 01:00.270 I'll use the assignment operator and I'll simply create that using http dot file server right there. 01:01.140 --> 01:09.090 And the directory I want to serve is these are not static. 01:10.380 --> 01:18.150 OK, so that creates the variable and I will handle any request to slash static so much start handbell 01:19.260 --> 01:20.910 and I want to look for the path. 01:20.910 --> 01:30.310 Static slash so slash static slash star and we'll use htp dot prefix as is the norm. 01:30.690 --> 01:35.640 We're going to strip off slash static and hand it file server. 01:37.860 --> 01:43.680 So once that re compiles and it's re compiled, I should be able to hit that image by going to my web 01:43.680 --> 01:49.310 browser and typing in localhost port for thousands of static widget dumping. 01:50.130 --> 01:51.960 Now let's create our necessary template. 01:52.770 --> 02:00.130 So inside the templates folder, I'll create a new file and I will call that file just by dash once 02:00.150 --> 02:02.580 dot page dot go html. 02:03.960 --> 02:05.240 And it's a very simple file. 02:06.360 --> 02:13.470 First of all, it'll use the template base and we'll handle the data and we'll define the title. 02:16.050 --> 02:23.180 So the title block and all overwrite the default content by putting in by one widget. 02:23.400 --> 02:26.370 And no, I'm not sure what a widget is and it doesn't matter. 02:27.390 --> 02:33.000 Then we'll end that and then we'll have our content block to find content 02:37.680 --> 02:39.720 and I'll put my end in now so I don't forget. 02:40.140 --> 02:44.060 And and we'll do pretty much the same thing we did before. 02:44.070 --> 02:46.760 So for right now, let's just get it the page up and running. 02:46.780 --> 02:51.200 I'll put it in H2 and I'll give it a class of try that again. 02:51.900 --> 03:03.510 Class of, say, emergen top three and text center and I'll use the title by one and I'll capitalize 03:03.510 --> 03:14.220 that one widget and close my eyes to kind of put a horizontal rule in and then I'll put in the image. 03:14.400 --> 03:29.760 So image source equals static slash widget PMG and we'll give it all text of just widget and the class 03:29.760 --> 03:40.200 will just use our boot straps class, say image dash fluid, rounded emacs dash auto and dash block. 03:44.080 --> 03:51.700 OK, so let's create a handler that serves this route up, so we'll go to our handlers right here, 03:51.700 --> 03:54.460 handlers dog go and I'll hide my terminal. 03:55.840 --> 03:59.320 And at the very bottom of this file, I'll put a new function in there. 03:59.740 --> 04:01.120 And it's a very simple handler. 04:01.120 --> 04:03.380 So func, I'll call it up. 04:03.760 --> 04:09.910 The receiver is an application and I'll call it charge once and it's a handler. 04:09.920 --> 04:15.010 So WHV don't response writer and a pointer to a request 04:18.370 --> 04:21.100 and all will do for now is serve that template. 04:21.370 --> 04:32.410 So we'll say if error is assigned the value of our render template and we'll hand it response or the 04:32.440 --> 04:38.160 request and we'll call this charge Dasch once, which is what I call that template. 04:38.300 --> 04:39.360 I called it by once. 04:39.370 --> 04:48.220 Try that again, VIDAZA once and I'll give it a Nhill for the data for now and then check for an error. 04:48.400 --> 04:49.750 Error is not equal to nil. 04:50.200 --> 04:59.470 Then we'll just say after error log print line error and I'll give it its comment. 05:02.980 --> 05:10.690 Charge once displays the page to buy one widget and let's go back to our roots and set up a route to 05:10.690 --> 05:10.890 that. 05:12.190 --> 05:20.200 So I'll put it right before my static declaration marks get and I'll just call this charge dush once 05:22.000 --> 05:22.960 and it handle. 05:22.960 --> 05:25.210 It's handled by Abda to charge once. 05:26.470 --> 05:30.700 OK, so if everything went according to plan they should rebuild. 05:30.880 --> 05:31.390 Good. 05:31.390 --> 05:39.550 And I should be able to go back to my web browser and just change the URL from virtual terminal to charge 05:39.550 --> 05:41.860 Dasch once there is. 05:41.900 --> 05:49.300 So we have one one title and we have our widget image and now we need to put together a form and create 05:49.300 --> 05:52.090 the necessary logic to bind this one widget. 05:52.420 --> 05:54.850 So we'll get started on that in the next lecture.