Developing an Interactive Web-Based Bird Observation Platform for Centrala’s Urban Ecology

References

• Madani, R., & Zubair, F. (2021). Citizen science for biodiversity monitoring: Integrating technology and public engagement. Environmental Monitoring and Assessment, 193(5), 1–15. https://doi.org/10.1007/s10661-021-09093-2

• Zhang, J., & Liu, S. (2022). Developing responsive web applications using modern client-server frameworks. Journal of Web Engineering, 21(3), 241–256.

• Geoghegan, H., et al. (2020). Digital citizen science and environmental sustainability: Engaging publics in online data collection. Journal of Environmental Planning and Management, 63(10), 1781–1798. https://doi.org/10.1080/09640568.2020.1739898

• Kumar, R., & Singh, M. (2023). Secure web-based data systems: Design and implementation for public sector projects. International Journal of Computer Applications, 186(12), 25–33.

• Preece, J., & Bowser, A. (2019). Designing citizen science for engagement, usability and data quality. Human–Computer Interaction, 34(5–6), 495–534. https://doi.org/10.1080/07370024.2018.1471576

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.
You’ve been part of several creative and challenging projects, and this one offers the chance to combine community engagement with environmental awareness in a digital format.

The Centrala Environmental Agency (CEA) is currently working with the Centrala 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.
Such collaboration not only enhances ecological sustainability but also builds stronger public appreciation of biodiversity in modern urban life.

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 bird that visit the urban and suburban areas of the Centrala municipality.
Without accurate data, decision-making can become reactive instead of strategic, which is why this project is essential for evidence-based urban design.

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 move toward a digital platform also provides long-term scalability, lower costs, and increased community participation.

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.
Your development team now has the exciting opportunity to create a user-friendly, interactive web solution that promotes science, education, and environmental stewardship.

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

• Register as a member of the CTO message board

• Login 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 which 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.
Such insights can influence future conservation policies and provide valuable feedback loops for improving public health outcomes in Centrala.

To do this assignment, you will need to setup and configure a suitable development environment to create and test the website. Your tutor will support you with this. This will require a 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.
Working locally also gives you the flexibility to experiment and troubleshoot safely without affecting live data or public-facing pages.

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)

Capturing these data points ensures each submission is consistent and usable for both qualitative and quantitative analysis later on.

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 initial planning document will help ensure that both the technical and user-experience goals align from the very beginning.

This process will help you to review and select the appropriate technologies and tooling to use for the project.
Taking a strategic approach now will save development time and ensure the site is robust, scalable, and secure later.

This document should cover:

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

• A description of the server-side technologies and components used as part of the proposed web solution for 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.
Clear visual prototypes will make it easier to discuss layout, branding, and usability before full implementation.

Extension activities:
To achieve a Merit, Luko wants you to:

• Clearly 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.
This is the stage where creative front-end design meets logical coding practice, bringing ideas to life visually and interactively.

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 which displays all user posts (edit and delete buttons for the logged in author), complete with 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 actually perform them (yet). These are resolved once the server-side code is completed.
Such staging enables modular testing and gradual integration, ensuring fewer bugs and clearer debugging processes later.

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.
The database acts as the core engine for data persistence, allowing reliable and secure management of all site information.

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 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.

Performing vulnerability assessments will not only strengthen the final website but also demonstrate your professional awareness of cybersecurity standards.

Learning outcomes and assessment criteria
LO3 3.1, 3.2, 3M1, 3D1