Untitled by grammarly General metrics 76,020 10,602 783 42 min 24 sec 1 hr 21 min characters words sentences reading time speaking time Score Writing Issues 99 This text scores better than 99% of all texts checked by Grammarly 9 Issues left Critical 9 Advanced Plagiarism This text hasn’t been checked for plagiarismReport: UntitledPage 1 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Writing Issues Unique Words 16% Measures vocabulary diversity by calculating the percentage of words used only once in your document unique words Rare Words 47% Measures depth of vocabulary by identifying words that are not among the 5,000 most common English words. rare words Word Length 5.8 Measures average word length characters per word Sentence Length 13.5 Measures average sentence length words per sentence 1 Correctness 1 Citation style options 1 Delivery 1 Potentially sensitive language 7 Clarity 7 Paragraph can be improvedReport: UntitledPage 2 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Untitled Chapter I INTRODUCTION Background of the Study In the modern web-based world, systems that aim to improve how information in educational institutions is managed, accessed, and shared must devote special attention to automation processes and to the effective presentation of information systems to achieve this (Malode et al., 2022). There has long been a yearbook tradition in schools where printed copies of students' memories, achievements, and significant incidents are prepared at the close of each academic year. However, despite their sentimental value, traditional printed yearbooks have downsides: high cost, limited accessibility, inefficiency, and limited interactivity (Malode et al., 2022). As printed yearbooks are quite expensive, they are not accessible to all students. They are also somewhat inflexible and cannot be updated once printed, limiting their long-term usability. Yearbooks are also prone to delays and late production, often released long after the end of the school year. 1 1Report: UntitledPage 3 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
The continuous involvement of technology has the choice to provide an effective and accessible solution. Digital Yearbook optimizes distribution, allowing users to access resources (Malode et al., 2022). The QR code enhances overall user learning and provides real-time access (Widanti et al., 2024). Although these developments exist, many schools still lack a central interactive system for handling publications. The available features do not include student profile information, social interactions (posts, reactions, and comments), or automatic notifications (Widanti et al., 2024). To overcome these problems, this proposes a Web-Based Interactive Digital Yearbook System with QR Code-Enabled Student Profiles to serve as a centralized platform for managing yearbook content, facilitate interactive features such as posts, comments, and memory sharing, and allow easy access to student profiles through embedded QR codes (Widanti et al., 2024). It includes an automatic email notification that alerts the users once the digital yearbook is officially published. This approach should improve accessibility, reduce costs and delays, and enhance total engagement (Malode et al., 2022). Statement of the Problem Traditional yearbook systems used in districts pose challenges related to accessibility, distribution, and user engagement: printed yearbooks are expensive, and not all students can afford them, yet production is labor- 1 1 1 1 1Report: UntitledPage 4 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
intensive, and distribution is often delayed. Yearbooks typically lack interactive features, and there is an inefficient way to manage and search for student information, with personnel tending toward disjointed systems in a non- strategic effort to track student development. Specifically, this study aims to: 1. Limited access and delayed availability of yearbooks, printed every year, are an expensive business and not readily available to all students. Manual trafficking of yearbooks will lead to delays, making it less relevant and timely. 2. Lack of a centralized form of yearbook management with no decent form of managing student profiles, features for organizing content, etc., and the publication process resulting in messy data and time-consuming operations. 3. Traditional yearbooks lack interactivity, such as digital profiles, socializing, memory access, sharing, and QR codes. Objective of the Study The general objective of this study is to design and develop a Web-Based Interactive Digital Yearbook System with QR Code-Enabled Graduating Student Profiles that enhances accessibility, improves user engagement, and provides an efficient and centralized platform for managing and publishing digital yearbook content.Report: UntitledPage 5 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Specifically, the study aims: 1. To design a centralized digital yearbook management system with registrar-based validation, secure authentication, and role-based access control for administrators, faculty, and graduating students. 2. To develop interactive features such as social interaction and memory sharing, an interactive profile preview, an accessible digital yearbook viewing interface for students, and a QR Code-enabled student profile. 3. To integrate a theme-based design like Canva-inspired and drag-and- drop layout customization system with reusable templates and automatically layout arrangement through colors, fonts, decorations, a cloud-based image organizer using external APIs for better handling of media and creation of interactive flipbooks and downloadable PDF output, and providing automated user notifications 4. To evaluate it using the ISO/IEC 25010 Software Quality Model. Significance of the Study The Web-Based Interactive Digital Yearbook System with QR Code-Enabled Student Profiles is a concisely named system that provides a centralized method for efficiently managing and publishing digital yearbook content. It is designed to satisfy the objectives of this study by implementing secure login and role-based access features, interactive user features, a Canva-inspired design system for customizable, dynamic yearbook page layouts, efficient management and processing of images used in yearbook pages, and an automatic publishing and notification system.Report: UntitledPage 6 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
This study is beneficial to the following stakeholders: Graduating Students The system allows graduating students safe access to their digital yearbook. They can connect to their profile on our website anytime, anywhere. All student profiles are QR code-enabled, so students can easily access their information and yearbook page. Posts, comments, and reactions are included to enable students to interact online and with their teachers, friends, and batchmates. Our back-end simplifies image uploading and processing, providing a consistent, high-quality profile experience. Automated reminders and announcements on the platform prompt students to complete their profiles and upload memories, ensuring every student is included in the digital yearbook and the flipbook format for viewing. School Administration The system provides admins with secure access to their digital yearbook. The system supports administrators in managing students, content, and yearbook publication in a central hub with role-based access control and registrar-based verification. Batch image upload, along with a Canva-like theme-based design system, drag-and-drop customization, and template management, means the consistent, flexible, organized approach to yearbook layout is just a click away. The image-processing capabilities use automated functions to enhance uploaded student photos. Our automated digital yearbook-publishing process generates interactive flipbooks and PDFs and sends email notifications when yearbooks are published. FacultyReport: UntitledPage 7 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
The system allows faculty to access their digital yearbook safely. Faculty members contribute messages and content through a convenient mechanism that forms part of the overall yearbook layout. They can also interact through comments and reactions, receiving encouragement for their meaningful participation in the digital yearbook. Alumni The system gives alumni lifetime access to their digital yearbook. Access your digital student records and memories for years to come using your QR code- enabled profile, and never lose touch with your school again. Scope and Delimitation Scope The study is limited in its integration with educational institutions. The system is only to provide a centralized and interactive platform to manage and publish digital yearbooks for the graduating students and faculty, and the following are: Admin: • Can log in using email and password • Can manage students, faculty, and the content of the yearbook • Can manage role-based access control and registrar-based validation • Can upload and organize student images through batch image upload functionality • Can manage and coordinate, including the student images provided by the photographers for the yearbook image • Can process the images using the cloud-based automated enhancement features for a uniform layoutReport: UntitledPage 8 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
• Can manage yearbook theme-based and layouts through a Canva- inspired design system with drag-and-drop customization and reusable templates • Can manage yearbook content, including student memories and messages • Can approve or reject student- and faculty-submitted messages and memory images. • Can generate and publish the final digital yearbook in flipbook format • Can send automated email notifications upon publication of the digital yearbook Graduating Student: • Can log in using school email authentication • Can manage personal profiles (nickname, motto, and profile picture) • Can access the published digital yearbook through the web platform • Can scan QR code-enabled student profiles for instant access to information • Can search and access other student profiles within the system • Can create posts, comments, and reactions • Can submit memories such as messages, photos, for yearbook inclusion • Can receive email notifications for publication in the digital yearbook Faculty: • Can log in using email and password • Can submit official messages and contributions for inclusion in the yearbookReport: UntitledPage 9 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
• Can view the published digital yearbook • Can participate in social interaction features such as posts, comments, and reactions. • Can receive email notifications for publication in the digital yearbook • Can access student profiles through the scan of the QR code, functional, and manual search browsing The system includes key features such as QR code-enabled student profile access, batch image upload with automated image processing, image enhancement capabilities, social interaction features like posts, comments, and reactions, a Canva-inspired theme-based design system, automated email notifications, and a PDF and flipbook export for digital yearbook publication. Delimitation • The system is strictly focused on digital yearbook management and does not integrate with other institutional systems, such as enrollment, grading, or student information systems. • The system is designed only for administrators, faculty, and graduating students. • The QR code functionality is implemented exclusively for graduating student profiles and is not available for faculty profiles to maintain system scope. • Image processing features are limited to resizing, cropping, formatting, and quality enhancement, and do not include advanced capabilities such as facial recognition or fully automated image generation. • The system includes a QR code and notifications and requires a stable internet connection.Report: UntitledPage 10 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
• The system does not include financial processes such as printing costs, payment systems, or budgeting for yearbook production. • The system is developed as a web-based application only and does not include a dedicated mobile application version. • System performance may vary depending on device specifications and internet connection speed. Time and Place of the Study The study will be conducted at Agusan del Sur State University (ADSSU), located in San Teodoro, Bunawan, Agusan del Sur. The study will be carried out over a period of six (5) months, from August 2026 to December 2026. Conceptual Framework of the Study Figure 1. Conceptual Framework of the Web-Based Digital Yearbook Figure 1 presents the framework of this study using the Input–Process–Output (IPO) model, illustrating how the proposed system transforms raw data into an interactive digital yearbook through structured processing. The Input refers to everything necessary for a system to carry out its function. StudentReport: UntitledPage 11 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
information, such as name, department, batch, nickname, biography, and motto; official student photograph; memories submitted to the system, such as messages, photos, and events; official messages; and the official list of graduating students provided by the registrar, are included. Inputs. The Process phase explains how the intended system will process and modify input data. User authentication via Google OAuth and school email verification will be followed by profile management of the student's personal data. An auto- generated, unique QR code for each student profile will enable them to access their digital yearbook records quickly. Images uploaded to the platform will be batch-processed and enhanced, resized, cropped, formatted, and quality-processed. They. They will be curated with a Canva-inspired theme aesthetic and design system that employs structured layouts and design templates to enable yearbook creation. The system handles posts, comments, reactions, and memory submissions from participants in social interactions that the platform can access. Posts are approved or moderated before appearing in the yearbook. The faculty users will be assigned to upload materials to the final yearbook and approve or submit final records transfers. All of this will go into the yearbook generation module and be assembled into digital pages. The goal is to produce a digital yearbook as a flipbook and as a downloadable PDF. The system sends users an automated email upon completion of printing. Operational Definition of Terms Digital Yearbook System – A web-based platform developed in this study that manages, organizes, designs, and publishes yearbook content in a centralizedReport: UntitledPage 12 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
and interactive digital format using customizable themes and structured layouts. QR Code-Enabled Student Profile – A system feature that generates a unique QR code for each graduating student, allowing instant access to their digital profile when scanned using a mobile device. Student Profile – A digital record containing student information such as full name, nickname, department, batch, biography, motto, profile photo, and relating yearbook content. Image Processing Feature – A system function that enhances and standardizes uploaded images through resizing, cropping, formatting, and quality designing to ensure equal presentation in the digital yearbook. Memory Submission – A feature that allows students to submit messages, photos, and experiences for inclusion in the yearbook, subject to administrator review and approval. Social Interaction – A system feature that enables users to create posts, comments, and reactions to encourage engagement within the digital yearbook platform. Yearbook Publication – The process of finalizing, compiling, and releasing the completed digital yearbook in interactive flipbook and downloadable PDF formats. Centralized Yearbook Management – A system capability that allows administrators to manage student records, images, themes, layouts, and content within a single integration platform. PDF Export – A system feature that converted the completed digital yearbook into a downloadable and printable PDF file format. Automated Notification System – A feature that sends email notifications to users once the digital yearbook has been officially published.Report: UntitledPage 13 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
User Authentication – The process of verifying users through Google OAuth and school email validation before granting access to the system. Theme-Based Design Studio (Canva-Inspired System) – A system module that allows administrators to design and customize yearbook layouts using drag- and-drop tools, template-based design components, and visual editing features. Pre-Designed Template System – A collection of ready-made layout designs used to speed up and standardize yearbook page creation. Custom Theme Creation – A feature that allows administrators to create and configure yearbook themes by defining layouts, styles, and page structures. Shape and Design Elements Tool – A system feature that enables the insertion of shapes, frames, and graphical elements to enhance the visual design of yearbook pages. Chapter II REVIEW OF RELATED LITERATURE Digital Yearbook Systems and Interactive PlatformsReport: UntitledPage 14 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
The study, Pages to Screen: Digitalized Yearbook with Chatbox and Gallery, focuses on converting annual school paper yearbooks into an interactive digital medium. Their system utilizes chat, a media gallery, and an alum walkthrough to enable students, faculty, and alums to communicate more effectively and engage with one another. The study found that traditional yearbooks are expensive to produce, not readily available, and less engaging to readers. They develop a web-based digital yearbook that supports centralized content management and interactive user experience. They gleaned that interactive features increase accessibility, promote communication, and enhance user engagement. This study is relevant to our Digital Yearbook System because it promotes interactive web-based platforms. Like the proposed system, it focuses on multimedia and interaction. The proposed system, though, enhances these features by providing students with QR code-enabled profiles, a theme-based design studio, and image enhancement (Caay et al., 2024). Development of Online College Yearbook Systems The study focuses on developing a web-based platform to collect and manage students' accomplishments, institutions' events, and educational progress. PHP and MySQL are used to manage and organize yearbook information within the system. The study addresses the ineffectiveness of producing a yearbook using the old method, which involves manual processes, data inconsistencies, and limited accessibility. To solve this problem, the researchers created a centralized web-based system that supports real-time updating and organized data management. The study shows that a digital platform improves 1Report: UntitledPage 15 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
administrative efficiency, lessens errors, and increases accessibility. This study relates to the proposed Digital Yearbook System because it supports centralized data management and is digital. Our proposed system, however, builds upon this by employing QR code-enabled student profiles, social interaction options, a theme-based design studio, and image enhancement capabilities to improve system functionality and the user experience (Malode et al., 2022). QR Code in Educational Systems The QR codes enable education systems to provide access to links, documents, or other digital content. The QR codes allow one to learn about the possibility of the digital becoming physical, so that one can retrieve the information. Shows that the provision of information has limitations, including slower access to resources, limited interactivity, and reliance on print materials. QR codes address these issues by allowing access to content on a phone, tablet, or laptop. Recommend that QR codes improve interaction and provide information. This is helping the proposed study (Deineko et al., 2022). Web-Based Centralized Systems for Academic Performance Tracking The integration of student records, such as academic grades, attendance, and performance reports, into a centralized web-based system to improve the organization, accessibility, and efficiency of managing academic data is examined. The study identified the compartmentalization of student information, limited access, and manual dataset processing as challenges facing traditional systems for monitoring student performance, as well as the anticipated automated system. The research integrated student information into a centralized system that provides easier, real-time access to academic 1 1Report: UntitledPage 16 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
records for students and lecturers, and found that this leads to information being clear, accurate, and readily available to managers for optimal decision- making. This study is relevant to our proposed Digital Yearbook System, as it adopts a model that incorporates students' information into a central repository. At the same time, we take things a bit further via QR codes and interactivity (Karpe et al., 2022). Role-Based Access Control for Secure Educational Systems The study of enhancing the security of the educational system on the web through a Role-Based Access Control mechanism. Users are assigned specific permissions based on their roles, such as administrator, teacher, and student, to ensure controlled access to the system's resources. Multi-factor authentication and cryptographic techniques are also used to protect the system and to reveal weaknesses in conventional educational systems, such as weak access controls that lead to unauthorized disclosure and data breaches. Role-based access control, multi-factor authentication, and digital signature algorithms are used for authentication, access control, and information transmission over the web. The security analysis is carried out using a tool against common cyberattacks and shows progress. This paper is relevant to the proposed Digital Yearbook System, as it supports the role-based access control component, whereby admin, faculty, and student access features and information accordingly (Kabier et al., 2023). Measuring User Engagement in Educational Platforms 1 1Report: UntitledPage 17 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
The impact of user engagement on digital learning platforms was examined by comparing engagement in interactive and passive environments within a digital education platform context. Interactive systems implement post-teaching engagement features such as quizzes, multimedia, and feedback, while passive systems do not. The research highlights low student engagement as a problem in the design of online learning systems, leading to reduced participation and motivation and poorer learning outcomes. In this case, a comparative approach was adopted to study engagement by examining task completion, learning behavior, time spent, and user feedback. The research found that interactive learning environments tend to increase engagement and motivation and improve academic performance. The researchers conducted comparable studies, reinforcing the importance of gamified and interactive features in increasing user engagement. The Digital Yearbook System may benefit from these engagement techniques, as it incorporates features such as comments, reactions, and social interaction (Talebi et al., 2022). Academic Management through a Web-Based Student Profile System The study investigates the creation of a web-based student profile system developed to improve the organization of academic records maintained by schools; consolidating all relevant information about students within one application, such as personal information, attendance, final scores, examination results, and ensuring the organization of these information throughout its entirety is conducted in a more orderly and efficient manner through the use of database systems and web technologies. The study highlighted how inefficient traditional organization and management of academic records are, time-consuming and redundant, prone to errors if conducted via paper and pen or semi-digital. To address these issues, the 1Report: UntitledPage 18 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
researchers created a platform using web-based applications that centers on student profiling, academic record organization and management, and attendance tracking, and also supports organization and communication, and implements role-based access control to ensure secure and appropriate data access. It was discovered that the data had improved accuracy. At the same time, the administrative task became easier and less of a headache, leading to a proportionate increase in the efficiency of academic management systems. This study relates to and is relevant to the proposed Digital Yearbook System by aiding the centralization of student data management. The study also stores student information in a central database; however, it further enhances the experience through QR code-enabled profiles, interactive features, and theme- based customization (Lavhe et al., 2025). Supporting Social Interactions to Improve Learning Outcomes in Online Learning Platforms This study investigates the impact of social interaction on improving learner engagement and outcomes in massive open online courses (MOOCs). It establishes that social features, including discussion forums, group activities, and peer communication, support digital students in collaborating and sharing knowledge in ways that enhance the teaching and learning process. The study cites help-seeking as a predictor of success on online learning platforms. Also, most learners get discouraged and drop out of a course due to a lack of meaningful rapport with others, leading to apathy and a failure to engage with the course's required work. To address this, social interaction strategies, such as peer communication, learning groups, and discussion forums that promote active participation, are being investigated. The findings revealed that social interaction positively influences learner engagement, motivation, and learning 1Report: UntitledPage 19 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
outcomes. This study is relevant to the proposed Digital Yearbook System because it advocates incorporating social interaction features into digital platforms. Similar to this study, our system also incorporates posts, comments, reactions, and messaging (Loh et al., 2024). Ethical Considerations in Cloud Computing The study covers the ethical implications of cloud computing, particularly data ownership, data privacy, data sovereignty, and regulatory compliance. Cloud computing offers many benefits, such as flexibility, scalability, and efficiency, as well as the ability to store and process information over the internet; however, there are concerns about how user data is handled on someone else's server. There are ethical challenges, such as unauthorized access and data misuse, because responsibility for data is unclear, as the storage disks rented by consumers may be located around the world. Because of these challenges, ethical cloud computing involves protecting data, obtaining appropriate consent for data use, complying with laws and regulations, and ensuring the quality assurance of technology and infrastructure. The study also emphasizes security control, not just as a protection for sensitive data but also as a way to earn customer trust. This study relates to the proposed digital yearbook in that the latter will be cloud-based and will need to handle data securely. They both handle sensitive data that must be handled properly and ethically (Mahida, 2022). Web Application Authentication Using Google OAuth This study focuses on designing a web application that uses secure authentication via Google OAuth and is built with Node.js, Express, and MongoDB. Users log in with their Google accounts, enabling secure authentication via cloud-based storage and modern web features. This work 1 1Report: UntitledPage 20 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
discusses limitations of traditional authentication systems, such as the need for users to manually create accounts and weak password security that can be compromised, exposing the system to unauthorized access and data breaches, and affecting user convenience and the system's effective operation. Overcoming these challenges, Google OAuth is used to secure authentication, eliminate the need to manage credentials manually, improve the security and scalability of their systems, and provide a better user experience by offering cloud services and modern frameworks. This work shows that Google OAuth will help strengthen authentication processes and improve the efficiency of its system. This study is used to design the proposed Digital Yearbook System, which will allow secure authentication via Google OAuth and verify that only authorized users can log in to the System (Prakash et al., 2024). The Architecture of Visual Design in Modern Web Applications The study examines the need for visual design architecture to enhance user engagement and interaction through design in modern web applications. The authors also lay out how they implement components of a design system through structured solutions such as ITCSS, BEM naming conventions, and SASS preprocessing to create a scalable and maintainable user interface architecture. They introduce the concept of skinning, allowing multiple themes, such as light and dark modes and accessibility-focused designs. The study uncovers limitations in traditional UI design approaches, including a failure to scale and shortcomings in consistently meeting the needs of designers and users, resulting in inconsistent interfaces and limited customization in complex web systems. The study aimed to highlight the importance of a structured visual design architecture to improve scalability, maintainability, and design consistency when introducing multiple themes and layouts. The highlighted 1Report: UntitledPage 21 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
findings indicate that structured design allows for significantly better usability and visual consistency in web applications. This study is relevant to our proposed Digital Yearbook System, as it supports the implementation of a theme-based design system that enables customization. Themes & layouts while ensuring a consistent, flexible, and user-friendly interface (Sabol et al., 2022). Role of Digital Learning Platforms in Enhancing Student Engagement These studies improve the interaction with learning in the current situation. They find a gap in traditional learning: the important issues the content can raise lead to a lack of motivation. Shows that the platform is a flexible, engaging, and learning environment for using digital content and real opinions. Digital integration of interactive and cooperative technologies is used to address the needs of participants with learning difficulties. This study relates to our proposed system, which uses interactive features, such as handling multimedia content and social interaction materials, to improve engagement (Bajaj, 2024). Web-Based Alumni Networking and Secure Communication Systems This study aims to create a safe alum system to improve interaction among graduates. How important is a network for career growth and support? They integrate a web-based system with secure authentication, messaging, and sharing features to deal with issues. The study lacks a centralized system, which creates a major problem and hinders interaction. This interactivity improved alum engagement and strengthened institutional relationships. Their work adapts to the proposed digital yearbook system primarily through organizational support for communication features, such as uploading, 1 1Report: UntitledPage 22 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
messaging, and user interaction, thereby improving engagement on the platform (Kumar et al., 2023). Secure Authentication Schemes in Cloud Computing with a Glimpse of Artificial Neural Networks The work concentrates on cloud computing security, secure Authentication schemes, and data protection. They explain that the growth of cloud computing relies on the availability of SaaS, PaaS, and IaaS models, providing highly scalable and flexible services. Since sensitive information is at stake daily and authentication is the only mechanism that will come to the rescue, the persistent threat of unauthorized access in the cloud is one of the obvious issues they discovered in their research. Attackers can access vital user data through weak authentication schemes, leading to a lack of trust policies and reducing user reliability, including distributed denial-of-service attacks and the imminent threat of data breaches, to name a few. They reviewed authentication schemes and noted the use of Artificial Neural Networks to enhance cloud security and demonstrate robust security implementations, and argued that intelligent approaches, coupled with secure authentication, would boost user verification and data protection. This study is relevant to our work because it supports secure cloud-based authentication and data protection for sensitive information, such as our digital Yearbooks, as well as the management of students' information and their shared digital media files (Sheik et al., 2023). QR Code-Based Student Portals and Digital School Management Systems The study examines a web-based student portal that incorporates QR code technology to assist in managing school processes, such as attendance and access to information. It identifies inefficiencies in manual systems, including 1 1Report: UntitledPage 23 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
delays, errors, and poor data management. To mitigate these issues, a QR- enabled student portal with a mobile device access component and real-time access features has been developed, with the findings showing. The system increased overall accuracy, efficiency, and communication. This study influences the proposed Digital Yearbook System by advocating QR code- enabled student profiles to enable fast, efficient access to information. (Alyora & Aji, 2026). UI Design and Automated Theme Generation in Web Systems The study discusses automatic User Interface (UI) theme generation via color extraction from images to improve design consistency in Web Applications. They found that UI designed manually is usually inconsistent color-wise and is very tedious work; an automated system is responsible for generating UI themes based on image color extraction. The results show improved consistency. This paper relates to our proposed system, the Digital Yearbook System, since a theme-based design studio helps provide customizable and consistent interfaces. (Weingerl, 2024). Secure QR Code Systems for Personal Information Protection Using Multi- Layer Encryption The research aimed at improving the security of QR codes by proposing a multi- layer encryption technique to protect users' private and sensitive information. Sensitive information is exposed in a traditional QR code system when decoded by other users. Unauthenticated users can also modify the information embedded in the QR code in traditional QR code systems, which is a potential threat. These issues are addressed by developing a multi-layer encryption system on QR code data. The experimentation results show improvements inReport: UntitledPage 24 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
both data protection and system reliability. The work relates to the proposed Digital Yearbook System, as it ensures the protection of students' personal data using QR codes (Dallal & Al Mukhtar, 2023). Scalable Deployment of React Apps using Serverless Architecture The study examines techniques and skills to improve the scalability and performance of React. JS-based React. JS-based web apps using a serverless approach. Saying that cloud platforms like Vercel automatically scale applications as per demand, saving human effort and resources, and speed up content delivery using a global CDN, and also provide easy continuous deployment integrated with GitHub. The existing limits of traditional server- based systems have problems: they're pricey and cause delays that slow load times. They then integrate deployment using Vercel for React development. They improved deployment speed and results (Kumar et al., 2025). Digital Technologies and Gamification in Education This study by Zhukova et al. (2023) reports that the declining effectiveness of traditional learning methods has reduced motivation, engagement, and learning outcomes. The researchers solved the problem by applying gamification, using techniques such as rewards and instituting more interaction- and activity-based learning. The scientists demonstrated that engagement and motivation would improve, as would knowledge retention. Advances in the use of technology in education represent a shift away from traditional teaching toward more interactive approaches (Zhukova et al., 2023). UI/UX Design of Educational Online Courses 1 1 1Report: UntitledPage 25 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
The complex interface, unclear navigation, and lack of user-centered design led to user disappointment and reduced interactivity. The design makes learning helpful, with a good online system that puts the user first. Students will grow in a system that shows clarity, offers simple navigation steps, and teaches them what they need to know. We will apply user-centered design principles to improve users' understanding of UI/UX and the system's navigation. The best design improves the user experience, significantly enhancing user satisfaction, performance, and engagement with the system. This research applies to our proposed system, from UI/UX development that uses navigation to interaction (Vlasenko et al., 2022). Chapter III METHODOLOGY Research Design The study will apply the Agile Software Development Model as the primary methodology for designing and developing a Web-Based Interactive Digital Yearbook System with a QR Code-Enabled Student Profile. Agile is an iterative, adaptable approach that emphasizes collaboration, adaptability, and 1Report: UntitledPage 26 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
continuous improvement, which aligns well with interactive projects and step- by-step requirements. Software Process Model Figure 2. Software Process Model The system enables user-driven development of ways and affords continuous iteration and enhancement, as change is expected, and includes unique features such as QR code-friendly profiles, social engagement, and a memory submission feature for photos and messages, which will be developed. The system permits researchers to update their responses to stakeholder feedback, which students, faculty, and administrators approve. Through testing and improvements, the system is a reliable, efficient, and flexible platform for widespread use. Planning Phase During the planning stage, the first step researchers take is to conduct interviews and collect information from administrators, graduating students, and faculty. To handle the problem of the traditional yearbook printing and the delayed publishing of the yearbook. The information collected revealed specific issues in data collection, processing of profile information, processing ofReport: UntitledPage 27 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
yearbook design customization, content arrangement, and the accessibility of yearbook records. Based on this information, thoughts were made into functional and non-functional requirements of the proposed study, the Web- Based Interactive Digital Yearbook System with QR Code-Enabled Student Profile. Secure user authentication, registrar-based student verification, role- based access control, QR code-enabled student profiles, interactive memory- sharing features, and digital yearbook publishing were the most important functionalities to be specified. Given these issues, the system will define the project scope, system objectives, development schedule, and required resources. The above technique ensures that the proposed system will effectively meet the needs of administrators, faculty members, and students. Requirement Phase Requirements Specification At this phase, the researchers collaborated with stakeholders to identify and understand the system's functional and non-functional requirements. The stakeholders, in this case, are students, faculty members, and system administrators. Data are collected and evaluated to determine the features and behaviors the system should have to achieve the main purpose of developing an interactive, user-friendly, and efficient Digital Yearbook System. User Requirements Administrator • Manage user accounts with students and faculty with more secure authentication and role-based access control.Report: UntitledPage 28 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
• Upload and maintain the official list of graduating students and faculty for system validation. • Manage image processing of student photos, including batch uploads and automated enhancement. • Create and apply yearbook themes using a Canva-inspired Theme-Based Design Studio with the templates and customizable layouts. • Manage yearbook content, such as messages and memory pages. • Review and approve or reject submissions. • Publish the final digital yearbook with the automated email notifications. • In addition, sent automated reminders and announcements to guide students in completing their profiles and submitting memories, ensuring full participation in the digital yearbook process. Student • Log in securely using Google OAuth authentication • Manage personal profile (name, nickname, department, motto) • View the published digital yearbook • Interact through posts, comments, and reactions • Submit memories such as photos and messages for yearbook inclusion • Access profile using a QR code-enabled student profile • Receive notifications when the yearbook is published • Receive automated reminders and announcements to complete profiles and submit memories Faculty • Log in securely using school email authenticationReport: UntitledPage 29 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
• Access the system with role-based permissions • Submit official messages for yearbook inclusion • View submitted content and the published digital yearbook • Interact through posts, comments, and reactions • Receive notifications regarding yearbook updates and publication • Receive announcements related to system participation and submission deadlines Functional Requirements Operational Environment The individual systems are server-based and require internet connectivity to ensure real-time operation for authentication, profile management, memory submission, QR code access, and ultimately, yearbook publishing. It also strives to make sure that the services are reliable and always available. System Interface The system should provide a responsive and user-friendly graphical user interface (GUI) for administrators, students, and faculty members. This includes responsive dashboards, navigation menus, profile management modules, notification panels, memory submission forms, QR code access features, and digital yearbook viewing pages, facilitating intuitive user interactions for all roles. Communication InterfaceReport: UntitledPage 30 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
For communication, assume internet-based interaction protocols between ourselves, the web server, and possibly others. Use of IAM services for authentication and external services for email and publication notifications. Implementation of HTTPS. All communications shall be conducted using encrypted channels. Software Interface The system's user interface is built with various software tools, frameworks, and APIs. Frontend and back-end web development frameworks are used for user interface design, API requests, and other server-side activities. A relational database management system is used to store user and yearbook content. Authentication APIs for login, QR code generation libraries for student profile identification, and cloud-based image processing services are used for image upload, storage, and fixation. Hardware Interface The server will provide web hosting, database storage, handle image manipulation, and ensure access for multiple users. The hardware environment needs to afford adequate processing power, memory resources, storage, and access to a reliable network. Non-Functional Requirements Performance • The system will load pages within 3–5 seconds under normal operating conditions. • The system shall support multiple users simultaneously without affecting performance.Report: UntitledPage 31 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
• The system shall efficiently handle image uploads, image processing, QR code generation, and theme rendering to ensure smooth and responsive performance. Security • The system shall restrict access to the users with valid institutional email accounts only. • The system shall protect user data from unauthorized access. • The system shall ensure secure storage and transmission of the user information. • The system shall validate the users against registrar records before entering system access. Reliability • The system shall function consistently without errors during normal operations. • The system shall ensure accurate storage and retrieval of student data and the yearbook content. • The system shall maintain data integrity during uploads, submissions, image processing, and publishing. Operability • The system shall be easy to use for administrators, students, and faculty members. • The system interface will allow users to navigate features with minimal training. MaintainabilityReport: UntitledPage 32 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
• The system shall allow updates and modifications without affecting the core functions. • The system code structure shall be organized to support easy maintenance and debugging. Scalability • The system shall support an increasing number of users and data over time. • The system shall allow future integration of additional features and enhancements. Availability • The system shall be accessible at least 99% of the time. • The system shall minimize downtime during maintenance or updates. • The system shall ensure continuous access to the published yearbooks and QR profile pages. Delivery • The system is easy to use and accessible on web platforms once deployed. • The system needs to be clear and detailed, with a correct and complete document and step-by-step guides. • The system should support PDF generation and the online flipbook format.Report: UntitledPage 33 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Software and Hardware Requirements The Web-Based Interactive Digital Yearbook System with QR Code-Enabled Student Profiles requires specific software tools, frameworks, and hardware components to support development, deployment, security, and performance. Software Development Tools Table 19. Software Requirements Operating System Server hosting Windows or Linux Development and Access Windows 10/11 or macOS – For client access and development. Frameworks & Development Tools Frontend Development React.js – For responsive and interactive UI development. Back-End Development Tools System API Node.js with Express.js – For handling API requests and server-side logic. Authentication API Image ProcessingReport: UntitledPage 34 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Theme Design QR Code System Database Google OAuth API – For secure login using school email accounts. Cloud-based image handling service (e.g., Cloudinary) for image upload, resizing, cropping, optimization, and storage Internal Canva-inspired theme management system with template-based layout customization and drag-and-drop design tools Database Management QR Code Generator Stored data. Table 20. Hardware Requirements Deployment Server Specifications Processor: Intel Xeon or AMD Ryzen 5 (or above) RAM: 8GB or above Storage: 256GB SSD (or above)Report: UntitledPage 35 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Stable internet. Client Devices End-Users Desktop or Laptop Android or iOS can scan QR codes. Gantt ChartReport: UntitledPage 36 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Figure 3. Timeline View Work Breakdown Structures The Work Breakdown Structure of the Web-Based Interactive Digital Yearbook System with QR code-enabled Student Profiles. It illustrates how the budget is allocated across phases and the specific activities the researchers must perform to develop the system. These phases include planning, requirements gathering, system and software design, development, testing, and deployment.Report: UntitledPage 37 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Figure 4. Work Breakdown Structure Table 21. Project Cost-Benefit Analysis 2026 2027 2028 2029 2030 Total Benefits Reduced Mass Printing Cost 25,000.00 27,500.00 30,250.00 33,275.00 36,602.50 152,627.50 Improved Accessibility 10,000.00 11,000.00 12,100.00 13,310.00 14,641.00 61,051.00 Digital Efficiency 8,000.00 8,800.00 9,680.00 10,648.00 11,712.80 48,840.80 Total Benefits 43,000.00 47,300.00 52,030.00 57,233.00 62,956.30 262,519.30 Development Cost Modem (Internet) 2,000.00 0 0 0 0 0 Laptop 30,000.00 0 0 0 0 0 Flash Drive 16GB 500.00 0 0 0 0 0Report: UntitledPage 38 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Documentation & Printing 10,000.00 0 0 0 0 0 Total Development Cost 42,500.00 0 0 0 0 0 Operational Cost Internet Subscription 12,000.00 12,000.00 12,000.00 12,000.00 12,000.00 60,000.00 Electricity Consumption 6,000.00 6,600.00 7,260.00 7,986.00 8,784.60 36,630.60 System Maintenance 5,000.00 5,000.00 5,000.00 5,000.00 5,000.00 25,000.00 Total Operational Cost 23,000.00 23,600.00 24,260.00 24,986.00 25,784.60 121,630.60 Total Cost 65,500.00 23,600.00 24,260.00 24,986.00 25,784.60 164,130.60 Project cost is the expected expense for creating and installing the Web-Based Interactive Digital Yearbook System. Including Hardware Cost, Internet Setup Cost, and Documentation Cost, we estimate the total development cost at ₱42,500.00. There are operational costs, which comprise internet usage, electricity consumption, and system maintenance to keep the system available. Conversely, the system can avail of benefits such as mass-printing cost- cutting, additional web and QR code features, increased accessibility, and digital efficiency, proving that it is more cost-effective to operate on a per-year basis than the traditional printed yearbook.Report: UntitledPage 39 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Table 22. Risk Management Risk Description Level of Possibility Strategy Status System Downtime: Temporary unavailability of the system. Medium: Conduct regular maintenance and server monitoring Ongoing Database Failure, Loss, or Corruption of System Data. Implement regular database backup and recovery mechanisms. Ongoing Login Issues: Problems with Google authentication. Medium: Ensure proper API configuration and thorough testing. Ongoing Poor Image Quality Uploaded photos may be of low quality Medium Apply image validation, resizing, and enhancement before inclusion in layouts. Ongoing User Unfamiliarity QR Code Access ErrorsReport: UntitledPage 40 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Data Validation Errors: Users may not fully understand how to use the system. QR codes may fail to load or incorrectly link to student profiles. Incorrect or incomplete registrar data may affect login and role assignment. MediumReport: UntitledPage 41 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Medium: Provide user guides, tutorials, and training sessions Validate QR code generation and ensure proper linking to profile routes with testing Implement data validation checks during upload and verification processes. Pending. OngoingReport: UntitledPage 42 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Ongoing The risks that might affect the system include system downtime, database failure, inability to contact Google via Google OAuth, low-quality pictures, users unfamiliar with the system, inability to access the QR code, and inability to validate data from registrar records. To avoid this life-threatening risk, preventive measures would include monitoring for server and database failures and performing preventive maintenance. Google authentication services would be properly configured and thoroughly tested to prevent hacking by using single sign-on access. The QR code would be validated to ensure that the profile is accessed accurately in the system. Image processing techniques would be applied to the pictures to improve their quality, and guides and tutorials would help users become familiar with the system. Data validation and monitoring by the admin would help the system run faster and more accurately. Design Phase The design phase of the web-based interactive digital yearbook system with QR code-enabled student profiles focuses on creating a flexible, user-orientedReport: UntitledPage 43 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
system architecture that will make it easier to interact and enhance the digital yearbook's capabilities. The structure of the system includes core modules such as user authentication, role-based access, and user management, QR code generation for each graduating student's profile, social interaction (posts, comments, reactions), memory submission, theme-based design customization, viewing information on hover, and digital yearbook publishing in flipbook format. These modules are organized to ensure smooth interaction among graduating students, faculty, administrators, and the system database. This phase defines the overall structure of the system, the interactions between modules, and the flow of data. The system is working efficiently. Overall, the architecture is designed to ensure a layered structure for scalability, maintainability, and secure communication between components, enabling the smooth and immediate operation of the digital yearbook system. Figure 5. Context Diagram of the System The context diagram describes the system's operating environment and the external entities that interact with it. The administrator creates user accounts, uploads registrar data, registers and verifies users, manages yearbook contents, styles the yearbook using Design Studio, and publishes the digital yearbook. Students interact with the system using their verified school email accounts, manage their profiles, create posts, submit their memories to the yearbook, browse the published yearbook, and access their profiles via QR codes. The faculty also interacts with the system using their verified school email account, creates posts, submits their official messages to the yearbook, and browses the published yearbook. Registrars represent the university'sReport: UntitledPage 44 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
official lists of students and faculty used for user verification, user-role assignment, and user authentication. Figure 6. Data Flow Diagram for Administrator System Role The Data Flow Diagram (DFD) for Administrator System Role describes the flow of data within the system for the Administrator role. The administrator logs in to the Web-Based Interactive Digital Yearbook System using Google OAuth to access the User Authentication Module. Then the administrator is authenticated/verified against official graduating student records. A role-based access mechanism is enforced to manage administrators' and users' access rights. Verified user data is stored in the system database. The Student Profile and QR Code Module manages student biographies and information, generates a unique QR code for each student profile for quick access, and links to each student's respective profile. The Photo Management Module is responsible for uploading student images for the yearbook. The yearbook system includes an image processing module that enhances the uploaded images through resizing, cropping, and optimizing them for a consistent and attractive presentation. The Theme-Based Design Studio Module allows administrators to create intuitive yearbook layouts using template-based design tools. The Content and Memory Module is responsible for managing student and faculty submissions of messages, photos, and memories for inclusion in the yearbook (subject to administrative review and approval). The Yearbook Publishing Module compiles the approved content, applies the chosen theme, and generates the final version of the digital yearbook.Report: UntitledPage 45 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Figure 7. Data Flow Diagram for Student System Role Data Flow Diagram (DFD) showing student interaction with the Digital Yearbook System. The students log inlog in and authenticate using the registrar's records. Students manage their Profiles, Posts, Comments, and react to each other, with everything stored as memories created by students and viewed through notifications when the yearbook is published. Students can even view a hover preview of the profile when hovering across the system. Figure 8. Data Flow Diagram for Faculty System Role The Data Flow Diagram (DFD) illustrates how faculty members use the Web- Based Interactive Digital Yearbook System. They begin by logging in to the system and are authenticated using their institutional credentials, which are verified against the registrar's records at each institution. Once authenticated, they can access system features depending on their roles. Faculty users can manage their profiles. They can submit their official yearbook message for inclusion in the yearbook and interact in the system by posting, commenting on, and reacting to content. They can also see submitted content and view the published digital yearbook when it is available. All faculty data, such as profiles, yearbook messages, social data, notifications, and others, is stored and managed in the system's database. The diagram provides a clear flow of the faculty's activities.Report: UntitledPage 46 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Figure 9. Use Case Diagram Depicts the use cases and interactions for the Digital Yearbook System, focusing on the roles of the Administrator, Student, and the Faculty. This illustrates how these actors interact with the system to manage users, submissions, design layouts, and the yearbook publication. Actors Administrator Responsible for logging in with your email address and password. Upload and review registrar records to verify users. Manage user accounts. Upload and tag student pictures; process uploaded batches. Build yearbook themes using the Theme-Based Design Studio. Create layouts using template-based designing tools. Review and approve, or reject, students' and faculty's submissions— moderate social content. Print and publish the digital yearbook in flipbook and PDF formats. Send the email notification when the yearbook is published. Student The student is responsible for logging in via Google OAuth, completing and updating their profile, accessing their profile via a unique QR code, uploading and sending memories (photos and messages), using the social interaction features (posts, comments, reels), accessing and viewing the published digital yearbook, and receiving notifications from the system (including notifications for the release of the yearbook). The student should also be able to preview an interactive profile with a hover that gives access to basic user information without redirecting to another page. FacultyReport: UntitledPage 47 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
The user can log in with their email and password to submit a memorial message or contribution for the yearbook. This user likes posts, comments, and reactions, checks the status of their submissions, and finally views the digital yearbook. Table 23. CRUD Matrix Use Case and Functions Use Case Administrator Student Data Entity C R U D Upload Registrar Records ✓ ✓ Users C Login Authentication ✓ ✓ Users C R Manage Users ✓ Student Profiles C R U D Manage Student Profiles ✓ ✓ Student Profiles R Generate QR Code ✓ QR Codes C R Scan QR Code to View Profile ✓ QR Codes / Student Profiles R Update Profile Information ✓ ✓ Student Profiles R U Upload Student Photos ✓ Media Files C R U D Manage Yearbook Content ✓ Yearbook Pages C R U D View Digital Yearbook ✓ ✓ Yearbook Pages R Search Student Records ✓ ✓ Student Profiles R Export yearbook Data ✓ Yearbook Data R Delete Student Record ✓ Student Profiles R DReport: UntitledPage 48 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
This CRUD Matrix provides an overview of the data managed by the Web-Based Interactive Digital Yearbook System with a QR-Code-Enabled Student Profile. This matrix maps system use cases to data entities and CRUD operations, showing the create, read, update, and delete operations that various users can perform. Figure 10. Entity Relationship Diagram The Entity Relationship Diagram is a visual representation of the structure and relationships among the entities in the Web-Based Interactive Digital Yearbook System with a QR Code-Enabled Student Profile. It represents how data is organized, stored, and mapped across the database to ensure data integrity and efficiency of management. The ERD includes entities of Users, Students, Faculty, Posts, Comments and reactions, Themes, Yearbooks, Photos, Records from the registrar, and Notifications. All of these are important to the system's functionality: Authentication, Management of users' profiles, Social interaction among users, yearbook design, and Digital publication. Users are the core reference table for the system, containing full name, email, password, role, department, and batch. It identified an individual's primary identity within the system and regulated their access level and functionality. This entity establishes role-dependent relationships with student_profiles and faculty_profiles for additional profile information specific to each user type. student_profiles is for storing information about students only, such as nicknames, mottos, and profile photos. A QR code was also generated for a digital profile image. faculty_profiles - A faculty reference wherein faculty- specific information, such as position and department, profile photo within the system, and messages, was stored.Report: UntitledPage 49 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
The posts, comments, and post_reactions entities comprise the social interaction module. These entities exist in relation to one another, allowing users to create posts, interact through comments, and provide reactions, thereby enabling the system's interactive communication features. The themes and yearbook entities are responsible for the design and publication process of the digital yearbook, with the themes entity housing the customizable layout designs, and the yearbooks entity handling the final output, including draft, released, and flipbook/PDF versions. The photos entity is responsible for storing and managing uploaded images, thereby facilitating batch image processing and media organization. In contrast, the registrar_records entity provides a validation dataset of official student and faculty records for inspection during authentication to verify the user's identity before granting access to the system. Lastly, the notifications entity oversees system-generated notifications and user-sent notifications for events such as yearbook publication, comments, and other actions undertaken by the system. The entire ERD presents a well-structured relational database that reflects good design practices and enables the system to maintain appropriate scalability and data integrity without hindering operations. Figure 11. Sequence Diagram for Administrator The administrator logs in with registered credentials, and the system authenticates the account, granting access to the admin dashboard. Once logged in, the administrator uploads registrars' records for students and faculty and validates the batch data.Report: UntitledPage 50 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
The Administrator lessee finds yearbook content by uploading retouched photos, organizing photos, creating and applying themes, and editing layouts in the Theme-Based Design Studio. The administrator verifies submissions such as posts, memories, and messages, deciding whether to post them or reject them. When all content is in the system, the administrator generates the digital yearbook and publishes it as a flipbook and PDF files. The system triggers the notification module, sending alerts to everyone about the published yearbook. All of this passes through the system modules and is stored in the database for proper data management and system consistency. Figure 13. Sequence Diagram for Student This sequence diagram outlines how students will log in to the system using an authorized school Google account and complete and update their profiles. The flow begins with the student logging in through Google OAuth. The system uses the Google token to verify the credentials, and matches the email address to the registrar records in the database. When verified, the user is redirected to the dashboard, where they can fill out and edit their profile information, which is stored in the student_profiles table linked to the users table. The system also generates a QR code for quick access to the student's profile. The student can create social posts with optional images, store them in the posts table, and engage with others through commenting and reacting. They could submit memories saved as pending in the DB, which the administrator would review and decide whether to approve or reject before publishing them in the yearbook. Finally, the student can view the published digital yearbook, retrieved from the yearbooks and theme_pages tables, in flipbook format.Report: UntitledPage 51 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Figure 14. Sequence Diagram for Faculty The sequence diagram illustrated in Figure 12 for faculty depicts how the web- based interactive digital yearbook system accounts for faculty members. It begins with the faculty user logging in with a valid Google OAuth account. The Authentication Module, for example, receives an authentication request and checks whether the email address used is from the school domain. If it passes validation, access to the system dashboard is given. The dashboard retrieves a faculty member's profile information from the database via the Profile Module, allowing the faculty member to view their personal information and make changes as needed. A faculty member may also create an official message or announcement for students, which is processed in the Message Module and then stored in the database. A faculty member may also contribute or manage yearbook content related to the department through the Yearbook Content Module, where all updates are saved into the system database. Finally, the system allows the faculty to view the published digital yearbook. At the same time, the Notification Module sends updates and confirmations for announcements and other system activities—communication and information delivery.Report: UntitledPage 52 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Figure 15. Digital Yearbook System Architecture Diagram A diagram shows the three-layer architecture of the Digital Yearbook System. At the top are the users—students, faculty, and administrators—who access through a web browser. On the second layer is the frontend, which includes the user interface, Google OAuth login, dashboards, profile management, social posts, yearbook viewing, and the admin design studio. On the third layer, the back-end includes authentication, role management, CRUD operations, theme design, image processing, yearbook generation, QR code generation, and email notifications. On the fourth layer, the database contains users, profiles, posts, themes, yearbooks, and registrar records. External services like Google OAuth, email services, and cloud storage support authentication, notifications, and file management. Data Dictionary A data dictionary helps guide important aspects of the system's database; it provides clear explanations of the data dictionary, attributes, and relationships among tables, including field names, data types, constraints, and descriptions. Table 6: users Field Name Data Type Constraints Description id INT(11) Primary Key, Auto Increment Unique identifier of the user full_name VARCHAR(150) NOT NULL Full name of the user email VARCHAR(150) UNIQUE User email address role ENUM('student', 'faculty', 'admin') NOT NULL User role in the system department_program VARCHAR(100) NULL Department or program batch VARCHAR(50) NULL Batch or year level created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP Date account createdReport: UntitledPage 53 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
password VARCHAR(255) NULL Encrypted password google_id VARCHAR(255) NULL Google OAuth ID profile_pic TEXT NULL Profile image path Table 7: registrar_records Field Name Data Type Constraints Description id INT(11) Primary Key, Auto Increment, Unique registrar record full_name VARCHAR(150) NULL Student/faculty full name email VARCHAR(150) UNIQUE Official email address department_program VARCHAR(100) NULL Department or program batch VARCHAR(50) NULL Batch/year role ENUM('student', 'faculty') NULL Registered role uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP Date uploaded password VARCHAR(255) NULL Account password Table 8: student_profiles Field Name Data Type Constraints Description id INT(11) Primary Key, Auto Increment Unique student profile ID user_id INT(11) Foreign Key Linked to the users table nickname VARCHAR(100) NULL Student nickname motto TEXT NULL Personal motto or quote Table 9: faculty_profiles Field Name Data Type Constraints Description id INT(11) Primary Key, Auto Increment, Unique faculty profile ID user_id INT(11) Foreign Key Connect to users position VARCHAR(100) NULL Faculty positionReport: UntitledPage 54 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
department VARCHAR(100) NULL Department assigned profile_photo TEXT NULL Profile image message TEXT NULL Personal message created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP Date created Table 10: posts Field Name Data Type Constraints Description id INT(11) Primary Key, Auto Increment Unique post ID user_id INT(11) Foreign Key Author of post content TEXT NULL Post text content image TEXT NULL Attached image created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP Date posted Table 11: comments Field Name Data Type Constraints Description id INT(11) Primary Key, Auto Increment Unique comment ID post_id INT(11) Foreign Key Related post user_id INT(11) Foreign Key Comment author comment TEXT NULL Comment content created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP Date commented Table 12: post_reactions Field Name Data Type Constraints Description id INT(11) Primary Key, Auto Increment Unique reaction ID post_id INT(11) Foreign Key Related post user_id INT(11) Foreign Key: User who reacted reaction ENUM('heart') NULL Type of reactionReport: UntitledPage 55 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP Date reacted Table 13: photos Field Name Data Type Constraints Description id INT(11) Primary Key, Auto Increment, Unique photo ID user_id INT(11) Foreign Key Uploader image_path TEXT NULL Image file location created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP Upload date Table 14: notifications Field Name Data Type Constraints Description id INT(11) Primary Key, Auto Increment Unique notification ID user_id INT(11) Foreign Key Recipient type VARCHAR(100) NULL Notification type message TEXT NULL Notification content link TEXT NULL Redirect link is_read TINYINT(1) DEFAULT 0 Read status created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP Date created Table 15: themes Field Name Data Type Constraints Description id INT(11) Primary Key, Auto Increment Unique theme ID theme_name VARCHAR(100) NULL Theme title description TEXT NULL Theme descriptionReport: UntitledPage 56 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
created_by INT(11) Foreign Key Create ID created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP Date created Table 16: yearbooks Field Name Data Type Constraints Description id INT(11) Primary Key, Auto Increment Unique yearbook ID title VARCHAR(150) NULL Yearbook title theme_id INT(11) Foreign Key Connected theme status ENUM('draft',' published') DEFAULT 'draft' Publication status flipbook_url TEXT NULL Online flipbook link pdf_url TEXT NULL Downloadable PDF created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP Date createdReport: UntitledPage 57 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Development Phase The development phase begins once the plan has been made. This system will interact with the service that enables institutions to manage student profiles, yearbook content, social engagement, and content publication. Development will align the system design with the actual system. Following a multiple-layer structure, the frontend, back-end, and database, the system is a API driven and hard to ensure modularity and scalability. The Agile model promotes an iterative development process based on testing and response. The login authentication uses Google OAuth with Role-Based Access Control for graduating students, faculty, and admins. The Theme-Based Design Studio is Canva-inspired and includes tools that let admins customize the layout and content, as well as reusable templates. Other features include QR code- enabled student profiles; students can also post images for automatic processing and interact with friends, classmates, or the batch through posts, comments, and reactions. The yearbook will be automatically generated as a PDF and flipbook format upon publication.Report: UntitledPage 58 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Figure 15. Flow Chart Diagram The Web-based interactive digital yearbook system with QR code-enabled student profiles has three roles: graduating student, faculty, and admin. Users log in through the school email institution, and the system verifies whether they exist in the data. Once verified, the user will navigate to their respective dashboard. Admin manages user accounts and registers data, handles image processing, oversees theme-based studio design, and manages yearbook content, including messages, images, and memory pages. And approve or reject submissions, publish the digital yearbook, and send automatic email notification upon publication of the digital yearbook. Graduating students manage their profiles, memories, images, messages, posts, social interaction posts, and reactions. Scan the QR code to access the profile, view the published yearbook, and receive notifications. Faculty submit official messages, social interaction posts, comments, and reactions, view the digital yearbook, and receive notifications. System storing all user data, generating a unique QR code for each student, publishing the yearbook in flipbook format and as a downloadable PDF, and providing digital access to the yearbook and QR code via scan. Testing PhaseReport: UntitledPage 59 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
These phases ensure the full functionality of the digital yearbook, security, and alignment with our system requirements, with priority given to the deployment. The attention focuses both on individual modules and the overall. Integration and testing of systems that communicate with one another. The unit for trying our core system features, mostly the aspects like authentication, user management, QR code auto-generation, theme-based, Canva-inspired, and image processing. System is testing of the complete system workflow, including the profile, such as user profile creation, editing, and viewing the profiles, can view the digital yearbook, and then follow profiles management as the social interaction features, such as posts, comments, and reactions. The theme-based approach is used for the social design of the yearbook. It will automatically generate the yearbook and download the PDF and flipbook formats upon publication. Model Performance Table Testing Methodology • The system's real and copied user information is used to test the digital yearbook system's reliability, functionality, and data accuracy. • The data includes a sample of user profiles (student, faculty), posts, comments, reactions, notifications, and yearbook flipbook outputs. • The test has the same valid and invalid login attempts, double submissions, and incomplete information. • The system generates user authentication output, logs, user profile updates, posts, comments, and reactions, QR code outputs, notification logs for various activities, and yearbook files in PDF format and as pages in a flipbook viewer. • These outputs are compared with expected outputs and database records to verify correctness, consistency, and system reliability.Report: UntitledPage 60 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
• Key metrics tested include output accuracy; precision and recall are calculated to assess the system's performance before deployment. Performance Metrics Explained Accuracy • Accuracy is measured as the ratio of correct system outputs to the total number of test cases. • Example: If 190 out of 200 operations are correctly processed, the system achieves 95% accuracy. Precision • Precision measures the proportion of the correctly identified valid outputs out of all outputs identified as valid. • Example: If the system identifies 100 valid actions but only 96 are correct, precision is 96%. Recall • Recall measures the proportion of correctly identified valid actions out of all actual valid actions. • Example: If 100 valid actions exist and the system correctly identifies 95 of them, the recall is 95%.Report: UntitledPage 61 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Figure 15. Deployment Diagram The deployment diagram indicates all the major components of the Digital Yearbook System and how they fit within the environment in which they operate. The system is accessed by students, faculty, administrators, and other registered users via desktop computers, laptops, tablets, or mobile devices using web browsers. The application is hosted on the web server that handles user authentication, profile management, social interactions, theme creation, image processing, QR code generation, and yearbook publishing. A MySQL database stores user data, profiles, posts, comments, reactions, and notifications, as well as the themes, yearbooks, and registrar records. Review Phase The Digital Yearbook System is evaluated through structured reviews involving students, faculty members, and administrators. Students evaluate profile management, social interaction features, memory submission, and digital yearbook viewing. Faculty members review content accuracy and submission outputs. Administrators evaluate system performance in user management, content moderation, theme creation, image processing, QR code generation, and yearbook publishing.Report: UntitledPage 62 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
Registration validation ensures that only verified users gain access to the system. The review process identifies system strengths and areas for improvement to ensure readiness for full deployment. Sampling Technique The study uses Slovin's Formula to determine the appropriate sample size from the total population of registered users. Where: n = sample size N = total population e = margin of error (0.05 or 5%) The study uses a 5% margin of error to determine the required sample size from the total student, faculty, and administrative populations. Convenience sampling is used to select respondents who actively interact with the system. The computed sample size is used for system evaluation focusing on usability, functionality, performance, and acceptability.Report: UntitledPage 63 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM
1. (Malode et al., 2022); (Widanti et al., 2024); (Caay et al., 2024); (Deineko et al., 2022); (Karpe et al., 2022); (Kabier et al., 2023); (Talebi et al., 2022); (Lavhe et al., 2025); (Loh et al., 2024); (Mahida, 2022); (Prakash et al., 2024); (Sabol et al., 2022); (Bajaj, 2024); (Kumar et al., 2023)… Citation style options Correctness 2. Potentially sensitive language Delivery 3. The study covers the ethical implications of cloud computing, particularly data ownership, data privacy, data sovereignty, and regulatory compliance. Paragraph can be improved Clarity 4. Paragraph can be improved Clarity 5. The study uncovers limitations in traditional UI design approaches, including a failure to scale and shortcomings in consistently meeting the needs of designers and users, resulting in inconsistent interfaces and limited customization in complex web systems. Paragraph can be improved Clarity 6. The study examines techniques and skills to improve the scalability and performance of React. Paragraph can be improved Clarity 7. Data validation and monitoring by the admin would help the system run faster and more accurately. Paragraph can be improved Clarity 8. Registrars represent the university's official lists of students and faculty used for user verification, user-role assignment, and user authentication. Paragraph can be improved Clarity 9. All of these are important to the system's functionality: Authentication, Management of users' profiles, Social interaction among users, yearbook design, and Digital publication. Paragraph can be improved Clarity alumni → alums will need to → mustReport: UntitledPage 64 of 64Report was generated on Tuesday, Jun 9, 2026, 01:25 PM