Description

Solution to  ICT239 Web Application Development Tutor-Marked Assignment

Question 1 (30 marks)
Your answer to parts (a) – (c) must show good understanding of the various components in the
BMI 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
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
explanation.
(a) This question part refers to the code in the frontend component.
(i) Which HTML pages in the BMI app use a form?
(ii) Select one of the HTML pages and describe the form in that page in terms of
the form elements and their purposes.
(iii) Describe 3 CSS rules applied to the HTML page selected for (a)(ii). You
should explain each CSS rule, and where and how it applies in the HTML page.
(iv) Explain how the BMI app applies Bootstrap to make the web design responsive
to device sizes. Explain using the HTML page selected for (a)(ii).

(11 marks)
(b) This question part focuses on HTTP request and response, URL routing, Jinja,
WTForm and Blueprint.
(i) Click on the Register link on the sidebar. Trace from the point of clicking on
the hyperlink, and explain how the HTML page get displayed on the web
browser. Include explanation on HTTP request and response, URL routing,
Jinja, WTForm and Blueprint, where applicable, from the point of clicking
the hyperlink to the point when the HTML page is displayed.
(ii) Enter details to register a new user successfully. Click on the Submit button
on the HTML page. Trace from the point of clicking on the Submit button to
the point when the resulting HTML page get displayed on the web browser.
Include explanations on HTTP request and response, URL routing, Jinja and
WTForm and Blueprint where applicable.

(14 mark)
see which html page got form tag
and list them all out

choose one of the page and explain
form element, methods, label, hidden field
what are they for

refer css file and choose
the rule to explain all the lines

breakpoint, collapse
content positioning

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 4 of 20
(c) This question part focuses on Mongoengine and MongoDB.
(i) Explain how the BMI app defines the structure of a BMILOG document.
(ii) Explain how the BMI app adds a BMILOG document into the database.
Explain the trigger, the source of the data for the BMILOG document, and the
mechanics of using mongoengine to add the document.

(5 mark)

Section B
Questions 2 – 3 concern the development of a Web application for students to apply for CCA.
The application scenario is based on ICT162 July 2024 semester TMA with some
modifications.
The data for the web pages is obtained from SUSS webpages, however, with “.sg” removed
from all email addresses:

• https://www.suss.edu.sg/about-suss/centres/student-success-centre/student-life/our-
programmes

• https://www.suss.edu.sg/ig

• https://www.suss.edu.sg/about-suss/centres/student-success-centre/student-life/our-
programmes/competition-groups

Awards for competition groups can be found under the heading: Competition Groups
Achievements on the webpage for competition groups.
The tasks to implement for the web application includes the following:
• display an about page which has two hyperlinks to lead to the interest groups page and
to the competition groups page. (questions 2a).
Refer to the appendix for code for classes that you can use to implement question 2(a).
Subsequently, you are to modify the classes in the appendix for question 2(b) so that
data is stored in Mongodb.
• Display the same three pages with data now stored in Mongodb (question 2b). Create
each group and its CCA admin account as Mongodb documents in the respective
collections. For example, create a CCA competition group Mongodb document for
Archery and also create a user with an email account archery_cg@suss.edu, password
12345, name Archery, role CCA admin if the group has not been created yet.
• create an admin user account (admin@suss.edu, password 12345, name Admin, role
admin) if the account is not yet created when the application starts.
• allow different user roles 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

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 5 of 20
✓ 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 (34 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
You are to submit both implementations for part (a) and (b) as two separate applications.
(a) About and group pages
Create a Flask application with a hyperlink About which leads to the home page
shown in Figure Q2(a) (i).

Figure Q2(a) (i): The home page or the About page

From the About page, a user can click on either the Interest Groups card or to the
Competition Groups card to view CCA groups under the respective CCA type.
The competition groups page is shown in Figure Q2(a) (ii). The groups are
displayed sorted according to group name. Note that awards for only the years
2022-2024 are extracted from the SUSS website.

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 6 of 20

Figure Q2(a) (ii) The Competition Groups page

The interest groups page as shown in Figure Q2(a) (iii). The groups are displayed
sorted according to category and group name.

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 7 of 20

Figure Q2(a) (iii) The Interest Group page

You must apply responsive web design in your implementation of these pages so
that they can adapt to various screen sizes. Figure 2(a) (iv) shows the About page
on a medium screen. Figure 2(a) (v) shows the About page on a small screen with
the side bar and top panel collapsed. Figure 2(a) (vi) show the About page when
the side bar and top panel are expanded.

Figure Q2(a) (iv)

Figure Q2(a) (v) Figure Q2(a) (vi)

The About page on various screen sizes

Figure 2 (a) (vii) – (ix) show the Competition Groups page on medium and small
screen sizes. Figure 2 (a) (vii) shows the Competition Groups page on medium
screen. Figure 2 (a) (viii) shows the Competition Groups page on small screen with
the side bar and top panel collapsed into a hamburger icon. Figure Q2(a) (ix) show
the Competition Groups page when the side bar and top panel are expanded.

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 8 of 20

Figure Q2(a) (vii)

Figure Q2(a) (viii)

Figure Q2(a) (ix)
The Competition Groups page on various screen sizes

Figure 2 (a) (x) – (xii) show the Interest Groups page on medium and small screen
sizes. Figure 2 (a) (x) shows the Interest Groups page on medium screen. Figure 2
(a) (xi) shows the Interest Groups page on small screen with the side bar and top
panel collapsed into a hamburger icon. Figure Q2(a) (xii) show the Interest Groups
page when the side bar and top panel are expanded.

Figure Q2(a) (x)

Figure Q2(a) (xi)

Figure Q2(a) (xii)

The Interest Groups page on various screen sizes

You must apply jinja and jinja inheritance in your implementation and to use the
data in the variables comp_groups and int_groups provided in the appendix. Do
NOT hardcode the CCA groups 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 the code design and/or purpose. Do
likewise for all your implementations to avoid losing marks awarded for
explanation.

(19 marks)
(b) Make a copy of your implementation for part (a) so that you can modify the copy
for part (b). Submit part (a) in a separate folder. Part (b) will be used for subsequent
development for parts (b) and (c) of this question as well as for question 3.

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 9 of 20
For part (b), you no longer use the variables comp_groups and int_groups provided
in the appendix. Instead, use the collections in MongoDB database based on the
class diagram in Figure Q2b(i) to store data about CCA groups. Figure Q2(b) (i)
shows the complete class diagram for the application. The relevant classes for part
(b) are CCA, Competition, Interest and User.

Figure Q2(b) (i) Complete class diagram

(i) Implement the class User.
Create the admin user through some application code if the user collection
is empty. Use the data for the admin user – email: admin@suss.edu,
password 12345, name Admin, role admin. All passwords stored in a
database should be hashed.
(ii) Implement the class CCA, Interest and Competition such that if the CCA
group collection in the database is empty, then
• read the data from the global variables, all_comp_groups and
all_int_groups
• create appropriate documents and store into MongoDB.
• create the CCA admin account for each CCA group.
Use the data for the CCA admin user – email: the group specified
email, password 12345, name the group specified name, role CCA
admin.
You are free to decide on the design of methods for the classes and to
implement them to achieve the same effects described in part (a).
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.

(13 marks)

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 10 of 20
(c) Register, Login and Logout
In this application, there is no need to register for an account. Explain using the
BMI code, what modifications are required to both frontend and backed
components assuming you are reusing the code in the BMI application. You will
implement the login and logout functions in Question 3.
Similar to the BMI case study, a user needs to be authenticated before he can use
certain functions of the application, e.g., to apply to join a CCA group. Therefore,
a user must have an account. Note that currently a number of user accounts have
been set up in part (b), namely the admin account in part (b) (i) and the CCA admin
accounts in part (b) (ii).

(2 marks)

Question 3 (36 marks)
Learning objectives:
• Apply programming methods to present information in HTML
• Employ web programming framework for developing website
This question focuses on the various functions provided to each user role: admin, CCA admin
and student. For this question, you will define the Application class in Figure Q2(b) (i) first.
(a) Implement the Application class. Provide the following methods:

• Create document with parameters: a student user and a CCA group.
Randomly assign the date of application from a day between one week
before today and today. The status of a newly created application is
“Pending”
• Allow documents to be retrieved with any or none of the details: student
user, CCA group and status.
For example,
o if only a CCA group is supplied, return only applications for that
CCA group.
o If a CCA group and a status are supplied, return only applications
with the matching status for that CCA group.
o If nothing is supplied, return all application documents.
Return documents in sorted ascending order by CCA type, group name,
status and student email.
• Allow the status of document to be updated.
• Allow a document to be deleted.

(5 marks)

(b) Common function for all authenticated users:
(i) Login
The login function is described as part of the functions of the different user
types. Implement the login function accordingly.
(ii) Logout
After a user logs out, the About page should be displayed.
(iii) Change Password

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 11 of 20
This function allows the current user to change his password. The change
is successful if the user enters his current password correctly and he also
enters identical new password into both the new password text fields. Refer
to Figure Q3(b) (i) for successful update and to Figure Q3(b) (ii) for
unsuccessful update. Notice that in Figure Q3(b) (i), the user is directed to
the About page whereas in Figure Q3(b) (ii), the user remains on the same
page.

Figure Q3(b) (i) Figure Q3(b) (ii)

The Change Password function

(9 marks)

(c) Functions for admin user
Refer to Figure Q3(c) (i) for the functions available to the admin user.

Figure Q3(c) (i) Functions for admin user

(i) Create Account
Once the admin user logs in, he is directed to the Create Student Account
page. This function allows the admin user to create either an account with
the role student or with the role CCA admin. For simplicity, assume that all
passwords are “12345”.
Create two student users, mchan@suss.edu for Mary Chan and
poh@suss.edu for Peter Oh. Flash success/failure messages as shown in
Figure Q3(c) (ii) and Figure Q3(c) (iii).

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 12 of 20

Figure Q3(c) (ii) Figure Q3(c) (iii)
Create Account function for admin user

(ii) Process Applications
This function allows to admin user to view all applications and to make
changes to their status. A message is displayed when there is no application
to process, as shown in Figure Q3(c)(iv).

Figure Q3(c) (iv) Process Applications function without any application
If there are applications, they are sorted by CCA group type and CCA group
name, status and student email. A message should be flashed after each
update.

Figure Q3(c) (v) Process Applications function with applications

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 13 of 20
(8 marks)

(d) Functions for CCA admin user
Refer to Figure Q3(d) (i) for the functions available to the CCA admin user. When
a CCA admin user logs in, he is directed to the Process Application page.
Similar to the Process Application function for admin user, a CCA admin user can
view all applications. However, the applications are only those for the CCA group
of the CCA admin user.

Figure Q3(d) (i) Process Application function for CCA admin user
The CCA admin use can also make changes to the status of listed applications. A
same message is displayed when there is no application to process, as shown
previously in Figure Q3(c)(iv). If there are applications, they are sorted by status
and student email. A message should also be flashed after each update.

(6 marks)

(e) Functions for student user
Refer to Figure Q3(e) (i) for the functions available to the student user. When a
student user logs in, he is directed to the About page. From the About page, the
student user can click on either the Interest Groups card or to the Competition
Groups card to view CCA groups of the respective CCA type and to apply to join
a CCA group.

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 14 of 20

Figure Q3 (e) (i) Functions for student user

(i) Apply to Join
Non-authenticated users will be prompted to log in if they click on the
Apply to Join button.
For authenticated users who are not students, flash an error message “You
do not have access to this function” and remain on the same page.

Figure Q3 (e) (ii) Functions for student user

If an authenticated user who is a student, clicks on the Apply to Join button,
create an application document for the student to apply to join the CCA
group. Flash a message and remain on the same page. Refer to Figure Q3(e)
(iii).

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 15 of 20
If a student currently has an application document to record his application
to join a CCA group, do not create another application document for that
student for that CCA group. Flash an error message and remain on the same
page. Refer to Figure Q3(e) (iv).

Figure Q3(e) (iii)

Figure Q3(e) (iv)

Apply to Join function for student user

(ii) Manage Applications
This function allows the student user to view his applications and to delete
applications with status Pending or with status Pending Successful. A
message “No application to Manage” is displayed when there is no
application to manage.
If there are applications, they are sorted by CCA group type, CCA group
name and status. If the status is Pending or Successful, include a Delete
button. Refer to Figure Q3 (e) (v).

Figure Q3 (e) (v) Manage Applications function for student user
A message should be flashed after each delete. Refer to Figure Q3 (e) (vi).

ICT239 TMA

SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 16 of 20
Figure Q3 (e) (v) Manage Applications function for student user
(8 marks)