A Project Report

On
“ATTENDANCE MANAGEMENT SYSTEM”

Submitted in partial fulfilment the requirement of

University Name

For the Degree of

Bachelor of Computer Science

Submitted By
Your name

Under the Guidance of

Teacher’s name

Final Year Computer Science

College
Logo

College Full Name

City

(2020-2021)

1
 INDEX

Sr.no Contents Page.no

1 INTRODUCTION 3
Existing attendance system 3
Proposed system 4
2 SYSTEM DESIGN 5
System Design 5
Flow Chart 8
Data Flow Diagram 9
ER Diagram 10
Database design 11
Database structure 13
3 APPLICATIONS 15
4 FUTURE ENHACEMENTS 16
5 TECHNOLOGY DETAILS 17
HTML 17
CSS 18
JavaScript 19
Bootstrap 20
jQuery 22
Ajax 24
PHP 26
MySQL 31
XAMPP 31
6 HARDWARE & SOFTWARE 36
SPECIFICATIONS
Software requirements 36
Hardware requirements 36
7 PROJECT SNAP SHOTS 37
Project snap shots 37
8 SOURCE-CODE 41
Project source code 41

2
 INTRODUCTION

Existing Attendance System:

 Existing attendance management system is manual, in

which everything has to be maintained with the manual
process.
 Attendance records are maintained in register, book, files,
etc.
 These records have to be kept safe and secure without
being lost or damaged.
 So, a secure and safe place is required to keep these
records, so that no any liquid substance or any animal like
mouse, etc. could harm these data. Generally, they are
stored in cup boards.
 For example, if someone has marked attendance on
register, and unfortunately a register has come in contact
with water or any liquid substance or any animal like
mouse, it will lose the data which is stored in register.
 And if anyone has to check attendance record, then he or
she has to find the register first, then he or she can access it.

3
Proposed System

 Now as we all know, almost everything can be done online.

 Like Money transfer, Shopping, Booking, Teaching, Data
sharing, Admissions, Job search, etc. And so many other
activities are done with the help of internet.
 So with the easy access and use of internet, we are going to
take this existing attendance system on advance level.
 We are going to develop an online platform with high
security so that the same process could be done easily
without the waste of time, afford, and energy.
 So firstly, teachers/faculties are required to register on
attendance management system.
 Once registration is done, faculty can easily add/remove
students and marks attendance by just signing in to the
application.
 And the records are maintained in a table format according
to date, so that faculty can easily see it.
 So this system will save a lot of time, energy, and afford for
teachers as well as institution.

4
 SYSTEM DESIGN

Faculty System Students

1. Faculty
Faculties or teachers are the people who will first sign up on
online attendance management system as faculty. And then after
successful registration, they can login and add students and can
mark attendance on daily basis.

Following data from faculty side will be provided to the system

at the time of registration:
 Name
 Mobile
 Date of Birth
 Qualification
 Username
 User ID
 Password

5
Faculty responsibilities:
 Registration on system
 Login to system
 Add students
 Mark attendance

2. System
System is an online platform where attendance is maintained in
a secured way. The faculties are registered here, and with the
help of system, they can add/remove students, can marks
attendance and maintain attendance records.

System responsibilities:
 Registration of faculties and admission of students
 Adding or removing students by faculties
 Display of registered student in faculty dashboard
 Display of current attendance status in faculty dashboard
 Display of attendance records in record tab of faculty
dashboard according to date in a table format
 Maintaining record for each candidate and voter without
making any duplicate record.
 Forget password facility for faculties

6
3. Students
Students are those who will be added by faculties into the
system.
Following data from group/party side will be provided to the
system at the time of registration:
 Name
 Roll no
 Course
 Semester
 Branch

7
Flow Chart

Faculty – Sign up
up

System

Faculty Login

Add student

Mark attendance

Results
8
Data Flow Diagram

Teacher

Registration Login

Attendance
Management
System

Attendance Attendance
record display Add students marking

9
 ER Diagram

Entity Attribute Relationship

Name
Name Mobile
Roll no
ID
ID
D.O.B
Course

Student Added Faculty Qualificati

on

Semester
Username
Password User ID
Branch User ID

10
Database design
 MySQL is a technology which is used to maintain overall
data of faculty, attendance record and students in this
system.
 We created a database with name “student-attendance” in
MySQL.
 Then we created below tables inside database
Faculty
Student
Record

Following fields are created in Faculty table:

 ID
 Name
 Mobile
 Date of Birth
 Qualification
 Username
 User ID
 Password
 Created_at
 Modified _at

11
Following fields are created in Student table:
 ID
 Name
 Roll no
 Course
 Semester
 Branch
 User ID
 Created_at
 Modified _at

Following fields are created in Record table:

 ID
 SID
 Status
 Date
 Day
 Month
 Year
 Modified _at

12
Database Structure

student-attendance

faculty

Database name
record id

name
student
Tables mobile

dob

qualification

username

Fields uid

password

created_at

modified_at

13
How to create database, table, and fields
 Open XAMPP application.
 Click on Start button right next to MySQL module.
 Click on Admin button next to Start button on MySQL
module.
 You’ll see phpmyadmin panel opened browser. There is a
list of default databases on left hand side. So click on New,
give the name XYZ, and click on Create.
 New database in created with the name of XYZ. Now
inside XYZ database, there is an option New to create
tables.
 Click on New and you’ll see option to add table name on
top and below it the names of fields.
 Now add fields inside table like name, email, mobile, etc.
 Once all this done, you have finished the process of
creating database, tables, and fields.

How to run project

 Suppose project name is XYZ. So place the XYZ project
folder in ―xampp/htdocs/” location in your respective drive.
 Open XAMPP Control Panel and Start Apache and
MySQL.
 Open browser and type ―localhost/XYZ‖.

14
  You will see the output in browser.

APPLICATIONS

This system is applicable in below fields for attendance purpose:

 School
 College
 University
 Corporate
 Government
 Hospital
 Food and Restaurant
 Sports
 Entertainment
 Production
 Investment
 News and Media
 Technology

15
 FUTURE ENHANCEMENTS

ADMIN MODULE
 Admin functionality would be used to control overall
attendance management system. Admin means main
authority who owns college, school or university.
 Admin could add courses and their subjects
 Admin could see all attendance records and admin could
see data of all registered teachers and students.

STUDENT MODULE
 Student can sign up on system.
 By logging in, student can track his or her attendance record

TEACHER MODULE
 Teacher can sign up on system.
 By logging in, teacher can mark attendance of the students
who belongs to his or her subject, and can also monitor
records.

16
 TECHNOLOGY DETAILS

HTML
 HTML (HyperText Markup Language) is the most basic
building block of the Web. It defines the meaning and
structure of web content. Other technologies besides HTML
are generally used to describe a web page's
appearance/presentation (CSS) or functionality/behavior
(JavaScript).
 "Hypertext" refers to links that connect web pages to one
another, either within a single website or between websites.
Links are a fundamental aspect of the Web. By uploading
content to the Internet and linking it to pages created by
other people, you become an active participant in the World
Wide Web.

 HTML uses "markup" to annotate text, images, and other

content for display in a Web browser. HTML markup
includes special "elements" such
as <head>, <title>, <body>, <header>, <footer>, <article>,
<section>, <p>, <div>, <span>, <img>, <aside>, <audio>,
<canvas>, <datalist>, <details>, <embed>, <nav>, <output>
, <progress>, <video>, <ul>, <ol>, <li> and many others.

17
  An HTML element is set off from other text in a document
by "tags", which consist of the element name surrounded by
"<" and ">". The name of an element inside a tag is case
insensitive. That is, it can be written in uppercase,
lowercase, or a mixture. For example, the <title> tag can be
written as <Title>, <TITLE>, or in any other way.

CSS

 Cascading Style Sheets (CSS) is a style sheet

language used for describing the presentation of a
document written in a markup language such
as HTML.[1] CSS is a cornerstone technology of the World
Wide Web, alongside HTML and JavaScript.[2]
 CSS is designed to enable the separation of presentation
and content, including layout, colors, and fonts.[3] This
separation can improve content accessibility, provide more
flexibility and control in the specification of presentation
characteristics, enable multiple web pages to share
formatting by specifying the relevant CSS in a separate .css
file which reduces complexity and repetition in the
structural content as well as enabling the .css file to
be cached to improve the page load speed between the
pages that share the file and its formatting.
 Separation of formatting and content also makes it feasible
to present the same markup page in different styles for
different rendering methods, such as on-screen, in print, by

18
 voice (via speech-based browser or screen reader), and
on Braille-based tactile devices. CSS also has rules for
alternate formatting if the content is accessed on a mobile
device.[4]
 The name cascading comes from the specified priority
scheme to determine which style rule applies if more than
one rule matches a particular element. This cascading
priority scheme is predictable.
 The CSS specifications are maintained by the World Wide
Web Consortium (W3C). Internet media type (MIME
type) text/css is registered for use with CSS by RFC
2318 (March 1998). The W3C operates a free CSS
validation service for CSS documents.[5]
 In addition to HTML, other markup languages support the
use of CSS including XHTML, plain XML, SVG,
and XUL.

JavaScript

 JavaScript (/ˈdʒɑːvəˌskrɪpt/),[6] often abbreviated as JS, is

a programming language that conforms to
the ECMAScript specification.[7] JavaScript is high-level,
often just-in-time compiled, and multi-paradigm. It
has curly-bracket syntax, dynamic typing, prototype-
based object-orientation, and first-class functions.
 Alongside HTML and CSS, JavaScript is one of the core
technologies of the World Wide Web.[8] JavaScript enables
interactive web pages and is an essential part of web
applications. The vast majority of websites use it for client-

19
 side page behavior,[9] and all major web browsers have a
dedicated JavaScript engine to execute it.
 As a multi-paradigm language, JavaScript supports event-
driven, functional, and imperative programming styles. It
has application programming interfaces (APIs) for working
with text, dates, regular expressions, standard data
structures, and the Document Object Model (DOM).
However, the language itself does not include
any input/output (I/O), such as networking, storage,
or graphics facilities, as the host environment (usually a
web browser) provides those APIs.
 JavaScript engines were originally used only in web
browsers, but they are now embedded in some servers,
usually via Node.js. They are also embedded in a variety of
applications created with frameworks such
as Electron and Cordova.
 Although there are similarities between JavaScript
and Java, including language name, syntax, and
respective standard libraries, the two languages are distinct
and differ greatly in design.

Boostrap

 Bootstrap is a free and open-source CSS

framework directed at responsive, mobile-first front-end
web development. It contains CSS- and
(optionally) JavaScript-based design templates
for typography, forms, buttons, navigation, and other
interface components.

20
 Bootstrap is a web framework that focuses on simplifying
the development of informative web pages (as opposed
to web apps). The primary purpose of adding it to a web
project is to apply Bootstrap's choices of color, size, font
and layout to that project. As such, the primary factor is
whether the developers in charge find those choices to their
liking. Once added to a project, Bootstrap provides basic
style definitions for all HTML elements. The result is a
uniform appearance for prose, tables and form elements
across web browsers. In addition, developers can take
advantage of CSS classes defined in Bootstrap to further
customize the appearance of their contents. For example,
Bootstrap has provisioned for light- and dark-colored
tables, page headings, more prominent pull quotes, and text
with a highlight.
 Bootstrap also comes with several JavaScript components
in the form of jQuery plugins. They provide additional user
interface elements such as dialog boxes, tooltips, and
carousels. Each Bootstrap component consists of an HTML
structure, CSS declarations, and in some cases
accompanying JavaScript code. They also extend the
functionality of some existing interface elements, including
for example an auto-complete function for input fields.

 Example of a webpage using Bootstrap framework

rendered in Firefox
 The most prominent components of Bootstrap are its layout
components, as they affect an entire web page. The basic

21
 layout component is called "Container", as every other
element in the page is placed in it. Developers can choose
between a fixed-width container and a fluid-width
container. While the latter always fills the width of the web
page, the former uses one of the four predefined fixed
widths, depending on the size of the screen showing the
page:
 Smaller than 576 pixels
 576–768 pixels
 768–992 pixels
 992–1200 pixels
 Larger than 1200 pixels
 Once a container is in place, other Bootstrap layout
components implement a CSS Flexbox layout through
defining rows and columns.
 A precompiled version of Bootstrap is available in the form
of one CSS file and three JavaScript files that can be
readily added to any project. The raw form of Bootstrap,
however, enables developers to implement further
customization and size optimizations. This raw form is
modular, meaning that the developer can remove unneeded
components, apply a theme and modify the
uncompiled Sass files.

jQuery

22
 jQuery is a JavaScript library designed to
simplify HTML DOM tree traversal and manipulation, as
well as event handling, CSS animation, and Ajax.[3] It
is free, open-source software using the permissive MIT
License.[4] As of May 2019, jQuery is used by 73% of the
10 million most popular websites.[5] Web analysis indicates
that it is the most widely deployed JavaScript library by a
large margin, having at least 3 to 4 times more usage than
any other JavaScript library.[5][6]
 jQuery's syntax is designed to make it easier to navigate a
document, select DOM elements, create animations,
handle events, and develop Ajax applications. jQuery also
provides capabilities for developers to create plug-ins on
top of the JavaScript library. This enables developers to
create abstractions for low-level interaction and animation,
advanced effects and high-level, themeable widgets. The
modular approach to the jQuery library allows the creation
of powerful dynamic web pages and Web applications.
 The set of jQuery core features—DOM element selections,
traversal and manipulation—enabled by its selector
engine (named "Sizzle" from v1.3), created a new
"programming style", fusing algorithms and DOM data
structures. This style influenced the architecture of
other JavaScript frameworks like YUI v3 and Dojo, later
stimulating the creation of the standard Selectors
API.[7] Later, this style has been enhanced with a deeper
algorithm-data fusion in an heir of jQuery,
the D3.js framework.
 Microsoft and Nokia bundle jQuery on their
platforms.[8] Microsoft includes it with Visual Studio[9] for

23
 use within Microsoft's ASP.NET AJAX and ASP.NET
MVC frameworks while Nokia has integrated it into the
Web Run-Time widget development platform.

Ajax

 Ajax (also AJAX /ˈeɪdʒæks/; short for

"Asynchronous JavaScript and XML")[1][2] is a set of web
development techniques using many web technologies on
the client side to create asynchronous web applications.
With Ajax, web applications can send and retrieve data
from a server asynchronously (in the background) without
interfering with the display and behaviour of the existing
page. By decoupling the data interchange layer from the
presentation layer, Ajax allows web pages and, by
extension, web applications, to change content dynamically
without the need to reload the entire page.[3] In practice,
modern implementations commonly utilize JSON instead
of XML.
 Ajax is not a single technology, but rather a group of
technologies. HTML and CSS can be used in combination
to mark up and style information. The webpage can then be
modified by JavaScript to dynamically display—and allow
the user to interact with—the new information. The built-
in XMLHttpRequest object, or since 2017 the new "fetch()"
function within JavaScript, is commonly used to execute
Ajax on webpages, allowing websites to load content onto
the screen without refreshing the page. Ajax is not a new

24
 technology, or different language, just existing technologies
used in new ways.

 The term Ajax has come to represent a broad group of Web

technologies that can be used to implement a Web
application that communicates with a server in the
background, without interfering with the current state of the
page. In the article that coined the term Ajax,[1][3] Jesse
James Garrett explained that the following technologies are
incorporated:
 HTML (or XHTML) and CSS for presentation
 The Document Object Model (DOM) for dynamic display
of and interaction with data
 JSON or XML for the interchange of data, and XSLT for
XML manipulation
 The XMLHttpRequest object for asynchronous
communication
 JavaScript to bring these technologies together
 Since then, however, there have been a number of
developments in the technologies used in an Ajax
application, and in the definition of the term Ajax itself.
XML is no longer required for data interchange and,
therefore, XSLT is no longer required for the manipulation
of data. JavaScript Object Notation (JSON) is often used as
an alternative format for data interchange,[14] although other
formats such as preformatted HTML or plain text can also
be used.[15] A variety of popular JavaScript libraries,
including JQuery, include abstractions to assist in executing
Ajax requests.

25
PHP
 Hypertext Preprocessor is a server side scripting language
designed for web development and also used as a general
purpose programming language. It was originally created
by Rasmus Lerdorf in 1994. The php reference is now
produced by the php group. Php originally stood for
personal home page. But now it stands for recursive
initialism php hypertext preprocessor.
 Php code may be embedded into html code. It can be used
in combination with various web template systems, web
content management systems, and web frameworks. Php
code is usually processed by a php interpreter implemented
as a module in the web server or as a common gateway
interface executable. The web server combines the results
of interpreted and executed php code, which may be any
type of data, including images, with the generated web
page. Php code may also be executed with a command line
interface and can be used to implement standalone
graphical applications.

26
 The standard php interpreter, powered by the Zend engine,
is free software released under the php license. Php has
been widely ported and can be deployed on most web
servers on almost every operating system and platform, free
of charge.
 The php language evolved without a written formal
specification or standard until 2014, with the original
implementation acting as the de facto standard which other
implementations aimed to follow. Since 2014 work has
gone on to create a formal php specification
What is a PHP File?

 PHP files can contain text, HTML, CSS, JavaScript, and

PHP code
 PHP code are executed on the server, and the result is
returned to the browser as plain HTML
 PHP files have extension ".php"
What Can PHP Do?
 PHP can generate dynamic page content
 PHP can create, open, read, write, delete, and close files on
the server
 PHP can collect form data
 PHP can send and receive cookies
 PHP can add, delete, modify data in your database
 PHP can be used to control user-access
 PHP can encrypt data

27
With PHP you are not limited to output HTML. You can output
images, PDF files, and even flash movies. You can also output
any text, such as XHTML and XML.

Why PHP?

 PHP runs on various platforms (Windows, Linux, UNIX,

Mac OS X, etc.)
 PHP is compatible with almost all servers used today
(Apache, IIS, etc.)
 PHP supports a wide range of databases
 PHP is free. Download it from the official PHP
resource: www.php.net
 PHP is easy to learn and runs efficiently on the server side

PHP is an amazing and popular language!

It is powerful enough to be at the core of the biggest blogging
system on the web (WordPress)!
It is deep enough to run the largest social network (Facebook)!
It is also easy enough to be a beginner's first server side
language!

Advantages of PHP:
The reason behind the popularity of PHP is its several
advantages. PHP is most suited for the purpose of web
development. The advantages of PHP are discussed briefly
below:

28
1. Cross Platform.
 All the PHP based applications can run on various types of
platforms. PHP is supported by majority of Operating
Systems, some of which includes Solaris, UNIX, Windows
and Linux. The mentioned platforms can be used to write
codes in PHP and also view web pages or run the PHP
based applications.
 PHP easily interfaces with MySQL and Apache both. An
effortless integration of PHP can be done with various
other technologies like Java and there is no requirement of
re-development. Therefore, saving both time and money,
giving it an important advantage.

2. Easy database connection.

 A programming language like PHP is widely used on the
internet and needs to connect to the database very often.
Therefore, having a feature that could help PHP to connect
to database easily is mandatory. Several websites such as
the ecommerce websites require good database
management system.
 PHP has a built-in module that helps it in connecting with
database easily. Therefore, PHP has a great demand in the
field of web development where a data driven website
needs to be developed. PHP significantly reduces the
time needed in developing the web application that needs
an efficient database management system.

3. Easy to use.
 PHP is widely used because it is easy to use. In contrast
with other programming languages that are complex, PHP
is simple, fluent, clean and organized; hence it is a boon for

29
 the new users. PHP has a well-organized syntax which is
logical at the same time.
 PHP does not require any intensive studying or manual
to use it. Command functions of PHP are easily understood
as the user can easily figure out from the name of the
commands itself what it does. A person who is new to PHP
can still code because the syntax is somewhat similar to C.
 A person who is new to PHP can still code because the
syntax is somewhat similar to C. Hence, if a person who
knows C can easily code in PHP. Hence, it is easier to
create and optimize the application using PHP.

4. Speed
 Speed is the primary need of web development. There are
people who face the challenge of slow internet connection
and slow data speed. Furthermore, a fast loading website is
always preferred by people across the globe.When
compared to other programming languages, PHP is found
to be the fastest programming language.
 In normal circumstances, it takes a lot of time to connect to
the database, when you attempt to fetch certain data from
the database. It takes a lot of time in connecting to the
database, then executing the statement and finally getting
the data. PHP performs these set of tasks faster than other
scripting languages. PHP is faster in both connecting to the
database and in using other important applications.
 The high speed of PHP gives it an advantage over other
scripting languages and gives it an application in important
administrations such as the server administration and mail
functionalities.

30
 5. Open source.
 One of the important advantages of PHP is that it is Open
Source. Therefore, PHP is readily available and is entirely
free. In contrast to other scripting languages used for web
development which requires the user to pay for the support
files, PHP is open to everyone, anytime and anywhere.
 A beginner in PHP need not worry about the support as
PHP is maintained and developed by a large group of PHP
developers which helps in creating support community of
PHP that helps people in PHP implementation and
manipulation.

MYSQL
MYSQL is an open source software. It is actually a relational
database management system(RDBMS). This SQL stands for
Structured Query Language.It is the most popular and best
RDBMS used for developing a variety of web-based software
applications. With the help of MYSQL, it is possible to organize
the information, manage, retrieve and update the data whenever
you wish to do.
XAMPP
XAMPP is an open source free software developed by Apache
friends. XAMPP software package contains Apache
distributions for Apache server, MariaDB, PHP, and Perl. And it
is basically a local host or a local server. This local server works
on your own desktop or laptop computer. You can just install
this software on your laptop or desktop and test the clients or
your website before uploading it to the remote web server or

31
computer. This XAMPP server software gives you suitable
environment for testing MYSQL, PHP, Apache and Perl projects
on the local computer.
The full form of XAMPP is X stands for Cross-platform, (A)
Apache server, (M) MariaDB, (P) PHP and (P)Perl. The Cross-
platform usually means that it can run on any computer with any
operating system.
Next MariaDB is the most famous database server and it is
developed by MYSQL team. PHP usually provides a space for
web development. PHP is a server-side scripting language. And
the last Perl is a programming language and is used to develop a
web application.
What are the Main Tools of XAMPP and its definition?
XAMPP contains tools such as Apache, MYSQL, PHP, and
Perl. We will see these tools.

Apache
Apache server is an open source free software which is initially
developed by a group of software developers and now it is
maintained by Apache software foundation. Apache HTTP is a
remote server(computer) if someone request files, images or
documents using their browser they will serve those files to
clients using HTTP servers. Mainly hosting companies use this
application to create a VPS server and shared hosting for their
clients.

32
MYSQL
MYSQL is an open source software. It is actually a relational
database management system(RDBMS). This SQL stands for
Structured Query Language.It is the most popular and best
RDBMS used for developing a variety of web-based software
applications. With the help of MYSQL, it is possible to organize
the information, manage, retrieve and update the data whenever
you wish to do.

PHP
The full form of PHP is Hypertext Preprocessor. It is a server-
side scripting language that helps you to create dynamic
websites. This language is mainly used to build web-based
software applications. It is an open source software and works
fine with MYSQL. What actually happens is, the PHP code will
be executed on the server and at the browser side its HTML
code will be displayed.

Perl
Perl is usually said to be general purpose programming
language. This Perl language is interpreted and highly dynamic.
Actually, this language is used for web development, GUI

33
development, system administration etc. Perl is capable of
working with HTML, XML and other markup languages.
In the latest version of XAMPP, there are additional tools such
as Mail server Mercury, OpenSSL, phpMyAdmin etc. With the
above tools, you can create a full-fledged desktop server.

XAMPP Screen View

Control Panel

Apache

34
MySQL

35
HARDWARE & SOFTWARE REQUIREMENT
SPECIFICATION

Hardware specifications

Operating system : Windows Server 2008 and later

Windows Vista and later
Mac OS X 10.6 and
later
CentOS, Ubuntu, Fedora, Gentoo,
Arch, SUSE
Platform : IA-32 (Windows package only)
and x64 (macOS and Linux
packages only)

36
Size : Windows: 156 MB
Linux: 150 MB
macOS: 161 MB

Software specifications

Database : MySQL
Server : Apache

PROJECT SNAP SHOTS

Homepage

37
 Registration Page

F
ac
ul
ty Dashboard

38
 Adding student

Marking attendance

39
Attendance records

Forget password

40
Database structure

SOURCE CODE

41
Homepage (HTML)

<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<title>Home - Attendance Management System</title>

<link rel="stylesheet" href="resources/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="resources/css/stylesheet.css">
<script src="resources/Jquery/jquery-3.5.1.js"></script>
<script src="resources/Bootstrap/js/bootstrap.min.js"></script>
<script src="resources/js/sweetalert.min.js"></script>
</head>

<body>

<div id="headerSection" class="sticky-top">

<div class="container" >
<div class="row">
<div class="col-sm-12 text-center pt-3">
<p id="brand">Attendance Management System</p>
</div>
</div>
</div>
</div>

<div id="bodySection">
<div class="container">
<div class="row pt-4 pb-2 align-items-center">
<div class="col-md-12 text-center py-3">
<h2>Ramniranjan Jhunjhunwala College of Arts, Science & Commerce</h2>
</div>
</div>
<div class="row py-1 align-items-center">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<div id="loginSection" class="text-center">
<br>
<h4>Faculty Login</h4>
<h4><i class="fa fa-user-circle fa-3x py-
2" style="color:#be2edd"></i></h4>
<form>
<div class="form-row py-1 px-5">
<div class="form-group col-md-12">

42
 <input type="text" id="uid" class="form-
control" placeholder="User ID">
</div>
</div>
<div class="form-row py-1 px-5">
<div class="form-group col-md-12">
<input id="pass" type="password" class="form-
control" placeholder="Password">
</div>
</div>

<div class="form-row py-1 px-5">

<div class="form-group col-md-12">
<input type="button" style="background-
color:#be2edd" onclick="loginFun()" class="form-control btn btn-success" value="Login">
<div class="pt-
2">Forget password? <a href="routes/forget_pass.php">Click here</a></div>
</div>
</div>
<div class="form-row py-1">
<div class="form-group col-md-12">
<h5>New registration? <a href="routes/register.php">Click here
</a></h5>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>

<script src="resources/js/login.js"></script>

</body>

</html>

</html>

Registration (HTML)
43
<?php
session_start();
?>

<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<title>Registration - Attendance Management System</title>
<link rel="stylesheet" href="../resources/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../resources/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../resources/css/stylesheet.css">
<link rel="stylesheet" href="../resources/Jquery/jquery-ui.css">
<script src="../resources/Jquery/jquery-3.5.1.js"></script>
<script src="../resources/Jquery/jquery-ui.js"></script>
<script src="../resources/Bootstrap/js/bootstrap.min.js"></script>
<script src="../resources/js/sweetalert.min.js"></script>
</head>

<body>

<div id="headerSection" class="sticky-top">

<div class="container" >
<div class="row">
<div class="col-sm-12 text-center pt-3">
<p id="brand">Attendance Management System</p>
</div>
</div>
</div>
</div>

<div id="bodySection">
<div class="container">
<div class="row align-items-center pt-5 text-center">
<div class="col-md-12"><h3>Faculty Registration</h3></div>
</div>
<div class="row py-4">
<div class="col-md-12">
<div id="regSection" class="text-center">
<form id="regForm" enctype="multipart/form-data">
<div class="form-row">
<div class="form-group col-md-2 m-0 p-0"></div>
<div class="form-group col-md-8">
<input id ="fname" type="text" class="form-
control" placeholder="Full name">
</div>
<div class="form-group col-md-2 m-0 p-0"></div>

44
 </div>
<div class="form-row">
<div class="form-group col-md-2 m-0 p-0"></div>
<div class="form-group col-md-4">
<input id ="mobile" type="number" class="form-
control" placeholder="Mobile">
</div>
<div class="form-group col-md-4">
<input id ="dob" type="text" class="form-
control" placeholder="Birth Date">
</div>
<div class="form-group col-md-2 m-0 p-0"></div>
</div>
<div class="form-row">
<div class="form-group col-md-2 m-0 p-0"></div>
<div class="form-group col-md-4">
<input id ="quali" type="text" class="form-
control" placeholder="Qualification">
</div>
<div class="form-group col-md-4">
<input id ="uname" name="mobile" type="text" class="form-
control" placeholder="Username">
</div>
<div class="form-group col-md-2 m-0 p-0"></div>
</div>
<div class="form-row">
<div class="form-group col-md-2 m-0 p-0"></div>
<div class="form-group col-md-4">
<input id ="uid" type="password" class="form-
control" placeholder="User ID">
</div>
<div class="form-group col-md-4">
<input id ="pass" type="password" class="form-
control" placeholder="Password">
</div>
<div class="form-group col-md-2 m-0 p-0"></div>
</div>
<div class="form-row py-1">
<div class="form-group col-md-3"></div>
<div class="form-group col-md-6">
<input onclick="regFun()" type="button" style="background-
color:#be2edd" class="form-control btn btn-success" id="register" value="Register">
</div>
<div class="form-group col-md-3"></div>
</div>
</form>
<a href="../"><button type="button" class="btn btn-
primary">Back</button></a>

</div>
</div>
</div>
</div>
</div>

45
<script src="../resources/js/register.js"></script>

</body>

</html>

Main Dashboard (HTML)

<?php
session_start();
if(!isset($_SESSION['uid'])){
header('location:logout.php');
}
?>

<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<title>Dashboard - Attendance Management System</title>

<link rel="stylesheet" href="../resources/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../resources/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../resources/css/stylesheet.css">
<script src="../resources/Jquery/jquery-3.5.1.js"></script>
<script src="../resources/Bootstrap/js/bootstrap.min.js"></script>
<script src="../resources/js/sweetalert.min.js"></script>
</head>

<body>

<div id="headerSection" class="sticky-top">

<div class="container" >
<div class="row">
<div class="col-sm-12 text-center pt-3">
<p id="brand">Attendance Management System</p>
</div>
</div>
</div>
</div>

<div id="bodySection">
<div class="container">

46
 <div class="row align-items-center py-3">
<div class="col-md-10 text-center">
<h3>Welcome <?php echo $_SESSION['faculty']?>!</h3>
</div>
<div class="col-md-2 text-center">
<a href="logout.php"><button class="btn btn-sm btn-
primary">Logout <i class="fa fa-user-circle"></i></button></a>
</div>
</div>
<hr>

<div class="row py-1">

<div class="col-md-12 text-center">
<form>
<div class="form-row">
<div class="form-group text-center col-md-8">
<h4>Add new student</h4>
</div>
<div class="form-group text-center col-md-4">
<a href="record.php"><button type="button" class="btn btn-sm btn-
success">Check record <i class="fa fa-book"></i></button></a>
</div>
</div>
</form>
<form>
<div class="form-row pt-3">
<div class="form-group col-md-8">
<input class="form-
control" type="text" placeholder="Student Name" id="name">
</div>
<div class="form-group col-md-4">
<input class="form-
control" type="text" placeholder="Student Roll No" id="roll">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<select class="form-control" id="course">
<option value="">Course</option>
<option value="Diploma">Diploma</option>
<option value="B.E.">B.E.</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div class="form-group col-md-4">
<select class="form-control" id="semester">
<option value="">Semester</option>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
<option value="V">V</option>
<option value="VI">VI</option>
<option value="VII">VII</option>

47
 <option value="VIII">VIII</option>
</select>
</div>
<div class="form-group col-md-4">
<select class="form-control" id="branch">
<option value="">Branch</option>
<option value="Mechanical">Mechanical</option>
<option value="Electrical">Electrical</option>
<option value="Civil">Civil</option>
<option value="CSE">CSE</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4 p-0 m-0"></div>
<div class="form-group col-md-4">
<button class="btn btn-success form-control" style="background-
color:#be2edd" type="button" onclick="addStudent()">Add student</button>
</div>
<div class="form-group col-md-4 p-0 m-0"></div>
</div>
</form>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h4>Mark Attendance <?php echo date('d-m-Y') ?> </h4>
<div class="py-3" id="studentList"></div>
</div>
</div>
</div>
</div>

<script src="../resources/js/student.js">
</script>

</body>

</html>

Records (HTML)

48
<?php
session_start();
if(!isset($_SESSION['uid'])){
header('location:logout.php');
}
?>

<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<title>Dashboard - Attendance Management System</title>

<link rel="stylesheet" href="../resources/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../resources/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../resources/css/stylesheet.css">
<script src="../resources/Jquery/jquery-3.5.1.js"></script>
<script src="../resources/Bootstrap/js/bootstrap.min.js"></script>
<script src="../resources/js/sweetalert.min.js"></script>
</head>

<body>

<div id="headerSection" class="sticky-top">

<div class="container" >
<div class="row">
<div class="col-sm-12 text-center pt-3">
<p id="brand">Attendance Management System</p>
</div>
</div>
</div>
</div>

<div id="bodySection">
<div class="container">
<div class="row align-items-center py-3">
<div class="col-md-1 text-center">
<a href="main.php"><button class="btn btn-sm btn-warning">Back</button></a>
</div>
<div class="col-md-9 text-center">
<h3>Welcome <?php echo $_SESSION['faculty']?>!</h3>
</div>
<div class="col-md-2 text-center">
<a href="logout.php"><button class="btn btn-sm btn-
primary">Logout <i class="fa fa-user-circle"></i></button></a>
</div>
</div>
<hr>

49
 <div class="row">
<div class="col-md-12 text-center">
<div class="py-3" id="studentList"></div>
</div>
</div>
</div>
</div>

<script src="../resources/js/record.js"></script>

</body>

</html>

Dashboard (Javascript)
getStudents();

function addStudent() {
var name = $("#name").val();
var course = $("#course").val();
var roll = $("#roll").val();
var semester = $("#semester").val();
var branch = $("#branch").val();

if (
name == "" ||
course == "" ||
roll == "" ||
semester == "" ||
branch == ""
) {
alert("Fields should be blank!");
} else {
$.ajax({
url: "../api/api.php",
type: "POST",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
call: 3,
name: name,
course: course,
roll: roll,
semester: semester,
branch: branch,
}),
success: function (data) {

50
 if (data == 1) {
swal({
title: "Student added!",
text: "New student is added on E-Attendance!",
icon: "success",
button: "OK!",
});

$("#name").val("");
$("#course").val("");
$("#roll").val("");
$("#semester").val("");
$("#branch").val("");
getStudents();
} else {
swal({
title: "Error!",
text: "Some error occured!",
icon: "error",
button: "OK!",
});
}
},
});
}
}

function searchStudent() {
var course = $("#course1").val();
var semester = $("#semester1").val();
var branch = $("#branch1").val();

if (course == "" || semester == "" || branch == "") {

alert("Fields should be blank!");
} else {
$.ajax({
url: "../api/api.php",
type: "POST",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
call: 6,
course: course,
semester: semester,
branch: branch,
}),
success: function (data) {
if (data.length > 0) {
var sr = 1;
var students = "";

$.each(data, function (i, d) {

students +=
"<tr>" +

51
 '<th scope="row">' +
sr +
"</th>" +
'<td colspan="2">' +
d.name +
"</td>" +
'<td scope="col">' +
d.roll_no +
"</td>" +
'<td scope="col">' +
d.course +
"</td>" +
'<td scope="col">' +
d.semester +
"</td>" +
'<td scope="col">' +
d.branch +
"</td>" +
"</tr>";
sr++;
});

$("#studentList").html(
'<div class="table-responsive-md" style="background-color:white">' +
'<table class="table table-bordered">' +
"<thead>" +
"<tr>" +
'<th scope="col">Sr.no.</th>' +
'<th colspan="2">Name</th>' +
'<th scope="col">Roll No</th>' +
'<th scope="col">Course</th>' +
'<th scope="col">Semester</th>' +
'<th scope="col">Branch</th>' +
"</tr>" +
"</thead>" +
"<tbody>" +
students +
"</tbody>" +
"</table></div>"
);
} else {
$("#studentList").html("<p><b>No matching records found!</b>");
}
},
});
}
}

function getStudents() {
$.ajax({
url: "../api/api.php",
type: "POST",
dataType: "json",
contentType: "application/json",

52
 data: JSON.stringify({
call: 4,
}),
success: function (data) {
console.log(data);
var studentsData = data[0];
var day = parseInt(data[1][0]);
var month = parseInt(data[1][1]);
var year = parseInt(data[1][2]);
var todayDate = data[2];
var sr = 1;
var students = "";
var present = 1;
var absent = 0;
var status = '';

$.each(studentsData, function (i, d) {

if((d.date==null) || (todayDate!=d.date && d.status!=0)){

status = '<button class="btn btn-sm btn-
success" onclick="conFirm(\''+d.id+'\',\''+1+'\')" type="button"><b>P</b></button> &nbsp <butt
on class="btn btn-sm btn-
danger" onclick="conFirm(\''+d.id+'\',\''+0+'\')" type="button"><b>A</b></button>';
students +=
"<tr>" +
'<th scope="row">' +
sr +
"</th>" +
'<td colspan="2">' +
d.name +
"</td>" +
'<td scope="col">' +
d.roll_no +
"</td>" +
'<td scope="col">' +
d.course +
"</td>" +
'<td scope="col">' +
d.semester +
"</td>" +
'<td scope="col">' +
d.branch +
"</td>" +
'<td scope="col">' +
status +
"</td>" +
"</tr>";
sr++;
}
else if(day==d.day && month==d.month && year==d.year && d.record==1){
status = '<span class="badge badge-success badge-pill px-3 py-2">Present</span>';
students +=
"<tr>" +
'<th scope="row">' +

53
 sr +
"</th>" +
'<td colspan="2">' +
d.name +
"</td>" +
'<td scope="col">' +
d.roll_no +
"</td>" +
'<td scope="col">' +
d.course +
"</td>" +
'<td scope="col">' +
d.semester +
"</td>" +
'<td scope="col">' +
d.branch +
"</td>" +
'<td scope="col">' +
status +
"</td>" +
"</tr>";
sr++;
}
else if(day==d.day && month==d.month && year==d.year && d.record==0){
status = '<span class="badge badge-danger badge-pill px-3 py-
2" type="button"><b>Absent</b></span>';
students +=
"<tr>" +
'<th scope="row">' +
sr +
"</th>" +
'<td colspan="2">' +
d.name +
"</td>" +
'<td scope="col">' +
d.roll_no +
"</td>" +
'<td scope="col">' +
d.course +
"</td>" +
'<td scope="col">' +
d.semester +
"</td>" +
'<td scope="col">' +
d.branch +
"</td>" +
'<td scope="col">' +
status +
"</td>" +
"</tr>";
sr++;
}
else{
return null;

54
 }

});

$("#studentList").html(
'<div class="table-responsive-md" style="background-color:white">' +
'<table class="table table-bordered">' +
"<thead>" +
"<tr>" +
'<th scope="col">Sr.no.</th>' +
'<th colspan="2">Name</th>' +
'<th scope="col">Roll No</th>' +
'<th scope="col">Course</th>' +
'<th scope="col">Semester</th>' +
'<th scope="col">Branch</th>' +
'<th scope="col">Attendance</th>' +
"</tr>" +
"</thead>" +
"<tbody>" +
students +
"</tbody>" +
"</table></div>"
);
},
});
}

function conFirm(id, record){

var sid = id;
var record = record;
swal({
title: 'Are you sure?',
text: "Confirm once before marking attendance!",
icon: "warning",
buttons: ['Cancel', 'Confirm'],
dangerMode: true,
})
.then((ok) => {
if (ok) {
addAttendance(sid, record);
} else {
swal("Think again!");
}
});
}

function addAttendance(sid, record) {

var sid = sid;
var record = record;

55
 $.ajax({
url: "../api/api.php",
type: "POST",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
call: 8,
sid :sid,
record : record
}),
success: function (data) {
if (data == 1) {
getStudents();
} else {
swal({
title: "Error!",
text: "Some error occured!",
icon: "error",
button: "OK!",
});
}
},
});
}

Records (Javascript)

56
getStudents();

function getStudents() {
$.ajax({
url: "../api/api.php",
type: "POST",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
call: 12,
}),
success: function (data) {
var studentsData = data;
var sr = 1;
var students = "";
var record = '';
var sid = '';
var studentList = '';
var status = '';

$.each(studentsData, function (i, d) {

console.log(studentsData);
status = (d.record==1) ? '<span class="badge badge-success badge-pill px-3 py-
2">Present</span>' : '<span class="badge badge-danger badge-pill px-3 py-
2"><b>Absent</b></span>';

if(record==''){
students =
"<tr>" +
'<th scope="row">' +
sr +
"</th>" +
'<td colspan="2">' +
d.name +
"</td>" +
'<td scope="col">' +
d.roll_no +
"</td>" +
'<td scope="col">' +
d.course +
"</td>" +
'<td scope="col">' +
d.semester +
"</td>" +
'<td scope="col">' +
d.branch +
"</td>" +
'<td scope="col">' +
d.date +
"</td>" +
'<td scope="col">' +
status +
"</td>" +

57
 "</tr>";

studentList += '<h5 class="pb-2">Attendance date: '+d.date+'</h5><div class="table-

responsive-md" style="background-color:white">' +
'<table class="table table-bordered">' +
"<thead>" +
"<tr>" +
'<th scope="col">Sr.no.</th>' +
'<th colspan="2">Name</th>' +
'<th scope="col">Roll No</th>' +
'<th scope="col">Course</th>' +
'<th scope="col">Semester</th>' +
'<th scope="col">Branch</th>' +
'<th scope="col">Date</th>' +
'<th scope="col">Status</th>' +
"</tr>" +
"</thead>" +
"<tbody>" +
students;
record = d.date;
sr++;
}
else if(record==d.date){

students =
"<tr>" +
'<th scope="row">' +
sr +
"</th>" +
'<td colspan="2">' +
d.name +
"</td>" +
'<td scope="col">' +
d.roll_no +
"</td>" +
'<td scope="col">' +
d.course +
"</td>" +
'<td scope="col">' +
d.semester +
"</td>" +
'<td scope="col">' +
d.branch +
"</td>" +
'<td scope="col">' +
d.date +
"</td>" +
'<td scope="col">' +
status +
"</td>" +
"</tr>";
studentList+=students;
record = d.date;
sr++;

58
 }
else if(record!=d.date){
sr = 1;
students =
"<tr>" +
'<th scope="row">' +
sr +
"</th>" +
'<td colspan="2">' +
d.name +
"</td>" +
'<td scope="col">' +
d.roll_no +
"</td>" +
'<td scope="col">' +
d.course +
"</td>" +
'<td scope="col">' +
d.semester +
"</td>" +
'<td scope="col">' +
d.branch +
"</td>" +
'<td scope="col">' +
d.date +
"</td>" +
'<td scope="col">' +
status +
"</td>" +
"</tr>";

studentList+="</tbody>"+
'</table></div><br><h5 class="pb-
2">Attendance date: '+d.date+'</h5><div class="table-responsive-md" style="background-
color:white">' +
'<table class="table table-bordered">' +
"<thead>" +
"<tr>" +
'<th scope="col">Sr.no.</th>' +
'<th colspan="2">Name</th>' +
'<th scope="col">Roll No</th>' +
'<th scope="col">Course</th>' +
'<th scope="col">Semester</th>' +
'<th scope="col">Branch</th>' +
'<th scope="col">Date</th>' +
'<th scope="col">Status</th>' +
"</tr>" +
"</thead>" +
"<tbody>" +
students;
record = d.date;
sr++;
}

59
 });

$("#studentList").html(studentList);
},
});
}

Registration (Javascript)
$(document).ready(function () {
$("#dob").datepicker({
maxDate: 0,
changeMonth: true,
changeYear: true,
yearRange: "1950:2020",
});
});

function regFun() {
var fname = $("#fname").val();
var uname = $("#uname").val();
var uid = $("#uid").val();
var quali = $("#quali").val();
var pass = $("#pass").val();
var dob = $("#dob").val();
var mobile = $("#mobile").val();

if (
fname == "" ||
uname == "" ||
uid == "" ||
quali == "" ||
pass == "" ||
dob == "" ||
mobile == ""
) {
alert("Fields should be blank!");
} else {
$.ajax({
url: "../api/api.php",
type: "POST",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
call: 1,
fname: fname,
uname: uname,
uid: uid,
quali: quali,
pass: pass,

60
 dob: dob,
mobile: mobile,
}),
success: function (data) {
if (data == 1) {
swal({
title: "Registration successfull!",
text: "Welcome to Online Attendance Management System!",
icon: "success",
button: "OK!",
}).then((value) => {
window.location = "../";
});
} else if (data == 2) {
swal({
title: "User already exists!",
text: "Mobile number is already taken. Try another!",
icon: "warning",
button: "OK!",
});
} else {
swal({
title: "Error!",
text: "Some error occured!",
icon: "error",
button: "OK!",
});
}
},
});
}
}

Login (Javascript)
function loginFun() {
var uid = $("#uid").val();
var pass = $("#pass").val();

if (uid == "" || pass == "") {

alert("Fields cannot be empty!");
} else {
$.ajax({
url: "api/api.php",
type: "POST",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
call: 2,
uid: uid,

61
 pass: pass,
}),
success: function (data) {
if (data == 1) {
window.location = "routes/main.php";
} else {
swal({
title: "Invalid credentials!",
text: "Enter proper details!",
icon: "error",
button: "OK!",
});
}
},
});
}
}

Forget Password (Javascript)

$(document).ready(function () {
$("#dob").datepicker({
maxDate: 0,
changeMonth: true,
changeYear: true,
yearRange: "1950:2020",
});

$("#changePass").click(function () {
var uid = $("#uid").val();
var dob = $("#dob").val();
var pass = $("#pass").val();

if (uid == "" || dob == "" || pass == "") {

alert("Fields cannot be left blank!");
} else {
$.ajax({
url: "../api/api.php",
type: "POST",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
call: 5,
uid: uid,
dob: dob,
pass: pass,
}),
success: function (data) {
if (data == 1) {

62
 swal({
title: "Password changed!",
text: "New password is set!",
icon: "success",
button: "OK!",
}).then((vote) => {
window.location = "../";
});
} else {
swal({
title: "Invalid Credentials!",
text: "Invalid! user id / date of birth",
icon: "error",
button: "OK!",
});
}
},
});
}
});
});

Backened API (PHP)

<?php

session_start();
include('connect.php');
$json = json_decode(file_get_contents("php://input"),true);

// Faculty registration
if($json['call']==1){

$fname = $json['fname'];
$uname = $json['uname'];
$uid = $json['uid'];
$mobile = $json['mobile'];
$dob = $json['dob'];
$quali = $json['quali'];
$pass = md5($json['pass']);
$date = date('d-m-Y');

$check = mysqli_query($con, "select * from faculty where mobile='$mobile'");

if(mysqli_num_rows($check)>0){
echo json_encode($response['success']=2);
}
else{

63
 $query = mysqli_query($con, "insert into faculty (name, mobile, dob, qualification, us
ername, uid, password, created_at) values('$fname','$mobile','$dob','$quali', '$uname', '$uid'
, '$pass', '$date')");
if($query){
echo json_encode($response['success']=1);
}
else{
echo json_encode($response['success']=0);
}
}
}

// Faculty login
if($json['call']==2){
$uid = $json['uid'];
$pass = md5($json['pass']);

$check = mysqli_query($con, "select * from faculty where uid='$uid' and password='$pass'")

;
if(mysqli_num_rows($check)>0){
$_SESSION['uid']=$uid;
$fetch = mysqli_fetch_array($check);
$_SESSION['faculty'] = $fetch['username'];
echo json_encode($response['success']=1);
}
else{
echo json_encode($response['success']=0);
}

// Add student
if($json['call']==3){

$name = $json['name'];
$course = $json['course'];
$roll = $json['roll'];
$semester = $json['semester'];
$branch = $json['branch'];
$date = date('d-m-Y');

$query = mysqli_query($con, "insert into student (name, roll_no, course, semester, branch,
created_at) values('$name','$roll','$course','$semester', '$branch', '$date')");
if($query){
echo json_encode($response['success']=1);
}
else{
echo json_encode($response['success']=0);
}
}

64
// Get students
if($json['call']==4){
$day = date('d');
$month = date('m');
$year = date('Y');
$date = [$day, $month, $year];
$todayDate = date('d-m-Y');
$getStudents = mysqli_query($con, "select student.id, student.name, student.roll_no, stude
nt.course, student.semester, student.branch, student.created_at, record.sid, record.status, re
cord.record, record.day, record.month, record.year, record.date from student LEFT JOIN record
ON student.id = record.sid ORDER BY student.id ASC");
if(mysqli_num_rows($getStudents)>0){
$students = mysqli_fetch_all($getStudents, MYSQLI_ASSOC);
$empty = mysqli_free_result($getStudents);
echo json_encode([$students, $date, $todayDate]);
}
else{
echo json_encode($response['success']=0);
}
}

// Forget password
if($json['call']==5){
$uid = $json['uid'];
$dob = $json['dob'];
$pass = md5($json['pass']);
$check = mysqli_query($con, "select * from faculty where uid='$uid' and dob='$dob'");

if(mysqli_num_rows($check)>0){
$update = mysqli_query($con, "update faculty set password='$pass' where uid='$uid' and
dob='$dob'");
if($update){
echo json_encode($response['success']=1);
}
else{
echo json_encode($response['success']=0);
}
}
else{
echo json_encode($response['success']=0);
}
}

// Search student
if($json['call']==6){

$course = $json['course'];
$semester = $json['semester'];
$branch = $json['branch'];

$getStudents = mysqli_query($con, "select * from student where course='$course' and semest

er='$semester' and branch='$branch'");
if(mysqli_num_rows($getStudents)>0){

65
 $students = mysqli_fetch_all($getStudents, MYSQLI_ASSOC);
$empty = mysqli_free_result($getStudents);
echo json_encode($students);
}
else{
echo json_encode($response['success']=0);
}
}

// Populate students data

if($json['call']==7){

$getStudents = mysqli_query($con, "select * from student");

if(mysqli_num_rows($getStudents)>0){
$students = mysqli_fetch_all($getStudents, MYSQLI_ASSOC);
$empty = mysqli_free_result($getStudents);
echo json_encode($students);
}
else{
echo json_encode($response['success']=0);
}
}

// Add record
if($json['call']==8){

$sid = $json['sid'];
$record = $json['record'];
$day = date('d');
$month = date('m');
$year = date('Y');
$date = date('d-m-Y');

$changeStatus = mysqli_query($con,"update record set status=0 where sid=$sid");

if($changeStatus){
$query = mysqli_query($con, "insert into record (sid, status, record, date, day, month
, year) values('$sid', 1 , '$record', '$date', '$day', '$month', '$year')");
if($query){
echo json_encode($response['success']=1);
}
else{
echo json_encode($response['success']=0);
}
}

// Get records
if($json['call']==9){
$getRecords = mysqli_query($con, "select student.name, student.course, student.branch, stu
dent.semester, record.subject_name, record.sid, record.id, record.subject_code, record.ese, re

66
cord.ct, record.ta from student LEFT JOIN record ON student.id=record.sid WHERE student.id=rec
ord.sid ");
if(mysqli_num_rows($getRecords)>0){
$records = mysqli_fetch_all($getRecords, MYSQLI_ASSOC);
$empty = mysqli_free_result($getRecords);
echo json_encode($records);
}
else{
echo json_encode($response['success']=0);
}
}

// Edit record
if($json['call']==10){

$sid = $json['sid'];
$id = $json['id'];
$getRecord = mysqli_query($con, "select ese, id, sid, ct, ta from record WHERE sid='$sid'
and id='$id' ");
if(mysqli_num_rows($getRecord)>0){
$record = mysqli_fetch_array($getRecord, MYSQLI_ASSOC);
$empty = mysqli_free_result($getRecord);
echo json_encode($record);
}
else{
echo json_encode($response['success']=0);
}
}

// Save record
if($json['call']==11){

$sid = $json['sid'];
$id = $json['id'];
$new_ese = $json['new_ese'];
$new_ct = $json['new_ct'];
$new_ta = $json['new_ta'];

$update = mysqli_query($con, "update record set ese='$new_ese', ct='$new_ct', ta='$new_ta'

where sid='$sid' and id='$id'");
if($update){
echo json_encode($response['success']=1);
}
else{
echo json_encode($response['success']=0);
}
}

if($json['call']==12){

$query = mysqli_query($con, "select student.id, student.name, student.roll_no, student.cou

rse, student.semester, student.branch, student.created_at, record.sid, record.status, record.d

67
ate, record.record from student LEFT JOIN record ON student.id = record.sid WHERE student.id =
record.sid ORDER BY record.id DESC");
if(mysqli_num_rows($query)>0){
$records = mysqli_fetch_all($query, MYSQLI_ASSOC);
$empty = mysqli_free_result($query);
echo json_encode($records);
}
else{
echo json_encode(0);
}

}
?>

Database Connectivity (PHP)

<?php
$con = mysqli_connect('localhost','root','','student-
attendance') or die('connection error');
?>

Logout (PHP)
<?php
session_start();
session_destroy();
header('location:../index.php');
?>

Stylesheet (CSS)
#headerSection {
background-color: #be2edd;
}

#brand {
font-weight: 600;
color: white;
font-style: italic;
font-family: cursive;
font-size: xx-large;
}

#loginSection {
padding: 15px;
border: 1px solid #be2edd;

68
 background-color: white;
border-radius: 20px;
}

#adminSection {
padding: 15px;
border: 1px solid #34495e;
background-color: white;
border-radius: 20px;
}

#component {
background-color: white;
border-radius: 10px;
}

69