CHAPTER I

INTRODUCTION

The emergence and evolution of technology have brought

significant changes to human society, with advancements that

have catered to the needs of individuals in a fast-paced

environment. Convenience and comfort to people are achieved as

technology gradually shifts from manual to more sophisticated

systems, resulting in a notable improvement in the daily lives

of individuals. The COVID-19 pandemic made online transactions

a now common and safe practice that allows people to conveniently

negotiate with others, sparing the need for physical contact.

The application of technology in the field of education has

simplified students’ access to various learning tools,

materials, and resources online which has greatly benefited

students as they can effortlessly access various scholastic and

educational information.

A web portal is a specially designed website that gathers

and presents data and information in a diverse personalized

manner (Lomas, 2021). Web portals serve as a gateway to a large

amount of information, which are divided into subsections called

portlets or channels accessible to both public and private users

(Aliyu, Barakat, Hussain et. al., 2018). Institutions such as

governments, schools, banks, corporations, and health facilities

utilize web portals to provide information access to their

users. Scholastic and educational institutions, in particular,

use web portals to deliver academic information to teachers and

students. According to Blasabas, Velayo, and Reyes (2013), an

online portal aids and caters to students in accessing

fundamental services offered in a particular university or

school. Through the use of a student portal, a pupil may access

academic information by checking posted grades, uploaded course

materials, class schedules, enrollment information, and the

like.

The advent and onset of the COVID-19 pandemic made the use

of online platforms essential. These digital platforms include

portals designed for schools that facilitate access for students

to virtual classrooms, assignments, and evaluations. Teachers

can interact with students by providing them with guidance and

feedback through this medium. Moreover, these portals allow

schools and universities to carry out administrative tasks such

as attendance tracking and recording and reporting of students’

grades. Additionally, students alongside their parents can

access pertinent information, including schedules, course

materials, and grades, from any place at any time. Because there

is an increasing need for efficacious and efficient

communication between students and teachers alongside other

school personnel and authorities, developing a prototype student

web portal offers a centralized platform by providing a user-

centered approach.

The Sto. Niño Formation and Science School (SNFSS),

formerly known as the Sto. Niño Formation School is a non-

sectarian (predominantly Roman Catholic) academic institution

established in January 1984 that offers basic education programs

in the pre-elementary, elementary, and secondary (both junior

and senior high school, day and night class, including an Open

High School program) levels. As of 2023, the said school hosts

a rough estimate of more or less 3,000 students encompassing

from all levels, the same year wherein the said institution has

celebrated and commemorated its 39th founding anniversary. After

its almost forty-year long of existence, the SNFSS has not yet

developed nor obtained a student portal designed for its

student-teacher community.

The capstone proponent sees the need to provide a system

for both SNFSS students and teachers to be connected efficiently

and conveniently. This will be achieved by developing and

integrating a student portal to establish a unified platform

that offers both parties easy access to the school’s information

and resources, enhancing especially the academic experience of

students. This portal system will provide a range of educational

resources that can be utilized by students to achieve better

progress and outcomes in their respective studies. By using this

system, students can keep track of their daily school activities

and tasks, view lectures and discussion topics, access various

school materials, manage class schedules, and track grades and

academic standing, leading to increased productivity. This

portal not only caters to students of the SNFSS but also

teachers. Teachers and other school authorities can use this

system as a platform for interacting with students by uploading

lesson materials and tasks, posting school announcements and

news, and communicating with them through a chat system.

Common features of student portals employed by various

schools and universities in the Philippines include the

following1:

1. Student profile. This section allows students to view and

edit their personal information (e.g., name, address, e-

mail, and phone number).

1These features are common within the following student portals: Batangas
State University-Main Campus; Lyceum of the Philippines University-
Batangas; University of Santo Tomas; De La Salle Araneta University; and
De La Salle Lipa, among others.
 2. Grades form/s. The teacher will upload a digital report

card or grades form (e.g., Form 137) with an optional list

of academic awardees (honors) for the student to know his

or her grades and academic standing.

3. Academic calendar and semester schedule/s. Course or

subject timetables are posted in the portal for the student

to be informed about when a specific class or period starts

and ends. Schedules change every semester or quarter.

4. Classroom management system. A digital classroom system

includes the uploading and downloading of subject

materials and resources (e.g., syllabus, e-books, and

modules) and student requirements (e.g., performance

tasks, quizzes, and assignments).

5. Enrollment information. Such information includes the

student’s payments and liabilities, enrollment dates and

schedules, accounts receivable, and other enrollment data.

6. Announcements and news. School campus announcements from

the school are also posted to the portal (e.g., campus

activities and news from the school administration).

The abovementioned student portal features will be

integrated into the capstone project for the development of a

prototype student portal template for the student-teacher

community of the Sto. Niño Formation and Science School.

Statement of the Problem

The main objective of this capstone project is to develop

and integrate a multi-purpose school portal for both students

and teachers of the Sto. Niño Formation and Science School.

Because the institution lacks a digital system for accessing and

managing student and school information, this capstone project

aims to create a prototype that will serve as a template to

develop a fully functional SNFSS student portal.

The following are the specific research objectives of the

capstone project:

1. To create a functional prototype that will serve as a

template for the development of a student portal for the

Sto. Niño Formation and Science School.

2. To develop a user-friendly interface for students and

teachers in accessing school information using Graphical

User Interface or GUI.

3. To develop a system that indicates and displays the main

sixfold features of a student portal, namely student

profile, grades form, academic calendar, classroom

management system, enrollment information, and school

announcements and news.

4. To develop a system that contains a profile registration

and log-in form for users.

 5. To develop a system that displays a grades form for

students to track their academic progress and standing.

6. To develop a system that informs students about their class

and semester schedules alongside their respective school

curricula.

7. To develop a system that hosts a classroom management

system wherein teachers can upload learning materials for

students to download and re-upload answered materials to

the teacher.

8. To develop a system that contains enrollment information

(e.g., accounts receivable, enrollment support,

scholarship notices and information).

9. To develop a system that posts related campus

announcements, news, and notices for both students and

teachers.

In accordance with the aforesaid research objectives, the

following are the research questions formulated by the

proponent:

1. How can a Graphical User Interface (GUI) be utilized to

develop a user-friendly student portal using website

building, designing, and coding tools (i.e., Wix, Velo)?

2. What are the fundamental features of a student portal and

how can they be seamlessly integrated into a single system?

 3. What is the best website design and interface for a student

portal suited to the student-teacher community of the Sto.

Niño Formation and Science School?

Significance of the Study

The significance of this capstone project lies in the

potential benefits and advantages it can provide to its

beneficiaries in terms of streamlined communication,

accessibility to school information, and improved academic

performance. Generally speaking, the development and integration

of a multi-purpose student portal have the prospect to enhance

the efficiency, efficacy, and effectiveness of the education

process, leading to better academic outcomes for students.

This capstone project is important to the following groups of

people:

Students. The main beneficiaries of this study are specifically

the students of the Sto. Niño Formation and Science School. The

development of a user-friendly portal system for accessing

school information using GUI can facilitate the dissemination

of pertinent information to students such as their respective

classes, schedules, assignments, and grades, allowing them to

stay organized and on top of their coursework. The integration

of a student portal with the previously stated sixfold features

can amplify the overall learning experience of students by

providing them with a centralized and student-centered platform

to manage their academic activities, communicate with teachers

and other personnel, and receive timely feedback on their

educational performance and standing.

Teachers. SNFSS teachers will benefit from this capstone project

because this student portal will enhance communication and

interaction between them and their students as it allows

accessible uploading and downloading of educational resources

and on-time feedback regarding students’ grades, activities,

deadlines, and overall academic performance, among others.

Furthermore, this is a convenient means of giving students the

required coursework in accordance with their curriculum as it

delivers the required course materials at any time at a distance

without having the need for physical interaction.

School administration and personnel. The proposed student portal

will be instrumental in communication, not only with the

student-teacher community but with other key parties such as the

school administration and authorities and parents of the

students. Much like teachers, the SNFSS administration can use

the portal to disseminate information such as policies

stipulated in the SNFSS Student Handbook, Letters to Parents,

Love Messages, Clearance and Evaluation forms, and other

documents. Integrating a suited student portal for the SNFSS can

augment the reputation and competitiveness of the school because

it offers innovative and technology-driven solutions which

attract prospective students and parents, thereby also improving

the school’s academic and administrative processes.

Parents. As implicitly stated in the previous statements, a

student portal can be used as a channel wherein parents can be

informed about their child’s grades, attendance, and

participation in academic and potentially co- and extra-

curricular activities. An additional feature that provides

academic tools and resources in the form of videos and practice

exercises can be inculcated in the student portal for parents

to access and utilize to help their child with homework or to

reinforce lessons and topics discussed in class.

Future capstone proponents. Senior high school students who are

tasked to create a STEM-based capstone project in the fields of

information technology, information systems, and other related

disciplines will greatly benefit from this project as it

provides knowledge in creating and building a website,

specifically a student portal website using web designing and

programming. Future capstone proponents may be interested in

investigating the effectiveness of the student portal in

achieving the goals of enhancing students’ experience through

digital means, as well as its impact on student learning outcomes

and the overall culture of the SNFSS. Proponents may also seek

to identify best practices and applications for building and

implementing student portals in other educational contexts, with

the aim of improving educational access and equity.

LITERATURE REVIEW

This section presents the discussions on related

literature, studies, and legal bases in correlation with the

capstone project. This consists of various types of literature

found mostly online and some in the form of books and other

physical references. It also contains related studies which

include published research papers such as theses and

dissertations, mostly in digital form. Related legal bases such

as related laws and statutes issued by the Philippine government

are included as well.

Related Local Studies

Castillo and Pedrasa (2017) published a study entitled

“Development of a University Student Portal with Online

Enrollment System” which describes the development of a

tertiary-level student portal with an online enrollment system

in a Philippine university. The portal includes features such

as course registration, viewing of grades, and communication

with professors. An online enrollment system is a key component

of any student portal in order for students or parents to pay

via contactless transactions. Furthermore, this system can

provide real-time enrollment information such as remaining

balance, accounts receivable, and the like.

“Design and Development of a Web-based Student Information

System for a Private College in the Philippines” by Leones,

Turingan, and Villapando (2015) is a study that presents the

design and development of a web-based student information system

for a private college in the Philippines. Features of this portal

include student registration, online class schedules, and

viewing of grades. A web-based student portal will be the format

for this prototype (in contrast with software or application),

meaning it will be compatible with any web browser on any device,

whether it be a desktop or mobile.

Likewise, Azores and Dumas (2017) presented the development

of a web-based student information system for Philippine higher

education institutions in their study entitled “Development of

a Web-based Student Information System for Higher Education.”

Course registration, viewing of grades, and communication with

teachers and other administrative staff are some key elements

included in this student information system. A student

information system must be amalgamated in order to properly

record student data through database management upon registering

on the portal.
 A study entitled “Evaluating the Effectiveness of Learning

Management System (LMS) in a Philippine Tertiary Institution”

by Esposo, Mañibo, and Mendoza (2017) evaluated the

effectiveness of a learning management system (LMS) in a

Philippine collegiate institution, including a student portal

as one of its features. The study examines factors such as user

satisfaction, system quality, and information quality. LMS

refers to a software application designed specifically for

performing tasks such as administration, documentation,

automation, and delivery of educational courses and learning

programs (Ellis, 2009). Because LMS has faced a massive growth

in usage due to online distance learning during the COVID-19

pandemic (cf. Qazi, et. al., 2021), there have been increasing

demands to develop akin software and sites, one of which is a

student portal. A portal is a convenient means of delivering

various school services to its user, making it an effective LMS.

A related study by Fajardo and Fortes (2019) entitled

“Development of a Web-based Student Attendance Monitoring System

for Philippine Science High School” describes the development

of a web-based student attendance monitoring system for the

Philippine Science High School. An attendance monitoring system

may further be added as an additional prototype portal feature

to keep track of a student’s attendance when participating in

virtual classes.

Related Foreign Studies

The paper “School Portals: An Opportunity for Collaborative

Blended Learning” by Delia Muste (2021) discusses the importance

of school portals in enhancing collaborative blended learning.

It highlights the benefits of school portals such as improving

communication, collaboration, and camaraderie among students,

teachers, and parents, enhancing access to lectures and lesson

materials, and promoting personalized materials. Muste

emphasizes the need for school portals to be designed in a user-

friendly manner and to provide secure access to personal

information. The paper concludes that these portals are a

valuable tool for enhancing distance blended learning and

improving students’ educational outcomes.

Aliyu, et. al. (2018) in their study entitled “Assessing

and Testing the Usability of Student Portal” define a student

portal as a web-based application that allows students to access

academic information, communicate with teachers and peers, and

access online learning materials. The study assesses the

usability of a student portal through a combination of surveys

and user testing. The authors of the study found that the

usability of the student portal was positively rated by users

with high levels of satisfaction with the portal’s navigation,

functionality, and design. Developing a student portal must

ensure that it meets the needs of users and improve the overall

user experience to make it more convenient, accessible, and

effective.

Another related foreign study from Aden (2019) entitled

“Effectiveness of Student Portals in Private Universities: A

Case Study of Mount Kenya University” investigates the

effectiveness of student portals in private universities, using

Mount Kenya University as a case study. The study assesses the

effectiveness of the said university through a survey of select

students and an analysis of portal usage data. The results show

that the portal was effective in improving communication and

collaboration among students, teachers, and administration, and

enhancing access to learning resources. The study also

identified areas for improvement such as the need for better

organization and systematizing and search functionality. It

concludes that student portals are an effective tool for

enhancing the academic experience of students and recommends

ongoing evaluation and improvement of overall prototype and

functionality.
 “Student Acceptance of University Web Portals: A

Quantitative Study” by Fathema and Witte (2014)

Presley and Presley (2009) explore the factors that

influence student acceptance and use of academic portals in

their paper “Factors Influencing Student Acceptance and Use of

Academic Portals.” The study utilized a survey to acquire data

from students on their perceptions and use of academic portals.

The results indicate that ease of use, accessibility, and

usefulness are key factors that influence student acceptance and

use of such portals. Personal factors such as prior experience

with technology and individual motivation play a role in portal

adoption and usage. The authors conclude that academic portals

can be an effective means of enhancing and amplifying student

engagement but must be designed with usability and usefulness

in mind and provide adequate support for students who may face

technology-related barriers.
Related Local Literature

A book entitled “Designing Portals: Opportunities and

Challenges” by Ali Jafari (2008) outlines the design

principles
Related Foreign Literature

A book entitled “Designing Portals: Opportunities and

Challenges” by Ali Jafari (2008) outlines the design principles

and strategies for creating effective portals, including user-

centered design, personalization, and integration of various

tools and services. The author also discusses the technical

aspect of portal design such as security, interoperability, and

scalability. The book includes case studies and examples of

successful portal design in various contexts, particularly in

education, healthcare, and electronic commerce. Jafari concludes

by highlighting the future of portal design such as the

increasing use of mobile devices and the integration of

artificial intelligence and machine learning. Furthermore, the

book states the following definition of an educational portal:

“…an Educational Portal… includes tools and services to

facilitate the learning process as well as to complement

teaching and learning… provide a collaborative environment

for the development, evaluation, and sharing of educational

modules. With this concept, for instance, a teacher can

share a personally developed learning module such as a

quiz, PowerPoint presentation, paper… and usage of log

 data. …An Educational Portal, in its full and complete

concept, is a profile-based web environment2.”

2 pp. 92, Designing Portals: Opportunities and Challenges

Related Legal Bases

In accordance with Data Privacy Philippines, the Republic

Act No. 10173, otherwise known as the Data Privacy Act of 2012,

is “a law that seeks to protect all forms of information, be it

private, personal, or sensitive. It is meant to cover both

natural and juridical persons involved in the processing of

personal information” (2023). Section 2 entitled “Policy” states

the following:

“These Rules further enforce the Data Privacy Act and adopt

generally accepted international principles and standards

for personal data protection. They safeguard the

fundamental human right of every individual to privacy

while ensuring free flow of information for innovation,

growth, and national development. These Rules also

recognize the vital role of information and communications

technology in nation-building and enforce the State’s

inherent obligation to ensure that personal data in

information and communications systems in the government

and in the private sector are secured and protected.”

The relevance of this law in the creation and development of a

student portal is significant because the portal will eventually

involve the collection and processing of personal data from

students, teachers, and other administrative personnel.

R.A. 10173 mandates that organizations, including schools and

other educational institutions, collect and process personal

data in a just, legal, and clear manner, while also implementing

proper security measures to prevent unauthorized access, use,

or disclosure of the data. Thus, in the case of a student portal,

the educational institution responsible for it should guarantee

that the personal information of students, including their

names, contact information, academic performance, and other

confidential data, is safeguarded and managed according to the

Data Privacy Act. Achieving this might require the

implementation of privacy policies, security protocols, and

other protective measures.

The Intellectual Property Code of the Philippines,

officially known as Republic Act No. 8293, declares partly:

“The State recognizes that an effective intellectual and

industrial property system is vital to the development of

domestic and creative activity, facilitates transfer of

technology, attracts foreign investments, and ensures

market access for our products. It shall protect and secure

the exclusive rights of scientists, inventors, artists and

other gifted citizens to their intellectual property and

creations, particularly when beneficial to the people, for

such periods as provided in this Act.”

This Act covers various forms of intellectual property,

including copyrights, patents, trademarks, and trade secrets.

Because school portals involve the use and distribution of

intellectual property such as educational materials, digital

content, and software applications, this law requires that the

owner of the intellectual property be duly recognized and

compensated for the use of their intellectual property by

others. Thus, in the context of a student portal, the school or

institution responsible for the portal must ensure that any

intellectual property used on the platform is used with proper

authorization or licensing. This could involve obtaining

permission from the copyright owner, purchasing the necessary

licenses, or creating original content that is not subject to

copyright protection.

Article XIV of the Philippine Constitution of 1987 entitled

“Education, Science and Technology, Arts, Cultures, and Sports”

may further support the objective of the capstone project.

Section 10 states:

“Science and Technology are essential for national

development and progress. The State shall give priority to

research and development, invention, innovation, and their

utilization; and to science and technology education,

training, and services. It shall support indigenous,

 appropriate, and self-reliant scientific and technological

capabilities, and their application to the country’s

productive systems and national life.”

Section 13 of the same article affirms:

“The State shall protect and secure the exclusive rights

of scientists, inventors, artists, and other gifted

citizens to their intellectual property and creations,

particularly when beneficial to the people, for such period

as may be provided by law.”

Because this capstone project is a STEM-based research project,

the foundational principle of creating, inventing, and

innovating technological applications is grounded on the

Constitution not only to provide the country with technological

progress through research and development but to empower

students, especially in the STEM track, to apply scientific and

technological fundamentals in real-life applications. An example

of that application within the field of technology is the

development of a specialized student portal that will serve its

respective educational institution and be beneficial to the

diverse people involved. Applying STEM-based concepts is

manifested as the proponent inculcates various knowledge and

information on website building through designing and

programming.
 Other related Philippine laws that may apply to the

creation and integration of a student portal, depending on the

specific context and features of the portal, include R.A. 8792

(Electronic Commerce Act), R.A. 9470 (National Archives of the

Philippines Act), and R.A. 10931 (Universal Access to Quality

Tertiary Education Act), among others. Compliance with the

aforesaid laws and statutes will surely help the project

proponent to avoid legal and ethical issues and protect the

rights of students, faculty, and other stakeholders.

Conceptual Framework

The main concepts of the project were objectified given

the three basic elements: Input, Throughput (Process), and

Output. The first box depicts the input which contains the

necessary requisites to develop and integrate a student portal.

The middle box represents the process or throughput stage

wherein it consists of the various phases needed to finalize the

prototype portal. Lastly, the output of the project is depicted

in the last box alongside its feedback.

INPUT THROUGHPUT OUTPUT

•User •Development •SNFSS Multi-
requirements phase Purpose
•Technical •Testing phase Student Portal
requirements •Deployment •Feedback on
•Data phase usability,
requirements effectiveness,
and efficiency

Figure 1.1: Conceptual paradigm of the input, throughput (process), and output
variables of the capstone project

The input of the capstone project contains three necessary

requirements: user, technical, and data requirements.

Identifying the needs and requirements of the end-users is based

on several student portal models found in prominent Philippine

universities and schools3 alongside preferred functionalities

3 See Footnote 1.
from students and teachers alike. The technical requisites for

developing and integrating the student portal will include the

required hardware and software including its specifications such

as server infrastructure, programming languages, and database

management systems. The last requirement relates to the

identification, storage, and processing of various types of

data, which also includes the implementation of security

protocols to ensure the safety and confidentiality of personal

student and teacher information.

The process or throughput incorporates threefold phases:

development, testing, and deployment phase. The development

phase begins when all the necessary requisites are met and

fulfilled. This involves designing the user interface and its

functionality and integrating it with existing systems and

databases. The second phase is testing the portal for attributes

such as functionality, usability, and security. This includes

running tests on various browsers to ensure device compatibility

and testing the portal’s performance under different loads.

After the testing phase is complete, the prototype portal can

now be deployed to the students and teachers of the Sto. Niño

Formation and Science School.

The output of the project consists of both the product and

its outcomes. The capstone product is the SNFSS multi-purpose

student web portal whilst outcomes include the feedback of the

students and teachers regarding the prototype’s usability,

effectiveness, and efficiency.

https://aip.scitation.org/doi/pdf/10.1063/1.5055453#:~:text=A%20s
tudent%20portal%20is%20an,schedules%20and%20department%20contact%
20numbers
https://www.privacy.com.ph/learn-data-privacy-compliance/data-
privacy-faqs/

https://www.studocu.com/ph/document/quezon-city-
university/animator/chapter-i-student-portal-thesis/13390060

Local Studies:

https://www.researchgate.net/publication/337251053_Development_of
_a_University_Student_Portal_with_Online_Enrollment_System

https://www.researchgate.net/publication/318231578_Design_and_Dev
elopment_of_a_Web-
based_Student_Information_System_for_a_Private_College_in_the_Phi
lippines

https://ieeexplore.ieee.org/document/7862176

https://www.researchgate.net/publication/322656408_Development_of
_a_Web-
based_Student_Attendance_Monitoring_System_for_Philippine_Science
_High_School

https://www.researchgate.net/publication/322604845_Evaluating_the
_Effectiveness_of_a_Learning_Management_System_LMS_in_a_Philippin
e_Tertiary_Institution

https://web.archive.org/web/20140824102458/http://www.astd.org/~/
media/Files/Publications/LMS_fieldguide_20091

https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7509242
Foreign Studies:

https://www.researchgate.net/publication/350528292_School_Portals
_An_Opportunity_for_Collaborative_Blended_Learning

https://aip.scitation.org/doi/pdf/10.1063/1.5055453

https://www.igi-global.com/article/student-acceptance-of-
university-web-portals/123173

CHAPTER 1: REVISE!!!
 CHAPTER III
RESULTS

The development and integration of a multi-purpose student

portal prototype for the Sto. Niño Formation and Science School

was an extensive and successful undertaking. Utilizing Adobe Xd

as the design software, the researcher created a robust platform

that catered to the various and diverse needs of the school’s

student population. The portal was divided into three main

sections: Student Profile, Dashboard, and Enrollment

Information, each serving distinct purposes and offering a range

of features and functionalities.

PORTAL ANALYSIS AND DESIGN

A website serves as a search engine for various concepts

and services on the Internet. Many websites have been produced

over the years as a result of the way that people are now

connected to the Internet through these platforms. Websites play

a significant role in contemporary culture and community because

they are one of the most practical and convenient platforms

available. Students frequently use websites for research,

entertainment, and Internet information browsing. One

illustration is that a student can look up web pages regarding

their respective school information through a specialized

student portal.

The capstone research proponent analyzed the system

architecture through the use of diagrams such as the HIPO

(Hierarchy Input-Process-Output) chart, Systems Use Case

Diagram, Network Computing Hardware Diagram, and Data Security

Map. The system design is mirrored from the color schemes of the

Sto. Niño Formation and Science School (SNFSS) based on legacy

applications. The analysis included the identification of system

boundaries that includes determining what is included in the

system and what is not in order to understand the scope of the

system architecture. It also included the processes of

identifying the components of the hardware, software, networks,

and databases, how the different components interact with each

other, and how well the system can handle increased load or

usage.

Figure 3.1: Color scheme/palette utilized in the portal system design (incl.

heaxadecimal codes)
 The fonts/font families used in the system UI design

include the following:

Arial
Arial Bold
AvantGarde LT Book
AvantGarde LT Medium
Avenir Light

OCR A Extended
PAPYRUS

Segoe UI
Tahoma

The researcher evaluated the design choices made for the

portal architecture including understanding the rationale behind

the design.
HIPO Chart

Figure 3.2: HIPO chart of the SNFSS student portal prototype (student’s

perspective)

The illustrated figure depicts the Hierarchy Input-

Process-Output (HIPO) chart of the student portal prototype from

the perspective of the user (student). The student’s main entry

form is the Student Login form. This will be the access gate to

the main program, followed by the main sections or modules of

the portal: Student Profile, Dashboard, Enrollment Information,

and Utilities. A brief explanation of the main sections of the

portal is followed:

a. Student Profile, This section contains the student

information (e.g., biodata), grades form, and a change

password feature to enhance account security.

b. Dashboard. This section consists of all the campus

announcements released from the school administation.

c. Enrollment Information. This section contains three

subsections: Enrollment details, accounts receivable,

and other school payments.

d. Utilities. This section consists of other portal

settings and functions such as logout, portal policy,

and help feature.

System Use Case Diagram

Figure 3.3: System use case diagram of the SNFSS student portal prototype

(student’s perspective)
 The depicted figure shows the main purpose of the system

architecture using the case diagram. From the student’s

perspective, he or she can edit his or her student information

and change his or her password and view the displayed grades in

the Student Profile section. The Dashboard section enables the

student user to check released campus news and announcements.

The student may also check the enrollment information and its

respective sections as well as the utilities section.

The role of the teacher and/or administrator is to display

grades through an online report card based on the grades of the

student and to upload campus announcements and news.

Furthermore, the role of the registrar and/or administrator is

to display the enrollment details, accounts receivable, and

other payment details to inform the student of his or her

financial obligations and liabilities. The utilities section

alongside the registration form and other system functionalities

will be left to the designated IT staff of the school. When

students encounter problems in their portal account, they may

report it to the IT staff which will be relayed to the

administrator about the problem.

Network Computing Hardware Diagram

Figure 3.4: Proposed network computing hardware diagram (between student and

administrator’s perpsective)

The primary aim of a networking computing diagram is to

illustrate the logical components of a system. Figure 3.4 shows

the interconnection of different entities of the proposed portal

system.
Data Security Maps

Legend: C – Create; R – Read; U – Update; D – Delete

A. Student Profile Security Map

ENTITY Student Info Grades Display Change Password
Student CRUD CRUD CRUD
Admin CRUD CRUD CRUD
IT Staff CRUD CRUD CRUD

Table 3.1: Student profile security map using CRUD

B. Dashboard Security Map

ENTITY Announcements and News
Student CRUD
Admin CRUD
IT Staff CRUD

Table 3.2: Dashboard security map using CRUD

C. Enrollment Information Security Map

Enrollment Accounts
ENTITY Other Payments
Details Receivable
Student CRUD CRUD CRUD
Admin CRUD CRUD CRUD
IT Staff CRUD CRUD CRUD

Table 3.3: Enrollment information security map using CRUD

D. Utilities Security Map

ENTITY Logout Portal Policy Help
Student CRUD CRUD CRUD
Admin CRUD CRUD CRUD
IT Staff CRUD CRUD CRUD

Table 3.4: Utilities security map using CRUD

 The illustrated tables depict the data security maps for

each section of the school portal. It shows the range of what

the entities (i.e., student, admin, and IT staff) can do in the

program. According to Sumo Logic (n.d.), CRUD is an acronym that

refers to the four functions that are considered fundamental and

necessary to implement a persistent storage application, namely:

create, read, updated, and delete.

The student can create, read, update and delete their

student information whilst his or her function is limited to

that of reading most of the functions such as grades display,

announcements and news, enrollment information, portal policy,

and help. The student can also both read and update their

password using the change password funtion. The administrator/s

(e.g. teacher, registrar, school staff) can use the full CRUD

function in the grades display function as well as uploading

announcements and news, and enrollment information. Admins

however can only read the student information and change

password function and all of the utilities features. The IT

staff, being the overall portal system manager, can use the CRUD

function in all the portal sections and features to enable,

disable, or modify various functions specific to each section

or module.
PORTAL PROTOTYPE AND INTERFACE

Main User Interface

Figure 3.5: Main UI (User Inteface)

The main user interface is made up of the Sto. Niño

Formation and Science School’s background identity as well as

the school’s color scheme4 which will enable users to identify

that this portal is only intended for students and staff of

SNFSS and is unauthorized to any outside personnel.

Located on the left bar are the main sections…

4 See Figure 3.1

Login Page

Figure 3.6: Login page

The first interaction of the user to the portal system will

be the login page. This page displays the first step to get

access in the system. The SNFSS portal will require the user ID

(e.g., 270197) and password (e.g., snfss2023) to verify if the

user is a bonafide student or staff of the School.

Student Profile Section

Figure 3.7: Student Information subsection

Figure 3.8: Grades Display subsection

Figure 3.9: Change Password subsection

The Student Profile section played a vital role in

providing students with complete control over their personal

information. Through this section, students could access and

manage their Student Information, enabling them to keep their

bio details up to date. This included fields for their name,

address, email, and current age, ensuring that the school had

accurate and current information to reach them. Additionally,

students had the ability to display their grades, allowing them

to monitor their academic progress closely. The Display Grades

feature presented a clear and concise overview of their

performance, including individual course grades and cumulative

averages. By having this information readily available, students

could identify areas of improvement and seek appropriate support

and guidance from their teachers and academic advisors.

Account security was a top priority in the development of

the student portal. To address this concern, the researcher

incorporated the Change Account Password feature within the

Student Profile section. This feature empowered students to

reset and update their account passwords periodically, enhancing

the overall security of their portal access. By encouraging

regular password changes, the school fostered a culture of

digital security awareness among the student body, mitigating

the risk of unauthorized access and potential data breaches.

Dashboard Section5

Figure 3.10: Announcements subsection

5 School announcements were taken from the School’s Facebook page

 The Dashboard section served as a central hub of student

information and activities. At its core, the Dashboard aimed to

improve communication and engagement between the school and its

students. A key feature of the Dashboard was the Announcements

module, which provided real-time notifications and updates to

students. Whether it was important school-wide announcements,

reminders about upcoming events, or changes in academic

schedules, the Announcements feature ensured that students were

always informed and up to date. By centralizing these

communications within the student portal, the school reduced

reliance on traditional methods (e.g., Letters to Parents, Love

Messages, notice boards, paper memorandum, and verbal

announcements) streamlining the distribution process and

minimizing the chances of information being missed or

miscommunicated.
Enrollment Information Section

Figure 3.11: Enrollment Details subsection

Figure 3.12: Accounts Receivable subsection

Figure 3.13: Other Payments subsection

The Enrollment Information section played a pivotal role

in facilitating the enrollment process for students. Within this

section, the Enrollment Details feature provided students with

comprehensive information about enrollments and schedules. This

feature allowed students to review their academic trajectory,

make informed decisions when selecting courses, and seek

guidance from their advisors when needed. By having this

information readily accessible through the student portal,

students were empowered to take an active role in their academic

journey, enhancing their overall educational experience.

 Financial management was also a crucial aspect of the

student portal prototype. To address this, the researcher

developed the Accounts Receivable feature within the Enrollment

Information section. This feature provided students with

transparency regarding their financial obligations and

liabilities to the school. It displayed any outstanding balances

or dues, ensuring that students were aware of their financial

status and enabling them to take appropriate actions to settle

their accounts.