1 00:00:02,150 --> 00:00:08,270 So the last page we need to make is one that actually allows the user to make a reservation, so they 2 00:00:08,270 --> 00:00:12,080 go to the website, they find the search, they search for the dates. 3 00:00:12,500 --> 00:00:13,700 Those dates are available. 4 00:00:13,700 --> 00:00:16,180 Then there they get taken to the page to make a reservation. 5 00:00:16,190 --> 00:00:17,720 So we have to make a page for that. 6 00:00:17,730 --> 00:00:23,690 So I'll create a new file, which I will call make a reservation. 7 00:00:24,620 --> 00:00:30,200 And again, we have to cut this up into our templates at some point or go templates, but I'm not worried 8 00:00:30,200 --> 00:00:30,830 about that yet. 9 00:00:30,840 --> 00:00:36,680 So I'm going to do is copy the contact page, which is currently mostly empty and pasted in here. 10 00:00:36,830 --> 00:00:43,400 And I'll find the section where I actually have the content right here and I will make this my form. 11 00:00:44,220 --> 00:00:46,050 OK, so what do we need? 12 00:00:46,070 --> 00:00:47,450 First thing we need is a title. 13 00:00:47,450 --> 00:00:56,210 Each one I'll just call this make a reservation and then I need to have a form form. 14 00:00:56,390 --> 00:00:58,040 Method equals post. 15 00:00:58,040 --> 00:01:01,190 I want to post this and I want to post it somewhere. 16 00:01:01,190 --> 00:01:05,660 Action equals I'll leave that empty for now because we haven't set up a route in our go code to handle 17 00:01:05,660 --> 00:01:05,960 that. 18 00:01:06,680 --> 00:01:12,290 And it will be class needs validation because I want to use my client side validation. 19 00:01:12,650 --> 00:01:14,600 That means I need to put no validate in there. 20 00:01:15,290 --> 00:01:17,150 There's my opening and closing form. 21 00:01:18,110 --> 00:01:19,930 Now, what kind of information do we need? 22 00:01:19,970 --> 00:01:24,800 We probably need more than we're actually going to put it into this form because we just want to build 23 00:01:24,800 --> 00:01:26,970 a form and make it work and we can improve it later. 24 00:01:26,990 --> 00:01:35,150 So for right now, let's go with div class equals form group to hold my form input and I want this to 25 00:01:35,150 --> 00:01:40,970 be pushed down a little bit, so I'll give it a margin at the top of five and inside of that or create 26 00:01:40,970 --> 00:01:41,360 a label. 27 00:01:42,290 --> 00:01:52,550 I want to know their first name and I'll make that for equals first name and underneath that I will 28 00:01:52,550 --> 00:01:59,090 have an input input type equals text name equals first name. 29 00:01:59,720 --> 00:02:01,370 ID equals first name. 30 00:02:02,300 --> 00:02:04,010 And do I need anything else in there? 31 00:02:04,370 --> 00:02:05,930 I'm going to put one more in there. 32 00:02:05,940 --> 00:02:12,170 I want to make it required obviously, because I want their first name and I'm also going to put autocomplete. 33 00:02:14,780 --> 00:02:19,280 Equalised off, I don't want it to automatically start typing whatever they typed in the first name 34 00:02:19,280 --> 00:02:21,510 on some other form somewhere else, I'm just going to put that in there. 35 00:02:21,530 --> 00:02:22,370 Sometimes it works. 36 00:02:22,760 --> 00:02:25,940 It works really well, except Chrome sometimes causes grief. 37 00:02:25,940 --> 00:02:26,720 But I'm going to put it in there. 38 00:02:26,720 --> 00:02:27,620 It's not going to hurt anything. 39 00:02:28,040 --> 00:02:29,020 So I have a first name. 40 00:02:29,570 --> 00:02:38,760 Now, let's copy that and paste it and put it in their last name, which will be your last name and 41 00:02:38,840 --> 00:02:42,440 will copy that and pasted here and pasted here. 42 00:02:42,830 --> 00:02:43,280 Good. 43 00:02:43,640 --> 00:02:44,870 Then I'll copy this whole thing. 44 00:02:44,870 --> 00:02:45,890 I want their first name. 45 00:02:46,190 --> 00:02:47,150 I want their last name. 46 00:02:47,150 --> 00:02:48,980 Let's get their email address and their phone number. 47 00:02:50,360 --> 00:02:51,980 I don't need to merge emergent top here. 48 00:02:52,010 --> 00:02:52,900 Let's get rid of that. 49 00:02:52,920 --> 00:02:54,410 I don't need to merge on top here. 50 00:02:54,410 --> 00:02:55,930 I just want to push the first one down. 51 00:02:56,510 --> 00:03:08,540 So email of type, email, name of email, ID of email for email and we'll copy this whole thing and 52 00:03:08,540 --> 00:03:17,480 do one for phone and phone is of type or for phone type text name. 53 00:03:18,350 --> 00:03:23,090 Phone ID is phone and I need to way to submit the form. 54 00:03:23,090 --> 00:03:26,030 So let's put a horizontal rule in there and just put in a button. 55 00:03:26,480 --> 00:03:36,830 Input type equals submit class equals button button primary to give it a nice bootstrap primary button 56 00:03:37,220 --> 00:03:40,520 and a value make reservation. 57 00:03:42,200 --> 00:03:46,160 All right, let's save that and open it up in Firefox and see what it looks like. 58 00:03:46,160 --> 00:03:47,540 So it comes. 59 00:03:50,830 --> 00:03:51,680 Something's wrong there. 60 00:03:51,700 --> 00:03:56,200 It doesn't look quite right, class equals form control on my input. 61 00:03:58,730 --> 00:04:11,030 Class equals form control, let's copy that and paste it and pasted their pasted their paste pasted. 62 00:04:12,500 --> 00:04:17,720 Save this, go back, reload that that looks better, kind of fix my level where I said email. 63 00:04:17,720 --> 00:04:21,380 I have to put phone phone number. 64 00:04:21,830 --> 00:04:22,250 Perfect. 65 00:04:23,240 --> 00:04:28,640 So there I think we have all the content we need to start cutting our pages up and doing something useful 66 00:04:28,640 --> 00:04:29,040 with them. 67 00:04:29,060 --> 00:04:32,210 But first, let's add some JavaScript and some nice styling.