LCC RESEARCH HUB: A RESPONSIVE WEB RESEARCH MANAGEMENT

APPLICATION FOR LA CONCEPCION COLLEGE.

A Research Paper Presented to the

Faculty of Information Technology Division

La Concepcion College, Inc.

In Partial Fulfillment of The Requirement for the Degree

Bachelor of Information System

By

Detorres, Andrei

Hael, Bhea Rose S.

Morante, Pauline

Sabas, Jhojin A.
 CHAPTER 1

THE PROBLEM AND ITS BACKGROUND

Introduction

Responsiveness is a critical quality-of-service attribute for web applications. If

a site is slow to respond to user requests, customers are likely to leave. Equally
important is scalability, as web applications must handle sudden surges in traffic due
to advertising, corporate announcements, or new features. Numerous cases of web
performance failures illustrate the consequences, such as the Victoria’s Secret fashion
show crash, online brokerage outages on high-trading days, and eBay’s performance
issues. These failures can lead to customer dissatisfaction where negative perceptions
persist even after fixes lost revenue and productivity, and potentially more severe
consequences, including legal action.(Desruelle, H., Blomme, D., Gielen, , 2011)

The growing diversity of devices capable of accessing the web has

substantially increased the demand for responsive application development. As a
result, software complexity has escalated, requiring applications to be designed and
optimized for multiple devices and platforms to ensure seamless functionality
(Charland & Leroux, 2011)To address these challenges, various Web engineering
methodologies have been proposed (Kappel et al., 2006)leveraging modern Web
technologies such as HTML, JavaScript, and CSS. These approaches aim to enhance
the flexibility of user interface (UI) design, enabling applications to dynamically
adapt to different screen sizes, orientations, and device specifications.(Schwinger et
al., 2008)

However, despite these advancements, developing responsive web

applications remains a complex task that requires significant technical expertise. This
complexity often limits the participation of non-technical stakeholders in the design
and development process. To bridge this gap, an abstraction layer built on top of
existing frameworks could facilitate a more inclusive development environment,
allowing both technical and non-technical users to contribute effectively.

Web developers, especially those working on websites, are increasingly

challenged by the growing variety of devices and the diversity of interface
characteristics, which extend beyond screen size and resolution to include various
input and output modalities. Traditionally, "mobile" referred to small, handheld
devices like mobile phones and PDAs, which had limited screen sizes and processing
power. However, this term now encompasses a new generation of smartphones and
tablets, such as the iPhone and iPad, which are becoming more powerful and often
incorporate touch, gesture-based input, and other advanced sensors. New types of
medium-sized devices, including notebooks with slate mode support, booklets, and
convertible devices, are also emerging, often as hybrid solutions primarily designed
for mobile use. These devices now support not only traditional mouse and keyboard
input but also more advanced forms of interaction, such as touch, pen, and gesture-
based inputs. On the other end of the spectrum, even the term "desktop" now refers to
a wide range of devices, with a strong trend toward large, wide-format screens and
increasing interest in large, high-resolution displays. (Michael Nebeling and Moira C.
Norrie, 2012)

Research has also extended the desktop concept into what’s now known as the
"tabletop," with large interactive surfaces becoming more common in offices, public
spaces, and homes. The development of very small touchscreens and new rollable
devices is pushing the boundaries of interaction techniques. As a result, both input
and output technologies continue to evolve rapidly. We can expect even greater
diversity in device characteristics in the years ahead (F. Daniel, P. Dolog, and Q. Li,
2013).

Background of the Study

The World Wide Web was introduced in 1990 with the release of the first
version of HTML. The first graphical web browser, Mosaic, was developed by Marc
Andreessen and Eric Bina at NCSA. This browser was bundled with their first widely
used web server software, NCSA HTTPd, which was later renamed Apache. While
the concept of responsive web design has been around for some time, its widespread
adoption has significantly increased in recent years due to the evolution of the web
and the growing diversity of devices used for online access (Berners-Lee & Fischetti,
1999).

According to Marcotte E. (2010), the main principle behind responsive web

design is to develop websites that can automatically adjust to different screen sizes,
eliminating the need for separate versions for each device type. The Audi.com
website, launched in 2001, was among the first to implement this approach. In 2011,
Google started giving preference to "mobile-friendly" websites in search rankings,
making mobile optimization an essential factor in website visibility. This shift led to a
surge in demand for responsive web applications. Today, responsive web design is a
crucial component of web development, with many developers considering it the best
approach. It allows a single web application to function seamlessly across multiple
devices, removing the need for device-specific versions and enhancing accessibility.
 Responsive web application development has become the need of the hour for
all business houses, irrespective of the niche they operate in. The reason behind this is
that responsive web application development is a solution that not only helps you to
meet your business objective but also ensures that your brand is perceived as an
innovative and user-friendly brand. Responsive websites are those which can be
viewed across different devices and platforms like desktop computers, mobile phones,
tablets, and others. The main advantage of developing responsive websites lies in the
fact that it helps you create a uniform look for all the visitors across all platforms,
thereby ensuring greater customer satisfaction. The significance of this approach is
very crucial for businesses as well as individuals. It helps them to reach out to a wider
audience and to cater to their needs without having to worry about which devices they
use. Also, there are no issues related to compatibility or device compatibility issues
which are usually faced by regular web development services. However, if you
develop a responsive website that is compatible with all devices then there will be no
such obstacle in their way and mobile users will be able to browse through your
website easily without having any problem whatsoever with navigation or speed while
using it on their mobile devices.

Statement of the Problem

According to Smith and Williams (2000) that Responsive Web Design (RWD)
is a crucial approach in web development, enabling dynamic adjustments to a
website’s appearance based on the screen size and orientation of the device being
used. A responsive website ensures a visually appealing and functional experience
across all devices, including smartphones, tablets, desktops, and smartwatches, each
of which has varying screen resolutions. Designing a website with responsiveness in
mind ensures that the user interface (UI) remains consistent and user-friendly across
different devices. If a website is not responsive, its UI may appear distorted or
unusable on certain screens. It is important to note that a website’s appearance may
not be identical across all devices, making responsiveness essential for accessibility
and usability.

Many educational institutions have adopted digital solutions for research

management, yet La Concepcion College (LCC) still relies on manual processes,
making it difficult for students to access, track, and manage research-related
documents. The lack of a Responsive Web Management results in misplaced files,
inconsistencies in research documentation, and difficulty in retrieving past research
works. Without a proper system, students struggle to locate relevant research papers
and capstone projects, often encountering outdated, missing, or unorganized
documents.

Currently, students must visit the library physically to check for available
research papers and capstone projects, only to find that certain documents are
inaccessible due to poor record-keeping. Some research papers also need to be made
available online to allow students to access them remotely, ensuring convenience and
wider availability of academic resources. The manual system makes it difficult for
students to keep track of their research submissions, revisions, and approvals, leading
to confusion and miscommunication. There is no centralized repository where
students can efficiently browse previous research works for reference, limiting their
ability to build on existing studies. By developing a Responsive Web Research
Management Application, LCC can enhance accessibility, streamline research
handling, and improve the overall research experience for students. This solution will
ensure a more organized and efficient research management system, allowing students
to access, submit, and track research papers and capstone projects with ease.

Specific Problems

As research or thesis papers and capstone projects become a mandatory

requirement for college students before they graduate, it is a challenge for tertiary
institutions to collect and store the studies published by their students in a digitalized
and more accessible manner. Because of this, the proponents of this study intend to
address this gap by developing a website that will store and collect the capstone
projects of the Bachelor of Science in Information Systems from the academic year
2024-2025 onwards. Specifically, the researchers aim to answer the following
questions:

Specific Problems

1. How can a centralized digital repository be designed and developed to

systematically collect, store, and manage BSIS students’ capstone projects and
research papers at LCC starting from the academic year 2024-2025?

2. What are the inefficiencies in the current manual process of searching,

retrieving, and organizing research materials, and how can a web-based
system address these issues?

3. What are the key functional and non-functional requirements necessary for the
development of the LCC Research Hub to ensure efficiency in research
submission, tracking, and retrieval?

4. What responsive web design (RWD) techniques should be implemented to

optimize user experience and accessibility across various devices, including
 desktops, tablets, and smartphones?

5. How can the LCC Research Hub be tested and evaluated in terms of usability,
functionality, performance, and security to ensure its effectiveness in research
management?

Objective of the Study

This study aims to create a centralized website accessible for the Bachelor of
Science in Information System students and faculty containing the research studies
made by BSIS students of the Academic Year 2024-2025 and the proceeding years.
The fulfillment of this study will allow the students and faculty to have a systematic
and organized database of the student’s capstone projects. It could also be a reference
source for future studies conducted in the context of the said program.

Significance of the Study

This study focuses on the development of the LCC Research Hub: A
Responsive Web Research Management Application for La Concepcion College,
aimed at enhancing accessibility to research materials and optimizing academic
resource management. A key feature of the system is its ability to provide a
centralized platform for storing, organizing, and retrieving research outputs,
particularly capstone projects and other academic studies. By offering real-time
access to research materials, the system improves efficiency, streamlines academic
workflows, and fosters a more collaborative research environment. This study will be
beneficial to various stakeholders, including students, faculty, and the institution, by
modernizing research management and promoting digital transformation in academic
resource accessibility.

● Bachelor of Science in Information Systems (BSIS) Students-This study is

highly relevant to BSIS students as it explores the design, development, and
implementation of a responsive web-based research management application.
It highlights key areas such as database management, system integration,
cloud computing, and digital transformation in academic research
management. The findings will provide insights for future system developers,
software engineers, and IT professionals in designing efficient, automated
solutions for research organization and accessibility.
● Community – The system can serve as a valuable resource for the broader
academic community by providing access to well-documented research
studies. It can support future researchers, educators, and industry professionals
in finding relevant studies, fostering knowledge-sharing, and encouraging
innovation based on previous academic work.

● Future Researchers and Developers-This study serves as a valuable

reference for future researchers and system developers working on academic
research management systems, digital repositories, and web-based automation
technologies. It offers insights into cloud-based system development, data
synchronization, and real-time data processing, laying a foundation for further
innovations in academic resource management and digital transformation
strategies.

● La Concepcion College (LCC)-As the institution where this research is

conducted, LCC stands to benefit from the LCC Research Hub by improving
academic resource accessibility, enhancing digital infrastructure, and
streamlining research management. The study aligns with the college’s
commitment to technological advancement and student-centered learning,
fostering a more efficient and responsive academic environment.

● Students – Students will have real-time access to research materials,

particularly capstone projects and other academic studies from the institution.
This will eliminate the need for manual research retrieval, reduce accessibility
issues, and provide a centralized platform for storing and organizing academic
resources. The system ensures a more seamless research experience,
promoting efficiency in academic work.

● Teachers-Teachers will benefit from real-time access to student research

outputs and reference materials, enabling them to provide better guidance on
research development. The system will allow them to monitor research
progress, ensure alignment with academic standards, and recommend relevant
sources efficiently. This contributes to a more structured and well-supported
research environment for students
Scope and Limitations of the Study

Scope of the Study

This study focuses on the design, development, and evaluation of the LCC
Research Hub: A Responsive Web Research Management Application. The system is
designed to digitize, store, organize, and manage research materials particularly
capstone projects and research papers for La Concepcion College. The system aims to
address inefficiencies in the manual process of research retrieval and submission by
introducing an automated and structured platform accessible via desktop and mobile
devices.

The system includes the following key features:

1. Research Submission & Digital Repository

● Allows students to submit capstone projects and research papers online.

● Stores research documents in a centralized database, eliminating physical
copies.
● Implements file version control, enabling revisions and resubmissions.

2. Research Search & Retrieval System

● Users can search for research papers using keywords, authors, academic year,
or category.
● Filters and sorting options enable efficient browsing.
● Ensures quick and organized access to previous research works.

3. Responsive Web Design (RWD)

● Ensures full functionality across desktops, tablets, and smartphones.

● Uses adaptive layouts to maintain usability on different screen sizes.
● Provides a mobile-friendly interface to enhance accessibility.

4. User Management & Role-Based Access Control

 ● Supports three primary user roles:
○ Students – Can submit research, track approval status, and access
approved papers.
○ Teachers/Advisers – Can review submissions, provide feedback, and
approve or reject research.
○ Administrators – Can manage users, system settings, and research
archives.
● Ensures restricted access based on user roles.

5. Research Tracking & Notification System

● Students can monitor the status of their research submissions (e.g., pending,
approved, needs revision).
● Provides real-time notifications for research status updates.
● Allows advisers to send feedback directly through the system.

6. System Evaluation & Performance Testing

● Conducts usability testing with BSIS students and faculty.

● Assesses system efficiency, security, and responsiveness.
● Collects user feedback for improvements.

Limitations of the Study

While the system aims to improve research management, there are certain limitations
that affect its functionality and scope.

1. Limited User Scope – The system is designed only for BSIS students and
faculty of La Concepcion College. Other departments or institutions are not
included in this study.

2. Content Restrictions – The repository only stores capstone projects and

research papers. Other academic documents (e.g., dissertations, journals,
general coursework) are not covered.
 3. Manual Approval Process – Although submissions are digital, research still
requires manual review and approval from faculty members.

4. Institutional Dependency – The study is institution-specific and does not

integrate external research databases (e.g., Google Scholar, ResearchGate).

5. Internet Dependency – Since the system is web-based, users must have an

active internet connection to access research materials. Offline access is not
supported.

6. Basic Security Features – The system includes authentication and access

control, but advanced cybersecurity features (e.g., multi-factor authentication,
data encryption) are not implemented.

7. Storage Constraints – The system will be hosted on a local or cloud-based

server, but large-scale data storage solutions are not part of this study.

8. Limited Search Functionality – The search function relies on keyword-based

queries and does not include AI-powered recommendations or semantic search
capabilities.

9. Single-Language Support – The system is designed only in English, and multi-

language is not yet supported.

Definition of Terms

Access Control - A security technique that regulates who or what can view or use
resources in a computing environment. (Ben Lutkevich, 2025).

Automation - The technique of making an apparatus, a process, or a system operate

automatically. (ISA, 2025).
Backup and Recovery - The process of duplicating data and storing it in a secure
place in case of loss or damage, and then restoring that data to a location—the original
one or a safe alternative—so it can be used again in operations. (COHESITY, 2025).

Cloud-Based System - A cloud-based system, often known as cloud computing, is a

broad term for anything that involves the delivery of hosted services via the Internet.
(Unitycommunications, 2025).

Data Synchronization - The ongoing process of synchronizing data between two or

more devices and updating changes automatically between them to maintain
consistency within systems. (talend, 2005).

Database Management System (DBMS) - Is a software system that allows users to

create, define, manipulate and manage databases. It provides a way for organizations
to store, organize and retrieve large amounts of data quickly and efficiently in an
organized manner. (Austin Chia, 2023).

Information System - An information system is defined as a specific type of system

that involves information resources, including hardware, software, and data,
organized to accomplish specific functions within an organization. (Stephen D. Gantz,
Daniel R. Philpott, 2013).

Metadata - A structured and descriptive information about data, offering context such
as source, type, and relationships to other datasets. (atlan, 2024).

Multi-User Support - Provide a shared device experience, wherein each device user
is intended to be used by a different physical person. (source, 2025).

Real-Time Processing - Is a foundation of modern life that can sometimes hide in

plain sight. Here’s how it works and how you can benefit. (Jeffrey Richman, 2023).

Research - Investigation or experimentation aimed at the discovery and interpretation

of facts, revision of accepted theories or laws in the light of new facts, or practical
application of such new or revised theories or laws. (Merriam-Webster, 2025).
Responsive Web - Designed to respond and adjust to mobile devices, both by looking
attractive and working effectively for visitors. (one.com, 2025).

CHAPTER 2

REVIEW OF RELATED LITERATURE

This chapter presents a comprehensive review of related literature, studies,

technologies, and theoretical and conceptual frameworks that support the
development of the LCC Research Hub: A Responsive Web Research Management
Application for La Concepcion College. The purpose of this chapter is to provide an
in-depth understanding of existing research and technological advancements relevant
to the proposed system, ensuring that it is grounded in established principles and best
practices.

Review of Related Literature

Foreign

According to AsmitaKharat, PriyankaBhosale, SonaliGupta, and

ShwetaBarshe in 2018. Due to the evolution of techniques and communication
devices in the past decade, anyone can easily surf around the web using a PC, mobile
phone, tablet, television, game console, etc. All these devices have the ability to
access the internet, and have their own screen dimensions and use different
resolutions. Hence, web designers should take care that the content of their website is
readable and functional on all these resolutions. Design and development of the web
page should make an appropriate response and adjustment according to the user's
system platform, screen size, screen orientation, and so on. That means no matter
what screen size of the device is being used, we should be able to switch the page
resolution, picture size, and related scripting capabilities automatically, so as to adapt
to different devices. Web developers use responsive design to make sure websites
look good and work well on any screen size, whether it's a phone, tablet, or computer.
Instead of creating separate versions for different devices, they use techniques and
adjust the website automatically. This makes browsing easier, keeps everything
accessible, and ensures a smooth experience no matter what device someone is using.
With more people relying on mobile and smart devices, responsive design has become
a must for building user-friendly and efficient websites.

Responsive design allows software developers to build a web page that can
dynamically adapt to the size of the devices. This development philosophy enables the
rendering of web pages in a fast and optimized way, ensuring a good user experience
on mobile devices, tablets, and desktops. In the scope of this study, we intend to
explore the main advantages and limitations associated with responsive web design.
We adopted a quantitative approach based on a questionnaire filled by 181
professionals in the industry that allowed us to identify the reasons that lead software
developers to the adoption of responsive design and also address the limitations felt
by them. The results obtained indicate that offering a good user experience and
increasing accessibility stand out as the most important advantages. On the other
hand, the main limitations include compatibility with older web browsers, higher
loading time, and difficulties in optimizing user experience. Finally, it was found that
the perception of the advantages and limitations of responsive design is distinct for
professionals with more professional experience in the field and for freelance
developers. (Fernando Almeida, José Monteiro, 2017).

As responsive web design keeps evolving, developers need to find the right
balance between its benefits and challenges. It improves accessibility and user
experience across different devices, but there are still hurdles like browser
compatibility issues, slower loading times, and optimization struggles. Thankfully,
new web technologie like better CSS frameworks and JavaScript libraries are helping
solve these problems, making responsive design more efficient and flexible. With
more industries focusing on digital accessibility, the need for well-optimized,
responsive websites is only growing, solidifying its role as a key practice in modern
web development.

Local
According to the local study, Internet access is now more mobile than ever
because of the introduction of internet-enabled devices such as smartwatches,
smartphones, tablets, and phablets, in addition to laptops and palmtops. The study
developed a responsive website and provided a website traffic analysis. It employed
the descriptive and applied methods of research. Documentary analysis was used to
determine the Transparency Seal requirements. (Excel Philip B. Guidang, 2016)

With so many devices coming out in different screen sizes and resolutions,
websites need to be designed to look good and work well on all of them. Responsive
web design helps by automatically adjusting layouts, images, and text to fit any
screen, making websites more accessible and user-friendly. Since people now browse
the internet on everything from smartwatches to big desktop monitors, this approach
is more important than ever. But as technology keeps evolving, developers also need
to keep up making sure websites run smoothly, stay compatible with older browsers,
and are ready for whatever new devices come next.

The creation and use of websites has been completely transformed by

responsive web design, which makes it possible for users to engage with websites
seamlessly on a variety of devices, including desktop computers, smartphones, and
tablets. But as technology advances and new gadgets with different screen sizes,
resolutions, and functionalities appear, responsive web design will face new
possibilities as well as obstacles in the future. The present abstract delves into the
dynamic field of responsive web design, emphasizing the difficulties and possibilities
involved in accomplishing compatibility across several devices. (Ms. Jasmeen Kaur,
2024). As people expect smoother and faster browsing experiences, responsive web
design remains a key part of modern web development. Users want websites that load
quickly, look great, and function well on any device, so developers must keep refining
their techniques. This means writing efficient code, improving accessibility, and even
using new technologies like AI to make websites more adaptable. As the digital world
keeps growing, web design will need constant innovation to keep up with users'
changing needs.

Related Technologies

As the time passes by, more and more people surf through the Internet using
mobile devices compared to a desktop computer. Recently, mobile device and
computer screen designers have been trying to provide users with qualified web-
browsing but this hasn’t been able to afford adequately users’ needs that are exposed
to traditional website layouts. (Meltem Huri Baturay and Murat Birtane, 2013)

To address this, web technologies have evolved to enhance user experience

and functionality. One such advancement is the Internet of Things (IoT), which allows
seamless connectivity between devices through cloud-based platforms. With IoT,
users can control and navigate smart devices remotely, making daily tasks more
efficient. This integration is especially beneficial for developing countries like the
Philippines, where smart technology can help address everyday challenges. By
combining IoT with improved web design techniques, websites and applications can
provide more responsive, interactive, and accessible solutions for users across
different devices. In the age of emerging technology, various automated systems, and
remote-control system applications have been implemented to make human lives
comfortable. The Internet of Things (IoT) is a cloud-based platform that provides
tools for controlling and navigating numerous internet-connected sensors and smart
devices. In smart technology, various countries are already implementing different
applications that relate to IoT. For developing countries like the Philippines, smart
technology will help to adapt to the transforming needs of the nation and its people.
Integration to smart devices like smart cities, smart homes, and other smart
applications will eradicate common daily challenges people experience. (Gyoji A.
Kato, Jay Yamongan, Joshua Miguel N. Manao, Rex Albert A. Arcega, Renz Leonard
E. Espino, Ronnel D. S. Capili, and Jo-Ann Magsumbol, 2022)

With the increasing demand for seamless and efficient web browsing, modern
applications have adopted single-page application (SPA) technology. SPAs improve
performance by dynamically updating content without requiring full page reloads,
making web interactions faster and smoother. This is particularly useful in research
management applications, where users need quick access to large amounts of data
without unnecessary delays. By integrating SPAs with IoT and responsive web
design, developers can create more user-friendly, efficient, and adaptable digital
platforms. A single-page application is a type of web application that has only one
HTML page. When the user clicks, the content dynamically changes according to the
request. But instead of reloading the entire page from scratch, it only updates the
relevant parts. (DIGITEUM TEAM, 2024)

Review of Related Studies

Foreign

As technology advance and more devices connect to the internet, web

designers face new challenges. In the past, websites were built with fixed-width
layouts designed for specific screen resolutions, ensuring they worked across different
devices. But with the growing variety of screens, this approach no longer works well.
Fixed dimensions can limit the user experience, especially on newer, high-tech
devices. To solve this, modern web development has embraced responsive design—
allowing websites to automatically adjust their layout based on the user’s screen size
and resolution for a smoother, more flexible experience.

As a greater selection of devices become able to access the Internet, website

designers are finding it harder to predict user context. Traditional best practice for
website design advocates using a minimum target resolution—a kind of low-end
catchall for the browsing windows on various devices. The idea is to gather statistics
on website visitors and their screen resolutions and use the results to identify the
lowest resolution that would accommodate some acceptably high number of users.
The minimum requirement then dictates important design decisions, from the site’s
canvas size in Photoshop to the architecture of a fixed-width layout. Unfortunately,
creating fixed-width websites on the basis of a minimum target resolution (typically
1024× 768), presents both short-and long-term problems. In the short term, it ignores
users with more capable hardware, giving them only a limited user experience. (Brett
S Gardner, 2011)" According to Lyubov Filippova, Rostislav Svidelskyi in (2016).
The perspectives of responsive approach in web development in the design and layout
implementation by web developers are analyzed. It is due to, primarily, a significant
increase in mobile internet traffic and increase the diversity of electronic devices. The
optimal responsive approach compared with the development of certain versions of
websites for different devices is analyzed. It is shown that responsive approach
provides greater website support by all devices. This is achieved thanks to its
particular advantages, including the use of HTML and CSS code to display a website
on all devices and adapting the content to the width of the browser.
 The Shift towards responsive design highlights the growing need for flexibility
in web development. With more people browsing on mobile devices and new screens
constantly emerging, websites must adapt smoothly to different sizes and resolutions.
By using HTML and CSS to create flexible layouts, developers ensure a consistent,
user-friendly experience across all devices. This not only makes websites more
accessible but also eliminates the need for multiple versions, making maintenance
easier and keeping web design ready for future technology.

Local

A responsive system to mobile and web platforms that enables the school
community to operate efficiently throughout enrollment and enhances online access to
academic information. The portal is built with Django and Python to create effective
and timely management information and the database used is SQLite. Furthermore,
the Classification and Regression Tree (CART) model is used for the automatic
advising for the student enrollment process and the Linear Regression Model for the
enrollment prediction. This portal is accessible via web browsers and mobile devices.
During the deployment phase, when all required assessments are finished through
extensive functionality testing and how the portal is helpful to all users, the
development sprints' goals were effectively achieved. In conclusion, the SJP2CD
Portal has proved to meet all users' needs. ( Karen Adorico and Fe Yara, 2024)

To further improve institutional management, another system was created to

focus on a different part of academic operations. While the SJP2CD Portal handles
student enrollment and academic access, managing research data also needs a more
streamlined approach. Digital solutions help schools organize data, simplify
workflows, and support better decision-making. By developing systems designed for
specific administrative tasks, educational institutions can ensure efficiency, accuracy,
and easy access to important information. The Research Management Information
System of Quirino State University (RMISQSU) was designed and developed to help
the Research and Development Office manage research records by providing a
computerized system that will aid in decision-making. Specifically, the project aims
to determine and analyze the research data management practices of the Research and
Development Office; to identify the problems encountered by the office in research
data management; and to develop a system that will address the problems encountered
by the Research and Development Office. (Danisse Mae P. Hernandez, 2021)

The SJP2CD Portal and RMISQSU both show how technology is becoming
essential in modern academic institutions. By incorporating digital solutions, schools
can streamline operations, enhance data accuracy, and boost overall productivity.
These systems emphasize the need for continuous innovation in educational
management, helping institutions keep up with the changing needs of students,
faculty, and administrators.

Synthesis

Category Related Foreign Local Foreign Local

Technologi Literature Literature Studies Studies
es

Focus The Responsive Responsive Responsive Developme

evolution of web design websites design nt of a
web adapts to improve addresses responsive
technologie various accessibilit challenges system for
s to devices y and user of fixed- mobile and
enhance using experience width web
user flexible across layouts. platforms in
experience, layouts and multiple schools.
particularly CSS media devices.
through queries.
IoT, Single-
Page
Application
s (SPA),
and
responsive
web design.

Key More users Enhances Ensures Allows web Streamlines

Findings browse the accessibilit proper pages to academic
web using y, improves display and adapt processes
mobile user functionalit dynamicall and
devices experience, y across y, improves
rather than but has devices, but eliminating information
desktops. limitations requires fixed-width accessibilit
like ongoing issues. y.
Traditional browser optimizatio
website compatibilit n.
layouts do y issues and
 not fully loading
meet time.
modern
user needs.

The Internet
of Things
(IoT)
enables
seamless
connectivit
y and smart
technology
integration,
improving
daily tasks.

Single-Page
Application
s (SPAs)
enhance
web
performanc
e by
reducing
full-page
reloads and
enabling
faster
interactions.

Challenges Traditional Compatibili Adapting to Fixed-width Requires

website ty with new devices layouts functionalit
layouts are older web and screen limit y testing
inadequate browsers, resolutions usability, and
for mobile optimizatio while requiring a optimizatio
browsing. n maintaining shift to n for user
difficulties, performanc flexible needs.
Web and higher e. design.
technologie loading
s must times.
continuousl
y adapt to
evolving
user
 expectation
s and smart
device
integration.

Implementi
ng IoT and
SPAs
requires
efficient
developmen
t strategies
to ensure
seamless
user
experience.

Technologi Internet of CSS media Responsive HTML and Django,

es Used Things queries, design CSS for Python,
(IoT): flexible principles dynamic SQLite,
Cloud- grids, fluid for content CART
based images. automatic adaptation. Model,
platforms adjustment Linear
for of layout, Regression
connecting images, and Model.
and text.
controlling
smart
devices.

Single-Page
Application
s (SPA): A
web
technology
that
dynamicall
y updates
content
without full
page
reloads.
 Responsive
Web
Design:
Techniques
ensuring
websites
adjust to
different
screen sizes
and
devices.

Applicatio Enhancing Web Website Ensures a Enhances

n mobile and developmen traffic consistent academic
web t for analysis, user processes
browsing businesses, transparenc experience like
experiences e- y seal across enrollment
. commerce, compliance devices and
and general for without research
Implementi websites. institutions. multiple data
ng IoT in site managemen
smart cities, versions. t.
homes, and
various
industries
for better
connectivit
y.

Improving
research
managemen
t systems
by
integrating
SPAs for
quick data
access.

Creating
efficient,
adaptable,
and user-
friendly
 digital
platforms.

Summary of Related Literature and Studies

Foreign Literature

Responsive web design allows websites to adjust automatically to different

screen sizes, making them more user-friendly. This is important because people use
various devices like phones, tablets, and computers to browse the internet. Developers
use tools like CSS media queries, flexible grids, and fluid images to make websites
adapt smoothly. While this improves accessibility and user experience, there are some
challenges, such as slow loading times and compatibility issues with older browsers.
However, new web technologies continue to improve responsive design, making it
more efficient.

Local Literature

In the Philippines, internet access has become more mobile with devices like
smartphones, smartwatches, and tablets. Because of this, websites must be designed to
work well on different screens. A study developed a responsive website and analyzed
its traffic. It found that while responsive web design improves accessibility,
developers must continuously adapt to new technologies and devices. Challenges
include ensuring fast performance and maintaining compatibility with older browsers.
As technology advances, improving website responsiveness remains a key goal for
web developers.

Foreign Studies

Before responsive web design, websites used fixed layouts based on minimum
screen resolutions. This approach is now outdated because of the increasing variety of
devices. Fixed-width designs limit user experience, especially for those with advanced
hardware. Responsive web design solves this problem by allowing websites to adjust
automatically to different screen sizes. Using HTML and CSS, developers can create
flexible layouts that improve accessibility and reduce the need for multiple website
versions. This makes websites easier to maintain and better suited for future
technology.
Local Studies

A local study developed a responsive online system for schools, allowing

students and staff to access enrollment and academic information through both web
and mobile platforms. Built using Django, Python, and SQLite, the system improved
school management and efficiency. Another study focused on research data
management in universities, creating a system to organize and analyze research
records. These studies show how digital solutions help improve academic processes,
making them more accessible, efficient, and organized.

Theoretical Framework

This study focuses on the information gathered by researchers about

developing a digital and easily accessible website for research management at La
Concepcion College. In the past, searching for research in the library was
inconvenient, taking up a lot of time and causing financial problems due to
transportation costs. Because of these issues, this study aims to provide a better
solution through a digital platform.

This study is related to the theory that The introduction of smartphones and
the ability to access the Internet on them altered how people use the Internet.
Nowadays, a lot of individuals visit websites on their mobile devices. However,
because the Web content on the devices varies in size and the navigation of the pages
is also different in the various devices, the different screen sizes of these gadgets have
some impact on the experience of their users. The introduction of the responsive web
design philosophy changed the layout of web sites and how people see them on
various devices. Bhanarkar, N. P, Aditi. M, Ashima. (2023)

As stated in this theory, both studies aim to provide better accessibility

through a responsive web design that allows users to manage documents in digital
form more efficiently. This will help researchers and students save time and effort
when accessing research materials.
 This System Model illustrates the operation of a Responsive Web Research
Management Application, detailing how users interact with the system to access,
store, and manage research documents. Here’s how the process works step by step:

1. User Log In
● The user accesses the web application.
● They log in using their credentials (email and password)
● The system verifies authentication and grants access if the information is right
and it declines if not.

2. Responsive Web Interface

● After logging in, users are directed to the web interface.
● The interface allows users to:
● Search for research papers.
● Upload new research documents.
● Manage research categories (admin users).
● View or download available research materials.
3. Database Interaction
● The web interface retrieves and sends data to the database.
● The database stores:
● Research papers (metadata such as title, author, keywords).
● User profiles and authentication details.
● Search queries and document history.

4. Cloud Storage
● When a user uploads a research document, it is stored in cloud storage.
● When a user searches or downloads a research paper, the system fetches it
from cloud storage.
● Cloud storage ensures large files are managed efficiently and accessed
quickly.

5. Data Flow & User Experience

● Users interact with the web interface, which dynamically pulls data from the
database and cloud storage.

The system ensures that:

● Searches are fast and accurate.
● Documents are easy to upload and download.
● The platform is accessible across multiple devices.
● This model ensures a seamless, efficient, and responsive experience for
researchers and students, making research management more convenient and
accessible.

Conceptual Framework

A web-based research management system replaces the traditional method of

manually searching for research papers in libraries. The Input-Process-Output (IPO)
Conceptual Framework guides the development of this system, outlining the
necessary data, tools, and steps needed to create a fully functional and user-friendly
research management platform.
 The Conceptual framework of this study establishes foundation for the Input-
Process-Output (IPO) model for developing a Responsive Web Research
Management Application for La Concepcion College. The process starts with the
input phase, where data is gathered through surveys, interviews, and literature
reviews. Developers need knowledge of HTML, CSS, JavaScript, PHP, and MySQL,
along with tools like Visual Studio Code, XAMPP, and GitHub for development.
Hardware such as computers and mobile devices is also required for testing. The
process phase follows the Waterfall Model, which includes six steps: understanding
user needs, designing the interface and database, developing the system, testing for
usability and security, deploying for student and faculty use, and maintaining the
system through updates and bug fixes. Finally, the output is the LCC Research Hub, a
web-based platform designed to make research management more accessible,
efficient, and user-friendly. This system aims to improve the way students and faculty
handle research documents, reducing manual work and making information retrieval
faster and more convenient.

Context Diagram

A Context Diagram is defined as a visual representation that outlines the scope

of a system by illustrating the net inputs, sources, outputs, and destinations of data. It
helps in identifying the boundaries of the system and its interactions with external
entities in a top-down data flow model. (Sagjin Yoo, 2003)

The LCC Research Hub is a web-based research management system designed

to provide students and researchers with an accessible, efficient, and organized
platform for searching, uploading, and downloading research papers. This system
eliminates the need to travel for access of academic materials in school and improving
research accessibility and reducing transportation cost. The context diagram below
illustrates the LCC Research Hub as the central system, interacting with the students
and the researchers or administrators.

Figure 2.

STUDENTS

● Submit research papers: They can contribute their work to the system.
● Search research papers: They can browse the database to find relevant studies.
● Upload research papers: They can share their research for academic reference.
● Download research papers: Research papers can be accessed and downloaded
for study purposes only.
RESEARCHERS/ADMINISTRATORS

● Approve research papers: Ensure quality control and relevance of uploaded

content.
● Manage the system: Handle user registrations, database maintenance, and
system security.
● Monitor the system's performance: Ensure smooth operation, fix issues, and
optimize system usage.

LCC RESEARCH HUB

● Library System: Stores and organizes research materials efficiently.

● Manage Users: Controls access to the platform and assigns roles.
● Store Uploaded Files: Safely stores research documents for future reference.
● Manage Research Papers: Categorizes and maintains research papers for easy
retrieval.

The LCC Research Hub is a tool of digitalized form research access, reducing
the need for manual data scanning, and managing financial budgets related to
transportation costs. By digitizing academic resources, it improves research activities
and produces a more efficient academic environment. The implementation of this
system enhances the accessibility of research materials, ensuring that students and
researchers can conveniently upload, search, and download academic papers. The
interaction between users and administrators contributes to a maintained and reliable
research management hub.

Data Flow Diagram

In the 1970s, software engineers Larry Constantine and Ed Yourdon

introduced data flow diagrams (DFDs) in their book Structured Design. Unlike
traditional methods that emphasized software procedures, DFDs focused on how data
moves through a system. Later, computer scientists Tom DeMarco, Chris Gane, and
Trish Sarson contributed to their widespread adoption by standardizing the symbols
and notations still in use today.

Originally, DFDs were primarily utilized in software engineering, but their

ability to clarify business processes and workflows led to their adoption in the
business world. However, with the emergence of Unified Modeling Language (UML)
in the 1990s, software engineers moved beyond DFDs, as UML offered a more
detailed representation of structures and behaviors in complex object-oriented
systems.
 Figure 3.

Process:
○ User Authentication (Login, Register, Role-based access control)

○ Research Submission (Students upload research projects)

○ Research Review & Approval (Teachers review, provide feedback,

approve/reject)

○ Research Repository Management (Administrators manage stored

projects)

○ Search & Retrieval (Users search for previous research materials)

○ Notifications & Updates (Students/Teacher receive submission status

updates)

○ System Administration (Manage users, data backup, security settings)

Data Stores:
 ○ User Database (Stores student, teacher, and admin credentials)

○ Research Repository (Stores submitted and approved research projects)

○ Notifications Database (Stores system updates and status changes)

The figure above shows how the system begins with User Authentication
(Login/Register), where users (students, teachers, or admins) attempt to log in. The
Login/Register process serves as the entry point, verifying user credentials before
granting access. If a user is new, they must complete the Registration process by
providing details such as name, email, and password, which are securely stored in the
User Database. This database maintains records of all users and facilitates future
logins by verifying credentials. Returning users undergo authentication, where the
system checks their credentials against stored data. If correct, they proceed based on
their assigned role; if incorrect, they are prompted to re-enter their credentials.

Based on their role, students proceed to Research Submission, teachers move

to Review & Approval, and admins enter System Administration. In Research
Submission, students upload their research projects, which are temporarily stored in
the Research Repository until reviewed. These submissions can later be searched and
retrieved.

During Research Review & Approval, teachers evaluate research and provide
feedback. If approved, the research moves to the Approved Research Repository; if
not approved, the system sends feedback via the Notifications Database, prompting
the student to revise and resubmit. The Search & Retrieval feature allows all users
(students, teachers, and admins) to access research from the Research Repository for
various purposes, such as viewing submissions, reviewing projects, or retrieving data
for administrative use.

The Notification System keeps users informed through automated updates.

Students receive a confirmation upon submission ("Your research has been
successfully submitted for review."). If a teacher approves the research, a notification
states ("Your research has been approved and stored in the repository."). If not
approved, feedback is sent ("Your research needs revision. Check feedback and
resubmit."). Upon re-submission, another notification informs students that their work
is under review. Admins can also send system updates regarding maintenance or
backups. Notifications are stored in the Notifications Database, accessible upon login,
with optional email or SMS integration for external alerts.

Entity Relationship Diagram

The Entity-Relationship (ER) model, and its graphical representation, the ER

diagram, was introduced by Peter Chen in 1976. This model provided a standardized
way to represent data in databases by focusing on entities, attributes, and
relationships. Prior to this, database design lacked a widely adopted method for
conceptual modeling. Chen's work has significantly influenced database design,
evolving over time with different notations and extensions to adapt to more complex
data structures and relational database management systems. The ER model's core
concepts remain fundamental in modern database design, even with advancements
like object-oriented and NoSQL databases.(Chen, P. P. 1976). An entity relationship
diagram (ER diagram or ERD) is a visual representation of how items in a database
relate to each other. ERDs are a specialized type of flowchart that conveys the
relationship types between different entities within a system. They use a defined set of
symbols, including rectangles, ovals and diamonds, and link them with connecting
lines.

Figure 4.
Main Entities;
● User
● Research
● Review
● Notification
● System
● Admin
Attributes:
● User → userID, firstName, lastName, email, password, role
● Research → researchID, title, author, abstract, filePath, submissionDate,
status
 ● Review → reviewID, researchID, reviewerID, comments, decision,
reviewDate Notification → notificationID, recipientID, message,
timestamp, status
● System Admin → adminID, userID, manageUsers, manageResearch,
manageSystemSettings
Relationships:
● User submits Research → (1:N) → One user can submit multiple research
papers
● Research is Reviewed by Teacher → (1:N) → One research paper can have
multiple reviews
● Review is assigned to Research → (N:1) → Multiple reviews can belong to
one research paper
● Notification is sent to User → (N:1) → Multiple notifications can be sent to
one user A
● dmin manages Research and Users → (1:N) → One admin can manage
multiple research papers and users .

The Entity-Relationship Diagram (ERD) represents the structure of a research

management system, showcasing how different entities interact with each other. The
system revolves around five key entities: User, Research, Review, Notification, and
System Admin. Each entity has its own attributes and relationships, ensuring efficient
management of research submissions, reviews, and system notifications.

The User entity includes attributes like UserID, Fullname, Email, Password,
and Role. Users, such as students or teachers, submit research papers to the system,
forming a one-to-many (1:N) relationship where one user can submit multiple
research papers. The submitted research is stored in the Research entity, which
contains attributes like ResearchID, Title, Author, Abstract, FilePath,
SubmissionDate, and Status. Once submitted, research papers undergo a review
process, where a teacher provides feedback. This creates a one-to-many (1:N)
relationship between research and reviews, meaning one research paper can have
multiple reviews.

The Review entity manages evaluations, storing ReviewID, ResearchID,

ReviewerID, Comments, Decision, and ReviewDate. Each review is linked to a
specific research paper, forming a many-to-one (N:1) relationship, where multiple
reviews can belong to one research submission. Notifications are generated when a
research paper is reviewed, informing users about status updates. The Notification
entity consists of attributes like NotifID, RecipientID, MessageID, Timestamp, and
Status. It maintains a many-to-one (N:1) relationship, meaning multiple notifications
can be sent to one user. Overseeing the entire process is the System Admin,
responsible for managing users and research papers. The System Admin entity
includes attributes such as AdminID, UserID, ManageUser, ManageResearch, and
SystemSettings. An admin can manage multiple research papers and users, forming a
one-to-many (1:N) relationship.

Use Case Diagram

The Use Case Diagram originated from Use Case Modeling, introduced by
Ivar Jacobson in 1986 while working at Ericsson. He used use cases to describe
functional requirements in a structured and visual way. In 1992, he refined the
concept further in his book "Object-Oriented Software Engineering: A Use Case
Driven Approach."

By the mid-1990s, Grady Booch, James Rumbaugh, and Ivar Jacobson

combined their work to create Unified Modeling Language (UML). When UML 1.0
was officially released in 1997, Use Case Diagrams became a standard tool for system
modeling. Over the years, UML evolved, and Use Case Diagrams became widely
used in software development, especially in Agile, Object-Oriented Design (OOD),
and Business Process Modeling.

Today, Use Case Diagrams remain essential in web applications, mobile apps,
enterprise systems, and AI-based systems. Modern UML versions (UML 2.x) have
refined them, but their main purpose remains the same: to visually represent user
interactions with a system in a clear and simple way.
 Figure 5.

This diagram represents the process a user follows in a LCC Research Hub. It
starts with the user registering an account before they can log in. Once logged in, the
user can view research papers and then proceed to browse research papers.
Additionally, the user has the option to either upload a new research paper or update
an existing one. The process concludes when the user finishes browsing or managing
research papers.

System Architecture

System architecture diagrams have evolved alongside advancements in

computing technology. In the early days of computing, mainframes dominated, and
system structures were monolithic, with all processing, storage, and user interaction
happening within a single machine. During this period, flowcharts and block diagrams
were commonly used to represent system architecture.

As personal computers and networks became widespread in the 1980s and

1990s, the client-server model emerged, introducing a division between frontend
(client) and backend (server) components. Databases such as Oracle, SQL Server, and
MySQL were developed to improve data management.

With the rise of the internet in the 2000s, web-based architectures became
more complex. The three-tier architecture became a standard, consisting of a
presentation layer (frontend), an application layer (backend), and a data layer
(database). Load balancers and middleware were introduced to enhance system
scalability and reliability.

In the 2010s, cloud computing and microservices revolutionized system

architecture. Cloud platforms like AWS, Google Cloud, and Azure enabled businesses
to scale applications more efficiently. Microservices replaced monolithic
architectures, allowing independent services to communicate via APIs. Technologies
like Docker and Kubernetes further enhanced system orchestration and deployment.

Today, serverless computing is gaining popularity, reducing the need for

managing traditional servers. AI-driven architectures are automating system
management, while decentralized and blockchain-based architectures are emerging
for secure and transparent transactions. As technology continues to evolve, system
architecture diagrams will remain essential in designing scalable and efficient digital
systems.

Fig
ure 6.
 This diagram represents the architecture of the LCC Research Hub: A
Responsive Web Research Management Application. Below is an explanation of each
component and its role in the system.

1. Frontend (UI)

● The frontend is the user interface where students and administrators interact
with the system.

● It sends requests to the backend server whenever a user performs an action,

such as searching for research papers, submitting documents, or managing
research data.

● Technologies used may include HTML, CSS, JavaScript, and frontend

frameworks like React or Vue.js.

2. Backend (Server)

● The backend server processes all requests from the frontend and acts as the
bridge between the database, admin panel, and cloud hosting.

● It handles business logic, user authentication, and data processing.

● This is typically built using Node.js, Django, Laravel, or other backend

frameworks.

3. Database

● The database stores all research papers, student submissions, user accounts,
and system logs.

● The backend communicates with the database to retrieve, update, delete, or

insert data as needed.

● Common database management systems include MySQL, PostgreSQL, or

MongoDB.

4. Admin Panel
 ● The admin panel is a separate interface where administrators manage research
papers, users, and system configurations.

● It allows administrators to approve or reject submissions, monitor research

progress, and generate reports.

● The backend ensures that only authorized users can access this panel.

5. Cloud Hosting

● The cloud hosting service is where the backend, database, and other system
resources are deployed.

● It ensures scalability, availability, and security of the application.

● Services like AWS, Google Cloud, or Azure can be used to host the system.

Wireframes and Mockups (Base on the prototype)

Wireframes

Wireframe is a low-fidelity design tool applied in planning and organizing

user interfaces prior to development. It originated in the 1970s in the form of basic
sketches with emphasis placed on layout and location of things more than visual
aspect. With digital products increasing in complexity, computer software such as
Visio, Balsamiq, then Figma and Adobe XD, assisted in standardizing wireframing
into an interactive, collaborative process.

By the early 2000s, wireframing had become an integral part of user

experience (UX) and user interface (UI) design as a communication tool between
stakeholders, designers, and developers. With responsive design becoming more
prevalent and the rise of sophisticated prototyping tools, wireframes had evolved
beyond the use as static sketches to include high-fidelity prototypes and usability
testing as a means of refining digital products before mass development.
Figure 7.

Figure 8.

Figure 8.
 ● Login Page:
● Email input field
● Password input field
● Enter credentials and click "Login" → Navigates to Dashboard
● Incorrect credentials → Shows error message

Mockups

Mockup is a static visual representation of a design employed widely in product

design, UI/UX, and graphic design to demonstrate how a final product is supposed to
appear. Mockups reveal greater detail than wireframes; however, they do not have the
complete function characteristic of a prototype. Mockups integrate typography, color,
images, and layouts to allow stakeholders to see the final product realistically before
actual development. Mockups originated from their early days in industrial design and
architecture when early physical mockups were created to provide a visual
presentation of projects before the commencement of construction or manufacturing
processes. With technology advancements, mockups developed into their digital
versions that are employed in software, web, and graphic design.
 Figure 9.

● Login Page
● User enters email and password.
● Clicks the "Login" button.
● if credentials are correct → Redirects to the Dashboard.
● If incorrect → Shows an error message.
● Dashboard
● User lands on the main dashboard.
● Options available:
● Capstone Projects → Click "View" to see project details.
● Researchers → Click "View" to see researcher profiles.
● Systems → Click "View" to explore available systems.
● Navigation:
● Search bar (for finding capstones or researchers).
● Navigation buttons (Capstones, Researcher, Menu).
 CHAPTER 3

METHODOLOGY

Research Design

Population and Sample

Research Instrument/s

Data Collection

Analysis of Data
Statistical Method/s Used
References

Andriole, S. (2010). Business impact of Web 2.0 technologies. Communications of

the ACM, 53(1), 67–79. https://dl.acm.org/doi/10.1145/1859204.1859225

Ahmed, A. E. M. (2024). Inventory management. IntechOpen.

https://www.researchgate.net/publication/377950441_Inventory_Management

Austin, C. (2023). DBMS (Database Management Systems). Splunk.

https://www.splunk.com/en_us/blog/learn/dbms-database-management-
systems.html

AsmitaKharat, PriyankaBhosale, SonaliGupta, ShwetaBarshe (2018) Responsive

Web Design https://www.irjet.net/archives/V5/i2/IRJET-V5I2397.pdf

Ben, L. (2025). Access control. TechTarget.

https://www.techtarget.com/searchsecurity/definition/access-control

Bhanarkar, N. P, Aditi. M, Ashima (2023), Responsive Web Design and Its

Impact on User Experience
https://www.researchgate.net/publication/370134359_Responsive_Web_Design_a
nd_Its_Impact_on_User_Experience

Brett S Gardner (2011), Responsive web design: Enriching the user experience
https://scholar.google.com/scholar?
hl=en&as_sdt=0%2C5&q=RESPONSIVE+WEB+RESEARCH+MANAGEMEN
T+APPLICATION+
+related+STUDIES+&btnG=#d=gs_qabs&t=1742627817593&u=%23p
%3Dt9myHBvUGAkJ

Charland, A., & Leroux, B. (2011). Mobile application development: Web vs.
native. Communications of the ACM, 54(5), 49–53.
https://dl.acm.org/doi/epdf/10.1145/1941487.1941504

Chia, A. (2023). DBMS (Database Management Systems). Splunk.

https://www.splunk.com/en_us/blog/learn/dbms-database-management-
systems.html

Choudhary, S. (2011). Detecting cross-browser issues in web applications.

Proceedings of the International Conference on Software Engineering (ICSE),
1146–1148. https://dl.acm.org/doi/10.1145/1985793.1986024
Choudhury, N. (2014). World Wide Web and its journey from Web 1.0 to Web
4.0. International Journal of Computer Science and Information Technologies,
5(6), 8096–8100.
https://www.ijcsit.com/docs/Volume%205/vol5issue06/ijcsit20140506265.pdf

Chen, P. P. (1976). The Entity-Relationship Model—Toward a Unified View of Data. ACM

Transactions on Database Systems, 1(1), 9-36. https://doi.org/10.1145/320128.320131

COHESITY. (2025). Backup and recovery. COHESITY.

https://www.cohesity.com/glossary/backup-and-recovery

Danisse Mae P. Hernandez (2021), RESEARCH MANAGEMENT

INFORMATION SYSTEM OF QUIRINO STATE UNIVERSITY
https://ejournals.ph/article.php?id=19515

De Leon, P. (2023). Journal article. Journal of Management and Development

Studies. https://jmds.upou.edu.ph/index.php/journal/article/view/92?utm_source

Denscombe, M. (2008). Communities of practice: A research paradigm for the

mixed methods approach. Journal of Mixed Methods Research, 2(3), 270-283.
https://www.elsevier.es/en-revista-european-journal-management-business-
economics-487-articulo-mixed-methods-research-an-opportunity-
S244484511630012X

Dictionary.com. (2025). Student. https://www.dictionary.com/browse/student

DIGITEUM TEAM (2024), Single-page application definition and use cases

https://www.digiteum.com/single-page-applications-benefits-features-use-cases/?
utm_source

Dipongkor, A., & Hoque, M. (2012). Online inventory management system.

Scribd. https://www.scribd.com/doc/122291039/Online-Inventory-Management-
System

Duru, U. (n.d.). Development of an online sales and inventory management system.

Academia.edu.
https://www.academia.edu/29683577/DEVELOPMENT_OF_AN_ONLINE_SAL
ES_AND_INVENTORY_MANAGEMENT_SYSTEM

Excel Philip B. Guidang (2016), The Future of Responsive Web Design:

Challenges and Opportunities in Multi-Device
Compatibilityhttps://www.researchgate.net/publication/380208337_The_Future_
of_Responsive_Web_Design_Challenges_and_Opportunities_in_Multi-
Device_Compatibility
Fernando Almeida, José Monteiro (2017), The Role of Responsive Design in Web
Development.
https://www.researchgate.net/profile/Fernando-Almeida-10/publication/
324131848_The_role_of_responsive_design_in_web_development/links/
5aca790ea6fdcc8bfc84eea8/The-role-of-responsive-design-in-web-
development.pdf?
__cf_chl_tk=f5K7F54PaGzpXwH9ZZsHxJFok4CFVi6k0CtCDaZUKTA-
1742621416-1.0.1.1-JdZ0H2bkikXbIHSN0lPrlEdQTsZ6hSLLYcGGf55gcRg

Gantz, S. D., & Philpott, D. R. (2013). Information system. ScienceDirect.

https://www.sciencedirect.com/topics/computer-science/information-system

Gyoji A. Kato, Jay Yamongan, Joshua Miguel N. Manao, Rex Albert A. Arcega,
Renz Leonard E. Espino, Ronnel D. S. Capili, and Jo-Ann Magsumbol (2022),
Emerging Technologies in the Philippines: Internet of Things (IoT)
https://www.researchgate.net/publication/364608156_Emerging_Technologies_in
_the_Philippines_Internet_of_Things_IoT

Heitkötter, H., Hanschke, S., & Majchrzak, T. A. (2012). Evaluating cross-

platform development approaches for mobile applications. In Web Information
Systems and Technologies (pp. 120–138). Springer.
https://link.springer.com/chapter/10.1007/978-3-642-36608-6_8

ISA. (2026). What is automation? ISA. https://www.isa.org/about-isa/what-is-

automation

Indeed Editorial Team. (2024). User interface. Indeed.

https://www.indeed.com/career-advice/career-development/user-interface

Jasmeen Kaur (2024), The Future of Responsive Web Design: Challenges and
Opportunities in Multi-Device Compatibility
https://www.researchgate.net/publication/380208337_The_Future_of_Responsiv
e_Web_Design_Challenges_and_Opportunities_in_Multi-Device_Compatibility

JCRINN. (2024). Journal article. JCRINN.

https://jcrinn.com/index.php/jcrinn/article/view/465

Kappel, G., Pröll, B., Reich, S., & Retschitzegger, W. (2006). Web engineering.
John Wiley & Sons. https://archive.org/details/webengineeringdi0000unse

Karen Adorico and Fe Yara (2024), Mobile-Web Responsive Portal for St. John
Paul II College of Davao Applying Predictive Analytics Techniques
https://www.researchgate.net/publication/381229033_Mobile-
Web_Responsive_Portal_for_St_John_Paul_II_College_of_Davao_Applying_Pr
edictive_Analytics_Techniques

Kassiani, N. (2022). Purposive sampling. Scribbr.

https://www.scribbr.com/methodology/purposive-sampling
Lyubov Filippova, Rostislav Svidelskyi (2016), Research of key approaches to
responsive website development and their practical application
https://cyberleninka.ru/article/n/research-of-key-approaches-to-responsive-
website-development-and-their-practical-application

Marcotte, E. (2010). Responsive web design. A List Apart.

https://alistapart.com/article/responsive-web-design

MATEC Conferences. (2017). GCMM 2017 – Research Paper.

https://www.matec-conferences.org/articles/matecconf/abs/2017/14/matecconf_gc
mm2017_02045/matecconf_gcmm2017_02045.html

Meta, M. (2018, June 30). 5 mind-blowing statistics about responsive web design.
Medium. https://medium.com/@muthumeta/5-mind-blowing-statistics-about-
responsive-web-design-c610798033d8

Meltem Huri Baturay and Murat Birtane (2013), Responsive Web Design: A
New Type of Design for Web-based Instructional Content
https://www.researchgate.net/publication/275543130_Responsive_Web_Design_
A_New_Type_of_Design_for_Web-based_Instructional_Content

Merriam-Webster. (2025). Book inventory. Merriam-Webster.

https://www.merriam-webster.com/dictionary/book%20inventory

Merriam-Webster. (2025). Research. Merriam-Webster. https://www.merriam-

webster.com/dictionary/research

Rudman, R., & Bruwer, R. (2016). Defining Web 3.0: Opportunities and
challenges. The Electronic Library, 34(1), 132–154.
https://www.emerald.com/insight/content/doi/10.1108/el-08-2014-0140/full/html

Sagjin Yoo (2003).

https://www.sciencedirect.com/topics/computer-science/context-diagram

Smith, C. U., & Williams, L. G. (2000). Building responsive and scalable web
applications. Software Engineering Research and L&S Computer Technology,
Inc. Proceedings of the Computer Measurement Group Conference.
https://d1wqtxts1xzle7.cloudfront.net/79195837/map.pdf