So now that we appear to have a means of rendering templates, let's go build some templates.
So what I'm going to do is go over to my Web browser and go to bootstrap and I'm going to click on the
getting started button.
So I'm on get bootstrap dotcom the home page and I'll click on Getting Started and just scroll down
to find the starter template and I'll copy that and go back to Visual Studio Code and I'll open up that
based on layout html file I have inside the templates folder.
Inside the web folder that I see, I have a missing quotation marks.
So let's put that in and let's paste that right in there at the top here and we'll make a few changes.
First of all, I'll get rid of these because I'll get these all off of this CDN and I'll get rid of
this because I'll get that off of a CDN and I'll save this.
And I want to associate HTML files with GULLING templates.
So let's figure out how we do that.
So let's see if there's any extensions that'll fix this for us.
I'll come in here and I'll search for go.
Let's see.
Go go nightly.
Let's try go template.
Go template support, I'm going to install that.
OK, so that's now installed and now I'm going to close this and make the change there.
But it will in a moment.
Let's go to our view menu and choose.
You may not have to do this.
If you have the status bar at the bottom.
You don't have to turn it on like I am.
But I'm going to the view menu choosing appearance show, status bar and I'll click plaintext where
it's here and see if there's anything for go go template right there.
And that seems to take care of it closes.
That's a little closer anyway.
OK, so now I have this template, but it's not exactly what I want.
So let's go back to our Web browser and back to the top of this and find the link.
Here it is.
I want to get the keys for Bootstrap, so I'll copy that and come back here and I'll paste it in the
head and then I'll go back here and find the JavaScript for it.
So I'll choose this bundle right here.
That'll probably do the trick.
Copy that and I'll put it just before the closing HTML.
Now, the other thing I want to do is I don't want the title Hello World at every page, so delete that.
And inside of the title tags I'll define a block, which I'll call title and I'm going to pass data
to it.
So I'll put the dot and then I'll give it a blank line and put end down here in the body.
I'll get rid of this hello world and I'll put in div class equals container and close.
Do do an inside of that I'll put a do class equals row and close that div.
And inside that that'll put a day of class equals good call sufficient for our purposes and close that
divide in the middle of that third nested div.
I'll put in a block, which I'll call content, and I'll pass data to it and I'll just give it its end
right here on the same line.
OK, now the other thing I'm going to want to do at some point is before the closing HTML tag are probably
going to have my own JavaScript, so I'll put a block in there.
I'll say block or call it jazz and I'll pass data to it and I'll close with it.
OK, so there's my bass template and that's enough for now.
Will will be modifying this as time goes on.
Now I need a template to render my virtual terminal, so I'll put a new file in there and I'll call
it, say, terminal page dot temple.
And this will use the base template we just find so template place and hand data to it.
So now we can pass data to this template and we'll define the title.
So define title.
That's the block we specified in our base layout and I'll just call this virtual terminal
and that and move this over.
And I will define the content, define content.
And they're all just for now, say to virtual terminal two and close it and I'll put it in empty just
one as well, I don't need to, but I'm going to be putting JavaScript in here before too long to find
James
and.
OK, so now I have my templates.
Let's go back to our handlers.
And instead of printing to the terminal, let's actually render that page.
So I'll delete this info log line.
So render the template.
And I recall that the render template function returns an error, so I'll check for that and I'll do
it the shorthand way if error equals Abdon render template and I hand it my response writer, my request,
the name of the template I want, but just the first part.
And that's terminal.
No data and nothing else.
So no parshall's yet.
So we'll do that and close it with a semicolon and say error is not equal to nil.
Then after error.
Log print line print here.
OK, now if everything worked as expected, I should be able to start my application and hit that page.
So let's open the terminal for open our terminal, clear the screen, go run seyoum dot slash cmd slash
web.
Everything compiled that's promising.
Let's go back to our Web browser and go to the tab, which I still have open, I just reload this and
there is a virtual terminal, not very pretty, but now we are successfully rendering a template.
Now, there's one of the thing I want to draw to your attention here, because it's going to get irritating
starting and stopping your application all the time.
So go back to your your ID and stop your application.
And I'm going to hide that status because I don't like it.
So you appearance hide the status bar, that's better.
And now go to your Web browser and you'll find a link to this on the course resources for this page.
This is a little application that will automatically reload and recompile our application any time we
make a change to the source code.
So if you scroll down here, it's called air.
It shows you how to install it.
And I use this one right here, prefer install S.H. the first one, and that will install it into the
appropriate directory in your gopalnath beam signature.
So copy that, paste it into your terminal window.
And when you're done, you need to create a configuration file and you'll find that on the course resources
for this lecture as well.
So I already have installed.
So I'm going to go back to my ID and I'm going to create a new file right at the root level of my application.
And it has to be called dot er dot com.
So it starts with a dot and it has a dot after the word error and t o m l.
So I've already copied the contents of dot er html to my clipboard and I'll just paste it in here and
you could read through this to your heart's content.
It's got all kinds of comments that tells you how everything works, but get it in there, make sure
it's at the root level of your application and then to run your application instead of typing, go run
dot slash cmd web.
You can just type error and that will actually compile a temporary binary.
And any time I make a change, so let's say I go to main door, go and down here after flag pass, watch
what happens down here in the terminal window after I put something in here like oh just say a log print
line.
Hello world it recompile it.
So first time it failed because I was halfway through a command, but then it recompile it instantly
afterwards and that's going to make working a lot simpler for you.
So if you don't want to do that, it's absolutely not a requirement.
You can just type the the go run dot slash cmd slash web and that'll work fine.
But I like this because it automatically reloads my code as I work on it.
All right, so we have the render function working.
It's putting a template up.
The next step is to put up a form that will use to actually charge someone's credit card and we'll get
started on that in the next lecture.