Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Express Basics!
You have completed Express Basics!
Preview
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