merged

00 Setup.md

@@ -95,3 +95,4 @@ Before you can work with Git you need to update the repository configuration. Fo
 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!)
+4. Cache your credential (username/password) for an hour using `git config credential.helper 'cache --timeout=3600'`

01 Lab 1 Templates and Forms.md

@@ -1,6 +1,10 @@
 
 # The ECMA6 Programming Language
 
+Supporting resources:
+
+1. [ECMA6 presentation](https://drive.google.com/open?id=1RcI1HSyJpAV64TPEjqzp0Udad9IGZvo4uF7sapCFrkE)
+
 In this lab you will get to grips with the ECMA6 programming language by learning to build dynamic websites
 
 ## 1 Templating
@@ -22,12 +26,12 @@ By changing the URL you tell the server to send you different web pages. This is
 The URL without any additions is called the **base** route, and is shown with a `/`. Locate the `app.get()` function that handles this route.
 
 1. 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.
-	1. Open the `views/layouts/main.handlebars` file.
-	2. This template page will be used by _all_ the pages in the website.
-	3. Notice there is a `{{{body}}}` placeholder, this defines where the different page templates will be inserted.
+    1. Open the `views/layouts/main.handlebars` file.
+    2. This template page will be used by _all_ the pages in the website.
+    3. Notice there is a `{{{body}}}` placeholder, this defines where the different page templates will be inserted.
 2. In the base route `/` we call the `res.render()` function and pass it the name of the template we want to use:
-	1. The parameter is a string, `home`.
-	2. This refers to the template `views/home.handlebars`
+    1. The parameter is a string, `home`.
+    2. This refers to the template `views/home.handlebars`
 3. The contents of the `home.handebars` template is inserted into the layout file replacing the `{{{body}}}` placeholder.
 
 #### 1.1.1 Static Files

01 Lab 2 Dynamic Websites.md

@@ -62,6 +62,7 @@ If you are using an online IDE such as Goorm.io **you will not be able to use th
 
 ```sql
 ALTER TABLE books ADD author TEXT;
+DELETE FROM books WHERE id = 42;
 INSERT INTO books(title, author) VALUES ("foo","bar");
 UPDATE books SET publisher = 'foo', publshed = 2018 WHERE id = 1;
 ```
@@ -80,7 +81,7 @@ Our first task is to add an author field to the database. Make sure the **Databa
 
 ![Modify Table](exercises/.images/modify_table.png)
 
-Use the **Add Field** button to add the `author` field which should have a type of `text`. 
+Use the **Add Field** button to add the `author` field which should have a type of `text`.
 
 ![Modify Table](exercises/.images/add_field.png)
 
@@ -116,7 +117,7 @@ $ npm install
 
 This will install all the modules defined in the manifest.
 
-Now you should run the `index.js` script in the same `bookshop/` directory. 
+Now you should run the `index.js` script in the same `bookshop/` directory.t
 
 Notice that there is a message in the terminal to let you know the script has connected to the database. Now view the web page, notice it displays the book titles from your database (including the ones you added).
 
@@ -126,12 +127,12 @@ This is known as a dynamic (or data-driven) website. By the end of this section
 2. One line 18 we import the sqlite3 package and then directly below this we create a `Database` object that points to the `bookshop.db` database we worked on earlier. The callback is triggered either when the database is connected or an error occurs.
 3. Underneath this is the first of two routes. This first one `/` will be used to display a list of books.
 4. the first step (on line 26) is to write an SQL statement to retrieve all the book titles and their primary keys from the `books` table. We display this in the terminal to check the syntax.
-	1. Copy this SQL statement and, using either the CLI or GUI tools, run this against your database to check it works as expected.
+    1. Copy this SQL statement and, using either the CLI or GUI tools, run this against your database to check it works as expected.
 5. Now we call the `all()` function that is part of the database (`db`) object. This takes two parameters:
-	1. The SQL statement we created previously.
-	2. A _callback_ function to run once the statement has been executed. This takes two parameters, an error object (null if no error) plus a data object that contains an array of JS objects containing the data returned from the query.
+    1. The SQL statement we created previously.
+    2. A _callback_ function to run once the statement has been executed. This takes two parameters, an error object (null if no error) plus a data object that contains an array of JS objects containing the data returned from the query.
 6. We now print the data object to the terminal. Note that it is not easy to read.
-	1. Replace line 30 with `console.log(JSON.stringify(data, null, 2))`. What has changed? Can you explain why?
+    1. Replace line 30 with `console.log(JSON.stringify(data, null, 2))`. What has changed? Can you explain why?
 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.
 
@@ -157,14 +158,14 @@ There are not many books in our database so displaying them all is not a problem
 1. If you look directly under the first route you will see a second route commented out (lines 35-53). Comment out the route you have been using in section 2 and uncomment this one. Restart the script.
 2. Notice the route uses a different template (`newindex.handlebars`) which contains an html form. This will display a search box and button.
 3. Type in your search term `sqlite` and click on the search button, this reloads the page. You will see the search term `sqlite` remains in the text box and the page displays the books that match your search term.
-	1. Click in the _address bar_ in your browser and look carefully at the URL.
-	2. It ends with the string `?q=hello`.
-	3. Examine the attributes in the html form element:
-		1. The `action="/"` attribute tells the form to send the data to the root URL.
-		2. The `method="get"` attribute tells the form to pass the data in the URL.
-	4. Examine the html for the text box:
-		1. The `type="text"` attribute tells the browser to display a textbox.
-		2. The `name="q"` tells the form to submit the contents of the textbox as an object called `q`, this explains the string in the URL.
+    1. Click in the _address bar_ in your browser and look carefully at the URL.
+    2. It ends with the string `?q=hello`.
+    3. Examine the attributes in the html form element:
+        1. The `action="/"` attribute tells the form to send the data to the root URL.
+        2. The `method="get"` attribute tells the form to pass the data in the URL.
+    4. Examine the html for the text box:
+        1. The `type="text"` attribute tells the browser to display a textbox.
+        2. The `name="q"` tells the form to submit the contents of the textbox as an object called `q`, this explains the string in the URL.
 4. On line 60 the search string is passed to the page template. If you examine the html form you will see that this is used as the `value` attribute in the textbox, this is how the search string _remains_ in the search box after the search.
 
 ### 3.1 Test Your Understanding
@@ -180,13 +181,13 @@ At the moment we are only displaying some of the data for each book such as the
 Make sure the script is running and try accessing the `/details/1` route. This displays detailed information on the first book in the database (the one with the primary key `1`). What happens if you change this to `/details/2`? By passing the book id in the URL we can tell the page which book details to display. Open the `index.js` file and locate the `/details/:id` route that starts on line 65.
 
 1. The route contains two segments:
-	1. The first segment must be the string `details`.
-	2. The second segment can be anything at all. This value can be accessed in the `req.params` object.
-		1. Because the route defines `:id`, this is the object key it will be stored under, `req.params.id`.
-	3. This value is used to build the SQL statement (line 67) which is displayed in the terminal.
+    1. The first segment must be the string `details`.
+    2. The second segment can be anything at all. This value can be accessed in the `req.params` object.
+        1. Because the route defines `:id`, this is the object key it will be stored under, `req.params.id`.
+    3. This value is used to build the SQL statement (line 67) which is displayed in the terminal.
 2. Now we call the `all()` function that is part of the database (`db`) object. This returns a JavaScript object containing the first matching record.
-	1. The callback runs after the query completes or an error occurs.
-	2. If no error occurs, the entire object is displayed in the terminal and passed to the html template.
+    1. The callback runs after the query completes or an error occurs.
+    2. If no error occurs, the entire object is displayed in the terminal and passed to the html template.
 3. If you open the `details.handlebars` template you can see the placeholder names match the database fields.
 
 ### 4.1 Linking the Pages
@@ -195,8 +196,8 @@ Now we have built the book details page we need to add hyperlinks to each book i
 
 1. Locate the point where you are looping through the array of books and building the html list/table.
 2. Wrap the book title in an html `a` element.
-	1. The `href` attribute should point to the details page and pass the id field for the book:
-	2. Here is a clue: `<a href="/details/${book.id}">${book.title}</a>`.
+    1. The `href` attribute should point to the details page and pass the id field for the book:
+    2. Here is a clue: `<a href="/details/${book.id}">${book.title}</a>`.
 3. Restart the script and see if the links are displayed correctly.
 4. If you click on one of these links does it load the correct book details?
 
@@ -206,13 +207,14 @@ Now we have built the book details page we need to add hyperlinks to each book i
     1. By default handlebars will have url encoded the html elements you added. To avoid this, **use three curly braces** instead of 2 around the expression.
 2. You have added additional fields to the database but these are not shown. Modify the script (and the html template) to display these missing fields.
 3. The _page title_ currently displays the text `Bookshop`. Change this to display the name of the book. To do this you will need to insert an additional data placeholder in the shared **template file**.
+    1. You should keep the default title on the other pages in the website. To do this you should use the handlebars [conditional helper](https://handlebarsjs.com/block_helpers.html)
 4. Add a back button to return to the search page.
-	1. What has happened to the search filter when you go back to the previous page?
-	  1. You will need to pass this to the details page and pass it back when the back button is clicked.
-		2. Add this to the URL you use to access the details page.
-		3. You will then need to add this to the link to return to the search results page.
+    1. What has happened to the search filter when you go back to the previous page?
+    2. You will need to pass this to the details page and pass it back when the back button is clicked.
+    3. Add this to the URL you use to access the details page.
+    4. You will then need to add this to the link to return to the search results page.
 
-# 5 Inserting Data
+## 5 Inserting Data
 
 So far we our dynamic website has been working with data from the database but we have not been able to add new records to the database. In this section we will be building a form to let us add data.
 
@@ -225,16 +227,16 @@ There is already a working form. Access the `/form` route in your browser, this
 
 1. Towards the end of the script there is a `/form` route which sends the contents of the `form.handlebars` template to the browser. This is how we display the form.
 2. In the `form.handlebars` file you will see that we have created a simple html form. Note:
-	1. The `form` element contains a couple of important attributes:
-		1. The `action="/add"` attribute directs the form to send its data to the `/add` route.
-		2. The `method="post"` attribute directs the form to send its data in the message body and not in the URL.
-		3. Taken together it means that the data will be sent using the POST method to the `/add` route.
-	2. Each form element has a `name` attribute which defines the object key each piece of data can be found under.
+    1. The `form` element contains a couple of important attributes:
+        1. The `action="/add"` attribute directs the form to send its data to the `/add` route.
+        2. The `method="post"` attribute directs the form to send its data in the message body and not in the URL.
+        3. Taken together it means that the data will be sent using the POST method to the `/add` route.
+    2. Each form element has a `name` attribute which defines the object key each piece of data can be found under.
 3. In the `index.js` script you will see a route `app.post('/add', callback)`, it is this that will be called when the form data has been submitted.
-	1. All the post data can be accessed through the `req.body` object and, on line 81 we print this to the terminal to check all the data is there.
-	2. Next we use this data to build an SQL statement to insert a new record into the database.
-	3. The `db.run()` function executes the SQL statement and the callback runs either on success or if there was an error.
-	4. Finally, as soon as the SQL statement has run we redirect the browser back to the main page which will display all the book records including our new one.
+    1. All the post data can be accessed through the `req.body` object and, on line 81 we print this to the terminal to check all the data is there.
+    2. Next we use this data to build an SQL statement to insert a new record into the database.
+    3. The `db.run()` function executes the SQL statement and the callback runs either on success or if there was an error.
+    4. Finally, as soon as the SQL statement has run we redirect the browser back to the main page which will display all the book records including our new one.
 
 ### 5.1 Test Your Understanding