1 00:00:01,770 --> 00:00:09,030 OK, so it's time to cut up our HTML templates into goaland templates, but the first thing I'm going 2 00:00:09,030 --> 00:00:14,340 to do is I'm going to commit all of these changes to get because I want to have a copy that I can roll 3 00:00:14,340 --> 00:00:24,150 back to if things go wrong, saving HTML templates and off it goes, commit and push and push. 4 00:00:24,690 --> 00:00:27,450 And the fan and my computer is going a little crazy right now. 5 00:00:27,480 --> 00:00:28,560 I apologize for that. 6 00:00:28,590 --> 00:00:30,210 Hopefully it will stop before too long. 7 00:00:31,440 --> 00:00:37,530 OK, so we already have some HTML templates and they are in the folder called templates right here. 8 00:00:37,590 --> 00:00:43,830 And I can see that I have one for my base layout, one for my home page, one for creating a reservation 9 00:00:44,070 --> 00:00:47,960 and one for the about page, but I don't have one for the Rosea. 10 00:00:47,970 --> 00:00:48,870 So let's create those. 11 00:00:49,530 --> 00:00:59,420 So create a new file which I will call Generals' Page Temple at it. 12 00:01:00,240 --> 00:01:01,530 And what's our other room code? 13 00:01:01,880 --> 00:01:02,910 I can't remember now. 14 00:01:04,380 --> 00:01:10,250 That's just Rum's major suite will create one for majors as well. 15 00:01:10,260 --> 00:01:16,210 So new file majors dot temple add. 16 00:01:16,650 --> 00:01:22,140 OK, so we have one for making a reservation, one for the base layout. 17 00:01:22,410 --> 00:01:30,960 And up here we have under our HTML source we have about contact generals' index, Meijers and Reservation. 18 00:01:31,200 --> 00:01:33,380 So down here I actually don't have a reservation once. 19 00:01:33,390 --> 00:01:42,120 I better create one of those two new file and I'll call that search availability page up tempo. 20 00:01:43,230 --> 00:01:48,330 So I have let's see, let's make sure we've got the right one, two, three, four, five. 21 00:01:48,340 --> 00:01:49,320 Don't count the base. 22 00:01:49,320 --> 00:01:53,280 Six one, two, three, four, five, six. 23 00:01:53,280 --> 00:01:53,760 Perfect. 24 00:01:54,430 --> 00:02:01,590 OK, so just to get a starting page starting place, I will copy what's on the about page pasted into 25 00:02:01,590 --> 00:02:09,240 generals and just get rid of what's inside the content and then I'll create all of this, copy all of 26 00:02:09,240 --> 00:02:10,740 this and put it in Meijers. 27 00:02:10,920 --> 00:02:14,430 Right now I have what I need to start cutting things up. 28 00:02:14,430 --> 00:02:17,210 So we'll start by looking at the reservation page. 29 00:02:17,250 --> 00:02:21,900 This is my HTML page reservation and I have everything at the top. 30 00:02:22,140 --> 00:02:27,270 I have the content and then I have the bottom, which includes JavaScript and all sorts of things like 31 00:02:27,270 --> 00:02:27,540 that. 32 00:02:28,410 --> 00:02:34,730 So I want to make my base page have something at the top on every page. 33 00:02:34,740 --> 00:02:40,080 So if we look at the reservation page, we want everything from the declaration of the document type 34 00:02:40,890 --> 00:02:44,250 down to and including the navigation. 35 00:02:44,400 --> 00:02:50,850 So let's copy that, not cut it because I might have to go back, go to our base layout and replace 36 00:02:51,240 --> 00:02:53,910 everything in this section before the block. 37 00:02:53,910 --> 00:02:56,790 Content with what I've just copy now. 38 00:02:56,790 --> 00:02:58,440 I need do I need to make any changes here? 39 00:02:58,440 --> 00:03:02,610 Yes, I need to make a change to reference the static CSC file. 40 00:03:02,610 --> 00:03:07,110 It has to have a slash in front of it because we'll be hitting this from our Web server. 41 00:03:07,500 --> 00:03:12,690 Therefore, it needs to know that the static folder should be found at the root level of the application, 42 00:03:13,050 --> 00:03:21,330 which also means that I need to copy the CSFs from my HTML source static folder to my actual static 43 00:03:21,330 --> 00:03:21,720 folder. 44 00:03:21,780 --> 00:03:23,310 So let's drag it down there. 45 00:03:23,370 --> 00:03:30,480 I will take that and I'll just move it right over into static and sure, refactor it. 46 00:03:30,960 --> 00:03:32,580 And if it goes so there it is. 47 00:03:32,940 --> 00:03:33,660 So that's been moved. 48 00:03:33,660 --> 00:03:33,870 Yeah. 49 00:03:33,870 --> 00:03:37,080 So I have that part of my basically at the top now I need the bottom. 50 00:03:37,740 --> 00:03:43,850 So that would be everything from I don't need this click me button or that paragraph text. 51 00:03:43,870 --> 00:03:45,870 I'll just get rid of that so I don't confuse myself. 52 00:03:46,500 --> 00:03:53,610 That would be the footer, all of these parts and I'll just take all this JavaScript up to and including 53 00:03:53,610 --> 00:04:00,540 the closing HTML tag and put that in my base layer, which replaces just these two things paste. 54 00:04:00,700 --> 00:04:03,120 All right, let's have a look at this and make sure we didn't miss anything. 55 00:04:07,120 --> 00:04:12,730 All right, this block just doesn't belong there anymore, so that's the section that I can put page 56 00:04:12,730 --> 00:04:18,790 specific JavaScript on individual pages and I want that to appear just after all of my imports. 57 00:04:19,300 --> 00:04:21,190 OK, now let's go up and look at our navigation. 58 00:04:21,760 --> 00:04:25,150 So right now in our navigation, we're going to have to fix these links as well. 59 00:04:25,150 --> 00:04:29,740 It doesn't link to index here anymore for the home page just goes to slash. 60 00:04:30,340 --> 00:04:32,380 It doesn't go to about Dorridge HTML. 61 00:04:32,380 --> 00:04:38,440 It goes to about a better open my roots and make sure I'm doing this right to open my roots. 62 00:04:38,440 --> 00:04:41,050 File about a slash about. 63 00:04:41,050 --> 00:04:41,450 Yes. 64 00:04:41,980 --> 00:04:51,280 OK then we have generals and majors which I do not exist yet, but I'll create the routes now so I'll 65 00:04:51,280 --> 00:05:03,910 call it generals dash quarters and slash majors dash sweet and then I'll create routes for those right 66 00:05:03,910 --> 00:05:04,240 now. 67 00:05:04,240 --> 00:05:12,670 So I'll just do that like this duplicate duplicate generals quarters which will go to generals which 68 00:05:12,670 --> 00:05:13,510 doesn't exist yet. 69 00:05:14,680 --> 00:05:20,020 And Meijers, is it a plural majors yet with an sweet. 70 00:05:22,060 --> 00:05:23,230 Which will go to Meijers 71 00:05:26,470 --> 00:05:27,700 now just for fun. 72 00:05:28,000 --> 00:05:29,920 Quickly, let's create those roads. 73 00:05:30,430 --> 00:05:39,130 Are those handlers so it can be something as simple as this copy paste paste and this will be generals 74 00:05:39,760 --> 00:05:45,910 and this will be manger's and I'm not going to render the template make reservation page. 75 00:05:45,910 --> 00:05:51,150 I'm going to render the template majors, four majors and generals, four generals. 76 00:05:51,520 --> 00:05:53,860 So this is generals, generals. 77 00:05:55,120 --> 00:05:57,050 And this one will become majors. 78 00:05:59,830 --> 00:06:01,920 OK, so those handlers exist now. 79 00:06:01,930 --> 00:06:18,760 So they got to fix these comments paced around the room page and this one is generals renders the room 80 00:06:18,760 --> 00:06:19,360 page. 81 00:06:19,570 --> 00:06:22,660 OK, so let's make sure our roots aren't errors anymore. 82 00:06:22,670 --> 00:06:23,320 They're not. 83 00:06:23,470 --> 00:06:24,820 Let's go to our base layout. 84 00:06:25,090 --> 00:06:27,030 That looks good and let's fix our things here. 85 00:06:27,070 --> 00:06:32,130 Last one reservation taught HTML that's going to be searching availability. 86 00:06:32,140 --> 00:06:35,620 So let's say search availability. 87 00:06:35,630 --> 00:06:36,700 That will be our path. 88 00:06:37,590 --> 00:06:40,180 Go back to our roots and let's create one for that. 89 00:06:42,450 --> 00:06:43,420 What does this one go to? 90 00:06:44,970 --> 00:06:47,430 That's the make reservation Petruchio and I worry about that. 91 00:06:48,930 --> 00:06:49,910 Let's go back to this one. 92 00:06:49,930 --> 00:06:53,970 So this is major suite is going to be search availability. 93 00:06:58,090 --> 00:07:03,970 And this should take us to availability, which doesn't exist yet, so we'll just go create it and all 94 00:07:03,970 --> 00:07:09,730 we're going to do is render the page and this sort of cold availability. 95 00:07:14,310 --> 00:07:24,270 Renders the search available, availability page and the correct template is called search availability. 96 00:07:24,780 --> 00:07:26,630 OK, let's try this. 97 00:07:27,360 --> 00:07:31,750 Go run command web, go everything, compile. 98 00:07:31,790 --> 00:07:32,550 That's a good sign. 99 00:07:32,860 --> 00:07:36,200 Let's read it, create a new tab and go to localhost 88. 100 00:07:37,770 --> 00:07:39,750 OK, so we got our navigation bar. 101 00:07:39,760 --> 00:07:40,320 That's good. 102 00:07:40,620 --> 00:07:47,580 The homepage link works the about page link works generals quarters doesn't have anything in it but 103 00:07:47,580 --> 00:07:50,100 it took us their major suite. 104 00:07:50,100 --> 00:07:51,480 Doesn't go anywhere. 105 00:07:51,570 --> 00:07:52,170 Why not. 106 00:07:52,350 --> 00:08:00,030 What's in the major suite rendered template majors top page that triple majors top page. 107 00:08:00,030 --> 00:08:01,050 Because there's nothing in there. 108 00:08:01,050 --> 00:08:01,520 That's why. 109 00:08:01,530 --> 00:08:09,360 OK, but it still should have that search availability is empty, so that should be much like this one. 110 00:08:09,780 --> 00:08:13,500 It's like copy paste. 111 00:08:14,980 --> 00:08:20,590 Look now, Texas, US search availability, major, Switzerland, that doesn't seem to work, and if 112 00:08:20,590 --> 00:08:24,660 I look at the page content, get element by ideas, no care. 113 00:08:24,670 --> 00:08:25,830 Those are all JavaScript errors. 114 00:08:25,840 --> 00:08:27,120 Don't care about those right now. 115 00:08:27,730 --> 00:08:28,760 So why is that one not working? 116 00:08:28,780 --> 00:08:29,640 Well, let's figure it out. 117 00:08:29,650 --> 00:08:30,430 Go to the roots. 118 00:08:32,880 --> 00:08:40,660 And the rules say four majors, Sweetgrass Majors Suite, and I'm going to slash major suite, just 119 00:08:40,680 --> 00:08:43,470 make sure it's the same, you know, quote, they're. 120 00:08:45,590 --> 00:08:47,720 OK, that's fine. 121 00:08:48,500 --> 00:08:55,920 So when I go to major suite, I'm running this handler, which says Meijers paged Tempo. 122 00:08:56,980 --> 00:08:58,970 Oh, I want to call that template. 123 00:08:59,360 --> 00:09:00,140 Refactor that. 124 00:09:01,160 --> 00:09:04,460 Rename the page. 125 00:09:07,220 --> 00:09:07,790 That's better. 126 00:09:07,880 --> 00:09:08,240 OK. 127 00:09:08,780 --> 00:09:09,150 All right. 128 00:09:09,170 --> 00:09:10,400 So I think we have. 129 00:09:10,550 --> 00:09:11,650 Do we checked the last one. 130 00:09:11,730 --> 00:09:14,960 Let's close this up book now. 131 00:09:14,960 --> 00:09:18,530 Takes us to that contact takes us nowhere contact that time. 132 00:09:18,560 --> 00:09:19,910 We have one more link to fix. 133 00:09:20,300 --> 00:09:22,370 So that's under base layout. 134 00:09:23,540 --> 00:09:27,440 Let's hide this and make that contact. 135 00:09:29,540 --> 00:09:33,110 OK, so now we've got to clean up some JavaScript. 136 00:09:33,140 --> 00:09:35,840 We've got to clean up some content for the pages. 137 00:09:35,850 --> 00:09:37,500 So let's start through them one at a time. 138 00:09:37,520 --> 00:09:43,730 We'll go right back to localhost, created the homepage, and let's get our homepage and put that in 139 00:09:43,730 --> 00:09:52,130 there so we can find our index page till we find the part that's down here, which begins right after 140 00:09:52,130 --> 00:09:56,440 the NAV and goes all the way down to but not including the footer. 141 00:09:56,570 --> 00:09:57,340 Copy that. 142 00:09:58,430 --> 00:10:04,880 Go to our home page template and pasted in here paste safe. 143 00:10:05,540 --> 00:10:08,400 So when I reload this, that looks better. 144 00:10:08,420 --> 00:10:08,810 Good. 145 00:10:09,170 --> 00:10:09,760 All right. 146 00:10:11,330 --> 00:10:20,450 OK, one thing I'm going to do though is put a slash in front of these stacks just to save myself problems 147 00:10:20,450 --> 00:10:21,070 in the future. 148 00:10:21,080 --> 00:10:22,160 And that should still work. 149 00:10:22,880 --> 00:10:24,320 And it does OK. 150 00:10:24,950 --> 00:10:28,220 And if I scroll down here, it says make reservation now. 151 00:10:28,220 --> 00:10:29,830 It's not going to be make a reservation anymore. 152 00:10:29,840 --> 00:10:33,690 It's going to be search availability. 153 00:10:33,710 --> 00:10:35,630 Save that reload. 154 00:10:36,530 --> 00:10:38,480 And they should take me to my search availability picture. 155 00:10:38,480 --> 00:10:40,520 And it does OK for the home page is functional. 156 00:10:41,030 --> 00:10:43,300 Let's go to the Web page right now. 157 00:10:43,310 --> 00:10:45,890 We have stuff in there that we don't need in there, so let's get rid of that. 158 00:10:48,280 --> 00:10:51,770 About I don't need any of this stuff. 159 00:10:52,730 --> 00:10:58,230 I'll just say this is the about page and save it and reload it and this is the Web page. 160 00:10:58,270 --> 00:10:59,940 OK, let's go to our rooms page. 161 00:11:00,660 --> 00:11:02,280 We'll start with the general's quarters. 162 00:11:02,280 --> 00:11:04,140 So we find our generals up here. 163 00:11:06,000 --> 00:11:07,110 We find the content. 164 00:11:07,110 --> 00:11:12,790 That's after the NAV, which starts here and goes down, too, but does not include the footer. 165 00:11:12,810 --> 00:11:13,500 Copy that. 166 00:11:13,950 --> 00:11:18,210 And we open up our generals page and paste that in the content section. 167 00:11:18,510 --> 00:11:19,580 OK, save that. 168 00:11:20,460 --> 00:11:22,260 So now, is there anything I need to fix in there? 169 00:11:22,280 --> 00:11:22,470 Yes. 170 00:11:22,470 --> 00:11:27,550 This put a slash in front of the static for the picture and reload the general's page. 171 00:11:28,530 --> 00:11:28,860 Nope. 172 00:11:29,080 --> 00:11:29,790 Still not there. 173 00:11:29,790 --> 00:11:31,560 Slash static images. 174 00:11:31,560 --> 00:11:33,410 Generals dash quarter stopping. 175 00:11:33,930 --> 00:11:34,690 Do I have that? 176 00:11:34,710 --> 00:11:35,310 No, I don't. 177 00:11:35,850 --> 00:11:42,420 So let's copy those pictures over the generals quarters and Meijers quarters go into images. 178 00:11:44,290 --> 00:11:45,010 Reflektor. 179 00:11:46,430 --> 00:11:54,580 OK, that's better close this, close that and let's see what's next. 180 00:11:54,590 --> 00:11:56,970 Next is major sweep. 181 00:11:57,380 --> 00:12:07,610 So we just got our copy, our content out of Meijers right here, everything below the nav and not including 182 00:12:07,610 --> 00:12:07,980 the footer. 183 00:12:08,150 --> 00:12:17,600 Copy that opener Meijers template, which is right here pasted in the content section, put a slash 184 00:12:17,630 --> 00:12:19,220 in front of static four images. 185 00:12:19,800 --> 00:12:22,280 OK, and let's reload that. 186 00:12:23,060 --> 00:12:23,570 Perfect. 187 00:12:23,760 --> 00:12:24,310 OK. 188 00:12:24,710 --> 00:12:27,860 Next, we have a book now which is search availability. 189 00:12:27,980 --> 00:12:32,720 So we've got to get the search availability part, which I believe we called reservation dot html. 190 00:12:33,980 --> 00:12:41,390 We did so get everything, not including the footer and not including the nav. 191 00:12:41,810 --> 00:12:47,450 Copy that, paste that into search availability right in the content block. 192 00:12:47,570 --> 00:12:48,440 Save that. 193 00:12:48,440 --> 00:12:52,130 We need to fix any path names the action lead empty. 194 00:12:52,550 --> 00:12:57,020 Don't need that right now and I should be able to reload that because it work. 195 00:12:57,570 --> 00:12:58,820 OK, that doesn't work. 196 00:12:59,030 --> 00:12:59,630 Why not. 197 00:13:04,980 --> 00:13:10,830 We'll sort that out in a minute and see if we have any more pages to do, first contact is contact, 198 00:13:10,830 --> 00:13:13,100 which doesn't exist because we don't have a handler. 199 00:13:13,770 --> 00:13:21,000 So let's go back and create the handler, which is under route's route's. 200 00:13:23,120 --> 00:13:26,960 Groups, so we don't have a contact, so let's just create contact. 201 00:13:27,590 --> 00:13:28,280 Contact. 202 00:13:32,750 --> 00:13:35,600 Which should go to a handler called Contact. 203 00:13:40,220 --> 00:13:50,030 Contact, contact and search availability page, but contact page, does that exist about General? 204 00:13:50,060 --> 00:13:52,530 No, we don't have a contact page, but we can do that pretty quickly. 205 00:13:52,580 --> 00:13:56,630 So we'll just copy this one or the other pages even easier. 206 00:13:57,590 --> 00:14:07,370 Select our copy, create a new template and file contact on page that he pasted in there and say this 207 00:14:07,370 --> 00:14:08,630 is the contact page. 208 00:14:09,650 --> 00:14:13,910 OK, and go back to our roots and make sure we link those up there. 209 00:14:14,000 --> 00:14:16,880 They contact goes to contact. 210 00:14:17,390 --> 00:14:18,920 OK, so let's stop this. 211 00:14:19,310 --> 00:14:19,940 Run that. 212 00:14:23,050 --> 00:14:26,870 And we should now be able to get to the contact page and we can. 213 00:14:27,100 --> 00:14:29,680 All right, so what seems to be broken right now? 214 00:14:30,040 --> 00:14:33,250 We're going to have to hook that up in a minute, but it's under this book now. 215 00:14:33,970 --> 00:14:36,760 My dates and my calendar is not showing up. 216 00:14:37,090 --> 00:14:39,680 Uncut air document get element by idea. 217 00:14:39,700 --> 00:14:42,150 So here's a JavaScript error and we're going to see this a lot. 218 00:14:42,160 --> 00:14:45,390 And it says it's on search availability 132. 219 00:14:45,400 --> 00:14:47,590 So if I click on that, it should show me that line. 220 00:14:47,920 --> 00:14:48,860 And it does. 221 00:14:48,880 --> 00:14:49,980 So let's make this bigger. 222 00:14:50,830 --> 00:14:53,880 And it's saying, get out of it by Ahar Colaba. 223 00:14:53,950 --> 00:14:54,930 So there's that. 224 00:14:54,940 --> 00:14:56,080 That's what's causing me grief. 225 00:14:56,350 --> 00:15:02,530 My JavaScript on every page is throwing a JavaScript error, because I'm saying as soon as it executes 226 00:15:02,530 --> 00:15:04,150 the page, it's finding this script tag. 227 00:15:04,170 --> 00:15:08,290 It's saying, go get the document with the idea of Claverton when we deleted that. 228 00:15:08,290 --> 00:15:09,400 So we don't have that anymore. 229 00:15:10,060 --> 00:15:12,910 Also, it doesn't belong on this page. 230 00:15:13,060 --> 00:15:15,060 So let's just find that. 231 00:15:16,360 --> 00:15:24,540 And it should be on my base layout, this part that says document get element by ID right here. 232 00:15:24,550 --> 00:15:31,720 So this including that HTML form and this attention that's causing grief. 233 00:15:31,720 --> 00:15:34,740 So I need to cut that out of there because I'm going to use it somewhere else. 234 00:15:35,160 --> 00:15:39,580 I don't want to lose it, so I'm just going to create a temporary file and I'll just use my favorite 235 00:15:39,580 --> 00:15:43,920 text editor Sublime and paste it in it because I'm going to need that in a minute. 236 00:15:44,620 --> 00:15:49,300 So if I now save this page, that JavaScript error should go away. 237 00:15:49,330 --> 00:15:50,200 Let's make sure it does. 238 00:15:52,490 --> 00:16:01,210 We'll bring up the console cleared out and reload the page, so it's just not finding a favor icon don't 239 00:16:01,210 --> 00:16:01,820 care about that. 240 00:16:01,840 --> 00:16:04,440 This should work and it does. 241 00:16:04,570 --> 00:16:05,160 Perfect. 242 00:16:05,980 --> 00:16:07,390 So we have that working on. 243 00:16:07,390 --> 00:16:12,190 The last thing I want to do is have that dialog pop up on this page. 244 00:16:12,790 --> 00:16:15,390 That means I need to put a listener on that button. 245 00:16:15,400 --> 00:16:19,330 So let's go to the general quarters page, which is right here. 246 00:16:19,900 --> 00:16:25,480 And I'm going to put JavaScript that exists only on this page, which means I can go in the section 247 00:16:25,480 --> 00:16:27,550 just as I go up here to find content. 248 00:16:27,680 --> 00:16:32,190 I can say define Jautz, because that's what I called that block. 249 00:16:32,710 --> 00:16:34,080 So whatever I put in here. 250 00:16:34,510 --> 00:16:44,250 And so if I put just a comment in here like this script, console, log, hello. 251 00:16:45,370 --> 00:16:47,320 Not a comment will put a console log in there. 252 00:16:47,320 --> 00:16:53,360 And then I go back and reload the general squirters page and view the source and scroll to the bottom. 253 00:16:54,160 --> 00:16:55,420 I should have. 254 00:17:00,360 --> 00:17:01,270 General's quarters. 255 00:17:01,300 --> 00:17:07,680 OK, so there's that good I should have somewhere in here console that long. 256 00:17:07,730 --> 00:17:08,150 There it is. 257 00:17:08,610 --> 00:17:14,460 So because I put it on that page, this script appears only on the generals quarters page because I 258 00:17:14,460 --> 00:17:16,380 put it in this block right here. 259 00:17:16,380 --> 00:17:23,790 Define jazz, which is actually defined in the bass live right down here. 260 00:17:24,960 --> 00:17:33,330 So that allows me to put HTML that's specific to that particular page or JavaScript is specific to that 261 00:17:33,330 --> 00:17:34,020 particular page. 262 00:17:34,020 --> 00:17:35,250 Only on that page. 263 00:17:35,400 --> 00:17:35,810 All right. 264 00:17:35,940 --> 00:17:39,750 So let's go back to the general layout and say, what do we actually want in here? 265 00:17:39,750 --> 00:17:41,550 Console log hello's. 266 00:17:41,550 --> 00:17:42,320 Not very helpful. 267 00:17:42,600 --> 00:17:46,800 We actually want this button, which is right here, has a link. 268 00:17:46,840 --> 00:17:53,610 I'm going to give that this hash hashmark exclamation point called hash bang that just says don't do 269 00:17:53,610 --> 00:17:54,840 anything if you click on this. 270 00:17:54,840 --> 00:18:05,970 But I'm going to give this an ID and I'll call it ID, check a real mobility button that says it's OK. 271 00:18:06,810 --> 00:18:13,260 And that JavaScript I saved a little while ago, a copy of here and I'll paste it down here and I'll 272 00:18:13,260 --> 00:18:16,470 just say document get by id not color button. 273 00:18:16,830 --> 00:18:22,200 I want this to be that check availability button. 274 00:18:22,500 --> 00:18:29,910 When that's clicked, create this HTML in a variable and fire up that, that little prompt that we did 275 00:18:29,910 --> 00:18:30,290 a while ago. 276 00:18:30,300 --> 00:18:31,170 Let's see if that works. 277 00:18:31,200 --> 00:18:32,580 So back to my web browser. 278 00:18:33,660 --> 00:18:37,110 Reload the generals quarters page, clear this off. 279 00:18:37,380 --> 00:18:45,910 Reload E is no date picture full minute jass and it's saying date picture full mindshare. 280 00:18:45,930 --> 00:18:47,160 So there's an error there. 281 00:18:47,390 --> 00:18:48,660 Let's just ignore that for the moment. 282 00:18:48,660 --> 00:18:49,350 We'll come back to it. 283 00:18:49,350 --> 00:18:50,310 Let's see if this works. 284 00:18:52,390 --> 00:18:55,400 And it does, except I didn't put my Z index in there. 285 00:18:55,450 --> 00:18:57,240 All right, so this could put the Z index in there. 286 00:18:57,250 --> 00:19:00,280 I must not have copied that over when I copied over the success. 287 00:19:01,570 --> 00:19:04,090 So that's understating success. 288 00:19:04,090 --> 00:19:06,380 Styles, data pickers. 289 00:19:06,380 --> 00:19:08,740 That index 1000 should be 10000. 290 00:19:08,770 --> 00:19:11,260 I must have deleted that zero without realizing it. 291 00:19:11,290 --> 00:19:12,270 Let's try that again. 292 00:19:12,520 --> 00:19:14,510 Reload, check availability. 293 00:19:14,530 --> 00:19:15,400 That's better. 294 00:19:15,910 --> 00:19:22,540 Now, we still have this area here, date picture for Mingus and it's saying it can't e is not. 295 00:19:22,540 --> 00:19:25,180 So it's trying to create a picture and it can't find one. 296 00:19:26,050 --> 00:19:27,370 Well, what else am I doing wrong then? 297 00:19:28,060 --> 00:19:33,370 Under my generals' page I have document get owned by I.D. logged that. 298 00:19:34,710 --> 00:19:44,710 I bet over here on my base layout I'm trying to create a date picture even if there is not one there, 299 00:19:44,710 --> 00:19:45,420 it is right there. 300 00:19:45,880 --> 00:19:52,150 So this should not fire unless there's actually a date picture on that page, which means I can cut 301 00:19:52,150 --> 00:19:52,870 it out of here. 302 00:19:53,500 --> 00:19:55,900 And what page do actually need that date picture on? 303 00:19:55,910 --> 00:20:01,690 Well, the only page I need it on, because I'm adding it programmatically on this button is this page 304 00:20:02,110 --> 00:20:05,440 over here book now, which is search availability. 305 00:20:05,500 --> 00:20:09,970 So I can just put this right in its page, specific JavaScript. 306 00:20:09,970 --> 00:20:12,430 So define Jass. 307 00:20:15,770 --> 00:20:23,270 Script pasted in there and then put my end for the block, and that should work and there should be 308 00:20:23,270 --> 00:20:25,010 no JavaScript errors on this page. 309 00:20:25,100 --> 00:20:29,090 So I'll clear this off reloader and it's the favor. 310 00:20:29,100 --> 00:20:30,340 I don't care about that. 311 00:20:30,350 --> 00:20:36,080 That's just a little favorite icon that will appear up here or on some browsers or when you bookmark 312 00:20:36,080 --> 00:20:38,020 it and put it on your bookmarks, but don't care about that. 313 00:20:38,030 --> 00:20:40,780 I'll do that as one of the last things in this entire project. 314 00:20:41,390 --> 00:20:44,020 Let's just make sure that we have no more JavaScript errors. 315 00:20:44,020 --> 00:20:46,520 So home page, no JavaScript errors. 316 00:20:46,520 --> 00:20:47,780 I'll make this a little narrower. 317 00:20:47,780 --> 00:20:54,770 So I get my menu back there about gurt, just the whole not find the favor. 318 00:20:54,770 --> 00:20:58,730 I don't care about that room's generals quarters. 319 00:20:58,730 --> 00:20:59,080 Good. 320 00:20:59,420 --> 00:21:02,930 I still have to hook up the button here on this suite, but there should be no errors. 321 00:21:02,930 --> 00:21:09,530 And there's not just the thayeb icon not showing up, but now I should have my calendars and I do. 322 00:21:09,770 --> 00:21:10,730 And contact. 323 00:21:11,210 --> 00:21:11,690 Perfect. 324 00:21:11,810 --> 00:21:12,340 All right. 325 00:21:12,470 --> 00:21:14,510 So the only thing missing is a favorite icon. 326 00:21:14,510 --> 00:21:17,390 And this one button over here, which is easy enough to do. 327 00:21:17,870 --> 00:21:25,520 I can just go back to my Generals' page, copy this defined Gispert and it's Inverloch. 328 00:21:25,970 --> 00:21:31,610 Open up my Meijers page and put it in right here at the very bottom. 329 00:21:32,150 --> 00:21:37,460 And when I say that and go back to the major suite, reload the page, I have uncaught error. 330 00:21:37,460 --> 00:21:41,780 I guess I got to give the ID, the button and ID, so I just copy the button right off the generals 331 00:21:41,780 --> 00:21:43,760 page this one. 332 00:21:43,760 --> 00:21:45,170 One, two, three, copy. 333 00:21:45,920 --> 00:21:52,760 Go to the majors page and pasted it in there and now reload it and life should be good. 334 00:21:52,760 --> 00:21:53,810 And it is. 335 00:21:53,810 --> 00:21:55,070 And I have my calendars. 336 00:21:55,190 --> 00:21:55,720 All right. 337 00:21:56,600 --> 00:22:03,800 So what we've done is we've copied all of our HTML from our static pages into our goaland templates 338 00:22:04,100 --> 00:22:07,870 and we've created our necessary forms and we're pretty much ready to go. 339 00:22:08,300 --> 00:22:09,620 We also have our handlers. 340 00:22:09,620 --> 00:22:12,070 Let's just make absolutely sure that we didn't miss anything. 341 00:22:12,590 --> 00:22:18,860 So when I go to my roots roots file, which is right over here, I have everything, including make 342 00:22:18,860 --> 00:22:21,770 reservation, let's make sure that one shows up the way it's supposed to. 343 00:22:22,530 --> 00:22:31,700 I, I actually tested that one and go back to Firefox and paste that part of the URL here and return 344 00:22:32,090 --> 00:22:35,590 and there's the page and that should do exactly what it's supposed to do. 345 00:22:35,600 --> 00:22:36,140 Perfect. 346 00:22:36,650 --> 00:22:38,270 So we're all set now. 347 00:22:38,270 --> 00:22:45,140 We can actually start doing something in go to handle posting searches for reservations, making reservations, 348 00:22:45,140 --> 00:22:50,060 all that fun stuff, and eventually we'll get around to making a favorite icon just so we don't see 349 00:22:50,060 --> 00:22:51,590 that error showing up at our console. 350 00:22:51,980 --> 00:22:52,490 All right. 351 00:22:52,700 --> 00:22:55,700 That was a little disorganized, but it always is. 352 00:22:55,700 --> 00:23:00,710 Whenever I'm cutting up email templates, I invariably make mistakes and you will, too. 353 00:23:00,710 --> 00:23:03,140 So I'm not going to edit any of these mistakes out. 354 00:23:03,140 --> 00:23:07,070 I'm just going to leave them there so you can see how it actually works for even for someone that's 355 00:23:07,070 --> 00:23:11,210 been working in this field for a very long time, that's enough for this time around. 356 00:23:11,210 --> 00:23:13,190 We'll pick it up again in the next lecture.