ICT239 Web Application Development Assignment: E-Library Management System with User Authentication, Book Lending, and MongoDB Integration, Singapore

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 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 (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 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 (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 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)

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.

Figure Q3(a) (iii) Page for New Book

(15 marks)

(b) Modifications to the Book Titles and Book Details pages and to the Book class  For this part, you will make modifications to the Book Titles and Book Details pages as well as to the Book class in preparation for part (c) when you will implement the Make a Loan function.

(i) Make changes to the Book Titles page such that if there are available copies, add a button for the Make a Loan function. Refer to Figure Q3(b) (i) for how the page should be like.

Figure Q3(b) (i) Modfified Book Titles page

(ii) Make changes to the Book Details page such that if there is no available copy, indicate that book title is not available. Otherwise, provide a button so that the user knows that he can make a loan. Refer to Figure Q3(b) (ii) –

1 and Figure Q3(b) (ii) -2 for how the page looks like under the two cases.

Figure Q3(b) (ii) -1 Modfified Book Details page for an unavailable book title

Figure Q3(b) (ii) -2 Modfified Book Details page for an available book title

(iii) Add methods to the Book class to allow a book to be borrowed and returned. You should include sanity checks e.g., ensure that a book title that is being returned must have been previously borrowed. Increase the available count when a book title is returned and decrease the available count when the book title is borrowed.

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

(5 marks) (c)     Loan-related Functions for non-admin users

This question part allows user to make loan and to manage his loans. Start by defining the Loan class.

• Loan class

The structure of Loan documents is based on the class diagram in Figure Q2b(i).  Define the Loan class and provide the necessary method for the following actions:

• create a Loan document

A Loan document can be created for a user if he does not already have an unreturned loan for the same book title. The available count for the book should be updated if the loan is successful.

The borrow date, the user making the loan and the book being borrowed should be provided to this method.

• retrieve Loan documents

Define retrieval methods so that a user can view all his/her loans and can also retrieve a specific loan.

• update Loan document either through a loan renew or a loan return A loan renew updates the renew count and the borrow date for the loan.

A loan return updates the return date. In addition, the available count for the book should be updated.

• delete a Loan document

Only loans that have been returned can be deleted.

• any other helper methods you think necessary to support your design.

• Make a Loan function

An authenticated non-admin user can make a loan either through the Make a Loan button in the Book Titles page or the Make a Loan button in the Book Details page. If the user is not yet authenticated, clicking on the button will lead to the Login page with the message “Please login or register first to get an account”.

The application randomly generates a borrow date 10 to 20 days before today’s date, and records the loan in the database. A Loan document is created only if the user does not have an unreturned loan record for the same book title. In addition, the available count for the book title must not be zero. Flash an appropriate message as a feedback to the user.

• View Loan function

The sidebar includes a hyperlink to allow an authenticated non-admin user to view his/her loans, and to manage them.

Refer to Figure Q3(c) (ii) for a user without loan records and Figure Q3(c) (ii) for a user with loan records.

Figure Q3(c) (ii) View loans for a non-admin user without loan

Notice that loans are displayed in descending order of borrow date, and hence, descending order of due date. The due date for a loan is 2 weeks after the borrow date.

• Loans that are not overdue have the option to be renewed or returned.
• Loans that have been returned can only be deleted. A user must manually delete a loan record. This allows the user to keep record of past loans and to delete those that he does not want to keep a record of.
• Loans that are overdue or if the renew count is already 2 can only be returned.

Figure Q3(c) (ii) View loans for a non-admin user with loans

When a loan is returned or renewed, randomly generate a return date or new borrow date date which is 10 to 20 days after the current borrow date. The return date or new borrow date, however, cannot be later than today’s date.

After handling a return, a delete or a renew, the application re-displays the Loan page with the updated loans. Flash appropriate messages after handling each user request.

(20 marks)