Creating a Registration Form With Pug (Jade)

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