1 00:00:00,630 --> 00:00:06,870 So now I want to start working on the actual interactive part of our site, and that's the part where 2 00:00:06,870 --> 00:00:13,680 people get to search for reservations, to search for a date range and decide whether or not they actually 3 00:00:13,830 --> 00:00:17,550 want to stay on a certain day and whether or not the room is available on the days they want to stay 4 00:00:17,550 --> 00:00:17,740 there. 5 00:00:18,210 --> 00:00:21,330 So I'm on the reservation page right now and it's just a placeholder. 6 00:00:21,330 --> 00:00:25,730 But we're going to use this to build a form and forms are kind of cool. 7 00:00:25,860 --> 00:00:31,440 So I'm back on the bootstrap documentation and I'm going to go to, let's see, content. 8 00:00:31,860 --> 00:00:34,750 And in there, maybe it's under here somewhere. 9 00:00:34,770 --> 00:00:37,200 Yeah, there it is under component's forms. 10 00:00:37,200 --> 00:00:39,560 And this tells us how we can build forms. 11 00:00:39,560 --> 00:00:43,920 So this is the sort of thing we're going to be building right here, a place where people can type things 12 00:00:43,920 --> 00:00:49,710 in and submit the actual form to find out whether or not the dates that they want are available. 13 00:00:50,250 --> 00:00:51,270 So how do we do that? 14 00:00:51,300 --> 00:00:54,870 Well, here's an example of a form, and that is one way to do it. 15 00:00:54,870 --> 00:01:02,460 So I can just copy this just as a starter and go over to my reservations page and I'll change this to 16 00:01:03,840 --> 00:01:08,810 search for availability, which you can call whatever you want, but I'm going to call it that. 17 00:01:08,820 --> 00:01:10,470 I'm going to move that down a little bit. 18 00:01:10,470 --> 00:01:16,200 And remember, we can use that using do that by using class, merge on top and we'll put five. 19 00:01:16,200 --> 00:01:18,410 I'll move it down a fair bit and there's got to be a dash in there. 20 00:01:18,900 --> 00:01:26,070 So if I save that and then paste the form in and format a little bit better and this form is going to 21 00:01:26,070 --> 00:01:26,790 change a lot. 22 00:01:26,800 --> 00:01:29,340 So don't worry that it doesn't have the right information yet. 23 00:01:29,670 --> 00:01:33,090 Save it and go back and reload this page and just see what it looks like. 24 00:01:33,660 --> 00:01:36,360 Search for availability, but already it looks pretty good. 25 00:01:37,050 --> 00:01:43,250 So what kinds of things do we need to know at the point where we're searching for availability? 26 00:01:43,890 --> 00:01:48,640 Will all we really need to know at this point is a starting date and an ending date. 27 00:01:48,870 --> 00:01:51,170 So this is really not appropriate. 28 00:01:51,810 --> 00:01:55,400 So let's go back here and change the label. 29 00:01:55,410 --> 00:01:58,290 First of all, let's look at the actual way a form is built. 30 00:02:00,180 --> 00:02:03,600 So I'm going to space these things out so we could see them a little bit. 31 00:02:04,230 --> 00:02:11,340 And here a form begins with a form tag and you can just use a form tag, but it actually needs a little 32 00:02:11,340 --> 00:02:12,390 more information. 33 00:02:13,080 --> 00:02:17,670 Every form has to have an action and that is an HTML attribute. 34 00:02:17,700 --> 00:02:24,000 So you put the keyword action followed by equals sign, followed by something in parentheses. 35 00:02:24,840 --> 00:02:29,970 And the action is where do you want the information filled out on this form to be sent? 36 00:02:29,970 --> 00:02:33,100 And where you're going to send it, of course, is to some you are out. 37 00:02:33,120 --> 00:02:35,790 So we're actually not going to make this form functional right now. 38 00:02:35,910 --> 00:02:36,990 So we'll leave that empty. 39 00:02:37,230 --> 00:02:44,360 We can't make it functional until we actually start working and go and handling the posted form data. 40 00:02:44,760 --> 00:02:50,780 But we can fill out is method equals and it's either get or post. 41 00:02:51,630 --> 00:02:54,770 Well, let's look at the difference between these two will make the action right now. 42 00:02:54,780 --> 00:02:59,040 We'll just to show how this works, will say the action is equal to this page. 43 00:02:59,220 --> 00:03:02,730 So it is reservation on HTML. 44 00:03:02,730 --> 00:03:07,680 So we'll make the action the same thing as this page, same address as this page that his HTML. 45 00:03:08,010 --> 00:03:11,940 And I'll make the method equal to get, which can be upper case or lower case. 46 00:03:11,940 --> 00:03:16,410 It's entirely up to you and I'm going to get rid of the password because we don't need the password 47 00:03:16,680 --> 00:03:19,020 and I'm just going to leave this email address. 48 00:03:19,020 --> 00:03:28,100 I'll relabel that to starting date and then I will change the help text here, which is something that 49 00:03:29,310 --> 00:03:34,380 enter your starting date and we'll make this really a stupid form right now. 50 00:03:34,380 --> 00:03:40,020 We'll make it smarter later in the form of year to year, month, month data. 51 00:03:40,410 --> 00:03:44,730 And I know the Americans listening to this don't like that format, but this is the ISO standard and 52 00:03:44,730 --> 00:03:46,680 I'm in Canada so I can put whatever I want. 53 00:03:46,680 --> 00:03:47,550 And of course, so can you. 54 00:03:47,550 --> 00:03:49,110 If you don't like that format, choose another one. 55 00:03:49,830 --> 00:03:52,620 But that's the format will be using when we actually submit data. 56 00:03:52,620 --> 00:03:56,910 But we're not going to force people to type it in a few other things here. 57 00:03:57,030 --> 00:03:59,670 Label, for example, input email. 58 00:03:59,670 --> 00:04:02,400 Well this is for some ID. 59 00:04:02,640 --> 00:04:05,160 I'm going to call this start date. 60 00:04:06,120 --> 00:04:10,380 So this has to match the input, which is this part. 61 00:04:10,380 --> 00:04:14,610 The input actually draws this part of the form, the part where they can type things in. 62 00:04:15,300 --> 00:04:21,780 It has to match whatever the label, the the for tag on the before attribute on the label tag is. 63 00:04:22,230 --> 00:04:27,420 So this has an ID and will change that to start date and something. 64 00:04:27,420 --> 00:04:30,330 For some reason I've never understood why, but they always do this. 65 00:04:31,080 --> 00:04:36,240 The people who write the documentation at Bootstrap leave the most important part of the form out, 66 00:04:36,390 --> 00:04:39,510 and that is the name of the attribute of the input attribute. 67 00:04:39,780 --> 00:04:42,840 And the name here can be whatever I want, but I'm going to call it start date. 68 00:04:42,840 --> 00:04:44,460 So it has this name of start date. 69 00:04:44,460 --> 00:04:45,870 It has the idea of start date. 70 00:04:46,200 --> 00:04:47,880 It's a type email. 71 00:04:47,880 --> 00:04:50,820 Well, let's make that text because we don't require this to be an email. 72 00:04:51,450 --> 00:04:55,020 So an input of type text, class of form control. 73 00:04:55,470 --> 00:04:58,110 All that does is make it look like a bootstrap form. 74 00:04:58,110 --> 00:04:59,070 In other words, nice. 75 00:05:00,130 --> 00:05:07,390 The ID matches the four four attribute on the the label, the name, and this is critical because that's 76 00:05:07,390 --> 00:05:14,550 what we're going to use to pull information out of the post Engo and the described by is email helpable. 77 00:05:14,560 --> 00:05:18,400 Call this start date help just because that's what it actually is. 78 00:05:18,400 --> 00:05:23,730 And all that does is allow screen readers to read some text it. 79 00:05:24,370 --> 00:05:24,780 All right. 80 00:05:24,790 --> 00:05:27,140 So we have that and we don't need this checkbox. 81 00:05:27,140 --> 00:05:34,460 So we'll get rid of that and we'll save this and go look at our form and reload. 82 00:05:34,840 --> 00:05:38,790 OK, so search for availability and I've got to put my dad in there. 83 00:05:38,800 --> 00:05:47,530 Now, you'll remember that I gave this form the type input type of text and that I gave the form itself 84 00:05:47,530 --> 00:05:49,120 the method of get. 85 00:05:49,150 --> 00:05:50,890 So let's submit this and see what happens. 86 00:05:51,230 --> 00:05:53,080 Nothing's going to happen except we'll come back to this page. 87 00:05:53,080 --> 00:06:00,100 But I'll put the date in here, 20 21 zero six zero one June, the first 20 21. 88 00:06:00,430 --> 00:06:03,520 I look up here where it says reservation got HTML. 89 00:06:04,030 --> 00:06:07,540 I'm submitting this form using the method of get. 90 00:06:08,410 --> 00:06:13,990 When I submit it, it actually takes me to reservationist html start date equals notice how it put that 91 00:06:13,990 --> 00:06:15,190 information back there. 92 00:06:15,410 --> 00:06:19,780 OK, so that is probably misnamed. 93 00:06:19,780 --> 00:06:20,880 The file looks like I did. 94 00:06:20,890 --> 00:06:23,770 Let me go back here and fix that just so it'll work the way we want it to be. 95 00:06:23,780 --> 00:06:27,610 This file is called Reservation Dot html and I'm going to oh yes. 96 00:06:27,610 --> 00:06:29,260 I'm not on a web server so I have to do this. 97 00:06:29,920 --> 00:06:32,920 Let's go back here and just load the page, get. 98 00:06:37,600 --> 00:06:39,970 Open go here. 99 00:06:40,690 --> 00:06:43,010 Hopefully this will actually do it this time. 100 00:06:43,450 --> 00:06:50,950 Put some date in there, 20, 21 zero once a bit and it does takes me back here and it put whatever 101 00:06:50,950 --> 00:06:58,150 I entered in the form after a question mark, the name of the the input attribute, which matches what 102 00:06:58,150 --> 00:07:04,870 you see right here, the name of the input attribute right here equals whatever I typed in. 103 00:07:04,870 --> 00:07:10,600 So if I can type in something here like 20 twenty zero six zero one and hit submit, all that's going 104 00:07:10,600 --> 00:07:15,190 to change is the date changes from what it was to what I entered. 105 00:07:15,410 --> 00:07:18,020 OK, so that is what a get does. 106 00:07:18,040 --> 00:07:20,020 Now what if I change it to a post. 107 00:07:20,020 --> 00:07:22,120 Well, I can't hear because I'm not running a web server. 108 00:07:22,360 --> 00:07:29,290 But the important thing is if I run this as a post, it's actually going to not show this information. 109 00:07:30,490 --> 00:07:35,530 When you submit a form using post, it hides all that data, doesn't put it in the address bar of a 110 00:07:35,530 --> 00:07:38,860 web browser and kind of puts it encodes it differently. 111 00:07:39,610 --> 00:07:42,470 When you put it as a get, it does encode it differently. 112 00:07:42,490 --> 00:07:48,970 Now, the advantage of putting something in a get is if I submit the form using get and then hit the 113 00:07:48,970 --> 00:07:52,480 back button, my web browser, it'll just display the previous page. 114 00:07:52,480 --> 00:07:57,400 Probably won't repopulate the form data, but it will actually display the page. 115 00:07:57,880 --> 00:08:03,670 If I submit a form using post and hit the back button on a web browser, you get a little word warning 116 00:08:03,670 --> 00:08:07,990 Dylon that says this page wants to submit a form again. 117 00:08:08,000 --> 00:08:09,680 Are you sure you want to proceed, yes or no? 118 00:08:09,700 --> 00:08:11,530 So that's one of the differences between the two. 119 00:08:11,560 --> 00:08:12,790 Now, there are ways around that. 120 00:08:12,790 --> 00:08:16,840 And when we actually get to processing form, data will handle those situations. 121 00:08:17,020 --> 00:08:19,360 But for right now, we're just going to build a form. 122 00:08:19,730 --> 00:08:21,940 So I have a starting date probably. 123 00:08:21,940 --> 00:08:23,680 I'd like to have an ending date, too. 124 00:08:24,050 --> 00:08:25,000 I could do this. 125 00:08:25,030 --> 00:08:34,240 I could come here, just copy this whole thing, paste it down here, call this ending date, ending 126 00:08:34,240 --> 00:08:42,910 date and call this end date and copy the four and make it the ID and make it the name and call this 127 00:08:42,910 --> 00:08:43,540 end date. 128 00:08:43,540 --> 00:08:55,390 Help and copy that and paste it here and hail into your ending date in the form of your month month 129 00:08:55,390 --> 00:08:55,720 data. 130 00:08:55,720 --> 00:08:56,290 And I work. 131 00:08:56,680 --> 00:08:57,400 I can actually do that. 132 00:08:57,460 --> 00:08:59,290 So I have a starting date and I have an ending date. 133 00:08:59,860 --> 00:09:03,700 It would be nicer though if there were two changes to this form. 134 00:09:03,700 --> 00:09:04,000 No. 135 00:09:04,000 --> 00:09:06,280 One, let's put these things beside each other. 136 00:09:06,310 --> 00:09:11,680 So put a starting date here and right beside it, put an ending date here and then have my submit submit 137 00:09:11,680 --> 00:09:12,520 button underneath it. 138 00:09:12,820 --> 00:09:19,360 And also, if what I clicked on this, it displayed a calendar instead of forcing people to remember 139 00:09:19,360 --> 00:09:26,830 to type a four digit year and a hyphen and a two month and a hyphen and a two digit that day and a hyphen, 140 00:09:26,980 --> 00:09:27,880 which is a real pain. 141 00:09:28,090 --> 00:09:28,840 But we can do that. 142 00:09:28,870 --> 00:09:30,130 We can change it really easily. 143 00:09:30,610 --> 00:09:31,480 We can change the first. 144 00:09:31,480 --> 00:09:33,310 Let's just do the calendar pick first. 145 00:09:33,310 --> 00:09:40,660 So modern browsers have a type of date for input and a type of date for input. 146 00:09:40,960 --> 00:09:47,830 So if I save this and reload the page and click in here now I have a date picker so so I can come in 147 00:09:47,830 --> 00:09:56,410 here and say, oh well, I don't want 20-20, I want 2021, I want to June and I want that's fine. 148 00:09:56,410 --> 00:09:57,460 So that's that's good. 149 00:09:57,850 --> 00:09:58,840 I got that now. 150 00:09:58,840 --> 00:10:01,720 I want June the first perfect. 151 00:10:01,840 --> 00:10:06,220 And now the dates and exactly the right format URL in a format I can work with. 152 00:10:06,220 --> 00:10:11,770 Anyway, the only problem with this is if I copy this, I'm in Firefox right now. 153 00:10:11,770 --> 00:10:19,510 If I start up say Chrome and paste in the same address, yes, you can access files on my desktop. 154 00:10:20,860 --> 00:10:27,370 It doesn't work quite the same way, so, for example, I can click on the y y y y and start typing 155 00:10:27,370 --> 00:10:32,710 2021, but to make the calendar come up, I actually have to click over here and it's a different looking 156 00:10:32,710 --> 00:10:33,250 calendar. 157 00:10:33,730 --> 00:10:42,160 That's because the actual generation of the calendar using the input type equals date is delegated to 158 00:10:42,160 --> 00:10:43,020 the browser. 159 00:10:43,030 --> 00:10:48,030 So browsers often well, they all have their own date picture if they have one at all. 160 00:10:48,040 --> 00:10:49,670 Some just leave it as a text input. 161 00:10:50,290 --> 00:10:56,080 So this is sufficient for our purposes now, but really down the road, I'm probably going to want to 162 00:10:56,080 --> 00:10:59,050 install a slightly better calendar picture. 163 00:10:59,710 --> 00:11:04,240 All right, let's let's go back and think about what we're going to do next. 164 00:11:04,240 --> 00:11:10,960 We want to actually move this from down here to up here, and then we want to put in something that 165 00:11:10,960 --> 00:11:15,970 makes it clear whether or not a date is available or we can't do that last part until we actually get 166 00:11:15,970 --> 00:11:16,430 to go. 167 00:11:16,540 --> 00:11:17,530 But we can get going. 168 00:11:17,530 --> 00:11:18,730 We can do certain other things. 169 00:11:18,730 --> 00:11:23,680 We could say this should be required field and this should be a required field. 170 00:11:23,680 --> 00:11:28,000 In other words, I shouldn't be able to submit this form like I am right now that's actually giving 171 00:11:28,000 --> 00:11:28,750 me an invalid date. 172 00:11:28,750 --> 00:11:32,620 But again, that's from Chrome, not from us at all. 173 00:11:33,220 --> 00:11:34,560 But we'll go back to Firefox. 174 00:11:34,560 --> 00:11:36,520 So I'm used to using and reload the page. 175 00:11:36,850 --> 00:11:39,100 And here it's we have a calendar picture. 176 00:11:39,100 --> 00:11:41,160 But what if what if they don't specify an end date? 177 00:11:41,170 --> 00:11:42,650 What if they try to submit it right now? 178 00:11:42,650 --> 00:11:43,750 Well, that's a bit of a problem. 179 00:11:43,750 --> 00:11:46,410 We need to make sure that both fields are required. 180 00:11:46,930 --> 00:11:50,500 We'll do that and a little bit more cleanup in the next lecture.