WEBVTT 00:01.530 --> 00:06.270 So let's get started working on the front end and getting a form ready, and then we'll add the JavaScript 00:06.270 --> 00:09.210 in the back in logic in order to allow people to buy a subscription. 00:09.840 --> 00:12.390 So right now I'm looking at my handlers don't go file. 00:12.390 --> 00:17.280 And this is the front end, of course, and this is the handler that will display the bronze plan page. 00:17.970 --> 00:21.640 And last time we put an agent in there and let's make this a little more useful. 00:21.660 --> 00:22.800 Let's go to our database. 00:26.080 --> 00:33.070 And let's go to widgets and let's add a new item, so add new item by clicking the plus sign in my particular 00:33.070 --> 00:41.830 client and I'll call this bronze plan and the description will be get three widgets for the price. 00:43.940 --> 00:52.310 Of two every month, and I'll give it a really high inventory level and the price that will be twenty 00:52.310 --> 00:56.670 dollars a month, which is 20 zero zero and will create it today. 00:56.690 --> 00:57.860 So some date. 01:12.150 --> 01:13.320 And it'll have no image. 01:13.590 --> 01:21.060 OK, so there's a little bit more information we need to store in this database, and of course, that 01:21.060 --> 01:27.000 would be if we go back to our Web browser and we look at our Stripe Products page and I'm looking at 01:27.000 --> 01:32.840 my brons widget plan, I need to store the plan ID this right here in the database somehow. 01:33.330 --> 01:39.630 So what I'm going to do is go back to my I.D. and I'll open my terminal and I'll stop my application, 01:39.630 --> 01:43.260 which is running right now, and I'll generate a new migration. 01:44.610 --> 01:51.660 So I'm in the correct directory at my the top level of my application folder and I'll say so to generate 01:53.490 --> 01:57.090 fears and calls to widgets. 01:58.110 --> 01:59.460 And I'm going to add two columns. 02:00.120 --> 02:03.750 So I'll open the migration's folder and open my up migration. 02:05.010 --> 02:07.050 And what we have here is I want to add a column. 02:07.050 --> 02:08.490 So add underscore column. 02:09.840 --> 02:18.570 I'm going to add it to the widgets table and I'm going to call it, first of all, is recurring and 02:18.570 --> 02:24.990 that will be a boolean which actually gets translated to a tiny aren't on Maria DB in my school and 02:24.990 --> 02:26.040 we'll give it a default 02:30.030 --> 02:30.780 equal to zero. 02:32.050 --> 02:37.530 Then I'll duplicate that row and I'll add another column called Plan Underscore ID. 02:37.530 --> 02:42.810 And this is where that's actually four widgets, not applied widgets. 02:43.440 --> 02:45.870 And here's what I call a priority plan. 02:45.870 --> 02:48.480 Underscore ID and it will be a string. 02:50.680 --> 02:58.060 And it's going to have a default of an empty string, and this is where I'll store the plan for any 02:58.060 --> 02:59.740 recurring charge that I want to make. 02:59.800 --> 03:05.770 OK, so now we'll go to the ad calls to widget down and just say drop column. 03:09.110 --> 03:16.480 On widgets, Drub is recurring and duplicator and drop plan. 03:18.950 --> 03:25.140 OK, so let's clear a screen so to migrate and there it is. 03:25.210 --> 03:27.400 Now go back to my striped dashboard. 03:28.190 --> 03:29.990 I'm going to copy this ID. 03:33.310 --> 03:40.150 And go back to my database and refresh this screen, and now I have two new columns, so for my second 03:40.150 --> 03:45.980 one, I need to I'm going to give it the is recurring value of one and I'll paste in the planet. 03:46.510 --> 03:51.970 OK, now let's go back to our idea and open our models, because we'll have to add that information 03:51.970 --> 03:52.780 to our models. 03:55.360 --> 04:06.400 So that's under internal models, models go and find widget, and I will add right here is recurring, 04:09.100 --> 04:14.960 which will be a boolean and in Jason our call that is recurring. 04:16.870 --> 04:23.220 And then on the next line, I'll have plan ID, which is a string. 04:23.530 --> 04:31.980 And in Jason, I'll call that plan, underscore ID, format this and hide my terminal and let's find 04:31.990 --> 04:36.570 the get widget functionality, get widget. 04:38.260 --> 04:49.450 So after image I will say is recurring and plan id and that with a comma and after image when I scan 04:49.450 --> 05:00.760 the row will scan it into widget is recurring and widget planetree give it a comma. 05:01.090 --> 05:07.840 OK, so now we have a way of getting information out of the database and doing something with it. 05:08.800 --> 05:13.180 Now let's go back to our handlers or close these two migration's because I'm done with those. 05:13.180 --> 05:20.470 Go back to my handlers and let's modify the way we're displaying information on the by a bronze plan 05:20.470 --> 05:20.960 page. 05:21.190 --> 05:27.490 So what I'm going to do, first of all, is to get the widget from the database. 05:27.490 --> 05:33.100 I'm going to get rid of this map and then I'll say widget and potentially an error or assign the value 05:33.100 --> 05:39.790 of Apter did not get widget and I'll get it by ID and I'll hardcoded because I'm going to use this only 05:39.790 --> 05:42.610 for the bronze page and we'll check for an error. 05:43.360 --> 05:53.890 If error is not equal to nil after error log dot print line the error and we'll just return, which 05:53.890 --> 05:55.540 is sufficient for our purposes right now. 05:57.370 --> 06:04.660 Now I'll create a data variable which will be a map make map string interface. 06:12.040 --> 06:15.610 And I'll put the widget in their data widget. 06:17.420 --> 06:18.410 Is equal to. 06:21.510 --> 06:28.790 And I'll stroll up and we'll change this from an egg map to data, which will be there. 06:31.080 --> 06:36.360 OK, so now when we run to the bronze page of the Bronze Plan page, we'll actually have the widget 06:36.370 --> 06:37.000 information. 06:37.650 --> 06:41.490 Now, if we go to the bronze plan page, at the moment, I just have this. 06:41.520 --> 06:44.730 So I'm going to delete that entirely and leave an empty content there. 06:45.270 --> 06:55.050 And instead, I will open up my by one page by one page, and I'll copy the entire contents of the content 06:55.530 --> 06:55.980 div. 06:58.290 --> 07:03.930 Or block and I'll paste in here and modify it as needed. 07:04.050 --> 07:10.010 OK, so the very top, we're still getting our widget from the data variable that's available to us. 07:10.200 --> 07:13.800 So I'll delete the image part because we're not going to display it, which I'm not going to bother 07:13.800 --> 07:21.300 doing that and instead will say Brauns player, OK, and I'll put the price there too. 07:23.250 --> 07:25.410 And I'll do that using format currency. 07:27.490 --> 07:30.890 And it will be dollar sign widget price. 07:32.950 --> 07:34.440 Now, what else do we need to change here? 07:34.480 --> 07:38.950 I'm just going to put a dash temp after the formula because we're not actually going to call that you 07:38.950 --> 07:40.240 earlier, probably. 07:40.520 --> 07:41.740 And this is just a placeholder. 07:42.340 --> 07:43.780 So that stays the same. 07:43.780 --> 07:45.850 The Wichita State stays the same. 07:45.850 --> 07:47.210 The price stays the same. 07:47.620 --> 07:51.160 And here we have the price and the description, which is fine. 07:52.450 --> 07:54.910 And first name, last name, email. 07:54.980 --> 08:00.630 The only other change I'm going to make here right now is on the button where it says charge card. 08:00.640 --> 08:03.910 I want to make it really clear to the user that they're actually paying monthly. 08:03.940 --> 08:10.600 So I'll say pay format, currency, dollar sign widget price. 08:14.140 --> 08:18.950 And close off those curly brackets and put a slash per month like that. 08:19.900 --> 08:21.900 OK, so let's make sure our application is running. 08:21.940 --> 08:26.440 It's not so I'll say make start, underscore back. 08:30.690 --> 08:32.730 It's already running, so let's say it makes a stop. 08:34.330 --> 08:37.180 They're making start underscore back. 08:40.490 --> 08:47.270 And I'll just run here, and once that compiles, I should be able to go back to my Web browser, go 08:47.270 --> 08:49.670 to my bronze plan page and hopefully see the form. 08:50.120 --> 08:53.240 The credit card stuff won't work, of course, but I should at least see a form. 08:54.460 --> 08:59.140 And there it is, so we have the bronze plan displayed twice, probably want to get rid of that one, 08:59.530 --> 09:04.060 and the credit card is not being turned into a straight credit card because we haven't put any JavaScript 09:04.060 --> 09:04.540 in there yet. 09:04.930 --> 09:06.890 But this is a start. 09:07.240 --> 09:13.810 So in the next lecture, we'll start working on the necessary JavaScript to turn this into a by subscription 09:13.810 --> 09:15.930 to allow us to subscribe to a strike plan. 09:15.940 --> 09:17.880 And we'll get started on that in the next election.