Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Most frameworks and content management systems use the concept of theming or templating HTML documents. Express is no exception. By default, Express offers Jade as a templating system. In this video, we'll create some templates in Jade and use them to display data from our application. Let's go to the exercise files and set up our server. Go to chapter five and video six, then copy the start folder to your desktop. From here, we'll install the modules. Type in cd and then I'm just going to drag that folder into terminal to get that path.
Now I'm going to type npm install. Now let's open the start folder in Sublime Text. At the moment, the public and the views folders are entirely empty. We're going to be adding some files here in this video. The first file I'm going to add is Bootstrap. To help with the styles, I'll be using the Bootstrap CSS framework, and it's available from getbootstrap.com. You can use whatever CSS files or frameworks you'd like for your project, but I'm personally using this one. So I don't have to spend a lot of time doing browser resets and layouts.
So I'm just going to click Download Bootstrap, then I'm going to decompress the ZIP file. And inside the folder, there's another folder called the dist and another folder called css. The file I want to use is bootstrap.min.css. And so this file is going to go into our public folder. So open up the public folder and just drag bootstrap.min.css there. And now it appear in our public folder. So now let's handle the views. I'm going to be using Jade.
Jade is designed so you can write HTML in a simplified way with fewer key strokes. The indentation in Jade files determine where tags are open and closed. You don't have to worry about closing tags, because the format of the Jade file enforces closed tags automatically. The Jade parser will also throw an error if the formatting of the file is incorrect. This drastically reduces the possibility of accidentally sending broken HTML to a web browser.
Jade is also designed so markup can be split into reusable blocks. You can extend Jade views to use other Jade views so you don't have to repeat markup over and over again. Finally, Jade lets you define place holders for variables. Jade will automatically handle the HTML escaping of variables so you don't send broken markup to browsers. Let's start writing some Jade now. I'm going to create a new file in the Views folder. And I'm going to name it layout.jade.
The first thing I'm going to enter in is the doctype, and now I'm going to open with an HTML tag. You'll notice that I'm not using any angle brackets and I'm not closing any tags. I'm just typing the names of the tags. And now to nest tags, I'm just pressing Tab. So, now I'm going to open the head tag, and inside of head, we're going to have a title tag, and then a link tag so we can bring in that CSS file. The title tag is going to have a variable place holder. So I'm going to type an equal sign after the title tag, and then I'm going to type title.
We'll be supplying the title variable later. For the link tag, I want to specify that this is a style sheet and I also want to tell the browser where to find the style sheet. I start with an open and close parenthesis and then I type rel=stylesheet. To add another attribute, add a comma. And now I'm going to type href=bootstrap.min.css. Now I'm going to go back up a level and start the body. The first thing I'm going to add is a div.
I want to add a class to this div, so I'm going to press dot, and then type container. This is going to give us a div with a class of container. Finally, I'm going to add what's called a block. A block is going to allow us to define a placeholder where more content can appear. I'm going to name this block, content. In a moment we're going to define another Jade file, and it's going to use this block. So, now let's create another Jade file. This first jade file is the layout and we're just going to use this for every screen that we define.
The next view we're defining is the list view. So, let's create that now. I'm gong to save this as list.jade. So, the first thing I'm going to type in the top is extends layout. Now, what this keyword is going to do is it's going to bring in the layout file, and it's going to use it here in list. The next thing I'm going to do is define that content block. So, over here on line eight in layout.jade, we defined block content as a place holder. Now here in list, I'm going to define what's going to go into that placeholder.
From here, I can output the flight number, the flight origin, and the destination. Notice that I'm concatenating a string here. So, now, we've added two views in Jade. We need to do one more thing before we can actually use all these views and that the define a route that calls them. Let's go to apps.js. Let's add a new route called List and then let's define a new function that'll handle this list. I'm going to add this function to the routes module. So, I'm going to type routes.list.
Now, let's go to routes and index.js and define the function. I'm going to go to the bottom of the file, and then type exports.list. I'm going to define that as a new function and it's going to accept a request and a response object. To render this list, I'm going to call the render method of the response object. The first argument is the name of the Jade view that we want to load. In this case I want to use the List view. The second argument is an object with all the data that we want to pass to the view.
Both in layout and in list we have the title variable. Let's set this title variable to all flights. Then in the List view, we had the flights variable. We have the flights defined here on line six so, let's add them to this object. So now with this handler function in place, let's start up the server and go to the web browser. Type in node, space app and then press Return. Go to localhost at Port 3000 and go to slash list.
Get unlimited access to all courses for just $25/month.Become a member