Question 1: Developing the View and Controller Components

Learning objectives:

Apply programming methods to present information in HTML
Employ a web programming framework for developing a website

The following paragraphs describe the registration, login, and logout processes. When the URL localhost:5000 or localhost:5000/login is requested after the web application is run, the landing view is the Login view as shown in Fig. Q1(a). The view has three areas: the sidebar, the topbar, and the container.

The sidebar has the title “Reservation Portal”, and two clickable links “Login” and “Register.”

The top bar displays the name of the link in the sidebar that was clicked or a name related to the requested URL. Since the landing view is the Login view, the topbar displays the name “LOGIN”. The container consists of a form to log into the application. The form has email and password input fields and a Submit button.

Before a user can log in, he needs to register for an account. Clicking on the Register link in the sidebar or entering localhost:5000/register will result in the Register view shown in Fig.

Q1(b). The Register view consists of the same 3 areas as the Login view. However, the top bar will display the name “REGISTER”, and the registration form has 3 input fields: Email, Password, and Name.

To test the business processes associated with the Register and Login views, the tester must first register a user. Use an email account admin@abc.com, with a password “12345” and the name “Admin” as test data, The Register controller executes when the Submit button is clicked. The register should succeed, and the Login view should be displayed.

A user can then use the admin@abc.com account, after it is successfully registered, to login into the application. When the user clicks the Submit button in the Login view with the correct login information, the login succeeds, and the Course view is displayed as shown in Fig. Q1(c).

The sidebar of the Course view shows 3 links, Courses, Dashboard, and Upload. The top bar shows the name “COURSE.” Since there is no course data, the container in the Course view is empty.

Note that if email and/or password were entered wrongly, the login should fail and error message(s) should be shown over the Login view, such as those in Fig. Q1(d) and the login view will continue to remain. Similarly, when registration fails, the Register view should display an error message(s), such as those shown in Fig. Q1(e), and the Register view remains.

(a) Analyse the description for the Registration and Login processes and draw ONE (1) flowchart for both the Registration and Login processes. The single flowchart should include their trigger events, decisions, input and output views, and error messages, if applicable.

(b) Apply Flask framework/HTML/CSS/JS to implement the Registration process with the views and control flows according to your flowchart and HTML pages that display the corresponding input and output views, where applicable.

Use Flask-Login, WTForm, and jinja in your implementation and your choice of Python collection(s) to store the registered user accounts in a class. This class is implemented for Flask-Login to register/login/log out a user.

Explain your implementation and relate your code to your flowchart.

(c) Apply Flask framework/HTML/CSS/JS to implement the Login process with the views and control flows according to your flowchart and HTML pages that display the corresponding input and output views, where applicable.

Use Flask-Login, WTForm, and jinja in your implementation and retrieve registered account details from your choice of Python collection(s) in Question 1(b).

Explain your implementation and relate your code to your flowchart.

(d) Apply Flask framework/HTML/CSS/JS to implement the Logout process. As shown in Fig. Q1(f), when the exit corner at the top-right corner is clicked, the following option will pop up for the user to log out or remain in the login state. If the user chooses to log out then there should not be a current user that is logged in and the landing view should be displayed.

Explain your implementation and relate your code to the logout process.

Question 2: Developing the Model Component

Learning objective: Construct a prototype website to present information from multiple sources upon user requests.

The following paragraphs describe three processes: Uploading Files, Selecting a Course to Book, and Selecting a Schedule for a Booking.

The Uploading Files process concerns the Upload link in the Course view shown in Fig. Q1

(c). When the link is clicked, the application will display the Upload view as shown in Fig.

Q2(a) where the topbar shows “UPLOAD”, and the container shows a dropdown menu default at Courses, a Choose File button to browse the file directory to select a file, and an Upload button to upload the selected files to the Flask backend.

Two files will be given for you to upload to the application. They are:

• courses.csv
• booking.csv

As test data, choose the file courses.csv and click the Upload button to upload the data for courses. Next, choose the Booking data type as shown in Fig. Q2(b) and the file booking.csv, and upload the bookings.

If the files are successfully uploaded, they will return to the view shown in Fig. Q2(a). The Selecting a Course to Book process concerns the Book buttons in the Course view shown in Fig. Q2(c) after data in courses.csv has been uploaded to the application. The Course view can

be obtained by clicking on the link Courses in the sidebar or immediately after a user is successfully logged in. The uploaded golf courses should be displayed in the container, each row area contains 3 card areas, each card area consists of a Picture, a Name, a Description of the golf course, and a Book button for each golf course.

A user of the application can scroll down the page and click on the Book button for a selected course, e.g., “Raffles Country Club”. Upon clicking on the Book button, the Schedule view shown in Fig. Q2(d) is displayed.

The topbar of the Schedule view shows the name of the course, and in this case, it is “Raffles Country Club” which has been selected for booking. The container consists of two card areas, the left card area contains the Picture, Name, and Description of the selected golf course; the right card area contains the title “Select Tee Off Time” and a DateTime picker labeled Tee_time.

The Selecting a Schedule for a Booking process concerns the Submit button in the Schedule view as shown in Fig. Q2(d). As test data, enter the tee date and time to be 23/10/2022 7:30 am for the course “Raffles Country Club”. Click on the Submit button to book the scheduled tee date and time, and the application will process the request and return to the Course view
shown in Fig. Q2(c)

(a) Re-implement the Registration and Login processes in question 1 by replacing your Python collection(s) with a MongoDB collection and use Mongoengine to retrieve/store data from the MongoDB collection where applicable.

Explain the changes in your implementation.

(b) Analyse the description for the three processes: Uploading Files, Selecting a Course to Book, and Selecting a Schedule for a Booking, and draw THREE flowcharts – one for each of the processes. EACH flowchart should include the trigger events, decisions,

input and output views and error messages, if applicable for ONE of the three processes.

(c) Apply Flask framework/HTML/CSS/JS and the MVC architecture to implement the Uploading Files process with the views and control flows according to your flow chart and HTML pages that display the corresponding input and output views, where applicable.

Employ MongoDB and Mongoengine to capture and store the uploaded data from courses.csv and booking.csv at the backend.

The Course model records the course name, the holes that make up the course, the image URL, and a description. The details of course holes are recorded as 3 list fields; one list field records the index of the holes, one list field records the par of the holes and one list field records the distance of the holes.

The Booking model uses one reference field for the user, one reference field for a
course, and one list field to record the tee times booked by the user for the course recorded in a document.

For example, in booking.csv, the user admin books the course Marina Bay Golf
The course is at three different tee times: 22/10/2022 07:30:00 AM, 22/10/2022 07:50:00 AM, and 22/10/2022 08:30:00 AM. The three tee times 22/10/2022 07:30:00 AM, 22/10/2022 07:50:00 AM, and 22/10/2022 08:30:00 AM will be recorded in the list field in one Booking document for the same user and the same golf course. The user reference field records the reference to the user card sidebar topbar

admin and the course reference field records the reference to the course Marina Bay Golf Course.

Explain your implementation and relate your code to your flowchart.

(d) Apply Flask framework/HTML/CSS/JS and the MVC architecture to implement the Selecting a Course to Book process with the views and control flows according to your flow chart and HTML pages that display the corresponding input and output views where applicable.

Employ MongoDB and Mongoengine to retrieve/store data at the backend where applicable.

Explain your implementation in relation to your flowchart.

(e) Apply Flask framework/HTML/CSS/JS and the MVC architecture to implement the Selecting a Schedule for a Booking process with the views and control flows according to the flow chart and HTML pages that display the corresponding input and output views where applicable.

Employ MongoDB and Mongoengine to retrieve/store data at the backend where applicable.
Explain your implementation in relation to your flow chart.

Question 3 Visualising application data (30 marks)

Learning objective: Demonstrate the visualization of data on a web presentation The following paragraphs describe the process of Visualising the Bookings in a Chart. When the Dashboard link in Fig. Q2(a) is clicked, the application will display the view as shown in Fig. Q3(a).

The top bar displays the name “DASHBOARD”. The sidebar displays the link “Back to Course”, and a dropdown menu with the default option “Select One Course”. The dropdown list contains the names of all uploaded courses. The container shows a card with the title Show Schedule and an empty canvas in the card body for a chart.

As test data, select “Marina Bay Golf Course” in the dropdown menu shown in Fig. Q3 (b)(I). Once selected, the Show Schedule card body shown in Fig. Q3 (b) (ii) displays 3 line charts, one for each of the 3 different tee off times:7:30am, 7:50 am, and 8:30 am.

Use the formula for the Duration of a hole to compute the duration the golfer will spend at each hole. The duration spent at a hole is the sum of setup time and playtime where setup time depends on the Hole Index and the Par of the Hole, and play time depends on the Hole Distance.

The cumulative durations at each hole added to the tee time result in the data points for the line chart. Thus, the sum of the duration for all holes in a course and a tee time is the ending time. For example, for the tee times 7:30 am, 7:50 am, and 8:30 am, the ending times are 11:37 am,

11:57 am and 12:37 pm respectively because the sum of the durations at each hole is 4 hours and 7 minutes.

Similarly, when each of the other golf courses is selected, the corresponding schedule of the course according to the booking record should be displayed; when there is no booking, an empty schedule will be shown.

When the Back to Course link is clicked, the view in Fig. Q2(c) will be displayed.

(a) Analyse the description for the Show Schedule process and draw a flowchart for the process that include the trigger events, decisions, input and output views, and error messages, if applicable.

(b) Apply the frontend and backend technologies in questions 1 and 2, and use ChartJS to implement the visualization of the schedules as shown in Fig. 3(b)(i) and (ii) Explain your implementation in relation to your flowchart.

(i) The HTML/CSS/JS program that displays views as shown in Fig. Q3(a) and
Q3(b) (i) & (ii)

(ii) Use ChartJS library and AJAX call at the frontend to generate the chart in Fig. Q3(b) (ii)

(iii) Use Flask framework and MongoDB in the backend to implement a response to the frontend request and to retrieve the data from the NoSQL database for charting in Q3(b)(ii)