ICT239 Web Application Development Tutor-Marked Assignment | SUSS

Tutor-Marked Assignment (TMA)

This assignment is worth 24 % of the final mark for ICT239 – Web Application Development

Note to Students:

You MUST use the provided solution template accompanying this TMA.

Answer all questions. (Total 100 marks)  

Section A

Question 1 concerns the Staycation case study.

Question 1 (30 marks)

Your answer to parts (a) – (c) must show a good understanding of the various components in the Staycation application. To do well in this section, you must provide a thorough answer as well as highlight code by copying ONLY relevant code to be used in your explanation.

You must indicate which file you extracted the code from.

Extract small chunks of code each time and accompany each small chunk with an explanation on how each chunk contributes to your answer. Provide a rationale rather than simply state what the code does.

There is a penalty for code without an explanation and/or for irrelevant code included in your answer.

(a) This question part refers to the code in the frontend component, specifically the home page of the Staycation application.

i) Which HTML files are used to formulate the home page?

ii) Describe the home page in terms of the three major components, e.g., navigation bar, etc. and explain how Bootstrap is applied to position each of the three major components.

iii) Explain TWO custom styling applied to the home page. Identify which components the styling applies to,

iv) Explain how Bootstrap and custom CSS are applied to make the design of the home page responsive to different device sizes. Explain for all three major components.

(10 marks)

(b) This question part focuses on HTTP request and response, URL routing, Jinja, WTForm and Blueprint.

i) Consider ONE user action on the navigation bar of the home page, then trace from the point of the user action on the home page, and explain how a different HTML page gets displayed on the web browser. Your answer must include an explanation of HTTP request and response, URL routing, Jinja, WTForm and Blueprint, where applicable, from the point of user action on the navigation bar of the home page to the point when a new HTML page is displayed.

ii) Enter user input on the form you get from the user action in Question 1 (b) (i). Click on the Submit button. Trace from the point of clicking on the Submit button to the point when a response gets displayed on the web browser. Include explanations on HTTP request and response, URL routing, Jinja and WTForm and Blueprint where applicable. (14 mark)

(c) This question part focuses on Mongoengine and MongoDB.

i) Explain how the Staycation app defines the structure of a Package document.

ii) Explain how the Staycation app adds Package documents to the database. Explain the trigger, the source of the data for the Package document, and the mechanics of using mongoengine to add the document. (6 mark)

Section B

Questions 2 – 3 concern the development of a Web application for an e-library. The application scenario is based on ICT162 January 2025 semester TMA with some modifications, specifically, all books in the library are e-books. A book title may have multiple copies available for loan. At any time, the number of loans for a book title cannot exceed the number of copies the book title has.

The tasks to implement for the web application include the following:

• Browse books, search books by category (Children, Teens, Adult) and get more details on a selected book for Question 2 (a). Question 2 (a) does not use the MongoDB database. Rather, it uses the list of dictionaries provided in books.py. Submit part (a) as a separate application.
• Display the same pages you have implemented for Question 2 (a), but now using the Book documents you populate in MongoDB.  Therefore, for Question 2 (b), you first define the structure for a Book document and then create a MongoDB document for each book in books.py.
• Create an admin user account (admin@lib.sg, password 12345, name Admin). Create also a non-admin user account (poh@lib.sg, password 12345, name Peter Oh). Allow the two types of user accounts to have different user functions (question 3).

You must provide explanations for ALL your implementations to show your understanding of the following items, where applicable.

• the model, view and controller components in your implementation and the purpose of the components, specifically for the question you are answering
• The application of HTML and CSS
• the application of Bootstrap
• the interactions amongst the frontend and backend components that you added.
• the application of Blueprint
• the application of WTForm
• the application of Jinja variables, template filters, statements, inheritance, macros, etc
• any other explanation required for a specific part of a question

Question 2 (30 marks)

Learning objectives:

• Develop an HTML/CSS and Python web framework program
• Apply programming methods to present information in HTML
• Employ a web programming framework for developing a website

(a) Book Titles and Book Details pages

(i) Create a Flask application with a hyperlink Book Titles which leads to the page shown in Figure Q2(a) (i). The application also opens on this page.

Note that books are listed, sorted by their titles, and only the first and last paragraphs of the book description are displayed.

Figure Q2(a) (i): The home page 

(ii) On the Book Titles page, a user can perform a book search based on the listed categories to view books under a selected category. For example, when the category teens is selected and the Search button is clicked, then only teen books are displayed as shown in Figure Q2(a) (ii).

Figure Q2(a) (ii) Book Titles page with only teen books 

(iii) When the More details button is clicked, a page displaying the details of the selected book is displayed. An example page is shown in  Figure Q2(a) (iii).

Figure Q2(a) (iii) The Book Details page 

You must apply responsive web design in your implementation of these pages so that they can adapt to various screen sizes. Ensure that the image for the book cover is sufficiently visible for the different screen sizes.

Figure 2(a) (iv) shows the Book Titles page on a medium screen. Figure 2(a) (v) shows the Book Titles page on a small screen with the side bar and top panel collapsed. Figure 2(a) (vi) shows the Book Titles when the side bar and top panel are expanded. Figure 2(a) (vii) shows the Book Titles on a very small screen when the side bar and top panel are expanded.

Figure 2 (a) (viii) – (x) shows the Book Details page on medium and small screen sizes. Figure 2 (a) (viii) shows the Book Details page on a medium screen.  Figure 2 (a) (ix) shows the Book Details page on a small screen with the side bar and top panel collapsed into a hamburger icon. Figure Q2(a) (x) shows the Book Details page when the side bar and top panel are expanded. Q2(a) (xi) shows the Book Details page on a very small screen when the side bar and top panel are expanded.

You must apply Jinja and Jinja inheritance in your implementation and use the data in the variables all_books provided in the file, books.py. Do NOT hardcode the book data in the HTML pages.

Remember to indicate the relevant file(s) for the implementation and to extract a small chunk of code to explain your code design and/or purpose. Do likewise for all your implementations to avoid losing marks awarded for explanation. (17 marks)

(b) Make a copy of your implementation for part (a) so that you can modify the copy version for part (b) and for the rest of the TMA questions. Rename the copy version as Q2b and submit it in another folder, separate from the application for part (a), which should be in a separate folder named Q2a.

For part (b), you no longer directly use the variable all_books provided in the file, books.py, to formulate the pages described in part (a). Instead, you define the structure of Book documents and then use the variable all_books to create a collection of Book documents in MongoDB.

Figure Q2(b) (i) shows the complete class diagram for the application.

(i) The relevant class for part (b) is the Book class. Define the Book class based on the class diagram in Figure Q2b(i).

Figure Q2(b) (i) Complete class diagram

Implement the Book class such that if the Book collection in the database is empty, then

read the data from the global variables, all_books • create Book documents and store them into MongoDB.
You are free to decide on the design of methods for the Book class to achieve the same effects described in Question 2 (a).

(ii) Make changes to the application to use the Book documents in MongoDB to formulate the Book Titles page, the search function in the Book Titles page, and the Book Details page.

Highlight and provide reasons for the changes you make to part (a) to implement part (b) using the MongoDB database. Include in your answer the changes you made to the frontend and/or backend components of your Flask application, including code to set up the database. (11 marks)

(c) Register, Login and Logout

Add the Login and Register hyperlinks on the sidebar as shown in Figure Q2(c) (i).   The hyperlinks show on the web page only if there is no authenticated user.

Register the admin user account (admin@lib.sg, password 12345, name Admin). Register also a non-admin user account (poh@lib.sg, password 12345, name Peter Oh). Refer to Figure Q2(c) (ii) for the Register page. The Login page is similar to the Staycation app, except that the Submit button is a green button, similar to the Submit button in the Register page in Figure Q2(c) (ii).

Figure Q2(c) (i) Login and Register links in sidebar

Figure Q2(c) (ii) Register page

Log in using either one of the users, and if successful, display the Book Titles page. Log out the user, and the application should display the Book Titles page. The logout interface is similar to that in the Staycation application. (2 marks)