WEBVTT 00:00.020 --> 00:03.770 Okay, it's time to take a look at adding a new feature into our application. 00:03.770 --> 00:08.750 And because we're making an e-commerce type of store, then we need a shopping cart or shopping basket. 00:08.750 --> 00:12.410 I'll stick with basket terminology for this course, but shopping cart? 00:12.440 --> 00:14.420 Shopping basket, whichever you prefer. 00:14.420 --> 00:19.730 And we're going to take a look at adding a basket feature in this section. 00:19.730 --> 00:22.340 Now we're going to do both the API and the client side. 00:22.340 --> 00:25.880 We're going to implement this feature from start to finish. 00:25.880 --> 00:31.010 So first of all when adding a new feature we typically start with the entity, the thing that we want 00:31.040 --> 00:32.840 to store in our database. 00:32.840 --> 00:36.560 So we'll go to our entities folder I'll right click say New File. 00:36.590 --> 00:38.720 And this is going to be a class. 00:38.720 --> 00:41.960 And we'll call it basket and press return. 00:42.470 --> 00:46.370 Inside here we're going to create some properties for our basket. 00:46.370 --> 00:48.800 So the basket is going to have an ID. 00:48.830 --> 00:55.280 We'll use the prop snippet to get the auto implemented property and the ID of the basket. 00:55.280 --> 00:57.080 It's going to be an integer. 00:57.140 --> 01:02.630 We'll also have a string for the basket ID. 01:04.050 --> 01:08.790 And why would I have something different for a basket ID compared to the ID? 01:09.450 --> 01:09.960 Hmm. 01:09.960 --> 01:11.280 Well, we'll come on to that soon. 01:11.280 --> 01:16.890 But effectively we're going to store this value as a cookie in the user's browser. 01:16.890 --> 01:21.270 And that way we persist client side effectively. 01:21.750 --> 01:24.660 The items in the user's basket. 01:24.660 --> 01:29.370 I guess technically we could do the ID that way, but I'd rather this be a Guid. 01:29.370 --> 01:34.950 And yes, we could make the ID a Guid as well, but this is the approach I'm going for. 01:34.980 --> 01:39.930 Even if it feels like we're doubling up on IDs here, I just feel it's kind of more appropriate to have 01:39.930 --> 01:44.730 this as a string and storing a string value in local storage. 01:44.730 --> 01:49.410 That's where we're going to store the basket ID, and that's going to allow our user to go out and fetch 01:49.410 --> 01:56.310 the basket from the database whenever they refresh their page, whether they go away and they come back, 01:56.340 --> 02:01.590 they'll always be able to get their basket as long as they've got that cookie in their browser's storage. 02:01.590 --> 02:06.570 We're going to persist this bit of information in the client browser, and then we're going to have 02:06.570 --> 02:14.050 a list for basket item and we'll call it items. 02:14.080 --> 02:18.730 And we're going to initialize this one to an empty array or an empty list. 02:18.730 --> 02:24.550 This is really a shorthand nowadays for saying do list of baskets item. 02:24.670 --> 02:26.830 But we don't need to type all of this in anymore. 02:26.830 --> 02:33.910 In fact, we can see the ellipses there and it tells us that this can be simplified to lists nowadays. 02:33.910 --> 02:35.710 So we don't have the basket item yet. 02:35.710 --> 02:40.210 And we've got the nullable warning about the basket ID as well. 02:40.210 --> 02:46.120 Now we always want our baskets to have the basket ID, so I'm going to set that to be required. 02:46.120 --> 02:49.450 And I'm going to put my cursor inside the basket item. 02:49.450 --> 02:50.680 Use the quick fix. 02:50.710 --> 02:57.610 Either use the light bulb or command and period and we will generate class basket item. 02:57.610 --> 03:04.000 And let's also put our cursor inside this, as I'd rather it be inside its own file, so we can use 03:04.000 --> 03:08.650 the quick fix again and move type to basket item dot CSS. 03:08.650 --> 03:15.280 And if we go to our basket item, we could just right click this, go to its definition. 03:15.280 --> 03:18.610 And this opens up our new basket item class. 03:18.610 --> 03:23.560 So inside here each of our basket items is also going to have an ID. 03:23.830 --> 03:30.700 And what this effectively means is we're going to have a table in our database for baskets. 03:30.730 --> 03:36.040 And we're also going to have a separate table in our database for basket items. 03:36.040 --> 03:41.740 So we'll have another prop that's also an int for the quantity of the product that they're going to 03:41.740 --> 03:43.390 have in their basket. 03:43.420 --> 03:50.590 Now we're storing our basket in the database which means we can take advantage of relationships. 03:50.590 --> 03:56.920 We can have a relationship between our basket item and the product that is stored in our database, 03:56.920 --> 04:02.470 which means we don't need to specify all of the different properties of a product when we add something 04:02.500 --> 04:11.200 to our basket or our shopping cart, and these are often referred to as navigation properties inside 04:11.200 --> 04:12.340 a class. 04:12.770 --> 04:18.050 and the way that we use these, because we're going to have effectively in here, we're going to have 04:18.050 --> 04:23.810 a 1 to 1 relationship between a basket item and a product. 04:23.870 --> 04:34.940 So we'll specify a prop of an int of product ID and a prop of products and call it product. 04:34.940 --> 04:38.330 And once again we get the warning here. 04:38.630 --> 04:45.830 Now again we're not going to have a basket item that isn't related to a product, nor do we want that. 04:45.830 --> 04:49.700 So we'll also specify required for this in here. 04:49.730 --> 04:52.880 Now thinking about it I'm on net nine now. 04:52.880 --> 04:58.730 And what I would normally do in dotnet eight and prior for this kind of thing because this is how they 04:58.730 --> 05:05.570 specify to do it in the documentation is we would specify our navigation property like this. 05:05.600 --> 05:11.270 We would allow it to be nullable so that we don't get an error when we try and create a new migration. 05:11.270 --> 05:12.620 But I want to give this a go. 05:12.650 --> 05:16.920 I'm not 100% sure it's going to work if I use the required property. 05:16.920 --> 05:21.600 But just for your peace of mind and my peace of mind, I'm going to give it a go anyway. 05:21.630 --> 05:29.040 And the worst that can happen is we get an error when we try and use a migration, and we have to revert 05:29.040 --> 05:32.040 it to the approach I demonstrated just now. 05:32.040 --> 05:38.250 So our items are going to have a relationship with the products, a 1 to 1 relationship. 05:38.910 --> 05:45.930 And also our basket is going to have a relationship with the basket item. 05:45.930 --> 05:48.570 This is known as a one to many relationship. 05:48.570 --> 05:51.180 One basket can have many items. 05:51.180 --> 05:57.300 And in the case of a basket item, one item is related to one product. 05:57.300 --> 05:59.220 So that's our entity class setup. 05:59.220 --> 06:05.100 In the next lesson, I want to add a couple of methods inside our basket class, as I would like to 06:05.130 --> 06:11.880 make it easy to add an item into our basket and also remove an item into our basket. 06:11.910 --> 06:17.490 It sounds easy, but there's a couple of things we need to think about when we do this, and we'll take 06:17.490 --> 06:19.200 a look at that next.