All language subtitles for 009 Responding to Requests with HTML Files_en

All right

guys.

Welcome back.

Now in the HTL module, we explored how to create and use HTML forms.

Now in this lesson, armed with our knowledge of Javascript, Node, Express, we're going to put it to use

in our web site, and we’re going to use the data that gets entered into the forms, and perform calculations

on it in our server.

So first things first. We’re going to create a new file.

So inside the Calculator directory, I'm going to create a new file called index.html.

So there is our brand new HTML file, and I'm going to use the html shortcut to create our HTML boilerplate.

And I'm just going to call this page ‘Calculator’.

Now inside the body we're going to include a form.

Now this form is not going to have a class, but it will have an action and a method.

So I want you to keep the method as post and the action as index.html. We’re going to explain really shortly

just what those things are.

But before we do that let's add a few inputs.

So the first input is going to have a name of num1,

and it's also going to have a placeholder,

so that's that text in grey that tells the user what they should type in this text box.

And this is going to be “First Number”. And then we're going to have another input that's going to have

a name of num2, and the placeholder is going to be “Second Number”.

Now this name is going to be equivalent to like a variable name, and it's going to be the thing that

uniquely identifies the data that’s inside this input.

That's what we're going to be using and drawing on to perform our calculation.

Now just before our form ends, we're going to add a button, and this is going to be of type “submit”, and

the name is going to be “submit”, and the text in the button is simply going to read ‘Calculate’.

All right. So now that we've created our buttons and our form, we're going to send this entire index.html

file when the browser tries to access the home route.

Now when we use res.send, we’re sending individual bits of HTML data.

But if we want to send an entire web page, such as our index.html, we have to use something different.

So if we head over to the Express API reference, and you can see it’s organized by which part you're looking

for. And we're looking for the response part, and you can see it has a whole bunch of different methods,

for example res.send, which is what we've been using so far.

But there's also, if you scroll down, res.sendFile, and this transfers the file over to the browser

when they make a get request.

So, instead of saying res.send, we can say res.sendFile,

and inside the parentheses we're going to give a single input, which is the location of the file that

we want to send.

Now, what we've been working with so far are what are called relative file paths, so we can simply say

index.html, and it will go and search within the current file's location,

so calculator.js, and look for something called index.html.

Now this works a little bit differently when you have a server, because your server, at the moment,

even though it's hosted on our own computer, and we know exactly where this Calculator project folder

resides, it’s basically on our desktop,

but in the future, when we deploy our server into the cloud or into somebody else's computer, then we

have no idea what is that location.

So instead of just sending a relative file path, what we can do is we can use a constant that’s called

__dir, or directory, name.

So it's two underscores dirname, and this is going to give you the file path of the current file no

matter where it's hosted, on somebody else's computer, in the cloud, in a remote server, whatever it may

be.

And I just want to console.log this first, so I can show you what it looks like.

So let's hit save and let's restart Nodemon. So let's head over to localhost:3000.

And now, if we have a look inside our command line, then you can see it's printing out the directory name,

which is inside a directory called Calculator, which is inside the Desktop folder, which is inside angelayu,

which is inside the Users folder.

So this is the entire file path that it took to get to this current file.

So instead of using.

So instead of saying response.send, we’re going to use sendFile, and instead of using just simply

the relative file path, we're going to send the directory as directory name, and then

“/index.html”.

So what this full path will look like is it's going to be ‘Users/angelayu/Desktop/

Calculator/index.html’.

And that should provide a path to reach this index.html file.

So now, if we hit save, our Nodemon updates our server, we go ahead and reload our calculator,

then you can see that we get all of those things that we had inside our index.html. And you can see

that when you update this index.html, it will update immediately over here using Nodemon.

So I’m just going to add a heading called ‘Calculator’,

I'm going to hit save, and now, if I refresh this web site, then bam, we've already got our calculator.

Now if this underscore underscore directory name is at all mysterious to you,

what I want you to do is to create a new file called

path.js,

and, inside this path.js, we're simply going to console.log the directory name.

And now, if we run this path.js, node path.js, you can see we get the location where it is

in, which is currently inside this Calculator.

And then we drag that path.js into our desktop, and we navigate back to our desktop, and then rerun

our node

path.js,

then you can see now the path is Users/angelayu/Desktop. So have a play around with that and see

if it makes sense.

It's basically just a constant that allows us to grab hold of the current file location at any given

time, so we can use that location and append the location of another file to it.

This means that it doesn't matter if we're on any server,

we don't have to know where this file resides.

We can simply use directory name and then append the index.html, or whichever file you're trying to

send.

Now in the next lesson, we're going to be making some post requests from our index.html.

So, once you're ready, head over to the next lesson.