WEB BASED ATTENDANCE MANAGEMENT SYSTEM

A Thesis
Submitted by
Sahar Hassan
Roll No: 08
In partial fulfillment for the award of the degree
of
BACHELOR OF SCIENCE IN COMPUTER SCIENCE (BSCS)
INSTITUTE OF COMPUTING AND INFORMATION TECHNOLOGY
GOMALUNIVERSITY
DERA ISMAIL KHAN, KHYBER PAKHTUNKHWA, PAKISTAN
DECEMBER, 2015

ii

ABSTRAct

Over the years the manual attendance management has been carried across most of educationa
Attendance Management System is based on web server, which can be implemented on any
computer. In This application, PHP is server side language, MySQL and PHP is used as back-end
design and HTML, CSS and JavaScript are used as front-end tools.
The system communicates with database residing on a remote server. It calculates automatically,
the attendance percentage of students without any manual paper-based work. The system facilitates
the end users with interactive design and automated processing of attendance management.
ACKNOWLEDGEMENTS
In the name of Allah, Most Gracious, Most Merciful
All praises and glory to Almighty Allah who gave me courage and patience to carry out this work.
Firstly, I would like to express my sincere gratitude and unrestrained appreciation to my project
Supervisor, Dr. Zubair Asghar, for his continuous support, patience, motivation and immense
knowledge, and providing me with an excellent atmosphere for doing my project work. I have
learned many things since I become Dr. Zubair’s student. I could not have imagined having a better
advisor and mentor for my project and bachelor study.
I am also grateful to Director of department Dr.Abdur Rasheed for His attention, cooperation and
encouragement.
Special thanks are given to M-Phil seniors, specially Anam Saeed and Fazal ul Rehman, and also
MCS students Anam and Ammara for their helping and guidance which helped me in all the time
of project development.
My sincere thanks also goes to hostel community and specially warden of hostel who provided me
the pleasant environment to do my project work and study.
Once again I am deeply and most respectfully thankful from all of my Pakistani management,
teachers and friends including Director, and Supervisor, who supported and helped me each and
every time, which made it easy and joyful to live and study these four years among them with
full confidence. I can say that you people are very patient.
I am also grateful to my Government which gave me scholarship and opportunity to study in
foreign country , Allah may bless you and it is my wish to return back to my country and service
I would also like to show my gratitude to the class fellow and country fellow for their kind co-
operation and encouragement which help me in completion of my objectives. By your presence
in University I was getting more confidence and we were as a kind and corporative family here,
Best of wishes for all of you in every field of life.
Last but not least, my deepest gratitude goes to my kind family and beloved parents for their
endless love, prayers, encouragement and unconditional support to pursue my interests, even when
the interests went beyond boundaries of language, field and geography.
SAHAR HASSAN

1.
 Table of Contents

Introduction
1.1 Problem and Motivation .................................................................................. ….1
1.2 Related works and background ................................................................... ….1
1.3 Purpose and objectives… ............................................................................. ….2
1.3.1 Purpose ................................................................................................................ 2
1.3.2 Objectives………………………….…………………………..…………… 2
1.4

Materials .............................................................................................................2
1.4.1 Hardware ........................................................................................................ 2
1.4.2 Software .......................................................................................................... 2
1.5 Thesis Breakup .................................................................................................. 3
2.

Tools and Technologies

2.1. Wamp Server ..................................................................................................... 4
2.1.1

Windows Server ............................................................................................... 7

2.1.2

Apache .............................................................................................................. 7
2.1.3

MySQL ............................................................................................................. 8
2.1.4

PHP ................................................................................................................... 8
2.1.5

PhpMyAdmin ................................................................................................... 9
2.2 Sublime Text 3 editor ......................................................................................... 9
2.4 HTML and CSS .................................................................................................. 10
2.5 Frameworks… .................................................................................................... 11
2.5.1 Bootstra… .........................................................................................................11
2.5.2 JavaScript Framework (jQuery)… ............................................................... 11
2.5.3 Semantic UI… ..................................................................................................11
2.6 Web Template .....................................................................................................12
3.

Existing Systems
3.1Attendance Management System ...................................................................... 13
3.2 Student Attendance Management .................................................................... 13
3.3 Administration and Student Affairs System .................................................. 13
3.3.1Graphical Representation of the Project… ............................................................... 14
4.

Proposed System (Front-End Design)

4.1 Introduction ....................................................................................................... 15
4.2 Log in.................................................................................................................. 16
4.3 Log Out………………………………………………………………….… 17
4.4

Students .............................................................................................................. 17
4.4.1 New Registration ............................................................................................ 18
4.4.2 Updation.......................................................................................................... 18
4.5 Teacher ................................................................................................................19
4.5.1 New Registration ............................................................................................ 19
4.5.2 Updation .......................................................................................................... 20
4.6 Subject… ............................................................................................................ 20
4.6.1 Subject Entry… ...............................................................................................21
4.7 Monthly report… .............................................................................................. 21
4.8 Overall report .................................................................................................... 21
4.9 Do Attendance ................................................................................................... 22
5.

Proposed System (Back-End Design)

5.1 Introduction ....................................................................................................... 23
5.2 ER Diagram ....................................................................................................... 25
6.

Results and Reports

6.1 Introduction ...................................................................................................... 26
6.1.1

Monthly Report… .......................................................................................... 26

6.1.2

Overall Report ................................................................................................ 27

7.

Conclusion and Future work

7.1 Conclusion ..........................................................................................................28
7.2 Future work ....................................................................................................... 28

CHAPTER NO.1
INTRODUCTION

1.1

Problem and Motivation

In most educational institutions the attendance is taken manually. It is not only time consuming,
but it is also unsecure and unreliable and it can be lost. Some institutions are using punch card for
attendance while this will be difficult for teachers to keep track of the large number of students
because by using punch card, a student can help the other students or his/her friend to punch their
card even the other student may be absent or come late in class, so it is not reliable.
To overcome these problems I have developed a better system which is Web based; it is fully
responsive where a user can use in mobile, tablets and different computer systems. In this system
records are kept safe and secure and the attendance information of particular or all students of
particular class can be accessed easily and without time consuming, the report is generated
automatically.
1.2

Related works and background

In early years punch card was used for data storage , it is also known as Hollerith cards, through
these cards companies were able to store and access via entering the card into the computer
system [1].
Now a day also it is used as one of the most popular attendance system. Employees are using this
card for in and out, they only need to wave the punch card near a reader then it will ensure the
presence of employee [2].
Many desktop applications for attendance has been developed there are some examples:
1.

Desktop application for attendance developed to take daily attendance of students. Then
information of a particular class is stored by the operators that will be provided by the teacher.
Saurabh Kumar Jain, Uma Joshi, and Bhumpesh Kumar Sharma developed the software.
The technology which they used for their application is Language:-VB.NET and Backend:-MS-
Access [3].
2.

Jainetal has developed a desktop application in which when the lecturer start the application
then all registered lists of students of particular course will be displayed.
for marking their presence a register button is clicked [4].
3.

Desktop application developed by Muhammad, Ahmad Shakur Idris, Abu-Bakr Sadiq alhassah,
Muhammad Ibrahim Hakimi and Muhammad Zakaria Abatch the language which is used is
Visual Basic.Net [5].
There are many studies [6, 7, 8, 9, 10, 11, 12] in the subject of opinion mining and sentiment
analysis related to the attendance system.
1.3

Purpose and objectives

1.3.1

Purpose
The main characteristics of my developed system is that it is web based , fully responsive and
flexible .It can be accessed from any computer no matter where you are .
Its purpose is to make a web based attendance software for ICIT department to register the student
details; their subjects, teachers, and related field. The daily attendance of students are taken
automatically by selecting student name and program, If the student was present then the present
check box is clicked similarly if the student was absent then the absent check Box is clicked instead of the
present check box, and by clicking the save button information will be stored in database. The attendance
report will be generated automatically without time consuming which is reliable and there will be
not any mistakes.
1.3.2

Objectives

Eliminate duplicate data entry and errors in time and attendance entries.

Eliminate paperwork and save time.

Automatic calculation of attendance

To Increase security.

1.4

Materials
1.4.1

Hardware

A dell laptop
1.4.2

Software

WAMPSERVER

Windows 8.1
32 bit operating system

1.5 Thesis Breakup

The remaining chapters of the thesis are organized as follows:
Chapter Two (4, 12) Tools and Technologies, it provides information about the tools and
technologies which have been used in this project work.
Chapter Three (13, 14) Existing system, give a brief description about some related works.
Chapter Four (15, 22) Proposed system (Front- End), which I have developed.
Chapter Five (23, 25) Proposed system (Back- End), database and tables are created and data is
stored.
Chapter Six (26, 27) Result and Reports, the outputs produced by the proposed system.

Chapter Seven (28, 29) Conclusion and future work, here is a brief description of project work
and also mentioning the future goal.

CHAPTER NO.2
TOOLS& TECHNOLOGIES
2.1

WAMP Server
serving live websites [13].
Wamp Server is available freely in two versions that is 32 and 64 bits. Keep in mind that Wamp
server 2.5 is not compatible with Windows XP, SP3, and Windows Server 2003. Its older versions
are available on Source Forge.
Now, visually, a brief description of downloading and installation of WAMP server, from sources
where I have used is shown below step by step.
i.

Go to http://www.wampserver.com/, website

ii.

Click the download label

iii.
Select WAMP SERVER (32 BITS & PHP 5.5) 2.5 OR WAMP SERVER (64
BITS & PHP 5.5) 2.5 according to requirement

In my case WAMP SERVER (32 BITS & PHP 5.5) 2.5

iv.

Installation of Visual Studio 2012 VC 11 is compulsory here

For this purpose go to http://www.microsoft.com

Or simply click on http://www.microsoft.com/enus/download/details.aspx, it is also

shown in figure.

v.

Click on Download Button for downloading of Visual Studio 2012 VC 11

7

2.1.1 Windows Server

It is a brand name for a group of server operating systems which is released by Microsoft.
The first Windows server edition to be released with that brand was Windows Server 2003.
However, the first server edition of Windows was Windows NT 3.1 advanced server that followed
by three Servers (Windows NT 3.5 Server, Windows NT 4.0 Server, and Windows 2000 Server);
the latter was the first server edition to feature many things like Active Directory, DNS Server,
DHCP Server, Group Policy, and many other popular features used today. Written in C, C++ and
assembly [14].
2.1.2
software that in 2009 it became the first web server software to serve more than 100 million
websites. The Apache development began in early 1995 and originally based on the NCSA
HTTPd server. Apache is developed and maintained by an open community of developers under
the patronage of the Apache Software Foundation. Mostly used on a Unix-like system, the
software is also available for a vast variety of operating systems, including Microsoft Windows,
Open VMS, eComStation, NetWare and TPF.

Apache is open source software, as on November 2015, it was estimated to serve 50% of all active
websites and 37% of the top servers across all domains. The released version of Apache is shown
below [15].

2.1.3 MySQL
SQL stands for Structured Query Language. MySQL is an open source Relational Database
Management System (RDBMS); it is a popular database for use in web applications, and is a
central part of the greatly used LAMP (Linux, Apache, MySQL, Perl/PHP/Python) open-source
web application software stack.
MySQL is used by many applications like, WordPress, Joomla, TYPO3, Drupal, MyBB, phpBB,
MODX and other software. Numerous large scale websites including Google, YouTube,
Facebook, Twitter, and Flickr are also using MySQL.
On all platforms excluding Windows, MySQL sends with no GUI (Graphical User Interface) to
administer MySQL databases or managing the data held within the databases. Users may install
MySQL Workbench by downloading separately or simply may use the command line tools.
Numbers of third party GUI tools are also available.
Swedish company has created MySQL which is written in C and C++. The first version of
MySQL revealed on 23 may 1995. It has various versions. The general accessibility of MySQL
5.7 was broadcast in Oct 2015, and the version which is used in my project is 5.6.17 [16].

2.1.4 PHP
It stands for PHP: Hypertext Preprocessor but, originally stood for Personal Home Page. Is a
server side scripting language that designed for web development, as well as used for general
purpose language. It was created in 1994 by Rasmus Lerdorf, in the present time the reference
execution of PHP is produced by the PHP group.
In January 2013, PHP was installed on more than 240 million websites, and 2.1 million web
servers. The PHP code can be combined with several web frameworks and templating engines or
simply it can be mixed with HTML code.
The PHP code is generally processed by a PHP interpreter, which is commonly executed as native
module of web server or a Common Gateway Interface (CGI) executable. After interpretation
and execution of the PHP code, the results will be sent by web server to its client.
Zend Engine has powered the standard PHP interpreter, which is free software liberated under the
PHP license.
There are many versions of the PHP, and the version, I have used for my application is the PHP
version 5.5 [17].
Currently supported versions of the PHP are following,

5.5
2 years, 4
months ago
4 months
ago
in 7 months
5.6
1 year, 2
months ago
in 9
months
in 1 year, 9
months

It is an open source tool and also, it is free written in PHP, XHTML, CSS, and JavaScript planned
to manage the administration of MySQL by using of a web. It is able to perform various missions
like creating, modifying databases, tables, fields, executing SQL statements or managing and
2.1.5 PhpMyAdmin
supervise users.
PhpMyAdmin is being translated into 72 languages in order to make the usage easy to a wide
domain of people and it supports both LTR and RTL languages.
Following is some features of the phpMyAdmin,

It is web interface

It administrates multiple severs

It is able to create PDF graphics of the database layout

Importing data from SQL and CSV

Export data to different formats such as SQL, PDF, CSV, XML and others

It works with various Operating Systems

And others [19].

2.2
The Sublime Text 3 editor
Sublime Text is a cross platform source code editor written in C++ and python. It originally
supports plenty of programming and markup languages, and its functionality can be increased
via users with plugins.
Sublim Text 3 has two main features that are symbol pane management and symbole indexing.
Through pane management users are to move between panes by hotkeys and symbole indexing

enable SublimText to scan files and build an index to make easy the features Goto Symbole and
Goto Definition in project.
It is downloaded from www.sublimetext.com/3, site.
A list of some features of Sublime Text is as following,

It is python based plug-in API

It is cross platform (Linux, Linux, OS X)

Compatible with numerous language framers form Text Mate

Project specific preferences

And others [20].

2.4

HTML AND CSS

HTML stands for Hypertext Markup Language and CSS stands for Cascading Style Sheets are
the crucial technologies for creating web pages. HTML supplies the structure of the page, and
CSS the layout, for diversity of devices. Together with scripting and graphics, HTML and CSS
are the fundamental of building Web Applications and Web pages.
HTML provides designers and developers the following facilities,

To design forms for directing transactions with remote services, for use in
making
reservation, searching for information, ordering products, and others

Retrieving online information through hypertext links.

To include video and sound clips, spread sheets, and other applications straight in their
documents

Designer can publish online documents with text, headings, tables, photos and others.
 CSS describes the Web pages presentation, involving layout, colors, and fonts. It enables the
designer to adjust the presentation to various types of devices, like a small screens, large
screens, or printers.
CSS is separate from HTML, and their separation makes it easy to preserve and maintain sites,
share style sheets across pages, and accommodate pages to various environments [21].

2.5

Frameworks
2.5.1

Bootstrap
Bootstrap is front-end framework and collection of tools and mechanisms for building web
applications. It consists of HTML and CSS based design templates for navigations, forms,
buttons, typography, and other interface elements, and also JavaScript extensions.
Bootstrap is free and open source, and its purpose is to make easy the development of dynamic
websites and web applications. It is the most starred project on GitHub, with more than 85,000
stars and 34,000 forks.
Bootstrap was developed by Mark Otto and Jacob Thomton and named Twitter Bluprint. Before
Bootstrap framework, designers were using different libraries for interface development, which
had many inconsistencies and their maintenance were difficult.
On 31 Jan, 2012, Bootstrap 2 was released. This framework has brought many changes to the
existing components and, also, added 12 column grid layout and responsive design constituents.
On August, 19, 2013, Bootstrap 3 was announced, which moved to first approach of mobile and
using a flat design. The first alpha version of Bootstrap was spread out on 19, Aug, 2015 [22].

2.5.2

JavaScript Framework(jQuery)
JQuery is JavaScript library intended to make simple the client-side scripting of HTML. It is the
most popular JavaScript framework, which is free and open-source software licensed under the
MIT License [23].
Several of the largest companies, including,

Google

IBM

Microsoft and

Netflix are using the jQuery [24].

2.5.3
Semantic UI
It is a development framework which is very helpful in building responsive and beautiful
layouts utilizing human friendly HTML. In this framework the words and classes are treated as
interchangeable concepts.

In Semantic UI framework, the Classes use syntax from natural language like plurality, the word
order, and noun or modifier relationships to connect and join concepts naturally and instinctively
[25].

2.6 Web Template

A website template (web template) is a pre designed webpage which any developer can use to
plug-in their own text and text and script component and images into that to create a website.
Website Templates are generally built with HTML and CSS code. By using web templates
everyone is allowed to setup a website without hiring a professional web designer or developer.
This brings the facility for anyone to create a logically priced business or a personal web that may
be listed in search engines thus users can seek for your particular service [26].

CHAPTER NO.3
EXISTINGSYSTEMS

3.1

Attendance Management System

This software has developed for daily attendance of students. It made easy to access the
attendance information of a particular student. The information is stored through operators, and
provided by teacher for related class. This software is helpful in evaluating the attendance
eligibility of a student.
Its purpose was to computerize the tradition way of taking attendance and generating of report
automatically at the end or between of the session. This project has developed as a desktop
application for a specific institute. The technologies which have been used are, VB.NET language
and for backend MS-Access [27].
The other existing systems are,
3.2

Student attendance Management

This system has same task and quality as upper software but here technology that used is,
Language: ASP.NET
Backend: SQL [28].
3.3

Administration and Student Affairs System

It is a two-tier system which consists of a dedicated database, and a specially constructed Java
Client Application. The upside of this solution is that the processing is no more centralized. On
the contrary, the client application consumes the resources of the user running it locally. The only
thing that is centralized is the database.
Manipulate the database through Java Client Application by using JDBC API offered by the
Oracle for connecting and retrieving data from data sources.
The resource consumption was minimized by utilizing parallel processing through the Threading
API of the Java platform, also, the event driven nature of the desktop application made
minimizing the resource consumption easier, since only the process that the user initiates will be
using the resources [29].
 3.3.1Graphical Representation of Project

CHAPTER NO.4
PROPOSED SYSTEM (FRONT- END DESIGN)

4.1 Introduction

This is the Home screen of the proposed system which consists of seven buttons. In order to go
to the desired screen; the users just have to click the related button.
By clicking the Home, Students, Teachers, Subjects, Monthly Report, Overall Report, Do
Attendance, and the Log Out buttons, their respective screens will appear.
In home screen there is also a sidebar where users may do new entries or take attendance by
clicking the Do Attendance button. The sidebar is shown below,

4.2 Log in
Before entering into the system (home page), the user must login, for this purpose the log in page is
created.
This log in form is made for security purpose i.e. only authenticated users have access into the system,
i.e. either administrator or the user.

Followings are the description of respective screen of each button,

4.3 Log out

By clicking the Log Out button the user is redirected into the Login page, which has described.
 4.4 Students
This is the student screen which provides information about student’s data such as Student Name,
DOB, Gender, Email, Phone, Address, Session, Program, and Semester in the form of rows and
columns.
The Insert button enables the user to enter new entries similarly Update button enables the user
to edit / modify, whereas, Delete button is used for deleting the record.

4.4.1

New Registration
New registration can be done through filling the following form.

4.4.2

Updation
Student data is updated from the form shown below.

4.5

Teacher
This is the screen which provides records of teachers, such as first name, last name, DOB, Gender,
email, Phone, Degree, Salary, and Address. There is also an insert button through which we can
insert new entries for teachers.

4.5.1

New Registration
New registration of the teacher can be done through filling the following form.
4.5.2

Updation
Data is updated from the form shown below.

4.6 Subject
This screen provides information related to subjects such as subject no, subject name, teacher
name, program and the semester. By clicking the insert button we can easily insert a new entry of
the subject.

4.6.1 Subject entry

This form is used for entering the information related to particular subject.

4.7

Monthly report
From this screen we can search the individual report of a student first by inserting the desire date
into the text box and then by just clicking the search button we get the monthly report.

4.8

Overall report
From this screen we can get the report of all students by just clicking the overall button.

4.9

Do Attendance

This is the screen for Attendance purpose, the name and the program is automatically retrieved
from the database. If the student was present then the present check box is clicked similarly if
the student was absent then the absent check box is clicked instead of present check box, by
clicking the save button information will be stored.
CHAPTERNO.5
PROPOSED SYSTEM (BACK- END DESIGN)

5.1

Introduction
To achieve the flow of data and data processing task, I have created a database named
Attendance_db and inside this database five entities have been created, mentioned below,
Attendance Database is:
Attendance Database

1.

Student Entity

2.

Subject entity

3.

Teacher entity

4.

Attendance entity

5.

Users entity

5.2

ER DIAGRAM
CHAPTERNO.6
RESULTS AND REPORTS

6.1

Introduction
In this chapter, I have presented the results or reports that the system is generating. There are two
reports, one is the monthly report of the selected student and the other one is the overall report
that provides the attendance information of all students.
6.1.1

Monthly Report
It generates the monthly attendance percentage of selected student.

6.1.2

Overall Report
It generates the attendance percentage and status of all of students i.e either the student is
Promoted or dropped.

CHAPTERNO.7
CONCLUSION AND FUTUER WORK

7.1

Conclusion

In this work , the web based attendance management system is developed using PHP server-side
scripting language and CSS,HTML ,JavaScript for designing which is fully meet the system’s
goals.
This system overcome many limitations incorporated in attendance, this system saves a great
amount of time and reduces errors which may occur during attendance calculation.
The system I have developed is fully responsive which can be used in mobile, tablets and different
operating systems. Some other benefits are,

Automated and web-based for easy accessibility

It is a dynamic and flexible system

It excludes paperwork and the possibility of making mistakes while using paper for
taking attendance
It is very user friendly and handy

The records of current and previous can be available in prompt and an immediate.

7.2

Future work
I will make some future improvement in my project by making this Biometric Attendance System
in order to make more advanced and increase its reliability and effectiveness.
Biometrics is automated technique of identifying a person behavioral or physiological
characteristic.
A fingerprint scanner has two basic tasks which are,
i.It requires to get an image of a person finger.
ii.It requires identifying and diagnosing that whether the pattern of ridges and valleys in current image
matches the pattern of ridges and valleys of previous scanned
images.