Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how to send data to the server using POST requests.
Express Documentation
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
We have our app set up and
we've created a couple of templates.
0:04
Now we can start interacting
with the data from our users.
0:08
That means we'll be using a new
kind of request, a post request,
0:12
as opposed to the get request.
0:16
Remember, a get request simply asks for
data, like a web page from a server.
0:19
But when a client sends data to
the server it's called a post request.
0:24
In this video, we'll build an HTML
form that makes a post request.
0:29
We'll also write the route to
handle the data from that form.
0:34
I think user interaction is probably
the most fun part of building an app.
0:38
Let me show you what
the form will look like.
0:42
Here's the form we'll be building
over the next several videos.
0:45
It asks for the student's name,
when I enter my name and
0:48
press the submit button, my name appears.
0:54
The first thing we need to do for
this feature is create a form and
0:59
render it from the hello route,
let's get started.
1:04
I want to start with the challenge.
1:08
Now that you know how to create a template
file and connect it to a route,
1:10
why don't you see if you can
create a new route called hello.
1:14
Here's what you need to do,
add the route to the express app.
1:17
Add a template file called
hello in the view directory.
1:23
The template should extend
the layout template.
1:28
Serve the template from that route.
1:31
Here's a trick I use when adding
a route to the Express app.
1:34
Put a simple bit of content into
the template like an h2 element.
1:38
This let's me test that I have
everything lined up correctly when I
1:42
visit the new route.
1:45
Once I see that the new content can show
up in the browser, I can delete it and
1:47
then start filling in the real details.
1:51
You can try that if you want.
1:54
Go ahead and pause this video and
1:57
come back when you're done setting
up the new template file and route.
1:58
Now I'll show you what I did.
2:05
Here's the route I created
in the app.js file.
2:08
I'm rendering the hello template.
2:12
This means when users go to the hello
route, the hello pug will be rendered.
2:14
In the hello.pug file,
2:20
I extend the layout template and
2:23
specify a block of content.
2:28
This points to the content
block in the layout file.
2:33
I have a little test here with
an h2 to see if it works.
2:41
Let's go to the browser, And
see if it works, it does.
2:47
Cool.
2:53
I'll just delete the text
from the h2 text now.
2:54
Now let's build our sign in form.
2:58
I'll start with a greeting.
3:00
Welcome, student.
3:02
Then I'll add a form tag.
3:08
The form tag requires an action and
method attribute.
3:12
Remember that to add attributes to pug,
3:19
you use parentheses after the tag
followed by the key value pairs.
3:22
Give separate key value
pairs with a comma.
3:27
The value of the action attribute
is the URL that they form.
3:31
That is the route that the browser
will send from data to.
3:37
Output is in our slash hello URL here.
3:41
The method is the HTTP
verb that we want to use.
3:46
I'm going to put post.
3:51
Now let's add some form fields.
3:53
We just want one input field for the name.
3:56
First, I'll make a label and
then type, please enter your name.
4:00
Then nested in the label element,
I'll put a text input element.
4:09
I'll also add a name attribute.
4:18
The name attribute is vital to ensure that
our app can read the form submission.
4:22
We'll see why soon when we
start working on our app.js.
4:27
I'll call the name username and
finally we need a submit button.
4:33
I'll put the text Submit, Into the button.
4:44
Let's see in the browser.
4:50
And here's the form we just made.
4:53
I'll enter a name, And Submit.
4:56
I got an error.
5:01
Do you remember seeing this before?
5:03
We got a similar error before
when we didn't set up any routes.
5:07
This means Express doesn't have
a route for this request yet.
5:12
Let's go back to the app.js file.
5:16
You see here?
5:19
We have a route for slash hello.
5:20
But this is a get route,
the form is trying to make a post request.
5:22
The web service, there's a two totally
different types of requests and
5:29
require two different routes.
5:34
This get route is for
serving the form itself.
5:37
But now we want to handle
the submission of the form.
5:42
I will just copy this
get route code here and
5:45
paste it below, and change get to post.
5:50
Now when we submit the form, the app
will just rerendered the form again.
5:57
We are sending the name
successfully to the server though.
6:04
We just haven't put anything
in its place to catch or
6:08
do anything with that data yet.
6:11
In the next few videos, we'll be adding
the programming to capture the name and
6:13
render it back to the browser.
6:17
To start writing this logic, we'll
need to learn a little bit more about
6:19
Express's request object,
and we'll cover that next.
6:23
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up