ATTENDANCE WEB-APP

Chetana’s
Hazarimal Somani College of Comm. & Eco.
Smt. Kusumtai Chaudhari College of Arts
(Affiliated to University of Mumbai)

Bandra (East), Mumbai - 400 051.

MAHARASHTRA

2022-2023

“ATTENDANCE WEB-APP”
A PROJECT REPORT
Submitted in partial fulfillment
of the Requirements for the Degree of

BACHELOR OF SCIENCE
(INFORMATION TECHNOLOGY)

PROJECT GUIDE SUBMITTED BY

MR. SARAVANAN REDDY ADNAN MANGAONKAR: - 333

ROHAN WALKE: - 370

1
 ATTENDANCE WEB-APP

Proforma for the approval project proposal

(Note: All the entries of the approval should be filled up with
appropriate and complete information. Incomplete proforma of
approval in any respect will be summarily rejected.)
PRN No: 2020016401783284 Roll no: 333

PRN No: 2020016401782122 Roll no: 370

1) Name of the Students:

 Adnan Shafiq Mangaonkar

 Rohan Satish Walke

2) Title of the Project: Attendance Web-App

3) Name of the Guide: Prof. Saravanan Reddy

4) Teaching experience of the Guide: 20 years

5) Is this your first submission? Yes No

Name & Signature of members: -

ADNAN MANGAONKAR ROHAN WALKE

Date……………………………. Date…………………………….

Signature of the External Signature of the Internal

Date……………………………. Date…………………………….

2
 ATTENDANCE WEB-APP

ABSTRACT
Attendance management is important for all organizations. It can determine the future success
of organizations such as educational institutions, public or private sector. Organizations need
to track people within the organization, such as employees and students, to maximize performance.
Managing student presence during the semester has become a daunting task. The ability to
calculate attendance becomes a major task, as manual calculations are error-prone and waste a lot
of time. With this in mind, an efficient web-based attendance management system application was
developed to track student activity in the classroom. This application records attendance
electronically and records of attendance are stored in a database.

System design using the Model, View, Controller (MVC) architecture and implementation using
the power of the NEST JS Framework. The Web Application is entirely JS framework driven as it
uses AngularJS in Front-End and NestJS in Backend to improve the use of the system. MongoDB
is used for the application database. The designing part of the system will be done through figma
and the coding of the system will be done using visual studio code. Due to the different hourly
rates for calculating absenteeism, the system is designed to distinguish between theoretical and
practical class hours. One can manage and Insertion, deletion and modification of data in the
system can be done directly from the designed GUI without manipulating tables. You can present
different information from the system.

A test case of the system showed that it worked very well and was ready to be used to manage
student attendance in all departments of the university. Introduction. In addition, this process takes
a lot of time and department staff puts a lot of effort into completing attendance for each student.

It follows different purposes. These purposes include record keeping, student assessment, and
promoting optimal and consistent classroom participation. In many developing countries, most
educational institutions require a minimum percentage of classroom attendance, but this policy is
not met due to various challenges presented by current attendance recording methods. The process
of registering student attendance was paper-based and the system was manual. Not only is it time
consuming and laborious to prepare sheets and documents, but there are other drawbacks
compared to traditional methods, such as sheet theft due to lost or damaged sheets.

3
 ATTENDANCE WEB-APP

ACKNOWLEDGEMENT

We have taken efforts in this project. However, it would not have been possible without the kind
support and help of many individuals and organizations. We would like to extend our sincere
thanks to all of them.

We are highly indebted to Prof. Saravanan Reddy for his guidance and constant supervision as
well as for providing necessary information regarding the project and also for their support in
completing the project.

We would like to express our gratitude towards our parents and members of Chetana’s
Hazarimal Somani College of Comm. & Eco. Smt Kusumtai Chaudhari College of Arts, for their
kind cooperation and encouragement which helped me in completion of this project.

4
 ATTENDANCE WEB-APP

DECLARATION

We hereby declare that the project entitled, "Quiz Web-Application" done at Chetana’s
Hazarimal Somani College of Comm. & Eco. Smt Kusumtai Chaudhari College of Arts, has not
been in any case duplicated to submit to any other university for the award of any degree. To the
best of our knowledge other than us, no one has submitted to any other university.

The project is done in partial fulfillment of the requirements for the award of degree of
BACHELOR OF SCIENCE (INFORMATION TECHNOLOGY) to be submitted as a final
semester project as part of our curriculum.

Name & Signature of members: -

Adnan Mangaonkar Rohan Walke

5
 ATTENDANCE WEB-APP

Table of contents

CHAPTERS TITLE PAGE NO

1 INTRODUCTION 7-10

1.1 BACKGROUND 7

1.2 OBJECTIVE 8

1.3 PURPOSE 8

1.4 SCOPE 9

1.5 APPLICABILITY 9

1.6 ACHIEVEMENTS 9-10

2 SURVEY OF TECHNOLOGIES 11-15

2.1 EXISTING SYSTEM 11

2.2 LIST OF TECHNOLOGIES USING 11

2.3 REASON FOR SELECTED TECHNOLOGY 12-15

3 REQUIREMENT & ANALYSIS 16-18

3.1 PROBLEM DEFINITION 16

3.2 REQUIREMENT SPECIFICATIONS 16

3.3 PLANNING AND SCHEDULING 17

3.4 S/W & H/W REQUIREMENTS 17-18

3.5 GANTT CHART 18

3.6 PERT CHART 18

4 SYSTEM DESIGN 19-27

4.1 CONCEPTUAL MODELS 19-22

4.2 BASIC MODULES 22-23

4.3 DESIGN PATTERN 23

4.4 DATABASE 23

4.5 DATA STRUCTURE 23-24

4.6 SECURITY ISSUE 25

4.7 DESIGN TEST 25

4.8 TESTING 25-26

4.9 WIREFRAME 26-27

6
 ATTENDANCE WEB-APP

CHAPTER 1: INTRODUCTION

The Student Attendance System helps CRs and faculty maintain and manage students' online
attendance during classes and reduce manual work. Used to track student attendance, absence
records, attendance history, overdue monitoring, and other related documents. The most common
form of attendance is roll call or attendance book, which takes much more time, so manual
attendance systems require duplicated work, as excellent work must be done from the attendance

The mobile attendance system has been built to eliminate the time and effort wasted in taking
attendance in schools and colleges. It also greatly reduces the amount of paper resources needed
in attendance data management. The system is divided into following modules:

 This is an android mobile app. It’s built to be used for school/college faculty so that
they may take student attendance on their phones.
 Student Attendance List Creation: Once this App is installed on a phone, it allows
users to create a student attendance sheet consisting of name, roll number, date,
Absent/Present mark and subject. He has to fill student names along with associated
roll numbers.
 Attendance Marking: The faculty has the list on his phone now. He may see the list,
call roll numbers and select the absent id the student is absent or select present if
student is present.
 Attendance Storage: This data is now stored in the faculty mobile phone. Faculty
may also view it anytime on their phone.
 Attendance sheet transfer: The faculty can transfer the file to a server (normal
computer) via an internet connection where this data can be stored and maintained by
the school or college.
 Attendance Check: The PC operator may now check the attendance transferred as
Student roll no, date, time and sort by date to check presenters and absentees of a
particular date.

1.1 BACKGROUND

 The Previous and most common method of attendance system observed everywhere is the
manual paper and roll call method, where CR or the faculty either pass the attendance sheet
for signature or take the roll call which requires a lot more time and energy.
 In order to maintain & manage the attendance records the CR then has to do the double
manual work by working on excel data marking absent and presents.
 The previous system had the risks of attendance manipulation or alteration or getting lost.
The process then can be misused.
 In case of Defaulters and calculation of attendance performance of students. Although the
previous attendance system is entirely a multi-level manual work consuming much time,
effort and energy.

7
 ATTENDANCE WEB-APP

1.2 OBJECTIVES:

The Primary objective is to replace the time consuming, mis usable and effort taking manual
attendance procedures into secured and optimized online fashion.

1. The online system will replace the manual paper-based work as CRs can directly take
attendance records to the system.
2. The system then manages and organizes the data which then skips the manual excel work
which system will do simultaneously.
3. It also skips the manual calculation procedure, as the system will do the calculation and
release of the monthly defaulter lists.
4. Introduced a chatbot facility for optimistic work at minimal commands.

1.3 PURPOSE:
a. Web-based attendance management system.
 As compared to older methods, this web-based attendance system is more
favorable nowadays.
 It is more convenient, fast and secure.

b. Remote working
 The data can be managed irrespective of their place, as CRs can do their
attendance work from home too.
 For monitoring or checking defaulters, it does not require any kind of sheets
as the system will provide at some fingertip commands.
c. User-friendly
 The designing of the system is planned in such a way that maximum work
should be done with minimal efforts
 It provides a simpler UI for users to handle their following operations.
 The system proposed a chatbot facility responsible for doing commonly
observed daily tasks.
d. Secured
 As mentioned in secured part, the system is directly linked with the database
which provides several authorizations and is designed in designation-based
fashion so that logins will be accessed with respect to their designation
 The web-based system majorly avoids the risk of data lost or stolen or any
kind of temper.
e. Data rich
 As it is a database driven web-application and does not require any sheet or
file to carry. CR or faculty can easily mark or manage the attendance directly
to the database.
f. Convenient
 Major benefit of the web-based system is it has the ability to do more work in
less time and effort.
 chat bot facility will provide the functionality with common daily tasks with
minimal commands.

8
 ATTENDANCE WEB-APP

1.4 SCOPE:
 The online attendance management software keeps track of student attendance over years
and generates data and reports for a large number of students over the given data.
 Students, faculty members, and admin can access the software based on their roles and
responsibilities.
 Defaulters will be released at the end of month.
 Chatbot will be responsible for convenient work.
 Auto-management of Data and generate the excel if needed.

1.5 APPLICABILITY:
a. SAVE TIME:

 Most of the management will be done by the system itself as the Web application
facilitates less manual work.

b. MORE CONVENIENT:

 As mentioned in point a, the web application will be responsible for most of the
work. Perhaps as per the title itself, “more work in less effort and time” is nothing
but convenient.
 CRs and faculty can also use the chatbot to mark the attendance via several
commands.

c. SECURED:

 Referring from previous techniques, the sheet method is not a good option in terms
of security and safety management of attendance data.
 The system will provide the direct entry of attendance to a secured database which
can be extracted by respective faculties in excel format

1.6 ACHIEVEMENT:
a. Accurate Results
There is a high chance of human error when the attendance is taken manually and it is a
long and time-consuming process. The online attendance app is much faster and more
accurate than manual attendance, thus saving the time spent by faculty in doing it
manually.

b. Real-Time info
With the help of the online attendance app, monitoring and tracking of real-time
attendance of students and staff becomes much easier. Faulty can quickly check the
attendance of students in real-time through the online attendance app.

c. Paperless Environment

9
 ATTENDANCE WEB-APP

The online attendance app provides a convenient paperless attendance system in the
classroom. The benefits of going paperless or using an online attendance app include
reduced cost, readily available and quickly accessible information, document security,
and many more.

d. Improved Efficiency
Manually managing attendance data usually takes a long time, and with many students,
it’s quite tedious indeed. With an online attendance app, faculty and school management
can monitor student’s attendance easily.

e. Automatic Report Generation

One of the main benefits of the Online attendance app is the generation of various
reports. The school authorities can easily access the summary and trend reports
associated with attendance records.

f. Reliable Data
The online attendance app will offer accurate data. Therefore, with the assistance of the
attendance app, you can wipe out the expense and human errors and focus on driving
efficiency in your school.

10
 ATTENDANCE WEB-APP

CHAPTER 2: SURVEY OF TECHNOLOGY

2.1 Existing Systems.

The existing attendance system can be distinguished in several methods

1. Attendance based on a book

If a student arrives or chooses to leave, they must write down the time in the attendance
book. It usually has their name, time of arrival, and signature too.

2. Fingerprint
As the name implies, it is an attendance system that requires students’ fingerprints to clock in
and out. The strength of this system is that it is not easy to manipulate. However, this system
may not recognize your fingerprint when your fingers are wet or dirty

3. Face recognition
Face recognition is more complicated than the fingerprint system. It examines the human face
and eyes. If your face matches the data inside the system, it means you have been successfully
clocked in and out.

4. PIN-based system
Each students’ will have their own password. It can be in the form of numbers or letters. To
record your presence, you just need to input your password to the system. It seems simple but it
can be manipulated easily.

5. Magnetic cards
Students only need to swipe the card on the machine. After that, your attendance data will be
automatically stored in the system.

2.2 List of Technologies Selected

a. Code Editor: VS Code

b. Designing: Canva, Figma.
c. Preprocessors: ngBootstrap, PrimeNg, SASS.
d. Front-end: HTML, CSS, JS, TS.
e. Back-end: NodeJS, ExpressJS.
f. Frameworks:
 Frontend: AngularJS
 Backend: NestJS
g. Dependencies: Git, GitHub, RapidAPI, NPM
h. Database: MongoDB.

11
 ATTENDANCE WEB-APP

2.3 Reason for Selected Technology

 As methods mentioned in 2.1, some methods are outdated and unhandy, while some
methods are unlikely to be less secure and fragile to use for students' attendance as it might
cost much more to maintain or buy, while some have the issue of manipulation or
tempering.
 We have selected the below technologies as JavaScript is the most powerful language for
web development and is biased to work with interactive and dynamic web applications. The
major reason to use these technologies is that they are JavaScript driven languages.
 JavaScript is a common language for writing both backend and frontend code.
 NestJS is a NodeJS framework that is used as a backend. Nest. JS helps build
lightweight, well-structured and amazing microservices and helps evolve the
technology stack.
 AngularJS is a JavaScript driven framework for Frontend, It is a single page
application that is highly supported by google with the optimized MVC structure it is
easier to test.
 As a document database, MongoDB makes it easy for developers to store structured
or unstructured data. It uses a JSON-like format to store documents.

a. Code Editor
1. Visual Studio Code
 Visual Studio Code is a lightweight but powerful source code editor that runs
on your desktop and is available for Windows, macOS, and Linux.
 It comes with built-in support for JavaScript, TypeScript, and Node.js and
has a rich ecosystem of extensions for other languages (such as PHP, Python,
HTML, CSS, etc.) and runtimes (such as NPM, Nest, json server).
 Aside from the whole idea of being lightweight and starting quickly, VS
Code has IntelliSense code completion for variables, methods, and imported
modules; graphical debugging; linting, multi-cursor editing, parameter hints,
and other powerful editing features; snazzy code navigation and refactoring;
and built-in source code control including Git support. Much of this was
adapted from Visual Studio technology.
b. Designing
1. Figma
 The name Figma comes from the fact that it's the first interface design tool
with real-time collaboration – or, as we like to say, it's a “figment of your
imagination”.
 PRO TIP: Figma is a vector graphics editor and prototyping tool it is used by
designers to create high-quality designs and prototypes.
2. Canva
 Canva is an online graphic design tool pre-loaded with thousands of
templates to spark your creativity.
 Whether it be for internal use or for a client, the many benefits of using
Canva make it easier than ever to knock up stunning visuals in no time.
c. Modeling
1. StarUML

12
 ATTENDANCE WEB-APP

 StarUML is an open source software modeling tool that supports the UML
(Unified Modeling Language) framework for system and software modeling.
 It actively supports the MDA (Model Driven Architecture) approach by
supporting the UML profile concept and allowing it to generate code for
multiple languages.
d. Preprocessors
1. ngBootstrap
 It is a NPM powered bootstrap supported for JavaScript based frameworks.
 Framework for front-end web development that is responsive and mobile-
first. It's made up of HTML, CSS, and (optionally) JavaScript.
2. SASS
 Sass is the most mature, stable, and powerful professional grade CSS
extension language in the world.
 Sass is completely compatible with all versions of CSS. We take this
compatibility seriously, so that you can seamlessly use any available CSS
libraries.
 Sass boasts more features and abilities than any other CSS extension
language out there. The Sass Core Team has worked endlessly to not only
keep up, but stay ahead.
3. PrimeNg
 PrimeNg is a collection of rich UI components for Angular. All widgets are
open source and free to use under MIT License.
e. Front-end
1. HTML, SCSS
 HTML (Hypertext Markup Language) is the industry standard markup
language.
 It can be helped by Sassy Cascading Style Sheets (SCSS). HTML pages are
received by web browsers from a web server or from local files.
 The papers are stored and rendered as multimedia web pages. HTML
previously contained a semantic description of a web page's structure.
 SCSS stands for Sassy Cascading Style Sheets and it describes the
appearance of a markup-based document. HTML is one such language.
2. JavaScript
 One of the core technologies of the World Wide Web is JavaScript (JS), a
computer language that runs on HTML and CSS.
 A dedicated JavaScript engine is available in all major web browsers for
executing code on users' devices. JavaScript is an ECMAScript-compliant
high-level, typically just-in-time compiled language.
 Dynamic typing, prototype-based object orientation, and first-class functions
are all available.
3. Typescript
 Typescript is a superscript of JavaScript, TypeScript is an object-oriented
programming language, whereas JavaScript is a scripting language.
 Thus, TypeScript offers interfaces and modules through ES6 features; on the
other hand, JavaScript doesn't offer such features.
 TypeScript adds additional syntax to JavaScript to support a tighter
integration with your editor. TypeScript code converts to JavaScript, which
runs anywhere JavaScript runs: In a browser, on Node.js and in your apps.
13
 ATTENDANCE WEB-APP

f. Back-end
1. NodeJS
 Node.js is a framework for effortlessly constructing fast and scalable network
applications based on Chrome's JavaScript engine.
 Node.js is lightweight and efficient because of its event-driven, non-blocking
I/O mechanism, which makes it ideal for data-intensive real-time applications
that operate across multiple devices.
 Node.js also comes with a big library of JavaScript modules, making it much
easier to construct web applications with it.
 NodeJS is a framework rather than a programming language.
2. ExpressJS
 Express is a Node.js web application framework that offers a comprehensive
collection of functionalities for developing online and mobile apps.
 It allows for the quick creation of Node-based Web applications. Some of the
key elements of the Express framework are as follows: It Enables
middleware to reply to HTTP requests.
 Defines a routing table that is used to conduct various activities based on a
set of criteria through HTTP method and the URL Enables dynamic
rendering of HTML pages based on parameters given in the form of
templates.
g. Frameworks
1. AngularJS
 AngularJS is a structural framework for dynamic web apps. It lets you use
HTML as your template language and lets you extend HTML's syntax to
express your application's components clearly and succinctly.
 AngularJS's data binding and dependency injection eliminate much of the
code you would otherwise have to write.
2. NestJS
 Nest. JS helps build lightweight, well-structured and amazing microservices
and helps evolve the technology stack.
 The microservice architecture enables the rapid, frequent and reliable
delivery of large, complex applications.
 Out-of-the-box tools and features make development, extension, and
maintenance efficient.
h. Dependencies
1. Git
 Git is a DevOps tool used for source code management. It is a free and open-
source version control system used to handle small to very large projects
efficiently.
 Git is used to track changes in the source code, enabling multiple developers
to work together on non-linear development.
2. GitHub
 GitHub is the place for open source. With so many great tools available to
developers, GitHub has become the place to be for open source software.
 Some of the biggest open source projects are hosted on GitHub, such as Ruby
on Rails, AngularJS, Bootstrap and many many more.
3. RapidAPI

14
 ATTENDANCE WEB-APP

 RapidAPI launched RapidAPI Client, a VS Code extension to help you work

on APIs without leaving your favorite code editor.
 It streamlines API development for you no matter where you are in the
development cycle, without ever switching context to another tool.
4. NPM (Node Package Manager)
 The Node JavaScript platform's package manager is called Npm [6]. It
installs modules and intelligently handles dependency conflicts so that node
can locate them.
 The largest software repository in the world is npm. Many corporations use
npm to handle private development, while open source developers from
every continent use it to exchange and borrow packages. we have used
nodemailer, bcrypt, alert, fs,3 etc.
i. Databases
1. MongoDB
 The term "no NoSQL" is also used to describe systems that do not use SQL.
 The SQL database (formerly "non-SQL" or "non-relational") provides a
system for storing and retrieving data that is not structured using the tabular
relations used in relational databases.
 MongoDB is a document-oriented database that runs on a variety of
platforms and offers high performance, high availability, and simple scaling.
MongoDB operates on the collection and document concepts.
j. Libraries
1. PrimeFlex
 PrimeFlex is a lightweight responsive CSS utility library to accompany
Prime UI libraries and static web pages as well.
2. Angular Material
 Angular Material is a User Interface (UI) component library that developers
can use in their Angular projects to speed up the development of elegant and
consistent user interfaces.
k. Plugins
The main advantage of using plug-ins is the ability to expand the functionality of your
website quickly and easily. Webmasters can usually download and install them within
minutes. Developers also update plug-ins frequently, sometimes several times year, as
they make performance and security improvements.

15
 ATTENDANCE WEB-APP

CHAPTER 3: REQUIREMENTS AND ANALYSIS

3.1 PROBLEM DEFINITION:

 REQUIRES MORE EFFORTS:

As per mentioned, the previous attendance system is a kind of multi-level manual

work that requires more and more work. Such as roll calling and mention down on
sheet, maintenance of sheet then enters that data on excel, remembering and listing
all shifts and durations of the respective lectures every day, manual calculation then
required in order to monitor attendance performance or to release defaulters list.

 TIME CONSUMING:

As mentioned, the manual procedure of the attendance system. Sometimes it takes a

lot more time for entering and reviewing the excel attendance.

 UNSECURED DATA:

Due to manual paper-based attendance methods, there arises a risk of tampering with
data, or maybe a case where the attendance sheet can be ruined somehow or lost.
Therefore, there is a risk of attendance data.

 UNRELIABLE:

It's been observed that students sometimes have low confidence about the attendance
procedure due to some internal problems that lead to conflicts.

3.2 REQUIREMENT & ANALYSIS:

 Attendance management system is a live Web Application project proposed by
Chetana college on 25th August.
 The purpose of this Web Application is to serve the full online solution of Attendance
management.
 This Web Based Attendance System has the capability of management and sorting of
daily attendance directly through a web app.
 Attendance management system consists of the following modules.
- It will be a friendly attendance environment for easy attendance management.
- Respective CR’s can take attendance directly from this WebApp
- This allows divisional monitoring of data with respect to following post (CR
view, visiting faculty view, departmental view)
- One can easily track the students’ attendance.
- The WebApp allows the user auto calculation and management of attendance
and releasing of defaulter list.

16
 ATTENDANCE WEB-APP

3.3 PLANNING AND SCHEDULING:

 The Idea of this project was first proposed by College on 25th August, 2022
 Members present in the meeting are Prof. Saravanan Reddy, Abutayar Shaikh
sir, Rohan Walke & Adnan Mangaonkar.
 Key points Discussed in Meeting
- Digitalization of attendance system will be introduced to replace current
manual system
- The system will be a Web Application
 Critical Areas:
- Major critical areas are complexity of user authorization.
- Interactive WebApp with command based chatbot for attendance.

3.4 S/W & H/W REQUIREMENTS:

a. Software:

Browsers Chrome, Mozilla, Brave, Edge.

OS Windows 7 or more.

Dependencies JavaScript Engine.

b. Hardware (Minimum):

Processor Duo Core

Ram 2GB

OS architecture 32 bits

Connectivity required 2 Mbps

c. Languages and Frameworks:

Designing Canva, Figma

System Modeling StarUML

Front-End HTML, SCSS, JS, TS

Preprocessors SASS, ngBootstrap, PrimeNg

Back-End NodeJS, ExpressJS

17
 ATTENDANCE WEB-APP

Dependencies Rapid API, NPM, Git, GitHub

Frameworks AngularJS, NestJS

Database MongoDB

Libraries PrimeFlex, Angular Material.

Plugins Remix, Icon8, Google Fonts.

3.5 GANTT CHART:

3.6 PERT CHART:

18
 ATTENDANCE WEB-APP

CHAPTER 4: SYSTEM DESIGN

4.1 Conceptual Models

a. ACTIVITY Diagram:
Activity diagrams are graphical representations of workflows of stepwise activities and
actions with supports for choice, iteration and concurrency. In the Unified Modeling
language, activity diagrams are intended to model both computational and organizational
processes as well as the data flows intersecting with the related activities. Although activity
diagrams primarily show the overall flow of control.

b. Class Diagram:
Class diagram is a static diagram. It represents the static view of an application. Class
diagram is not only for visualizing, describing, and documenting different aspects of a
system but also for constructing executable code of the software application. Class diagram
describes the attribution and operations of a class and also the constraints imposed on the
system. The class diagrams are widely used in the modeling of object-oriented systems
because they are the only UML diagrams, which can be mapped directly with object-
oriented languages

19
 ATTENDANCE WEB-APP

c. Use Case:
In the Unified Modeling Language (UML), a use case diagram can summarize the details of
your system’s users (also known as actors) and their interaction with the system. To build
one, you’ll use a set of specialized symbols connectors. An effective use case diagram can
help your team discuss and represent.

20
 ATTENDANCE WEB-APP

d. ER Diagram:
ER Diagram stands for Entity Relationship Diagram, also known as ERD is a diagram that
displays the relationships of entity sets stored in a database. In other words, ER diagrams
helps to explain the logical structure of databases. ER diagrams are created based on the
basic concepts: entities attributes and relationships. ER Diagrams contains different symbols
that use rectangles to represent entities, ovals to define attributes and diamond shapes to
represent relationships.

e. Flowchart:
A flowchart is a picture of the separate steps of a process in sequential order. It is a generic
tool that can be adapted for a wide variety of purpose, and can be used to described various
processes, such as a manufacturing process, an administrative or service process, or a
project plan.

21
 ATTENDANCE WEB-APP

f. Sequence Diagram:
A Sequence diagram shows an interaction arranged in time sequence. In particular, it shows
the objects participating in the interaction by their “Lifelines”, and the messages that they
exchange arranged in time sequence. It does not show the associations among the objects. It
represents an Interaction, which is a set of messages exchanged among objects within a
collaboration to affect a desired operation or result

4.2 Basic Modules

a. Registration
 The registration of department will be generated by admin
 The registration of CR & Visiting faculty will be generated by department
 The student’s registration will be based on their uploaded lists
b. Login and verification
 The login will be the basic username and password method
 While the registration will be generated with respective administrator, then will
provided with a username and password to department, CR and visiting faculties to
login
 Students login will be done based on their roll numbers.
c. Users
 Admin
 Admin has the control of overall courses in the institute.
 Department (Faculty)
 Department has the control of their specific course in the institute.
 Visiting Faculty
 Visiting Faculty has the control restricted to their subjects only.
 CR
 CR has the control of their respective class only
22
 ATTENDANCE WEB-APP

 Students
 Students will have the control of their own view only.
d. Dashboards
 Different users will be provided with different levels of information as per their
authorization.
e. Manage Users
 The facility to assign or remove staffs or visiting faculties or CRs
f. Manage Students
 Upload, Modify and Discard Student lists.
g. Manage Attendance
 Management of all attendance systems such as marking, reviewing, or modification
of data.
h. Chatbot
 The Facility to perform complex and timely tasks in a convenient way with minimal
commands.

4.3 Design Patterns

we identified categories of design patterns used in the development of complex software solution,
namely:

1. Software design patterns, which constitute the optimal solutions employed by skilled object-
oriented developers to general issues that software developers face during developments
process.
2. Convenient design patterns that have proven valuable for constructing scalable, dependable
and secure applications.

4.4 Database
MongoDB is built on a scale-out architecture that has become popular with developers of all
kinds for developing scalable applications with evolving data schemas. As a document database,
MongoDB makes it easy for developers to store structured or unstructured data. It uses a JSON-like
format to store documents.

4.5 Data Structure

- A data structure is a storage that is used to store and organize data. It is a way of arranging
data on a computer so that it can be accessed and updated efficiently.
- A data structure is not only used for organizing the data. It is also used for processing,
retrieving, and storing data.
- There are different basic and advanced types of data structures that are used in almost every
program or software system that has been developed. So, we must have good knowledge
about data structures.
 Registration

DATA ITEM DATA TYPE DATA CONSTRAINT DESCRIPTION

23
 ATTENDANCE WEB-APP

UserID: - Int Not Null User unique id.

(maxlength == 10) (Primary Key)

Username: - Varchar Not Null Username of user

(maxlength == 20)

Email: - Varchar Not Null Email id of user

Password: - Varchar Not Null Login Password user

(maxlength == 15) (check)

 Login

DATA ITEM DATA TYPE DATA CONSTRAINT DESCRIPTION

UserID:- Int Not Null User unique id.

(maxlength == 10) (Primary Key)

Password: - Varchar Not Null Login Password user

(maxlength == 15) (check)

Test Case:
- Test Cases are frequently are pre-defined series of instructions addressing the processes to be
done in order to assess if the end output reflects the anticipated outcome.
- Predefined sets of inputs, conditions, and end results may be included in these instructions.
However, in order to complete one’s testing, one may wind up having an excessive number
of test cases.
- To prevent such problems, one should identify the appropriate test cases design approach for
their needs in order to cut the number of test cases significantly.

Test Case Description

Test Case No

Test 1: - Check when a user enters valid Id pop up login success!

Another is showing Please enter a valid UserId.

Test 2: - Check when a user enters valid Name pop up login success!
Another is showing Please enter a valid username

Test 3: - Check when a user enters valid email pop up login success!
Another is showing Please enter a valid email.

Test 4: - Check when a user enters valid Password pop up login success!
Another is showing Please enter a valid password.

24
 ATTENDANCE WEB-APP

4.6 Security Issues

- Web application security is crucial to protecting data, customers, and organizations from
data theft, interruptions in business continuity, or other harmful results of cybercrime.
- As it seemed that online attendance too can manipulated or being tampered due to validation
issues, and low level of technology knowledge.
- API which is responsible for data binding is secured with JWT (JavaScript Web Tokens).
- JWT tokens will be introduced in order to maintain the security and uniqueness of sessions.
- As Discussed in GANTT CHART, we have a module called Authentication. According to
that chart all the validations and verification part will be done at the end of backend, during
database phase alongside.

4.7 Design Test

- After the specific aspects of each test were selected, acceptable limits were determined from
the researched materials. Test procedures were created and revised. Data sheets were created
to record the result of the tests.
- Good data sheets are vital to an effective procedure, as they guide the test technician
through the process of properly executing the procedure.
- For each procedure the steps were determined with the specific results expected and safety
of the technician in mind. After the procedure and to discover any error or areas for
improvement.

4.8 Testing
- Frontend: AngularJS unit testing has some fundamentals that help developers run a unit test for
their code. They must follow the below practices that every developer must follow while running
the unit testing. Let us discuss each one of them in detail.
o Karma: Karma is one of the best working test runners available for JavaScript
users. This software tests the unit cases while working on an AngularJS unit,
testing examples and applications. It is a productive tool that increases the
performance of the developers by providing quick results.
o Jasmine: It is a testing framework with many benefits. Jasmine is a self-sufficient
framework and does not require other frameworks or DOM for its processing.

- Backend:
o Automated testing is considered an essential part of any serious software
development effort. Automation makes it easy to repeat individual tests or test suites
quickly and easily during development.

25
 ATTENDANCE WEB-APP

o This helps ensure that releases meet quality and performance goals. Automation
helps increase coverage and provides a faster feedback loop to developers.
o Automation both increases the productivity of individual developers and ensures that
tests are run at critical development lifecycle junctures, such as source code control
check-in, feature integration, and version release.
 provides default tooling (such as a test runner that builds an isolated
module/application loader)
 provides integration with Jest and Supertest out-of-the-box, while remaining
agnostic to testing tools
 makes the Nest dependency injection system available in the testing
environment for easily mocking components
- $ npm i --save-dev @nestjs/testing

4.9 WIREFRAME
The designs you received are called wireframes (sometimes called wires, mockups, or mocks). A
wireframe is a schematic, a blueprint, useful to help you and your programmers and designers think and
communicate about the structure of the software or website you're building.

The same screen can be built in a lot of different ways, but only a few of them will get your message
across correctly and result in an easy-to-use software or website. Nailing down a good interface structure is
possibly the most important part of designing software.

a. Startup page

b. Login

26
 ATTENDANCE WEB-APP

c. Dashboard demo

d. Chatbot

27