Learn how to send data to the server using POST requests.
[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, output 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 up