ICT239 BMI App Development and Enhancement | ECA – SUSS, Singapore

Question 1

Question 1a

Using relevant code in the frontend and backend components, explain FIVE (5) differences between the log and log2 functionalities provided in the BMI application shown in Figure Q1(a). Remember to show relevant code to support your answer.

Figure Q1(a)

(15 marks)

Question 1b

Currently, the landing page of the BMI app is the login page as shown in Figure Q1(b)-old.

Figure Q1(b)-old

Make changes to the code in the BMI app to achieve the following effects:

• The landing page now shows the web page in Figure Q1(b)-new.
• This new landing page should be shown whenever a user logs out.
• The log functionality is now available to all users, including users who have not logged in.
• The log functionality works as previously before the changes you make in the BMI app.

Figure Q1(b)-new

Implement and then show the relevant code segments, before and after the changes you make, and explain what the changes achieve and why the change is required. You must indicate the name of the file where the code segment is extracted from.

(10 marks)

Question 1c

Currently, after a non-admin user logs in, he sees the web page as shown in Figure Q1(c)-non-admin-old, and after an admin user logs in, he sees the web page as shown in Figure Q1(c)-admin-old.

Make changes to the code in the BMI app to achieve the following effects:

• The non-admin user now sees the web page as shown in Figure Q1(c)-non-admin-new.
• The admin user should see the web page as shown in Figure Q1(c)-admin-new.
• The log2 functionality works as previously before the changes you make in the BMI log.

However, for non-admin user, there is no dropdown to select a user email. The app will assume that the weight and height entered are for the current user.

Figure Q1(c)-non-admin-new

Figure Q1(c)-admin-new

Show the relevant code segments, compare before and after the changes you make, and explain what the changes achieve and why the change is required. You must indicate the name of the file where the code segment is extracted from.

(10 marks)

Question 2

Explain your answer and supplement your explanation by lifting/commenting on the relevant source code in the BMI application.

Before working on this question,

1. Drop the database bmi.
2. Create the admin user with email: admin@abc.com, name: Admin, password:123456.
3. Create the user with email: poh@abc.com, name: Peter Oh, password:123456.
4. Create the user with email: mchan@abc.com, name: Mary Chan, password:123456.
5. Upload the file DataSet2.csv in the folder assets/js

Question 2a

Log in using the email poh@abc.com. Then click on the hyperlink Dashboard on the sidebar. The app shows the web page in Figure Q2(a)(i).

Figure Q2(a)(i)

When the first link Frontend Chart: Click to BMI Chart (Frontend) is clicked, the app shows the web page in Figure 2(a)(ii).

Figure Q2(a)(ii)

When the second link Backend Chart: Click to BMI Chart (Backend) is clicked, the app shows the web page in Figure Q2(a)(iii).

Figure Q2(a)(iii)

Explain why

• Two-line charts are seen in Figure Q2(a)(ii) but only one line chart is seen in Figure Q1(a)(iii).
• The data points for the charts in Figure Q2(a)(ii) and in Figure Q2(a)(iii) for Peter Oh are different.

Show relevant code segments to support your explanations. You must indicate the name of the file where each code segment is extracted from.

Explanations for Frontend chart:

Explanations for Backend chart:

(14 marks)

Question 2b

In the original BMI app, when the third link Average Chart: Click to Average BMI Chart (Backend) in the Dashboard page is clicked by a non-admin user, the app shows the web page in Figure Q2(b)-old.

Figure Q2(b)-old

Make changes to the code in the BMI app such that when the third link Average Chart: Click to Average BMI Chart (Backend) in the Dashboard page is clicked, the app will show only the bar chart for the current user if the user is a non-admin user.

The bar chart for non-admin user is shown in Figure Q2(b)-non-admin-new. There is no change for the bar chart for admin user as shown in Figure Q2(b)-admin-new.

Figure Q2(b)-non-admin-new

Figure Q2(b)-admin-new

Show the relevant code segments, before and after the changes you make, and explain what the changes achieve and why the change is required. You must indicate the name of the file where the code segment is extracted from.

(6 marks)

Question 2c

Suggest TWO (2) methods to implement the BMI app so that when the first link Frontend Chart: Click to BMI Chart (Frontend) is clicked, the app shows one line chart if the current user is a non-admin user. Both suggested methods must use JavaScript code/library to get data to plot the line charts from a file.

Identify the files and the changes you need to make for each file for each of your method. Note that actual implementation is optional but implementation may be useful to test that your suggested methods work. Submit your implementation if you have implemented your suggested methods.

Evaluate your TWO (2) suggested methods in terms of web security.

Method 1:

File to change:

Changes:

1. 1.
2. 2.
3. …

File to change:

Changes:

1. 1.
2. 2.
3. …

Method 2:

File to change:

Changes:

1. 1.
2. 2.
3. …

File to change:

Changes:

1. 1.
2. 2.
3. …

Security Concerns/Strengths for

Method 1 Method 2

(10 marks)

Question 3

For this question, you are to add a new functionality to allow a non-admin user manage his BMI data. You will focus on the functionality of deleting BMI data.

You have a choice whether to implement this functionality by 1) making an asynchronous call to the backend, and then getting the frontend to modify the current web page without re-creating the whole table of BMI data or 2) getting the backend to return a new web page which the web browser simply displays.

However, note that if you adopt the second technique, that is, without using Javascript, you will get a maximum of 22 marks instead of a maximum of 35 marks as 13 marks are allocated to JavaScript code.

Question 3a

Introduce a new hyperlink Manage BMI Data on the sidebar for a non-admin user. If the hyperlink is clicked, and the user has no BMI data records, the server returns a web page as shown in Figure Q3(a)(i).

Figure Q3(a)(i)

If there are BMI data for the non-admin user, the server returns a web page as shown in Figure Q3(a)(ii). Note that the BMI data rows are sorted in chronological order. You may assume that the datetime values are unique.

Figure Q3(a)(ii)

Implement and then show the relevant code segments for the frontend components, and explain what the code segments achieve and how each code segment contribute to the functionality. Do not include JavaScript code here. JavaScript code should be put into your answers for Q3(c). You must indicate the name of the file where each code segment is extracted from.

(10 marks)

Question 3b

When a non-admin user clicks on the hyperlink, the server should return a web page as shown in either Figure Q3(a)(i) or Figure Q3(a)(ii).

When a non-admin user clicks on a button to remove a BMI data for the page as shown in Figure Q3(a)(ii), the backend component must perform the following steps:

1. Get the document which the non-admin user wishes to remove.
2. Delete the document.
3. Get the corresponding document that records the BMI daily average for the document deleted in step 2.
4. Update the document by reducing the number of measures.
5. If the number of measures for that date is 0, delete the document. Otherwise update the average bmi.
6. Return either a web page or data to the frontend, depending on whether you are applying server-side rendering (max 22 marks) or client-side rendering (max 35 marks).

Construct the component and show the relevant code segments for the backend components, and explain what the code segments achieve and how each code segment contribute to the functionality. You must indicate the name of the file where each code segment is extracted from.

(12 marks)

Question 3c

Show the relevant code segments for client-side rendering, and explain what the code segments achieve and how each code segment contribute to the functionality. You must indicate the name of the file where each code segment is extracted from.

(13 marks)