By Shahabuddin Amerudin

Introduction

In today’s digital age, managing and accessing academic data efficiently is crucial for educational institutions. This article provides a comprehensive overview of the development of a web-based application designed to manage and display student final year project (Projek Sarjana Muda) data for the Bachelor of Science in Geoinformatics with Honours program at Universiti Teknologi Malaysia (UTM). The application was built using PHP, JavaScript, CSS, and AJAX, with data stored in JSON format. It was hosted on Hostinger and designed to be fast, responsive, and user-friendly.

Application link: https://dev.kstutm.com/psm

Project Objectives

The primary objective of this project was to develop a centralized platform for managing student final year project data, ensuring that it is easily accessible and well-organized. The system was designed to store and manage key project details, including student names, supervisors, project titles, and session years. A user-friendly interface was prioritized to provide a smooth experience for both general users and administrators. While the initial version focuses on core data management, future versions will include features such as analytics, enabling users to search for projects using keywords and analyze project distribution by session or supervisor. Additionally, the system incorporates administrative functions to allow authorized personnel to add, edit, and delete project records efficiently. The application was also designed with a responsive layout to ensure seamless access across both desktop and mobile devices while maintaining consistency with UTM’s branding guidelines.

Technologies Used

The application was developed using a combination of modern web technologies. The frontend was structured using HTML5, styled with CSS3 and Bootstrap 5 for a responsive and professional layout, and enhanced with JavaScript to facilitate dynamic content. AJAX was used for asynchronous data retrieval, ensuring smooth user interactions without page reloads. While analytics features will be incorporated in future versions, the current implementation primarily focuses on efficient data handling. The backend was built using PHP for server-side processing, with JSON as the primary data storage format. The application was deployed on Hostinger to ensure fast and reliable access. Additional tools such as Vis.js may be integrated in later updates to visualize supervisor-student networks.

Development Process

Planning and Requirements Gathering

The development process began with an in-depth planning phase to define the application’s purpose, key functionalities, and system requirements. A thorough analysis was conducted to identify the needs of different user groups, including students, academic staff, and administrators. The functional requirements included features such as a structured project database, search functionality, and administrative controls for data management. Non-functional requirements, such as system performance, security, and mobile responsiveness, were also taken into account. Given that the initial version would focus on core data management, analytics features were planned for future implementation to avoid unnecessary complexity at this stage. The planning phase also involved identifying constraints, such as the limitations of the hosting environment on Hostinger, which does not support Node.js, leading to the choice of PHP and JSON for backend development.

Design

The design phase focused on creating a clean, modern, and user-friendly interface that adheres to UTM’s branding guidelines. Bootstrap 5 was selected for its responsive design capabilities, ensuring that the application functions well on both desktop and mobile devices. The user interface (UI) was structured to allow easy navigation, with a simple yet effective layout for viewing and managing project data. The data structure was carefully planned to ensure efficient storage and retrieval. A JSON format was used to organize project records, including student names, supervisor details, project titles, session years, and keywords. The design also considered future scalability, allowing for the easy integration of additional features such as analytics and data visualization.

Implementation

The implementation phase involved the actual development of the application, starting with frontend development. HTML, CSS, and JavaScript were used to create the interface, while AJAX was integrated to allow real-time data retrieval and submission without requiring page reloads. The backend was built using PHP, enabling data processing, file handling, and interaction with JSON data storage. The application’s core functions, such as project listing, search capabilities, and administrator CRUD (Create, Read, Update, Delete) operations, were developed systematically. While analytics functionality was initially planned, it was decided that this feature would be turned off in the first version and introduced in future updates. Security measures, such as input validation and access control for administrators, were also implemented to ensure data integrity and prevent unauthorized modifications.

Testing

Once the core implementation was completed, the application underwent rigorous testing to ensure its stability, functionality, and user experience. Functional testing was conducted to verify that all key features, including project listing, searching, and data modification by administrators, worked as intended. The responsiveness of the application was tested across different devices and screen sizes to confirm that it provided a seamless user experience. Error handling mechanisms were evaluated to ensure that the system could manage invalid inputs and missing data gracefully. Additionally, security testing was carried out to prevent unauthorized access to administrative functions and to validate that all stored data was correctly retrieved without corruption. Since analytics features were disabled in this version, testing efforts were concentrated on core functionalities, ensuring a smooth and efficient user experience.

Deployment

The final step in the development process was deploying the application on Hostinger. Deployment involved configuring server settings, setting appropriate file permissions, and ensuring that the system was fully operational in a live environment. The application was tested post-deployment to confirm that all features functioned correctly on the hosting platform. Additional optimizations, such as caching mechanisms, were implemented to improve performance. Browser compatibility tests were conducted to ensure that the system worked well across different web browsers. With the first version successfully deployed, plans were made for future updates, including the integration of analytics functionalities and additional data visualization tools. The deployment process also involved documentation to assist administrators in managing and updating the system efficiently.

Conclusion

The development of this web-based application marks a significant step towards improving the management and accessibility of student final year project data. By leveraging modern web technologies, the application provides an efficient, user-friendly, and scalable platform tailored to the needs of students, supervisors, and administrators. The decision to focus on core functionalities in the initial version allows for a stable and reliable system while paving the way for future enhancements, such as analytics and data visualization. As the system evolves, it will continue to support data-driven decision-making, streamline administrative tasks, and enhance the overall user experience for the Geoinformatics program at UTM.