ICT239 Web Application Development TMA

ICT239 TMA SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 1 of 20 ICT239 Web Application Development _________________________________________ Tutor-Marked Assignment January 2025 Semester Presentation _________________________________________ ICT239 TMA SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 2 of 20 TUTOR-MARKED ASSIGNMENT (TMA) This assignment is worth 24% of the final mark for ICT239 – Web Application Development The cut-off date for this assignment is Tuesday, 11 March 2025, 2355hrs. Note to Students: You MUST use the provided solution template accompanying this TMA. You are to include the following particulars in your submission: Course Code, Title of the TMA, SUSS PI No., Your Name, and Submission Date. All TMAs must be submitted electronically through Canvas. No partial submission of TMA will be accepted unless otherwise specified. Please refer to undergraduate student handbook for more information: Combined UG Student Handbook January 2025 (suss.edu.sg) ICT239 TMA SINGAPORE UNIVERSITY OF SOCIAL SCIENCES (SUSS) TMA – Page 3 of 20 Answer all questions. (Total 100 marks) Section A Question 1 concerns the BMI case study. 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 outchoose one of the page and explain form element, methods, label, hidden field what are they forrefer css file and choose the rule to explain all the linesbreakpoint, 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