CET206 Full Stack Web Application Development Assignment Question | SUSS

This Assignment is based on the Staycation Application.

Submit Questions 1, 2a, 2b and 3 as a single flask application in a folder labelled Solution 1 and Question 2c as another flask application in a folder labelled Solution 2

Question 1

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

Question 1a

Using relevant code in the front-end and backend components, explain how WTForm is applied in the implementation of RegForm in the Staycation application. In particular, explain

• the definition of RegForm
• the application of RegForm in the frontend component
• the delivery of data to the backend component
• the successful/unsuccessful data retrieval by the backend component
• The security features in the Staycation application through using WTForm

Question 1b

Redefine RegForm to include fields for:

• a checkbox for “Remember Me” and
• a submit button.

Re-implement the front-end and back-end components to use the new RegForm.

Test that all existing functions are working as before but that now, RegForm also includes a checkbox field and a submit button, and these fields should be used by the front-end and back-end components.

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 from which the code segment is extracted.

Question 2

Before working on this question, drop the collection booking.

Question 2a

• Introduce a new field, status, into the Booking class. Status can take either the value completed, cancelled or upcoming.

For a past booking (check-in date is before or on today’s date), the status can either be completed or cancelled. For a future booking (after today’s date), the status can either be upcoming or cancelled.

When a Booking is created and if no status is provided, assign the status to completed when the check-in date is on or before today, and assign status to upcoming when the check-in date is after today.

• Either add new method(s)/function(s) or update relevant method(s)/function(s) to

accept an additional status as input parameter and
Return a list of bookings such that the status of bookings must also match the input status.

• Update the Upload function so that when bookings are uploaded, their statuses reflect the statuses specified in the file newBooking.csv.

Question 2b

Modify the Manage Booking function:

• to let a user select a status category so that only the bookings with the selected status category are displayed. If there is no booking of a selected status category, show the message No booking to manage, as shown in Figure Q2b (i).
• to display all bookings if the user selects the status category All as shown in Figure Q2b (ii), and to display only bookings of the selected status category if the user selects a specific status category.
• To display each completed or cancelled booking without the update button as completed bookings and cancelled bookings can be deleted but not updated.
• To display the upcoming bookings with both an update button and a cancel button. If the cancel button is clicked against an upcoming booking, update its status to “cancelled”. Display a message “Booking has been cancelled” if the cancel is successful and a message “Error cancelling booking” otherwise, as shown in Figure Q2b (iii).

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 from which the code segment is extracted.

Question 2c

Differentiate between a multi-page application and a single-page application. Re-implement Question 2b as a single-page application for these three buttons: Delete, Update and Cancel. 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 from which the code segment is extracted.

Submit Question 2b and Question 2c as separate flask applications in different folders.

Question 3

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

• Modify the Dashboard hyperlink such that clicking on it has no effect. Instead, when a dropdown option is chosen, a relevant chart will show up.
• If the admin user selects Package Bookings, the original trend chart will be displayed as shown in Figure Q3 (i).
• If the admin user selects User Bookings, the bar chart will be displayed as shown in Figure Q3 (ii).

The bar chart is sorted according to the user email addresses and will display the number of bookings cancelled, completed and upcoming for each user.