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 good 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 relevant code to be used in your explanation.
You must indicate which file you extract the code from.
Extract small chunks of code each time and accompany each small chunk with explanation on how each chunk contributes to your answer. Provide rationale rather than simply state what the code does.
There is 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 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 apply to,
iv) Explain how Bootstrap and custom css are applied to make the design of 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 home page, then trace from the point of the user action on the home page, and explain how a different HTML page get displayed on the web browser. Your answer must include explanation on HTTP request and response, URL routing, Jinja, WTForm and Blueprint, where applicable, from the point of user action on the navigation bar of 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 image for the side bar is obtained from SUSS webpage:
https://library.suss.edu.sg/wp-content/uploads/2023/11/Study-Space_High-table-2-cropped300×200.png
The relevant details of books in the file accompanying the TMA, books.py are obtained from the website: https://www.goodreads.com/?ref=nav_home
The tasks to implement for the web application includes 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 ([email protected], password 12345, name Admin). Create also a non-admin user account ([email protected], 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
Hire a Professional Essay & Assignment Writer for completing your Academic Assessments
Native Singapore Writers Team
- 100% Plagiarism-Free Essay
- Highest Satisfaction Rate
- Free Revision
- On-Time Delivery
Question 2 (30 marks)
Learning objectives:
- Develop a HTML/CSS and Python web framework program
- Apply programming methods to present information in HTML
- Employ web programming framework for developing 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 teens books are displayed as shown in Figure Q2(a) (ii).
Figure Q2(a) (ii) Book Titles page with only teens 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) show the Book Titles when the side bar and top panel are expanded. Figure 2(a) (vii) show the Book Titles on a very small screen when the side bar and top panel are expanded.
Figure 2 (a) (viii) – (x) show the Book Details page on medium and small screen sizes. Figure 2 (a) (viii) shows the Book Details page on medium screen. Figure 2 (a) (ix) shows the Book Details page on 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 small chunk of code to provide explanation of 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 a 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 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 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 ([email protected], password 12345, name Admin). Register also a non-admin user account ([email protected], 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 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
Login using either one of the users, and if successful, display the Book Titles page. Log out the user and the application should display Book Titles page. The logout interface is similar to that in the Staycation application.
(2 marks)
Buy Custom Answer of This Assessment & Raise Your Grades
Question 3 (40 marks)
Learning objectives:
- Apply programming methods to present information in HTML
- Employ web programming framework for developing website
This question focuses on the functions provided to each type of user account: admin and nonadmin.
(a) Add New Book function for admin account user
Figure Q3(a) (i) shows how the web page looks like when the admin user logs in; there is a hyperlink to initiate the New Book function.
When the New Book hyperlink is clicked, a form as shown in Figure Q3(a) (ii) is displayed.
Figure Q3(a) (i) Page after admin user logs in
Figure Q3(a) (ii) Page for New Book
Note that the form control for genres allows for multiple selection. You may use this list of genres and add more if you wish.
genres = [“Animals”, “Business”, “Comics”, “Communication”, “Dark Academia”,
“Emotion”, “Fantasy”, “Fiction”, “Friendship”, “Graphic Novels”, “Grief”,
“Historical Fiction”, “Indigenous”, “Inspirational”, “Magic”, “Mental Health”,
“Nonfiction”, “Personal Development”, “Philosophy”, “Picture Books”, “Poetry”, “Productivity”, “Psychology”, “Romance”, “School”, “Self Help”]
Currently, there is an upper limit of 5 authors for this form.
Note: For bonus of 10 marks, you may wish to do an implementation to cater for any number of authors. You can redesign how the user interacts with the application, but you are not allowed to use any JavaScript code. The marks awarded will depend on the design of the interface and the user interaction. The maximum TMA score including bonus is 100.
Do not forget that even if you work on the bonus portion, you are still required to implement New Book function described in this part.
An example data entry to add a new book is as shown in Figure Q3(a) (iii). You can pick to use any book data such as: https://www.goodreads.com/book/show/6900.Tuesdays_with_Morrie.
When the Submit button is clicked, a new book should be added to the database.
Flash an appropriate message and remain on the same page.
