Merge branch 'master' of https://github.coventry.ac.uk/340CT-1819SEPJ…

…AN/TEACHING-MATERIALS

01 Lab 1 Templates and Forms.md

@@ -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:

01 Lab 2 Dynamic Websites.md

@@ -106,7 +106,7 @@ Using the data in the `books.csv` file, add the authors to each of your book rec
 
 ## 2 Building a Dynamic Web Page
 
-Now you have a working database containing some useful data you need to display this in a web page.
+Now you have a working database containing some useful data you need to display this in a web page. It uses the [sqlite3](https://www.npmjs.com/package/sqlite3) package which comes with [detailed documentation](https://github.com/mapbox/node-sqlite3/wiki/API) which you should refer to as you make sense of the code.
 
 This project includes a manifest file called `package.json`. Open this and study the `dependencies` key which lists all the packages and their versions needed by the server. To install all dependencies type:
 
@@ -135,6 +135,13 @@ This is known as a dynamic (or data-driven) website. By the end of this section
 7. The query returns an array of records stored in the `data` parameter in the callback function. On line 31 we pass this to the `home.handlebars` template.
 8. If you open the `home.handlebars` template you will see the template helper function that loops through the array of records and builds a list.
 
+When retrieving data using the SQLite package there are two key functions you should understand:
+
+1. the `db.get()` function runs the query and returns the _first record that matches_. This means it returns a JavaScript **object**.
+2. the `db.all()` function returns _all the records that match_. This means it returns a JavaScript **array**.
+
+Take time to study the other functions which are detailed in the [documentation](https://github.com/mapbox/node-sqlite3/wiki/API).
+
 ### 2.1 Test Your Understanding
 
 1. Convert the html list into a 1 column html table.