1
00:00:00,600 --> 00:00:03,430
It's time to build our registration form.

2
00:00:03,430 --> 00:00:05,040
This is the finished product,

3
00:00:05,040 --> 00:00:07,380
the form you'll have built
when you finish this video.

4
00:00:07,380 --> 00:00:11,380
It's not that exciting,
just a regular HTML form.

5
00:00:11,380 --> 00:00:13,400
But instead of using plain HTML,

6
00:00:13,400 --> 00:00:16,590
we'll use a templating language
to help us create this form.

7
00:00:16,590 --> 00:00:19,790
The best part is we'll be able to
build this form more quickly and

8
00:00:19,790 --> 00:00:22,130
with less typing using a tool called pug.

9
00:00:23,510 --> 00:00:25,750
Pug, formally known as Jade,

10
00:00:25,750 --> 00:00:29,580
is a template engine that's commonly
used with Express applications.

11
00:00:29,580 --> 00:00:33,080
It provides a lot of helpful
shortcuts like a shorthand method for

12
00:00:33,080 --> 00:00:34,950
writing HTML tags.

13
00:00:34,950 --> 00:00:40,110
Express can read Pugs syntax and
expand it into complete HTML tags.

14
00:00:40,110 --> 00:00:42,940
Pug has many other benefits as well.

15
00:00:42,940 --> 00:00:47,030
For example, you can use multiple
templates to assemble a web page.

16
00:00:47,030 --> 00:00:52,910
This lets you share similar components
between pages without writing extra HTML.

17
00:00:52,910 --> 00:00:55,200
For instance,
you can put the template code for

18
00:00:55,200 --> 00:00:59,880
the navigation bar in one file and include
it multiple times for different routes.

19
00:00:59,880 --> 00:01:00,920
We're doing that in our app.

20
00:01:03,960 --> 00:01:07,810
And even more exciting, Pug lets us
access data from Express routes and

21
00:01:07,810 --> 00:01:10,080
place them in the corresponding template.

22
00:01:10,080 --> 00:01:16,200
For example, we can set the page title
dynamically for a route, or even

23
00:01:16,200 --> 00:01:20,510
change the way the navigation bar looks
based on the state of our application.

24
00:01:20,510 --> 00:01:21,600
For instance,

25
00:01:21,600 --> 00:01:27,510
if the user is already logged in,
we can change the login button to log out.

26
00:01:27,510 --> 00:01:30,640
I'll show you how to do that in
the final part of this course.

27
00:01:30,640 --> 00:01:33,430
Let's take a look at our project and
the app.js file.

28
00:01:34,790 --> 00:01:38,480
We've been using Pug already to
create the pages in the starter app.

29
00:01:38,480 --> 00:01:42,310
You can see that Pug is defined as the
view engine for our express application.

30
00:01:43,880 --> 00:01:47,110
This tells the application that
when referencing a view by name,

31
00:01:47,110 --> 00:01:51,400
it will have a .pug or pug file extension.

32
00:01:51,400 --> 00:01:57,930
You see here in app.JS, that we've defined
the views folder to contain our templates.

33
00:01:57,930 --> 00:01:59,680
That's where our current templates are,
and

34
00:01:59,680 --> 00:02:02,810
where we'll be adding our
registration form template.

35
00:02:02,810 --> 00:02:05,380
Let's look at the views included
in the starter project and

36
00:02:05,380 --> 00:02:09,800
add some code needed to implement
our registration and login forms.

37
00:02:09,800 --> 00:02:11,788
In the views folder, create a new file.

38
00:02:11,788 --> 00:02:17,380
Call it register.pug.

39
00:02:18,450 --> 00:02:22,300
And I'll type extends layout.

40
00:02:22,300 --> 00:02:24,160
This is obviously not HTML.

41
00:02:24,160 --> 00:02:27,790
It's Pug's way of saying let's use
another template as the basis for

42
00:02:27,790 --> 00:02:29,510
the registration page.

43
00:02:29,510 --> 00:02:34,290
It's referring to another
Pug file named layout.pug.

44
00:02:34,290 --> 00:02:37,380
Let's take a look at layout.pug.

45
00:02:37,380 --> 00:02:42,460
If you haven't used Jade or Pug in
the past, this might look a bit weird.

46
00:02:42,460 --> 00:02:46,960
But what you know about HTML elements and
their attributes still applies in Pug.

47
00:02:46,960 --> 00:02:48,790
Even though it's not written like HTML,

48
00:02:48,790 --> 00:02:55,080
you can see the doc type,
the head, and the body of the page.

49
00:02:55,080 --> 00:02:58,420
This script elements load
JavaScript files, J query and

50
00:02:58,420 --> 00:03:00,300
JavaScript for bootstrap.

51
00:03:00,300 --> 00:03:02,750
I'm not going to cover pug
syntax in this course,

52
00:03:02,750 --> 00:03:06,200
we've introduced Pug when it was
called Jade in another course.

53
00:03:06,200 --> 00:03:07,140
So if you need a review,

54
00:03:07,140 --> 00:03:10,090
you can find a link to those
videos in the teacher's notes.

55
00:03:10,090 --> 00:03:13,329
You also find links in the teacher's
notes for more Pug resources.

56
00:03:14,890 --> 00:03:18,700
Here on line 13,
you'll see an include statement.

57
00:03:18,700 --> 00:03:23,180
Include is a Pug keyword,
it loads another template, navbar.

58
00:03:23,180 --> 00:03:26,120
Notice that I don't have
to include the .pug or

59
00:03:26,120 --> 00:03:28,790
Pug extension after the name navbar.

60
00:03:28,790 --> 00:03:31,110
Pug knows the file extension already.

61
00:03:31,110 --> 00:03:31,980
Let's look at that file.

62
00:03:33,130 --> 00:03:34,850
Here are the links for the navigation bar.

63
00:03:36,410 --> 00:03:40,550
So this file is loaded into
an included in the main layout.

64
00:03:40,550 --> 00:03:42,750
Let's go back to the layout .pug file.

65
00:03:44,450 --> 00:03:46,270
This line here is really important.

66
00:03:47,400 --> 00:03:53,210
Block content indicates where Express
should insert HTML from another Pug file.

67
00:03:53,210 --> 00:03:57,040
In our case, this is where
the registration form will be inserted.

68
00:03:57,040 --> 00:04:00,207
Let's jump back to register.pug and
add some more code.

69
00:04:04,776 --> 00:04:08,940
I'll add block content
after the extends layout.

70
00:04:08,940 --> 00:04:12,410
This indicates the start of
the content that will be injected into

71
00:04:12,410 --> 00:04:13,730
the layout.pug file.

72
00:04:14,770 --> 00:04:17,060
Again, I'm not covering pug syntax here.

73
00:04:17,060 --> 00:04:19,400
So I won't go into this code in depth.

74
00:04:19,400 --> 00:04:23,670
However, it just creates a nested
structure of HTML tags with classes

75
00:04:23,670 --> 00:04:24,790
assigned to them.

76
00:04:24,790 --> 00:04:28,530
The indented lines
indicate nested HTML tags.

77
00:04:28,530 --> 00:04:31,791
Now for the registration form,
we need to add a form field.

78
00:04:36,103 --> 00:04:40,570
A form element needs a method
attribute and an action attribute.

79
00:04:40,570 --> 00:04:45,640
Method refers to the HTTP method that
the browser uses to submit the form.

80
00:04:45,640 --> 00:04:46,190
In this case,

81
00:04:46,190 --> 00:04:51,010
we're using post because we're posting
this information to our web server.

82
00:04:51,010 --> 00:04:56,290
The action attribute tells the application
where the form data will be processed.

83
00:04:56,290 --> 00:04:59,280
Since we're sending form data to the app,
we'll use post and

84
00:04:59,280 --> 00:05:02,370
we'll post to the / register uri.

85
00:05:02,370 --> 00:05:04,120
This is where the data
is going to be sent, and

86
00:05:04,120 --> 00:05:07,340
that maps to the route we
added in the last video.

87
00:05:07,340 --> 00:05:12,810
Now, there's a lot more Pug code to add,
and I'm not going to make you type at all.

88
00:05:12,810 --> 00:05:15,530
So I'm just going to
paste it in to this file.

89
00:05:15,530 --> 00:05:19,080
You can find the complete code for
this template in the teacher's notes.

90
00:05:19,080 --> 00:05:20,960
Great, the template is done.

91
00:05:20,960 --> 00:05:22,770
I'll save this file and I'll close it.

92
00:05:24,230 --> 00:05:29,830
I start up the app with nodemon, and
then I'll check local host 3,000.

93
00:05:29,830 --> 00:05:33,600
And then I'll click the Sign Up link,
it doesn't work.

94
00:05:33,600 --> 00:05:37,130
Let's take a look at the route
that we set up in the last video.

95
00:05:37,130 --> 00:05:40,960
I'll open the index.js file
in the route's directory.

96
00:05:40,960 --> 00:05:44,720
Now, this get route right here
just prints out a text message.

97
00:05:44,720 --> 00:05:46,020
But we want to put more than that.

98
00:05:48,930 --> 00:05:52,080
We need to use the render
method to display the form.

99
00:05:52,080 --> 00:05:57,760
Render is how we take a Pug template and
render it as normal HTML.

100
00:05:57,760 --> 00:06:03,190
We're passing two pieces of information,
the name of the template file, register.

101
00:06:03,190 --> 00:06:10,010
So that's the register.pug file, and an
object containing one key and one value.

102
00:06:11,070 --> 00:06:14,420
Remember earlier I said that Pug lets
you pass information from a route

103
00:06:14,420 --> 00:06:15,870
into a template.

104
00:06:15,870 --> 00:06:18,260
Let's take a look again
at the layout.pug file.

105
00:06:20,870 --> 00:06:26,240
Notice this bit of code right here,
# {title},

106
00:06:26,240 --> 00:06:30,450
this is Pug syntax for including
the value of a variable in the template.

107
00:06:30,450 --> 00:06:32,780
In this case,
we are dynamically setting the title for

108
00:06:32,780 --> 00:06:35,820
the web page by passing
data from the route.

109
00:06:35,820 --> 00:06:39,800
In index.js, you see the title is sign up.

110
00:06:39,800 --> 00:06:41,440
Okay, we've done a lot of work here.

111
00:06:41,440 --> 00:06:42,800
Let's see if it works.

112
00:06:42,800 --> 00:06:46,518
I'll save this file and
switch back to the terminal.

113
00:06:46,518 --> 00:06:49,590
See that nodemon, I'm on restarted
the server when I changed the route file.

114
00:06:50,590 --> 00:06:53,320
Let's check it out in the web browser.

115
00:06:53,320 --> 00:06:59,330
I'll go to local host 3000, go to the home
page, and click the sign up button.

116
00:06:59,330 --> 00:07:00,860
All right, there it is.

117
00:07:00,860 --> 00:07:06,300
If I click the sign up button at the
bottom, you can see the text user created.

118
00:07:06,300 --> 00:07:09,180
That's coming from the second
register that we created.

119
00:07:09,180 --> 00:07:09,978
The post route,

120
00:07:09,978 --> 00:07:13,890
that message is a bit misleading
since we didn't really create a user.

121
00:07:13,890 --> 00:07:17,130
To do that,
we first need to set up a Mongo database.

122
00:07:17,130 --> 00:07:18,030
Let's do that next.