forked from 340CT-1819SEPJAN/TEACHING-MATERIALS
Permalink
Show file tree
Hide file tree
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
37 changed files
with
359 additions
and
390 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
|
||
# 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. | ||
|
||
![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) | ||
|
||
## Cloning the Lab Content | ||
|
||
The next step is to clone the repository containing the lab materials into the IDE. Start by opening the [GitHub page](https://github.coventry.ac.uk/340CT-1819SEPJAN/TEACHING-MATERIALS). Locate the **Clone or download** button, clicking this pops open a small window as shown. Copy the URL in this window to your clipboard. | ||
|
||
![Create a New Container](exercises/.images/github01.png) | ||
|
||
Returning to the IDE, run the following command in the terminal: | ||
|
||
```shell | ||
git clone https://github.coventry.ac.uk/340CT-1819SEPJAN/TEACHING-MATERIALS.git labs | ||
``` | ||
|
||
This creates a `labs/` directory containing all the files from the repository. | ||
|
||
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. | ||
|
||
## 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. | ||
|
||
## Running an Express Server | ||
|
||
Use the terminal to navigate to the `simple_templating` directory and try running the `index.js` script: | ||
|
||
```shell | ||
$ cd labs/exercises/01_nodejs/01_templates_forms/simple_templating | ||
$ node index.js | ||
Error: Cannot find module 'express' | ||
``` | ||
|
||
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 express | ||
$ node index.js | ||
Error: Cannot find module 'express-handlebars' | ||
``` | ||
|
||
We get a different error explaining that there is another missing module: | ||
|
||
```shell | ||
$ npm install express-handlebars | ||
$ 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: | ||
|
||
![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. |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
BIN
+46.6 KB
exercises/.images/codeanywhere_01.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+35.7 KB
exercises/.images/codeanywhere_02.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+217 KB
exercises/.images/codeanywhere_03.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+77 KB
exercises/.images/codeanywhere_04.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+76.5 KB
exercises/.images/codeanywhere_05.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+42 KB
exercises/.images/codeanywhere_06.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+231 KB
exercises/.images/codeanywhere_07.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+45.8 KB
exercises/.images/codeanywhere_08.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+32.5 KB
exercises/.images/codeanywhere_09.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+59.1 KB
exercises/.images/github01.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+248 KB
exercises/.images/github_01.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+16.9 KB
exercises/.images/goorm01.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+73.6 KB
exercises/.images/goorm02.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+56.6 KB
exercises/.images/goorm03.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+29.8 KB
exercises/.images/goorm04.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+7.66 KB
exercises/.images/goorm05.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+13.1 KB
exercises/.images/goorm06.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN
+57.8 KB
exercises/.images/simple_template.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
|
||
{ | ||
"courses": [ | ||
{ | ||
"code": "cs", | ||
"title": "Computer Science MSci/BSc (Hons)" | ||
}, | ||
{ | ||
"code": "com", | ||
"title": "Computing BSc (Hons)" | ||
}, | ||
{ | ||
"code": "ehns", | ||
"title": "Ethical Hacking and Cybersecurity MSci/BSc (Hons)" | ||
}, | ||
{ | ||
"code": "gt", | ||
"title": "Games Technology BSc (Hons)" | ||
}, | ||
{ | ||
"code": "itb", | ||
"title": "Information Technology for Business BSc (Hons)" | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
#!/usr/bin/env node | ||
|
||
'use strict' | ||
|
||
const express = require('express') | ||
|
||
const handlebars = require('express-handlebars').create({defaultLayout: 'main'}) | ||
const bodyParser = require('body-parser') | ||
const app = express() | ||
app.use(express.static('public')) | ||
app.use(bodyParser.urlencoded({ extended: true })) | ||
|
||
app.engine('handlebars', handlebars.engine) | ||
app.set('view engine', 'handlebars') | ||
|
||
const port = 8080 | ||
|
||
app.get('/register', (req, res) => { | ||
res.render('register') | ||
}) | ||
|
||
app.post('/register', (req, res) => { | ||
const formData = JSON.stringify(req.body, null, 2) | ||
console.log(formData) | ||
const data = { body: formData } | ||
res.render('datapage', data) | ||
}) | ||
|
||
app.listen(port, () => console.log(`app listening on port ${port}`)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
|
||
body { | ||
font-family: Verdana, Geneva, Tahoma, sans-serif; | ||
} | ||
|
||
h2 { | ||
color: #666 | ||
} | ||
|
||
label { | ||
display: inline-block; | ||
width: 200px; | ||
text-align: right; | ||
margin-right: 10px; | ||
} | ||
|
||
input[type="submit"] { | ||
margin-top: 10px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
<h2>You Submitted...</h2> | ||
<pre>{{body}}</pre> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
|
||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>Forms R Us</title> | ||
<link href="css/style.css" type="text/css" rel="stylesheet" /> | ||
</head> | ||
<body> | ||
{{{body}}} | ||
<p>This information appears on every page.</p> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
|
||
<h2>Course Registration</h2> | ||
<form method="post" action="/register"> | ||
<fieldset> | ||
<legend>Personal Details</legend> | ||
<p><label for="name">Name:</label><input type="text" name="name" /></p> | ||
<p> | ||
<label for="male">Male:</label><input type="radio" name="gender" value="male" /><br /> | ||
<label for="female">Female:</label><input type="radio" name="gender" value="female" /><br /> | ||
<label for="other">Other:</label><input type="radio" name="gender" value="other" /> | ||
</p> | ||
<p> | ||
<label for="dob">Date of Birth:</label> | ||
<input type="date" name="dob" min="1900-01-01" max="2000-07-01" /> | ||
</p> | ||
</fieldset> | ||
<fieldset> | ||
<legend>Course Details</legend> | ||
<p> | ||
<label for="course">Choose Course:</label> | ||
<select name="course"> | ||
<option value="">-- SELECT --</option> | ||
<option value="cs">Computer Science MSci/BSc (Hons)</option> | ||
<option value="com">Computing BSc (Hons)</option> | ||
<option value="ehns">Ethical Hacking and Cybersecurity MSci/BSc (Hons)</option> | ||
<option value="gt">Games Technology BSc (Hons)</option> | ||
</select> | ||
</p> | ||
<p> | ||
<label for="tandc">Terms and conditions</label> | ||
<input type="checkbox" name="tandc" /> | ||
</p> | ||
</fieldset> | ||
<fieldset> | ||
<legend>Account Details</legend> | ||
<p><label for="username">Preferred username:</label><input type="text" name="username" /></p> | ||
<p><label for="password">Password:</label><input type="password" name="password" /></p> | ||
<p><label for="confirm">Confirm password:</label><input type="password" name="confirm" /></p> | ||
</fieldset> | ||
<input type="hidden" name="formtype" value="registration" /> | ||
<input type="submit" value="submit form" /> | ||
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
|
||
p, h2 { | ||
font-family: verdana, sans-serif; | ||
} | ||
|
||
h2 { | ||
color: #666; | ||
} | ||
|
||
img { | ||
float: right; | ||
} |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
|
||
<h2>Handlebars</h2> | ||
<p><img src="images/clock_small.png" /></p> | ||
<p>This page has been generated by the <strong>Handlebars</strong> template engine.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.