Merge remote-tracking branch 'upstream/master'

00 Setup.md

@@ -1,7 +1,7 @@
 
 # The Goorm IDE
 
-This is an alternative to using Codeanywhere. You need to sign up for an account on [their website](https://ide.goorm.io/), sign in and access the dashboard page. Click on the **Create a New Container** button.
+This is a good example of an online IDE. These enable you to do software development without needing to install anything on your computer. They are also ideal for use with a Chromebook. You need to sign up for an account on [their website](https://ide.goorm.io/), sign in and access the dashboard page. Click on the **Create a New Container** button.
 
 ![Create a New Container](exercises/.images/goorm01.png)
 
@@ -87,3 +87,11 @@ The final step is to open a new browser window and enter your chosen URL, you do
 ![Setting up a URL and port](exercises/.images/simple_template.png)
 
 If you make changes to the code or want to quit the IDE you will need to stop the server. To do this, select the terminal window and press ctrl+c.
+
+## Git Configuration
+
+Before you can work with Git you need to update the repository configuration. Follow the instructions below:
+
+1. Update your name (this must be the name as it appears on your ID badge) using `git config user.name 'Joe Bloggs'`.
+2. Update your email (using your unversity email) `git config user.email 'bloggsj@uni.coventry.ac.uk'`
+3. Update your commandline editor choice using `git config core.editor nano` (the editor must be installed!)

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,8 +71,12 @@ 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:
+
 1. Use suitable properties of the [`Date` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) to add paragraph elements to display the following:
     1. The current time in the 24 hour time format: HH:MM:SS
     2. a Unix timestamp (number of seconds since 1st Jan 1970)