Assignment 7 User administration page

1 Description
In this assignment, you will continue to add more functionality to the website developed in the
last assignment. Your task is to upgrade the previous assignment to add a new user
administration page with user management features that enable you to add new users, deleting
users, or update information on existing users of your website. Adding this functionality will
require you to compose and submit delete and update SQL queries to the MySQL database from
your node.js/Express server with information gathered from the user via html pages that you will
create.
You will also work with XML (Extensible Markup Language) in this assignment. To enable
flexibility and increase security, the database configuration will be saved in an XML file. Your
server will read the configuration information from the XML file, and that information ( which is
the same information that you used in assignment 6) to connect to your MySQL database.
2 Preparation and Provided Files
1. The setup for Node.js and MySQL remains the same as the last assignment.
2. The code for this assignment should be placed in a directory named: yourx500id_hw07
3. The code from the last assignment can serve as a base for this assignment. Copy the code
from the last assignment and place it in yourx500id_hw07 directory.
4. You can use any npm module that require for this assignment. You should use the
modules you used in previous assignments, and you will need a module for parsing XML,
Thus, you might find the following npm module useful: xml2js
5. You should determine the project structure (where you will store the various html, css
and JavaScript files) for this assignment on your own.
Note: We have provided the following sample XML file which stores database configuration:
sample_dbconfig.xml
Replace the values in the user, password, and database tags with the user/database id and
numeric password that we gave you on the course Moodle page for HW assignment 6.
2
3 Functionality
Retain all the functionality from Assignment 6 and build on existing code. You can obtain our
implementation of HW 6 functionality that you were unable to complete by going to any office
hour and writing the implementation down on paper.
The navigation bar in Schedule page, Add Schedule Event page and Stock Page should provide
a link to the Admin page. Check the following screenshots:
Notice that the navigation bar in the pages listed above and shown below has a link to the
Admin page.
3
Admin page – you will create this page
● If a user tries to access this page without a valid login, the user should be routed to
“Login” page.
● The page should have a navigation bar with a logout button.
● The table in this page should be dynamically populated with the list of users along with
their corresponding Id, Name, and Login (illustrated in the following screen-shot).
● To achieve this, the server could provide a GET API which returns the list of users. The
mapping between the table headers and columns in tbl_accounts is as follows:
• Id: acc_id
• Name: acc_name
• Login: acc_login
• New Password: acc_password
● The client (the page you will construct) could call the API (using AJAX) and populate
the table using the data received from the server.
4
Admin page - Add User functionality
● As displayed in the picture on the previous page (and below), your Admin page should
have a button to add a new user.
● Upon pressing the Add User button, a new row with blank fields (should be added to the
table).
● Name, Login, and New Password columns of this new row should be editable.
● A user has the option to enter the details of the new user and then click either Save or
Cancel button.
● If the user clicks Save, the data entered by the user should be posted to the server.
• The server should validate that no other user in the database has the same login.
• In case the validation passes, the information about the new user should be
inserted in the following table: tbl_accounts.
• The new user should also be added to the HTML table.
• In case the validation fails, the following error message should be displayed: This
login is used by another user
● If user clicks Cancel, the new row should be removed and display should be reverted to
the state before Add User button was pressed (as shown in the picture at the bottom of
the previous page (Page 3).
Note: Review screenshots I. and II below for an indication of how the Add User functionality
should operate.
I. Admin enters the details of a new user named “alpha” and clicks Save
5
II. The new user is successfully added.
Admin page - Delete User functionality
● Each row in the table should have Delete button (icon) associated with it (see the garbage
can in the rightmost column).
● The Delete button should delete the user from the database and from the HTML table
only if the user being deleted is not the one currently logged in. To achieve this, server
should provide a delete API which can be used by the client.
● The server should not allow the user to delete the currently logged user. The following
error message should be displayed on the Admin page in the event that a user attempts to
do this: Cannot delete a user that is logged in!
Note: Review screenshots A, B, and C below depicting the Delete User functionality.
A. Admin clicks on the delete button (trash icon) next to the user alpha_usr.
6
B. alpha_usr is deleted from the database and from HTML table.
C. Admin tries to delete the user vinayak which is currently logged in. The user is not
deleted and an error message is displayed.
7
Admin page - Edit User functionality
● Each row in the table should have edit button associated with it (see the pencil icon in the
just to the left of the garbage can).
● Clicking Edit button should activate edit mode and display it in the list of users table.
● You should be able to update the Name, Login, and New Password in edit mode.
● Edit mode will have two different buttons: Update and Cancel.
● Cancel should discard the changes and exit edit mode.
● Upon clicking the Update button, the data entered by the user should be posted to the
server.
• The server should validate that no other user in the database (other than the one
being edited) has the same login.
• In case the validation passes, the information about the edited user should be
updated in the following table: tbl_accounts. The updated information should also
reflect in the HTML table.
• In case the validation fails, the following error message should be displayed: This
login is used by another user
Note: Review the screenshots i, ii, ii, iv, and v depicting the Edit User functionality.
i) Admin clicks on the edit button next to the user hello.
ii) Admin updates the values to stark and clicks on save (the disk icon).
8
iii) The values are successfully updated in database and displayed in the user table.
iv) The user edits the details of user stark and updates the login to vinayak. Error
message is displayed because a user with login vinayak already exists.
v) Admin clicks on Cancel button to discard the changes (the circular icon on).
9
Navigation bar
● The navigation bar displays the user which is currently logged in.
Database Configuration
● Your server should read the values in the file: sample_dbconfig.xml (which was
provided, and YOU MUST UPDATE) and use them to establish a database connection.
Note, you can only run the parser from node.js/Express, so make sure to insert ample
calls to console.log to check to make sure your server is functioning as you expected as
you develop your solution.
4 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.
** Make sure you have this account information in your accounts table:
Login: admin
Password: admin
Create a README file inside yourx500id_hw07 directory. This README file should include:
Your x500id, login, and password for your website. Compress the yourx500id_hw07 directory
and submit it.
We will use the login and password values provided by you in README file to login to your
website. Ensure that these values are correct and can be used to access your website.
10
5 Evaluation
Your submission will be graded out of 100 points on the following items:
● Submission instructions are met (5 points).
● Navigation bar displays the currently logged user. (5 points)
● Admin page displays the correct list of users in the system. (10 points)
● In Admin page, the DELETE button works for every row and displays error messages
correctly. (10 points)
● In Admin page, the EDIT button works for every row and switches the view to EDIT
mode. (10 points)
● In Admin page, UPDATE button works in EDIT mode. It validates the input, and updates
the name, login, password accordingly. All the test cases should work (10 points)
● In Admin page, CANCEL button works in EDIT mode. (5 points)
● In Admin page, ADD USER works and switches the view to ADD mode. (10 points)
● In Admin page, SAVE button works in ADD mode. It validates the input, and saves the
name, login, password accordingly. (10 points)
● In Admin page, CANCEL button works in ADD mode. (5 points)
● Server reads database configuration from XML file and establishes connection to
database. (10 points)
● All functionality from assignment 6 works. (10 points)