ATHE Level 4 Unit 12 Web Design and Programming Assignment Task : CTO Birdwatching App Development for Urban Wildlife Insights

Unit 12 Web Design and Programming Assignment

Note to Learners

Assignment Scenario

You have been working as a developer for a medium-sized software development studio that specialises in web design and programming for various sizes of commercial web solutions in the large municipality of Centrala.

The Central Environmental Agency (CEA) is currently working with the Central Trust for Ornithology (CTO) to assist their urban planning. They know, post-COVID-19, that regular exposure to nature, and in particular birds, can have many positive effects on their citizens’ mental health and physical wellbeing. Consequently, they would like to create positive change and encourage more wildlife (including birds) into Centrala.

Unfortunately, planning requires making informed choices, and the CEA simply does not have up-to-date information from the CTO regarding the frequency and distribution of the various species of birds that visit the urban and suburban areas of the Centrala municipality.

Initially, a postal survey campaign had been considered, but the CTO is keen to put the survey online as this makes it easier to encourage young people into ornithology and makes it easier to extract data and (eventually) report their observations.

The agreed solution is to authorise a new online bird study that allows residents to post observations and upload pictures about their sightings on a bespoke message board. The CTO has recently approached the studio to help with the development of the website and message board.

In addition, it is envisaged that functionality should be included that allows the visitor to:

• Register as a member of the CTO message board
• Log in with a registered username and password
• Edit their post, e.g. change a detail, spelling error, etc.
• Delete their post, if desired
• Search the message board for chosen keywords, displaying messages that match.

The CTO will then be able to process the uploaded data to gain insights about the current urban and suburban bird populations and, in turn, help the CEA with their ongoing environmental planning.

To do this assignment, you will need to set up and configure a suitable development environment to create and test the website. Your tutor will support you with this. This will require an HTTP server, a server-side scripting language and a suitable database. The development can then proceed in a client/server fashion, meaning there’s no need to upload onto a public-facing hosting platform.

Data Capture

The following data must be captured for each post:

• Username
• Location (from a supplied list of Centrala areas)
• Time of observation
• Date of observation
• Bird (from a CTO-supplied list plus Other/Unknown)
• Primary activity (visit/feeding/nesting/Other)
• Duration of observation (in minutes)
• Free text comments
• Photographic image (optional; max 1.2 Megabytes in size; PNG or JPG only)

Centrala Regions

Erean Brunad Bylyn Docia Marend Pryn
Zord Yaean Frestin Stonyam Ryall Ruril
Keivia Tallan Adohad Obelyn Holmer Vertwall

CTO Bird Species

• Wood Pigeon
• House Sparrow
• Starling
• Blue Tit
• Blackbird
• Robin
• Goldfinch
• Magpie

Task 1

Before starting the development for the CEA, Luzo Okake, CEO of the studio, has asked you to prepare a briefing document describing the client-side and server-side technologies that could be used to build this website, accompanied by a basic design of the intended pages, their content, appearance, behaviour/functionality and linkage.

This process will help you to review and select the appropriate technologies and tooling to use for the project.

This document should cover:

• A description of the client-side technologies and components used as part of the proposed web solution for the CTO.
• A description of the server-side technologies and components used as part of the proposed web solution for the CTO.

Remember: You will need to have set up and configured a suitable development environment to create and test the website with help from your tutor if necessary.

A basic design (using manual or online tools) for the basic design of the CTO website.

Extension Activities:

To achieve a Merit, Luko wants you to:

• Differentiate, using suitable examples, the concepts of content, format, and behaviour in a sample web page.
• Demonstrate this using a plan for a sample page of the CTO website.

Learning Outcomes and Assessment Criteria

LO1 1.1, 1.2, 1.3, 1M1

Task 2

Once the technologies and overall design elements have been chosen, it is necessary to apply client-side principles to develop the CTO website.

Therefore, you implement the following elements using a combination of HTML, CSS, and client-side JavaScript:

• A landing page for the website, advertising the CTO and its mission, using sourced, copyright-free imagery. A navigation bar is also advised to link to…
• A user registration page.
• A user log-in page.
• A page that allows users to upload new posts with optional images.
• A page that displays all user posts (edit and delete buttons for the logged-in author), complete with a single search box. Note. pagination is not required at the moment.

Note: At the moment, these pages are not “wired” to the website’s server-side code, so, for example, a POST request of login details could be made, but they will not (as yet) be processed. Equally, button presses should trigger actions, e.g. edit/delete, but not perform them (yet). These are resolved once the server-side code is completed.

Extension Activities:

To achieve a Merit, Luko wants you to:

• Ensure that all HTML and CSS is validated against modern standards using appropriate online or offline tools.

To achieve a Distinction, Luko insists that you must:

• Change your client-side JavaScript to ensure it is obscured and protected from user modification (this will involve minification and uglification of the code).

Learning outcomes and assessment criteria

LO2 2.1, 2.2, 2.3, 2M1, 2D1

Task 3

Once the front-end has been created, it is necessary to create the backend database to store the user, message board and uploaded image data.

In addition, server-side functionality should be added that:

• Demonstrates the processing of POSTed data, e.g. authenticating login credentials (initially this may just be proof-of-concept using a hardcoded set of credentials, rather than a database lookup)
• Demonstrates the uploading of an image to a server’s local file system

Extension Activities:

To achieve a Merit, additional functionality must be achieved:

Demonstrate the use of server-side scripting to interact with the backend database previously created. This would include functionality such as:

• Inserting a new username and password upon successful user registration.
• Authenticating a user login by searching for a match in existing credentials.
• Updating a user’s post by posting changes and updating the database.
• Deleting a user’s post and removing the post (and uploaded image).

To achieve a Distinction, Luko asks you to:

• Evaluate your website for possible vulnerabilities that could be exploited by malicious users.

Learning Outcomes and Assessment Criteria

LO3 3.1, 3.2, 3M1, 3D1