T8: NodeJS CPSC 513 Dr. P. Federl University of Calgary Arshia - - PowerPoint PPT Presentation

T8: NodeJS

CPSC 513

• Dr. P. Federl

University of Calgary

Arshia Hosseini

T01/T02

What is NodeJS

2

• Open source JavaScript framework
• Event-driven
• Cross-platform
• Server-side

Installing and Running Node

3

• https://nodejs.org/en/download/
• From command line, run the following command:

node myFirst.js

• From the web browser access

http://localhost:8080

Hello World

4

• Simple server code

Node HTTP

5

• Fast
• But very Low level
• Need to handle response codes by hand
• Need to handle response types by hand
• Need to handle routes by hand
• Solution?
• Express

Express

6

• Minimalist web framework for Node.js
• Provides a robust set of features for web and mobile

applications.

• A thin layer of fundamental web application features,

without obscuring Node.js features and its performance

• Installation:
• npm install express --save

Hello world application

7

• Simple code

Basic Routing

8

• Routing refers to how an application’s endpoints

(URIs) respond to client requests.

• app.METHOD(PATH, Handler)
• Method can be any of the HTTP Methods
• get, post, put, delete, etc.

Route PATH is endpoint that will trigger this route.

• “/” means that the user has to access your.site/
• “/home” means that the user has to access your.site/home
• PATHs can be strings, patterns or regular expressions.
• Handler is the function that will be triggered when

the user reaches a certain PATH

• It takes two parameters
• req=request
• res=response

Application-level middleware

9

• Express is a routing and middleware web framework: An Express

application is essentially a series of middleware function calls.

• Middleware functions are functions that have access to the request
• bject (req), the response object (res), and the next middleware function in

the application’s request-response cycle (next).

• Middleware functions can perform the following tasks:
• Execute any code.
• Make changes to the request and the response objects.
• End the request-response cycle.
• Call the next middleware function in the stack.
• The function is executed every time the app receives a request.

var app = express() app.use(function (req, res, next) { console.log('Time:', Date.now()) next() })

Response Methods

10

• res parameter
• .send( content ) – sends an HTTP Response of various types
• Handles response types automatically
• You can set them by hand if you want, using .set(‘Content-type’,

‘value), before responding.

• .json( content ) – sends a JSON response
• .download( content ) – forces the user to download the

content

• .redirect ( target ) – sends a 302 redirect
• .render – Renders a view and sends the rendered HTML

string to the client.

Request method

11

• req parameter
• Properties
• .url
• .body
• .method
• .path
• Methods
• .get(field)
• Returns the specified HTTP request header field
• .param('name')
• Returns the value of param 'name' when present.

Embedded JavaScript templating (EJS)

12

• EJS is a simple templating language that lets you

generate HTML markup with plain JavaScript.

• <% 'Scriptlet' tag, for control-flow, no output
• <%= Outputs the value into the template (HTML escaped)
• <%# Comment tag, no execution, no output
• %> Plain ending tag

<% if (user) { %> <h2><%= user.name %></h2> <% } %>

13

• Example:

// server.js // index page app.get('/', function(req, res) { var drinks = [ { name: 'Bloody Mary', drunkness: 3 }, { name: 'Martini', drunkness: 5 }, { name: 'Scotch', drunkness: 10 } ]; res.render('pages/index', { drinks: drinks }); }); <!-- views/pages/index.ejs --> ... <h2>Loop</h2> <ul> <% drinks.forEach(function(drink) { %> <li><%= drink.name %> - <%= drink.drunkness %></li> <% }); %> </ul> ...

Exercise: Creating a ToDo list

14

• We are going to create a to do list.
• The visitor will simply be able to add and remove tasks.
• We can add elements to the to do list via the form.
• We can delete items by clicking on the crosses in the list.
• 1. Install NodeJS from the website
• 2. Download the files from my webpage (T8: Express):
• https://pages.cpsc.ucalgary.ca/~seyedarshia.hosseini/courses/seng513/
• 3. Use NPM to install the dependencies inside the directory
• npm install
• 4. EJS is used for templating
• Take a look at the todo.ejs file in views
• 5. Add the body of the app.METHODs

Defining the routes

15

• Ask the question of what your server should do?
• List the tasks.
• Add a task.
• Delete a task.
• We associate a route to each of these features:
• /todo: list of tasks.
• /todo/add: add a task.
• /todo/delete/:id: delete task n°id.