CHAPTER 3

DESIGN AND METHODOLOGY

This chapter includes the discussions of the design, concepts, diagram and
the methodology of the study.

3.1 The Project Concepts

Figure 1. Conceptual Diagram

The figure 1 shows the conceptual diagram of the study during development
and completion of it by showing the input, process and output. The input shows the
software requirements for the prototype during development and also what are the
possible data needed to be stored in the database. As for the process, it shows the
developmental model utilized by the researchers to carry out the study in which the
specific processes under the process box are the specific objectives of the study that
the researchers aimed to achieve. Lastly, as for the output box, it shows the main
and the specific output. The main output refers to the output of the study as a whole
system, while the specific output refers to the functionality of the developed study,
and what are the possible things that the developed study can do.

3.2 System Analysis and Design

In order to achieve the main goal of the study the researchers conducted several
research and planning to come up with a concept that can be applied in the study. By
understanding the specific needs of the educational institution, conducting feasibility
assessments, and examining current attendance management practices, a
comprehensive system design can be created. This includes determining the
functional and non-functional requirements, designing an intuitive user interface,
defining the database structure, and implementing security measures. The system is
then developed, tested, and deployed, with user training and support provided for a
successful transition. Throughout the process, feedback is collected to evaluate
system performance and make necessary improvements, ensuring an efficient and
effective school event attendance system.

3.2.1 User Requirements

Table 1. User Requirements

Name of Users Main Sub Module

the Module
Project

School Students Registration / ● Can create an account.

Event Log in Form
Attendance
System Attendance ● Can log in after the
Form Registration of the account and
attendance.

Admin Update ● Can update the information of

the students

Receive ● Can receive the attendance of

the students
 Delete ● Can delete the information of
the students.

Table 1 shows the user requirements of the developed study in

software and how it interacts with its module and sub-modules. The name of
the project, users, the main modules and the sub-module of the study are
shown. The developed study has two users, the admin and the students.
Every user has a main module and every main module have a sub-module

3.2.2 Flowchart

Figure 2. Flowchart
 The figure 3 shows the flowchart of the developed study. The figure is
developing the system “School Event Attendance System” that processes the
flow of the system. Shown in this figure, how the study was executed from a
certain data to a certain condition and processes up to its termination.

3.2.3 System Requirements

In this study the system requirements that we use is the following:

● Web Browser- The portal should be compatible with commonly used

web browsers such as Google Chrome.

● Operating System- The portal should support major operating

systems such as Windows, macOS, and Linux.

● Internet Connection- A stable and reliable internet connection is

essential for users to access and submit documents through the online

portal.

● Compatibility- The portal should be responsive and compatible with

different screen sizes and resolutions to ensure accessibility across

various devices, including desktop and laptop.

3.2.4.1 Software Requirements

Table 2. Software Requirements

Software Requirements Types

Name

Operating System Android & Windows

Browser Google Chrome

Database Xampp (php MySql)

 Table 5 shows the software requirements of the study during
and after the development.

3.2.4 Functional Requirements

Discussed were the functional requirements of the study including the

operational environment, system interface, communication interface, software
interface, the function/ user security and lastly the user group and system
access summary

3.2.4.1 Operational Environment

Figure 3. Operational Environment

The figure 3 shows the operational environment of the

developed study. It shows how each user accesses the main output of
the study from the computer or to any devices and a compatible
browser which is Google Chrome.
3.2.4.2 System Interface

Discussed here were the following interface used:

● The system runs only in the browser, which is Google Chrome,

which is easy to access for students who want to access the

attendance portal.

● The log-in form allows the students to log in if they already have

an account to access the login form.

● Registration is required for students who do not have an account

before they log in to the attendance form.

● Dashboard to see the information/details of the event and the

attendance and also the admin can see those students who

already submitted their attendance form of the students.

● Home page, where you can see the interface of the log-in form

and also the design of the system and background design.

3.2.4.3 Communication Interface

Communication Interface discussed the following interface that

the researchers used to achieve the desired outcome of the study.

● Bootstrap – the template used by the researchers to provide a

responsive and end-user friendly interface.

● CSS – Cascading Style Sheet, used to enhance the appearance

of the system that developed by the html to be more presentable

to the user of the developed study.

 ● Database – database used to store all the data provided by the

researchers.

● HTML – Hypertext Mark-up Language, used to develop the web

view of the developed study.

● JavaScript – used to give an external design to every feature of

the software. The system is more corresponding.

● PHP (recursive acronym for PHP: Hypertext Preprocessor) - is a

widely used open source general-purpose scripting

language that is especially suited for web development and can

be embedded into HTML.

3.2.4.4 Software Interface

Software Interface discussed the following interface that the

researchers used to achieve the desired outcome of the study.

● Browser – used to access the web view of the developed study.

● Sublime Text – used to input all the researchers’ code of the

study.

● Xampp- is a free and open-source cross-platform web server

solution stack package developed by Apache Friends.

3.2.4.5 User Groups and System Access Summary

Table 6. User Groups and System Access Summary

Admin Can view the personal information,

 view and update the personal

information of the Diploma Students.

Students Can attendance through the system.

Table 6 shows the User Groups and System Access Summary

of the developed study. It shows how the user accesses the project as

a whole.

3.2.5 Non-Functional Requirements

Non-Functional Requirements discussed the developed study

how reliable, operable, maintainable, scalable, availability, deliverable it

is and also the security when it is already deploy to the society

3.2.5.1 Reliability

● The developed study assuredly recorded the attendance of the

students.

● The records or the information have basis and are stored in the

database.

3.2.5.2 Operability

● The web-based of the developed study worked with all operating

systems after deployment as long as it has a browser where the

web-based can be run.

● The PC/Laptop can be used to access the attendance through

a browser.

3.2.5.3 Scalability

● The maximum storage of the developed study depends on the

memory of the SD card or the computer.

● The developed study has two user types. The admin and the

students.

3.2.6.4 Availability

● The developed study must be connected to the internet / Wi-Fi

connection.

● The web-based system works better with a browser preferably

the Google Chrome.

3.2.6.5 Delivery

● The developed study is deliverable to ACLC College of

Butuan City.

● The researchers demonstrated how to use the system.

3.3 Developmental Model

Figure 4. Development Method Process (WaterFall Model Process)

The figure 4 shows the development method process utilized by the

researchers since it is the best requirements model for the study; The WaterFall

Model Process, in which it must be followed respectively. The researchers started

the planning and analyzing of problems and purpose of the study as well as all the

requirements needed for developing the future output of the study. After the

researchers were done with data gathering and analyzing the project, the designer

started designing every interface of the study. Hence, the developer started the

development of the System. After developing and designing the interface, the

researchers underwent a testing process by conducting a survey testing of the study.

It was done by testing out all the functionalities of the system so that the

Researchers will know the feedback of every user tester and to determine what the
developer needs to add, improve or fix before deploying the system of the study. If

the user tester is already satisfied with the proposal study the researchers are going

to deploy the said project and undergo maintenance.

3.4 Developmental Approach

Figure 5. Developmental Approach

The figure 5 shows the Developmental Approach with the Top-Down

Design of the study. In the figure, the two interfaces down to their specific

subsystems are shown. The researchers used the top-down design approach

for breaking down the main modules used for the online attendance for
students in any event at ACLC College of Butuan. The top-down approach

started with the generalization of the study’s title, then the entities that were

the main modules, down to its sub-modules.

3.4.1 Requirements Gathering

The project team collects all the requirements for the school

event attendance system.

3.4.2 System Design

Based on the gathered requirements, the system architecture

and design are created. This phase involves defining the overall

structure, database design, and user interface.

3.4.3 Implementation

The development team starts coding the system based on the

design specifications. We build the functionalities required for

attendance report of all the students in any event at ACLC College of

Butuan

3.4.5 Deployment

After successful testing, the system is deployed to a production

environment. This involves the admin who can see all the information

and the submitted attendance during the event that is accessible to

 users which are ACLC College of Butuan students.

3.4.6 Maintenance

Once the system is live, ongoing maintenance and support are

carried out. This includes fixing any reported bugs, implementing

enhancements for the system that development is ongoing.

3.5 Software Development Tools

Discussed here were the following software tools and requirements used

during development for the completion of the study and to achieve the objectives.

Included were the front-end tools and the back-end tools.

3.5.1 Front-end Tools

The following were the tools used during the development of the study.

● Bootstrap – the researchers used for Graphical user interface

(GUI) of the study to be more presentable to the users.

● Browser – used to run the interfaces of the study which is the

web-view. It is used also to acquire some information from the

internet to help or give some idea to the researchers on how to

accomplish the study, especially the source code.

● CSS – Cascading Style Sheet used to modify the style of the

html elements.

● HTML – Hypertext Mark-up Language used to develop the web-

view of the study.

● Sublime Text Editor – the text editor used by the researchers

 as a code editor to fulfill all the objectives of the study.

3.5.2 Back-end Tools

● Xampp- includes PHP, a powerful server-side scripting

language commonly used for web development.

● PHP- allows writing dynamic and interactive web applications

that can interact with databases, process from data, and

generate dynamic content.

3.6 Schedule and Timeline

 Figure 6. Schedules and Timeline

The figure 6 shows the schedule and timeline from preparation down to

maintenance of the study. It indicates the day's duration in every task from when it

started and when it will end.

3.7 Project Team and Their Responsibilities

Table 7. Project Team and Their Responsibilities

Name Position Responsibility

Justin James M. System Analyst / ● made a decision, reviewed,

Macapili Researcher managed the team while
Project Manager / documenting and developing
System Analyst the study.
● Helped the developer to
create or develop the study
when comes designing the
interface
● Documented the expected
project that hasn't been built
yet.
● encouraged its team to
achieve or more motivated to
do the study
● Monitored and reported the
progress in every
achievements of the
developer

Eramae Nualla ● Created, tested and

Head Developer /
programmed.
Designer /
Researcher
● Exerted more power to
develop the study

Josephine Bangcot ● Analyzed the study and

Web Designer
and Developer /
related to the other existing
Researcher project to get as a basis.

Table 7 shows the Project Team member name, position and the

responsibilities assigned to each member of the team.

3.8 Verification, Validation and Testing Plan

In the phase of verification, validation and testing plan, it shows how the

researchers plan to test the software of the developed study. It contains the

functionality and the system’s usability test scale.

3.8.1 Functionality Tests

Table 8. Functional Testing Plan

STEP ACTION EXPECTED ATTENDANCE

SYSTEM REPORT
RESPONSE

The following functions of the created study were tested by the

researchers, as discussed in the section on functionality tests. The prototype's

performance and functionality were examined by the researchers during the

functionality testing. Every test was documented in the Functional Testing

Plan, which also contained the test description of the type of test carried out

on the generated study, the test reference, the name of the module, and the

expected testing outcome.

3.9.2 Data Gathering Procedure

The researchers provided a survey questionnaire as a tool for data

gathering. The researchers randomly selected 20 respondents from the

students of ACLC College of Butuan City and handed out questionnaires for

them to answer the questions asked related to the developed study so that

the researchers can formulate ideas and solutions to the problem. The survey

questionnaires used during data gathering.

3.9.3 Statistical Treatment of Data

An equation was shown on how the researchers calculated the total

of the possible data from the survey questionnaire that were answered by
the 20 respondents from ACLC College of Butuan.

Where:

n = number of respondents

N = number of total number of respondents

Formula:

Step 1: n / N = answer

Step2: answer * 100 = answer%