From bb99173111809789574416e36724ab302583b684 Mon Sep 17 00:00:00 2001 From: Mark Tyers Date: Thu, 18 Jul 2019 19:48:14 +0100 Subject: [PATCH] deleted old content --- ...amic Websites.md => 01 Dynamic Websites.md | 0 01 Setup.md | 181 ------ 01a The HTTP Protocol.md | 268 -------- ...ation.md => 02 Forms and Authentication.md | 0 02 Learning HTML5.md | 310 ---------- 03 Acceptance Testing.md | 0 03 Learning CSS3.md | 570 ------------------ 11 Deployment.md => 04 Deployment.md | 0 04 Functions and Objects.md | 437 -------------- 08 Code Quality.md | 100 --- 09 Automated Testing.md | 5 - 10 APIs.md | 225 ------- README.md | 151 +---- 13 files changed, 2 insertions(+), 2245 deletions(-) rename 05 Dynamic Websites.md => 01 Dynamic Websites.md (100%) delete mode 100644 01 Setup.md delete mode 100644 01a The HTTP Protocol.md rename 07 Forms and Authentication.md => 02 Forms and Authentication.md (100%) delete mode 100644 02 Learning HTML5.md create mode 100644 03 Acceptance Testing.md delete mode 100644 03 Learning CSS3.md rename 11 Deployment.md => 04 Deployment.md (100%) delete mode 100644 04 Functions and Objects.md delete mode 100644 08 Code Quality.md delete mode 100644 09 Automated Testing.md delete mode 100644 10 APIs.md diff --git a/05 Dynamic Websites.md b/01 Dynamic Websites.md similarity index 100% rename from 05 Dynamic Websites.md rename to 01 Dynamic Websites.md diff --git a/01 Setup.md b/01 Setup.md deleted file mode 100644 index 34ee822..0000000 --- a/01 Setup.md +++ /dev/null @@ -1,181 +0,0 @@ - -# The Goorm IDE - -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) - -You will be presented with a screen where you can name your project and choose a software stack: - -![Create a New Container](exercises/.images/goorm02.png) - -You should see an IDE that displays the files down the left side with an editor in the main view and a terminal window below: - -![Create a New Container](exercises/.images/goorm03.png) - -## 1 Accessing the Lab Content - -The lab materials are in a repository on the University GitHub server. We need to make a copy of this repository by forking it, then clone it into Goorm.io, follow the instructions below carefully. - -### 1.1 Forking the Teaching Materials - -You should start by logging in to the University GitHub server using your university username and password. Make sure you don't log into GitHub.com! - -Next you should open the web page containing the 205CDE teaching materials and click on the small **Fork** button in the top-right corner of the page. - -![The Clone Button](exercises/.images/github_fork_1.png) - -You will be asked to select where you want to place the forked repository, make sure you choose your own personal space (the one that is named using your username). - -![The Clone Button](exercises/.images/github_fork_2.png) - -This will create an exact copy (clone) of the repository in your personal workspace. It should indicate where the original version was (see below). - -![The Clone Button](exercises/.images/github_fork_3.png) - -### 1.2 Cloning Your Repository - -The next step is to clone the forked repository containing the lab materials into the IDE. Locate the **Clone or download** button, clicking this pops open a small window as shown. Copy the URL in this window to your clipboard. - -![The Clone Button](exercises/.images/github_fork_4.png) - -Returning to the IDE, run the following command in the terminal, the url to your forked repository should already be in the clipboard: - -```shell -git clone https://github.coventry.ac.uk/xxx/TEACHING-MATERIALS.git labs -``` - -This creates a `labs/` directory containing all the files from your forked repository. - -### 1.3 Adding an Upstream Remote - -Your forked repository is a snapshot of the contents of the original one. The problem is that the repository you forked (called the upstream repo) will be updated on a regular basis and we need to ensure these changes are pulled into your fork. - -To do this we need to add a link to this repository and use this to pull new content down. Follow these instructions carefully: - -1. Make sure you have the terminal window open and have navigated to inside the `labs/` directory. A quick check is to use the `pwd` command, the folder path should end with `/labs`. You may need to use the `cd labs` command to get to the right place. -2. Now you need to add the upstream remote using the `git remote add upstream https://github.coventry.ac.uk/205CDE-1819JANMAY/TEACHING-MATERIALS.git` command. -3. Finally we should check we have links to both the original repository and our fork using the `git remote -v`. - -### 1.4 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!) -4. Cache your credential (username/password) for an hour using `git config credential.helper 'cache --timeout=3600'` -5. Update the path to your _git hooks_ directory using `git config core.hooksPath ./.githooks` (more on this in a later lab). - -### 1.5 Disabling the Built-In Linter - -By default real-time linting is enabled however this currently uses an old linter and is not ECMA6 compatible. You should disable real-time linting from the **Project** menu. - -## 2 Updating NodeJS - -We can see the current version of NodeJS by running the `node -v` command. The latest version is 10.11.0 and so we need to upgrade this. - -Start by installing the Node Version Manager tool: - -```shell -curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash -``` - -Now click on the small blue oval on the terminal tab to reload the shell. There are lots of versions available, use the `nvm list-remote` command to see these. Install the latest using `nvm install 10.11.0` substituting the latest version number. To check the version installed use `node -v` again. - -## 3 Running a Web Server - -Use the terminal to navigate to the `exercises/01_http/` directory and try running the `index.js` script: - -```shell -$ cd exercises/01_setup/ -$ node index.js - Error: Cannot find module 'koa' -``` - -Notice you get an error, we need to install the missing module using the _Node Package Manager_ tool. We can then try to run the script again: - -```shell -$ npm install koa -$ node index.js - app listening on port 8080 -``` - -Now we have the server up and running so the final task is to view the web page using the web browser. - -![Setting up a URL and port](exercises/.images/goorm04.png) - -This will open a window where you will need to register a new URL and port: - -![Setting up a URL and port](exercises/.images/goorm05.png) - -1. Use your **University Username** as the URL segment. -2. Make sure you specify port **8080** (this is the one used by your server). - -You need to set this up as your **run** configuration as shown. - -![Setting up a URL and port](exercises/.images/goorm06.png) - -The final step is to open a new browser window and enter your chosen URL, you don't need to specify the port, this was done through port-forwarding: - -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. - - -## 4 Local Setup - -If you are planning on using your own laptop you will need to install some key pieces of software. Obviously its impossible to cover the installation process in detail for every operating system but there are plenty of guides online. You should install: - -1. Visual Studio Code (Not Visual Studio!) -2. The latest version of NodeJS. For Linux follow the instructions to install nvm, for other platforms download and install the latest version from the [official site](https://nodejs.org/en/), make sure you install the **latest** and not the LTS version. -3. You also need to install Git if it is not already installed. Mac and Windows users can download the installer from the [official website](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git). - -Once everything is installed you can clone the module repository using the same command you used in the Goorm IDE lab (make sure you clone it to a sensible location). - -Once the repository is cloned you should open VS Code and use the File > Open Folder option to select and open the folder containing the repository (On some systems you choose File > Open). - -Once the web server is up and running you access the page by pointing the browser to `localhost:8080`. - -## 5 Introducing Unit Testing - -As we develop more complex web apps it becomes more and more difficult to fully test our app every time we change the code. By not testing everything at regular intervals there is an increasing chance that our new code could break the existing code in our system. Since regular testing is a chore, programmers have developed ways to automate this process. - -In this section you will be given a sneak preview of how an automated test suite works. We will be using a testing framework developed by Facebook, called [Jest](https://jestjs.io) and will be using a second tool called [Supertest](https://github.com/visionmedia/supertest#readme) which allows us to interact with our code using http. Rather than using the status code numbers in our tests we will use a module called [http-status-codes](https://www.npmjs.com/package/http-status-codes) to display these as human-readable strings. - -The process requires you to install both these packages and then run the `jest` command: - -```shell -$ npm install jest supertest http-status-codes -$ ./node_modules/.bin/jest - PASS .test/index.test.js - GET / - ✓ the page should return a status code of "200 OK" (25ms) - ✓ we should see the text "Hello World" displayed (3ms) - - Test Suites: 1 passed, 1 total - Tests: 2 passed, 2 total - Snapshots: 0 total - Time: 1.478s - Ran all test suites. -``` - -If you study the test output carefully you will notice that there is a test script `.test/index.test.js` which contains 2 tests in 1 test suite. Each test has a name and the ticks indicate that both tests have passed. - -### 6.1 Watch Mode - -It is possible (and desirable) to run the test suites every time you save any changes to your app. Testing tools such as Jest support a _watch mode_ that detects if files have changed and automatically runs the full test suite if this happens: - -```shell -./node_modules/.bin/jest --watch -``` - -To exit watch mode press (ctrl+c). - -### 6.1 Test Your Understanding - -Make sure that you are running Jest in watch mode. - -1. Modify the `index.js` script so that the web page displays your name. -2. The unit test suite will be triggered by you saving your changes. Read the output carefully. -3. Modify the test suite so that it is looking for the text `My First Tests`. -4. The unit test suit will be triggered again, note that one of the tests has still failed. -5. Modify the `index.js` file to make the test suite pass. diff --git a/01a The HTTP Protocol.md b/01a The HTTP Protocol.md deleted file mode 100644 index 7c85898..0000000 --- a/01a The HTTP Protocol.md +++ /dev/null @@ -1,268 +0,0 @@ - -# The HTTP Protocol - -In the lecture you learned about the HTTP protocol which is used to transfer information between web server and the web browser. Without this the World-Wide Web (WWW) would not exist. This lab will allow you to apply this knowledge and learn the details. In this lab you will be using the [NodeJS](http://nodejs.org) [Express package](https://www.npmjs.com/package/express) to write scripts that make use of this protocol. - -You should refer to the [lecture slides](https://goo.gl/H88iFn). - -**TODO: explanation of a web server** - -## Setup - -You will need to use the Chrome web browser for these exercises and have installed the [ModHeader](https://goo.gl/YWWK3q) plugin. - -You should also ensure that you have the latest version of NodeJS (10.6.0 at the time of writing). You should check this is set up correctly by using the `node -v` command which checks the version of NodeJS that is installed. If you are using MacOS or Windows simply download the **Latest** version (not the LTS) from the website and install. If you are using an Ubuntu-flavoured version of Linux (such as CodeAnywhere) you need to use the [Node Version Manager](https://github.com/creationix/nvm) tool. - -Open the **Chrome Developer Tools** as shown below. - -![opening the Chrome developer tools](exercises/.images/chrome_01.png) - -## 1 Request/Response - -The HTTP protocol works on a request-response process, The client (typically the web browser) sends a request to the server which sends a response back to the client. - -The request consists of three key parts: - -1. The **Uniform Resource Locator** (URL) of the resource being requested. -2. The **HTTP Method** specifying the action to be taken. -3. A set of **Request Headers** to pass additional information. -4. Some methods (such as POST) also require a **Request Body**. - -We will be working through some exercises that make use of all of these. - -### 1.1 The Uniform Resource Locator - -Study the `index.js` script in the `exercises/02_http/01_url/` directory. - -1. If you study lines 4-10 of `index.js` you will see a list of the modules we need to install. Refer the the previous lab if you get stuck at this point: - 1. `koa` - 2. `koa-router` - 3. `koa-bodyparser` - 4. `koa-static` - 5. `js2xmlparser` -2. The first line is the _shebang_, it tells the script what application is needed to run it. -3. Lines 4-10 import the module packages we need for our script to work. Koa is a modular framework, on its own it does very little but depends on plugins (middleware) for its functionality. -4. Lines 11-15 are where we configure the koa _middleware_. -5. We need two global variables in our script, one to store a list of items and the second to store the port number we will be using: - 1. The `let` keyword defines a _mutable variable_ which can change its value. - 2. The `const` keyword defines an _immutable variable_. Once a value is assigned it cannot be changed, these are sometime called _constants_. -6. The main part of the script defines the _routes_ and we will be covering these in more detail as we progress through the lab. -7. Right at the end (line 123) we start the server on the defined port and _export_ the _koa object_ `app`. By exporting it we can import the script into our automated test suite (briefly covered in the previous lab). - -Now start the server: - -1. Access the root url, notice that the message **Hello World** is displayed in the browser. -2. Access the `/anon` url. This should result in the same message being displayed. -3. Locate the code for these two routes, can you understand how they work? - -### 1.2 URL Parameters - -In the HTTP protocol URLs represent resources on the server. Up to this point each URL has matched a different _route_ (defined by an `router.get()` function) but on a real server there might be a database containing many thousands of records that we want to be able to access. For this to work, each record would need a different, unique, URL! Since each record in an SQL database has a unique key (primary key), a simple solution would be to include the primary key in the URL thus creating a different URL for each record. - -To do this we need to extract some data from the http object `ctx` which is the parameter passed to the _anonymous callback function_. The `ctx` object is a _JavaScript Object_ and so we need to fully understand how these work. - -Start the server and access the `/books/1` route. What is displayed in the web browser? - -1. Since we have not yet covered how to connect to a database, on line 20 we have defined a JavaScript array which contains 3 indexes, these are numbered 0-2. -2. Directly underneath this we have defined a route `/books/:index` which contains two **segments**: - 1. The first matches the text `/books`, this works like all the routes we have seen previously. - 2. The second, beginning with the colon (`:`) represents a **URL Parameter**. This represents one or more characters. -3. In the _anonymous callback function_ we are accessing the `params` property of the `ctx` object and storing this in a constant called `parameters` which we are then printing to the terminal. - 1. Check the terminal to see this constant. - 2. Note that it is itself a JavaScript object and that it contains a single property called `index` which matches the name of the URL segment. - 3. The value of this property is the string we added to the URL. -4. This index value is used to look up the title of the book in the array, the book title is stored in a constant. -5. Finally the book title is send to the web browser. - -#### 1.3.1 Core Knowledge - -JavaScript objects comprise one or more **property-value pairs**. There is an example below to illustrate this. - -1. The **property** can be any string however if this is not a valid JavaScript variable name it must be enclosed in single quotes. -2. The **value** can be any valid JavaScript data type including another object. - -```javascript -const name = { - first: 'John', - 'last name': 'Doe', - dob: { - year: 1970, - month: 'January' - } -} -``` - -Each value in an object can be extracted using one or two different syntaxes: - -1. If the property is a valid variable name either the dot or bracket notation may be used. -2. If the property is _not_ a valid variable name or _the property to find is itself a variable_ you need to use the bracket notation. - -```javascript -const firstName = name.first -const lastName = name['last'] -const prop = year -const dobYear = name.dob.[prop] -``` - -New properties can be added and removed from an object. - -```javascript -name.dob.day = 15 -delete name.first -delete name['last name'] -``` - -#### 1.3.2 Test Your Understanding - -In this section you will learn about a number of JavaScript functions. In each case you will be provided with a link to the documentation. - -1. Add a fourth book to the array and make sure you can access this by passing its index in the URL. -2. We are not restricted to only having two URL segments: - 1. Modify the route to add a second parameter called `index2`. - 2. Make sure this is triggered by restarting the server and accessing this by passing a second parameter. - 3. Modify the script to print out both book titles. -3. Next you need to add some validation to make sure the script does not crash (note that if you are using GoormIDE you will not be able to test it): - 1. If the index in the URL exceeds to number of books in the array you get an error. Insert an [`if...else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) that sends a suitable message to the browser if the index number in the URL is too high. - 2. The index must be a number. Use the [`isNaN()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN) to check and send a suitable message to the browser if it is not. if it is, use the [`parseInt()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) to convert it to a number. - 3. The number needs to be a whole number (integer). All JavaScript numbers are objects and have a number of useful functions. Use the [`Number.isInteger()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger) to check it is indeed an integer. Send a suitable message to the browser if it is not. - -### 1.3 URL Query Strings - -Whilst URL parameters are used to define unique URLS to identify online resources, sometimes we want to be able to pass additional information and this is done through the use of **query strings**. - -1. Restart the server and access the `/hello/John%20Doe` route. - 1. Since spaces are not permitted in a URL we have to replace spaces with special codes. This is known as **URL Encoding** and there are specific [codes](https://www.degraeve.com/reference/urlencoding.php) to use. - 2. Notice that the message `hello John Doe` is displayed in the browser. -2. Now change the URL to `/hello/John%20Doe?format=upper`. - 1. Notice that the same data has been displayed just the format has changed. - -Open the `index.js` file. The route is between lines 37-43. - -1. Notice that the query string(s) are not part of the route. -2. The query string comprises name-value pairs. -3. The query string data can be accessed in the `ctx.query` object. -4. Because this data is not part of the route it may or may not be present so you should check to see if the data is present before trying to use this. - -#### 1.3.1 Test Your Understanding - -1. Modify the route so that if the `format` query string is set to `lower` the name is set as [lowercase](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase). -2. Add a second query string called `reverse`: - 1. if missing or set to `false` the text is left alone. - 2. If it has a value of `true` the text should be reversed. You will need to use the following JavaScript functions, read the documentation carefully before trying to complete the task: - 1. You will need to use the [`split()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) to convert the string to an array of characters. - 2. Then you will need to use the [Array.reverse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) function to reverse the array indexes. - 3. Finally the [`join()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) to convert the array back into a string. - -### 1.4 Request Headers - -Headers allow for additional information to be passed: - -1. Data can be sent as part of the HTTP request header sent from the browser to the web server. -2. The server can send extra data back to the web browser. - -Make sure the server is still running and use the [Chrome web browser](https://www.google.com/chrome/) to access the root URL `/`. - -1. Open the [Chrome Developer Tools](https://developers.google.com/web/tools/chrome-devtools/) by clicking on the _customise and control Google Chrome tools_ button (the three dots to the extreme right of the address bar). -2. Choose **More tools** from the menu and then **Developer tools** from the submenu. -3. Locate the **Network** tab in the Chrome developer tools. -4. Reload the web page. -5. You should now see the resource sent in the HTTP response together with some data dealing with response times. -6. Click on the file name (as shown) to display the HTTP headers. - -![how to show the headers in Chrome](exercises/.images/chrome_02.png) - -As you can see, the headers are displayed in a nice format. We need to see the _source_ (the raw data). Locate the **View Source** links as shown and click to toggle how the data is displayed. - -![how to show the raw header data](exercises/.images/chrome_03.png) - -You can now see the raw data sent in the _Request Headers_ and returned in the _Response Headers_. - -![displaying the raw header data](exercises/.images/chrome_04.png) - -In the **Request Headers** note that: - -1. The first line specifies the HTTP method (GET) and the version of HTTP we are using (HTTP/1.1). -2. Next it specifies the host the request is being sent to. -3. Then there are multiple request headers. These are always property-value pairs. Lets look at a few of the more interesting ones: - 1. The `User-Agent` header sends information about the browser being used. - 2. The `Accepts` header tells the server what [MIME](https://goo.gl/W2SWtZ) data types our browser prefers. - -In addition to the **Response Body** (the information in the web browser window), the server has returned a **Status Code** (in this case it is `200` meaning `OK`) plus a set of **Response Headers** that provide additional information. - -1. The `Content-Length` header specifies the number of characters in the response (in this case 11). -2. The `Date` header is a string representing the date and time the response was sent. -3. The `ETag` header contains a hash of the contents and is used to see if the content has changed since the last request. - -### 1.1 Test Your Knowledge - -As part of the worksheets you will be given some exercises to carry out to make sure you fully understand the content covered. - -1. Go to the [University website](http://www.coventry.ac.uk) and use the Chrome Developer Tools to examine the request and response headers. - 1. Are there any headers that were missing from the example above? - 2. [Look up](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers) the meaning of all the headers. - -## 2 Using the POST Method - -Now we have a good understanding of the request-response process used by the HTTP protocol and have learned about the headers we will extend this by examining the use of the HTTP POST method. - -Before completing this section in the lab sheet you will need to install the `koa-static` package. - -1. Start by accessing the list of names on the `/names` url Make sure you have the Chrome Developer Tools open on the Network tab.: - 1. Notice the browser displays an error message. - 2. If you look at the HTTP Status Code you will see it is `404 Not Found` which makes sense as there are no names in the list (yet) -2. Now access the form page on the `/form.html` URL. By default browsers use the GET method. -3. Input your name and use the `submit` button to add this data to the website. Examine the request and response headers: - 1. Notice that the Request Method has changed to `POST`. - 2. Notice that the Response Code is `201 Created` to indicate that your data has been uploaded and stored. - 3. There is a section called **Form Data** which is the request body and contains the data you submitted using the form. Use the _View Source_ link to display the raw data. This is how your data is sent to the server. -4. Use the back button to return to the form and use this to add the names of everyone else on your table. -5. Access the `/names` url which should now respond with the HTTP Status Code `200 OK` and display your names in an HTML table. - -## 3 Meta-Data - -The path in the Uniform Resource Locator (URL) represents a _resource_ on the server however sometimes you need to pass _metadata_ to tell the server what you want it to do with this resource. There are two ways to pass metadata in an HTTP request, query strings and request headers. They differ in that anything in the URL is part of a book mark whilst the request headers are not. You need to decide whether this is important before deciding which to use. - -### 3.1 Query Strings - -Query strings are additional pieces of information attached to the URL and because of this it will be included in the bookmark. They are added as property-value pairs. - -1. Still on the `/names` URL, add a `search` querystring, your URL will look like this: `/names?search=xxx` where the `xxx` represents the string fragment you are searching for. - 1. Try searching for a string fragment you know exists, what is the status code? - 2. Now search for a non-existent string fragment, what is the status code and why? -2. Add the page as a browser bookmark. -3. Retrieve the bookmark, notice that it includes the search query. - -### 3.2 Request Headers - -You have already seen the request headers that are sent automatically by the web browser however you can add your own to this. Let's start by replicating the search functionality by passing the search criteria as a request header. - -To complete this section of the lab you need to install the [Modify Headers](https://chrome.google.com/webstore/detail/modify-headers-for-google/innpjfdalfhpcoinfnehdnbkglpmogdi) plugin for Google Chrome. - -1. Remove the query parameter from the URL so that all the names are displayed. -2. Open the **Modify Headers** plugin and add a custom header called `search` and sets its value to something you want to search for (see screenshot below). -3. Close the Modify Headers window and refresh the browser window, you should see the search is applied. -4. Bookmark this page. -5. Retrieve the bookmark, notice that the search is ignored. - -![editing the request headers](exercises/.images/chrome_05.png) - -You can also modify the standard request headers. In this example we will change the `Accept` header which defines the prefered format of the response data. The data formats are defined as [MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) The default settings look something like: - -``` -text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 -``` - -This specified that the browser would prefer data in HTML/XML format (0.9 weighting) but will accept certain image formats and everything else. We will be changing this to request our data in specific formats. - -1. Still on the `/names` URL, modify the request headers by removing any search terms. -2. Add a custom `Accept` header which will modify the default and set its value to `text/html` (see the screenshot below). If you refresh the browser you will see that the data is still displayed in an HTML table (because this format has been provided by the server). -3. Now try the following MIME types: - 1. `application/json` - 2. `application/xml` - 3. `text/csv` -4. Notice how in each case, the server is sending the _same data_ but in a different format. -5. Finally lets try an unsupported MIME format, `text/plain`. - 1. Notice we get an error. - 2. We get an HTTP Status Code of `406 Not Acceptable`. - -![setting a custom Accept header](exercises/.images/chrome_06.png) diff --git a/07 Forms and Authentication.md b/02 Forms and Authentication.md similarity index 100% rename from 07 Forms and Authentication.md rename to 02 Forms and Authentication.md diff --git a/02 Learning HTML5.md b/02 Learning HTML5.md deleted file mode 100644 index d9f610c..0000000 --- a/02 Learning HTML5.md +++ /dev/null @@ -1,310 +0,0 @@ - -# Learning HTML5 - -The worksheet is based on the materials from the HTML lecture and you should refer to the [slide deck](https://drive.google.com/open?id=1-kA3w6-H7AkW5iWRG2D1O-soxAnHgnU0YgOH3eYfeAQ) to help your understanding. It will take approximately **15 hours** to work through all the exercises and you should ensure that you have completed them all before attempting subsequent worksheets. - -Before you start you need to download and new materials. To do this you will be carrying out three tasks: - -1. You need to use your **SSH Terminal** and navigate to the _root directory_ of your project (the one containing the `exercises/` directory). -2. There must be no changes in your working directories. These must be stashed using the `git stash` command. -3. You can then use the `git pull` command to pull any changes from the GitHub repository. -4. Finally you need to unstash the changes you made. - -The full list of commands is: - -```shell -$ git stash -$ git pull origin master -$ git stash pop -``` - -If the VI editor window pops open: - -1. press the Esc key. -2. type `:wq` and press the Enter key. - -In this worksheet you will be learning about the markup language HTML which is currently in version 5. The worksheet is split into five parts with the resources for each part in their own subdirectory. The `template.html` file contains a basic HTML5 template you will find useful when creating your own web pages. - -``` -└── 03_html -    ├── 01_syntax -    ├── 02_hypermedia -    ├── 02_lists -    ├── 03_hypermedia -    ├── 04_tables -    ├── 05_forms - ├── 06_semantic -    └── template.html -``` - -You should get into the habit of doing this each time you sit down to work on your lab exercises as you will then be working on the latest versions of the files (with fewer bugs). - -## 1 Syntax - -Lets take a look at some basic HTML syntax. Start by locating the `exercises/02_html/01_syntax/` directory. Navigate to this using the SSH Terminal, install the all the necessary `koa` packages and start the web server. If you navigate to the base route `/` you will see a screen full of text. - -![the unformatted text](exercises/.images/chrome_07.png) - -As you can see, all the newlines have been replaced by spaces. The default behaviour of the web browser is to replace all newlines with spaces and replace multiple spaces with a single one! - -Your job is to add html formatting to the text to make it readable. You should first of all add the basic HTML5 tags and then format the text using: - -- Heading tags (levels 1-3). -- Paragraph tags. -- Horizontal rules. -- All date ordinals should use superscript. - -As you work, save the html file and refresh the browser, you don't need to restart the `index.js` script. Use the [html validator](https://validator.w3.org/#validate_by_input) to check your work on a regular basis. - -## 2 Lists - -Now you have mastered the basics of html its time to move on to how it can be used to render lists of different types. Start by locating the files in the `exercises/02_html/02_lists/` directory. Now install the necessary packages, start the `koa` server and view the root URL `/`. This should display a simple page with the title **1980's Home Computers**. - -Now, add a list on your web page. Insert the following lines of code after the paragraph describing clever uses for home computers: - -```html -

Some reasons often mentioned were:

- - -``` - -View the list in the browser. - -The `ul` element describes an unordered list. It contains three list items (denoted by `li` elements). - -See what happens, when you change the list type to ordered list (`ol`). - -Next, try a definition list. Add the following piece of code at the very end of the document, right before the `` end tag: - -```html -

There are two types of memory:

- -
-
RAM
-
Random access memory. The memory usable by programs. The amount was - typically in the ballpark of 20 to 64 kilobytes. However, the Basic - interpreter by default consumed a part of this.
- -
ROM
-
Read-only memory. This was normally smaller in size than RAM and - roughly corresponded to the hardware implementation of the operating - system.
-
-``` - -The definitions list contains two elements for each item: a `dt` for the term and a `dd` for definition. - -### 2.1 Test Your Knowledge - -1. Find out about the applications of computers in the 1980s and add two more reasons for people to buy them. -2. Create an _ordered list_ that contains the uses of modern computers in order of importance. -3. Identify five components in a 1980s computer and create a definition list that defines each of these. - -## 3 Hypermedia - -Now you have mastered the basics of HTML markup we will look at one of the most important features, the ability to link resources together (known as **hypermedia**), this is one of the cornerstones of the World Wide Web (WWW). - -### 3.1 Routes - -Every resource on the WWW (such as html documents and images) has a unique URL and so when we design our website we need to define these. In a website built using _NodeJS_ and _Koa_ these are known as **routes**. Start by locating the `exercises/02_html/03_hypermedia/` directory. Start the web server and open the `index.js` file. - -1. Some resources need to be directly accessible in the web browser (they are accessed either directly or loaded by the html web page). These need to have their own directly accessible URL. - 1. One directory needs to be specified as being publicly available. In this example we have created a directory called `public/` - 2. Koa needs to make this directory public. This is achieved on line by importing a static module and using this to specify the public directory. - 3. assuming the server is running you can directly view the image using the URL `http://xxx:8080/paradox.jpeg`, remembering to substitute your server's URL. -2. Some resources are _virtual_ and are generated by a script running on the server before being sent back to the browser client. - 1. There are some simple examples in `index.js`. Both the `/` and `/paradoxes` routes trigger scripts that take the contents of html files and send this back to the browser. - 2. When you access the `/date` route it displays today's date. Look at the script that does this (you don't need to understand the code details). - -#### 3.1.1 Test Your Knowledge - -1. There is a file called `coventry_cathedral.jpg` in the `public/` directory. Display this in the browser. -2. Create a route called `/cathedral` which should return the contents of the `cathedral.html` file located in the `html/` directory. -3. Create a route called `/time` that displays the current time in hours and minutes. There is detailed documentation on the [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) function on the Mozilla website. - -### 3.2 Hyperlinks - -Now you understand the concept of URLs representing resources and how this relates to _routes_, it is time to start linking resources together. With the server running access the `/commodore` URL which should display a web page describing the **Commodore 64 home computer** - -Add a link to the appropriate Wikipedia article to this web page, in a suitable location directly inside the `body` element: - -```html -

Read the Wikipedia article for Retrocomputing.

-``` - -To test the functionality in your browser you will need to make sure the server is running and navigate to the correct URL. - -A link, defined by the `a` element contains the URL of the linked web page as its `href` attribute. The link above contains an absolute path to a document on the external server. The absolute path begins will full protocol identifier and domain name. - -Unlike block elements (such as `h1` or `p`), links are inline elements: they always need a block element as a container and they are considered as a running part of the content of the parent block element. - -A relative link is intended for links within the same domain. The parsing of the file path starts from the default directory, which is the directory where the containing HTML document is located. For instance: - -- `"document.html"` points to a document of that name in the default directory. -- `"info/document.html"` points to a document in `info` subdirectory of the default directory. -- `"../document.html"` points to a document in the parent directory of the default directory. (Note that, for security reasons, web servers prohibit the traversal of server's directory structure outside the dedicated document root folder.) - -Add a link or two to suitable places in **computers80.html**. - -### Test your understanding - -1. Create a relative link between the list item on the home page and the page on the Commodore 64. -2. Add a link at the bottom of the Commodore 64 page called **Back** which returns the user to the home page. -3. Create a file called **spectrum.html** in the `html/` directory with the content shown below correctly marked up as HTML 5. -4. Create a new `/spectrum` route in the `index.js`. -5. Add new link to the list on the home page to send the user to this new page. -6. Make sure there is a link on the Spectrum page to return the user to the home page! -7. Validate your newly-created web page and correct any potential errors. - -``` -Sinclair ZX Spectrum - - History - - The ZX Spectrum is an 8-bit personal home computer released in the United Kingdom in 1982 by Sinclair Research. - - - Current status - - There's still a wide community of Specrum enthusiasts. There are numerous emulators, such as Fuse (link to http://fuse-emulator.sourceforge.net) and Speccy (link to https://fms.komkon.org/Speccy/). - - Gaming device - - Best games - - The ZX Spectrum was famous for its games. Some of the best include - - Jet Set Willy - - contained 60 levels - - The Hobbit - - A text adventure game with some simple graphics - - Back to Main page (link) -``` - -### 3.3 Images - -In HTML5, images are put inside a `figure` element. The `figure` element normally contains one image, possibly with a caption, but technically it can serve as a container for multiple images. because the images are loaded by the HTML web page (and not directly by the web server) they need to be in a publicly accessible directory. On our web server this has been defined as the `public/` directory. You should create subdirectories within this to organise your files. - -Locate the `03_hypermedia/public/` directory and create a new folder inside this called `images/`. Find an image of a 1980s computer and drag it into this new directory. You can use the image below if you wish. - -![computer](exercises/.images/02_computer.png) - -Now, Add the following lines of code in an appropriate place, directly inside the `body` element, substituting the name of the image you uploaded: - -```html -
- A computer with a monitor -
Photo: Piotr Siedlecki, public domain via http://www.publicdomainpictures.net.
-
-``` - -Notice that the path to the image `images/computer.png` does not include the `public/` directory. - -There are a couple of notable things about the `img` element: - -1. It is a void element. A void element doesn't have any content, and can be closed immediately, like this ``. For convenience, it can also be closed like this ``. The extra `/` character, in the end, is not essential. However, `` must **NOT** be closed like this ``, which is a syntax error. - -> There are other void elements besides `img`. One of the most widely used is `hr` for creating a horizontal rule and written as `
`. Void elements are not to be confused with self-closing tags. For void elements it's **illegal** to write `` or `
`, but for self-closing tags such as `
  • ` or `` you can safely ignore closing tags `
    • ` or ``. -> Click [here](https://www.w3.org/TR/html-markup/syntax.html) for a comprehensive list of void elements, [here](http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5) and [here](http://stackoverflow.com/questions/5641997/is-it-necessary-to-write-head-body-and-html-tags) for discussions on StackOverFlow. [To close or not to close tags](http://blog.teamtreehouse.com/to-close-or-not-to-close-tags-in-html5), that is the question. - -2. For an image to be displayed, it requires additional information in the form of attribute/value pairs. The attribute/value pairs above, are given within the start tag in the form of `attribute="value"`. Multiple definitions are separated by space. Two of attribute/value pairs are mandatory for images: - -| Attribute | Purpose | -|-----------|---------------------------------------------------------------------------------------------------------------------------------------------| -| src | For locating the image file. The file path is normally given as relative path, starting from the directory where the HTML file is located. | -| alt | For displaying an alternative text if the image cannot be displayed, or if the user prefers using a screen reader for accessibility purposes. | - -#### 3.3.1 Test Your Understanding - -1. Find photographs of the following computers and upload to the `images/` directory you created: - 1. Sinclair ZX Spectrum - 2. Commodore 64 - 3. BBC Model B -2. Make sure you add a `
    ` element that describes the image and where you found it. -3. Make all the images 320px wide without stretching them. You will need to use another attribute, use the [documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) to work out how. - -### 3.4 Media - -Now we will learn how to embed audio in a website. There are a number of resources located in the `public/` directory that we will add to our `index.html` page. - -1. You can use the new html `