GET Method
– GET method attached the form data as query string to URL – General format of query string
– http://example.com/over/there?title=test&where=here
The University of Sydney
COMP5347 Web Application Development
Page 20

URL Encoding
The University of Sydney
COMP5347 Web Application Development
Page 21

Which Value to Send
The University of Sydney
COMP5347 Web Application Development
Page 22

Radio Buttons and Checkboxes
The University of Sydney
COMP5347 Web Application Development
Page 23

POST Method
– POST method sends the form data as part of request body
The University of Sydney
COMP5347 Web Application Development
Page 24

POST request body
The University of Sydney
COMP5347 Web Application Development
Page 25

GET vs POST Method
The University of Sydney
COMP5347 Web Application Development
Page 26

GET vs. POST
– GET
– Explicit in the address bar
– Browser’s history and cache
– Bookmarking
– Limit number of characters
• IE 2083 characters, Apache web server 4000 characters
– POST
– Contain binary data
– Hidden from user
– Not cached, bookmarked or in history
The University of Sydney
COMP5347 Web Application Development
Page 27

GET vs. POST
– Implication
– GET to query something (without changing any server data)
– POST for sending data and change something on the server
The University of Sydney
COMP5347 Web Application Development
Page 28

–
–
– –
Outline
How web server works – Forms
– HTTPGET.POST
Node.js Execution
Node.js Application Structure Express.js Basics
– Routing
– Middleware
– Template Engines
The University of Sydney
COMP5347 Web Application Development
Page 30

Node.js Motivation
– Nod.js design goal is performance (makes it popular)
– Node.js’ server architecture is different
– Any web server is expected to handle a large number of user requests concurrently
– In early days, each request is handled by a process
– Most modern servers handle request at thread level
• Each request is handled by a separate thread
• Server usually maintains a thread pool
– Thread is allocated fraction system resources
• Max. concurrent thread number
– Node.js server runs on a single thread
The University of Sydney
COMP5347 Web Application Development
Page 31

JavaScript
– JavaScript is synchronous, blocking and single-threaded language – One operation can be in progress at a time
– Expensivedatabasecall?
• Slow execution
– JavaScript code can be written to allow asynchronous behaviour – Asynchronouscallbackstoinvokacallbackfunction
• Send request, wait for response while the rest of the code continue running
• Results sent back for processing through event loop
– Event loop: a process that constantly checking if there’s anything
required to be called
The University of Sydney
COMP5347 Web Application Development
Page 32

Single Threaded Execution
– Node.js server handles all requests in a single thread
– JavaScript is designed to run in a single thread, both in browser and on
server side
– Eventloopandcallbackfornon-blocking,asynchronousexecution
• Longer running processes: at least an event signaling the end of the that process
– Implement a callback function for that “end” event • E.g.
– Disk IO done by OS’s file management component
– Database call is executed mainly on database server
– Downloading post request data (uses network resources)
The University of Sydney
COMP5347 Web Application Development
Page 33

The IO Scaling Problem
Basarat Ali Syed: Beginning Node.js, page 23 The University of Sydney
COMP5347 Web Application Development
Page 34

Traditional Server using Processes
Basarat Ali Syed: Beginning Node.js, page 24 The University of Sydney
COMP5347 Web Application Development
Page 35

Servers with Multi-Threaded Execution
Basarat Ali Syed: Beginning Node.js, page 25 The University of Sydney
COMP5347 Web Application Development
Page 36

Asynchronous Request Handling
The University of Sydney
COMP5347 Web Application Development
Page 37
Basarat Ali Syed: Beginning Node.js, page 26

Single vs. Multi-threaded – Performance Comparison
Basarat Ali Syed: Beginning Node.js, page 26 The University of Sydney
COMP5347 Web Application Development
Page 38

Java Script – Popularity
http://githut.info/
The University of Sydney
COMP5347 Web Application Development
Page 39

Outline
– How web server works – Forms
– HTTP GET. POST
– Node.js Execution
– Node.js Application Structure
– Express.js basics
– Routing
– Middleware
– Template Engines
The University of Sydney
COMP5347 Web Application Development
Page 40

JavaScript – Global ‘things’
– Many APIs are globally defined
– Unlike (OO language), JS code has many variables and functions that do
not belong to a class /object
– These are ‘global’ variable or functions
– Belong to a global object
– Browser’s global object window
– variables, functions not belonging to some object/class belong to the window
object and has global scope
– document object’s fully qualified name is window.document
– In large application, with third party code or framework, there might be conflict in global namespaces
The University of Sydney
COMP5347 Web Application Development
Page 41

Module System
– Module system is a way to organize namespaces defined in various script code in large JavaScript applications
– Node.js uses file-based module system (CommonJS)
– Each file is its own module
– Each file has access to the current module definition using the module variable
– The export of the current module is determined by the module.exports variable
– To import a module, use the globally available require function
The University of Sydney
COMP5347 Web Application Development
Page 42

Node.js Basic Components
– Node.js has a few important globals – console
– process
– require
– __filenameand_dirname
– Node.js is shipped with a few core modules
– cli,fs,http
– List of modules in Node.js (https://nodejs.org/api/modules.html)
– Many other useful modules to be downloaded separately – Using NPM (Node Package Manager) – https://www.npmjs.com/
The University of Sydney
COMP5347 Web Application Development
Page 43

Simple Node.js Application
var http = require(‘http’)
var server = http.createServer(function(request, response) {
response.writeHead(200, {“Content-Type”: “text/plain”});
response.write(“Hello World”);
response.end();
});
server.listen(8888);
console.log(“Web Server Running at http://localhost:8888 … “);
The University of Sydney
COMP5347 Web Application Development
Page 44

Simple Node.js Application
var http = require(‘http’)
var server = http.createServer(function(request, response) {
response.writeHead(200, {“Content-Type”: “text/plain”});
response.write(“Hello World”);
response.end();
});
server.listen(8888);
console.log(“Web Server Running at http://localhost:8888 … “);
require is a global function to import module .
createServer is a higher order function taking another function as parameter. It returns a
server object.
The anonymous function with parameter request and response describe the application logic of the webserver.
console is a global object
The University of Sydney
COMP5347 Web Application Development
Page 45

Handling Multiple Requests
var http = require(‘http’)
var server = http.createServer(function(req, resp) {
if (req.url == ){
//write response
}else if (req.url == ){
//write response
}else if (req.url == <...>){
//write response
}else{ // a not recognizable url
// send back an error status code and // error message
} });
server. listen(8888);
console.log(“Web Server Running at http://localhost:8888 … “);
The University of Sydney
COMP5347 Web Application Development
Page 46
All requests are handled by a single thread

Handling Query String
Import another module with url parsing utilities
var http = require(‘http’),
url = require(‘url’);
var server = http.createServer(function(req, res) {
//targeting url like /sayHello?name=xxx
if (req.url.indexOf(‘/sayHello’) > -1){
var query = url.parse(req.url,true).query;
res.end(‘

Hello ‘ + query.name +
‘

‘);
}else{ // a not recognizable url. Send back an error status
// code and error message
}});
server. listen(8888);
console.log(“Web Server Running at http://localhost:8888 … “);
The University of Sydney
COMP5347 Web Application Development
Page 47

Handling POST Request Data
var http = require(‘http’),
qs= require(‘querystring’);
var server = http.createServer(function(req, res) {
//targeting request like POST /sayHello with a body
//name:xxx
if (req.url.indexOf(‘/sayHello’) > -1){
var body = ”;
req.on(‘data’, function(chunk){ body += chunk;
});
req.on(‘end’,function(){
res.write(‘

Hello ‘+
qs.parse(body).name +
‘

‘)
});
}else{ // a not recognizable url. Send back an error
// status code and error message
}});
server.listen(8888);
console.log(“Web Server Running at
http://localhost:8888 … “);
The University of Sydney
COMP5347 Web Application Development
Page 48

Handling POST Request Data
Post request contains a body part. The body may contain simple form data or large file in a uploading request
The request body is accessed through data event, so we listen to it, and save the received data in a variable.
When there is no more data, an end event fires. We listen to it to and call a function to generate the response.
Both handlers, defined as anonymous functions are able to access the local variable body of the outer function. This is called closure.
var http = require(‘http’),
qs= require(‘querystring’);
var server = http.createServer(function(req, res) {
//targeting request like POST /sayHello with a body
//name:xxx
if (req.url.indexOf(‘/sayHello’) > -1){
var body = ”;
req.on(‘data’, function(chunk){ body += chunk;
});
req.on(‘end’,function(){
res.write(‘

Hello ‘+
qs.parse(body).name +
‘

‘)
});
}else{ // a not recognizable url. Send back an error
// status code and error message
}});
server.listen(8888);
console.log(“Web Server Running at
http://localhost:8888 … “);
The University of Sydney
COMP5347 Web Application Development
Page 49

Outline
– How web server works – Forms
– HTTP GET. POST
– Node.js execution
– Node.js application structure
– Express.js basics – Routing
– Middleware
– Template Engines
The University of Sydney
COMP5347 Web Application Development
Page 50

Web Application Structure
– The MVC pattern
– What is the view technology (similar to early server page technology
such as JSP)
• Template language and template engines
– A file that contains static and dynamic content
– Some framework to enable
– URL / controller mapping
– MVC wiring
– Sessionmanagement
– Security management –…
– Express is a popular framework for building MVC node.js application
The University of Sydney
COMP5347 Web Application Development
Page 51

Common MVC Architecture
Business or application logic implemented in a programming language
Usually a file with mixed static content (either in actual HTML or other mark down format) and processing logic and variables
Common processing such as network working, protocol handling usually provided by language framework, developers need to write code for customized processing
The University of Sydney
COMP5347 Web Application Development
Page 52
MEAN Web Development

Express Framework
– Express is the framework that implements lots of common tasks when writing web app
– Serversetup
• Manage the request response paradigm • Defines directory structure
– Routing URL to code
– Talk to template engine(s) to convert template files into proper response
HTML
– Rememberingvisitorsforsessionsupport
The University of Sydney
COMP5347 Web Application Development
Page 53

Express.js – Popularity
https://expressjs.com/en/resources/companies-using-express.html
The University of Sydney
COMP5347 Web Application Development
Page 54

– –
Express – Routing
Routing: the mapping between HTTP request (method, url) to the piece of code handling the request
Express routing take the following structure:
– app.METHOD(PATH,HANDLER)
• app is an instance of express
• METHOD is an HTTP request method, in lowercase.
• PATH is a path on the server.
• HANDLER is the function executed when the route is matched.
–
Example routing code
app.get(‘/’, function (req, res) { res.send(‘Hello World!’)
})
app.post(‘/’, function (req, res) { res.send(‘Got a POST request’)
})
The University of Sydney
COMP5347 Web Application Development
Page 55
https://expressjs.com/en/starter/basic-routing.html

Express – Question
var express = require(‘express’)
var app = express()
app.get(‘/’, function (req, res) {
res.send(‘Hello World!’)
app.listen(3000)
})
Q: What response the above application would return when the user types the following? http://localhost:3000/HelloWorld
The University of Sydney
COMP5347 Web Application Development
Page 56
The express() function is a top-level function exported by
the express module
The app object created by calling the express() and conventionally denotes the Express application

Express – Hello World Example
var express = require(‘express’)
var app = express()
app.get(‘/’, function (req, res) {
res.send(‘Hello World!’)
app.listen(3000)
})
Q: What response the above application would return when the user types the following? http://localhost:3000/HelloWorld
A: the express server will responds with a “404 Not Found” as the server script (above) only respond to the root URL (/) or route
https://expressjs.com/en/4x/api.html
The express() function is a top-level function exported by
the express module
The app object created by calling the express() and conventionally denotes the Express application
The University of Sydney
COMP5347 Web Application Development
Page 57

•
Express – app object
The app object has methods for:
• Routing HTTP requests; e.g., app.METHOD
• Configuring middleware; app.route
• Rendering HTML views; app.render
• Registering a template engine
The app object also has settings (properties) that affect how the application behaves
• app.mountpath property contains one or more path patterns on which a sub- app was mounted
•
https://expressjs.com/en/4x/api.html#app
The University of Sydney
COMP5347 Web Application Development
Page 58

Middleware
– Middleware is a software (function) sits between the application code and some low-level API
– It has access to the request and response object
– It is used to implement common tasks on the request or response objects
– In Java web dev. middleware is like filter where you can stack a lot of them before/after servlet
– The overall process would be
– Client sends request
– Request arrives at server
– Handled by middleware 1, passed to next function
– Handled by middleware 2, passed to next function
– route method, passed to next function
– Middleware 3, stop here
https://expressjs.com/en/guide/writing-middleware.html
The University of Sydney
COMP5347 Web Application Development
Page 59

Middleware stack
Route method is also a middleware, most of the time we call it route method or handler. It can use the next() function to pass the control to a middleware running after the response is sent out
The University of Sydney
COMP5347 Web Application Development
Page 60
HTTP method for which the middleware function applies
Path (route) for which the middleware function applies.
The middleware function.
Callback argument to the middleware function
HTTP response argument to the middleware function
HTTP request argument to the middleware function

Middleware
Middle functions can do the following:
• Execute any code
• Make changes to request or response object
• End the request-response cycle
• Call next in the stack, middleware or route method
var express = require(‘express’) var app = express()
var myLogger = function (req, res, next) { // A middleware function console.log(‘LOGGED’)
app.get(‘/’, function (req, res) { res.send(‘Hello World!’)
})
app.listen(3000)
next() }
// Call next() so the request-response cycle does not stop here app.use(myLogger) // It will be called before the route method
The University of Sydney
COMP5347 Web Application Development
Page 61

Middleware Control Flow
– app.use() mounts a middleware function(s) at the specified path (the default path is “/”)
– app.use([path,] callback [,callback…])
– In the previous example, we used app.use() to call the middleware MyLogger
before the route method/handler
– The order of middleware loading is important: middleware functions that are loaded first are also executed first
– Middleware functions are executed sequentially (in the order they are declared)
– A middleware function that does not invoke a next() function will end the request-response cycle
– If the current middleware function does not end the request-response cycle, it must call the next() function, otherwise the request will be left hanging
The University of Sydney
COMP5347 Web Application Development
Page 62

Middleware – Exercise
What would be the output of the following code when the following request is sent?
http://localhost:3000/
var express = require(‘express’) var app = express()
var myLogger = function (req, res, next) { console.log(‘LOGGED’)
next() }
app.get(‘/’, function (req, res) { res.send(‘Hello World!’)
})
app.use(myLogger)
app.listen(3000)
The University of Sydney
COMP5347 Web Application Development
Page 63

Middleware – Exercise
What would be the output of the following code when the following request is sent?
http://localhost:3000/
var express = require(‘express’) var app = express()
var myLogger = function (req, res, next) {
console.log(‘LOGGED’) next()
}
app.get(‘/’, function (req, res) {
res.send(‘Hello World!’)
This middleware function will not be called as it was loaded after the route method/handler. So, “LOGGED” will not be printed to the console
This route handler terminates the request- response cycle as it does not pass control to the next function
})
app.use(myLogger)
app.listen(3000)
The order of middleware loading is important
The University of Sydney
COMP5347 Web Application Development
Page 64

Useful Middlewares
– Middlewares are commonly used for tasks like – ParsingPOSTbody
– Parsingcookies – Many others
– Many third party middlewares for common processing
– E.g. body-parser module consists of a few middleware functions for
parsing form data
https://expressjs.com/en/guide/using-middleware.html
The University of Sydney
COMP5347 Web Application Development
Page 65

Template Engine
– Template engine represents the view technology
– Defines a template format to blend static content with processing logic
– Translate the template file into proper HTML file
• Running processing logic
• Replacing variable with values
– Many template engines that can work with Express
– EJS
– PUG (previously called JADE)
– Mustache
– As expected, the oldest/simplest template engine (EJS) support the format of embedding JavaScript code in HTML
The University of Sydney
COMP5347 Web Application Development
Page 66

EJS – Embedded JavaScript Template
– JavaScript code can be embedded nearly everywhere in an HTML file
– The convention is very similar to early JSP
– The control flow should be embedded with <% %>
– Escaped output (expression) should be embedded with <%= %>
– And others
– Example EJS
<% if (user) { %>

<%= user.name %>

<% } %>
The University of Sydney
COMP5347 Web Application Development
Page 67
https://www.npmjs.com/package/ejs

Simple Example – The Form
Greetingform.ejs





Joe