Week 6 Tutorial: Server-side Development

COMP5347: Web Application Development
Week 6 Tutorial: Server-side Development
Node.js Express.js Application
Learning Objectives
• Understand basic express application structure
• Get familiar with a few view template engines
• Practice simple express application to handle client input and to prepare views
Part 1: Install Express module
Create a workspace folder (let’s call it comp5347) to hold your Nodejs application on U
drive. Create another folder in it to hold your actual application (let’s call it nodejs-labs).
Download the “node_modules.zip” from COMP5347 Canvas’ site and extract the content
from it. Then, put the “node_modules” folder directly inside the nodejs-labs folder.This
prepared package contains modules (i.e., dependencies) that are required to work with
Express.js framework which is used in this lab session.
To install required Express.js modules on your own PC, you should run the following
commands (https://expressjs.com/en/starter/installing.html) from inside the project
directory (nodejs-labs):
npm init
npm install express --save
npm install body-parser --save
npm install path --save
npm install ejs --save
npm install pug --save
COMP5347 Tutorial
2 | P a g e
Part 2: Start Eclipse IDE
Download week6.zip from COMP5347 Canvas’ site and extract the content in a folder.
The zip file contains a JavaScript file survey.js, a CSS file, two EJS templates and one
PUG template.
Figure 1: Create a new JavaScript Project
Start Eclipse JEE Neon (the lab machine may have a few Eclipse versions installed, only
the latest version Neon has integrated Node support, make sure you use the correct one).
Point your workspace to the newly created directory U:\comp5347.
Click the File menu to create a new JavaScript Project. You need to specify a name
and indicating that you will create project from existing source, which is the
directory U:\comp5347\nodejs-labs you just created. Figure 1 and Figure 2 show the
steps. Youcanleavetherestwithdefault setting.
Figure 2: Specify project name and directory
Part 3: Create Application Structure
In your new project, create a few folders and sub folders as shown in Figure 3. Import
those extracted files to respective folders as shown in Figure 3. The files represent a
partially implemented survey application.
Part 4: Start Server
Right click survey.js on the Project Explorer panel and select from the drop down
COMP5347 Tutorial
3 | P a g e
menu to “Run As” “Node.js” application. You should see a console message saying
“survey app listening on port 3000”.
Figure 3: Folder and file structure
Start Chrome and point it to “localhost:3000”. You should get a screen similar to Figure
4. This is the start screen of the simple survey application. It contains a form with two
groups of radio buttons. It allows a user to specify gender and preference for next mobile
phone.
Make a selection and click the Submit Vote button. You will see a screen like Figure 5. It
shows a template of the survey result. No actual result is displayed because
• the result handling logic is missing from survey.js
• the associated view surveyResult.ejp does not have relevant elements to display
the results.
Part 5: Understand the code
The main application logic is implemented in survey.js. It initializes two global variables:
products and surveyResults. The products variable points to an array of strings
representing mobile phone models surveyed. The surveyResults variable points to an
object of two properties: fp and mp. Property fp stores the votes by female users for each
model as an array of 4 number. The array is initialized to 0. Property mp stores the votes
by male users for each model as another array. It is initialized to 0 as well.
survey.jsalsocontainstworoutemethods. Onemaps toHTTP GETtourl ‘/’,theother
maps to HTTP POST to url ‘/survey’. Each with a function implemented to respond
requestsendtothecorrespondingurl.
When we start the server and point Chrome browser to ‘localhost:3000’. This sends
a GET request to the application’s root: ‘/’. The route method simply renders a view
COMP5347 Tutorial
4 | P a g e
Figure 4: Survey form
Figure 5: Survey result template
template survey.ejs with the products data. This would display the original survey form.
The mobile phone model names are obtained from products array. A loop structure is
used in survey.ejs to display the model name and the associated radio button:
<% for (var i = 0; i<products.length;i++){%>
<input type="radio" name="vote" value= <%= i%> />
<%= products[i]%> <br />
<% } %>
After we click the Submit Vote button, a POST request is sent to URL ‘/survey’. This
is configured in the form element’s method and action attributes. The corresponding
route method again simply renders a view template surveyResult.ejs with products and
surveyresults data. This template is partially implemented.
COMP5347 Tutorial
5 | P a g e
Part 6: Switching View Templates
Stop the application by clicking the stop icon on the console window. Update the render
method for GET URL ‘/’ to :
res.render(‘survey.pug’,{products:products})
Start the server again by running survey.js as “Node.js application”. Reload the root
page ‘localhost:3000’ from Chrome, you should see the similar survey form.
The PUG template uses white space indent to represent nested HTML elements. It also
provides simple ways for loop structure. For instance, the follow code displays model
name using data from products variable:
each product,idx in products
input(type="radio" name="vote" value=idx)
label=product
br
It has the same effect as the for loop in the ejs template.
The new survey.js file has a mixture of PUG and EJS templates. Express is able to load
the correct template engine based on the file extension.
Part 7: Implement the vote taking logic
Now update the route method handling form submit to
• obtain user input gender and vote from the POST request.
• update variable surveyresults based on current user input.
The form data is parsed by middleware functions defined in body-parser module. The
data is populated in req.body. You can check the logged console message to see what
is contained in req.body.
You also need to update the view template to display the survey result. Figure 6 shows an
example survey result. You may choose to update the given template surveyresult.ejs
or write your own PUG template. If you write your own PUG template, make sure you
refer to it in application code when rendering the result.
COMP5347 Tutorial
6 | P a g e
Figure 6: Survey result