1 00:00:02,029 --> 00:00:04,960 Let's dive into orders and let's make sure that we can 2 00:00:04,960 --> 00:00:08,640 actually click this Buy Products button and order our cart 3 00:00:08,640 --> 00:00:09,790 content. 4 00:00:09,790 --> 00:00:12,930 For this I'll start in cart EJS 5 00:00:12,930 --> 00:00:13,763 and there, 6 00:00:13,763 --> 00:00:16,030 I want to start by only showing this button, 7 00:00:16,030 --> 00:00:18,980 if you are logged in, because if you're not logged in, 8 00:00:18,980 --> 00:00:21,270 as I am here at the moment, 9 00:00:21,270 --> 00:00:24,300 you shouldn't be able to click this button because you can 10 00:00:24,300 --> 00:00:27,143 only buy products if you are logged in. 11 00:00:28,220 --> 00:00:29,770 So they have four here, 12 00:00:29,770 --> 00:00:31,420 I'll add a little check where I check. 13 00:00:31,420 --> 00:00:34,420 If locals is off that's that field, 14 00:00:34,420 --> 00:00:38,560 we have to determine whether this user is authenticated or 15 00:00:38,560 --> 00:00:39,570 not. 16 00:00:39,570 --> 00:00:43,080 And only if that returns true I'll show that button. 17 00:00:43,080 --> 00:00:46,921 Otherwise we won't show it. If we don't show the button. 18 00:00:46,921 --> 00:00:51,919 So as a L's case. So if the user is not authenticated, 19 00:00:51,919 --> 00:00:56,190 then I want to show a fallback paragraph instead 20 00:00:56,190 --> 00:00:59,210 where we could say, log in 21 00:00:59,210 --> 00:01:01,210 to proceed and purchase 22 00:01:02,200 --> 00:01:03,320 the items. 23 00:01:03,320 --> 00:01:04,269 Something like this 24 00:01:05,870 --> 00:01:07,244 So now if we save this 25 00:01:07,244 --> 00:01:09,821 we have this fallback text here. 26 00:01:09,821 --> 00:01:13,030 We could change the styling of it, um, 27 00:01:13,030 --> 00:01:15,300 especially on mobile views. 28 00:01:15,300 --> 00:01:17,940 This doesn't look that great on mobile devices. 29 00:01:17,940 --> 00:01:21,120 We'll do that in a second. If I do log in, though, 30 00:01:21,120 --> 00:01:24,483 if I do log in with my user here, 31 00:01:25,890 --> 00:01:30,560 then you will see that I can actually click Buy Products. 32 00:01:30,560 --> 00:01:34,450 Now let's fix the text. If we are locked out and for this, 33 00:01:34,450 --> 00:01:36,400 I want to select 34 00:01:36,400 --> 00:01:40,030 this paragraph here in cart total 35 00:01:40,030 --> 00:01:42,550 and to select this in a unique way, 36 00:01:42,550 --> 00:01:45,450 I'll give it an idea of, 37 00:01:45,450 --> 00:01:46,283 cart, 38 00:01:46,283 --> 00:01:47,183 total, 39 00:01:48,430 --> 00:01:49,263 fall back. 40 00:01:50,998 --> 00:01:54,780 It's a unique ID and we can select this and card CSS now to 41 00:01:54,780 --> 00:01:57,550 change the styling of this 42 00:01:57,550 --> 00:01:59,000 and here 43 00:01:59,000 --> 00:02:00,460 I'll selected by ID 44 00:02:02,370 --> 00:02:05,720 and set the phone size to one REM for example, 45 00:02:05,720 --> 00:02:09,310 the font weight to normal like this 46 00:02:09,310 --> 00:02:11,210 and see that this has no 47 00:02:11,210 --> 00:02:14,210 effect because if we inspect this, 48 00:02:14,210 --> 00:02:17,150 we see specificity and action. 49 00:02:17,150 --> 00:02:19,005 I do have my cart total fallback styles here, 50 00:02:19,005 --> 00:02:23,590 but they are being overwritten by the more specific selector 51 00:02:23,590 --> 00:02:27,310 here because selecting a paragraph ends out of an element 52 00:02:27,310 --> 00:02:31,370 with that ID is more specific in CSS world 53 00:02:31,370 --> 00:02:33,880 then selecting one element by just its ID 54 00:02:33,880 --> 00:02:36,660 because this selector has more information to it. 55 00:02:36,660 --> 00:02:39,573 It's more specific and therefore this rule wins. 56 00:02:40,560 --> 00:02:43,613 So to ensure that this rule wins instead, 57 00:02:43,613 --> 00:02:46,780 we've got various ways of improving 58 00:02:46,780 --> 00:02:47,613 the specificity. 59 00:02:47,613 --> 00:02:51,400 For example, by selecting the item with that ID, 60 00:02:51,400 --> 00:02:55,160 that's inside another item with the cart total ID, 61 00:02:55,160 --> 00:02:57,290 which is a layout we have here. 62 00:02:57,290 --> 00:02:59,310 The div has cart total as an ID 63 00:02:59,310 --> 00:03:03,370 and now we're providing a more specific rule of selecting 64 00:03:03,370 --> 00:03:05,573 the item with this ID inside of it. 65 00:03:06,780 --> 00:03:08,979 That would be one way of being more specific. 66 00:03:08,979 --> 00:03:11,973 And now with that, this looks better, I would say, 67 00:03:13,650 --> 00:03:16,100 so this is now step one. 68 00:03:16,100 --> 00:03:19,690 We only showed a button when we want to show it. Step two. 69 00:03:19,690 --> 00:03:23,240 Of course now is the more important step where we actually 70 00:03:23,240 --> 00:03:25,063 make the button do something. 71 00:03:26,400 --> 00:03:31,003 Now, if we log in with a valid user account here, 72 00:03:32,480 --> 00:03:34,680 then we can click this button. We can, 73 00:03:34,680 --> 00:03:37,017 of course also add more items to the cart. 74 00:03:37,017 --> 00:03:38,583 This all works. 75 00:03:42,140 --> 00:03:47,140 Here adjusts the, uh, tiny issue where I got 1, 1, 1 here 76 00:03:47,200 --> 00:03:52,200 instead of 3, the reason for that is in the cart model 77 00:03:52,310 --> 00:03:56,627 actually, where we increase the quantity by one, 78 00:03:56,627 --> 00:04:00,640 we should make sure that we always force a conversion to 79 00:04:00,640 --> 00:04:04,090 numbers. First, before we try adding a one so that 80 00:04:04,090 --> 00:04:07,550 we ensure that we always are working with numbers and we 81 00:04:07,550 --> 00:04:10,803 don't just concatenate one to a long string. 82 00:04:11,870 --> 00:04:15,730 So let's save this, remove this 83 00:04:15,730 --> 00:04:16,930 and actually 84 00:04:16,930 --> 00:04:20,959 clear the entire session, now that I fixed this 85 00:04:20,959 --> 00:04:22,623 by removing that cookie. 86 00:04:24,110 --> 00:04:25,520 And then reloading 87 00:04:25,520 --> 00:04:27,850 And now let's try this again, 88 00:04:27,850 --> 00:04:29,860 add a cart item here, 89 00:04:30,890 --> 00:04:32,670 like this, 90 00:04:32,670 --> 00:04:33,950 that now looks better. 91 00:04:33,950 --> 00:04:36,213 And now if I do log in here. 92 00:04:39,280 --> 00:04:40,253 Like this. 93 00:04:42,220 --> 00:04:45,030 Add this one more time, that looks good 94 00:04:45,030 --> 00:04:47,470 And now let's make sure that this Buy Products 95 00:04:47,470 --> 00:04:50,370 button does something meaningful. 96 00:04:50,370 --> 00:04:51,203 Now for that, 97 00:04:51,203 --> 00:04:54,340 we've got various ways of making it do something. 98 00:04:54,340 --> 00:04:56,300 One thing I want to do here. 99 00:04:56,300 --> 00:04:57,133 Is... 100 00:04:57,133 --> 00:04:58,143 In art EJS. 101 00:04:58,143 --> 00:05:02,440 I want to wrap this button into a forum because I want to do 102 00:05:02,440 --> 00:05:04,150 a standard form submission. 103 00:05:04,150 --> 00:05:08,480 When this button is clicked to send a post request to the 104 00:05:08,480 --> 00:05:11,103 backend, to create a new order. 105 00:05:12,170 --> 00:05:14,960 And for this, I'm also not going to send an Ajax request, 106 00:05:14,960 --> 00:05:17,480 but instead I'll let the browser do that. 107 00:05:17,480 --> 00:05:22,183 Here, my goal is to set an action like slash orders 108 00:05:23,490 --> 00:05:26,460 and set the methods to post, 109 00:05:26,460 --> 00:05:30,210 and we'll have to add a route on the backend that supports 110 00:05:30,210 --> 00:05:32,799 post requests to slash orders. 111 00:05:32,799 --> 00:05:36,290 And then that's already all I want to do. 112 00:05:36,290 --> 00:05:39,740 You might be wondering where the form data is that should go 113 00:05:39,740 --> 00:05:40,573 into this form. 114 00:05:40,573 --> 00:05:45,573 But the answer is we don't need the form data here 115 00:05:45,600 --> 00:05:47,690 because, we already have the cart, 116 00:05:47,690 --> 00:05:50,040 which is part of this user's session. 117 00:05:50,040 --> 00:05:53,890 And the session is already stored on the server side. 118 00:05:53,890 --> 00:05:57,128 So in the route that handles a request to orders 119 00:05:57,128 --> 00:05:59,650 we'll be able to look into the session 120 00:05:59,650 --> 00:06:01,186 to see the cart of that user. 121 00:06:01,186 --> 00:06:05,250 So the data that's in the cart already is on the server 122 00:06:05,250 --> 00:06:08,630 side. So we won't have any problems working with it there 123 00:06:09,950 --> 00:06:13,530 Hence, all we gotta do here is add a controller 124 00:06:13,530 --> 00:06:15,610 that deals with orders. 125 00:06:15,610 --> 00:06:18,400 So orders controller make sense 126 00:06:19,450 --> 00:06:21,420 and add a dedicated routes 127 00:06:21,420 --> 00:06:23,660 file. So in the routes folder, 128 00:06:23,660 --> 00:06:26,313 I'll add an order as started routes Js file. 129 00:06:27,420 --> 00:06:31,390 And then we can copy the cart routes into orders routes, 130 00:06:31,390 --> 00:06:34,659 and refer to the orders controller here, 131 00:06:34,659 --> 00:06:39,659 which we get access to by requiring dot slash controllers 132 00:06:40,470 --> 00:06:42,743 slash orders controller. 133 00:06:43,960 --> 00:06:47,320 And now we've got a couple of routes we want to define here. 134 00:06:47,320 --> 00:06:49,610 For example, we want to add a route, 135 00:06:49,610 --> 00:06:54,610 a post route to slash orders that will add a new order. 136 00:06:56,100 --> 00:06:58,969 Now just as with the admin or to cart routes, 137 00:06:58,969 --> 00:07:03,360 I will register the orders routes in app JS such that we set 138 00:07:03,360 --> 00:07:06,620 up the prefixed there so we can ignore the prefix in 139 00:07:06,620 --> 00:07:09,920 the routes file. Instead here in app JS, 140 00:07:09,920 --> 00:07:12,420 we can add to the order routes 141 00:07:13,750 --> 00:07:16,900 by requiring dot slash routes 142 00:07:16,900 --> 00:07:18,460 orders routes 143 00:07:19,780 --> 00:07:21,470 let's actually also named this 144 00:07:21,470 --> 00:07:25,193 orders routes to be in line with that file name. 145 00:07:27,240 --> 00:07:31,650 And then we can register this after protect route 146 00:07:31,650 --> 00:07:35,910 middleware because order related routes are only available 147 00:07:35,910 --> 00:07:39,250 if you are locked in. So after protect routes, 148 00:07:39,250 --> 00:07:41,720 middleware I'll add app use 149 00:07:43,430 --> 00:07:45,250 and add slash orders as a 150 00:07:45,250 --> 00:07:48,523 prefix, and then point at the orders routes. 151 00:07:49,860 --> 00:07:51,882 And because of this prefix here, 152 00:07:51,882 --> 00:07:56,480 the routes in the orders routes folder will automatically 153 00:07:56,480 --> 00:07:59,141 start with slash orders. 154 00:07:59,141 --> 00:08:02,387 So this is slash orders slash nothing, 155 00:08:02,387 --> 00:08:05,810 and therefore, it will become active if a post request is 156 00:08:05,810 --> 00:08:07,650 sent to slash orders. 157 00:08:07,650 --> 00:08:12,030 And then we want to point at the orders controller and their 158 00:08:12,030 --> 00:08:13,660 a to be added action 159 00:08:15,730 --> 00:08:18,112 A action that could be named 160 00:08:18,112 --> 00:08:18,945 addOrder, 161 00:08:20,092 --> 00:08:21,520 but the name is up to you. 162 00:08:21,520 --> 00:08:24,380 You just have to make sure that you add a function with that 163 00:08:24,380 --> 00:08:27,973 name in the orders controller and that you export it there. 164 00:08:28,920 --> 00:08:30,460 So that's what I'll do here. 165 00:08:30,460 --> 00:08:35,450 Add a function named addOrder here in the orders controller, 166 00:08:35,450 --> 00:08:39,970 and then add module exports to export an object where we 167 00:08:39,970 --> 00:08:44,300 have an add order key and point at the add order function 168 00:08:44,300 --> 00:08:46,663 to make it available outside of this file. 169 00:08:48,012 --> 00:08:50,960 And now in here, as always, of course, 170 00:08:50,960 --> 00:08:54,780 we get the request and the response, and we can get our 171 00:08:54,780 --> 00:08:57,680 cart which we need to place the order 172 00:08:57,680 --> 00:09:00,470 because the cart contains all the data that's relevant 173 00:09:00,470 --> 00:09:01,380 for the order 174 00:09:02,340 --> 00:09:05,470 by accessing res dot locals dot cart. 175 00:09:05,470 --> 00:09:06,917 That's how we get access to the cart 176 00:09:06,917 --> 00:09:10,023 and we can store it in a cart, help or constant. 177 00:09:11,790 --> 00:09:14,370 Now it's in the end that this cart data, 178 00:09:14,370 --> 00:09:17,270 which I want to translate into order data, 179 00:09:17,270 --> 00:09:20,423 which I store in a standalone brand new collection. 180 00:09:22,060 --> 00:09:24,610 And for this, of course, we need a model. 181 00:09:24,610 --> 00:09:28,480 We need a model a order dot model to be precise 182 00:09:30,060 --> 00:09:32,920 in this order dot model JS file. 183 00:09:32,920 --> 00:09:36,561 We can define the order class and then a constructor, 184 00:09:36,561 --> 00:09:40,420 which we use for initializing order objects that are based 185 00:09:40,420 --> 00:09:41,373 on this class. 186 00:09:42,380 --> 00:09:44,660 I will also at the export to the order 187 00:09:44,660 --> 00:09:46,673 So did I don't forget to do this again. 188 00:09:48,900 --> 00:09:53,900 Now here, 40 order, we then need various pieces of data. 189 00:09:54,320 --> 00:09:56,360 We need the cart, let's say, 190 00:09:56,360 --> 00:09:59,330 because that contains all the product data we're interested 191 00:09:59,330 --> 00:10:00,163 in. 192 00:10:01,260 --> 00:10:05,480 We also need some user data like the email and the ID, 193 00:10:05,480 --> 00:10:08,856 and maybe also the name and address of that user. 194 00:10:08,856 --> 00:10:11,804 Otherwise it would be hard to ship that order from a shop 195 00:10:11,804 --> 00:10:13,473 owner's perspective. 196 00:10:14,360 --> 00:10:16,658 So I expect to get user data here, 197 00:10:16,658 --> 00:10:20,430 which contains as I just said, email ID, address, name, 198 00:10:20,430 --> 00:10:21,263 and so on. 199 00:10:22,640 --> 00:10:26,180 I also want to accept a status so that if we are re 200 00:10:26,180 --> 00:10:28,950 initializing an already existing order, 201 00:10:28,950 --> 00:10:32,580 we can take its current status and otherwise I'll add a 202 00:10:32,580 --> 00:10:34,770 default value of pending. 203 00:10:34,770 --> 00:10:39,090 And let's say we have free possible status here that would 204 00:10:39,979 --> 00:10:43,563 be pending, fulfilled, and canceled. 205 00:10:44,860 --> 00:10:46,670 And initially at one pending here, 206 00:10:46,670 --> 00:10:48,910 we'll later add functionality to change 207 00:10:48,910 --> 00:10:50,913 it to other status as well. 208 00:10:51,973 --> 00:10:55,340 Now orders should also have a date 209 00:10:55,340 --> 00:10:56,990 when it was placed 210 00:10:57,960 --> 00:11:00,920 and we might also get an ID. Of course, 211 00:11:00,920 --> 00:11:03,910 initially we don't have one yet, but if we are, 212 00:11:03,910 --> 00:11:04,980 as I said before, 213 00:11:04,980 --> 00:11:09,190 re initializing a object for an order that was fetched from 214 00:11:09,190 --> 00:11:11,990 the database, because we might want to update it. 215 00:11:11,990 --> 00:11:14,810 Then of course we will have an order ID and then I want to 216 00:11:14,810 --> 00:11:18,023 store it in this object. That's based on this blueprint. 217 00:11:19,560 --> 00:11:21,320 So therefore now in this constructor, 218 00:11:21,320 --> 00:11:24,430 I now will set my product data, 219 00:11:24,430 --> 00:11:25,554 equal to cart 220 00:11:25,554 --> 00:11:28,010 because that in the end is the kind of data 221 00:11:28,010 --> 00:11:29,770 that is in the cart it's data 222 00:11:29,770 --> 00:11:31,500 about the products we added there, 223 00:11:31,500 --> 00:11:34,333 including the total amount and total quantity. 224 00:11:35,510 --> 00:11:38,430 I will add a user data property here, 225 00:11:38,430 --> 00:11:40,340 which is equal to user data 226 00:11:41,950 --> 00:11:44,463 and set the state as equal to status. 227 00:11:45,640 --> 00:11:50,640 And then regarding the date, all set this equal to new date, 228 00:11:51,020 --> 00:11:53,130 where I pass a date, 229 00:11:53,130 --> 00:11:57,223 a value to now new date uses the built in date constructor 230 00:11:57,223 --> 00:11:58,490 function, 231 00:11:58,490 --> 00:12:02,770 the built in date clause to construct a date value type, 232 00:12:02,770 --> 00:12:04,260 which is a value type, 233 00:12:04,260 --> 00:12:06,713 a kind of object built into JavaScript, 234 00:12:06,713 --> 00:12:10,830 which gives us various utility methods for working with 235 00:12:10,830 --> 00:12:11,740 dates. 236 00:12:11,740 --> 00:12:13,284 And I expect a date here, 237 00:12:13,284 --> 00:12:17,650 which we get as a parameter to be a string representation of 238 00:12:17,650 --> 00:12:18,820 a date, 239 00:12:18,820 --> 00:12:19,870 something like 240 00:12:19,870 --> 00:12:21,253 2021 241 00:12:21,253 --> 00:12:22,086 0 7, 242 00:12:23,231 --> 00:12:25,040 um, 15 or 16, 243 00:12:25,040 --> 00:12:28,240 and then maybe some time snapshot and that string 244 00:12:28,240 --> 00:12:31,840 representation will be transformed into such a date object 245 00:12:31,840 --> 00:12:34,843 with which we can work by this line of code. 246 00:12:35,860 --> 00:12:39,010 Of course, sometimes no date might be provided. 247 00:12:39,010 --> 00:12:39,843 For example, 248 00:12:39,843 --> 00:12:42,710 when we first create an order and will therefore have to 249 00:12:42,710 --> 00:12:45,100 ensure that we handled this properly, 250 00:12:45,100 --> 00:12:48,080 when we then later a save such order to the database 251 00:12:49,700 --> 00:12:54,360 Last but not least, I'll set this ID equal to the order ID 252 00:12:54,360 --> 00:12:55,970 I'm getting here. 253 00:12:55,970 --> 00:12:58,230 And actually, before I do that, 254 00:12:58,230 --> 00:13:01,650 I want to add a formatted date field here 255 00:13:01,650 --> 00:13:06,171 where I actually take my date that I have. 256 00:13:06,171 --> 00:13:09,863 And therefore here, I will check if this state is truth, 257 00:13:11,650 --> 00:13:13,110 but if I do have a date, 258 00:13:13,110 --> 00:13:17,340 then I also want to add this formatted date property, 259 00:13:17,340 --> 00:13:21,400 which I actually set equal to this start date 260 00:13:23,470 --> 00:13:25,869 to local date string, 261 00:13:25,869 --> 00:13:29,450 which allows me to format the date in a more human readable 262 00:13:29,450 --> 00:13:32,830 way for this as a first parameter value, 263 00:13:32,830 --> 00:13:35,530 we pass a low kale identifier, 264 00:13:35,530 --> 00:13:38,730 like E N U S for American English, 265 00:13:38,730 --> 00:13:41,570 which controls for which kind of language the date will be 266 00:13:41,570 --> 00:13:44,880 formatted for which kind of region on the world. 267 00:13:44,880 --> 00:13:47,840 And the second argument is an object with configuration 268 00:13:47,840 --> 00:13:50,150 options where we can, for example, 269 00:13:50,150 --> 00:13:53,790 say that we want to print the weekday in a short human 270 00:13:53,790 --> 00:13:56,130 readable way, something like Monday, Tuesday, 271 00:13:56,130 --> 00:14:00,050 and so on that we want to have the day off the month in 272 00:14:00,050 --> 00:14:04,180 numeric version as a numeric number that we want to have the 273 00:14:04,180 --> 00:14:06,740 month as a long output. 274 00:14:06,740 --> 00:14:11,480 So that July is not written as 0 7, but as July. 275 00:14:11,480 --> 00:14:14,083 And that the year should be numeric. 276 00:14:15,054 --> 00:14:18,853 That's one possible formatting we could choose. 277 00:14:20,170 --> 00:14:22,480 With that we are defining some settings 278 00:14:22,480 --> 00:14:26,310 for how a order object should be represented in our code. 279 00:14:26,310 --> 00:14:29,940 We of course also need to add a method for then actually 280 00:14:29,940 --> 00:14:32,453 saving that data to the database.