1 00:00:02,150 --> 00:00:04,230 Now that we achieved this state 2 00:00:04,230 --> 00:00:05,400 of this application, 3 00:00:05,400 --> 00:00:07,650 there's one last feature, 4 00:00:07,650 --> 00:00:10,680 which I wanna explore, which you will also see 5 00:00:10,680 --> 00:00:11,930 on a lot of websites 6 00:00:11,930 --> 00:00:14,260 and which chances are high, 7 00:00:14,260 --> 00:00:16,440 you will also need as a web developer 8 00:00:16,440 --> 00:00:18,840 when building a lot of websites. 9 00:00:18,840 --> 00:00:21,732 And that would be query parameters. 10 00:00:21,732 --> 00:00:24,683 Now, what are query parameters? 11 00:00:25,640 --> 00:00:27,310 To give you a good example, 12 00:00:27,310 --> 00:00:31,450 let's assume that here on this Browse Restaurants page, 13 00:00:31,450 --> 00:00:35,103 we actually want to be able to sort these restaurants. 14 00:00:36,290 --> 00:00:38,390 I wanna have a button you could say 15 00:00:38,390 --> 00:00:41,550 that sorts the restaurants in ascending 16 00:00:41,550 --> 00:00:43,520 or descending mode, 17 00:00:43,520 --> 00:00:47,390 let's say based on their title. 18 00:00:47,390 --> 00:00:48,460 At the moment, of course, 19 00:00:48,460 --> 00:00:51,190 we don't really sort our restaurants. 20 00:00:51,190 --> 00:00:53,740 Instead, when we get all these restaurants, 21 00:00:53,740 --> 00:00:55,890 we simply get them in the order 22 00:00:55,890 --> 00:00:59,380 in which they are stored in our data file. 23 00:00:59,380 --> 00:01:03,100 So here in restaurant-data.js where I fetch the restaurants, 24 00:01:03,100 --> 00:01:05,160 I simply read them from the file 25 00:01:05,160 --> 00:01:06,880 and I return them like this, 26 00:01:06,880 --> 00:01:08,900 and whilst that, of course, works, 27 00:01:08,900 --> 00:01:11,510 we might want to sort them. 28 00:01:11,510 --> 00:01:14,540 So therefore, let's start by sorting them as a default 29 00:01:14,540 --> 00:01:16,100 before we then add a button 30 00:01:16,100 --> 00:01:18,180 before I then, as a last step, 31 00:01:18,180 --> 00:01:21,430 dive into that query parameters feature. 32 00:01:21,430 --> 00:01:23,110 So to sort restaurants, 33 00:01:23,110 --> 00:01:26,042 back in my restaurants.js routes file, 34 00:01:26,042 --> 00:01:28,360 after I've fetched the restaurants, 35 00:01:28,360 --> 00:01:32,280 before I actually hand them off to my template, 36 00:01:32,280 --> 00:01:33,993 I wanna sort them. 37 00:01:34,870 --> 00:01:38,290 And for this, to sort data, 38 00:01:38,290 --> 00:01:41,330 JavaScript has a sort method, 39 00:01:41,330 --> 00:01:44,580 which we can execute on an array of data 40 00:01:44,580 --> 00:01:48,670 and storedRestaurants turns out to be such an array. 41 00:01:48,670 --> 00:01:53,660 Now, this sort method tries to sort the data automatically. 42 00:01:53,660 --> 00:01:57,100 For example, it is able to sort numbers 43 00:01:57,100 --> 00:01:58,780 without any issues 44 00:01:58,780 --> 00:02:01,140 but for more complex data, 45 00:02:01,140 --> 00:02:04,300 like here an array of restaurant objects, 46 00:02:04,300 --> 00:02:09,090 you instead need to pass a function to sort 47 00:02:09,090 --> 00:02:12,620 that will be executed for every restaurant, 48 00:02:12,620 --> 00:02:16,690 and which then will return -1 or 1, 49 00:02:16,690 --> 00:02:19,970 depending on whether two compared restaurants 50 00:02:19,970 --> 00:02:22,283 should change their order or not. 51 00:02:23,170 --> 00:02:24,920 It's a little bit more advanced, 52 00:02:24,920 --> 00:02:27,740 so I'll just show you the code, which we need here 53 00:02:27,740 --> 00:02:30,423 and then I'll explain what this code does. 54 00:02:31,380 --> 00:02:33,460 So we add a function here, 55 00:02:33,460 --> 00:02:36,630 an anonymous function, which I just add here 56 00:02:36,630 --> 00:02:38,980 inside of sort since I only need it here 57 00:02:38,980 --> 00:02:42,860 as a parameter value to sort to be precise. 58 00:02:42,860 --> 00:02:44,620 And this anonymous function 59 00:02:44,620 --> 00:02:49,610 will receive two parameters always automatically 60 00:02:49,610 --> 00:02:52,320 because sort, when we execute this 61 00:02:52,320 --> 00:02:54,790 is in the end executed by the browser, 62 00:02:54,790 --> 00:02:57,420 and the browser will execute this function, 63 00:02:57,420 --> 00:02:59,230 which we pass to sort 64 00:02:59,230 --> 00:03:01,950 for every pair of restaurants, 65 00:03:01,950 --> 00:03:03,580 which the browser compares 66 00:03:03,580 --> 00:03:06,470 to find out how they should be ordered. 67 00:03:06,470 --> 00:03:09,720 So function here will always receive two parameters 68 00:03:09,720 --> 00:03:13,550 because the browser will pass in two parameters. 69 00:03:13,550 --> 00:03:16,810 And we'll always get a pair of restaurants here. 70 00:03:16,810 --> 00:03:19,660 Here I will name them resA and resB 71 00:03:19,660 --> 00:03:22,440 and that stands for the first and the second restaurant, 72 00:03:22,440 --> 00:03:25,480 and all the restaurants will be compared with each other, 73 00:03:25,480 --> 00:03:28,703 step by step by that sort method in the end. 74 00:03:29,980 --> 00:03:32,410 And in here, we can then write our own logic 75 00:03:32,410 --> 00:03:34,653 to determine which restaurant should win. 76 00:03:35,850 --> 00:03:38,276 Now, for this, if we have a look our restaurant data, 77 00:03:38,276 --> 00:03:41,470 it is, of course, worth noting that in the end. 78 00:03:41,470 --> 00:03:44,080 A restaurant, if I restructure this here 79 00:03:44,080 --> 00:03:45,760 so that it's a bit more readable, 80 00:03:45,760 --> 00:03:50,020 has a much of fields that we could use for sorting. 81 00:03:50,020 --> 00:03:54,520 But I actually will sort on the name here. 82 00:03:54,520 --> 00:03:56,470 So I wanna sort on the name 83 00:03:56,470 --> 00:04:00,270 and we sort alphabetically or we flip that 84 00:04:00,270 --> 00:04:03,770 so that we start with the last character in the alphabet. 85 00:04:03,770 --> 00:04:06,223 But as a default, I wanna sort alphabetically. 86 00:04:07,270 --> 00:04:12,270 And for this here, we can check if resA.name, 87 00:04:12,630 --> 00:04:16,603 accessing that name field in that single restaurant object, 88 00:04:17,529 --> 00:04:21,623 if that is greater than resB.name. 89 00:04:23,560 --> 00:04:25,360 If that's the case, 90 00:04:25,360 --> 00:04:28,570 I wanna return one, 91 00:04:28,570 --> 00:04:33,493 else if we make it past this if check, I'll return -1. 92 00:04:34,430 --> 00:04:36,790 If I return one here, 93 00:04:36,790 --> 00:04:40,720 so a value greater zero to be precise, 94 00:04:40,720 --> 00:04:43,230 then the two items will be flipped, 95 00:04:43,230 --> 00:04:48,230 so the second item, resB will be sorted in front of resA, 96 00:04:49,230 --> 00:04:51,870 so they will swap the order. 97 00:04:51,870 --> 00:04:56,480 If I return -1, so a value smaller zero, 98 00:04:56,480 --> 00:04:58,710 then the opposite will be the case. 99 00:04:58,710 --> 00:05:01,410 So then we will not flip these items. 100 00:05:01,410 --> 00:05:04,220 Instead, they will keep their existing order 101 00:05:04,220 --> 00:05:07,880 and resA will stay in front of resB. 102 00:05:07,880 --> 00:05:10,883 That's simply how that sort method works internally. 103 00:05:12,230 --> 00:05:14,150 Now, this might look very cryptic 104 00:05:14,150 --> 00:05:16,590 but let's see what this does. 105 00:05:16,590 --> 00:05:19,110 If I save that, 106 00:05:19,110 --> 00:05:20,780 and I go back and reload now, 107 00:05:20,780 --> 00:05:22,850 you see it is ordered such 108 00:05:22,850 --> 00:05:26,480 that Munich Fines Restaurant comes first. 109 00:05:26,480 --> 00:05:28,990 And I see that it's Fines, not Finest, 110 00:05:28,990 --> 00:05:30,430 which is, of course, a typo, 111 00:05:30,430 --> 00:05:31,530 but let's ignore that. 112 00:05:32,399 --> 00:05:34,770 But what we can see is that this comes first 113 00:05:34,770 --> 00:05:38,270 because M comes before R in the alphabet 114 00:05:38,270 --> 00:05:40,283 and R comes before T. 115 00:05:41,280 --> 00:05:44,700 Now, here we have the same start of the word 116 00:05:44,700 --> 00:05:46,400 but then Test comes first 117 00:05:46,400 --> 00:05:49,600 because it's simply shorter than Test 2. 118 00:05:49,600 --> 00:05:52,480 So this is now the default order we have here, 119 00:05:52,480 --> 00:05:54,760 and this is achieved by this function 120 00:05:54,760 --> 00:05:57,760 being executed automatically by the browser 121 00:05:57,760 --> 00:05:59,470 because we called sort here, 122 00:05:59,470 --> 00:06:02,760 and it will receive two restaurants multiple times, 123 00:06:02,760 --> 00:06:04,690 comparing all the restaurants, 124 00:06:04,690 --> 00:06:06,593 and then we write our own logic 125 00:06:06,593 --> 00:06:09,260 that we wanna compare the names of the restaurants, 126 00:06:09,260 --> 00:06:11,750 and by returning 1 and -1, 127 00:06:11,750 --> 00:06:15,430 we, in the end, tell the browser if the restaurants 128 00:06:15,430 --> 00:06:18,980 that are compared should change their position, 129 00:06:18,980 --> 00:06:22,160 if they should swap their position in the array 130 00:06:22,160 --> 00:06:24,010 or if they shouldn't. 131 00:06:24,010 --> 00:06:25,850 And you can play around with that 132 00:06:25,850 --> 00:06:28,550 and return -1 here and 1 here 133 00:06:28,550 --> 00:06:30,740 to see how results differ 134 00:06:30,740 --> 00:06:32,913 or play around with that condition. 135 00:06:34,080 --> 00:06:35,890 Now, it's a bit more advanced here 136 00:06:35,890 --> 00:06:39,720 and we'll dive deeper into advanced JavaScript later, 137 00:06:39,720 --> 00:06:41,650 but for the moment, it's hopefully clear 138 00:06:41,650 --> 00:06:44,630 that here we are sorting restaurants alphabetically 139 00:06:44,630 --> 00:06:45,683 by their name. 140 00:06:46,620 --> 00:06:48,380 But that was just a start 141 00:06:48,380 --> 00:06:49,930 because now I wanna make sure 142 00:06:49,930 --> 00:06:52,470 that we can actually change that order 143 00:06:52,470 --> 00:06:56,520 by actually having a button here, which we can press. 144 00:06:56,520 --> 00:06:59,863 And for that, of course, we need to go into our template. 145 00:07:01,680 --> 00:07:03,590 So into our views folder 146 00:07:03,590 --> 00:07:07,170 and there, it's the restaurants.ejs file. 147 00:07:07,170 --> 00:07:09,590 Here we have all our restaurants, 148 00:07:09,590 --> 00:07:11,470 our list of restaurants, 149 00:07:11,470 --> 00:07:14,270 and above that list of restaurants here, 150 00:07:14,270 --> 00:07:16,630 so maybe above the unordered list 151 00:07:16,630 --> 00:07:18,440 but below the paragraph, 152 00:07:18,440 --> 00:07:19,880 I'll add a button 153 00:07:19,880 --> 00:07:23,143 where I wanna say Change Order. 154 00:07:25,550 --> 00:07:27,560 Now, if we save that and we reload, 155 00:07:27,560 --> 00:07:29,793 we get that Change Order button here. 156 00:07:31,850 --> 00:07:33,940 Now, this button also should be styled, 157 00:07:33,940 --> 00:07:35,010 and to achieve this, 158 00:07:35,010 --> 00:07:38,653 I'll give it a class, a CSS class of btn. 159 00:07:39,989 --> 00:07:42,310 And we can then add some styling for that 160 00:07:42,310 --> 00:07:45,420 by going to the public folder, our styles 161 00:07:45,420 --> 00:07:47,760 and then restaurants.css. 162 00:07:47,760 --> 00:07:50,700 And here, of course, we already got a bunch of styles, 163 00:07:50,700 --> 00:07:53,280 and I just wanna also use the styles, 164 00:07:53,280 --> 00:07:55,640 which I used on my links here. 165 00:07:55,640 --> 00:07:59,777 So I will apply that on the existing CSS selector, 166 00:07:59,777 --> 00:08:01,650 but then with a comma, 167 00:08:01,650 --> 00:08:06,340 I also add another selector, the btn class selector 168 00:08:06,340 --> 00:08:09,350 so that we use these styles for all the elements 169 00:08:09,350 --> 00:08:12,490 that have a btn class as well. 170 00:08:12,490 --> 00:08:16,440 Now I'll just also add cursor: pointer here, 171 00:08:16,440 --> 00:08:19,190 and add a border of none 172 00:08:19,190 --> 00:08:21,963 to override the default button styles. 173 00:08:25,140 --> 00:08:26,460 And then down here, 174 00:08:26,460 --> 00:08:29,610 I also wanna use that styling when we hover, 175 00:08:29,610 --> 00:08:31,923 so I'll add btn:hover. 176 00:08:34,470 --> 00:08:36,860 If we change all of that, and reload, 177 00:08:36,860 --> 00:08:38,573 now we've got this button here. 178 00:08:39,980 --> 00:08:41,600 Now, of course, clicking that button 179 00:08:41,600 --> 00:08:43,450 doesn't do anything yet. 180 00:08:43,450 --> 00:08:47,113 And that's now the part where we will use query parameters. 181 00:08:48,410 --> 00:08:50,700 I will actually go back to the view here 182 00:08:50,700 --> 00:08:52,860 to the restaurants.ejs file, 183 00:08:52,860 --> 00:08:56,140 and wrap this button into a form, 184 00:08:56,140 --> 00:08:58,000 which is, of course, something we did before 185 00:08:58,000 --> 00:08:59,193 in the course already. 186 00:09:00,450 --> 00:09:03,050 Now, since this is the only button in the form 187 00:09:03,050 --> 00:09:06,670 and we didn't set any other type to that button, 188 00:09:06,670 --> 00:09:10,480 it will automatically, by default, submit that form. 189 00:09:10,480 --> 00:09:12,860 Now that form here, though 190 00:09:12,860 --> 00:09:15,610 doesn't have any data that would be submitted 191 00:09:15,610 --> 00:09:17,620 and therefore, I will add some. 192 00:09:17,620 --> 00:09:19,610 I'll add a input field here, 193 00:09:19,610 --> 00:09:21,673 and this will have a special type. 194 00:09:22,530 --> 00:09:24,000 The type will be hidden 195 00:09:25,540 --> 00:09:28,270 because here I don't wanna have a input field 196 00:09:28,270 --> 00:09:31,540 where the user is able to enter something. 197 00:09:31,540 --> 00:09:34,880 Instead here, I wanna have a pre-defined value, 198 00:09:34,880 --> 00:09:38,120 which I as a developer define. 199 00:09:38,120 --> 00:09:42,400 And hence, I'll set the value attribute to achieve this. 200 00:09:42,400 --> 00:09:44,660 Now, we haven't seen this attribute before 201 00:09:44,660 --> 00:09:48,880 but we can use that to assign a value to input. 202 00:09:48,880 --> 00:09:50,860 Very often, you don't wanna do that 203 00:09:50,860 --> 00:09:53,630 because you wanna let your users enter a value 204 00:09:53,630 --> 00:09:55,890 but here I do wanna do that. 205 00:09:55,890 --> 00:09:59,633 And I'll set this to asc for ascending. 206 00:10:01,700 --> 00:10:04,950 I will later show you how we can change that dynamically 207 00:10:04,950 --> 00:10:08,640 but for the moment, let's hard code asc here, 208 00:10:08,640 --> 00:10:11,943 and give this input a name of order. 209 00:10:12,890 --> 00:10:15,373 Name is up to you but order is quite fitting. 210 00:10:16,890 --> 00:10:19,830 And then here, on that form, 211 00:10:19,830 --> 00:10:23,683 we have to define our action, and our method. 212 00:10:25,190 --> 00:10:29,660 And for action, I now wanna use /restaurants 213 00:10:29,660 --> 00:10:32,640 because I basically just wanna reload the page 214 00:10:32,640 --> 00:10:34,190 on which I already am. 215 00:10:34,190 --> 00:10:37,170 I wanna reload this /restaurants page 216 00:10:37,170 --> 00:10:38,593 on which I am already. 217 00:10:39,990 --> 00:10:42,200 But, and that's now the special thing, 218 00:10:42,200 --> 00:10:44,900 for method, I will not use POST 219 00:10:44,900 --> 00:10:47,530 as we typically do for submitting data, 220 00:10:47,530 --> 00:10:48,690 but instead GET 221 00:10:49,530 --> 00:10:53,120 because whilst it is true that we typically do use POST 222 00:10:53,120 --> 00:10:55,920 for forms, especially if we are dealing 223 00:10:55,920 --> 00:10:57,570 with user-entered data, 224 00:10:57,570 --> 00:11:00,380 here we have kind of a special case. 225 00:11:00,380 --> 00:11:03,250 I'm not dealing with data entered by the user, 226 00:11:03,250 --> 00:11:08,120 and I don't really wanna store data anywhere on the server. 227 00:11:08,120 --> 00:11:11,010 And you typically do use the POST method 228 00:11:11,010 --> 00:11:14,430 if you imply that data will be stored somewhere 229 00:11:14,430 --> 00:11:17,240 in a database or in a file. 230 00:11:17,240 --> 00:11:18,690 Here I don't wanna do that. 231 00:11:18,690 --> 00:11:21,130 Instead, I wanna reload the page, 232 00:11:21,130 --> 00:11:24,480 so get is a quite fitting choice for this method here 233 00:11:24,480 --> 00:11:26,310 and I wanna reload this page 234 00:11:26,310 --> 00:11:30,230 with slightly changed circumstances. 235 00:11:30,230 --> 00:11:32,560 And now what I mean by circumstances 236 00:11:32,560 --> 00:11:35,283 will become visible if you save that file. 237 00:11:36,130 --> 00:11:38,230 And you then go back and reload 238 00:11:38,230 --> 00:11:39,860 and you click on Change Order, 239 00:11:39,860 --> 00:11:42,693 and watch that URL when you click it. 240 00:11:43,740 --> 00:11:45,500 You see, the page did load. 241 00:11:45,500 --> 00:11:47,420 It's the same as before. 242 00:11:47,420 --> 00:11:52,420 But now we have this thing here in the URL, ?order=asc. 243 00:11:56,580 --> 00:11:59,280 That's a so-called query parameter. 244 00:11:59,280 --> 00:12:02,160 It's an extra optional value 245 00:12:02,160 --> 00:12:04,618 that can be added to a URL 246 00:12:04,618 --> 00:12:09,170 that won't change the page that's loaded typically 247 00:12:09,170 --> 00:12:13,240 but instead that might be used on the server-side code 248 00:12:13,240 --> 00:12:16,040 to change what's showing up on the page 249 00:12:16,040 --> 00:12:19,763 or how things are displayed on the page. 250 00:12:21,300 --> 00:12:24,500 And you can add any query parameter here. 251 00:12:24,500 --> 00:12:29,500 If I add ?something=what and I hit Enter, 252 00:12:30,190 --> 00:12:32,683 the page still loads correctly 253 00:12:32,683 --> 00:12:35,550 because when it comes to determining 254 00:12:35,550 --> 00:12:37,840 which route should be loaded, 255 00:12:37,840 --> 00:12:39,610 so when it comes to going 256 00:12:39,610 --> 00:12:41,890 through all these middleware functions 257 00:12:41,890 --> 00:12:44,070 and through all these router functions, 258 00:12:44,070 --> 00:12:47,420 then the query parameter is simply ignored. 259 00:12:47,420 --> 00:12:50,190 We still make it into /restaurants 260 00:12:50,190 --> 00:12:52,640 because the part after the question mark 261 00:12:52,640 --> 00:12:55,060 and the question mark itself is ignored 262 00:12:55,060 --> 00:12:56,750 when it comes to determining 263 00:12:56,750 --> 00:13:00,880 which path is active and which route should be loaded. 264 00:13:00,880 --> 00:13:03,983 And that's really important to keep in mind and understand. 265 00:13:04,940 --> 00:13:07,480 But in the server-side code, 266 00:13:07,480 --> 00:13:10,930 we can now access the query parameter value 267 00:13:10,930 --> 00:13:13,700 and, for example, change the sorting based 268 00:13:13,700 --> 00:13:16,720 on the query parameter value. 269 00:13:16,720 --> 00:13:18,300 For this here in this get route 270 00:13:18,300 --> 00:13:20,506 where I get all my sorted restaurants, 271 00:13:20,506 --> 00:13:24,360 I can get my order, 272 00:13:24,360 --> 00:13:26,950 you can name the constant however you want, 273 00:13:26,950 --> 00:13:28,558 by using my request 274 00:13:28,558 --> 00:13:31,643 and then there accessing .query. 275 00:13:32,660 --> 00:13:35,620 That's a special field that exists 276 00:13:35,620 --> 00:13:37,190 in this request object, 277 00:13:37,190 --> 00:13:40,950 just as we had a body field on that request, 278 00:13:40,950 --> 00:13:43,220 which is only populated if the route 279 00:13:43,220 --> 00:13:45,573 was loaded through a post request though. 280 00:13:46,610 --> 00:13:49,520 But query is always accessible 281 00:13:49,520 --> 00:13:52,787 and that holds any query parameters we might have, 282 00:13:52,787 --> 00:13:55,390 though keep in mind that in general, 283 00:13:55,390 --> 00:13:58,350 those query parameters are always optional, 284 00:13:58,350 --> 00:13:59,943 so you might not have any. 285 00:14:00,970 --> 00:14:04,140 Now, here we could check if three is a order key 286 00:14:04,140 --> 00:14:06,020 in that query object 287 00:14:06,020 --> 00:14:08,699 because req.query will give you an object, 288 00:14:08,699 --> 00:14:11,020 and it might be an empty object 289 00:14:11,020 --> 00:14:13,480 if no query parameters were set 290 00:14:13,480 --> 00:14:15,750 but it might also have an order key 291 00:14:15,750 --> 00:14:18,330 if there is an query parameter 292 00:14:18,330 --> 00:14:19,700 when this page is loaded, 293 00:14:19,700 --> 00:14:22,610 when this route is loaded to be precise. 294 00:14:22,610 --> 00:14:25,763 And therefore, we might have a value here. 295 00:14:26,620 --> 00:14:29,870 Now, therefore, we might wanna actually make this a variable 296 00:14:29,870 --> 00:14:33,120 by using let instead of const, 297 00:14:33,120 --> 00:14:35,730 and then here we can check if order 298 00:14:35,730 --> 00:14:39,120 is maybe not asc for ascending 299 00:14:40,230 --> 00:14:45,230 and if order is maybe also not desc for descending, 300 00:14:45,840 --> 00:14:48,330 if we assume that these are the two values 301 00:14:48,330 --> 00:14:50,030 we would accept, 302 00:14:50,030 --> 00:14:53,100 and in that case, we know it's not set, 303 00:14:53,100 --> 00:14:55,880 at least not to one of our supported values, 304 00:14:55,880 --> 00:14:59,033 and then we could set it to asc as a default. 305 00:15:00,230 --> 00:15:02,380 That would be one way of handling this. 306 00:15:02,380 --> 00:15:07,380 If it is set to asc or desc already, we keep that set value. 307 00:15:08,450 --> 00:15:11,780 And then we can use that value here in our sorting logic 308 00:15:11,780 --> 00:15:13,880 to change that logic 309 00:15:13,880 --> 00:15:17,960 because here I can now check if order 310 00:15:17,960 --> 00:15:20,023 is equal to asc, 311 00:15:20,860 --> 00:15:24,830 and resA.name is greater than resB.name, 312 00:15:24,830 --> 00:15:27,820 in which case I wanna return one here. 313 00:15:27,820 --> 00:15:30,083 And otherwise, return -1. 314 00:15:31,380 --> 00:15:33,960 But I actually also wanna add a else if case 315 00:15:33,960 --> 00:15:37,900 and check if order is maybe equal to desc 316 00:15:37,900 --> 00:15:42,870 and resB.name is greater than resA.name, 317 00:15:42,870 --> 00:15:45,493 in which case, I also wanna return one. 318 00:15:46,920 --> 00:15:48,793 And add some semicolons here. 319 00:15:51,870 --> 00:15:55,690 Alternatively, we merge this all into one long condition, 320 00:15:55,690 --> 00:15:57,640 and we grab this part here 321 00:15:57,640 --> 00:16:00,730 and say if this is true, 322 00:16:00,730 --> 00:16:04,170 or wrapping this with an extra pair of parentheses, 323 00:16:04,170 --> 00:16:07,840 or if the condition I just cut is true, 324 00:16:07,840 --> 00:16:09,690 then I wanna return one, 325 00:16:09,690 --> 00:16:11,853 else we'll always return -1. 326 00:16:14,530 --> 00:16:18,530 If we do that, we'll now take that order query parameter 327 00:16:18,530 --> 00:16:22,920 into account to sort our restaurants differently based 328 00:16:22,920 --> 00:16:26,763 on the value that's stored in that order query parameter. 329 00:16:28,180 --> 00:16:31,130 So going back here, reloading this page, 330 00:16:31,130 --> 00:16:32,720 if I click Change Order, 331 00:16:32,720 --> 00:16:34,360 at the moment, nothing happens 332 00:16:34,360 --> 00:16:38,363 because this always sets order equal to asc. 333 00:16:39,860 --> 00:16:44,270 But not we can also pass the currently set order 334 00:16:44,270 --> 00:16:47,323 into our template. 335 00:16:49,007 --> 00:16:51,170 curOrder could be our key, 336 00:16:51,170 --> 00:16:52,950 and we pass in the order, 337 00:16:52,950 --> 00:16:56,420 so the order that's stored in this order variable. 338 00:16:56,420 --> 00:16:58,640 And then our template, 339 00:16:58,640 --> 00:17:00,950 we can then go to this form 340 00:17:00,950 --> 00:17:03,550 and instead of always setting this to value 341 00:17:03,550 --> 00:17:08,550 equals asc, we can inject a dynamic value here 342 00:17:08,579 --> 00:17:12,200 as we learned it with EJS. 343 00:17:12,200 --> 00:17:15,599 And check which value we currently have in curOrder 344 00:17:15,599 --> 00:17:18,540 to know what our new order should be. 345 00:17:18,540 --> 00:17:20,140 And therefore, instead of doing that, 346 00:17:20,140 --> 00:17:25,140 I'll actually just add nextOrder here as a key, 347 00:17:25,380 --> 00:17:28,270 and go back into restaurants.ejs 348 00:17:28,270 --> 00:17:31,883 and instead of passing curOrder, pass next order. 349 00:17:33,210 --> 00:17:35,963 And then just determine this dynamically. 350 00:17:36,810 --> 00:17:41,810 For this, we can simply add a nextOrder variable here, 351 00:17:43,170 --> 00:17:45,750 which by default is desc 352 00:17:45,750 --> 00:17:48,383 since our default order is ascending. 353 00:17:49,680 --> 00:17:50,770 But I add a if check 354 00:17:50,770 --> 00:17:54,630 where I check if order is actually equal to desc, 355 00:17:54,630 --> 00:17:56,330 so if it was descending, 356 00:17:56,330 --> 00:17:59,290 then instead, the nextOrder should be ascending 357 00:17:59,290 --> 00:18:01,473 so that we switch back to ascending. 358 00:18:03,250 --> 00:18:05,920 And then we have this nextOrder variable, 359 00:18:05,920 --> 00:18:08,090 which I'll pass as a value 360 00:18:08,090 --> 00:18:10,210 into this nextOrder key, 361 00:18:10,210 --> 00:18:12,320 which is exposed to the template 362 00:18:12,320 --> 00:18:15,290 so that in the template, in this form, 363 00:18:15,290 --> 00:18:17,780 we set the value of this hidden input 364 00:18:17,780 --> 00:18:19,470 to that upcoming order, 365 00:18:19,470 --> 00:18:21,800 which is the opposite of the current order. 366 00:18:21,800 --> 00:18:24,510 If we currently are ordering in ascending mode, 367 00:18:24,510 --> 00:18:25,810 then if we click the button, 368 00:18:25,810 --> 00:18:29,210 we wanna switch to descending mode, and vice versa 369 00:18:29,210 --> 00:18:31,793 because that's why the button says Change Order. 370 00:18:33,330 --> 00:18:36,230 If we now save all these files and we reload, 371 00:18:36,230 --> 00:18:40,310 now clicking this button toggles our ordering, 372 00:18:40,310 --> 00:18:41,870 as you can see. 373 00:18:41,870 --> 00:18:44,140 We switch the ordering of restaurants 374 00:18:44,140 --> 00:18:47,700 because our query parameter in the URL changes 375 00:18:47,700 --> 00:18:50,270 whenever I click the button as you can see, 376 00:18:50,270 --> 00:18:53,570 and that is picked up in our route here 377 00:18:53,570 --> 00:18:56,730 where we parse this query parameter 378 00:18:56,730 --> 00:18:59,163 and then change our logic based on it. 379 00:19:00,200 --> 00:19:03,300 And that was a quite long lecture on query parameters 380 00:19:03,300 --> 00:19:05,980 but this can be a useful feature. 381 00:19:05,980 --> 00:19:07,560 It's optional, as you learned. 382 00:19:07,560 --> 00:19:09,860 You don't have to set a query parameter 383 00:19:09,860 --> 00:19:12,070 but you can use query parameters, 384 00:19:12,070 --> 00:19:16,160 especially for things like sorting or ordering. 385 00:19:16,160 --> 00:19:18,660 So whenever you don't wanna change the entire page 386 00:19:18,660 --> 00:19:22,263 that should be loaded but maybe parts of a page. 387 00:19:23,110 --> 00:19:24,490 Now, it is worth noting 388 00:19:24,490 --> 00:19:26,720 that we can still load this page just fine 389 00:19:26,720 --> 00:19:29,060 without setting any query parameter 390 00:19:29,060 --> 00:19:30,560 because it is optional 391 00:19:30,560 --> 00:19:32,960 and hence, you should always write your code such 392 00:19:32,960 --> 00:19:35,280 that you treat it as optional. 393 00:19:35,280 --> 00:19:38,140 So here, for example, I have some fallback code 394 00:19:38,140 --> 00:19:42,180 to set a default value in case the order query parameter 395 00:19:42,180 --> 00:19:43,163 is not set. 396 00:19:44,370 --> 00:19:47,270 You can also set more than one query parameter 397 00:19:47,270 --> 00:19:49,600 by simply adding the ampersand symbol 398 00:19:49,600 --> 00:19:53,530 after your first key-value pair here in the URL, 399 00:19:53,530 --> 00:19:56,993 and then adding another query parameter if you want to. 400 00:19:57,950 --> 00:20:00,670 Again, if you don't handle it, it's not doing anything, 401 00:20:00,670 --> 00:20:04,200 but we could now also look for a something query parameter 402 00:20:04,200 --> 00:20:06,770 in our code here to do something else. 403 00:20:06,770 --> 00:20:09,300 It just depends on what your goals are 404 00:20:09,300 --> 00:20:10,653 and what you wanna achieve. 405 00:20:12,370 --> 00:20:15,360 And therefore, query parameters are the last feature 406 00:20:15,360 --> 00:20:18,370 which I also wanted to introduce here. 407 00:20:18,370 --> 00:20:21,700 We'll see them again later in some concrete examples 408 00:20:21,700 --> 00:20:23,870 but it's now hopefully already clear 409 00:20:23,870 --> 00:20:26,503 what they do and why we have them.