WEBVTT 00:00.000 --> 00:00.300 Okay. 00:00.330 --> 00:01.950 Welcome to section seven. 00:01.950 --> 00:06.810 And in this section we're going to take a look at adding our shopping basket feature. 00:06.810 --> 00:11.970 I've used basket as the term I'm using in this training course for the thing that the users can put 00:11.970 --> 00:12.630 products into. 00:12.660 --> 00:18.690 But if you prefer to use the term shopping cart, then please feel free to do so in your application. 00:18.690 --> 00:23.040 It doesn't make any difference at all, of course, in the functionality that we're going to add. 00:23.130 --> 00:27.150 So inside this section we're going to add the shopping cart feature. 00:27.150 --> 00:32.010 And I use the terms interchangeably myself even though I'm using basket in the app. 00:32.010 --> 00:38.280 And we're also going to take a look at where to store this thing that we put products into. 00:38.310 --> 00:42.870 There are different options, and there are pros and cons to each different option, which we'll take 00:42.870 --> 00:43.830 a look at. 00:44.160 --> 00:50.310 Then we're going to take a look at Entity Framework relationships, which might give you a clue as to 00:50.340 --> 00:52.920 where we might be storing our basket. 00:52.920 --> 00:57.390 And because we're looking at Entity Framework relationships, then we need to think about how we're 00:57.390 --> 01:00.390 going to shape the data that we return to the client. 01:00.390 --> 01:03.060 And that's what's coming up in this section. 01:03.060 --> 01:08.020 But before we get into it, let's talk about where we store this thing. 01:08.200 --> 01:09.760 And we do have options. 01:09.760 --> 01:17.080 We could store it in local storage, we could store it in the database, and we could store it in cookies 01:17.080 --> 01:18.460 in our browser. 01:18.490 --> 01:21.550 And there are pros and cons to each of these different approaches. 01:21.550 --> 01:26.830 If we take a look at local storage, for instance, then this is the simplest possible place to put 01:26.830 --> 01:27.430 our basket. 01:27.430 --> 01:28.990 It's very simple. 01:29.230 --> 01:34.810 It's persistent because if the user closes their browser down and then comes back to our application, 01:34.930 --> 01:37.240 nothing gets deleted from local storage. 01:37.240 --> 01:38.410 It's persistent. 01:38.410 --> 01:45.130 And because it's local storage in our browser, it's easily accessible from our JavaScript code or our 01:45.130 --> 01:46.060 react code. 01:46.060 --> 01:49.420 And also because it's local storage, it works offline. 01:49.420 --> 01:54.160 If we were going to enable that kind of functionality into our app, then they would be able to add 01:54.160 --> 01:58.210 and remove items from their shopping cart without any issues. 01:58.210 --> 02:03.550 And the reason it works offline is one of the cons, because our server is completely unaware of what 02:03.550 --> 02:11.360 the user's putting into or taking out of their basket, which means our marketing department, if we 02:11.360 --> 02:17.180 had one, would have no idea what products are popular, what people are removing and adding into our 02:17.180 --> 02:17.930 shopping cart. 02:17.930 --> 02:25.550 So it's not a particularly useful option for a large scale e-commerce platform that does have such a 02:25.550 --> 02:27.500 thing as a marketing department. 02:27.530 --> 02:30.470 Also, there is limited storage in local storage. 02:30.470 --> 02:35.930 I think 5 to 10MB is the maximum, which should be plenty, of course, for a shopping cart, but it's 02:35.930 --> 02:39.890 just another con if you like, for local storage. 02:39.890 --> 02:46.520 And you could claim their security risks because once again, it's local storage, easily accessible 02:46.520 --> 02:53.450 from JavaScript code, and could open it up for a malicious user who could put and take away things 02:53.450 --> 02:54.440 from that shopping cart. 02:54.440 --> 02:58.550 I'm not saying that's a particularly useful thing for a malicious user to do, but it's just something 02:58.550 --> 03:00.950 else in the cons list. 03:01.340 --> 03:07.850 Another option would be cookies, and the pros of this one is that cookies are accessible on the server 03:07.850 --> 03:14.120 side as well as the client side, and because it's a cookie, we can control how long it persists for 03:14.150 --> 03:16.420 in the browser's cookie storage. 03:16.990 --> 03:23.710 So that solves one of the problems about what's a user putting into and taking out of their basket. 03:23.710 --> 03:26.410 But it comes with some downsides as well. 03:26.410 --> 03:32.230 The maximum size of a cookie is four kilobytes, and it could have a performance impact because a cookie 03:32.230 --> 03:40.060 is sent to and from the server for every single HTTP request that goes to that domain that the cookie 03:40.060 --> 03:41.080 belongs to. 03:41.830 --> 03:46.810 So even if they're making requests that have absolutely nothing to do with their shopping cart, they're 03:46.810 --> 03:51.730 still sending their shopping cart backwards and forwards to the server on every single request. 03:51.730 --> 03:55.420 So that's something else to think about as well with that approach. 03:55.450 --> 03:59.560 Another approach, of course, is to store our shopping carts in the database. 03:59.560 --> 04:03.310 And of course that means we get persistence. 04:03.370 --> 04:06.160 It's secure because it's on our backend server. 04:06.160 --> 04:12.310 It's a scalable as our server is because our server and our database would be scalable. 04:12.310 --> 04:19.450 And it also gives our marketing team access to the analytics that we could create from their activities, 04:19.450 --> 04:26.370 Depending on how we design the cart feature, we could enable event type behavior in our shopping cart 04:26.400 --> 04:31.020 so that we track every time they add or remove something from that shopping cart. 04:31.080 --> 04:36.150 We're not doing that part, by the way, but we are going to use the databases where we're storing our 04:36.150 --> 04:36.930 shopping cart. 04:36.930 --> 04:40.680 Some of the downsides, though, is the complexity for sure. 04:40.680 --> 04:45.390 We're going to involve our database, so that naturally makes it more complex than either of the other 04:45.390 --> 04:46.440 two options. 04:46.440 --> 04:48.960 So overload is something that we need to think about as well. 04:48.960 --> 04:51.390 It's just another thing that we're storing in our database. 04:51.390 --> 04:53.430 Not really a major issue though, of course. 04:53.430 --> 04:55.410 And it's of course online only. 04:55.410 --> 05:01.500 If our server is not available, then the shopping cart cannot be retrieved or updated from the client 05:01.500 --> 05:02.250 side. 05:02.250 --> 05:06.150 But the database is the option that we're going to go for in this training course. 05:06.150 --> 05:10.920 And another thing that we get if we do use the database is relationships. 05:10.920 --> 05:13.500 We're going to be working with relational data. 05:13.800 --> 05:21.870 And that means we can configure our database to use a relationship between our baskets, the items and 05:21.870 --> 05:22.950 the products. 05:23.550 --> 05:28.960 So we're going to introduce two different types of relationships in this particular section as well. 05:28.990 --> 05:30.460 We're going to have a basket. 05:30.460 --> 05:34.090 And we could say that our basket has many items in it. 05:34.090 --> 05:38.680 And this would be referred to as a one to many kind of relationship. 05:38.710 --> 05:41.320 One basket many items. 05:41.590 --> 05:45.670 Also, our basket items are going to have a relationship with the product. 05:45.700 --> 05:53.320 Each basket item we could say has one product or is related to a single product, and that would be 05:53.320 --> 05:56.200 referred to as a 1 to 1 relationship. 05:56.230 --> 06:02.110 So in this section, we're going to take a look at how we configure Entity Framework to work with tables 06:02.110 --> 06:04.120 that are related to each other. 06:04.120 --> 06:07.900 So we're going to have a basket table and we're going to have a basket items table. 06:07.900 --> 06:11.440 And we're going to have a relationship between the basket and the basket items. 06:11.440 --> 06:16.720 And also a relationship between the basket item and the product as well. 06:17.290 --> 06:22.900 And because Entity Framework is convention based, then it's pretty straightforward to set up these 06:22.900 --> 06:26.200 relationships using those conventions. 06:26.200 --> 06:29.020 And that's what we're going to take a look at in this section. 06:29.020 --> 06:30.430 So let's begin.