ICT239 Web Application Development End-of-Course Assessment – July Semester 2025, Singapore

INSTRUCTIONS TO STUDENTS:

1. This End-of-Course Assessment paper comprises 13 pages (including the cover page).
2. You are to include the following particulars in your submission: Course Code, Title of the ECA, SUSS PI No., Your Name, and Submission Date.
3. Late submission will be subjected to the marks deduction scheme. Please refer to the Student Handbook for details.

ECA Submission Guidelines

This ECA carries 70% of the course marks and is a compulsory component. It is to be done individually and not collaboratively with other students.

Submission  

You are to submit the ECA assignment in exactly the same manner as your tutor-marked assignments (TMA), i.e. using Canvas. Submission in any other manner like hardcopy or any other means will not be accepted.

Electronic transmission is not immediate. It is possible that the network traffic may be particularly heavy on the cut-off date and connections to the system cannot be guaranteed. Hence, you are advised to submit your assignment the day before the cut-off date in order to make sure that the submission is accepted and in good time.

Once you have submitted your ECA assignment, the status is displayed on the computer screen. You will only receive a successful assignment submission message if you had applied for the email notification option.

ECA Marks Deduction Scheme

Please note the following:

1. Submission Cut-off Time – Unless otherwise advised, the cut-off time for ECA submission will be at 12:00 noon on the day of the deadline. All submission timings will be based on the time recorded by Canvas.
2. Start Time for Deduction – Students are given a grace period of 12hours. Hence calculation of late submissions of ECAs will begin at 00:00 hrs the following day (this applies even if it is a holiday or weekend) after the deadline.
3. How the Scheme Works – From 00:00 hrs the following day after the deadline, 10 marks will be deducted for each 24-hour block. Submissions that are subject to more than 50 marks deduction will be assigned zero mark. For examples on how the scheme works, please refer to Section 5.2 Para 1.7.3 of the Student Handbook.

Any extra files, missing appendices or corrections received after the cut-off date will also not be considered in the grading of your ECA assignment.

Plagiarism and Collusion

Plagiarism and collusion are forms of cheating and are not acceptable in any form of a student’s work, including this ECA assignment. You can avoid plagiarism by giving appropriate references when you use some other people’s ideas, words or pictures (including diagrams). Refer to the American Psychological Association (APA) Manual if you need reminding about quoting and referencing. You can avoid collusion by ensuring that your submission is based on your own individual effort.

The electronic submission of your ECA assignment will be screened through a plagiarism detecting software. For more information about plagiarism and cheating, you should refer to the Student Handbook. SUSS takes a tough stance against plagiarism and collusion. Serious cases will normally result in the student being referred to SUSS’s Student Disciplinary Group. For other cases, significant marking penalties or expulsion from the course will be imposed.

NOTES TO STUDENTS:

1. Use the solution template document provided with the question paper.
2. Show only relevant code segments and provide explanation for them in your answers. Do not copy large chunks of code to explain your solution as it does not show understanding and will not attract good marks.
3. The marker will use start.sh to run your application on Vocareum. If the marker cannot run your application using start.sh, it is assumed that your implementation does not work. To ensure that the marker can run your app,
   • update requirements.txt if you install additional packages, and
   • provide instructions in a file named instructions.txt or instructions.md and indicate requirements that are added as well as instructions how to execute your application.
4. Refer to the Student Guide for ICT239, available on the L group under Discussion and topic Support for Virtual Lab Infrastructure (Vocareum Lab).
   a. Either provide screenshots of output from your runs in the solution document or alternatively, record and upload the recordings of the runs.
   b. You must submit all source codes, word report and recordings (if recorded) in Vocareum.

It is a requirement to first generate an appendix in your word report to include all your source code before you submit the word report on Canvas. The appendix MUST have the complete content of all your files (py, html, css, js) in your solution folder.

c. Submit Word Report in Canvas.

5. If you fail to do any of the steps, your tutor will get an incomplete submission, and there are penalties for missing out components that your marker cannot find. This will result in unnecessary mark deductions.

(Full marks: 100)

Questions

Question 1

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

Question 1a

Explain the MVC architecture and its advantages when applied to web applications such as Staycation. Then, use ONE (1) complete user function e.g., get package details, book package, manage booking etc., and relevant code segments in the frontend and backend components to explain how the M, the V and the C components of the MVC architecture are applied to the Staycation application.

(11 marks)

Question 1b

Explain the typical purposes of GET and POST requests and evaluate whether they have been appropriately used in the Staycation application in terms of the purposes. Then, compare the security features for the two types of requests, and explain whether it is possible to make either or both of GET and POST requests more secure. If it is possible to make the request(s) more secure, explain how you would go about doing so.

(9 marks)

Question 2

For this question, you are to make modifications to the existing functions in the Staycation application.

Question 2a

Modification to Booking function

• Does the Staycation application allow users who are not authenticated to make bookings? Justify and explain using the relevant code in the Staycation application.
• Re-implement the booking function such that now admin user cannot make booking. That is, if the admin user clicks on the Book button on either the Package page or the Package Detail page, he will see the error message as shown in Figure Q2(a).

Figure Q2(a) Error message when admin attempts to make booking

(10 marks)

Question 2b

Modification to Upload function

Modify the Upload function of the Staycation application to read csv files with data in the following format:

Add a new option to allow the admin user to choose to read csv file that includes a list of hotel names, and to create bookings that run consecutively from a specified check_in_date in the csv file. Refer to Figure Q2(b) for how the Upload form should look like.

Figure Q2(b) Modified Upload form

For example, for the first data row where the check-in date is 27/9/2025, the customer is john@abc.com and there are three hotel names [“Shangri-La Singapore”,”Capella Singapore”, “W Singapore – Sentosa Cove”], create 3 bookings for john@abc.com. His first booking is for Shangri-La Singapore with check-in date 27/9/2025. His second booking is for Capella Singapore with check-in date 29/9/2025 because he checks out from Shangri-La Singapore on 29/9/2025 since the duration for the package for Shangri-La Singapore is 2 nights. His third booking is for W Singapore – Sentosa Cove with check-in date 1/10/2025 because the duration for the package for Capella Singapore also happens to be 2 nights.

Do the same for the other data rows, that is, create as many bookings as there are hotel names in the data row starting from the specified check-in date for the specified customer for that data row.

(10 marks)

Question 3

This question requires you to add new features to the Staycation application.

Question 3a

Purchase Bundle function

This function uses the Package page and allows an authenticated non-admin user to buy packages as a bundle to qualify for a discount based on the number of packages purchased. Display appropriate messages if the user is not authenticated or if the user is an admin user.

Refer to Figure Q3(a)(i) for the modified Package page. Note a new checkbox is added for each staycation package. In addition, a Purchase Bundle button is at the top of the page, below the top panel. Figure Q3(a)(ii) shows the Package page with some packages selected.

Figure Q3(a)(i) The modified Package page

Figure Q3(a)(ii) The modified Package page with some packages selected

If no package is selected and the Purchase Bundle button is clicked, flash the error message “Please select packages to buy as a bundle”. If only one package is selected and the Purchase Bundle button is clicked, there is no discount. An example flashed message is shown in Figure Q3(a)(iii).

Figure Q3(a)(iii) No discount for one package selected

If 2 or 3 packages are selected and the Purchase Bundle button is clicked, a 10% discount is given. An example flashed message is shown in Figure Q3(a)(iv). A 20% discount is given for 4 or more packages purchased in a single bundle.

Figure Q3(a)(iv) 10% discount for two packages purchased in a bundle

• Study the three mongoDB documents for three bundles purchased by two nonadmin users.

[

{

“_id”: “6832c737460e8e3d0abf0b79”,

“purchased_date”: “2024-12-30T00:00:00.000Z”,

“customer”: “682ecd38bcca884c095cce21”,

“bundledPackages”: [

{

“package”: “682ebf02d6ab51b9b08c8888”,

“utilised”: false

},

{

“package”: “682ebf02d6ab51b9b08c8889”,

“utilised”: false

}

]

},

{

“_id”: “6833170fb37081807de82cf4”,

“purchased_date”: “2024-05-25T00:00:00.000Z”,

“customer”: “683316f6b37081807de82cf3”,

“bundledPackages”: [

{

“package”: “682ebf02d6ab51b9b08c8888”,

“utilised”: false

},

{

“package”: “682ebf02d6ab51b9b08c8889”,

“utilised”: false

}

]

},

{

“_id”: “6833171db37081807de82cf5”,

“purchased_date”: “2024-05-10T00:00:00.000Z”,

“customer”: “683316f6b37081807de82cf3”,

“bundledPackages”: [

{

“package”: “682ebf02d6ab51b9b08c888a”,

“utilised”: false

}

]

}

]

Define the required document structures. Include all methods needed to support the Purchase Bundle function you will implement for Q3(a).

• Implement the Purchase Bundle function.

There is no limit to the number of bundles that can be purchased in a single day. Set the purchase date to the current date at the time of purchase. Set the “utilised” status for each purchased package to false.

(16 marks)

Question 3b

Manage Bundle function

This function allows a non-admin user to view the bundles purchased (sorted by ascending purchase date) and to make booking by selecting a check-in date and clicking on the Book button.

If a non-admin user has not purchased any bundle, show a message as shown in Figure Q3(b)(i).

Q3(b)(i) The current user has not purchased any bundle yet

Packages in a bundle must be booked within a year from the date the bundle is purchased, or the bundle and the packages in the bundle will expire. Once a package in a bundle is utilised, reflect the “utilised” status as true.

You may modify the purchase date of a bundle (e.g., after user has made a booking for a package in a bundle) so that you can show different cases:

• Utilised packages and expired packages in an expired bundle are shown in Figure Q3(b)(ii), and
• Utilised and un-utilised packages in a bundle not expired yet are shown in Figure Q3(b)(iii). Un-utilised packages in a bundle not expired yet are shown with a date selector to allow user to make a booking for them.

Note that in the figures, bundles are separated by full faint grey lines while packages bought in a single bundle are separated by partial faint grey lines.

Figure Q3(b)(ii) Utilised packages and expired packages in an expired bundle

Figure Q3(b)(iii) Utilised packages and un-utilised packages in a bundle notexpired yet (below the second full grey line)

Define the required document structures. Include all methods needed to support the Manage Bundle function you will implement for Q3(b).

(14 marks)

Question 3c

Single Page Application

Differentiate between a multi-page application and a single-page application. Reimplement Question 3b as a single-page application for the booking of packages in the Manage Bundle function. Make a copy of your solution thus far for this reimplementation.

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.

Submit Question 3c as a separate flask application in the folder Q3c.

(10 marks)

Question 4

For this question, you are to add a new chart for the admin user.

• Modify the Dashboard hyperlink such that clicking on it shows a page with a dropdown menu but without any chart on the page, as shown in Figure Q4 (a).
• If the admin user selects Amount Incoming option from the dropdown menu, the original trend chart will be displayed as shown in Figure Q4 (b)(i). Figure Q4 (b) (ii) shows a line chart which includes bookings uploaded using the modified upload function should you have implemented Question 2(b).
• If the admin user selects Bookings By Month option from the dropdown menu, a bar chart will be displayed as shown in Figure Q4 (c)(i). The bar chart displays the number of bookings for each month-year for each hotel, sorted by hotel names. Figure Q4 (c) (ii) shows a bar chart which includes bookings uploaded using the modified upload function should you have implemented Question 2(b). Show a very small bar for data points with the value 0.
• If the admin user selects Choose a Type option from the dropdown menu, the same page as shown in Figure Q4 (a) is displayed.

Figure Q4 (a) Dashboard page

Figure Q4 (b)(i) Chart for Amount Incoming option without bookings fromQ2(b)

Figure Q4 (b)(ii) Chart for Amount Incoming option with bookings from Q2(b)

Figure Q4 (c)(i)Chart for Bookings By Month option without bookings fromQ2(b)

Figure Q4 (c)(ii) Chart for Bookings By Month option with bookings from Q2(b)

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

Question 4a

Implement all frontend components. Do not include JavaScript code here. Place your JavaScript code into part 4(c).

(4 marks)

Question 4b

Implement all backend components.

(8 marks)

Question 4c

Implement the JavaScript component.

(8 marks)

—– END OF ECA PAPER —–