Skip to content
Permalink
Browse files
added supporting resources
  • Loading branch information
aa7401 committed Oct 14, 2018
1 parent 76e43df commit 642e0fc3a2e90a2daede6860c838dd73d47ca9af
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 28 deletions.
@@ -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
@@ -117,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).

@@ -1,6 +1,11 @@

# Using Test-Driven Development with Express

Supporting Resources:

1. [TDD Presentation](https://drive.google.com/open?id=14lBIsoru7s4qwpVGa6hhd1Iq1ezXSvZYk38RSNAZT50)
2. [Linda.com TDD Course](https://www.lynda.com/Software-Development-tutorials/Programming-Foundations-Test-Driven-Development/124398-2.html)

If you are completing this worksheet it is assumed that you are already familiar with both NodeJS and the `Express` package that is used to build dynamic websites. This worksheet will serve as a refresher whilst learning how to use a technique called **Test-Driven Development** which you will need to apply on a regular basis during the remainder of this module.

If you are not familiar with NodeJS and Express ask your lab tutor for additional resources.
@@ -18,18 +23,17 @@ Navigate to the `exercises/02_tdd/express/` directory which contains a simple dy
├── __tests__
│ └── todo.test.js
└── views
├── home.handlebars
└── layouts
└── main.handlebars
├── home.handlebars
└── layouts
└── main.handlebars
```

1. The `index.js` file contains the _routes_ script that controls the website.
2. The `modules/` directory contains the three modules that will contain the business logic.
3. the `package.json` file contains the project metadata.
4. The `public/` directory contains files that can be directly accessed by the web server
2. The `__tests__/` directory contains test scripts that matche each of the modules
3. The `views/` directory contains the _Handlebars_ page templates used by the express renderer

5. The `__tests__/` directory contains test scripts that matche each of the modules
6. The `views/` directory contains the _Handlebars_ page templates used by the express renderer

and open the `package.json` file. Notice that there are certain modules listed as dependencies and others labelled as devDependencies. Use the `npm install` command to install all of these.

@@ -112,8 +116,8 @@ Before we can implement any improvements we need to understand how the script cu

1. The form element `<form method="post" action="/">` shows that the form sends a POST request to `/`.
2. Opening the `index.js` file you can see two routes:
1. The first, `app.get()` handles GET requests.
2. The second, `app.post()` handles POST requests, this is the route that handles the form data.
1. The first, `app.get()` handles GET requests.
2. The second, `app.post()` handles POST requests, this is the route that handles the form data.
3. The route is simply calling the `todo.add()` function then redirecting back to the `app.get()` route. This means we need to fix the `todo.add()` function. This is in the `modules/todo.js` file.
4. The `add()` function in the `todo.js` file is currently very simple, it creates an object containing the item and quantity data it has been passed then pushes this onto the array.

@@ -125,13 +129,13 @@ The first step is to define the functionality we want in the form of a test. Cle

```javascript
test('adding a blank string should throw an error', () => {
expect.assertions(1)
try {
todo.add('bread', 1)
todo.add('', '')
} catch(err) {
expect(err.message).toBe('item is blank string')
}
expect.assertions(1)
try {
todo.add('bread', 1)
todo.add('', '')
} catch(err) {
expect(err.message).toBe('item is blank string')
}
})
```

@@ -154,10 +158,10 @@ Step 2 is editing the function so that the test passes. To do this we need to ch

```javascript
module.exports.add = (item, qty) => {
if(item.length === 0) {
throw new Error('item is blank string')
}
data.push({item: item, qty: qty})
if(item.length === 0) {
throw new Error('item is blank string')
}
data.push({item: item, qty: qty})
}
```

@@ -167,8 +171,8 @@ The third and final step is to refactor the code, that is to change its structur

```javascript
module.exports.add = (item, qty) => {
if(item.length === 0) throw new Error('item is blank string')
data.push({item: item, qty: qty})
if(item.length === 0) throw new Error('item is blank string')
data.push({item: item, qty: qty})
}
```

@@ -8,4 +8,4 @@ In this lab you will be applying the knowledge from this week's lecture to the p

Using the resources available from the lecture slides, create a domain modelling.

Choose three architectural styles from those you were shown and use UML to
Choose three architectural styles from those you were shown and use UML to design an architecture for your business scenario.

0 comments on commit 642e0fc

Please sign in to comment.