1 00:00:00,450 --> 00:00:06,090 So we've gone to all the trouble of making these forums like the one right now on book now, and we 2 00:00:06,090 --> 00:00:11,880 have another one for searching availability for a particular room on individual rampages like this, 3 00:00:12,270 --> 00:00:13,950 where I can pop up this little dialogue. 4 00:00:14,160 --> 00:00:18,600 And we also have that make reservation page, which looks like this but isn't hooked up to anything 5 00:00:18,600 --> 00:00:18,820 yet. 6 00:00:19,290 --> 00:00:20,670 I think it's called Make Reservation. 7 00:00:21,570 --> 00:00:22,500 Make Reservation. 8 00:00:22,500 --> 00:00:23,430 That looks like it right there. 9 00:00:23,430 --> 00:00:23,870 And it is. 10 00:00:24,420 --> 00:00:29,390 So we need some method of actually handling this posted form data. 11 00:00:29,550 --> 00:00:30,400 How are we going to do that? 12 00:00:30,660 --> 00:00:33,990 Well, obviously we need to do a couple of things. 13 00:00:34,000 --> 00:00:36,090 The first thing is let's do this one first. 14 00:00:36,600 --> 00:00:39,710 We need to actually make this point to something in particular. 15 00:00:39,750 --> 00:00:46,590 So if I go back to my code and I bring up that template search availability right here, it has an action 16 00:00:46,740 --> 00:00:49,720 and the action is currently set to nothing. 17 00:00:49,980 --> 00:00:51,310 So we need to put something in there. 18 00:00:51,900 --> 00:00:57,240 Now, typically, when I'm posting from one page, but I'm on a page and I want to post somewhere, 19 00:00:57,390 --> 00:00:59,140 I will use the same you URL. 20 00:00:59,160 --> 00:01:00,420 So let's look at that you url. 21 00:01:00,510 --> 00:01:02,040 Go back to our page here. 22 00:01:02,400 --> 00:01:03,750 It's search availability. 23 00:01:03,870 --> 00:01:11,010 OK, so let's copy that, including the slash and go back to our code and paste that in there. 24 00:01:12,210 --> 00:01:14,700 And I don't want to get this page. 25 00:01:14,700 --> 00:01:20,430 I get request, if you recall from way back when actually shows the parameters you're putting in the 26 00:01:20,430 --> 00:01:21,790 page right up anywhere else. 27 00:01:21,790 --> 00:01:26,340 So you have questionmark and then parameter name equals parameter value and then an ampersand if you 28 00:01:26,340 --> 00:01:28,200 have a second one, I actually want to post it. 29 00:01:28,760 --> 00:01:30,130 I'm going to change the method to post. 30 00:01:30,780 --> 00:01:31,200 All right. 31 00:01:31,210 --> 00:01:37,470 So now when I go back and look at my code here, reload this page that should show that it's actually 32 00:01:37,470 --> 00:01:40,770 posting and it's going to post to search availability method post. 33 00:01:40,770 --> 00:01:41,280 Perfect. 34 00:01:41,520 --> 00:01:47,340 OK, so I've created that, but I now need to have a root to handle the post. 35 00:01:47,340 --> 00:01:50,950 So let's go back to our code and look at our roots page. 36 00:01:52,080 --> 00:01:57,720 This is our roots code and we have a get for search availability, but we don't have a post. 37 00:01:57,990 --> 00:02:02,190 So I can actually duplicate that and change this to method post. 38 00:02:02,880 --> 00:02:08,670 And that will now catch any requests that post to this URL and take it to a handler. 39 00:02:08,700 --> 00:02:10,340 Well, clearly this is not the right handler. 40 00:02:10,530 --> 00:02:12,990 That's the one that displays the page right here. 41 00:02:13,410 --> 00:02:21,060 So I'm going to copy this pasted underneath it and change its name to post availability. 42 00:02:21,930 --> 00:02:23,550 And that's a convention I tend to use. 43 00:02:23,560 --> 00:02:27,740 So I know which handlers are gets and which handlers are posting that as a post in front of it. 44 00:02:27,750 --> 00:02:29,460 It's actually a post now. 45 00:02:29,460 --> 00:02:31,590 I don't want to render that page right now. 46 00:02:31,590 --> 00:02:34,620 I just want to make sure that I can actually post to that form, which I can't. 47 00:02:34,710 --> 00:02:35,700 But you'll see that in a minute. 48 00:02:36,300 --> 00:02:41,820 And I'm going to do that just by writing, using my response writer, which is this parameter set up 49 00:02:41,820 --> 00:02:42,030 here. 50 00:02:42,030 --> 00:02:43,560 And I'm going to call it a method on a call. 51 00:02:43,560 --> 00:02:43,920 Right. 52 00:02:44,340 --> 00:02:48,240 And it takes, as you can see, when you're all over it, a bite slice of bytes. 53 00:02:48,240 --> 00:02:57,230 And I really just want to put a string posted to search availability, but that's not a slice of bytes. 54 00:02:57,360 --> 00:03:04,290 Now, I can cast that change its type from string to bite merely by surrounding it with this. 55 00:03:06,990 --> 00:03:12,060 And that directive says, take whatever you see inside the parentheses, hear this string and convert 56 00:03:12,060 --> 00:03:13,130 it to a slice of bytes. 57 00:03:13,380 --> 00:03:13,700 All right. 58 00:03:13,710 --> 00:03:18,110 So now I actually have a handler and I'm back to my roots page. 59 00:03:19,110 --> 00:03:25,320 I'm linking to the correct handler as soon as I put the word post in front of this, that's all linking 60 00:03:25,320 --> 00:03:26,190 where it's supposed to be. 61 00:03:26,820 --> 00:03:30,750 So how can I actually test this well and run the application? 62 00:03:30,750 --> 00:03:31,710 So it's running right now. 63 00:03:31,710 --> 00:03:32,460 So I'll stop it. 64 00:03:33,090 --> 00:03:33,900 I'll run it again. 65 00:03:35,130 --> 00:03:36,420 Everything compiled. 66 00:03:36,420 --> 00:03:37,070 That's good. 67 00:03:37,080 --> 00:03:38,490 And it seems like it's correct. 68 00:03:38,490 --> 00:03:42,660 And whenever I post a search availability, it's going to call this handler post availability. 69 00:03:42,960 --> 00:03:46,940 And all that does is write to the browser window posted to search availability. 70 00:03:47,220 --> 00:03:48,380 Let's see if this works. 71 00:03:48,390 --> 00:03:50,010 And I'm telling you right now, it's not going to. 72 00:03:50,010 --> 00:03:52,350 But I'll reload the page to make sure I have the latest version. 73 00:03:52,830 --> 00:03:58,770 I'll put in some dates, so I'll put in the 30th to the first and I'll search. 74 00:03:58,770 --> 00:03:59,760 And this should work. 75 00:04:00,030 --> 00:04:02,340 But what I get is a bad request. 76 00:04:02,990 --> 00:04:03,990 Well, that seems strange. 77 00:04:04,320 --> 00:04:06,810 Let's go back and look at our application. 78 00:04:07,020 --> 00:04:08,140 Nothing showed up here. 79 00:04:09,090 --> 00:04:15,480 Do you remember way back when when I talked about cross site request forgery and when I also talked 80 00:04:15,480 --> 00:04:21,120 about adding default data to our our template data? 81 00:04:21,510 --> 00:04:26,340 Well, let's look at what happens here under my middleware or let's look at our roots first. 82 00:04:26,340 --> 00:04:32,430 OK, here under roots at the very top, I am saying let's see roots there. 83 00:04:32,880 --> 00:04:35,100 I am saying use no surf. 84 00:04:35,310 --> 00:04:40,530 And that is the middleware that says ignore any request. 85 00:04:40,560 --> 00:04:45,930 That is a post that doesn't have a proper cross site request, forgery token. 86 00:04:46,480 --> 00:04:48,060 We've never done anything with that. 87 00:04:48,510 --> 00:04:50,160 But we can easily enough. 88 00:04:50,400 --> 00:04:57,450 First of all, I could just say disable this middleware like that and it should actually work. 89 00:04:57,450 --> 00:04:57,870 All right. 90 00:04:57,870 --> 00:05:06,810 If I stop this and run it again and come back to my page here and show the search availability page 91 00:05:07,440 --> 00:05:15,930 and put in two dates, 24th to the 25th and search, it now works because I turned off that middleware. 92 00:05:15,960 --> 00:05:17,010 Well, that's a bad idea. 93 00:05:17,010 --> 00:05:20,790 You don't want to turn off cross site request, request forgery protection. 94 00:05:21,360 --> 00:05:24,510 So let's go back and turn it on and see how we can fix this. 95 00:05:24,510 --> 00:05:25,950 So I'll stop the application. 96 00:05:26,580 --> 00:05:31,980 I will uncommented that now it's turned back on or will be when I run the application. 97 00:05:32,370 --> 00:05:37,160 But I need some method of actually getting the data from where it is to where it needs to be. 98 00:05:37,770 --> 00:05:40,320 So let's look at our render package here. 99 00:05:40,440 --> 00:05:43,440 And if you recall, we have this add default data. 100 00:05:44,340 --> 00:05:49,520 So when you render a template, the very first thing it does is it gets the template cache and we're 101 00:05:49,530 --> 00:05:56,420 actually creating an array of request right now because we have our default debug turned on our applications, 102 00:05:56,430 --> 00:05:58,650 not in production, but down here. 103 00:05:58,650 --> 00:06:00,180 I call add default data. 104 00:06:00,180 --> 00:06:05,490 So this calls this function at the top of the screen or the top of the page. 105 00:06:05,490 --> 00:06:11,310 And I want to add some data to it and I've passed it template data and I want to set a particular value 106 00:06:11,310 --> 00:06:12,240 on that template data. 107 00:06:12,240 --> 00:06:19,320 And if you recall, we have one called CSS RF token, and I want to make that equal to something in 108 00:06:19,320 --> 00:06:19,860 particular. 109 00:06:19,920 --> 00:06:23,880 And I can grab that SRF token right from the No. 110 00:06:23,880 --> 00:06:24,690 SIRF package. 111 00:06:24,690 --> 00:06:25,980 So no surf. 112 00:06:27,240 --> 00:06:33,810 And what I want to pull is actually the token, but it requires a request. 113 00:06:34,500 --> 00:06:41,850 I don't have a request at this point, so I need to come back down here where I say are up here, where 114 00:06:41,850 --> 00:06:48,360 I say add default data, I need to include error, which is going to be at his request. 115 00:06:49,900 --> 00:06:54,970 And that will, of course, cause an error down here, but I already have the request right now, I 116 00:06:54,970 --> 00:06:59,710 don't I need to get render templates, so I need to actually change that, render template function 117 00:07:00,970 --> 00:07:07,060 and make sure that that takes a request to super http request. 118 00:07:08,500 --> 00:07:13,890 And then, of course, in my handlers everywhere I'm making a call to render template. 119 00:07:13,900 --> 00:07:16,320 I now need to change it to add the request to it. 120 00:07:16,330 --> 00:07:17,210 We can do that in a moment. 121 00:07:17,230 --> 00:07:18,570 First of all, let's finish this up. 122 00:07:19,030 --> 00:07:22,600 This needs to have the request and there it is. 123 00:07:22,600 --> 00:07:23,530 So that all works. 124 00:07:23,530 --> 00:07:25,040 And there's only one error left here. 125 00:07:25,660 --> 00:07:33,190 Let's go back up here and say no sirf CSR token requires can I use always a pointer to a request is 126 00:07:33,190 --> 00:07:36,400 a better put that pointer in there and back down here. 127 00:07:37,060 --> 00:07:41,840 So that'll be an hour and we're going to request has to be a pointer here. 128 00:07:42,250 --> 00:07:43,650 Now all the air should go away. 129 00:07:44,080 --> 00:07:49,420 So the last thing I have to do is to go back to my handlers and everywhere I'm calling that request 130 00:07:50,140 --> 00:07:54,670 or calling that render, I need to pass in the request so we can actually look at the format here. 131 00:07:54,790 --> 00:08:01,090 And it says it requires a response writer, a pointer to a request, the template and the template data. 132 00:08:01,120 --> 00:08:05,140 So right before the template data, I just put in my request, which I already have. 133 00:08:05,140 --> 00:08:07,930 Every time I rendering something, I have that request. 134 00:08:08,530 --> 00:08:09,640 So I get that in the wrong order. 135 00:08:09,760 --> 00:08:10,540 Looks like I did. 136 00:08:11,200 --> 00:08:13,870 Cannot use R as type string wrong spot. 137 00:08:13,960 --> 00:08:15,180 So that's not where it belongs. 138 00:08:15,640 --> 00:08:16,390 Where does it go. 139 00:08:18,230 --> 00:08:19,240 W dinner. 140 00:08:19,390 --> 00:08:22,320 OK, so w are there. 141 00:08:22,330 --> 00:08:25,090 So just me every time I call this put that request in there. 142 00:08:25,390 --> 00:08:26,020 Request. 143 00:08:28,010 --> 00:08:30,610 Request, request. 144 00:08:33,950 --> 00:08:34,700 Request. 145 00:08:37,150 --> 00:08:40,600 Request and down here to request. 146 00:08:41,590 --> 00:08:48,120 All right, so that should compile now, so let's make sure we can run it and it runs, no problem. 147 00:08:48,130 --> 00:08:53,680 Does that fix the problem now that I'm passing that template data, the default CSR token? 148 00:08:53,720 --> 00:08:54,370 Let's find out. 149 00:08:55,120 --> 00:09:00,590 Let's go back here and just go to that page, put in two dates, whatever there. 150 00:09:00,590 --> 00:09:01,810 It doesn't matter at this point. 151 00:09:02,560 --> 00:09:03,490 Let's see if that works. 152 00:09:04,030 --> 00:09:04,330 Nope. 153 00:09:04,330 --> 00:09:05,470 Still a bad request. 154 00:09:05,680 --> 00:09:08,020 Well, there's a bad request there for a very simple reason. 155 00:09:08,530 --> 00:09:14,530 No, SIRF requires that you have a hidden field or at least a field that doesn't have to be hidden will 156 00:09:14,530 --> 00:09:15,310 make it not hidden. 157 00:09:15,340 --> 00:09:19,660 First of all, so we can see how it works and then we'll hide it afterwards on the actual form that's 158 00:09:19,660 --> 00:09:21,470 doing the post and it needs to have a certain name. 159 00:09:21,910 --> 00:09:29,890 So here, back on my search availability form, I'm going to add input type equals and I'll make it 160 00:09:29,890 --> 00:09:32,530 text right now so we can see it name. 161 00:09:32,530 --> 00:09:33,700 And this is the important part. 162 00:09:33,710 --> 00:09:39,580 It has to be called C srf underscore token and value is going to be equal to. 163 00:09:39,580 --> 00:09:46,310 And here's where I can inside those parentheses call my default data, which I called F token. 164 00:09:47,920 --> 00:09:51,640 So if we go back here and just look at our config, I think it's the config. 165 00:09:52,600 --> 00:09:55,870 No it's render. 166 00:09:59,030 --> 00:10:03,830 Add default data, this is of type tity, which is under models template data. 167 00:10:03,860 --> 00:10:04,920 So let's look at template data. 168 00:10:04,940 --> 00:10:07,460 We have a field here called CSR of Tolkan. 169 00:10:08,390 --> 00:10:11,760 So let's go back to our page and actually make sure this is closed. 170 00:10:12,170 --> 00:10:12,890 Save it. 171 00:10:13,070 --> 00:10:17,930 And because I'm rebuilding the template request on every request, I should be able to see this now. 172 00:10:18,140 --> 00:10:20,000 So I come here and look. 173 00:10:20,180 --> 00:10:26,450 There is my CSR of Tolkan and if I view the source of this page, you can see it's right here. 174 00:10:26,450 --> 00:10:29,150 It's a long string of random characters. 175 00:10:29,180 --> 00:10:34,550 Now, if I reload this while viewing source, it changes on every request. 176 00:10:35,000 --> 00:10:35,990 You see, that's different now. 177 00:10:36,020 --> 00:10:37,970 So right now it starts with Kepi. 178 00:10:38,000 --> 00:10:41,770 I reload the page, scroll down, and now it starts with XDA seven. 179 00:10:41,780 --> 00:10:44,090 And that's what makes the SRF tokens so useful. 180 00:10:44,480 --> 00:10:47,220 They are changed every single time you load the page. 181 00:10:47,840 --> 00:10:56,780 So if I do nothing else now except fill in the data here 11 12 and search it posts. 182 00:10:56,810 --> 00:10:59,060 So there's our CSR protection. 183 00:10:59,240 --> 00:10:59,630 All right. 184 00:11:00,230 --> 00:11:04,530 So let's go back to our code and let's make this input type equals hidden. 185 00:11:04,730 --> 00:11:08,020 So it looks a little better and reload that page. 186 00:11:08,180 --> 00:11:12,680 So we'll go back to search availability and now it's hidden, but it's still there. 187 00:11:13,100 --> 00:11:14,270 We can view the source. 188 00:11:14,270 --> 00:11:14,810 Scroll down. 189 00:11:14,810 --> 00:11:16,010 And there it is, Berbick. 190 00:11:16,020 --> 00:11:21,150 So we've got a new type for our form, a hidden type, and now we can actually submit to this. 191 00:11:21,200 --> 00:11:21,470 All right. 192 00:11:21,480 --> 00:11:22,610 So we can submit to it. 193 00:11:22,970 --> 00:11:25,340 But what are we doing right now? 194 00:11:25,340 --> 00:11:33,230 If we go back to our roots and we look at this particular path, this route, search availability matches 195 00:11:33,230 --> 00:11:35,580 a post request and it calls post availability. 196 00:11:36,260 --> 00:11:38,680 So in here, I don't want to just post that. 197 00:11:38,780 --> 00:11:40,380 Let's see if we actually get the form data. 198 00:11:41,150 --> 00:11:42,770 So, first of all, how are we going to do that? 199 00:11:42,860 --> 00:11:45,760 Well, you remember on this form, let me hide this. 200 00:11:46,550 --> 00:11:50,080 We actually gave the name, gave each of the inputs a name. 201 00:11:50,420 --> 00:11:53,810 So this input, the hidden one, has a name of CSF token. 202 00:11:54,230 --> 00:11:57,620 This input, which is our start date, has a name of start. 203 00:11:57,920 --> 00:12:01,010 And this input, which is our end date, has a name event. 204 00:12:01,010 --> 00:12:03,350 So it looks like I want to get start and end. 205 00:12:03,590 --> 00:12:06,560 How am I going to get that out of the request? 206 00:12:07,430 --> 00:12:10,930 Well, it's actually pretty straightforward goal makes this ever so easy. 207 00:12:10,940 --> 00:12:17,870 So I'm going to say I'm going to create two variables start and that's going to be equal to our dot 208 00:12:17,930 --> 00:12:25,640 form dot get and the name of the form input, which is start and I'll duplicate that and create one 209 00:12:25,640 --> 00:12:27,980 called end are not formed. 210 00:12:28,370 --> 00:12:30,310 Get dot end in this case. 211 00:12:30,320 --> 00:12:41,480 So this names start matches this name over here, start on the input and this name end here matches 212 00:12:41,480 --> 00:12:44,210 the name of this input end here. 213 00:12:44,300 --> 00:12:49,130 And by default when you pull something out of a form post it is a string. 214 00:12:49,130 --> 00:12:54,380 And that's important because you're occasionally actually a lot going to need to cast the type that 215 00:12:54,380 --> 00:12:59,660 you get, which is a string into the format that you want, which might be an integer. 216 00:12:59,660 --> 00:13:03,490 It might be a date, it might be a float, it could be any and lots of different things. 217 00:13:04,100 --> 00:13:05,660 So I've got these two values. 218 00:13:06,350 --> 00:13:11,390 Let's actually write more useful data here instead of just writing posted search availability. 219 00:13:11,390 --> 00:13:16,400 Let's say the start date is start date. 220 00:13:17,600 --> 00:13:17,960 Oops. 221 00:13:18,380 --> 00:13:19,610 And we'll start taking this. 222 00:13:19,630 --> 00:13:24,660 We'll use a format as part of S and end date is Percent. 223 00:13:24,710 --> 00:13:29,720 S, and then we'll put at the end of that the values we're going to substitute in those placeholders 224 00:13:30,050 --> 00:13:31,160 start and end. 225 00:13:31,520 --> 00:13:34,390 And then at the beginning I need to put format s. 226 00:13:34,400 --> 00:13:35,330 Print F. 227 00:13:37,220 --> 00:13:40,760 As protests, all right, so what do we have here? 228 00:13:40,790 --> 00:13:42,750 We have an air, we have one, too. 229 00:13:43,090 --> 00:13:45,950 Looks like I don't have enough clothes in quotes from Prince's. 230 00:13:45,950 --> 00:13:46,510 Probably. 231 00:13:47,510 --> 00:13:48,200 Yeah, that's it. 232 00:13:48,830 --> 00:13:51,050 OK, so let's recompile this and rerun it. 233 00:13:53,860 --> 00:14:00,400 Stop the application, start it back up and let's go try this again, so we'll reload the page to make 234 00:14:00,400 --> 00:14:02,940 sure everything is current, will choose our dates. 235 00:14:02,980 --> 00:14:11,590 I'll choose the 24th, leaving on the 25th and search start date is the 24th and date is the 25th. 236 00:14:11,840 --> 00:14:12,340 Great. 237 00:14:12,340 --> 00:14:18,820 So now we know how to capture information from a afar, but we have more forms to search and we're going 238 00:14:18,820 --> 00:14:20,290 to look at this one next. 239 00:14:20,310 --> 00:14:21,060 Let's go back. 240 00:14:21,460 --> 00:14:27,160 We're going to look at how we do this one, how we do the check availability, which is exactly the 241 00:14:27,160 --> 00:14:27,880 same thing. 242 00:14:27,880 --> 00:14:31,570 And I could pass it to the same handler and just do a post request. 243 00:14:32,080 --> 00:14:35,320 But I want to make this one a little more complicated. 244 00:14:35,770 --> 00:14:38,730 I don't want to leave the page when I do the search here. 245 00:14:38,740 --> 00:14:42,790 I don't want to reload this entire page just because I'm checking availability. 246 00:14:43,180 --> 00:14:49,750 Instead, I want to, behind the scenes, send a request to a different handler, which will take a 247 00:14:49,750 --> 00:14:50,590 post request. 248 00:14:51,040 --> 00:14:58,150 And I want to return the response using Ajax, which is an acronym which actually stands for asynchronous 249 00:14:58,150 --> 00:14:59,950 JavaScript and XML. 250 00:15:00,400 --> 00:15:03,850 But like most developers these days, I'm not going to use XML. 251 00:15:03,850 --> 00:15:06,910 I'm going to use the JavaScript object notation called JSON. 252 00:15:07,420 --> 00:15:08,760 So we'll do that in the next lecture. 253 00:15:08,770 --> 00:15:12,430 We'll figure out how to write the JavaScript to create an HTP request. 254 00:15:12,430 --> 00:15:19,330 Behind the scenes, using Ajax will create a handler to handle that request and we'll just send back 255 00:15:19,330 --> 00:15:20,830 some data showing that it worked. 256 00:15:21,550 --> 00:15:26,170 We're not not actually going to write the logic to search for dates yet, but we'll do that before too 257 00:15:26,170 --> 00:15:26,400 long. 258 00:15:26,590 --> 00:15:27,850 So we'll do this in the next election. 259 00:15:27,850 --> 00:15:33,970 We'll learn how to write some JavaScript for JSON and Ajax and how to read and write the response.