WEBVTT 00:01.400 --> 00:06.560 So this time around, we want to start working on this sort of thing, if I go to all sales after logging 00:06.560 --> 00:12.890 and I want this link to work and as you can see, if you can inspect it, it's inspected here. 00:14.710 --> 00:20.080 The URL for that is slash admin, slash sales, slash whatever the order it is. 00:20.260 --> 00:24.550 So we want to actually have that page display because right now, if I click on it, I get a page not 00:24.550 --> 00:26.040 found here and that's no good. 00:26.980 --> 00:31.440 So let's go back to our code, and the first thing I'll do is go to my roots, go. 00:33.610 --> 00:41.590 And in this part where I have everything protected admin, let's just add a root right in here so mux 00:41.590 --> 00:49.120 don't get and it will be slash admin, which I get automatically from the root handler or function slash 00:49.120 --> 00:55.390 sales and then some I.D. and the router wants us to put that in curly brackets like that. 00:55.540 --> 01:02.900 And then I'll point to a handler that doesn't exist after show sale and let's go create them. 01:03.340 --> 01:10.330 So if I go to my handlers, handlers don't go inside the web folder and at the very bottom, I'll create 01:10.330 --> 01:15.490 a handler for slash sales, slash some IDE called show sale. 01:17.590 --> 01:25.540 And it's basically the same as this one, so I can just copy and paste it and change it to show sale 01:27.970 --> 01:30.960 and I'll render a template that doesn't exist yet, which I'll call. 01:31.870 --> 01:40.020 So that means I need to go over to my templates folder and create a new file called Sayle Page Dot Go 01:40.270 --> 01:40.810 HTML. 01:43.550 --> 01:48.980 And we'll put a really simple one here to start with, template will be based and we're going to possibly 01:48.980 --> 01:50.000 hand data to this. 01:50.860 --> 01:55.880 We are handing needed to it and we'll define the title, which is Just Sale 01:59.840 --> 02:00.770 and close that. 02:04.550 --> 02:06.110 And I will define the content area 02:09.710 --> 02:20.930 and I'll put it there right now is just age two class equals empty dash five sale and close to put it 02:21.280 --> 02:24.280 in there and we'll populate this with more stuff later on. 02:24.320 --> 02:25.270 So let's end that. 02:26.900 --> 02:28.730 And this is going to have JavaScript as well. 02:28.940 --> 02:36.070 So let's put in our section for JavaScript defined Gio's and we'll just leave it empty for the moment. 02:37.580 --> 02:41.290 So we have a handler, we have a route and we have a template. 02:41.390 --> 02:43.340 So this will actually work if we run it. 02:43.370 --> 02:44.400 Let's verify that. 02:45.170 --> 02:46.220 So I'll open my terminal. 02:47.840 --> 02:50.330 Next up, make start. 02:53.190 --> 02:56.850 And let's see if we get everything right, just to make sure it's all hooked up properly by clicking 02:56.850 --> 03:01.620 on Order three in my case and you click on whatever order you have, and there it is. 03:01.800 --> 03:06.010 OK, now let's go back and work on some JavaScript for this. 03:06.030 --> 03:12.780 And what I'm going to do to save some time is open the all subscriptions or all sales page and just 03:12.780 --> 03:19.590 copy the entire content of this JavaScript and we'll modify it because it'll be very similar to what 03:19.590 --> 03:21.080 we need to do right now. 03:21.690 --> 03:24.950 And back to Sale Page and I'll just paste the JavaScript in there. 03:25.980 --> 03:26.340 All right. 03:26.460 --> 03:27.820 There are going to be some changes. 03:27.870 --> 03:34.110 The first thing is if I go back and look at this, I need to get the ID from the URL right here. 03:34.110 --> 03:40.660 So it's admin slash, sales slash and then the order ID and I need to get that from the URL. 03:40.680 --> 03:42.560 Unfortunately, JavaScript makes that pretty easy. 03:43.260 --> 03:45.760 So I'll get rid of this Tebaldi because I'm not going to use that. 03:46.170 --> 03:49.920 I'll leave that alone and I'll have this U. 03:49.920 --> 03:51.890 URL will make it back in early. 03:51.900 --> 03:58.620 That goes to get Dasch sale and then it will be a slash and then plus whatever the ideas, we don't 03:58.620 --> 03:59.160 have that yet. 03:59.190 --> 04:05.220 So let's get it up here after I get my token, which I know I'm going to need, let's just put let iid 04:05.220 --> 04:16.440 equal window location, dot pathing dot split and I'm going to split on the slash and I want to pop 04:16.440 --> 04:19.650 it to get the last one and that should get me the ID. 04:19.650 --> 04:25.320 So let's just console, get rid of this stuff and get rid of all of this stuff. 04:26.810 --> 04:32.930 Right here, the entire if statement in the last where clause, and I'll just comment about this right 04:32.930 --> 04:34.490 now so we can actually run this. 04:35.240 --> 04:41.960 So let me stop my application, make it stop, make a start, and I'll just start the back end. 04:45.020 --> 04:48.770 And then I'll run air, so if I need to make changes, I don't have to start and stop things all the 04:48.770 --> 04:49.050 time. 04:49.550 --> 04:51.980 So let's go back here and. 04:53.390 --> 04:57.410 Open the terminal and make sure it all renders without a JavaScript error, so we'll go to the console, 04:57.410 --> 04:59.300 clear it and reload this. 05:01.050 --> 05:05.940 OK, no air except no Fabi confound and that I don't care about, so let's make sure we actually get 05:05.940 --> 05:06.710 the ID. 05:07.350 --> 05:09.900 So what I'll do here is say console log 05:12.720 --> 05:16.890 ID is Colma ID and save that. 05:17.370 --> 05:18.510 Let er rebuild it. 05:20.340 --> 05:26.070 And go back and reload that page my browser and make sure I get the ID from the URL and IDs three. 05:26.100 --> 05:27.270 That's exactly what I wanted. 05:27.810 --> 05:33.290 OK, so let's go back now and fix up this statement and then we'll go right. 05:33.310 --> 05:34.920 The necessary stuff in the backend. 05:34.980 --> 05:36.300 So I'll uncommented this. 05:38.620 --> 05:39.970 And get rid of that console log. 05:40.040 --> 05:46.750 They don't care about that, so I'm going to call API slash, API slash admin slash and get sale and 05:46.750 --> 05:53.170 an I.D. And what I want to do at that point is just say console that log data so we can see what data 05:53.170 --> 05:53.470 we get. 05:54.880 --> 06:03.810 So the next step is to go create a route for API slash admin slash, get sales some ID in our API. 06:04.210 --> 06:09.770 So let's go to the Roots Dash API folder or file and we'll just do this really quickly. 06:10.780 --> 06:13.890 So we'll create a new route in our protected section. 06:13.900 --> 06:16.110 In my case that starts on line thirty two. 06:16.230 --> 06:22.750 We'll just put one in here so it'll be a post Muxtape post and we get slash API slash admin from the 06:22.750 --> 06:27.490 Muxtape route and then we want slash and get dash sales some. 06:27.850 --> 06:32.830 So I put that in curly brackets because I'm using the key router and I'll call a handler app. 06:32.830 --> 06:33.670 Don't get sale. 06:34.450 --> 06:36.780 That doesn't exist yet, but we're going to make it right now. 06:37.300 --> 06:41.920 So let's go to Handler's API Handler's Dash API Dutko. 06:42.310 --> 06:47.860 And at the very bottom of this, you can put it wherever you want, but I'm going to put it at the bottom. 06:50.060 --> 06:58.250 Can you handle it and I'll just copy this one to say some time and paste it in here and I'm going to 06:58.250 --> 06:59.360 call it and get Sayle. 07:01.740 --> 07:06.630 So I'm not going to get all sales from the database, instead I'm going to get one sale from the database. 07:06.630 --> 07:09.690 So let me just clear all this out and I'll leave the right. 07:09.690 --> 07:15.420 James will be using it shortly and I'll say I need to get the ID and we use the key utility function 07:15.420 --> 07:17.550 for that chheda Eurail Perram. 07:17.730 --> 07:26.070 And we're looking for from the request we're looking for ID, lower case ID and I need to convert that 07:26.610 --> 07:27.660 to an end. 07:27.810 --> 07:31.650 So order ID is that's what it is. 07:31.860 --> 07:33.150 And I'm going to ignore the error. 07:33.150 --> 07:34.890 You shouldn't put an error check in there. 07:35.340 --> 07:36.950 Sturckow toward. 07:38.530 --> 07:44.350 And I'm going to look for I.D., so I convert it into order, I.D. in it, and that's what I'm going 07:44.350 --> 07:49.540 to need in a minute because I'm going to look for an order, potentially an error, and I'll call a 07:49.540 --> 07:57.460 database function that doesn't exist yet at DV Dot and I will call it Get Order by ID and I'm going 07:57.460 --> 08:00.910 to pass it already and I will check for an error. 08:02.140 --> 08:10.840 If error is not equal to nil, then I'll just say after that, request it again and request and hand 08:10.840 --> 08:13.270 it over and the error and I'll return. 08:15.220 --> 08:18.040 Otherwise I'm going to write the Jason Porter. 08:19.150 --> 08:22.890 Now obviously this won't work yet because get order by ID doesn't exist. 08:22.900 --> 08:23.770 So let's go to models. 08:23.770 --> 08:26.410 Don't go the very bottom of this file. 08:26.950 --> 08:31.960 And if you think about it, getting one order is virtually identical to this function. 08:31.960 --> 08:34.490 Get all subscriptions or get all sales. 08:35.050 --> 08:39.640 So what I'll do, we're just going instead of getting all of them, we're going to get one by ID. 08:39.640 --> 08:49.060 So I'll copy this and paste it right here and scroll back up and rename it to get order by ID. 08:49.210 --> 08:53.920 And it's going to return one order, not a slice of pointer store orders and potentially an error. 08:55.540 --> 08:57.700 So we'll create our variable, which I'll call. 08:57.700 --> 09:01.930 Oh, and you'll see why in a minute just to say some work of type order. 09:03.580 --> 09:04.630 This is our query. 09:05.320 --> 09:08.980 But we don't want where this equals one. 09:09.190 --> 09:20.560 We want where oh ID equals questionmark and this is going to change to a singular row is equal to imdb 09:20.560 --> 09:30.550 dot query row context and we're going to hand it the context and we're going to hand it ID and this 09:30.550 --> 09:36.430 is query row contents, which is why I have an error, the error there and we're going to take the ID 09:36.460 --> 09:37.570 as a parameter up here. 09:37.780 --> 09:39.280 Idee is a type int. 09:39.920 --> 09:45.040 OK, so now we have a row and we don't check for an error like this, or do the rows close because we 09:45.040 --> 09:46.110 don't have rows anymore. 09:46.690 --> 09:51.460 Instead we scan the row like this and we get rid of this. 09:51.460 --> 09:56.200 And this is why I went with O for my variable name up here on line four fifty seven. 09:56.470 --> 09:58.690 So I don't want to change all of these old to order. 09:58.780 --> 10:07.000 OK, I may be a little lazy so we check for that and then down here we can get rid of these two things. 10:10.350 --> 10:18.690 And will return, oh, and the air will return oh, here and we have one more mistake, and that error 10:18.690 --> 10:20.260 needs to be an assignment operator. 10:21.570 --> 10:22.470 So that should fix it. 10:22.500 --> 10:26.160 So now if I say this, it should formatted no error. 10:26.160 --> 10:26.760 Show up. 10:26.890 --> 10:32.700 I can go back to Handler's API, no errors here and I can go back to reach API. 10:32.790 --> 10:33.630 No errors. 10:33.840 --> 10:40.650 So I should be able to stop this make stop make start to get everything running. 10:43.280 --> 10:48.830 And go back to my Web browser, make sure the console is open, and now when I reload this, I should 10:48.830 --> 10:49.850 get some Jason back. 10:51.460 --> 10:52.030 And I do. 10:52.180 --> 10:54.190 So let's go to the network tab. 10:55.240 --> 11:01.810 Look at the post request and look at the response and there's my order, and if I switch it to raw as 11:01.810 --> 11:06.440 you can and in Firefox, there's all the information I'm probably going to need. 11:07.030 --> 11:12.340 So at this point, I've managed to successfully call the back end pass at the ID that I've grabbed from 11:12.340 --> 11:15.130 the URL and get the response as Jason. 11:15.520 --> 11:20.590 And all that we have to do now is take the information out of our Jason file and write it to the screen 11:20.680 --> 11:22.920 and we'll take care of that in the next election.