ICT239: Login to Vocareum via Canvas, start VS Code and open the folder to ICT239 Past References/staycation/app: Web Application Development Assignment, SUSS, Singapore

Question 1 concerns the Staycation case study.

Question 1
(a) Follow the steps stated as follows. While you are performing the steps, do a
recording of you running through the steps to launch Staycation demo on
Vocareum.

1. Login to Vocareum via Canvas, start VS Code and open the folder to
ICT239 Past References/staycation/app

2. Start a new terminal and setup the virtual environment and install packages
• python3 –m venv venv
• . venv/bin/activate
• pip install –r requirements

3. Start the app

4. Start the browser to connect to the app

b Register an admin user, Admin, admin@abc.com, password:12345

6. Login using the registered admin user account: admin@abc.com

7. Click on ‘Upload’ at the sidebar to get the Upload page.

8. Select data type Package and upload staycation.csv. Next, select data type
Users and upload users.csv. Finally, select data type Booking and upload
the file booking.csv. The files can be downloaded from ICT239 Past
References/staycation/app/assets/js folder and to initialize the database for
charting.

9. Click on ‘Dashboard’ to display the chart.

10. Use Compass on the desktop workspace to demonstrate in your video that
the database contains the data of the user accounts, packages and bookings correctly.

Your answer to parts (b) – (d) must show clear understanding of the various components in the Staycation application. In order to do well in this section, you must provide a thorough answer as well as highlight code by copying ONLY necessary code to be used in your explanation.

You should highlight small chunks of code and explain how each chunk contributes to your answer.

There is penalty if relevant code does not accompany an explanation for each sub-part or if irrelevant code is included in your explanation.

(b) This question part refers to the code in the frontend component.
(i) Explain how bootstrap positions the sidebar, the top panel and the centre
panel of a web page in the Staycation application.
(ii) Explain how the web page can respond to various screen sizes. In particular,
explain using the web page you get when you click on the link Packages on
the side bar.
(iii) Explain 5 styling effects applied to the sidebar.
(iv) Explain jinja inheritance as applied in the staycation application for the page displayed for part (b) (ii).

(c) In step 3 of part (a), the application starts, and in step 4 of part (a), the first web page is displayed.
(i) Identify the html page displayed.
(ii) Explain the HTTP request that causes the first page to be displayed.
Specifically, explain how, where the HTTP request is made, and the type of
HTTP request made.
(iii) Explain the interaction between the frontend component and backend
component that produces a HTTP response to cause the web page to be
displayed. Show the relevant code and use the code to explain the interaction.
For this sub-part, you should explain how flask handles URL routing in this
situation and the HTTP response.

(d) In step 8 of part (a), the user can upload files to the backend.
(i) Explain why the view function upload caters to both GET and POST
requests. Is it preferable to have two different view functions instead? Give
reasons for your answer.
(ii) Explain how the backend accesses the additional data that accompanies the GET and POST HTTP requests, if any, for the upload function.