Skip to content
Permalink
Browse files
added explanation of url-encoding
  • Loading branch information
aa7401 committed Oct 12, 2018
1 parent b02204d commit bcba966b9bb48b83a28e8d658c0b679bbed17104
Showing 1 changed file with 4 additions and 2 deletions.
@@ -9,7 +9,7 @@ We will start by producing dynamic web pages that combine a static layout with d

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](https://www.npmjs.com/package/handlebars). This needs to be imported into your script and set the default _layout page_.

For this part of the lab you will be working with the website found in the `01_nodejs/01_templates_forms/simple_templating/` directory, the same one you used in the previous setup exercise.
Each lab exercise is based on files located in the `exercises/` directory. The structure of this mirrors that of the topics and labs. For this part of the lab you will be working with the same lab files you used in the setup exercise.

1. As you have already seen, this displays a simple message together with the picture of a clock.
2. Add `/date` to the end of the URL, notice that this now displays a page showing the current date.
@@ -51,7 +51,7 @@ When an html page is loaded into a browser it contains link to other _static_ fi

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`.
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 are not sure, make use of the [`console.log()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) function to print data to the terminal window.

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.

@@ -71,6 +71,8 @@ To understand what happens to this data we need to understand the _template_. Lo
1. The `{{title}}` placeholder is replaced by the string `My First Template`.
2. The `{{date}}` placeholder is replaced with the date string we built in the script.

There are two forms of the placeholder, one uses double brackets `{{xxx}}` and the other triple brackets `{{{xxx}}}`. The only difference is how the inserted data is processed. With double braces, the data is [URL-Encoded](https://www.tutorialspoint.com/html/html_url_encoding.htm) before being inserted. This replaces 'illegal' characters such as `<` and `&` with their codes. If your data contains html elements such as `<p>`, you will find these display in the web page instead of being treated as markup. You can see this by right-clicking in the browser and choosing **View page source**.

#### 1.2.1 Test Your Understanding

You will now modify the `/date` route as follows:

0 comments on commit bcba966

Please sign in to comment.