BANGSAMORO SHARIAH LAWYERS LEAGUE OF THE PHILIPPINES, INC.

WEB PORTAL

A Capstone Project Presented to the Faculty of Bachelor of Science in Information Technology,

College of Engineering, Technology and Computing,

Cotabato City State Polytechnic College,

Cotabato City

In Partial Fulfillment of the Requirements for the Degree of

Bachelor of Science in Information Technology

By:

ESMAIL T. BALABAGAN

DATU ALI S. LINSO

May 2017

i
 TRANSMITAL SHEET

This Capstone Project entitled "Bangsamoro Shariah Lawyers League of the

Philippines Web Portal" prepared and submitted by Esmail T. Balabagan and Datu Ali S.
Linso in partial fulfillment of the requirements for the Degree of Bachelor of Science in
Information Technology is hereby accepted and endorsed:

INSTR. ANDERSON N. ROJAS, MIM

Adviser

INSTR. RUWAIDA M. ABAS, MIM

Thesis Coordinator

ASST. PROF. JONATHAN M. MANTIKAYAN, MBA, MIS, Ph. D.

Dean,College of Engineering, Technology & Computing

ii
TABLE OF CONTENTS
 Page

Title Page ..i

Transmittal Sheet .ii

Approval Sheet iii

Table of Content iv

List of Appendices .v

Dedication vi

Acknowledgement ...vii

Abstract ..viii

Chapter I. INTRODUCTION

1.1 Background of the Study ..1

1.2 Statement of the Problem ..2
1.3 Objectives of the Study ..2
1.3.1.1 General Objective ..3
1.3.1.2 Specific Objective ..3

1.4 Significance of the Study ..3

1.5 Scope and Limitation ..4

1.6 Definition of Terms ..4

Chapter II. REVIEW OF RELATED LITERATURE

2.1 Research Concept ..6

2.2 Review of Related System

2.3.1 Local Literature ..7

2.3.2 Foreign Literature ..8

iii
Chapter III. METHODOLOGY
 3.1 Research Approach ....10

3.2 Locale of the Study 10

3.3 Respondent of the Study 10

3.4 System Development Methodology 11

Chapter IV. PRESENTATION, ANALYSIS AND DISCUSSION OF THE SYSTEM

4.1 System Design Specification 13

4.2 Description of the Existing System 13

4.2.1 Methods, Procedures and Operations 13

4.2.2 Resource Management 13

4.3 Description of the Proposed System 14

4.3.1 Flowchart 14

4.3.2 Context Level Diagram 14

4.3.3 Data Flow Diagram 15

4.3.4 Entity Relationship Diagram 16

4.3.5 Use Case 16

4.4 Project Management 17

4.4.1 Project Cost Estimate 17

4.4.2 Gantt Chart 17

4.5 System Implementation iv

19

4.5.1 Programming Consideration Tools 19

 4.5.2 System Requirement Specification 20

4.5.2.1 Hardware Requirement 21

4.5.2.2 Software Requirement 21

4.5.2.3 Human Resource Requirement 21

4.6 Implementation Setup 22

4.6.1 Testing Activities 22

4.6.2 Installation Process 29

4.6.3 User Interface Manual 33

4.6.4 Source Code 46

Chapter V SUMMERY, CONCLUSION and RECOMMENDATION

5.1 Summary 60

5.2 Recommendation 60

5.3 Conclusion 60

APPENDICES 61

User Manual 62
User Login 62

New User Registration 62

Admin Login 69
Transmittal Sheet 70

Bangsamoro Sharia Lawyers League of the Philippines, Inc. Registration

Form...71
v
Application For Title Defense72
Grammarian Certificate 73
Curriculum Vitae 74
Bibliography
vi
LIST OF APPENDICES

Admin login 75
User Manual 76
User Login form 77
New Users Registration 78
 Transmittal sheet 79
Application for Title defense 80
Curriculum Vitae ....81

DEDICATION
vii
We would like to dedicate this project specifically to our parents who support us

financially and give us comfort in times of ups and downs and for the moral support that they

give to us. To our friends who are always supporting and contributing ideas to our research study.

To our instructors who sacrifice to teach us and contribute to our knowledge. Thank you for the

support and critics for the improvement of our research study.

 ACKOWLEDGEMENT
viii

When we were given to undertake the task of making this Capstone Project, Specifically

On-Line Web Portal and Registration, we knew that we needed help in acquiring information,

examples and illustrations. We were fortunate that our experiences on-the-job training is in the

school and they allowed us to have research opportunities.

We were fortunate to have Instructor Anderson N. Rojas who assisted us and imparted his

knowledge in the completion of this proposal. There are not enough kind words to express our

gratitude to him.
 Special thanks to our parents, friends and to our brothers and sisters. And above all, to

ALLAH for his bountiful blessings.

Chapter I
ix
INTRODUCTUION

Computer is one of many powerful technology tools that we are using in most

establishments, corporations and institutions had developed their own use of such technology to

help them work more efficiently with less time and effort. Computer changes the way we think

and work providing us with more accurate data resulting in better production and profit.

1.1 Background of the study

 Bangsamoro Sharia Lawyers League was established by Atty. Rodjipay last July 3, 2009

here in Cotabato City. This group of Sharia Lawyers is maintaining two main services; first is a

law firm that provides the people with lawyers that concerns the Sharia Law or Islamic Law, and

the second is a review center which is located in 2nd Floor-A, Al-Jawawi Building. Sinsuat

Avenue., corner Macapagal Street, Cotabato City. This group of Sharia Lawyers establishes a

good reputation and many people from other cities like Marawi and Lanao del Sur are going here

to avail of its services but still its transaction is still manual especially its review center.

In this context, creation of Bangsamoro Shari Lawyers League of the Philippines, Inc.

Web Portal will help the staff to record their trainee-applicants a lot more easier and effective.

The system will track all coming registration from the applicants. The system will contain Virtual

Private Network (VPN) to secure and avoid loosing of files such as applicant registration.

1.2 Statement of the Problem

The general problem is how to provide or develop online data tracking of all coming

registration from the applicants to avoid delays in forwarding the records to the office.

1.2.1 Specific Problems

1.2.2 How will the new system help the applicants to register or apply through online?

1.2.3 How will it store the records of the applicants systematically?

1.2.4 How will it trace easily the record of the applicants?

 1.2.5 How will it provide safety storage for the records of the applicants?

1.3 Objectives of the study

This project aimed to develop a Web Portal for Bangsamoro Sharia Lawyers.

1.3.1 Specific objectives

1.3.1.1 To develop a Web Portal and online registration for Bangsamoro Sharia

Lawyers;

1.3.1.2 To develop a module that will store the records of the applicants;

1.3.1.3 To develop a module that can easily find the records of the applicants; and

1.3.1.4 To secure the records of both the applicants and the management using

different user access levels.

1.4 Significance of the Study

This study inspired other students and provided information to other agencies especially

the Bangsamoro Sharia Lawyers League. It introduced new technology for the agencies that was

until now using manual method of management. This study benefited the following;

Management may enable to monitor the events and transactions of the office online and

improve the routine of the office.

Personnel may enable to keep the requirements of the applicants in a short period of time.

Applicants refer to the trainees who register online with ease and fast process.
 Researchers provide the knowledge and exposure for conducting the research study and

determine the other possible alternative to improve the method for gathering

information to further justification search study.

Future researchers refer to the future researchers who will improve the features of the

system that serves them as reference.

1.5 Scope and Limitation

1.5.1 Scope of the Study

This study focused on designing a web portal for Bangsamoro Sharia Lawyers who can

minimize the processes of the office and track the files of the applicants. It further provided

safety storage for the applicants record, and gave the privilege to inquire online.
4

The system has the following transactions such as:

Posting the events of the agency.

Registration of the trainee-applicants online.

Monitoring of the trainee- applicants.

Profiling of the applicants.

Providing security for the applicants and management by using different user

access levels.
1.5.2 Limitation of the Study

The proposed system was limited only to Bangsamoro Sharia Lawyers League online

registration and web portal online inquiring and saving of applicants files.

1.6 Operational Definition of Terms

Online refers specifically to an internet connection, connected to, served by, or available through

a system and specially a computer or a telecommunications system (as the internet).

System is a program that provides commands to the step by step procedure, design to save and

retrieve files.

VPN (Virtual Private Network) extends a private network across the private network, such as

the internet. It enables a computer or Wi-Fi-enabled device to send and receive date

across shared or public networks, security and management policies of the private

network. As if it were directly connected to the private network, while benefiting from the

functionality.

CHAPTER II

REVIEW OF RELATED LITERATURE

2.1 Local Literature

This project developed a Web Portal for the Philippine Science High School - Ilocos

Region Campus (PSHS-IRC). It also determined the profile of the PSHS-IRC; level of awareness

and need for inclusion in the development; level of accessibility and adequacy of facilities and

sources for internet access development of the school Web Portal prototype, Its degree of

usability; and the development for Web Portal for PSHS-IRC

 According to PABLO M VILLORIA, JR. (2009), all organizations must be updated with

those kinds of technology. It is either in the way of enhancing their process or hooked up in the

development of system to minimize the manual processing of papers or transactions with the

people for quality service.

As provided for in the International Journal of Reviews in Computing 30th September

2012. Vol. 11, the computerized enrollment system of Lycees Regis Marie Montessori helped the

school to have an efficient and easy way to record / register a new / old student. With the

computerized enrollment system, the school may not keep the files or other information of their

students in a hardcopy; instead they can save it in the system. And also data retrieval and data

manipulation is easy; once the data is entered, you will get so many information and reports at

your fingertips. Information system (IS) is the study of information production, flow and used

within organizational needs.

Looking at enrollment system for Lycees Regis Marie Montessori, it stored details of the

students. It also used as a local assessment for Lycees Regis Marie Montessori. The enrollment

system had been designed for the Lycees Regis Marie Montessori students, Faculty and stuff for

easy and fast releasing of any enrollment form or paper and also to purposes of fast and efficient

process of encoding of all enrollees in the school.

2.2 Foreign Literature

 In Emma Borosom Course Registration System, the Online Registrar Version 0.1-

2003, this course registration system is a web-based program aimed to make easier and more

convenient the class registration process, a hassle through which student go every semester. As it

stands, here at brown university, in order to officially register for classes, each student must fill

out a course registration form manually, bring it to the registrars office at university hall, stand o

line (often for upwards of twenty to thirty minutes), and finally have the form officially approved

and stamped. In order to change anything about ones current schedule, such as dropping or

adding a class, changing grade option, or showing official permission from a professor, the

student must go through the same tedious process. Course Registration System (CRS) attempts to

alleviate these hassles by providing several services to students through the internet CRS

provides a way to search for classes without having to open a course catalog, a way to shop

around and view various possible schedules, and finally officially register for the chosen classes.

All this can be done in a privacy of the students own rooms and without the stress and time it

takes to stand in line in university hall.

Web-Based Employment Application & Processing Support System (WEAPSS) is an

online common platform for both applicants and department / application for the pool search

vacancies. It will replace the traditional paper application process for part-time position for

instructional academic stuff with a new employment jobsite and an online employment

application tracking system. This web application will automate the entire hiring process,

including the position requisition approval process, employment and application processing,

affirmative action (recruitment profile) and personal action processing.

 CHAPTER III

METHODOLOGY

This chapter presented the data gathering procedure, locale of the study, respondents of

the study and system analysis and design. After conducting series of observations, the proponents

gathered accurate information which was used to the proposed system.

Research Approach
 To gather the accurate information for the proposed project, the researchers sought the

permission of the office by sending a transmittal letter to be able to conduct an interview in one

of their stuff that can provide necessary answer to the quarries of the researchers as to the

problem existing in their office.

3.1 Locale of the study

This study was conducted within the Bangsamoro Sharia Lawyers League of the

Philippines, Inc. Office. 2nd Floor-A, Al-Jawawi Building. Sinsuat Avenue, corner Macapagal

Street, Cotabato City.

3.2 Respondents of the Study

The respondents of this project are Atty. Rodjipay Mangulamas, President of the Office.

Other stuff of the office is Mrs. Zunaira Linso, Secretary of the Office. She was the one who

provided us with the answers to our questions for the present study.

3.3 System Development Methodology

The researchers used the Web Development Life Cycle (WDLC) as the formal guideline

methods for the complexion of the project for Bangsamoro Sharia Lawyers League of the

Philippines, Inc. Web Portal. WDLC or web development life cycle was used as a guideline in

this project by setting objectives to obtain the requirements of the company. The proposed study
under this method consists of six (6) important phases. These are the following, project planning,

Analysis, Design and development, Testing, Implementation and Maintenance.

CHAPTER IV
PRESENTATION, ANALYSIS AND DISCUSSION OF THE SYSTEM

4.1 Description of the Existing System

 Bangsamoro Shari'ah Lawyers League of the Philippines, Inc. is using a manual system

of registration in accepting the files of the applicant like bio-data and related form the files are

stored in the cabinet for the retrieval of applicant information.

4.1.1 Methods, Procedures and Operations

The Administrator of Bangsamoro Sharia Lawyers League of the Philippines, Inc. is

currently using the following methods and procedures, to wit:

1. Every applicant is required to submit the complete requirements in designated offices

which took time, money and effort for them to register.

2. After submission of the requirements, they input all the data in the Microsoft Excel

which is not suitable for security of the data.

3. Updates of the status of the applicants are seen on the Bangsamoro Sharia Lawyers

League of the Philippines, Inc. Office.

11

4.1.2 Resource Management

 To store the data of applicant, the administrators are manually collecting the profile of the

applicant trainee. After data gathering, they are using Microsoft Excel as a storage of all

applicants profile.

4.2 Description of the Proposed System

The proposed system "Bangsamoro Sharia Lawyers League of the Philippines, Inc. Web

Portal" aimed to aid some disadvantages of manual process. It aimed to lessen the time, effort

and the also for the trainee-applicants. It improved the security assurance of the trainees' record.

It also lessened the possibility of losing the trainees' record and the searching of records made

fast and easy.

12

4.2.2 Flow Chart Diagram

A flowchart is a type of diagram that represents an algorithm, workflow or process,
showing the steps as boxes of various kinds, and their order by connecting them
with arrows. This diagrammatic representation illustrates a solution model to a
given problem.

13

4.2.1 Use Case Diagram

UML Use Case Diagrams. Use case diagrams are usually referred to as behavior
diagrams used to describe a set of actions (use cases) that some system or systems
(subject) should or can perform in collaboration with one or more external users of
the system (actors).
 15

4.2.4 Data Dictionary

TABLE 1.0 LOGIN

The table 1.0 shows the login table where fields, attributes data types, characteristics and
description are being illustrated. This table input the Admin with the username and password to
log their account.

Log In

Colum Name Data Type Null Description

User Name Varchar (50) Null This stands for the username of the
admin.
Password Varchar (50) Null This stands for the password of the
admin.

TABLES 2.0 STUDENT PROFILE

The table 2.0 shows the student Profiletable where fields, attributes data types,
characteristics and description are being illustrated. This tables input all the information of the
student like her/his profile, parents information, and educational background.

Student Profile
Colum Name Data Null Description
Type
Student Last Name Text Null This stands for the Last Name of the students.
Student First Name Text Null This stands for the First Name of the students.
Student Middle Name Text Null This stands for the Middle Name of the students.
Student ID Int Null This stands for the Name of the students.
Civil Status Text Null This stands for the Civil Status of the students.
Dialect Text Null This stands for the Dialect of the students.
Year level varchar( Null This stands for the Year level of the students.
50)
Address varchar( Null This stands for the Address of the students.
50)
Birthday varchar( Null This stands for the Birth date of the students.
50)
Age Int Null This stands for the Age of the students.
Gender Text Null This stands for the gender of the students.
Height nvarchar Null This stands for the Height of the students.
(50)
Weight varchar( Null This stands for the Weight of the students.
 50) 16

4.3 Gannt Chart

Activity Jan Feb Mar Apr May Jun Jul Aug

Title Page
Transmittal Sheet
Table of Content
List of Appendices
Dedication
Acknowledgement
Abstract
Chapter 1: INTRODUCTION
Background of the Study
Statement of the Problem
Objective of the Study
General Objective
Specific Objectives
Significant of the Study
Scope
and
Limitati
on
Definitions of terms
Chapter II: REVIEW OF
RELATED LITERATURE
Review of Related Concept
Chapter III: METHODOLOGY OF
THE STUDY
Research Approach
Locale of the Study
Respondent of the Study
System Development Methodology
Chapter IV: PRESENTATION,
ANALYSIS
AND DISCUSTION OF THE SYSTEM
System Design Specification
Description of the Existing System
Method, Procedure and Operation
Resource Management
Description of the Proposed System
Flow Chart
Context Level Diagram
Data Flow Diagram
Entity Relationship Diagram
Use Case
Project Management
Project Cost Estimate
Gantt Chart
System Implementation
Programming Consideration tools
System Requirement Specification
Hardware Requirement
Software Requirement
Human Resource Requirement
Implementation
Testing activities
Installation Process
User Interface
Source Code
Chapter V: SUMMARY,
CONCLOSION and
RECOMMENDATION
Summary
Conclusion
Recommendation
Transmittal
Certification
Interview
Authorization to use Data/Information
Certificate of acceptance
17
Grammarian Certificate
Curriculum Vitae
Bibliography

18

4.4 Programming Consideration Tools

 An FTP client used Filezilla both Windows. This program allows you to transfer files to

and from web server.

4.4.1 Xampp is a free and open source cross platform web server solution tact package,

consisting mainly of the Apache HTTP Server, MySQL database, and interpreter for script

written in the PHP and Perl Programming Langua. Xampps designer intended it for use as a

development tool, to allow Website Designer and Programmers to test their work on their own

computer without any access to the Internet. To make this as easy as possible, many important

security features are disabled by default.

4.4.2 A Source Code, on the Windows machine, used Notepad++. This is not the

Notepad that is already installed as part of Window to edit codes and codes and image the

appearance of the Web Site.

4.4.3 The Firefox Web Browser is the highly popular free web browser that more than

500 million people worldwide are using to surf and interact with the Internet. Firefox is

available for Linux, Mac, Windows, handheld devices, and in more than 70 different languages.

You may currently be using Internet Explorer, but Firefox is faster which means that you

don't waste time waiting for web pages to load. With a strong focus on your online security and

privacy, Firefox helps to protect your personal information and activities from being seen and

exploited while you surf the Internet.

Firebug integrates with Firefox to put a wealth of web development tools at your

fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live

in any web page.

 19

4.5 System Requirement Specification

The requirements in the following table applied to installation that has a single server
with a built-in database and to server farm installation that includes a single server and multi
servers in the farm. This article also provides client connectivity requirement for Microsoft
Project Web App, as well as client/server compatibility with Microsoft Project Professional client
versions.

4.5.1 Hardware Requirements Specification

1. SVGA Monitor
2. At least Intel Pentium IV 2.2 GHz
3. 101 Function Keyboard
4. Optical Mouse with mouse pad
5. Uninterrupted Power Supply (UPS)
6. Automatic Voltage Regulator (AVR)
7. 20 GB Hard disk or higher
8. 4GB Ram

4.5.2 Software Requirements

1. Windows XP or higher operating system
2. PHP, HTML, XHTML
3. Database Server
4. Word Press
5. MySQL
6. Xampp
 20

4.5.3 Human Resource Requirements

The Administrators have full authority to:
1. Manage registration
2. Edit Students/applicant
3. Input data
4. Delete trainees/applicant
5. Approved/Disapproved trainees/applicant
6. Create event
7. View all trainees applicant
8. View event calendar
The Applicant has authority to:

1. Registered Online
2. Edit Profile
3. View Event
4. Send Message

4.6 Implementation Setup

4.6.1 Testing Activities

The goal of testing was to demonstrate that the program under control contains bugs.
Testing must not be confused with debugging, which is the process of detecting and reducing the
number of existing error. Testing can never prove that a code is error but rather it verifies that
error exists. Therefore, we need to consider the fact that the error might come from the test itself,
while the tested code might be correct. We have to know what the result of the test will show
before it has actually been performed. The one who is responsible for doing the testing has to be
able to define what the outcome should be.

21

4.6.2 Installation Process

How to Install XAMPP for Windows

XAMPP for Windows 7 version provides an easy to install Apache-MySQL-PHP-PERL-PEAR

framework. XAMPP saves time and effort and provides the software support for web frameworks like

Drupal, Joomla, Moodle, or wikiMedia on any Windows PC.

Steps 1: In your web browser, go to https://www.apachefriends.org/index.html

Steps 2: Click on the download link for XAMPP.

22

Step 3: When prompted for the download, click "Save" and wait for your download to finish.
Step 4: Open CD

or DVD drive from

My Computer.

Install the program,

and click on "Run."

23

Step 5: Accept the default settings. A command will open and offer an initial installation

prompt. Just hit the Enter key, and accept the default settings. To simplify installation, just hit

ENTER when prompted on the command line. You can always change settings, by editing the

configuration files later.

Step 6: When your installation is complete, exit the command window by typing x on the command line.

24

Step 7: Start the XAMPP Control Panel.

Step 8: Start the Apache and MySQL components. You can also start the other components, if

you plan to use them.

 25

Step 9: Verify the Apache install, by clicking on the Apache administrative link in the Control

Panel.

Step 10: Verify the MySQL installation, by clicking on the MySQL administrative link in the

XAMPP Control Panel. If the verification steps are successful, XAMPP should be successfully

installed on your PC. Open a browser and enter "local host" on your address bar. You will be

redirected to a page telling you that you've successfully installed xampp on your system.
 26

Step 11: A new browser window will automatically open with the phpMyAdmin interface.

Step 12: Click on Databases near the top-left, and youll be prompted to create a new database.

Ive called mine WP.

When youve entered a name, click Create and close the window.
 27

Step 13: Download and Install Word Press

Download the latest version of Word Press.

In order to get Word Press working with XAMPP, we need to unzip Word Press in the right

folder. Go to the XAMPP folder on your computer and open the htdocs folder C:/Program

Files/XAMPP/htdocs.

Unzip Word Press into its own folder and rename it whatever you like. For consistency, Im

going to call this installation of Word Press WP to match the name of the database I just

created.

My installation of Word Press is called WP.

Step 14: Open the WP folder where you saved Word Press, find the wp-config-sample.php file

and rename it wp-config.php. Open the file and scroll down until you see the following lines:
 28

Update your wp-config.php file with your database details.

Step 15: These lines of code define the login details for your database:

Replacedatabase_name_here with the name of your database, which in my case is WP.

Replace username_here with root and leave password_here blank.

Save the file and close it

Now we can get on with actually installing WordPress.

Open your browser and go to http://localhost/wp/

You should see the translation screen that comes before the famous five minute Word Press

installation process.

29

Step 16: Enter wordpress for your Database Name, root as your User Name, and leave

'Password' blank. Click Submit.

Step 17: Click Run the install.

30

Step 18: Enter a title for your blog, your email address and chose a unique password and

username. After you're done, click Install Word Press.

 You have successfully installed Word Press on XAMPP on your Computer machine! See

that wasn't so hard was it? Pat yourself on the back you've accomplished something many people

find quite difficult (probably cause they haven't read this post).

31

4.6.3 User Interface Manual

 Figure 1 Home Page

This page showed the home page of Bangsamoro Shari'ah Lawyers League of the
Philippines, Inc. Web Portal.

Figure 2. Latest Post

This page show the latest post page of the user to access the latest post. 32

Figure 3. Online Registration

 This page showed the Online Registration page of the user to access the registration

form of the applicant in Bangsamoro Shari'ah Lawyers League of the Philippines, Inc. Web

Portal.

Figure 4. Announcement Page

This page showed the Announcement page of the user.

33

Figure 5. Message Us Page

This page showed the Message Us page of the user to send message to the administrator.

Figure 6. About Us Page

This page showed the About Us Page of the user to know about the Web Site.

34

Figure 7. Log-in/Sign-up Page

This page showed the Log-in/Sign-up Page of the user to access their account.