NATIONAL COLLEGE OF SCIENCE AND TECHNOLOGY

Amafel Bldg. Aguinaldo Highway, Dasmariñas, Cavite

Computer Studies Department

CHAPTER 3

IPO CHART

INPUT PROCESS OUTPUT

Employee Employee
Registration
Information Record
Log In
Pay slip
Time in and Computation
General
time out
Recording payroll
information
report

Figure 12. IPO chart for Captain’s Sweet Galley of Treats

The figure above shows how the attendance of the employee is recorded. First,

the employee gives the information to the system as a registration for the employee

record as an output. As the working day starts, the employee inputs the time in and time

out using the biometrics and logs in the manager’s record in order to start the payroll

process of the accounting period. When the accounting period is finished, the

accounting staff computes the designated amount of the salary including the

contributions, deductions and additional payments for the pay slip and the accounting

staff records the general payroll report to pass it in the management.

 NATIONAL COLLEGE OF SCIENCE AND TECHNOLOGY
Amafel Bldg. Aguinaldo Highway, Dasmariñas, Cavite
Computer Studies Department

ARCHITECTURAL DESIGN

Figure 13. Home Page of Captain’s Sweet Galley of Treat

The image shows the home page of the company where the employee input all of the

necessary information that is recorded automatically in the management’s system. The

home page is composed of the time in and time out information, the finger registration,

time keeping and the changing of shifts to complete the employee’s data for the payroll.
 NATIONAL COLLEGE OF SCIENCE AND TECHNOLOGY
Amafel Bldg. Aguinaldo Highway, Dasmariñas, Cavite
Computer Studies Department

Figure 14. User Interface 1

The sample illustrates the information for the employee’s biometrics. The

finger print reader encodes the ID, the name, the email of the employee and in which

department the employee belongs to.

Figure 15. User interface 2

 NATIONAL COLLEGE OF SCIENCE AND TECHNOLOGY
Amafel Bldg. Aguinaldo Highway, Dasmariñas, Cavite
Computer Studies Department

The image shown on the previous page is the exact appearance of the

biometrics for the employee’s information. The system gives instructions to the

employees which are in the upper left corner of the screen. The finger of the employee

is placed in the scanner that reads the data in order to record the time the employee

logs in and logs out of work.

Figure 16. User Interface 3

The management have the record of the information of the employees in the data store

that includes employee’s management and personal information. There is also a space

designated for the employee to fill out in case emergency happens during working

hours.
 NATIONAL COLLEGE OF SCIENCE AND TECHNOLOGY
Amafel Bldg. Aguinaldo Highway, Dasmariñas, Cavite
Computer Studies Department

Figure 17. User Interface 4

The figure above shows how the payroll is computed during the accounting

period. The system includes the basic information of the employee, the number of

attendance, additional payments in case of overtime or work on holidays, fixed

deductions such as SSS, PAG-IBIG and PHILHEALTH and other deductions for the

penalty when the employee have late and under time. For the computation of the net

pay, the accounting staff inputs the total earnings and deductions in the lower right

corner of the screen and the system automatically computes everything once the

compute button is clicked.

 NATIONAL COLLEGE OF SCIENCE AND TECHNOLOGY
Amafel Bldg. Aguinaldo Highway, Dasmariñas, Cavite
Computer Studies Department

Figure 18. User Interface 5

The image illustrates the Daily Time Record (DTR) of the employees which

appears in the management system. The DTR includes the date, name, identification

and the time of log in as the employee starts to working during the day.
 NATIONAL COLLEGE OF SCIENCE AND TECHNOLOGY
Amafel Bldg. Aguinaldo Highway, Dasmariñas, Cavite
Computer Studies Department

Figure 19. User Interface 6

Illustration above shows the report of the accounting staff regarding the

computation of net pay. The report is printed out and is forwarded to the management

once finished for the approval, in order to give the proper payment to the employees.

Figure 20. User Interface

 NATIONAL COLLEGE OF SCIENCE AND TECHNOLOGY
Amafel Bldg. Aguinaldo Highway, Dasmariñas, Cavite
Computer Studies Department

The figure on the previous page shows the substitution in case an employee

is absent and decided to call for another employee for replacement during the working

day. Another one is the option for shift swapping. Shift swapping occurs when two

employees decided to change the shifts to each other. The employees just have to

select the name of each other and click the “swap to” button and it automatically change

the records of the schedule of the employee in the present day.

Figure 21. User Interface 8

The illustration above shows the record of the management regarding the

employee’s schedule. Once the employee inputs the data for substitution or shift

swapping, the information directly appears in the system of the management in order to

be informed that an employee or employees have changed the schedule of the given

shift for the week.