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
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.
Treehouse 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
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
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up