Templating
Up to now you have seen two ways the server can send response data to the client web browser:
- Sending the contents of an HTML file. This is great for complex web pages but you can't include dynamic data.
- Using the
res.write()
,res.send()
andres.end()
functions to send dynamic data. The limitation is that its quite clunky and would be completely inpractical for complex web pages.
In this section you will be introduced to a third approach which combines the best features of each the other two approaches, the use of a templating view engine.
There are a number of templating view engines that are compatible with Express however in this worksheet we will be using one of the more popular ones, called Handlebars. This needs to be imported into your script and set the default layout page.
Locate the files in the 06_templating/01_date/
directory, install the dependencies and start the server.
1 Basic Templating
Access the base route /
, notice that you are seeing a basic html page. Open the script:
- We start by importing the Handlebars package and create a default layout called main. This defines the
main.handlebars
page as the one to use as the default website layout.- Open the
views/layouts/main.handlebars
file. - This template page will be used by all the pages in the website.
- Notice there is a
{{{body}}}
placeholder, this defines where the different page templates will be inserted.
- Open the
- In the base route
/
we call theres.render()
function and pass it the name of the template we want to use:- The parameter is a string,
home
. - This refers to the template
views/home.handlebars
- The parameter is a string,
- The contents of the
home.handebars
template is inserted into the layout file replacing the{{{body}}}
placeholder.
1.1 Test Your Understanding
- Create a
/hello
route that uses a template file calledhello.handlebars
to display a heading with the textHello World!
- Use the knowledge from the css lab to add and link an external stylesheet to display the heading in red.
- Define a directory for static files.
- Create a
style.css
file in this directory that sets the heading red. - Add a link to the main layout file to import this stylesheet.
2 Inserting Data into a Template
So far we have not done anything particularly useful except separate out the layout from the content. In this section you will learn how to insert data directly into a template before it is rendered to the browser.
In the previous example you have seen how to insert single values into a web page but how to we display lists of data? A list is stored in an array in JavaScript so the first task is to ensure your data is in an array. If you recall lab 3 you will remember that the sqlite db.all()
function returns an Array
.
Restart the server and access the /date
route. Notice that it displays the current date in the browser. Open the index.js
file and locate the route.
- We start by creating a new
Date
object. - We use its built-in functions to create a string containing the current date.
- Next we create a JavaScript object that contains all the data we want to send to the template:
- In this example we have a
title
property containing the stringMy First Template
. - We have a seccond property called
today
that contains the date string we have just built.
- In this example we have a
- Finally we call
res.render()
but this time we pass the data as the second parameter.
To understand what happens to this data we need to understand the template. Locate the views/date.handlebars
template file:
- Notice that there are two placeholders, shown as
{{xxx}}
.- Each placeholder has a name.
- The names need to match the properties in the data we are sending to the template.
- Each placeholder is replaced by the data stored against the object property:
- The
{{title}}
placeholder is replaced by the stringMy First Template
. - The
{{date}}
placeholder is replaced with the date string we built in the script.
- The
2.1 Test Your Understanding
- Use suitable properties of the
Date
object to display the date in a variety of different formats in a series of paragraph elements:- dd/mm/yyyy
- a Unix timestamp (number of seconds since 1st Jan 1970)
- Add a table to display some information about the client computer (using the
req.connection
object). - Extend the table to display the header information (using the
req.headers
object).
3 Repeating Data
So far we have inserted data from object properties into our templates. This works find for single records however often we will have multiple records to display such as the results of a database query. In this situation we will need to repeat a block of html code such as a list item or table row.
Restart the server and view the /food
route. Notice that it displays a numbered list showing four food items. Locate the route in your script.
- We start by creating an array. Each imdex contains an object with two properties, name and qty.
- We pass the array to
res.render()
as a JavaScript object using the myFood property.
Open the food.handlebars
template:
- Notice that there is an ordered list element.
- Inside this there is a special helper,
{{#each myFood}}
- The helper also has a closing block
{{/each}}
- The
myFood
property is passed to the opening block.
- The helper also has a closing block
- This block loops through the array stored in the
myFood
property. - The
this
object holds the object for the current index.- So
this.item
returns theitem
property (the name of the food item).
- So
This allows the handlebars template view engine to handle repeated data.
3.1 Test Your Understanding
- Modify the template to display the shopping items in a html table instead of an ordered list.
- Add a second column to display the quantities of each item.
- Add a table header to display column headings.
- Without adding any more html, colour every other row of the table in light grey.
4 Putting it Together
You have covered a lot of topics over the first few weeks of the module. Before you continue, complete the challenges listed below. These will help you revise all the content you have covered.
The 02_bookshop/
directory contains a 2-page template-driven dynamic website based on the data you used in the Databases lab. Install the dependencies, start the server and access the base route /
and the /details/1
route then study the script index.js
.
Now try to complete the following challenges:
- Add a route called
/about
that displays information about the fictional bookshop. - Add a footer that appears on all pages using the correct html5 element.
- Convert the list of books into a table.
- Add a column to display the ISBN number
- Add a hyperlink to the book titles to jump to the correct book details page.
- Add a column that displays links to take you to the Amazon product page (hint: use the ISBN number and study this link carefully!).
- Create and link a stylesheet to improve the page appearance:
- Style the header.
- Style the footer.
- Make the table easier to read.
- Add all the database fields to the product details page.
- Modify the stylesheet to improve the appearance.