CHAPTER ONE

INTRODUCTION
1.1Background of the Study
According to Carleton University (2017), a bursary is a monetary award that
is granted on the basis of financial need. Bursaries are different than
scholarships. Scholarships are merit-based and are awarded for academic
achievement. Bursaries are financial-need based awards that do not have to be
repaid. The intention of the undergraduate bursary program is to supplement,
not replace, students’ primary sources of funding such as government student
financial assistance from another province or loan funding from a financial
institution.
Scholarships and bursaries reduce the cost of postgraduate study and the burden
of debt because they don’t have to be repaid. Even if they not cover the full
amount of fees and living costs and very few, they can reduce tuition fees, fund
travel costs and provide cash grants.
A major source of scholarships and bursaries are universities themselves,
business and industry will sometimes fund postgraduates working on projects
of interest to them and philanthropists often donate money to a scheme bearing
their name, the money usually distributed by university departments. Few
postgraduate bursaries are now means-tested and the word has come to mean
not dependent on academic merit. Postgraduate students in financial difficulties
can apply to university hardship or access funds, especially those with
dependent children. You will need to supply financial information and show
1
that you have first tried to obtain funding from other sources
(TARGETpostgrad, 2014)
A bursary is basically a program that is financially aided by someone else or a
company. This means that funds are made available by a company for a student
who wants to study further and who qualifies can do so but moreover need the
financial assistance to do this. The company then pays the fees of such a
learner to complete their studies and gain a higher qualification
(BursariesSouthAfrica, 2016)

1.2 Statement of the Problem

The challenge faced by students in the current bursary allocation system are
highlighted below:
The challenges faced by students in the current bursary allocation system are
highlighted below: The queue for the collection of the bursary fees is usually
long and disorganized thus not every one on the queue is guaranteed of
collecting the fee, also non-students can impersonate students in order to
collect the fees, moreover several students usually are not aware of the date
and venue of the bursary collection and the time taken to complete the
bursary fee collection exercise is usually long and uncomfortable.

1.3 Aims and Objectives

This research project is aimed at implementing a State Bursary Allocation
System for the management of bursary allocation information to students in
higher institutions of learning. The objectives of this work are listed below;
2
  Identify the problems faced in the current bursary system
 Design an automated software solution targeted at solving the problems
identified
 Code and develop the software
 Test the software and document the implementation process

1.4 Significance of the Study

This research is important as it will ensure that students are paid their bursary
fees on time and without the usual discomfort faced during the process. The
money paid can go a long way to assist the students to fund various aspects of
their education. The proposed report will also be useful for computer science
researcher seeking to do projects related to bursary management.

1.5 Scope of the Study

The scope of this research will be the development of a State Bursary
Allocation System for the management of bursary information of the students
of the Nigerian Army Institute if Technology and Environmental Studies.

1.6 Limitations of the Study

This research will be limited by the following factors:
Limited Timeframe: The time allocated to complete the report is done
under a very tight schedule
Poor Network: The availability of internet connectivity to get data for the
research will be a very daunting challenge for the researcher
3
Power Supply: As this software is dependent on the computer, the need for
electricity will be very challenging as epileptic power supply will mean that
the computer will not always be available for use for the research.

1.7 Definition of Terms

Bursary: This is a monetary award that is granted on the basis of financial
need.
HTML: Hypertext Markup Language (HTML) is the main markup language
for web pages. HTML elements are the basic building-locks of
webpages.HTML is written in the form of HTML elements consisting of tags
enclosed in angle brackets (like <html>), within the web page content.
CSS: it stands for cascading style sheets; CSS describes how htlm elements
are to be displayed on screen, paper of multiple web pages all at once.
PHP: it stands for PHP hypertext preprocessor; it’s a widely used open source
general-purpose scripting language that is especially suited for developing
wed applications that can be embedded in html.
JAVA SCRIPT: it is an oriented computer programming language commonly
used to create interactive effects within web browsers.
MYSQL: Mysql is a free, open source relational database management
system (RDBMS) that uses structured query language (SQL). Mysql runs on
virtually all platforms, including Linux, Unix and on windows. Although it
can be used in a wide range of applications, mysql is most often associated
with web-based applications and online publishing.

4
BENEFICIARY: a person or group that receives benefits, profits, or
advantages. It can also refer to a person designated as the receipt of funds or
other property under a will, trust, insurance policy e.t.c.
SORT-CODE: it is a six digit number usually formatted as three pairs of
numbers. It identities both the and it branch where the account is held.
GCSE: General Certificate of Secondary Education (GCSE) is an
academic qualification awarded in a specified subject, generally taken in a
number of subjects by pupils in secondary education in England and Wales
over two years.

5
 CHAPTER TWO
LITERATURE REVIEW
2.1 THEORETICAL FRAMEWORK
A bursary is a monetary award made by an institution to individuals or groups
of people who cannot afford to pay full fees. In return for the bursary the
individual is usually obligated to be employed at the institution for the
duration as the bursary. According to The Good Schools Guide, a bursary is
"usually for helping out the impoverished but deserving and those fallen on
hard times" (The Good Schools Guide, 2017)
According to The Hobsons UK Boarding Schools Guide (2007), numerous
independent schools have bursary capability, namely grants from the school to
help pay education fees. These are usually awarded after a "means test" of
family income and are not necessarily dependent on examination
performance, although some account of academic ability will be taken.
Bursaries may be awarded in addition to scholarships where financial need is
demonstrated and the prospective student would otherwise be unable to enter
the school.
To obtain such a bursary, it is customary for parents to be asked by the
school's bursar to fill in an application form, giving details of their financial
circumstances, supported by documentary evidence, including capital assets.
The application will be considered by the school in accordance with its
bursary policy. The award will often only remain in force until the pupil has
sat the next relevant public examination. Most schools will review bursaries

6
annually to ensure that the justification for an award remains. In Britain any
award made before GCSE will not necessarily continue to the A-level stage.
There are two types of bursary awarded by institutions (such as universities).
The first is a means-tested bursary which is available for all students whose
parents earn under a threshold value per annum. It is often given out using a
sliding scale, with people at the lowest end of the scale receiving a full
bursary and the monetary award decreasing in value with proportion to the
parental earnings (The Good Schools Guide, 2017)
The second type of bursary, also known as a "scholarship" or "prize", is one
based on performance. These awards are generally given for good
performance in the exams preceding university or college entrance in which
the student achieves grades above the standard entry. These can be awarded by
the university or, sometimes, by companies (The Good Schools Guide, 2017).
According to Bursaries South Africa (2016), Bursaries and scholarships are
not the same and this should be understood. A scholarship only covers the
study fees and is based solely on merit whereas a bursary mostly include study
fees as well as book fees, living allowances, pocket money and in some cases
a guarantee of work after successful completion of studies. Bursaries are also
mostly awarded on merit and the need for financial aid thus they are
sponsored by companies. In most cases bursaries are made available for
students who are in need of financial aid and shows that they are dedicated to
study further. It is recommended that a student only applies for a bursary that
they will qualify for. Bursaries are made available to all students in need thus

7
if one wishes to apply they should ensure that all the requirements are met and
all information is forwarded in time.
Parents can also ask from their companies for bursaries for their own children
if the company makes bursaries available yearly but it might not be a field that
the student is qualified for. Each bursary has different terms and conditions
and candidates ought to carefully weigh the pros and cons before deciding to
apply or accept. It is recommended to do a thorough search before applying
and compare different bursaries and what they offer so that one applies to a
suitable bursary.
A candidate must ensure that all criteria is met for the requirements as not to
waste their and the companies time (Bursaries South Africa, 2016)
2.2 EMPIRICAL REVIEW OF ONLINE COMMUNICATION
2.2.1 Bursary Management System
A review of related bursary management system will be treated in this section.
A) Bursary Management system. According to Focweb Technologies (2017)
when your looking for a bursary management system, you want to acquire a
system that works from a web development like them. They claim to deliver
on time and cost effective web solutions, and have a large volume of
experience. Their E-bursary management system facilitates the seamless
application of bursaries online and provides a dynamic portal for the bursary
committee to monitor, track, award bursaries and manage applicants data
easily.

8
The main features include:
i. Online applications.
ii. Applicant’s management.
iii. Beneficiary management.
iv. Bursary funds management.
v. SMS Module; Automatic sms notifications to successful applicants.
vi. Automatic awarding of bursary funds based on past data like location
and other factors.

2.3 CONCEPTUAL FRAMEWORK

2.3.1 Devman Bursary Management System:
According to the Devman Website (2017) their DevMan Software helps you
simplify and process these complexities, giving you power over your data and
enabling more students to receive bursary funding. Thousands of claims and
payments are processed in minutes and along with the automated payment
notifications and a seamless integration into your accounting system, DevMan
ensures accurate and secure recording and reporting of managed bursaries.
Features include:
i. Contacts
ii. Detailed profiles for prospects, donors, beneficiaries, alumni, students,
staff
iii. Interactions
iv. Events and Campaigns
v. Fundraising campaigns
9
 vi. Donor stewardship
vii. Financials
viii. Monitor real time donations and payment requests.
ix. Committed giving
x. Committed funding
xi. Regular payments
xii. Tax certificate

2.4 REVIEW OF RELATED EMPIRICAL STUDIES

2.4.1 PayMyStudent Budget Management System:
One of the most overlooked aspects of bursary funding is entering student
applications onto the system, it's time consuming and the admin teams have
more pressing issues to deal with, like the students. PayMyStudent has found
a solution to this problem, by building a student portal which allows the
students to log-in and apply online for their bursary fund, their information is
then automatically transferred over to PayMyStudent which means less time
typing and more time spent helping students (PayMyStudent, 2017)
According to PayMyStudent (2017) before PayMyStudent, most colleges used
spreadsheets to maintain their data and, as they found out from our clients, it
was a headache; having several spreadsheets open, trying to locate the shared
folders, no support when things go wrong and worst of all, when they have
auditors visit the systems lacks the simplicity to complete simple tasks. By
interacting with the colleges and building the software from the ground up,
they have made PayMyStudent user friendly for all staff and in the unlikely
10
event of getting stuck, they claim to have a friendly and knowledgeable
support team who are more than happy to help.
With technology changing so fast it's important that bursary fund software
changes with it, unlike some competitors who only use windows based
software (which lacks the flexibility for modern colleges), PayMyStudent is a
100% web application which means colleges can access it from any device
with a web browser allowing colleges to choose when and where they access
the software (PayMyStudent, 2017)
PayMyStudent guides the user through simple processes in a clear and logical
manner and provides comprehensive visual tools and reports to notify you of
the financial situation at all times.
Some of the software's unique features include:
i. Fully automated or manual payment processing with built in alert
notifications
ii. Payment workflows to process your payments. Schedule the delivery of
reports and data files
iii. Simple graphs and charts which show a graphical overview of funds
and payments
iv. Payment scheduling which is easily managed with our simple filtering
system
v. Funding rules which can be copied from year to year at the click of a
button
vi. No restrictions on the type of funding you want to offer

11
vii. Storing of evidence supplied with a student record - retrievable in one
click
viii. Email thousands of students in one without a problem

12
 CHAPTER THREE
RESEARCH METHODOLODY
3.1 Methodology
In this chapter the researcher explains the analysis of (online state bursary
allocation registration system) for students in tertiary institutions, and also the
old system. In other to implement an online state bursary allocation
registration system, the processes, analysis, input requirement specification
and output requirement specification, and the advantages were employed,
using Nigeria Army Institute and Environmental Studies (NAITES), as a case
study.
3.2 Method of Data Collection
Knowledge has no limit, relying solely on safe-knowledge that has already
been acquire without trying to quest for more could be unwise, therefore, to
achieve this work, source by data were collected by the researcher through the
following ways. Primary data collection: Data are collected from this method
through;
i. Personal view of already computerized programs; the researcher viewed
other already computerized programs to be able to know what the
interfaces are and how they work.

3.3 Analysis of the Existing System

The government of the state will allocate a budget for the funding the bursary
of the students in their educational institutions. The bursary funds will then be

13
sent to the school department that will be responsible for sharing and
allocating the budget to the school students.
The student will be informed about the bursary funding exercise and they will
be required to report to the location with some means of identification such as
their student identification card or their school library card. The students will
then be required to form a queue so that they can collect the bursary grant
from the school administration.
When a student’s turn is reached he or she will be required to show a proof of
being a student in the institution before the bursary grant money is given to
them.
Disadvantages of the Existing System
The shortcomings of the current system include;
i. The queue for the collection of the bursary fees is usually long and
disorganized thus not everyone on the queue is guaranteed of collecting
the fee
ii. Non-students can impersonate students in order to collect the fees
iii. Several students usually are not aware of the date and venue of the
bursary collection
iv. The time taken to complete the bursary fee collection exercise is usually
long and uncomfortable

14
Fig 3.1 Data flow diagram of the existing system

apply Online state bursary allocation registration system

students
allocate

15
3.4Analysis of the Proposed System
The proposed system is developed to manage the aspect of bursary funding in
tertiary institutions. It aid in supporting student financially by creating a
convenient avenue for allocation of bursary fund to students, providing the
system to be capable of eliminating the issues of queue at every bursary
offices.
Advantages of the Proposed System
The new system will overcome the shortcomings of the current system
through the inclusion of the following features:
i. Implementation of an electronic database record system that will be
used to store the details of the registered students of the school.
ii. Enable the bursary payment officials to view the bank account details of
the students so that payment can be made directly to their accounts
iii. Enable the students to log in to the portal and view any bursary
payment that they have been allocated.

With these features the new system will eliminate the need for the students to
have to join queues to collect the bursary funds. Also impersonators will be
reduced using this new system as only registered students will be registered on
the platform.
Disadvantages of the Proposed System
i. Application fee, transaction fees or processing fee may be charged by
cooperate body involved.

16
Justification of the System
It is the purpose of the new system to address all the problems plaguing the
present system. This system will do the allocation and storing of student’s
information either automatically or interactively using PHP-MYSQL. This
will be a report generated conforming to particular information needed by the
bursary management. This will require the input of necessary data and record
of student and their bank details respectively, and then a payment record is
generated. The proposed system will also have some other features such as:
i. Convenience in handling of data.
ii. Record keeping is reliable.
iii. Distribution of funds among students electronically.
iv. Easy accessibility of the system by students and management at any
time.

3.5 System and Program Flowchart

The flowchart below describes the flow of the system processes. It attempts to
give an overview of the operations executed in the online state bursary
allocation registration System. It displays the processes involved in the
students-interface interaction of the online state bursary allocation registration
System. The student begins by viewing their payment bursary information and
then submits their bank details. The diagram below is the flowchart diagram
of the system:

17
 Start

login

No
Is user a student?

L,
Yes
A
View payment info.

Add student info

A
Submit bank details

Allocate bursary fee

Collect payment

logout
logout

stop stop

Fig 3.2 Student flowchart Fig3.3 admin flowchart

18
Fig3.4 High level model of online state bursary allocation registration
system Server

Home page

login

Login role

Student admin

View bursary payment info Register student

Submit bank details

Allocate fund

Logout Logout

19
3.7 DATABASE FILES
The database management system that will be used to store the information
for the proposed system will be MySQL.
Below are the descriptions and structure of the database files to be used by the
system:

Table 3.1Admin table structure:

S/N FIELD FIELD DATA

O NAME SIZE TYPE
1. ID 30 Number
2. Username 50 Text
3. Password 50 Text
4. Role 10 Text

S/N FIELD FIEL DATA

O NAME D TYPE Table
SIZE 3.2:Student
1. ID 30 Intege
table
r
structure:
2. Username 30 Text
3. Password 50 Text

4. Address 50 Text
5. Sex 50 Text
6. Departmen 50 Text
t 20
7. Faculty 10 Text
8. Level 10 Text
9. State 10 Text
Table 3.3:Payment l table structure:

S/N FIELD FIELD DATA

O NAME SIZE TYPE
1. ID 30 Number
2. Student ID 50 Text
3. Bursary 10 Numeric
Fee
6. Date 20 Numeric

S/N FIELD FIEL DATA

O NAME D TYPE Table 3.4:Bank
SIZE
table structure:
1. ID 30 Intege
r
2. Student_I 50 Text
D 21
3. Bank 50 Text
4. Sort_Code 50 Text
5. Branch 50 Text
3.8 UML Diagrams

The Unified Model Language (UML) is a graphical language for visualizing,

specifying and constructing the artifacts of a software-intensive system. The
Unified Model Language offers a standard way to write a system's blueprints,
including conceptual things such as business and system functions as well as
concrete things such as programming process language statements, database
schemas, and reusable software component. One of the purposes of UML was
to provide the development community with a stable and common design
language that could be used to develop and build computer applications. UML
brought forth a unified standard modeling notation that IT professionals had
been wanting for years. Using UML, IT professionals could now read and
disseminate system structure and design plans just as construction workers
have been doing for years with blueprints of buildings. It is now the twenty-
first century and UML has gained traction in our profession.
UML combines the best practice from data modeling concepts such as entity
relationship diagrams, business modeling (work flow), object modeling and
component modeling. It can be used with all processes, throughout the

22
software development life cycle, and across different implementation
technologies.

23
Use case of the proposed system
24
 CHAPTER FOUR
IMPLEMENTATION AND RESULT
4.1 Hardware And Software Requirement
Implementation is a realization of a technical specification or algorithm as a
program, software component, or other computer system. It involves
synthesizing users of the State Bursary Management System to utilize and
operate the newly developed solution. Implementation entails the conversion
technique, the installation, testing and maintenance of the new system.

4.2 Installing The New System

The requirements for the deployment and installation of the new system are
stated in the upcoming sub-sections.

4.2.1 Hardware Requirement

For proper installation of the system, the following minimum hardware
requirements are:
i. Color Monitor
ii. 512MB Random Access Memory (RAM Size)
iii. 1 Gigabyte Hard Disk Drive
iv. Keyboard
v. Mouse

25
4.2.2Software Requirement
i. Web Browser Software Application
ii. Apache Web Server
iii. MySQL Database Server

4.3 System Implementation

After the installation of the new system, the system was implemented in order
to ensure that the set objectives that were set by the project researchers were
met. The various interfaces of the new system that ensured that possibility are
highlighted in the next sub section.
4.3.1 System Modules
Below are discussed the several modules that make up the Bursary
Management System.:
Administrator System Login Form: This form lets the administrator submit
login details to gain access into the system.

26
Figure 4.1 Admin System Login Form

27
Add Student Form: This form lets the administrator user submit
student details into the system.

Figure 4.2 Add Student Form

28
Add Bursary Payment Form: This form lets the administrative user
submit bursary payment details into the system.

Figure 4.3 Add Bursary Payment

29
 Student Access Page: This page issued by the student user to view
their budget payment information.

Figure 4.4 Student Access Page

4.4 Justification of programming language used

To achieve an efficient system as such that online state bursary allocation
registration system for students in tertiary institutions that will require storage
and future reference, an efficient and reliable programming language is also
required and the easily accessible and understandable language that best suits
the scenario is PHP scripting language, thus it is been used for the design. This
makes the researcher to combine the usefulness of PHP (a scripting language)

30
to design the system. For reliable storage of data and easy retrieval access,
MYSQL relational database management system was used.
During system testing, it is found that the objectives and aim of the system are
met with over 96% accuracy of query result. Thus, this justifies the choice of
programming language used.

4.5 Maintenance
This line of defense safeguards the functioning of the hardware, software,
physical security and operating procedures. Proper backup of hardware and
software are extremely important. The system allows the user to enter the
system only through login. This system must be updated from time to time for
the system to provide reliable information, most especially to its users. We
may define system maintenance by describing the activities that are
undertaking after a program is released for use.

31
 CHAPTER FIVE
SUMMARY, RECOMMENDATIONS AND CONCLUSION
5.1 Summary
The summary part of this research summarize the research topic as well as the
motivation of the study, the aims and objectives of the research and its
significance. Follow by the literature review of concepts related to the
research topic. The system analysis and design was performed showing the
analysis of the current system and its flaws. The design of the proposed
system was treated using UML design parameters such as use case diagrams
after which the results of the software implementation were shown in the
System Implementation phase of this research.

5.2 Conclusion
The development of the Student Bursary System will solve the problem faced
by the management of the University. The proposed system was developed
using PHP. MySQL and HTML. The system was tested and was found to meet
with the requirements set out by the researcher.

5.3 Recommendations
Based on the thorough study on this project work, the following
recommendations have been put forward:
i. The database system should have a back up system
ii. Encryption of data stored in the database system should be considered
by further researchers
32
 REFERENCES
Adewa-Ogubaen. S. E. and IYAMU, O.S., 2005. Using information and
communication Technology in Secondary School in Nigeria. School of Education,
National Open University of Nigeria.

Adewa-Ogubaen. S.E. and Trends and issues in e-learning information

Development, A white paper for alt-i-lab (2004). Prepared on behalf of DEST
(Australia) and JISC.CWTIS (UK). Retrieved from www.lise.ac. Uk/upload-
document/Altilab04-infrasture2.( 2010).

Advanced UK Fee Funding .Hobsons UK Boarding Schools, Guide.

[online].Available From <http:// www.boardingschools.hobsons.com/
advice_uk_fees_funding> (January 2009).

Ani, C.O. 2003. Programming with Microsoft Basic. Immaculate publications

limited, 2 Aku Street, Ouii New layout Enugu, Language tutorial.
Published by juansoulie. Retrieved from www.Eplusplus. Com/doc/tutorial on 25th
February, 2008.

Available From <http://www.paymystudent.com/?sitecontentid=847152EC-3EEC-

468D-BBD5-A61331D35830> (2017).

Bursary Management DavMan.[online]. Available From

<https://www.devman3.com/bursary/> (2017).
33
Bursary Management system Focweb Technologies.[online]. Available From
<http://www.focweb.co.ke/bursary-management-system/> (2017).

Choosing Your Bursary Management Software PayMyStudents.[online]. Available

Help and advice on finding the right school for your child.

Curtain. R. (2001). The effectiveness of streaming video in wed-Based instruction.

Published doctorial dissertation. The university of Alabama.

Dublin, Ireland tutunen, M., al, (2010). Traditional Education Vs bursary and
information technologys, issue 1, volume3, 2009. Retrieved from www.wseas.
Us/journals/ education information/( 2010) education technology and society, 8 (1)
104112. Retrieve from www.Ifets.Infor/journais/(2017).

Former.L.S.J. 2009, Meeting: 214 busary SIG, World Library and information.
Congress: 75th IFLA General Conference and council, 23-27 August 2009, Milan,
Italy.

Hedgi, N., and Heywald, L. 2004. University busary contributing to life-long

learning in a networked world. busary 1:128-145. Retrieved from
www.nationmaster.com/contry/ni/internet on 3rd may, 2010 Hedge. N and
Heywald., L., 2004.university busary contribyting to life-long
www.nationmaster.com/country( 2010).

34
Iyamu, E.O.S. 2009. Using information and communication technology in
Secondary schools in Nigeria: problem and prospects. Educarionalkahn, D, 2002.

Khoo, C.C. 1994. Interactive multimedia for teaching, learning and presenting.
Retrieved from http:/www.ascilite.org.all/assetarchieves/ confs/iims .

Scholarships and bursaries explained TARGETpostgrad.[online].

Available from <https://targetpostgrad.com/scholarships-and-bursaries-
explained> (January 2014).

The Good Schools From <https://www.goodschoolsguide.co.uk/education-advice-

and-help/scholarships-and-bursaries/money-matters.html?Itemid=52> ( March
2017).

WHAT IS A BURSARY?”Bursaries South Africa.[online].

Available from <http://bursaries-southafrica.co.za/south-african-bursaries-
programs/> (February 16, 2016).

What is a bursary?".Carleton University.[online]. Available from

https://carleton.ca/awards/bursaries.

35
 Appendix I
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- -->
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../bs/css/bootstrap.min.css" rel="stylesheet">
<link href="../fonts/css/font-awesome.css" type="text/css" rel="stylesheet">
<link href="../fonts/css/font-awesome.min.css" type="text/css"
rel="stylesheet">
<style type="text/css">
html,
body {
height: 100%;
background: #eeeeee;
}

a,
a:hover,
a:active { text-decoration: none; }

a{
36
color: white;
font-weight: 760;
}

a:hover { transition: all 200ms ease-in-out; }

.page-container {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
}

.page-container.sidebar-collapsed {
padding-right: 65px;
transition: all 100ms linear;
transition-delay: 300ms;
}

37
.page-container.sidebar-collapsed-back {
padding-right: 280px;
transition: all 100ms linear;
}

.page-container.sidebar-collapsed .sidebar-menu {
width: 65px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}

.page-container.sidebar-collapsed-back .sidebar-menu {
width: 280px;
transition: all 100ms ease-in-out;
}

.page-container.sidebar-collapsed .sidebar-icon {
transform: rotate(90deg);
transition: all 300ms ease-in-out;
}

.page-container.sidebar-collapsed-back .sidebar-icon {
transform: rotate(0deg);
transition: all 300ms ease-in-out;
38
}

.page-container.sidebar-collapsed .logo {
padding: 21px;
height: 136px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}

.page-container.sidebar-collapsed-back .logo {
width: 100%;
padding: 21px;
height: 136px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
}

.page-container.sidebar-collapsed #logo {
opacity: 0;
transition: all 200ms ease-in-out;
}

.page-container.sidebar-collapsed-back #logo {
39
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}

.page-container.sidebar-collapsed #menu span {

opacity: 0;
transition: all 50ms linear;
}

.page-container.sidebar-collapsed-back #menu span {

opacity: 1;
transition: all 200ms linear;
transition-delay: 300ms;
}

.sidebar-menu {
position: fixed;
float: left;
width: 280px;
top: 0;
right: 0;
bottom: 0;
background-color: #303641;
40
color: #aaabae;
font-family: "Segoe UI";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}

#menu {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}

#menu li {
position: relative;
margin: 0;
font-size: 12px;
border-bottom: 1px solid rgba(69, 74, 84, 0.7);
padding: 0;
}

#menu li ul {
opacity: 0;
height: 0px;
41
}

#menu li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 10px 20px;
color: #aaabae;
white-space: nowrap;
z-index: 2;
}

#menu li a:hover {
color: #ffffff;
background-color: #333944;
transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
}

#menu li.active > a {

background-color: #2b303a;
color: #ffffff;
}

42
#menu ul li { background-color: #2b303a; }

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#menu li ul {
position: absolute;
visibility: hidden;
right: 100%;
top: -1px;
background-color: #2b303a;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.1s linear;
border-top: 1px solid rgba(69, 74, 84, 0.7);
}

#menu li:hover > ul {

visibility: visible;
opacity: 1;
}
43
#menu li li ul {
right: 100%;
visibility: hidden;
top: -1px;
opacity: 0;
transition: opacity 0.1s linear;
}

#menu li li:hover ul {
visibility: visible;
opacity: 1;
}

#menu .fa { margin-right: 5px; }

.logo {
width: 100%;
padding: 21px;
box-sizing: border-box;
}

.sidebar-icon {
position: relative;
44
float: right;
margin-top: 32px;
border: 1px solid #454a54;
text-align: center;
line-height: 1;
font-size: 18px;
padding: 6px 8px;
border-radius: 3px;
color: #888;
background-clip: padding-box;
text-shadow: 4px 4px 6px rgba(0,0,0,0.4);
}

.fa-html5 {
color: #fff;
margin-left: 50px;
}
.page-container {
background:grey;
}
.nav-tabs {
background:black;
}
</style>
45
<script src="../js/jquery-3.2.1.js"></script>
<script src="../bs/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs nav-primary">
<li class="active"><a href="#">Home</a></li>
<li><a href="students.php" target="dash">Students</a></li>
<li><a href="#">info</a></li>
<li><input type="text" class="form-control input-sm pull-right"
style="margin-top:7px;float:right;"></li>
<li><button class="btn btn-default btn-xs" style="margin-top:10px;margin-
left:5px;float:right;float:right;">Search</button></li>
</ul>

<div class="page-container">
<div class="content">
<iframe src="src.php" width="930px" height="620px" frameborder="1"
name="dash"></iframe>
<!--<div class="panel panel-default">
<div class="panel-heading">
<h4 class="text-primary">Students</h4>
</div>
<div class="panel-body">
46
<table class="table">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Level</th>
<th>Status</th>
</thead>
</table>
</div>
</div>-->
</div>
<div class="sidebar-menu">
<header class="logo"> <a href="#" class="sidebar-icon"> <span class="fa fa-
bars"></span> </a> <a href="#"> <span id="logo" class="fa fa-html5 fa-
5x"></span>
<!--<img id="logo" src="" alt="Logo"/>-->
</a> </header>
<div style="border-top:1px solid rgba(69, 74, 84, 0.7)"></div>
<div class="menu">
<ul id="menu" >
<li id="menu-home" ><a href="add.php" target="dash"><i class="fa fa-
user"></i><span>Student</span></a></li>

47
<li id="menu-comunicacao" ><a href="#"><i class="fa fa-
anchor"></i><span>Class</span><span class="fa fa-angle-double-right"
style="float: right"></span></a>
<ul id="menu-comunicacao-sub" >
<li id="menu-mensagens" style="width: 120px" ><a href="addclass.php"
target="dash">Add<i class="fa fa-angle-right" style="float: right; margin-
right: -8px; margin-top: 2px;"></i></a>

</li>
<li id="menu-arquivos" ><a href="class.php" target="dash">View</a></li>
</ul>
</li>
<li id="menu-academico" ><a href="#"><i class="fa fa-
user"></i><span>Payments</span><span class="fa fa-angle-right"
style="float: right"></span></a>
<ul id="menu-academico-sub" >
<li id="menu-academico-avaliacoes" ><a href="pay.php" target="dash">Pay
Student</a></li>
<li id="menu-academico-boletim" ><a href="paid.php" target="dash">Paid
Students</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-share-alt"></i><span>Share</span><span
class="fa fa-angle-right" style="float: right"></span></a>
48
<ul>
<li><a href="#"><i class="fa fa-facebook"></i> <a
href="http://www.jqueryscript.net/tags.php?/Facebook/">Facebook</a></a><
/li>
<li><a href="#"><i class="fa fa-<a
href="http://www.jqueryscript.net/tags.php?/twitter/">twitter</a>"></i>
Twitter</a></li>
<li><a href="#"><i class="fa fa-pinterest"></i> Pinterest</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-gears"></i><span>Settings</span></a></li>
<li><a href="logout.php"><i class="fa fa-
logout"></i><span>Logout</span></a></li>
</ul>
</div>
</div>
</div>

<script type="text/javascript">
var toggle = true;

$(".sidebar-icon").click(function() {
if (toggle){

49
$(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-
collapsed-back");
$("#menu span").css({"position":"absolute"});
}
else {
$(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-
collapsed-back");
setTimeout(function() {
$("#menu span").css({"position":"relative"});
}, 400);
}

toggle = !toggle;

});
</script>
</body>
</html>

50
 Appendix II

User interface

Admin Dashboard

51
52
Student registration form

Add Bursary Category

53
View Bursary Category

Payment of student

54