2.2 Using Partials for Consistency
All templating engines provide tools and features to make it easier to maintain a consistent look and feel between all of our pages. In this lesson, we'll look at EJS's partials feature to help make our pages consistent.
1.Introduction3 lessons, 20:17
2.Building a Web App6 lessons, 1:01:23
3.Middleware and Routers2 lessons, 16:36
4.Conclusion1 lesson, 01:31
2.2 Using Partials for Consistency
In the previous lesson, I introduced you to EJS, a templating engine that you can use not just in your Express-powered applications, but in just normal Node applications as well. It's not an Express-specific thing. So in the previous lesson, we created a view for our index page. And right now, it's just a complete HTML document. And in this lesson, I want to create a contact page. So let's go ahead and create that file, let's call it contact.ejs. And we are going to copy all of the markup from index and paste it into contact. Now, some red flags might be going off in your head, and that's okay, because they should be. We definitely don't want to keep just copying and pasting all of our markup, because right now, our markup is relatively simple. However, as we start adding actual structure and having more complex markup, we definitely don't want to keep redoing the same thing over and over and over again. Because we want our application to be consistent across all of our pages. Now, EJS is a basic templating engine, I've called it a view engine, but it lacks a lot of the features that you would find in other view engines. And one of those is a feature called a layout page. What a layout page allows you to do is basically define the layout of your application. And then what you do is just provide the content that would be used. So there's some merging going on, it emerges the layout page with the content, and it's very nice. And unfortunately, EJS does not have that feature. Now some people have made a layout page for EJS, and you can install that module and use layout pages with EJS. But in this lesson, and really in this course, we're going to keep things as vanilla as possible. So what we're going to do is use what are called partials. These are just smaller chunks of markup that we can use and reuse throughout all our views. So for example, in both the index and contact pages, we are essentially going to have the same things inside of the head element. Now of course, the title is going to be different. But these metatags and any CSS that we might add is going to be the same between the two. So what we could do is create a partial, that is going to contain all of that head information. So inside of our views folder, let's create a new folder called partials. And we'll create a new file inside of that simply called head.ejs. Now, the idea being that it's going to contain the stuff from the head of our document. So let's take these metatags, let's paste them into our head EJS. And then we want to reference that, and actually, what we're going to do is include that here. And we do that using our <% sign, we use a command called include, and then we provide the path to that file. So in this case, that is partials and then head. Now, we don't have to say .ejs because EJS is going to automatically add that for us. So we can just use the name of the file without the extension, and that's going to work. So we can take this then and paste it into our index. And visually, we're not going to see anything different in the browser. But if we look at the source code, then we are going to see that the metatags are still being added to our document. Now we need to add a route to our content page, so that we can navigate between the two. So let's open up app.js, and let's add a route to just /contact. And the view that we are going to render is contact. We don't need to pass any information to that view yet, so let's not do that. And now, If we look at the source for index, we of course see that we have the metatags being pulled in. Let's add some different content for the contact so that we know that we are on the contact page, and we'll just do something simple like that. So now let's view the source of /contact, and we're going to see basically the same thing. We have the metatags, but of course, we also see that we are on the contact page. So all of our metatags are being added properly. But let's also add some CSS, something that we don't have to look at the source code in order to be sure that we are including all of our head stuff. And I'm going to paste in a reference to Bootstrap, through a CDN. So now, whenever we view the index page, our style changes. If we look at the contact page, the style is changed there as well. So we know that we are pulling in that information. And let's also start organizing our pages so that we have a nav bar and things like that. So that would be what I would consider a header, so let's add a new file inside of partials. We'll call it header.ejs, and I'm going to paste this in, because it's, well, that's a quite a bit of markup. And basically, this is the markup from one of the Bootstrap examples from the Bootstrap website. I believe it's the carousel example, I just lifted the markup and made a few changes here. So we have this header, and we are going to include that then inside of the body. So we can do the same thing with <% include, and then partials and header. So once again, there is still some replication that we have to do between our views. But by using these partials, we can ensure that all of the hard parts are being replicated correctly. Let's wrap our content with these main elements. And then we will add some of our own CSS to make it look a little bit better. So inside of index, we will use our main element and wrap our content with that. All right, now if we go and look at these pages, we see the nav bar, but we don't see the content. And that's because it's being hidden by the nav bar, so we are going to add our own CSS. And this is a static asset, so we're going to put it inside of public. And let's go ahead and delete this contact.html, because that was there primarily for demonstrative purposes. So inside of public, let's create a new folder called css, and we'll create a new file called site.css, and we're going to add a rule for main. We're going to set the margin-top to 70% so that we can see the content, or 70px. And then we need to add a reference to this inside of our head partial. So we will just have a link element, and the href is going to be CSS and site.css. So now whenever we look at our pages, there we see the content. Let's look at home, there we see the content there. Now we have these links, I didn't actually put something in the href for those links, so let's add just a / for home, and then for contact, we're gonna have /contact. And there we go, we have an application that is starting to look a lot better than just plain ordinary black text on a white background. Now for the last thing that I want to do in this lesson is actually add the contact form, so that in the next lesson, we can handle the submission of that form. So let's just add a form element, as far as the action is concerned, we are going to submit this form to /contact. And let's define the method as post, because that is what we would use a post request for. And let's use some Bootstrap stuff, so we're gonna have a div element with a class of form-group. And we will have, well, no, let's not do labels, let's have an input element that is going to have a text type. Let's set the class to form-control, and the placeholder is going to be email address. Because if this a contact form, then we want the user to supply their email address. Now let's give this a name of just email, and that will be fine. We also need a text area for the message. So let's change our input element to a text area. We'll go ahead and give it a class of form-control, and the name is going to be message. Since it gave us an ID, let's go ahead and set that as a message as well. The class is going to be form-control and, yeah, there we go. So we should have at least a semi-usable form, let's refresh the page. We do, but it stretches across, but that's gonna be okay. Let's have an h2 at the top that says Contact Us, and then finally, we need our button. Although this doesn't really need to be inside of a div element, we can just have our button that has a class of button, and let's make this primary. And then the type is going to be submit, and we'll say Send Message. So we have our contact view, and in the next lesson, we will handle this form, so that whenever we click on the Send Message, we actually do something. Notice that we get an error that says cannot post to /contact. And that's because we didn't write the code to do that, but we will in the next lesson.