OK, so it's time to cut up our HTML templates into goaland templates, but the first thing I'm going
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
back to if things go wrong, saving HTML templates and off it goes, commit and push and push.
And the fan and my computer is going a little crazy right now.
I apologize for that.
Hopefully it will stop before too long.
OK, so we already have some HTML templates and they are in the folder called templates right here.
And I can see that I have one for my base layout, one for my home page, one for creating a reservation
and one for the about page, but I don't have one for the Rosea.
So let's create those.
So create a new file which I will call Generals' Page Temple at it.
And what's our other room code?
I can't remember now.
That's just Rum's major suite will create one for majors as well.
So new file majors dot temple add.
OK, so we have one for making a reservation, one for the base layout.
And up here we have under our HTML source we have about contact generals' index, Meijers and Reservation.
So down here I actually don't have a reservation once.
I better create one of those two new file and I'll call that search availability page up tempo.
So I have let's see, let's make sure we've got the right one, two, three, four, five.
Don't count the base.
Six one, two, three, four, five, six.
Perfect.
OK, so just to get a starting page starting place, I will copy what's on the about page pasted into
generals and just get rid of what's inside the content and then I'll create all of this, copy all of
this and put it in Meijers.
Right now I have what I need to start cutting things up.
So we'll start by looking at the reservation page.
This is my HTML page reservation and I have everything at the top.
I have the content and then I have the bottom, which includes JavaScript and all sorts of things like
that.
So I want to make my base page have something at the top on every page.
So if we look at the reservation page, we want everything from the declaration of the document type
down to and including the navigation.
So let's copy that, not cut it because I might have to go back, go to our base layout and replace
everything in this section before the block.
Content with what I've just copy now.
I need do I need to make any changes here?
Yes, I need to make a change to reference the static CSC file.
It has to have a slash in front of it because we'll be hitting this from our Web server.
Therefore, it needs to know that the static folder should be found at the root level of the application,
which also means that I need to copy the CSFs from my HTML source static folder to my actual static
folder.
So let's drag it down there.
I will take that and I'll just move it right over into static and sure, refactor it.
And if it goes so there it is.
So that's been moved.
Yeah.
So I have that part of my basically at the top now I need the bottom.
So that would be everything from I don't need this click me button or that paragraph text.
I'll just get rid of that so I don't confuse myself.
That would be the footer, all of these parts and I'll just take all this JavaScript up to and including
the closing HTML tag and put that in my base layer, which replaces just these two things paste.
All right, let's have a look at this and make sure we didn't miss anything.
All right, this block just doesn't belong there anymore, so that's the section that I can put page
specific JavaScript on individual pages and I want that to appear just after all of my imports.
OK, now let's go up and look at our navigation.
So right now in our navigation, we're going to have to fix these links as well.
It doesn't link to index here anymore for the home page just goes to slash.
It doesn't go to about Dorridge HTML.
It goes to about a better open my roots and make sure I'm doing this right to open my roots.
File about a slash about.
Yes.
OK then we have generals and majors which I do not exist yet, but I'll create the routes now so I'll
call it generals dash quarters and slash majors dash sweet and then I'll create routes for those right
now.
So I'll just do that like this duplicate duplicate generals quarters which will go to generals which
doesn't exist yet.
And Meijers, is it a plural majors yet with an sweet.
Which will go to Meijers
now just for fun.
Quickly, let's create those roads.
Are those handlers so it can be something as simple as this copy paste paste and this will be generals
and this will be manger's and I'm not going to render the template make reservation page.
I'm going to render the template majors, four majors and generals, four generals.
So this is generals, generals.
And this one will become majors.
OK, so those handlers exist now.
So they got to fix these comments paced around the room page and this one is generals renders the room
page.
OK, so let's make sure our roots aren't errors anymore.
They're not.
Let's go to our base layout.
That looks good and let's fix our things here.
Last one reservation taught HTML that's going to be searching availability.
So let's say search availability.
That will be our path.
Go back to our roots and let's create one for that.
What does this one go to?
That's the make reservation Petruchio and I worry about that.
Let's go back to this one.
So this is major suite is going to be search availability.
And this should take us to availability, which doesn't exist yet, so we'll just go create it and all
we're going to do is render the page and this sort of cold availability.
Renders the search available, availability page and the correct template is called search availability.
OK, let's try this.
Go run command web, go everything, compile.
That's a good sign.
Let's read it, create a new tab and go to localhost 88.
OK, so we got our navigation bar.
That's good.
The homepage link works the about page link works generals quarters doesn't have anything in it but
it took us their major suite.
Doesn't go anywhere.
Why not.
What's in the major suite rendered template majors top page that triple majors top page.
Because there's nothing in there.
That's why.
OK, but it still should have that search availability is empty, so that should be much like this one.
It's like copy paste.
Look now, Texas, US search availability, major, Switzerland, that doesn't seem to work, and if
I look at the page content, get element by ideas, no care.
Those are all JavaScript errors.
Don't care about those right now.
So why is that one not working?
Well, let's figure it out.
Go to the roots.
And the rules say four majors, Sweetgrass Majors Suite, and I'm going to slash major suite, just
make sure it's the same, you know, quote, they're.
OK, that's fine.
So when I go to major suite, I'm running this handler, which says Meijers paged Tempo.
Oh, I want to call that template.
Refactor that.
Rename the page.
That's better.
OK.
All right.
So I think we have.
Do we checked the last one.
Let's close this up book now.
Takes us to that contact takes us nowhere contact that time.
We have one more link to fix.
So that's under base layout.
Let's hide this and make that contact.
OK, so now we've got to clean up some JavaScript.
We've got to clean up some content for the pages.
So let's start through them one at a time.
We'll go right back to localhost, created the homepage, and let's get our homepage and put that in
there so we can find our index page till we find the part that's down here, which begins right after
the NAV and goes all the way down to but not including the footer.
Copy that.
Go to our home page template and pasted in here paste safe.
So when I reload this, that looks better.
Good.
All right.
OK, one thing I'm going to do though is put a slash in front of these stacks just to save myself problems
in the future.
And that should still work.
And it does OK.
And if I scroll down here, it says make reservation now.
It's not going to be make a reservation anymore.
It's going to be search availability.
Save that reload.
And they should take me to my search availability picture.
And it does OK for the home page is functional.
Let's go to the Web page right now.
We have stuff in there that we don't need in there, so let's get rid of that.
About I don't need any of this stuff.
I'll just say this is the about page and save it and reload it and this is the Web page.
OK, let's go to our rooms page.
We'll start with the general's quarters.
So we find our generals up here.
We find the content.
That's after the NAV, which starts here and goes down, too, but does not include the footer.
Copy that.
And we open up our generals page and paste that in the content section.
OK, save that.
So now, is there anything I need to fix in there?
Yes.
This put a slash in front of the static for the picture and reload the general's page.
Nope.
Still not there.
Slash static images.
Generals dash quarter stopping.
Do I have that?
No, I don't.
So let's copy those pictures over the generals quarters and Meijers quarters go into images.
Reflektor.
OK, that's better close this, close that and let's see what's next.
Next is major sweep.
So we just got our copy, our content out of Meijers right here, everything below the nav and not including
the footer.
Copy that opener Meijers template, which is right here pasted in the content section, put a slash
in front of static four images.
OK, and let's reload that.
Perfect.
OK.
Next, we have a book now which is search availability.
So we've got to get the search availability part, which I believe we called reservation dot html.
We did so get everything, not including the footer and not including the nav.
Copy that, paste that into search availability right in the content block.
Save that.
We need to fix any path names the action lead empty.
Don't need that right now and I should be able to reload that because it work.
OK, that doesn't work.
Why not.
We'll sort that out in a minute and see if we have any more pages to do, first contact is contact,
which doesn't exist because we don't have a handler.
So let's go back and create the handler, which is under route's route's.
Groups, so we don't have a contact, so let's just create contact.
Contact.
Which should go to a handler called Contact.
Contact, contact and search availability page, but contact page, does that exist about General?
No, we don't have a contact page, but we can do that pretty quickly.
So we'll just copy this one or the other pages even easier.
Select our copy, create a new template and file contact on page that he pasted in there and say this
is the contact page.
OK, and go back to our roots and make sure we link those up there.
They contact goes to contact.
OK, so let's stop this.
Run that.
And we should now be able to get to the contact page and we can.
All right, so what seems to be broken right now?
We're going to have to hook that up in a minute, but it's under this book now.
My dates and my calendar is not showing up.
Uncut air document get element by idea.
So here's a JavaScript error and we're going to see this a lot.
And it says it's on search availability 132.
So if I click on that, it should show me that line.
And it does.
So let's make this bigger.
And it's saying, get out of it by Ahar Colaba.
So there's that.
That's what's causing me grief.
My JavaScript on every page is throwing a JavaScript error, because I'm saying as soon as it executes
the page, it's finding this script tag.
It's saying, go get the document with the idea of Claverton when we deleted that.
So we don't have that anymore.
Also, it doesn't belong on this page.
So let's just find that.
And it should be on my base layout, this part that says document get element by ID right here.
So this including that HTML form and this attention that's causing grief.
So I need to cut that out of there because I'm going to use it somewhere else.
I don't want to lose it, so I'm just going to create a temporary file and I'll just use my favorite
text editor Sublime and paste it in it because I'm going to need that in a minute.
So if I now save this page, that JavaScript error should go away.
Let's make sure it does.
We'll bring up the console cleared out and reload the page, so it's just not finding a favor icon don't
care about that.
This should work and it does.
Perfect.
So we have that working on.
The last thing I want to do is have that dialog pop up on this page.
That means I need to put a listener on that button.
So let's go to the general quarters page, which is right here.
And I'm going to put JavaScript that exists only on this page, which means I can go in the section
just as I go up here to find content.
I can say define Jautz, because that's what I called that block.
So whatever I put in here.
And so if I put just a comment in here like this script, console, log, hello.
Not a comment will put a console log in there.
And then I go back and reload the general squirters page and view the source and scroll to the bottom.
I should have.
General's quarters.
OK, so there's that good I should have somewhere in here console that long.
There it is.
So because I put it on that page, this script appears only on the generals quarters page because I
put it in this block right here.
Define jazz, which is actually defined in the bass live right down here.
So that allows me to put HTML that's specific to that particular page or JavaScript is specific to that
particular page.
Only on that page.
All right.
So let's go back to the general layout and say, what do we actually want in here?
Console log hello's.
Not very helpful.
We actually want this button, which is right here, has a link.
I'm going to give that this hash hashmark exclamation point called hash bang that just says don't do
anything if you click on this.
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.
And that JavaScript I saved a little while ago, a copy of here and I'll paste it down here and I'll
just say document get by id not color button.
I want this to be that check availability button.
When that's clicked, create this HTML in a variable and fire up that, that little prompt that we did
a while ago.
Let's see if that works.
So back to my web browser.
Reload the generals quarters page, clear this off.
Reload E is no date picture full minute jass and it's saying date picture full mindshare.
So there's an error there.
Let's just ignore that for the moment.
We'll come back to it.
Let's see if this works.
And it does, except I didn't put my Z index in there.
All right, so this could put the Z index in there.
I must not have copied that over when I copied over the success.
So that's understating success.
Styles, data pickers.
That index 1000 should be 10000.
I must have deleted that zero without realizing it.
Let's try that again.
Reload, check availability.
That's better.
Now, we still have this area here, date picture for Mingus and it's saying it can't e is not.
So it's trying to create a picture and it can't find one.
Well, what else am I doing wrong then?
Under my generals' page I have document get owned by I.D. logged that.
I bet over here on my base layout I'm trying to create a date picture even if there is not one there,
it is right there.
So this should not fire unless there's actually a date picture on that page, which means I can cut
it out of here.
And what page do actually need that date picture on?
Well, the only page I need it on, because I'm adding it programmatically on this button is this page
over here book now, which is search availability.
So I can just put this right in its page, specific JavaScript.
So define Jass.
Script pasted in there and then put my end for the block, and that should work and there should be
no JavaScript errors on this page.
So I'll clear this off reloader and it's the favor.
I don't care about that.
That's just a little favorite icon that will appear up here or on some browsers or when you bookmark
it and put it on your bookmarks, but don't care about that.
I'll do that as one of the last things in this entire project.
Let's just make sure that we have no more JavaScript errors.
So home page, no JavaScript errors.
I'll make this a little narrower.
So I get my menu back there about gurt, just the whole not find the favor.
I don't care about that room's generals quarters.
Good.
I still have to hook up the button here on this suite, but there should be no errors.
And there's not just the thayeb icon not showing up, but now I should have my calendars and I do.
And contact.
Perfect.
All right.
So the only thing missing is a favorite icon.
And this one button over here, which is easy enough to do.
I can just go back to my Generals' page, copy this defined Gispert and it's Inverloch.
Open up my Meijers page and put it in right here at the very bottom.
And when I say that and go back to the major suite, reload the page, I have uncaught error.
I guess I got to give the ID, the button and ID, so I just copy the button right off the generals
page this one.
One, two, three, copy.
Go to the majors page and pasted it in there and now reload it and life should be good.
And it is.
And I have my calendars.
All right.
So what we've done is we've copied all of our HTML from our static pages into our goaland templates
and we've created our necessary forms and we're pretty much ready to go.
We also have our handlers.
Let's just make absolutely sure that we didn't miss anything.
So when I go to my roots roots file, which is right over here, I have everything, including make
reservation, let's make sure that one shows up the way it's supposed to.
I, I actually tested that one and go back to Firefox and paste that part of the URL here and return
and there's the page and that should do exactly what it's supposed to do.
Perfect.
So we're all set now.
We can actually start doing something in go to handle posting searches for reservations, making reservations,
all that fun stuff, and eventually we'll get around to making a favorite icon just so we don't see
that error showing up at our console.
All right.
That was a little disorganized, but it always is.
Whenever I'm cutting up email templates, I invariably make mistakes and you will, too.
So I'm not going to edit any of these mistakes out.
I'm just going to leave them there so you can see how it actually works for even for someone that's
been working in this field for a very long time, that's enough for this time around.
We'll pick it up again in the next lecture.