CITY COLLEGE OF SAN FERNANDO, PAMPANGA

City of San Fernando, Pampanga

INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

A Narrative Report in

On-the-Job Training undertaken at <Company Name>

Located at <Company Complete Address>

Presented to the Practicum Coordinator of Information Technology Department

City College of San Fernando, Pampanga

San Fernando, Pampanga

In partial fulfillment of the requirements for the degree of

Bachelor of Science in Information Technology

Submitted by:

Juan Dela Cruz

Submitted to:

Mr. Jerome C. Baluyut, MSIT

2018
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

APPROVAL SHEET

A Narrative Report entitled “A Narrative Report in On-the-Job Training” undertaken at

<Company Name> located at <Company’s Complete Address>, prepared and submitted by Juan

C. Dela Cruz in partial fulfillment of the requirements for Bachelor of Science in Information

Technology, is hereby endorsed for approval.

Accepted and approved in partial fulfillment of the requirements for Bachelor of Science

in Information Technology.

Ms. Avegaille M. Ferrer, MSIT

Dean, Institute of Information Technology

________________________________________

Date
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

TABLE OF CONTENTS

I. Title Page

II. Approval Sheet

III. Table of Contents

IV. Dedication

V. Acknowledgement

VI. Introduction

VII. Company Profile

 History

 Vision and Mission

 Organizational Structure

VIII. Narrative Report

 Daily Accomplishment Report

 Narrative Report on Weekly Activities

 Learnings

 Conclusion

IX. Appendices

 DOLE Form

 Endorsement Letter

 Recommendation Letter

 Daily Time Record

 Pictures

 Evaluation Sheet

 Certificate of On-the-Job Training

 Resume

DEDICATION
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

I dedicate this narrative report to my family. To the City College of San Fernando Pampanga. To

all my professors. To Local Government Unit of City of San Fernando Pampanga especially to City

Information and Communication Technology Office. To all of my friends and classmates. And

above all, to our almighty God.

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

ACKNOWLEDGEMENT

First and foremost, I want to express my deepest gratitude to God for His guidance and

strength. All my achievements are made possible by His grace.

To my parents, thank you for your unwavering love and support, and for always

providing for my needs. You are my source of motivation to keep pursuing my dreams. The same

goes to my siblings, whose presence and encouragement mean the world to me.

I am also incredibly thankful to City College of San Fernando Pampanga and its staff for

their warm welcome and for providing me the opportunity to study and complete my college

journey.

To all my professors, thank you for the academic and life lessons you have imparted to

me. Your kindness and understanding, especially during the pandemic, have been a great source

of comfort and motivation. I am truly grateful for all that you have done.

A special thank you to the Local Government Unit of City of San Fernando Pampanga,

particularly the City Information and Communication Technology Office. The knowledge and

skills I gained during my on-the-job training with you were invaluable. Your support,

encouragement, and the memorable experiences will always remain close to my heart.

To my classmates, watching each of you fight and persevere has been a constant source

of motivation for me. Together, we’ve pushed each other to keep going.

To my friends, thank you for your constant reminders and encouragement. You’ve

helped me believe in myself and feel stronger every day.

I am also grateful to the program head of the Bachelor of Science in Information

Technology. Thank you for believing in us, for the life lessons shared, and for pushing us to learn

beyond our limits. Your guidance, correction, and constant encouragement have shaped us into

better individuals.

Lastly, I want to extend my gratitude to all the teachers who have guided and supported

us from day one of our on-the-job training until the very end. Your belief in us will continue to

help us as we embark on our professional journeys after college.

INTRODUCTION
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

The term "on-the-job training" (OJT) refers to the practical process of learning the skills and

competencies required for a job in a real or near-real working environment. In schools, many

institutions require students to undergo OJT before graduation, providing them with the

opportunity to gain hands-on experience in their chosen field under the guidance of

knowledgeable employees, managers, or supervisors, rather than just completing worksheets.

As the famous saying by Julius Caesar goes, "Experience is the teacher of all things." This

highlights the importance of on-the-job training, as it allows students to gain firsthand

experience in their chosen profession. Through OJT, students are given the chance to work in a

real-world environment that closely mirrors what they will face in their careers after college.

This enables them to learn by doing, rather than just reading textbooks or completing

assignments.

One of the key benefits of OJT is that it accelerates the learning process by providing

real-life experience, which helps students adapt more quickly when they enter the workforce.

Additionally, students often gain valuable life lessons through their OJT, which contributes to

increased confidence, competitiveness, and productivity.

From a company’s perspective, OJT is beneficial as it helps retain competent employees.

By providing OJT opportunities to students and even non-student applicants, companies can

identify potential future hires and assess their skills and work ethic in a practical setting. OJT also

promotes team building, allowing students and non-students to interact with actual employees

and become part of the team, fostering strong relationships between current and future

professionals within the company.

Overall, on-the-job training plays a crucial role in preparing students for their future

careers, helping them transition smoothly from the academic world to the professional

environment and equipping them to become effective professionals in their chosen fields.

COMPANY PROFILE
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

Company Picture

City of San Fernando Pampanga is considered as the provincial capital of

Pampanga, as well as the Regional Center of Central Luzon. It is consisting of 35

barangays and has 6774 hectares of land area. In the year of 2020, City of San

Fernando Pampanga has a total population of 354,666 according to the Philippine

Statistics Authority.

City Snapshot:
Land Area: 6,774 hectares (67.74 sq.km.)

Income Classification: First Class

Component City No. of

Barangays: 35

Population: 354,666 (2020 PSA census)

Population Growth Rate:

3.11% (2015-2020) No. of

Households: 81,266 (2021-

projected)
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

History
Because of the growth of the cities of Bacolor and Mexico, San Fernando was founded in

1754. A new town was founded in the midst of the street connecting the two towns because the

priests were finding it difficult to administer to the spiritual requirements of the expanding

population. San Fernando was established with tax payers from Bacolor and Mexico and was

named after King Fernando VI. The Arrozal, Catacutan, and David families were among the town's

original settlers.

Spanish Era

In the year it was established, San Fernando, Pampanga entered the Spanish era. Don

Vidal de Arrozal was the first "Gobernadorcillo," the person in charge of the town at the time. Mr.

Aviles served as the town's first mayor for eight years beginning in 1812 until being succeeded.

The town also served as the origin of the Philippine labor movement, with printers staging the

country's first coordinated walkout there in 1872 and founding the Union de Lithografos y

Impresores de Filipinas. The opening of the San Fernando Train Station in 1892 marked the

beginning of the town's expansion. Due to the Philippine Revolution against the Spanish

government, the municipality was declared to be at war on September 1, 1896. After the Biak-na-

Bato agreement, peace was declared in December of the same year.

Revolutionary Government Period

Antonio Consunji was the leader of the revolutionary government that was established

in the town of San Fernando in 1898. The rebels had destroyed the Spanish army, and when

Emilio Aguinaldo came, he was welcomed by the people. The Philippines and the United States

went to war the following year. A hospital was established by the Red Cross to treat injured

revolutionaries. Malolos was captured by the Americans, and San Fernando was bombarded,

resulting in damage to the government complex, the church, and many commercial

establishments. Between April and May 1899, San Fernando may have served as the Philippine

Revolutionary Government's administrative hub before being destroyed under General Antonio

Luna's orders.
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

American Military Regime

In 1899, San Fernando, Philippines, came under the rule of the American Military

Regime. The first Municipal Mayor was appointed: Enrique Kerr. Francisco became the first

Municipal President in 1901 after the formal founding of the American government. In 1901, a

public school was built, and in 1904, the Provincial Capitol was moved to San Fernando. The first

public market was built in 1909, and 27 artesian wells had been established by 1911. The Iglesia

Ni Cristo was established in the town in 1914. The PASUDECO sugar center started operating in

1921, and Pedro Abad Santos founded the Popular Front in 1930. The Japanese occupied San

Fernando during World War II and used it as a base to attack Bataan. After the town was freed in

1945, Vivencio Cuyugan was appointed municipal mayor and the Civil Government was founded.

In 2001, San Fernando became a city. The community is proud of its well-known citizens,

including Nicolasa Dayrit, Pedro Abad Santos, and Jose Abad Santos.

Vision and Mission Vision

By 2025, the City of San Fernando Pampanga will be a model city in social development

where

quality social services will be accessible to its citizen: economic opportunities available to its

workforce in a healthy, safe and sustainable environment and where citizens value their rich

cultural heritage.

By, 2028, resiliency would have become their way of life while working to become a global smart

city by 2031.

Mission

We commit to improve the quality of life of Fernandinos, regardless of their gender, age,

and physical ability, thru the judicious use of government resources, in partnership with the

private sector and the active participation of the citizenry.

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

Organizational Chart
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 1 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
Tuesday October 1, On this day, I was with one of my classmates. We
2024 introduced ourselves, and the staff at the City
Information and Communication Technology Office 10 hours
also introduced themselves to us. They explained
both the programming and technical sides of the
office. They asked us which area we would like to
focus on for our on-the-job training.
Wednesday October 2, I chose the programming side. Our instructor
2024 informed us that they would first decide on our 10 hours
programming project. They also asked what
programming language I was prepared to work with.
Thursday October 3, I chose the Laravel framework (Version 11). My
2024 supervisor suggested that we also study React, 10 hours
Tailwind CSS, and other related technologies. They
provided a tutorial to help us learn the necessary
languages and tools for our OJT.

TOTAL NO. OF HOURS 30 hours

Certified by: Checked/Verified by:

Jake M. Bonus Jerome C. Baluyut, MSIT

Signature over printed name of Supervisor Signature over printed name of Coordinator
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

WEEK 1 – NARRATIVE REPORT

In the first week of my on-the-job training, I had the opportunity to meet my supervisor

and introduce myself along with one of my classmates. We were welcomed and given an

overview of the office, where our supervisor explained the various areas of work, particularly the

programming and technical sides. After this introduction, we were asked which area we would

like to focus on during our training. I chose to focus on the programming side, as I was keen to

deepen my knowledge of software development. Our supervisor informed us that they would

assign a programming project for us, but first, they wanted to know what programming

languages we were most familiar with. I shared that I was comfortable working with PHP, and

based on that, I decided to focus on the Laravel framework (Version 11) for the project. My

supervisor also recommended that we expand our knowledge by learning other technologies like

React, Tailwind CSS, and additional tools that would be helpful throughout our training. To

support our learning, they provided tutorials that covered these technologies in detail. As I

worked through the tutorials, I began to understand how these tools could work together in a

development environment. By the end of the week, I felt more confident in using Laravel and was

eager to apply what I had learned. The structure and guidance from my supervisor during this

first week were incredibly helpful, and I look forward to continuing my learning in the coming

weeks of my OJT.
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 2 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
My supervisor introduced our project, which we will
Monday October 7, work on in pairs. The assigned project is to develop
2024 an emergency web application using Laravel 11 and 10 hours
React.
After we studied and discussed the project, my
October 8, supervisor informed us that we needed to work on
Tuesday 2024 the layout and potential frontend design for the 10 hours
emergency website using Canva. We began working
on the project to create and present a possible
layout for the website’s user interface.

Our supervisor reviewed the layout we created in

October 9, Canva. Some revisions were made to improve the
10 hours
Wednesday 2024 design. Afterward, we started working on the
development of the emergency website. We began
by installing the necessary applications for Laravel
and React, such as Visual Studio Code, XAMPP, and
other required libraries.
Today, we successfully installed Laravel 11 and
October 10, integrated it with React. This setup automatically
10 hours
Thursday 2024 included a login and signup feature for the website.
We also worked on editing and refining the landing
page to make it more user-friendly and relevant to
the emergency web application.

TOTAL NO. OF HOURS 40 hours

Certified by: Checked/Verified by:

Jake M. Bonus Jerome C. Baluyut, MSIT

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

Signature over printed name of Supervisor Signature over printed name of Coordinator

WEEK 2 – NARRATIVE REPORT

In the second week of my on-the-job training, my supervisor introduced the project that we

would be working on, which is an emergency web application developed using Laravel 11 and React. I

was paired up with a partner for this project, and we were tasked with creating both the frontend and

backend for the website. After discussing the project, my supervisor asked us to design the layout of

the website using Canva, so we could present a possible design for the emergency web application.

Once the layout was completed, our supervisor reviewed it and suggested some revisions. After the

design approval, we began the development process by installing the necessary tools, such as Visual

Studio Code, XAMPP, and the required libraries for Laravel and React. We successfully set up the

project environment, which included the automatic generation of login and signup features.

Additionally, we worked on improving the landing page to better suit the needs of the emergency

web application. Throughout the week, I gained hands-on experience with both Laravel and React,

learning how to integrate them and build a functional web application. The guidance from my

supervisor was valuable, and I am looking forward to continuing the development process in the

coming weeks.
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 3 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
Today, we worked on creating the landing page for
Monday October 14, the emergency web application. I developed a set of 10 hours
2024 cards for the users to select the type of incident they
want to report, such as Fire, Flood, Accident, Crime,
Medical, and Others.
I continued working on the cards by adding icons 10 hours
Tuesday October 15, related to each incident type. I made adjustments to
2024 the size and color of the icons to improve the visual
appeal, and also resized the cards. To enhance the
user interface, I added borders to the cards for
better visibility and a more polished design.
After completing the frontend for the incident
October 16, selection cards, we shifted focus to the backend. We
Wednesday 2024 implemented the functionality to automatically save 10 hours
the selected incident type to the database using SQL
in the Laravel framework. This allows the user’s
incident choice to be stored for further processing.
Today, we added a form to collect additional user
Thursday October 17, information, including Member ID, Reporter’s Name, 10 hours
2024 Contact Number, and Incident Details. We also
created a dropdown menu for users to select specific
types of accidents, such as "Car Accident," "Bike
Accident," "Pedestrian Accident," "Bus Accident,"
"Truck Accident," "Motorcycle Accident," etc. This
form ensures that we capture all necessary
information for each incident report.

TOTAL NO. OF HOURS 40 hours

Certified by: Checked/Verified by:

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

Jake M. Bonus Jerome C. Baluyut, MSIT

Signature over printed name of Supervisor Signature over printed name of Coordinator

WEEK 3 – NARRATIVE REPORT

In the third week of my on-the-job training, I worked on further developing the

emergency web application. On Monday, we focused on creating the landing page, where I

developed a set of cards that allow users to select the type of incident they wish to report, such as

Fire, Flood, Accident, Crime, Medical, and Others. On Tuesday, I continued refining the cards by

adding icons that correspond to each incident type. I made adjustments to the icon sizes, changed

their colors, and resized the cards to ensure they looked more visually appealing. Additionally, I

added borders around the cards to improve the user interface. On Wednesday, after completing

the frontend design, we moved on to the backend. I worked on implementing functionality to

automatically save the user's selected incident type to the database using SQL within the Laravel

framework. This feature ensures that the user's choice is stored for future reference. On

Thursday, we focused on creating a form to collect detailed user information, such as the Member

ID, Incident Name, Reporter’s Contact Information, and Incident Details. We also added a

dropdown menu that allows users to specify the type of accident, including options like "Car

Accident," "Bike Accident," "Pedestrian Accident," and others. This form ensures we collect all

necessary information from users when reporting an incident. Throughout the week, I gained

experience working on both the frontend and backend of the application, learning how to

integrate different components to create a functional and user-friendly web application.

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 4 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
After creating the form to collect user information, I
Monday October 24, added a submit button that allows the user to submit
2024 their report. I also updated the database and created 10 hours
a migration for the new fields. Afterward, I worked
on fixing the controller and the routes to ensure that
once the user submits the report, a success
notification appears, confirming that the report was
successfully submitted. I also made some
adjustments to the form labels for better clarity.
Additionally, I studied how to handle the uploading
of multiple user images using arrays.

TOTAL NO. OF HOURS 10 hours

Certified by: Checked/Verified by:

Jake M. Bonus Jerome C. Baluyut, MSIT

Signature over printed name of Supervisor Signature over printed name of Coordinator
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

WEEK 4 – NARRATIVE REPORT

In the fourth week of my on-the-job training, I focused on refining the emergency web

application by enhancing the user submission process and backend functionality. I added a

submit button to the user information form, allowing users to submit their incident reports, and

updated the database with a migration for new fields. I also worked on fixing the controller and

routes, ensuring that once the report is submitted, a success notification is displayed to confirm

successful submission. Additionally, I made adjustments to the form labels for better clarity. I

spent time studying how to handle the uploading of multiple user images using arrays, which will

improve the handling of image data in the incident reporting system. This week, I gained valuable

experience in both frontend and backend development, improving the user experience and

functionality of the application.

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 5 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
October 28, Completed incident type cards, user form, database,
Monday 2024 controller, and routes. Created the admin dashboard
and added a side drawer menu with options for 10 hours
Dashboard, Incidents, Categories, Users, Account,
and Log Out.
October 29, Developed functions for the dashboard, showing
Tuesday 2024 incident types and counts. Added a table for incident 10 hours
details, pagination, search bar, and a button for
admins to report new incidents.
October 30, Created an Incidents section with a table of reported
Wednesday 2024 users. Added a side drawer to view, edit, or delete 10 hours
user details, and included animations for the drawer.
October 31, Built the Categories section to display incident types
Thursday 2024 (e.g., Fire, Flood, Accident). Enabled admin to update 10 hours
or delete categories and added a button to quickly
add new ones.

TOTAL NO. OF HOURS 40 hours

Certified by: Checked/Verified by:

Jake M. Bonus Jerome C. Baluyut, MSIT

Signature over printed name of Supervisor Signature over printed name of Coordinator
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

WEEK 5 – NARRATIVE REPORT

After In a week of my on-the-job training, I focused on developing the admin panel for

the emergency web application. After completing the incident type cards, user form, and setting

up the database, controller, and routes, I moved on to creating the admin dashboard. I added a

new form for the admin side and suggested including a side drawer menu, which we

implemented using Flowbite. The side drawer now contains options such as Dashboard,

Incidents, Categories, Users, Account, and Log Out. I then worked on the functionality for each

menu item. In the dashboard, I added cards to display the number of incidents for each type, and

clicking on a card shows a table of users involved in that specific incident. I also implemented

pagination, a search bar, and a button that allows the admin to report new incidents. I next

focused on the Incidents section, where I created a table displaying all users who reported

incidents and added a side drawer for each user to view, edit, or delete their details. To enhance

the user experience, I incorporated animations and shadow effects for the drawer. Finally, I

developed the Categories section, allowing the admin to view, update, or delete incident

categories. I also added a button to quickly add new categories or incident types. This week, I

made significant progress in enhancing the admin panel’s functionality, improving both the

frontend and backend components of the application.

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 6 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
Fixed the notification for the reporter, ensuring that
November the message "Help is on the way" is displayed
Monday 4 , 2024 correctly. 10 hours
Worked on fixing pagination, ensuring smooth page
Tuesday November navigation and preventing errors when loading 10 hours
5 , 2024 incident reports.
Created an archive page for deleted incident reports,
Thursday November making it easier to access and manage past reports. 10 hours
7 , 2024

TOTAL NO. OF HOURS 30 hours

Certified by: Checked/Verified by:

Jake M. Bonus Jerome C. Baluyut, MSIT

Signature over printed name of Supervisor Signature over printed name of Coordinator
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

WEEK 6 – NARRATIVE REPORT

During the sixth week of my on-the-job training, I focused on refining key features of the

emergency web application to enhance user experience and improve system efficiency. One of

my main tasks was fixing the notification for the reporter, ensuring the message "Help is on the

way" displayed clearly after a report was submitted. This small yet impactful update played a

crucial role in boosting user confidence, as it provided immediate reassurance that their request

for assistance had been received and was being processed. It was rewarding to know that this

simple change would have a real impact on users in critical situations, offering them peace of

mind. After that, I tackled pagination issues within the incident report management system,

which allowed administrators to navigate through reports more smoothly, eliminating errors and

delays when handling large sets of data. This fix made the platform more user-friendly, saving

administrators valuable time. There was one day during the week when I was absent, as my

classmates and I had to attend a scholarship application event at Heroes Hall, but we made sure

to stay on top of our work. We dedicated additional time to complete our scholarship

requirements and ensure our tasks were up to date. In addition, I developed an archive page for

deleted incident reports, allowing administrators to easily retrieve past reports for auditing or

reference. This feature ensured that nothing was permanently lost and added a layer of

transparency and accountability to the system. Overall, the week felt like a series of small

victories, from improving system functionality to refining user interaction, all of which

contributed to building a more reliable, efficient, and transparent platform. Each accomplishment

made me feel more confident in my ability to contribute to the project and its success.
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 7 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
Developed a general form for submitting incident
Monday November reports, improving the process of reporting incidents.
1 1 , 2024 10 hours
Ensured that values in the filter action are retained,
Tuesday November improving the user experience when applying filters. 10 hours
1 2 , 2024
Implemented responder tracking and map
Wednesday November functionality, providing real-time monitoring of 10 hours
1 3 , 2024 responders during incidents.
November Restructured the database schema, moving the 10 hours
Thursday 1 4 , 2024 incident_type_id to the parent table and adding
category_id for better data organization

TOTAL NO. OF HOURS 40 hours

Certified by: Checked/Verified by:

Jake M. Bonus Jerome C. Baluyut, MSIT

Signature over printed name of Supervisor Signature over printed name of Coordinator
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

WEEK 7 – NARRATIVE REPORT

During this week of my on-the-job training, I worked on several improvements aimed at

optimizing the emergency web application. I developed a general form for submitting incident

reports, which streamlined the reporting process and made it easier for users to provide

necessary details. This enhancement significantly improved the user experience, as the form was

designed to be intuitive and simple to use. I also focused on ensuring that values in the filter

action were retained, making it more convenient for users to apply and keep filters in place while

browsing reports. This change was essential for improving usability, especially for

administrators who need to sift through large amounts of data quickly. In addition, I

implemented responder tracking and map functionality, allowing real-time monitoring of

responders during incidents. This feature added an extra layer of efficiency, helping both

administrators and users track the status of responders and their locations during emergencies.

Finally, I restructured the database schema by moving the incident_type_id to the parent table

and adding a category_id to improve data organization. This reorganization helped make the

database more scalable and easier to manage, improving overall system performance.

Throughout the week, I felt that each task brought the application one step closer to being a more

streamlined and user-friendly tool for incident reporting and management.

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 8 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
Added delete validation in the categories table,
Monday November ensuring that soft deletes are handled properly and
1 8 , 2024 notifications are sent with associated incident 10 hours
reports.
Updated the mobile view menu by replacing the
Tuesday November burger button, improving accessibility and usability 10 hours
1 9 , 2024 on mobile devices.
Revised the database structure to optimize
Wednesday November performance and ensure better data integrity across 10 hours
2 0 , 2024 the system.
November Implemented a redirect after creating a category,
Thursday 2 1 , 2024 ensuring users are smoothly directed back to the 10 hours
categories page after saving.

TOTAL NO. OF HOURS 40 hours

Certified by: Checked/Verified by:

Jake M. Bonus Jerome C. Baluyut, MSIT

Signature over printed name of Supervisor Signature over printed name of Coordinator
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

WEEK 8 – NARRATIVE REPORT

This week of my on-the-job training, I focused on enhancing both the functionality and

user experience of the emergency web application. I added delete validation in the categories

table, ensuring that soft deletes were handled properly and that notifications were sent with

associated incident reports. This not only improved data integrity but also made sure that no

relevant information was lost during the deletion process. In addition, I updated the mobile view

menu by replacing the burger button with a more accessible design, which significantly improved

the usability and overall navigation on mobile devices. This change was particularly important as

it made the app more user-friendly, especially for those using smaller screens. I also took the

opportunity to revise the database structure to optimize performance and ensure better data

integrity across the system. This restructuring made the database more efficient, paving the way

for smoother operations and faster query responses. Finally, I implemented a redirect after

creating a category, ensuring that users were smoothly directed back to the categories page after

saving. This enhancement streamlined the user flow, preventing confusion and making the

process more intuitive. Overall, these updates contributed to improving the app’s performance,

accessibility, and user experience, and I felt a strong sense of accomplishment as these changes

brought the system closer to being fully functional and optimized.

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 9 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
Implemented WebSocket to reload the notification
Monday November page in real-time, improving the responsiveness of
2 5 , 2024 notifications across users. 10 hours
Added message notifications using Twilio, ensuring
Tuesday November timely alerts are sent to users when incidents or 10 hours
2 6 , 2024 updates occur.
Added WebSocket for reloading the notification page
Wednesday November in real-time. 10 hours
2 7 , 2024
November Added message notifications using Twilio, ensuring
Thursday 2 8 , 2024 timely alerts are sent to users. 10 hours

TOTAL NO. OF HOURS 40 hours

Certified by: Checked/Verified by:

Jake M. Bonus Jerome C. Baluyut, MSIT

Signature over printed name of Supervisor Signature over printed name of Coordinator
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

WEEK 9 – NARRATIVE REPORT

This week, I focused on significantly enhancing the notification system of the emergency

web application to ensure seamless and real-time communication. I implemented WebSocket to

reload the notification page in real-time, which allowed notifications to appear instantly across

all users without the need for manual page refreshes. This improvement greatly enhanced the

responsiveness of the system, ensuring that users and administrators were always up-to-date

with the latest incident alerts. Alongside this, I integrated message notifications using Twilio,

ensuring that users received timely SMS alerts whenever incidents or updates occurred, even

when they were not actively using the app. The ability to send both in-app and SMS notifications

was crucial for keeping users informed during emergencies, allowing them to stay connected no

matter where they were. I also worked on fine-tuning the WebSocket integration to make sure it

was optimized for fast and reliable performance, minimizing any delays in receiving notifications.

These updates made the notification system much more robust, ensuring users received critical

information without any lag or missed alerts. The combination of real-time updates through

WebSocket and SMS alerts via Twilio created a more efficient and user-friendly communication

channel, which is essential in emergency situations where every second counts. This experience

reinforced the importance of real-time communication in applications, and I felt a great sense of

accomplishment seeing these features come together to improve the overall user experience.
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 10 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
Tuesday December 1, On this day, I was with one of my classmates. We
2024 introduced ourselves, and the staff at the City
Information and Communication Technology Office 10 hours
also introduced themselves to us. They explained
both the programming and technical sides of the
office. They asked us which area we would like to
focus on for our on-the-job training.
Wednesday December 2, I chose the programming side. Our instructor
2024 informed us that they would first decide on our 10 hours
programming project. They also asked what
programming language I was prepared to work with.
Thursday December 3, I chose the Laravel framework (Version 11). My
2024 supervisor suggested that we also study React, 10 hours
Tailwind CSS, and other related technologies. They
provided a tutorial to help us learn the necessary
languages and tools for our OJT.

TOTAL NO. OF HOURS 40 hours

Certified by: Checked/Verified by:

Jake M. Bonus Jerome C. Baluyut, MSIT

Signature over printed name of Supervisor Signature over printed name of Coordinator
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

W E E K 10 – N A R R A T I V E R E P O R T

On this week I have continued to encode cyber-attacks. There were a lot of them. I am

still grateful to the task given to me. I consider encoding and administrative work as my rest or

escape in programming. I enjoy doing it too. However, kindly consider that even though I did

work the whole week encoding, I still make time to watch and study the programming language

that I have been using.

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 11 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
Today, we worked on creating the landing page for
Monday October 14, the emergency web application. I developed a set of 10 hours
2024 cards for the users to select the type of incident they
want to report, such as Fire, Flood, Accident, Crime,
Medical, and Others.
I continued working on the cards by adding icons 10 hours
Tuesday October 15, related to each incident type. I made adjustments to
2024 the size and color of the icons to improve the visual
appeal, and also resized the cards. To enhance the
user interface, I added borders to the cards for
better visibility and a more polished design.
After completing the frontend for the incident
October 16, selection cards, we shifted focus to the backend. We
Wednesday 2024 implemented the functionality to automatically save 10 hours
the selected incident type to the database using SQL
in the Laravel framework. This allows the user’s
incident choice to be stored for further processing.
Today, we added a form to collect additional user
Thursday October 17, information, including Member ID, Reporter’s Name, 10 hours
2024 Contact Number, and Incident Details. We also
created a dropdown menu for users to select specific
types of accidents, such as "Car Accident," "Bike
Accident," "Pedestrian Accident," "Bus Accident,"
"Truck Accident," "Motorcycle Accident," etc. This
form ensures that we capture all necessary
information for each incident report..

TOTAL NO. OF HOURS 40 hours

Certified by: Checked/Verified by:

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

Jake M. Bonus Jerome C. Baluyut, MSIT

Signature over printed name of Supervisor Signature over printed name of Coordinator

W E E K 11 – N A R R A T I V E R E P O R T

On this week, I was assigned to encode the Inventory Count Form in the City Information and

Communication Technology Office. I have finished first my task as an encoder before moving

again to programming. It was still fun to work with encoding. The next week, I had an absent as

we conduct

survey as a requirement for our capstone project. My absences were actually when I go to school

for the checking of our capstone documents and system.

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY ACCOMPLISHMENT REPORT

Trainee Name: Gabriel D. Cortez Company Name: Local Government Unit of the City
of San Fernando Pampanga
Week No.: 12 Department Name: City Information and
Communication Technology Office

DAILY WORK ACTIVITIES

NO. OF
DAY DATE DAILY ACCOMPLISHMENTS HOURS
Today, we worked on creating the landing page for
Monday October 14, the emergency web application. I developed a set of 10 hours
2024 cards for the users to select the type of incident they
want to report, such as Fire, Flood, Accident, Crime,
Medical, and Others.
I continued working on the cards by adding icons 10 hours
Tuesday October 15, related to each incident type. I made adjustments to
2024 the size and color of the icons to improve the visual
appeal, and also resized the cards. To enhance the
user interface, I added borders to the cards for
better visibility and a more polished design.
After completing the frontend for the incident
October 16, selection cards, we shifted focus to the backend. We
Wednesday 2024 implemented the functionality to automatically save 10 hours
the selected incident type to the database using SQL
in the Laravel framework. This allows the user’s
incident choice to be stored for further processing.
Today, we added a form to collect additional user
Thursday October 17, information, including Member ID, Reporter’s Name, 10 hours
2024 Contact Number, and Incident Details. We also
created a dropdown menu for users to select specific
types of accidents, such as "Car Accident," "Bike
Accident," "Pedestrian Accident," "Bus Accident,"
"Truck Accident," "Motorcycle Accident," etc. This
form ensures that we capture all necessary
information for each incident report..

TOTAL NO. OF HOURS 40 hours

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

Certified by: Checked/Verified by:

Jake M. Bonus Jerome C. Baluyut, MSIT

Signature over printed name of Supervisor Signature over printed name of Coordinator

W E E K 12 – N A R R A T I V E R E P O R T

On this week, I continued improving my programming skills. Mongo DB is quiet challenging

database. I asked my supervisor for guide on how to design a database in Mongo DB and he

mentioned that Mongo DB is a no SQL database. At first, I was confused. My supervisor asked me

then, to watch and study on how to design Mongo DB and so I did. There are two types of Mongo

DB design, the embed

and the referencing. I was confused on which one should I used in designing database, and then I

asked

again our supervisor and he said, study the advantages and disadvantages of embed and

referencing. I watched and studied again until I got my answer. Embed is faster and cheaper than

referencing. However, referencing is more flexible than embed. After learning those advantages

and disadvantages I decided to use referencing design, but I still studied to code the queries for

embed. It was challenging, because there are only few videos of queries for embed. To what I

remember I have accomplished the queries for embed for a month, and I have finalized my

queries for embed on my 12th week of attending on the job training. I had been through lot

studying Mongo DB, from embed to referencing. After I have studied both embed and referencing,

I found myself comfortable working with the backend of MERN full stack web development. My

on the job training was challenging from 1st to 12th week, but then I consider myself lucky that I

was assigned to City Information and Communication Technology Office because I had full time

to study. I learned and improved a lot. All the challenges that I had experience are worth it.
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

LEARNINGS

During my on-the-job training at the City Information and Communication Technology Office, I

grew both personally and professionally. At first, I was nervous about fitting in and handling the

tasks ahead. I had many questions about my role and how I could contribute. But from the start,

the team welcomed me and made me feel like an important part of the group. Their support

helped me gain confidence. One of my first challenges was deciding between programming and

technical work. I chose programming, which led me to learn new frameworks like Laravel and

React. Although self-study was tough at first, my supervisor allowed me to choose Laravel 11 for

my capstone project and encouraged me to explore React. This motivated me to push myself

further. I faced many frustrating moments, especially when bugs would last for days. One bug, in

particular, took me three days to fix, testing my patience. However, I learned that persistence and

problem-solving are key to overcoming challenges. As I got more comfortable with programming,

I helped develop an emergency web application. I started by designing the layout in Canva and

worked with my supervisor to improve the UI. I also worked on the backend, integrated Laravel

with React, and built key features like login/signup and a user-friendly landing page. I also

worked on an incident reporting system, creating incident type cards and implementing

functionality to save reports to the database. This experience helped me turn design into working

code. I also added administrative features, such as a general form for submitting reports, filter

actions, and real-time responder tracking. Throughout my training, I learned the importance of

teamwork, communication, and adaptability. I gained a better understanding of how different

departments within the Local Government Office work together. I also appreciated the balance
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

between programming tasks and administrative work. By the end of my training, I had gained

valuable technical skills and a better understanding of how programming works in the real

world. This experience helped me develop problem-solving abilities and reinforced the

importance of continuous learning. I feel prepared for the next step in my career and am grateful

for the opportunity to work with such a supportive team.

CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

CONCLUSION
CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DOLE FORM
CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

ENDORSEMENT LETTER
CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

RECOMMENDATION LETTER
CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

DAILY TIME RECORD

 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

PICTURES

Caption

0
CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

Caption

Caption

Caption
CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

Caption

Caption
CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

Caption

Caption
CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

Caption

Caption
CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

Caption

EVALUATION SHEET
 CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

CERTIFICATE ON–THE–JOB TRAINING

CITY COLLEGE OF SAN FERNANDO, PAMPANGA
City of San Fernando, Pampanga
INFORMATION TECHNOLOGY DEPARTMENT
Bachelor of Science in Information Technology

RESUME