Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating a Registration Form With Pug (Jade)

7:18 with Dave McFarland and Jonathan Foster

Use the Pug templating engine to create an HTML form based on a layout template template, and including reusable navigation components. You'll also learn how to render templates and pass data to a template in a route.

Teacher's Notes
Video Transcript
Downloads

Treehouse Videos

Express Basics Jade Videos

Jade (Pug) resources

Pug Code for HTML Form

register.pug

extends layout

block content
  .main.container
    .row
      .col-md-6.col-md-offset-3
        h1.display-4.m-b-2 Sign Up

        // register form
        form(method='POST' action='/register')
          div.form-group
            label(for='name') Name:
            input#name.form-control(type='text', placeholder='first and last' name='name')
          div.form-group
            label(for='email') Email:
            input#email.form-control(type='email', placeholder='name@email.com' name='email')
          div.form-group
            label(for='favoriteBook') Favorite Book:
            input#favoriteBook.form-control(type='text', placeholder='title of book' name='favoriteBook')
          div.form-group
            label(for='pw') Password:
            input#pw.form-control(type='password' name='password')
          div.form-group
            label(for='pw2') Confirm Password:
            input#pw2.form-control(type='password' name='confirmPassword')
          button.btn.btn-primary(type='submit') Sign up

It's time to build our registration form. 0:00

This is the finished product, 0:03

the form you'll have built when you finish this video. 0:05

It's not that exciting, just a regular HTML form. 0:07

But instead of using plain HTML, 0:11

we'll use a templating language to help us create this form. 0:13

The best part is we'll be able to build this form more quickly and 0:16

with less typing using a tool called pug. 0:19

Pug, formally known as Jade, 0:23

is a template engine that's commonly used with Express applications. 0:25

It provides a lot of helpful shortcuts like a shorthand method for 0:29

writing HTML tags. 0:33

Express can read Pugs syntax and expand it into complete HTML tags. 0:34

Pug has many other benefits as well. 0:40

For example, you can use multiple templates to assemble a web page. 0:42

This lets you share similar components between pages without writing extra HTML. 0:47

For instance, you can put the template code for 0:52

the navigation bar in one file and include it multiple times for different routes. 0:55

We're doing that in our app. 0:59

And even more exciting, Pug lets us access data from Express routes and 1:03

place them in the corresponding template. 1:07

For example, we can set the page title dynamically for a route, or even 1:10

change the way the navigation bar looks based on the state of our application. 1:16

For instance, 1:20

if the user is already logged in, we can change the login button to log out. 1:21

I'll show you how to do that in the final part of this course. 1:27

Let's take a look at our project and the app.js file. 1:30

We've been using Pug already to create the pages in the starter app. 1:34

You can see that Pug is defined as the view engine for our express application. 1:38

This tells the application that when referencing a view by name, 1:43

it will have a .pug or pug file extension. 1:47

You see here in app.JS, that we've defined the views folder to contain our templates. 1:51

That's where our current templates are, and 1:57

where we'll be adding our registration form template. 1:59

Let's look at the views included in the starter project and 2:02

add some code needed to implement our registration and login forms. 2:05

In the views folder, create a new file. 2:09

Call it register.pug. 2:11

And I'll type extends layout. 2:18

This is obviously not HTML. 2:22

It's Pug's way of saying let's use another template as the basis for 2:24

the registration page. 2:27

It's referring to another Pug file named layout.pug. 2:29

Let's take a look at layout.pug. 2:34

If you haven't used Jade or Pug in the past, this might look a bit weird. 2:37

But what you know about HTML elements and their attributes still applies in Pug. 2:42

Even though it's not written like HTML, 2:46

you can see the doc type, the head, and the body of the page. 2:48

This script elements load JavaScript files, J query and 2:55

JavaScript for bootstrap. 2:58

I'm not going to cover pug syntax in this course, 3:00

we've introduced Pug when it was called Jade in another course. 3:02

So if you need a review, 3:06

you can find a link to those videos in the teacher's notes. 3:07

You also find links in the teacher's notes for more Pug resources. 3:10

Here on line 13, you'll see an include statement. 3:14

Include is a Pug keyword, it loads another template, navbar. 3:18

Notice that I don't have to include the .pug or 3:23

Pug extension after the name navbar. 3:26

Pug knows the file extension already. 3:28

Let's look at that file. 3:31

Here are the links for the navigation bar. 3:33

So this file is loaded into an included in the main layout. 3:36

Let's go back to the layout .pug file. 3:40

This line here is really important. 3:44

Block content indicates where Express should insert HTML from another Pug file. 3:47

In our case, this is where the registration form will be inserted. 3:53

Let's jump back to register.pug and add some more code. 3:57

I'll add block content after the extends layout. 4:04

This indicates the start of the content that will be injected into 4:08

the layout.pug file. 4:12

Again, I'm not covering pug syntax here. 4:14

So I won't go into this code in depth. 4:17

However, it just creates a nested structure of HTML tags with classes 4:19

assigned to them. 4:23

The indented lines indicate nested HTML tags. 4:24

Now for the registration form, we need to add a form field. 4:28

A form element needs a method attribute and an action attribute. 4:36

Method refers to the HTTP method that the browser uses to submit the form. 4:40

In this case, 4:45

we're using post because we're posting this information to our web server. 4:46

The action attribute tells the application where the form data will be processed. 4:51

Since we're sending form data to the app, we'll use post and 4:56

we'll post to the / register uri. 4:59

This is where the data is going to be sent, and 5:02

that maps to the route we added in the last video. 5:04

Now, there's a lot more Pug code to add, and I'm not going to make you type at all. 5:07

So I'm just going to paste it in to this file. 5:12

You can find the complete code for this template in the teacher's notes. 5:15

Great, the template is done. 5:19

I'll save this file and I'll close it. 5:20

I start up the app with nodemon, and then I'll check local host 3,000. 5:24

And then I'll click the Sign Up link, it doesn't work. 5:29

Let's take a look at the route that we set up in the last video. 5:33

I'll open the index.js file in the route's directory. 5:37

Now, this get route right here just prints out a text message. 5:40

But we want to put more than that. 5:44

We need to use the render method to display the form. 5:48

Render is how we take a Pug template and render it as normal HTML. 5:52

We're passing two pieces of information, the name of the template file, register. 5:57

So that's the register.pug file, and an object containing one key and one value. 6:03

Remember earlier I said that Pug lets you pass information from a route 6:11

into a template. 6:14

Let's take a look again at the layout.pug file. 6:15

Notice this bit of code right here, # {title}, 6:20

this is Pug syntax for including the value of a variable in the template. 6:26

In this case, we are dynamically setting the title for 6:30

the web page by passing data from the route. 6:32

In index.js, you see the title is sign up. 6:35

Okay, we've done a lot of work here. 6:39

Let's see if it works. 6:41

I'll save this file and switch back to the terminal. 6:42

See that nodemon, I'm on restarted the server when I changed the route file. 6:46

Let's check it out in the web browser. 6:50

I'll go to local host 3000, go to the home page, and click the sign up button. 6:53

All right, there it is. 6:59

If I click the sign up button at the bottom, you can see the text user created. 7:00

That's coming from the second register that we created. 7:06

The post route, 7:09

that message is a bit misleading since we didn't really create a user. 7:09

To do that, we first need to set up a Mongo database. 7:13

Let's do that next. 7:17

You need to sign up for Treehouse in order to download course files.

Sign up