CHAPTER III

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

This Diagram shows Concept of our system. In this study,

the main input is the programming language, which is PHP, with the

corresponding text editor, which is Sublime Text that inputs all the code.

For this system, we are using XAMPP to provide a graphical interface for

SQL (php Admin), making it easy to maintain data in a relational

database. However, the main process for developing our system is to

gather data first, followed by system planning, analysis, and design.

 This diagram shows the main output and the specific output for

the system that we develop for the diploma students, which is “ONLINE

PORTAL DOCUMENT SUBMISSION FOR DIPLOMA STUDENTS OF

ACLC COLLEGE OF BUTUAN” where they can submit their documents

any time they want.

3.2 System Analysis and Design

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.

3.2.1 User Requirements

Table 1. User Requirements

Name of Main
Users Sub Module
the Project Module
 Can Create an
account for Log
in Form for
Registration/ Diploma
Log in Students
Online Portal
Document  Can log in after
Submission Students the Registration
for Diploma of Account
Students of
ACLC  Can upload
College of Upload documents any time
Butuan Documents
  Can Update the
Information of
Update students

Admin

 Can Receive the

Receive
submission
documents of
Diploma students
 Can Delete the
Information of students
Delete
and the document
submetted

3.2.2 Flowchart

Figure 2. Flowchart

The figure 2 shows the flowchart of the study which is developing the

system “Online Portal Document Submission for diploma students of ACLC

College of Butuan” that process the flow of the system those students then

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

browser such as Google Chrome.

 Operating System- The portal should support major operating system 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.3.1 Hardware Requirements

3.2.3.1.1 Development

Table 2. Hardware Development Requirement

Hardware
Purpose
Name
To Submit the Documents for the Diploma
Laptop/PC
Students.

Key Board Putting information including letters, words

and numbers into the computer.

To point at objects you see on the screen of

Mouse
the computer

Router To connect Wi-Fi for submitting documents

through online
Table 2 shows the hardware

requirements to be used in submitting Documents

through the online Portal.

 Table 3. Software Requirements

Software
Requirements Types
Name
Operating Windows/MAC/LINUX
System
Browser Google Chrome
Database Xampp (php Mysql)

Table 3, show the software requirements during the development of the

system and the user access.

3.1.1 Functional Requirements

Discussed were the functional requirements of the study, including the

operational environment, system interface, communication interface, software

interface, and lastly the user group and system access summary.

3.1.1.1 Operational Environment

 Figure 5. Operational Environment

The figure 5 shows the operational environment of

the developed study. It shows how each user access the

main output of the study from computer or to any devices

and a compatible browser which is the Google Chrome.

3.2.3.2 System Interface

Discussed here were the following interface used:

 This system runs only in the browser, which is Google Chrome, which is easy

to access for diploma students that want to access the online portal

submission.

 The log-in form allows diploma students to log in if they already have an

account to access the log in form.

 Registration is required for diploma students who do not have an account

before they log in to the form.

 Dashboard which to see the information/details of students and also the

admin can see the submission 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.3.3 Communication Interface

Communication Interface discussed the following interface that the

researchers used to achieve the desired outcome of the study.

 Bootstrap is the template used by the researchers to provide a responsive

and end-user-friendly.

 CSS (Cascading Style Sheet) is used to enhance the appearance of the

system that is developed by the HTML to be more presentable to the user of

the developed.

 HTML – Hypertext Mark-up Language, used to develop the web view of the

developed study.

 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.3.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.3.5 User Groups and System Access Summary

Table 8. User Groups and System Access Summary

User Group System Access

Can view the personal information, view and

update the personal information of the

Diploma Students.
Admin

Can upload/submit the documents, view the

Students document after submitting.

Table 8, shows the User Groups and System Access Summary of the developed study. It

shows how the user access to the project as a whole.

3.2.4 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.4.1 Reliability

 The developed study can submit documents through

online portal.

 The records or the information have basis and are

stored in the database.

3.2.4.2 Operability

 The web-based of the developed study worked with

all operating system after deployment as long as it

 has a browser where the web-based can be run.

 The PC/Laptop can be used to submit the

documents.

3.2.4.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, the user has a different role in the study.

 3.2.4.4 Availability

 The developed study must be connected to the

Internet/Wi-Fi connections.

 The web-based system works better with a

browser preferably the Google Chrome.

3.3 Developmental Model

Figure 6. Development Method Process (Water Fall Model Process)

The figure 6 shows the development method process utilized by the researchers

since it is the best requirements model for the study; The Water Fall 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 feedbacks of every user tester and to determine what the developer need 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.1 Developmental Approach

figure 7. Developmental Approach

The figure 7 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 portal documents for

diploma students 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 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.4.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.4.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.1.1 Requirements Gathering

The project team collects and documents all the requirements for the online

portal document submission for Diploma Students of ACLC College of Butuan.

3.1.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.1.3 Implementation

The development team starts coding the system based on the design

specifications. We build the functionalities required for document submission,

such as user registration, document upload, and validation checks.

3.1.4 Deployment

After successful testing, the system is deployed to a production environment.

This involves the admin which can see all the information and the submitted

documents then making the online portal submission that accessible to users

which is the diploma students.

3.1.5 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 that ongoing.

3.5 Schedule and Timeline

 Fi

gure 8. Schedules and Timeline

The figure 8 shows the schedule and timeline from preparation down to maintenance

of the study. It indicates the days duration in every task from when it started and

when it will end.

3.6 Project Team and Their Responsibilities

Table 9. Project Team and Their Responsibilities

NAME POSITION RESPONSIBILITIES

System Analyst/  Analyzed the study and related to the

Researcher
other existing project to get as a basis.

 Documented the expected project that

Project
Manager/ hasn’t built yet.
Christian
Peñalosa System
Analyst/

 Made a decision, reviewed,

managed to the team while

documenting and developing the

study.

 Monitored and reported the

progress in every achievements of

the developer.

 encouraged its team to achieve or

more motivated to do the study

 Helped the developer to create or

develop the study when comes

designing the interface.

 Created, tested and programmed.

Head
ANALYN ENRIQUEZ  Exerted more power to develop the study.
Developer/
 Led the team to gather information that was
Designer/
used for developing the study.
Researcher
 Canvassed and purchased the hardware
requirements for the study.
JACKIELYN L.  Specialized in analyzing, designing and
MAÑANEZ Web
implementing information about the said
Designer
project.
and
 Developed the web
Developer/
Researcher  Documented the expect project that
haven’t built yet.
Exerted more power to defend the study.
Table 10 shows the Project Team member name, position and the responsibilities

assigned to each member of the team.

3.7 Verification, Validation and Testing Plan

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

the researchers plan to test the software and the hardware of the developed

study. It contains the functionality and the system’s usability test scale.

3.8 Functionality Tests

EXPECTED
START ACTION SYSTEM OUTCOME
RESPONSE SUBMISSION

Table 10. Functional Testing Plan

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 Data Gathering Procedure

 The researchers provided a survey questionnaire as a tool for data gathering.

The researchers randomly selected 20 respondents from the Diploma students of

ACLC College of Butuan City and handed out questionnaire for them to answer

the questions asked related to the developed study so that the researchers can

formulate ideas and solution to the problem. The survey questionnaires used

during data gathering.

3.9.1 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%