Description
Assignment 5 introduced web development using Node.js. This assignment will build upon what
you have developed with assignment 5. The objective of this assignment is to develop a basic
website using Express. Express is an application framework that simplifies the development of
node.js server-side applications, and it is the most widely used Node.js application framework for
doing so. Typical features of Express are:
● routing: a simple way to map URLs and http verbs to code paths on the Node.js server
● easy methods for parsing http requests and building http responses:
The following are some of the resources you should use to familiarize yourself with Express:
● Essential
🌕Installing Express
🌕Hello world example of Express
🌕Basic routing in Express
🌕Serving static files in Express
● Additional References
🌕Express website
🌕FAQ
🌕Routing in Express
🌕API Reference
This assignment will also introduce you to SQL and the MySQL database (so upon successful
completion, you will have developed a FULL-STACK application).
The following are resources you should review to get familiar with SQL, MYSQL, and
MYSQL/Node.js
➢ https://www.w3schools.com/sql/
➢ https://www.w3schools.com/sql/sql_ref_mysql.asp
➢ https://www.w3schools.com/nodejs/nodejs_mysql.asp
2
Preparation and Provided Files
I. The first step will be to get Node.js and MySQL running on CSE lab machines. This can be
accomplished as follows:
1. Log into a CSE lab machine remotely (by SSH, VOLE, or in person).
2. Most of the CSE lab machines run version 12.20.0 (or similar version) of Node.js.
3. Type the following command to check the availability and the version of Node.js on the
machine:
node -v
And this will display the current installed version.
4. To use the MYSQL database, you will need a database user id and password. Your MYSQL
database user id (alphanumeric) and password (numeric) can be found on the class Canvas
site in your Grades menu. Check the column named: DATABASE INFORMATION. You
will find your alphanumeric user id (alpha-numeric name) and numeric password in the
comments section.
5. At the terminal, type the following command to login to MySQL and check whether it’s
active
mysql -uyour_database_user -hcse-mysql-classes-01.cse.umn.edu -P3306 -p your_database_user
NOTE: There is a space between the lowercase –p, and your_database_user id, and your
database user id is used in 2 places
Replace your_database_user with the database id provided to you before hitting enter.
your_database_user can be accessed on canvas “Database Information”.
When prompted for a password, enter the NUMERIC password provided to you.
6. After successful login, you should see the prompt:
mysql>
II. The second step is to create a Node.js (Express) project for this assignment. This can be
accomplished as follows:
1. Open the terminal on a CSE lab machine (in person, via Vole, or SSH)
2. Create a directory named by typing the following command:
mkdir yourx500id_hw06
3. Go inside the directory by typing the command: cd yourx500id_hw06
3
4. Having a file named package.json in Node.js project makes it easy to manage module
dependencies and makes the build process easier. To create package.json file, type the
following command: npm init
5. The npm init command will prompt you to enter the information. Use the guidelines on the
next page to enter the information (The things that you need to enter are in bold font. Some
fields can be left blank.):
name: (yourx500id_hw06) yourx500id_hw06
version: (1.0.0)
description: Assignment 6
entry point: (index.js) (You will create an index.js file
for your use)
test command:
git repository:
keywords:
author: yourx500id
license: (ISC)
6. After filling in the above information, you will be prompted to answer the question: “Is
this ok? (yes)”. Type yes and hit enter.
7. The listing of all the available files in the directory (obtained by typing ls –al
followed by the key) should display the following entry:
-rw------- 1 yourid CSEL-student 209 Apr 6 17:33 package.json
8. Install Express by typing the following command:
npm install --save express
9. Install mysql for javascript by typing the following command:
npm install --save mysql
10. You can use any npm module that you deem fit for this assignment. The npm modules that
will be useful for this assignment and should be installed are:
● pug(npm install --save pug)
● body-parser (npm install --save body-parser)
● express-session (npm install --save express-session )
● bcrypt (npm install –-save bcrypt)
11. You are free to decide your own project structure for this assignment.
4
III. Database setup:
1. The following files have been provided to you for this assignment:
● create_accounts_table.js
● insert_into_accounts_table.js
● create_events_table.js
2. Download the files listed above and move them to yourx500id_hw06 directory.
3. Edit each of the files and insert your database id and numeric password, which you can
find on Canvas in your grades in the comments portion of column named: DATABASE
Information
Set the permissions on the files and directories to rwxr-xr-x (i.e., chmod 755
filename)
Note, for steps 4,5, and 6 below you may have to put each of
the files in a separate directory and do an npm init, and
npm install --save mysql before running node.js
4. At the terminal, type the following command to create the MySQL table: tbl_accounts
node create_accounts_table.js
This table will be used to store your encrypted login credentials.
5. At the terminal, type the following command to insert values for acc_name, acc_login,
acc_password into tbl_accounts table:
node insert_into_accounts_table.js
You will use the values you choose (we have provided default values) for acc_login and
acc_password to login to the website. Keep the values in a safe place and do not share them
with anyone.
6. At the terminal, type the following command to create the MySQL table: tbl_events
node create_events_table.js
This table will be used to store the details of the events.
7. Add the provided index.js file or create your own index.js file. If using the provided
index.js you can start the server by running: node index.js
Then enter: http://localhost:9007/ in your browser's URL bar, and you should be able
to see the welcome page. If your index.js file is using a different port make sure to change
9007 to whichever port you have selected.
You are now ready to start designing and implementing the website functionality for the
assignment!!!!
5
3 Functionality
Your website will have 4 pages:
● A Welcome Page (provided)
● A Login page.
● A Schedule Page (You should be able to use (and update) your webpage from
Homework 5)
● An Add Event page (You should be able to use (and update) your webpage from
Homework 5).
All html pages will need to follow the Pug template either by being converted using a converter
or written that way.
A logout button is required to end the current session once a user has logged in and should be
present and functional on:
● The Schedule page
● The Add Event page
NOTE: For this assignment, you will need to develop the entire website including frontend
(HTML pages, CSS, JavaScript) and backend (Express server) + MySQL database.
The pages below specify the functionality we have provided, and the functionality you must develop.
6
Welcome Page
● The Welcome page is already provided to you and is displayed when the default route
“/” is called. (for example, by typing http://localhost:portnumber into your browser’s
address bar)
● When you click on the Navigate to website button, the /login route in your
Node.js/Express server (found in the file: index.js we have provided) will be called.
You need to develop all the remaining functionality.
7
Login page
● The Login page should be named login.html.
● If the page is accessed by a user that has already logged in, the user should be routed to
the “Schedule” page.
● The Login page should have a form with two fields: “User”, and “Password”
● Both of these fields are mandatory (required).
● When the submit button is clicked, an Fetch request carrying the value entered for “User”
and “Password” should be sent to the server for user credentials validation before
allowing further access to the website.
● The server will validate the values obtained from the form against the acc_login, and
acc_password fields stored in tbl_accounts. The Server should compare the bcrypt
password-hash of the password string it obtains from the form with the one stored in the
database table tbl_accounts.
Note: your implementation must use the bcrypt node module.
● Upon successful validation, server should
🌕Create a user session (Note: this requires an express-session module).
🌕Send a response back to the client indicating successful validation.
● If the validation fails, server should:
🌕Send a response back to the client indicating validation failure. Then your
webpage needs to display an error information.
● If a successful response is received from the server, the user should be routed to the
“Schedule” page, otherwise an appropriate error message should be displayed to the user
(Check screenshots towards the end of this assignment)
8
Schedule Page
This page should be very similar to the one developed in homework assignment 5. The
screenshot displayed above shows the schedule after clicking “Monday”. It should be named
schedule.html.
If this page is accessed without a valid login, the user should be routed to the “Login” page.
For this assignment, you will have to change the server functionality to retrieve the schedule
information from the MySQL database (tbl_events) with a Fetch request and return it in a JSON
object, instead of reading the schedule information from a local JSON file and returning it as was
done in HW 5.
Note: you need to make sure the events in the Schedule Page are sorted in ascending order (by
their start time, as shown on the screenshots).
9
Add Event page
● You can start from the form provided in Homework 5 for the ‘Add Event’
page(addEvent.html).
● If this page is accessed without a valid login, the user should be routed to the “Login”
page.
● The page should have a navigation bar with a logout button.
● Upon clicking submit, the form data should be posted to the server with a Fetch request.
● The server should insert the data received from the client into the following table:
tbl_events instead of the file schedule.json used in HW 5 (Hint: you will need use
functionality provided by the mysql module)
● The mapping between form fields and table columns could be (NOTE: you are free to
modify this mapping as you deem necessary to comply with the functional requirements
of this assignment):
🌕day: day
🌕event: event
🌕start: start
🌕end: end
🌕location: location
🌕phone: phone
🌕info: info
🌕url: URL
● Upon successful insertion, the server should return a redirect response to the browser to
display the “Schedule” page.
10
Logout button
Upon clicking the logout button on the menu bar (pictured below), the session should be
destroyed and the server should send a redirect message to the browser to display the Login
page. The button does not need to look the same as pictured below ( for example, you can create
and use a button with the word Logout displayed on it) but should be evident it is a logout button.
Pug
All of your html code should be submitted as pug instead for this assignment. The use of a
converter is permitted and encouraged for html already written. HTML to PUG Converter Online
tool is an option to use but any site that converts it correctly is allowed.
To take full advantage of Pug it is advised to write it by hand without the converter, such as for
the “Login” page.
11
Bonus: Quick Setup
Go back to your HW5, go to the schedule page, and click on one of the days with
events on the schedule:
Right-click on the page, and select “Save as” (Chrome) or “Save page as”
(Firefox). If you are using Chrome, specify the page as “Webpage, Complete”.
You will get a html page like this:
12
On your HW6, schedule page add buttons similar to the buttons shown in the picture below
(Browse, Submit Query)
First, click on one of the days (for example, Wednesday), then, click on Browse and select the
html you got from HW5 (on Wednesday):
13
After the file is selected (MySchedule.html in this example) click submit the query and the html
file you selected should be submitted to the server, and your server should add these events to the
selected day (Wednesday in this example).
Hints:
1. The node.js module formidable can be a helpful tool when uploading files.
2. You do not need to use Fetch for this bonus.
Submission Instructions
PLEASE ENSURE TO TEST YOUR CODE ON CSE LAB MACHINES.
You will need to submit all the files used to develop the website. This includes all the HTML,
CSS, JavaScript, package.json, index.js, and any other files.
Towards this end, make a copy of your working directory: yourx500id_hw06. Rename the
copied folder as yourx500id_express.
Create a README file inside yourx500id_express directory. This README file should include
Your x500id, acc_login, and acc_password values from the insert_into_accounts_table.js file.
Finally, compress (e.g., tar or zip) the yourx500id_express directory and submit it via Canvas.
We will use the acc_login and acc_password values to log in to your website. Ensure that these
values are correct and can be used to access your website.
Please remove the node_modules folder from your submission! Do not leave it in your
submission! Also, make sure that naming conventions are followed as outlined in previous
sections!
14
AND, submit something no later than the late submission deadline to ensure you get credit
for any functionality you have working. Submissions after the late submission deadline will
not be accepted and will be assigned a grade of ZERO.
Evaluation
Your submission will be graded FUNCTIONALLY out of 100 points on the items listed below.
Functional grading means that to receive credit, the functionality has to work correctly.
1. Submission instructions are met. SPECIFICALLY - remember to remove the
node_modules folder (5 points, really 5 points!)
2. The “Schedule” and "Add Event” pages of your website redirect the user to the "Login"
page automatically before authentication. (10 points)
3. The "Login" page shows the form elements and the submit button. (5 points)
4. Use Fetch login to send user credentials to the server, and redirect the user to the
“Schedule” page after successful login validation by the server. (10 points)
5. If server login validation fails, an error message is displayed on the "Login" page and the
browser displays the login page and error message. (check the additional screenshots)(5
points)
6. After successful login, the "Schedule" page displays correctly. (5 points)
7. The "Schedule" page gets the list of events from the server with Fetch (which the server
gets from the database). These events are dynamically added to the table displayed in the
user’s browser. (10 points)
8. The events shown on the “Schedule” page are correctly sorted. (5 points)
9. The user can add a new event to the database using the form present in the "Add Event"
page. (10 points) – changed: you can use fetch or a post request to an endpoint!!!
10. The “Schedule” and “Add Event” pages display and have an operational navigation bar.
(5 points)
11. When a new event is added through the “Add Event” page, the event data is stored in the
MySQL database. Then the user is redirected to the "Schedule" page. (5 points)
12. All html is code is written in a pug template and not native html (10 points)
13. The logout functionality works correctly. (5 points)
14. Use express to handle all http requests (10 points)
15. The BONUS Quick Setup functionality works correctly. (15 point BONUS)
Additional Screenshots (See the following pages for examples)
15
Login Page
Invalid Login
