GORDON COLLEGE - COLLEGE OF COMPUTER STUDIES ALUMNI
PORTAL USING PROGRESSIVE WEB APPLICATION
CUARESMA, JAYVEE A. MANALABE, PATRICK B.
Gordon College, CCS Gordon College, CCS
Purok 1, Brgy Tipo, #17, Tagak Street,New Cabalan,
Hermosa Bataan, Philippines Olongapo City, Philippines
jayveecrsma@gmail.com manalabepatrick@gmail.com
ABSTRACT
A person who has previously attended a school,
college, or university is known as an alumnus or alumna.
Keeping track of its graduates is one of an institution's specific
responsibilities. And one of the most effective ways to promote a
school is to present real-world examples of students' triumphs
and to assess if the knowledge they received in class helped
them pick the appropriate career path. To replace the current
system, an online survey form, the researchers developed the
Gordon College - College of Computer Studies Alumni Portal
(CCSAP), a Progressive web application using the agile
methodology to develop with short production cycles that allow
for quick production and frequent review. By maintaining the
gathered alumni data and student accomplishments that can be
used to guide their development and make it simple to access or
check the alumni's potential occupations, an alumnus tracking
system is important for managing the school's alumni and
assisting in the advancement of their careers. The Gordon
College - College of Computer Studies Alumni Portal (CCSAP)
also aids Gordon College in keeping track of its students and
gives alumni a platform for interaction and cooperation. The
system may be improved with a variety of new capabilities, and
in the future, its use may be extended to encompass all Gordon
College graduates, not only CCS graduates.
KEYWORDS: Alumni, GC-CCS, Alumni Tracking
1. INTRODUCTION
Keeping track of alumni is critical for any educational
institution. To verify, archive, and research the learning
institutions and alumni, accurate information about alumni is
required to validate the knowledge gap between the graduates
and industries to determine the effectiveness of the college
through the achievements of its alumni. Alumni Tracking System
is an online-based application that helps to keep track of college
graduates and it provides alumni data to the college faculties
(Jaiswal et.al, 2021).
Connecting to alumni is not easy because after they
graduate most of them are updating their information and
location. That's why the information about alumni in an institution
is usually outdated. The importance of an alumni tracking system
is to manage the resources of your school and to help further the
career gather information on how well students and graduates
are meeting the goals of a program or department by maintaining
the collected Alumni data and students’ achievements that can
be used to guide their development and for easy access to the
possible occupations for the alumni. This can be a valuable
TIMBAS, RAVEN D.
Gordon College, CCS
1369 Tabacuhan Street, Santa Rita,
Olongapo city, Philippines
201810624@gordoncollege.edu.p
resource for them Tom &Leung (1996), Skipper (2004),
Walvoord (2004).
The Alumni Tracking system's capabilities include the
creation of alumnus and employer profiles; To begin a career,
internship, seminars, or investment possibilities; Users can also
publish announcements and networking opportunities with other
graduates; To keep track of activities held by the school and
alumni; to create reports, and to allow users to interact with one
another. (Cordova, Maata, & Epoc, 2020).
Progressive Web App (PWA) uses the latest web
technologies and browser support to deliver an app-like
experience to users. PWAs have better performance and
improve user retention and engagement compared to traditional
web and mobile development. Unlike native applications, the
PWAs file size is small and because of that, the installation is
faster. Developers can also deploy and maintain the app
simultaneously (Room, C. Progressive Web Applications). 
A web application is computer software that performs
activities via the Internet by utilizing web browsers and web
technologies. Web applications are often written in a browser-
supported language, such as JavaScript or HTML because these
languages rely on the browser to make the program executable.
Some of the apps are dynamic, necessitating server-side
processing. Others are static, requiring no server activity (Gibb,
2016). 
A mobile app is a software program designed
particularly for use on tiny, wireless computing devices like
smartphones and tablets, as opposed to desktop or laptop PCs.
Mobile applications are frequently classified depending on
whether they are web-based or native apps, which are designed
particularly for a certain platform. The third type of app, hybrid
applications, incorporates features from both native and web
apps. As the technologies evolve, it is predicted that efforts to
build mobile apps will center on the construction of browser-
based, device-agnostic Web applications (Wigmore, 2013). The
alumni tracking system aims to create a web and mobile
application since a web application does not need to be
downloaded or installed, but a mobile application provides more
capability because it has access to system resources. 
1.2 STATEMENT OF THE OBJECTIVE
The objective of this project is to find a possible solution
for tracking information about Gordon College, College of
Computer Studies alumni, and its possible contribution to the
improvement and innovation of study programmers and Gordon
College as a whole.
1.3 SCOPE AND LIMITATION
Scope of the Project
 The administrator can validate alumni using this
application by comparing alumni information to
institution data.
 The alumni post can be moderated by the
administrator.
 The administrator can read the general summary of
the report and generate it.
 Alumni can view the institution's news and
participate in events and forums organized by the
institution and other alumni.
Limitation of the Project
 Alumni cannot communicate directly using the
application because the system does not have a
chat system.
 Alumni cannot communicate directly using the
application because the system does not have a
chat system.
 Cannot format Event/Forum post text.
1.4 SIGNIFICANCE OF THE STUDY
This study will greatly benefit the following people
mentioned here who will be the beneficiaries of this web-based
and mobile application:
a) Gordon College, College of Computer Studies: The
Gordon College, College of Computer Studies admin
does not have an application that allows them to track
down the alumni, which includes data related to the
different information about the institution and its alumni
that is readily updated and maintained. It is critical for
both the Alumni and the College of Computer Studies
administration to build their networks and discover
methods to grow and improve.
b) Alumni: The GC-CCSAP allows Gordon College,
College of Computer Studies alumni to search for and
find other alumni, as well as post and participate in
events posted by other alumni or the admin. These
also allow alumni to reconnect with former colleagues.
c) Future Developers: In the future, this research will fully
guide and assist future developers in improving and
enhancing their projects in the web and mobile development.
2. RELATED LITERATURE
The researchers consider the following related studies when
making their decision to better equip them for system
implementation. These studies aided in the overall identifying the
benefits, challenges, and necessary improvements for this type
of implementation.
2.1 Local Related Studies
Dynamic Alumni Monitoring with Decision Support
System
In a study conducted by Kummer & Batugal (2021), the
availability of a dependable national pool of skilled professionals
is critical in the development of long-term industries and
businesses. It is critical to investigate market needs and quantify
and analyze the supply and demand for graduates' skills and
competencies. In any educational institution, a tracer study is a
potent way of maintaining curriculum relevance and providing
advantages to graduates to improve their marketability and
employability.
Competition in the corporate or industry is rigid due to
the increasing demands in the market because of the rising
number of graduates. As recommended by the Philippine
Accrediting Association of Schools, colleges and universities
should do systematic follow-ups,s and documentation of alumni
are recommended. Any accredited school needs to strengthen
existing links and create new bridges with the world of work,
especially among its graduates.
The study concluded that university graduates are
poorly trained and unproductive on the job, graduate skills have
steadily deteriorated over the past decade, and shortcomings are
particularly severe in oral and written communication, and
applied technical skills. Remedial courses are prepared by
employers to compensate for the insufficient academic
preparation for new employees but this increases the firms’
operating costs and reduces their profitability and
competitiveness.
Identifying the graduate's lack of skills and
competencies is a chance for the college/university to progress
in terms of Its curriculum, instructions, and a strong faculty
complementing each other. “How can the university determine
the employability of their graduates? Are they gainfully
employed? How can one measure the acquired skills and
competencies of the graduates? How quickly can these be
monitored to acquire immediate results?”.
Tracer studies help give important information about the
skills and achievements of graduates. It is important to find out
the overall performance and skills of graduates that they have
developed for evaluation of the training provided by an institution.
The researchers, in collaboration with the deans, the program
coordinators, as well as the university alumni coordinator.
Meetings were organized by the university registrar to identify a
problem in locating university alumni. These individuals have a
good grasp and comprehension of the tracking challenges of the
former students. Each member has contributed to the
identification of the problem. The issues and challenges raised
by members were structured and directed, which resulted in a lot
of results. information in a relatively short period The issues and
difficulties encountered in tracking the graduates of The
university were presented.
2.2 Foreign Related Studies
Alumni Satisfaction with Their Undergraduate
Academic Experience and the Impact on Alumni
Giving and Participation
According to a study entitled "Improving the
Performance of Alumni Achievement Assessment by Integrating
Website-Based Tracer Study Information Systems and Telegram
API" (Sucipto, Dewi, Resti, Santi (2021)). It is the mission of
Vocational High School (SMK) education in Indonesia to produce
highly competitive and skilled graduates. One standard for
evaluating the success of vocational education is assessing the
achievements of alumni. The evaluation process can be carried
out with programmed alumni tracking activities or commonly
known as tracer studies. However, the implementations of tracer
studies that have been carried out by vocational schools in Kediri
are still using the manual method. These conditions make the
school find many obstacles in the implementation of tracer
studies.
 The higher the level of academic satisfaction, the more
likely it is for alumni to be involved with the university. One of the Web Application
major sources of finance for a university is its alumni. According
to Johnson and Eckel, a financial contribution is the most
recognized form of alumni involvement. Alumni can also serve RAM 1 GB for 32-bit
the university by participating in events. 2GB for 64-bit
Several factors, according to the research literature, PROCESSOR 1 Gigahertz (GHz) or
influence alumni to contribute financially to their alma mater: faster
1. Participation in the institution as an undergraduate 32bit(x86) or 64-
student.
2. Alumni involvement with their alma mater. bit(x64)
3. Tradition and prestige of the institution.
4. Individual alumni economic success.
5. Emotional attachment and relationship quality between
alumni and their alma mater. Mobile Application
During their college experience, the relationship between
alumni and the college is developed, and this relationship will Android 4.4 (KitKat)
influence the decision regarding their interaction with the Version
university. a large number of formal theories about the college
experience are researched for many decades. The two main Table 1. Hardware Requirements
reasons for utilizing the impact on the research are the
description of the college environment which helps identify Considering the project, strictly defining hardware
factors associated with the college experience and Many of requirements is not wise. By the time the number of users
these environmental factors are available to universities. This increases, the hardware requirements themselves will change.
means that the university has the ability to significantly influence As a baseline, the developers need a computer with 1 GB of
and control factors that shape students' perceptions of their ram for 32-bit and 2 GB of RAM for 64-bit. Nevertheless, as the
college experience. number of users increases, some enhancements to hardware
The primary goal of this study was to look into the configuration must be considered:
connection between alumni satisfaction with their undergraduate
academic experiences and their subsequent involvement as 3.1.2 Software Requirements
alumni. According to the findings of this study, there were
significant increases in both alumni giving and alumni
NAME SPECIFICATION
participation based on alumni satisfaction with their
undergraduate academic experience. Windows 8 (minimum
Operating System
recommendation)
3. METHODOLOGY, RESULT AND DISCUSSION Android Version 4.4 (KitKat) or higher
Web browser Any web browsing software
DBMS MySQL Server
Table 2 Software Requirements

3.1.3 Development Environment Requirements

 HTML
 CSS
 JavaScript
 Bootstrap
 MySQL
 XAMPP
 NodeJS

Figure 1. Agile Software Development Life Cycle 3.1.4 Functional Requirements

The research team created a test strategy and a
collection of test cases before constructing the CCSAP
application. The system's supporters adhered to the traditional
software development process cycle, which is the agile
methodology.
3.1 REQUIREMENT ANALYSIS SYSTEM
3.1.1 Hardware Requirements
Alumni Portal (Mobile & Web)
The Gordon College – College of computer studies
alumni portal allows users to sign in and register their profile.
Verified users can post and interact on forums, view and join
events, view news from Gordon College, and update their
profiles.
Admin Portal (Web)
Admin portal manages the users that are trying to
sign in to the web application, admin can accept or decline
verification requests as well as post events and view alumni 3.3 DESIGN OF SOFTWARE, SYSTEMS, PRODUCT,
statistics. Admin can generate a report about the alumni that OR PROCESSES
are registered through the system.

Administrator (Web-based)
As for the Administrator, he or she can monitor all
the registered scholars and managers. The administrator
is the only one who can accept a manager's account
application for the managers to continue.

3.2 REQUIREMENTS DOCUMENTATION

3.2.1 Purpose
The main purpose of the Gordon College –
College of computer studies alumni portal is to assist
Gordon College in collecting alumni information as well Figure 3.3.2 Data Flow Diagram
as to help build an alumni network for Gordon College
alumni. A data flow diagram was produced by the developers to
depict a much more thorough flow of data between system
3.2.2 Project Description
modules and how it is processed. A data flow diagram (DFD)
The CCSAP or the Gordon College – College
depicts how information flows through a process or system. 
of Computer Studies Alumni Portal is a progressive web
application that may serve as a substitute/replacement
for the conventional online survey form. This will help
the alma mater preserve and manage thorough data
and information on their alumni to avoid lack of
information, misunderstanding, and time-consuming
contract processing. The characteristic of this proposed
idea is the creation of an alumnus profile and an
employer profile. Create a career; Users can post
announcements and discussions to network with other
alumni; Maintain records of events conducted by the
school and alumni; Allow users to communicate with
each other; generate reports.

3.2.3 Project Requirements

The Project Requirements are divided into Figure 3.3.2 Flowchart

three sections:
3.2.3.1 Non-Functional Requirements
3.2.3.1.1 User Authentication and Permission
 All users shall be required to log in with the
correct username and password.
 All users must not allow seeing the admin(s),
both on the web and mobile.
3.2.3.1.2 System Operation Functionality (WEB
& MOB)
 The application is applicable when the
Internet or mobile data is connected.
 The application must be available on mobile
devices.
 The application must provide a web-based
system.
 The admin(s) should ensure that only allowed
registered users can use the app itself.
The developers constructed a flowchart to virtually
examine the logic between transactions and user inputs to
visualize the logical flow of the system with its sequence of
stages and decisions and to highlight the major operations,
inputs, and outputs of a system.
3.4 DEVELOPMENT AND TESTING
After gathering the requirements for the system, the team
develops the project by using the agile method by constant
collaboration and working interaction between the developers
and the users. After developing the required requirement, the
developers let the users use and test the system to check for
bugs and if the requirement of the users has been met.
Each cycle includes testing, and the final product must
also undergo final testing. For this phase, you can use Scrum
and the Kanban methodology, the development process based
on individual tasks.
3.5 DESCRIPTION OF THE PROTOTYPE
Proponents employed rapid prototyping, often known as
"throwaway prototyping." This form of prototype is only useful in
a short-term project, such as one sprint in a software
development cycle. Using this prototype, the proponents have a
better grasp of the client's genuine demands before developing a
system. This prototype will save the developers money and
energy while somehow developing uniformity in user interface
design and guaranteeing the beneficiary that their needs are
met.
3.6 IMPLEMENTATION PLAN (INFRASTRUCTURE AND
DEPLOYMENT)
The researchers wanted to provide a platform for GC-
CCS alumni to update their profiles and collaborate with their
alma mater and help Gordon College keep track of alumni
records. The scope of this project is the GC-CCS Alumni.
Keeping Track of the graduates is one of the responsibilities of
an institution, the goal of the researchers for creating this project
is to provide an avenue to connect Gordon College and its
alumni. GC-CCS alumni's role is to provide feedback or
suggestions to make the project possible using the information
they provided as well as the suggestions of the GC-CCS
department because they are the ones who will manage the
information that will be gathered through the proposed project.
The researchers should be the ones to compile the suggestions
of both users and brainstorm answers based on the user’s
questions, they are also the ones to develop the system.
The first thing the research developers will do is to
gather information through the online survey and record
feedback from GC-CCS alumni as well as the GC-CCS
personnel who will handle the system. After gathering the
feedback and forming the solution to the problem, in the following
months the researchers should create a prototype or a sample of
the project and improve the prototype in the following months to
finish the project. The resources needed to create the project are
at least an Intel Core i5 or i7 processor. Full HD resolution,
ideally 1920×1080. 8GB of RAM computer and the technologies
that the research developers will be using are AngularJS,
NodeJs, and MySQL database.
The project's success will be defined by the increased
amount of collaboration between the alumni and Gordon College,
also a target of 50 or more GC-CCS alumni registered through
the system. Many challenges may arise during the development
of this project, although all of the features of the system are
important if the schedule is tight the research developers should
focus on the main purpose or feature of the application based on
the information that they gathered.
3.7 Deployment
During this step of the software development cycle,
consumers can access the program. Once the software testing
process is done and no problems or mistakes remain in the
system, the final deployment procedure begins. The scale of the
project determines the difficulty of the deployment.
3.7.1 Operations and Maintenance
The last step includes maintenance and any necessary
changes. This phase is for end-users who wish to fine-tune the
system to improve performance, add new features, or meet extra
user demands. This stage guarantees that the system continues
to meet user requests and functions as planned in the first
phase.
3.8 IMPLEMENTATION RESULT
The GC-CCSAP Progressive Web Application Service
was created with administrators and alumni in view. It was
created with the AngularJS Framework for the basic application
and NodeJS for the back-end API of the application. After
several improvements and testing the application users become
satisfied with the system. The users find it easy to use and
interesting, Users of the system can be assured that the
information that they give on the application will stay confidential
and secure. Although the users are satisfied with the current
feature of the application, the Gordon College - College of
Computer Studies Alumni portal proponents still have
recommendations for the future developers of the application that
will improve the overall functionality and user experience.
3.9 CONCLUSIONS AND RECOMMENDATIONS
CONCLUSIONS
Alumni are one of the foundations of an institute, alumni
serve as living proof of the achievements of a college. Alumni
information such as work, location, salary, etc. is important to
gather for the improvement of a curriculum. Alumni tracking
systems are developed to solve the problem of having a hard
time keeping the record of graduate students. For Gordon
College, the researchers created the project Gordon College -
College of Computer Studies alumni portal to keep track and
analyze the information coming from the CCS alumni. The portal
can be used to give updates to alumni as well as to create
events that enable the alumni to respond to. During the
development and testing, the user’s recommendations are added
to the application along with the additional features that improve
the system.
While the result is positive, there are still functions that
cannot be added to the project because of the time frame and
can be added for future developers. The connection between the
Alumni and their alma matter should be strengthened through
collaborations and getting updates, Alumni should not forget to
look back at the school they have graduated from. Gordon
College keeps the information of the alumni secured and by
using the College of Computer Studies Alumni Portal the college
can maintain, analyze and collaborate with its alumni.
4. RECOMMENDATION
Based on the findings and conclusions, the following
recommendations were provided by the developers:
To Alumni - Providing valid and accurate information is
critical to the success of GC-CCSAP, this information will be
used by Gordon College and will not disclose any information to
any 3rd party unless there is a legal basis for the disclosure.
To Admin - The primary purpose of the proposed
system is to trace the status of Gordon College - College of
Computer studies alumni. It is recommended that the person
who will handle the admin side is a part of the College of
Computer Studies faculty because the information on the system
is very confidential.
To the future developers – many features can be
added to the current GC-CCSAP, one of the recommended
future features for the application is a job posting feature where
alumni can post job offers and other alumni can respond to it.
Currently, the proposed system scope focuses on the college of
computer studies alumni but it can be expanded to trace the
alumni of other departments as well.
5. BIBLIOGRAPHY
[1] Jaiswal, S., Gaud, S., Ansari, S., & Gaikwad, R. (2021).
Alumni Tracking System. International Research Journal of
 Engineering and Technology. [11] What is Node.js: A Comprehensive Guide. (n.d.).
8(4).https://www.irjet.net/archives/V8/i4/IRJETV8I4463.pdf Simplilearn.Comwww.simplilearn.com.Retrieved June
[2] Room, C. Progressive Web Applications. 13,2022,from https://www.simplilearn.com/tutorials/nodejs-
[3] Capili-Kummer, M. G., & Corpuz-Batugal, M. L. Dynamic tutorial/what-is-nodejs
Alumni Monitoring with Decision Support System. [12] Systems Development Life Cycle Software Development
[4] Sucipto, S., Dewi, E. K., Resti, N. C., & Santi, I. H. (2020). Process Computer Software Technology, Technology,
Improving The Performance of Alumni Achievement
Electronics, Text, Logo Png | PNGWing;
Assessment by Integrating Website-Based Tracer Study
www.pngwing.com. Retrieved June 13, 2022,
Information Systems and Telegram. TEKNIK, 41(1), 72-77.
Ivy Wigmore. (2013). mobile app. WhatIs.Com. fromhttps://www.pngwing.com/en/free-png-hwwtw
https://www.techtarget.com/whatis/definition/mobile-app [13] What is CSS: Cascading Style Sheet Explained for
[5] Gibb, R. (2016, May 31). What is a Web Application? Beginners. (2019, January 13).
Blog.Stackpath.Com. https://blog.stackpath.com/web- https://www.hostinger.com/tutorials/what-is-css
application/ [14] ISO 25010. (n.d.). ISO 25010; iso25000.com. Retrieved
[6] What is CSS: Cascading Style Sheet Explained for June 23, 2022, from https://iso25000.com/index.php/en/iso-
Beginners. (2019, January 13). 25000-standards/iso-25010?limit=3
https://www.hostinger.com/tutorials/what-is-css [15] Capili-Kummer, M. G., & Corpuz-Batugal, M. L. Dynamic
[7] What Is JavaScript? A Basic Introduction to JS for Alumni Monitoring with Decision Support
Beginners. (2021, August 3). System.
https://www.hostinger.com/tutorials/what-is-javascript [16] Gaier, S. (2005). Alumni satisfaction with their
[8] What is Bootstrap — Everything You Need to Know. (2021, undergraduate academic experience and the impact on
August 3). Hostinger Tutorials; alumni giving and participation. International Journal of
https://www.hostinger.com/tutorials/what-is bootstrap/ Educational Advancement, 5(4), 279-288.
[9] What Is Angular? – A Beginner’s Guide. (2019, April 10).
Hostinger Tutorials;
https://www.hostinger.com/tutorials/what-is-angular/
[10] XAMPP Tutorial - javatpoint. (n.d.). Www.Javatpoint. Com;
www.javatpoint.com. Retrieved June 13, 2022,
from https://www.javatpoint.com/xampp