A SUMMER PROJECT REPORT ON

WEB DEVELOPMENT

Submitted in partial fulfillment of the

requirements for the award of the degree of

BACHELOR OF COMPUTER
APPLICATIONS
to

Guru Gobind Singh Indraprastha University, New

Delhi

Under the Guidance Submitted

of Dr. Surabhi by Sherodhi
Shankar Assistant Sharma
Professor BCA-V Sem
CS & IT 0372400202
0

Session 2022 – 2023

TRINITY INSTITUTE OF PROFESSIONAL
STUDIES
(Affiliated to Guru Gobind Singh Indraprastha
University, Delhi) Ranked “A+” Institution by

1
SFRC, Govt. of NCT of India Recognized under
section 2(f) of the UGC Act, 1956
NAAC Accredited “B++” Grade Institution

2
 To Whom It May Concern

I Sherodhi Sharma, Enrolment No. 03724002020 from BCA-V Sem of the Trinity Institute of
Professional Studies, Delhi hereby declare that the Summer Project/Training Report entitled
Web Development at Udemy is an original work and the same has not been submitted to any
other Institute for the award of any other degree.

Date: Signature of
the Student

Certified that the Summer Project Report submitted in partial fulfillment of Bachelor of
Computer Applications (BCA) to be awarded by G.G.S.I.P. University, Delhi by Sherodhi
Sharma, Enrolment No. 03724002020 has been completed under my guidance and is
Satisfactory.

Date: Signature of the Guide:

Name of the Guide:
Designation:

3
 CONTENTS

S No Topic Page No

1. Certificate (s) 4

2. Acknowledgements 5

3. List of Tables 6

4. List of Figures 6

5. List of Abbreviations 6

6. About Udemy 7-8

7. Chapter-1: Introduction 9-11

8. Chapter-2: Systems Requirement Analysis 12-21

9. Chapter-3: Systems Feasibility Study 22-23

10. Chapter-4: Systems Design 24-27

11. Chapter-5: Systems Development (Coding) 28-44

12. Chapter-6: Systems Implementation (Screen shots) 45-47

13. Chapter-7: Systems Testing 48-51

14. Chapter-8: Future Scope 51-53

15. References 54

4
5
 ACKNOWLEDGEMENT

With candor and pleasure, I take this opportunity to thank the Almighty and express my
sincere thanks and obligation to all the faculty members of CS&IT Department and my
instructor Mr. Andrei Neagoie from Udemy who never hesitated to help me from time to time
during the project. It is because of their able and mature guidance and co-operation without
which it would not have been possible for me to complete this project.

Finally, I gratefully acknowledge the support, encouragement & patience of my family and
friends.

Thank You!

6
LIST OF TABLES

Table No Title Page No

LIST OF FIGURES

Figure No Title Page No

1 DFD Level-0 10
2 DFD Level-1 14
3 ERD 15

LIST OF ABBREVIATIONS

S No Abbreviated Name Full name

1 Inst. Instructions
2 SSE Sustainable Software Engineering
3 GPU Graphics Processing Unit
4 ARM Advanced RISC Machine
5 UI User Interface
6 UX User Experience
7 GDSE Game Development Software
Engineering
8 API Application Programming Interface

7
 ABOUT UDEMY

Udemy, Inc. is a global destination for teaching and learning online. It was founded in May
2010 by Eren Bali, Gagan Biyani, and Oktay Caglar.

As of November 2022, the platform has more than 57 million students, 213,000 courses, and
74,000 instructors teaching courses in over 75 languages. There have been over 773 million
course enrollments.[3]

Students take courses primarily to improve job-related skills. Some courses generate credit
toward technical certification. Udemy has made a special effort to attract corporate trainers
seeking to create coursework for employees of their company.

The headquarters of Udemy is located in San Francisco, US, with hubs in Denver,

US; Dublin, Ireland; Ankara, Turkey; Sao Paulo, Brazil; and Gurugram, India.

Udemy has not yet generated a profit as is common among high-growth startups who invest
heavily in their own growth.[22] Udemy reported net losses of $69.7 million for 2019 and
$77.6 million in net losses for 2020. By June 30, 2021, Udemy had an accumulated deficit of
$407.9 million. In 2020, Udemy spent $192.6 million on marketing and advertising.

Udemy is a platform that allows instructors to build online courses on their preferred topics.
Using Udemy's course development tools, instructors can upload videos, source code for
developers, PowerPoint presentations, PDFs, audio, ZIP files and any other content that
learners might find helpful. Instructors can also engage and interact with users via online
discussion boards.

Courses are offered across a wide breadth of categories, including business

and entrepreneurship, academics, the arts, health and fitness, language, music, and

8
technology. Most classes are in practical subjects such as AWS and Azure
training, Excel software or using an iPhone camera. Udemy also offers Udemy Business
(formerly Udemy for Business), enabling businesses access to a targeted suite of over 7,000
training courses on topics from digital marketing tactics to office
productivity, design, management, programming, and more. With Udemy Business,
organizations can also create custom learning portals for corporate training. For smaller
companies, Udemy offers a Udemy Team Plan that is a limited seat license but identical
content to that of Udemy Business.

Courses on Udemy can be paid or free, depending on the instructor. In 2015, the top 10
instructors made more than $17 million in total revenue.

In April 2013, Udemy offered an app for Apple iOS, allowing students to take classes

directly from iPhones; The Android version was launched in January 2014. As of January
2014, the iOS app had been downloaded over 1 million times, and 20 percent of Udemy users
access their courses via mobile. In July 2016, Udemy expanded their iOS platform to
include Apple TV. On January 11, 2020, the Udemy mobile app became the #1 top grossing
Android app in India.

Udemy is sometimes seen as part of the MOOC movement available outside the traditional

university system, providing an option for students who want to delve into complicated
university level courses while studying on their own time.

Udemy has been mentioned in The New York Times, The China Post, Fast Company,
the BBC, YPN and TechCrunch, with Mashable noting "Udemy offers an experience that
rivals the real classroom, and should prove to be a useful utility for teachers and students of
all subject matters."

In 2014, Forbes named Udemy co-founder Eren Bali as part of their "30 Under 30" of "the
brightest stars in 15 different fields under the age of 30."

In 2020, Udemy Ranked on the Annual 'Change the World' List by Fortune Magazine.

Udemy has been recognized in 2019, 2020, 2021, and 2022 as Bay Area Best Place to Work.
[45]

9
 CHAPTER 1: INTRODUCTION

1.1 PURPOSE

Building and maintaining a high-quality, user-friendly website often involves a significant

investment of time and money, but in our case it just takes our time and skill to produce it as
we’re not launching it into a running business, thus we don’t have to maintain it. The primary
purpose always differs from website to website. We should always be clear about the big
picture of what we are building and then we should have clarity about our target audience,
conversion actions, goals, and measurements for our website. Some websites are simply used
to present, share, or display some information or content online with attractive and breath-
taking graphics, just like a portfolio website which represents a person’s qualifications,
interests, achievements and more on their personal ground. The website I made in this
learning is quite similar to that, it serves a specific purpose which is to build a real-life
machine learning face detection app known as Smart Brain with the help of HTML, CSS,
JavaScript, React, NodeJS, ExpressJS, and PostgreSQL and deploy it live to production for
the world to see and use it.

1.2 SCOPE

Nowadays most of the people are thinking over the idea of setting their websites and they
come to this decision from different ways reaching to different destinations. The most
popular reasons that make people work over their websites either by themselves or hiring
professionals for that job, and in some cases applying both of the mentioned options is to
reach a greater audience apart from just the local people engaging with their business or for
students like us who just wants to stand out of the crowd and show-off their skills by making
an interactive website.
Scope of this website is basically to detect a face from an image which contains front-end
using react, image recognition API, has its own server using node and express and finally
contains a database as well.

10
1.3 OBJECTIVE

The main objective of this project is to analyse or detect a human’s face from any image
provided by them. First the user have to sign up on the website which is being stored in our
database and then he/she can use the face detection system provided on the page after signing
up.

1.4 INSTRUCTOR OVERVIEW

Mr. Andrei Neagoie (Founder of zeromastery.io) –

Andrei is the instructor of some of the highest rated programming and technical courses
online. He is now the founder of ZTM Academy which is one of the fastest growing
education platforms in the world. ZTM Academy is known for having some of the best
instructors and success rates for students. His graduates have moved on to work for some
of the biggest tech companies around the world like Apple, Google, Tesla, Amazon, JP
Morgan, IBM, UNIQLO etc... He has been working as a senior software developer in Silicon
Valley and Toronto for many years, and is now taking all that he has learned, to
teach programming skills and to help you discover the amazing career opportunities that
being a developer allows in life. 
Having been a self-taught programmer, he understands that there is an overwhelming number
of online courses, tutorials and books that are overly verbose and inadequate at teaching
proper skills. Most people feel paralyzed and don't know where to start when learning a
complex subject matter, or even worse, most people don't have $20,000 to spend on a coding
boot camp. Programming skills should be affordable and open to all. An education
material should teach real life skills that are current and they should not waste a

11
student's valuable time.  Having learned important lessons from working for Fortune 500
companies, tech startups, to even founding his own business, he is now dedicating 100% of
his time to teaching others valuable software development skills in order to take control of
their life and work in an exciting industry with infinite possibilities. 
Andrei promises you that there are no other courses out there as comprehensive and as well
explained. He believes that in order to learn anything of value, you need to start with the
foundation and develop the roots of the tree. Only from there will you be able to learn
concepts and specific skills (leaves) that connect to the foundation. Learning becomes
exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you
on an understanding of complex subjects that you never thought would be possible.  

1.4.1 INSTRUCTOR DETAILS

NAME: Mr. Andrei Neagoie

UDEMY PROFILE: https://www.udemy.com/user/andrei-neagoie/

WEBSITE: https://zerotomastery.io/

TWITTER: https://twitter.com/andreineagoie

12
 CHAPTER 2: SYSTEM REQUIREMENT ANALYSIS

2.1 INTRODUCTION

The purpose of the system requirements analysis is to structure the system independent of any
implementation environment. This phase can determine system behavior and limitations. The
system requirements analysis activity represents the second major development phase of the
overall process.

2.2 SOFTWARE REQUIREMENT SPECIFIACTION

The Software Requirements Specification is produced at the culmination of the

analysis task. The function and performance allocated to software as part of system
engineering are refined by establishing a complete information description, a
detailed functional and behavioral description, an indication of performance
requirements and design constraints, appropriate validation criteria, and other data
pertinent to requirements.

The goal of the requirement analysis and specification phase is to clearly

understand the customer requirements and to systematically organize the
requirements into a specification document. The main activities carried out during
requirements analysis and specification phase are of two types as follows:
Requirements gathering and analysis Requirements Specification The main
purpose of the requirements analysis activity is to analyze the collected
information to obtain a clear understanding of the product to be developed, with a
view to removing all ambiguities, incompleteness, and inconsistencies from the
initial customer perception of the problem. The SRS document is the final
outcome of the requirements analysis and specification phase. There are 3 main
types of problems in the requirements that the analyst needs to identify and
resolve: Ambiguity Inconsistency Incompleteness. Other steps are discussed
accordingly.

13
System Requirements:

The successful running of any project primarily depends upon hardware and
software used in its compilation. The hardware used in the machine should be such
that it supports the software that is to be mounted for assembling the project. This
project deals with the hardware and software, which is available readily and easy
on each and every machine given to the user.

2.2.1 FUNCTIONAL REQUIREMENTS:

1. The system requires the admin to sign in and register themselves first.
2. Once they have registered they need to find the image of which they want to
detect their face.
3. After finding the image they need to copy the URL of the image and paste it
on the textbox provided.
4. After copying the image into textbox click “detect”.
5. And the website will detect the face in the image for you.

2.2.2 NON-FUNCTIONAL REQUIREMENTS:

PERFORMANCE REQUIREMENTS

●The system needs to be reliable

●If unable to process the request, then an appropriate error message will be
presented.
● Windows are loaded within few seconds

SECURITY REQUIREMENTS

●The user dashboard and admin dashboard are completely secured.

●Without logging in the admin and user will be redirected to the login page and
they cannot access or modify any information without logging in.
●The details of the users are completely secured.
● Modifications can be done only when the user/admin is logged in.

14
SAFETY REQUIREMENTS

● The details need to be maintained properly

● Users must be authenticated

2.3 TOOLS AND TECHNOLOGIES

The following tools and technologies have been used in development of this
project:

2.3.1 DEVELOPMENT LANGUAGE

2.3.1.1 HTML5:

Hypertext Markup Language (HTML) is the standard markup language for

documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages such as
JavaScript.

Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the
structure of a web page semantically and originally included cues for the
appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs,
images and other objects such as interactive forms may be embedded into the
rendered page. HTML provides a means to create structured documents by
denoting structural semantics for text such as headings, paragraphs, lists, links,
quotes and other items. HTML elements are delineated by tags, written using angle
brackets.
Tags such as <img /> and <input /> directly introduce content into the page. Other
tags such as <p> surround and provide information about document text and may

15
include other tags as sub-elements. Browsers do not display the HTML tags but
use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript,

which affects the behavior and content of web pages. Inclusion of CSS defines the
look and layout of content. The World Wide Web Consortium (W3C), former

maintainer of the HTML and current maintainer of the CSS standards, has
encouraged the use of CSS over explicit presentational HTML since 1997.

2.3.1.2 CSS3:

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. CSS is a
cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including

layout, colors, and fonts. 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 possible to present the same
markup page in different styles for different rendering methods, such as on-screen,
in print, by 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.

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.

16
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.

In addition to HTML, other markup languages support the use of CSS including
XHTML, plain XML, SVG, and XUL.

2.3.1.3 JAVASCRIPT:

JavaScript, often abbreviated as JS, is a programming language that conforms to

the ECMAScript specification. 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. JavaScript enables interactive web pages and is an essential part
of web applications. The vast majority of websites use it for client-side page
behavior, 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.

17
 2.3.1.4 NODE JS:

Node.js is an open-source, cross-platform, back-end, JavaScript runtime

environment that executes JavaScript code outside a web browser. Node.js lets
developers use JavaScript to write command line tools and for server-side scripting
—running scripts server-side to produce dynamic web page content before the
page is sent to the user's web browser. Consequently, Node.js represents a
"JavaScript everywhere" paradigm, unifying web-application development around
a single programming language, rather than different languages for server-side and
client-side scripts.

Though .js is the standard filename extension for JavaScript code, the name
"Node.js" doesn't refer to a particular file in this context and is merely the name of
the product. Node.js has an event-driven architecture capable of asynchronous I/O.
These design choices aim to optimize throughput and scalability in web
applications with many input/output operations, as well as for real-time Web
applications (e.g., real-time communication programs and browser games).

The Node.js distributed development project was previously governed by the

Node.js Foundation, and has now merged with the JS Foundation to form the
OpenJS Foundation, which is facilitated by the Linux Foundation's Collaborative
Projects program.

2.3.1.5 EXPRESS.JS

Express.js, or simply Express, is a back end web application framework for

building RESTful APIs with Node.js, released as free and open-source software under
the MIT License. It is designed for building web applications and APIs.[3] It has been called
the de facto standard server framework for Node.js.[4]

The original author, TJ Holowaychuk, described it as a Sinatra-inspired server,[5] meaning

that it is relatively minimal with many features available as plugins. Express is the back-end

18
component of popular development stacks like the MEAN, MERN or MEVN stack, together
with the MongoDB database software and a JavaScript front-end framework or library.

Express.js was founded by TJ Holowaychuk. The first release, according to

Express.js's GitHub repository, was on 22 May 2010. Version 0.12

In June 2014, rights to manage the project were acquired by StrongLoop.[7] StrongLoop was
acquired by IBM in September 2015;[8] in January 2016, IBM announced that it would place
Express.js under the stewardship of the Node.js Foundation incubator.

Express.js is used by Fox Sports, PayPal, Uber and IBM.

2.3.2 DEVELOPMENT PLATFORM

2.3.2.1 SUBLIME TEXT

Sublime Text is a shareware cross-platform source code editor. It natively supports

many programming languages and markup languages. Users can expand its
functionality with plugins, typically community-built and maintained under free-
software licenses. To facilitate plugins, Sublime Text features a Python API.

The following is a list of features of Sublime Text:

 "Goto Anything", quick navigation to project files, symbols, or lines

 "Command palette" uses adaptive matching for quick keyboard invocation of arbitrary
commands
 Simultaneous editing: simultaneously make the same interactive changes to multiple
selected areas
 Python-based plugin API
 Project-specific preferences
 Extensive customizability via JSON settings files, including project-specific and
platform-specific settings
 Cross-platform (Windows, macOS, and Linux) and Supportive Plugins for cross-platform

19
 Compatible with many language grammars from TextMate Auto-save, which attempts to
prevent users from losing their work
 Customizable key assignments, a navigational tool which allows users to assign hotkeys
to their choice of options in both the menus and the toolbar
 Find as you type, begins to look for the text being entered as the user types without
requiring a separate dialog box
 Spell-check function corrects as you type
 Macros
 Repeat the last action
 A wide selection of editing commands, including indenting and unindenting, paragraph
reformatting and line joining

PACKAGE MANAGER

Package Control is an open source third-party package manager for Sublime Text which
allows the user to find, install, upgrade and remove plug-ins, usually without restarting
Sublime Text. The package manager keeps installed packages up-to-date with an auto-
upgrade feature and downloads packages from GitHub, BitBucket and a custom JSON-
encoded channel/repository system. It also handles updating packages cloned from GitHub
and BitBucket via Git and Hg, as well as providing commands for enabling and disabling
packages. The package manager also includes a command to bundle any package directory
into a .sublime-package file.[19]

Notable third-party packages include:

 LSP - Support for the Language Server Protocol

 Bracket Highlighter – Enhances the basic highlights Sublime Text provides for bracket
pairs
 SublimeLinter – Code linting (validation) for JavaScript, Perl, PHP, Python, Ruby, and
others
 Sidebar Enhancements – Enhancements to the Sublime Text sidebar with new options for
deleting, opening, moving, creating, editing, and finding files
 WordPress – Adds autocompletion and Snippets for the blogging platform WordPress

2.3.3 DATABASE

20
 2.3.3.1 POSTGRESQL

PostgreSQL also known as Postgres, is a free and open-source relational database

management system (RDBMS) emphasizing extensibility and SQL compliance. It was
originally named POSTGRES, referring to its origins as a successor to the Ingres database
developed at the University of California, Berkeley. In 1996, the project was renamed to
PostgreSQL to reflect its support for SQL. After a review in 2007, the development team
decided to keep the name PostgreSQL and the alias Postgres.

PostgreSQL features transactions with Atomicity, Consistency, Isolation, Durability (ACID)

properties, automatically updatable views, materialized views, triggers, foreign keys,
and stored procedures. It is designed to handle a range of workloads, from single machines
to data warehouses or Web services with many concurrent users. It is the default database
for macOS Server and is also available for Windows, Linux, FreeBSD, and OpenBSD.

PostgreSQL manages concurrency through multiversion concurrency control (MVCC), which

gives each transaction a "snapshot" of the database, allowing changes to be made without
affecting other transactions. This largely eliminates the need for read locks, and ensures the
database maintains ACID principles. PostgreSQL offers three levels of transaction isolation:
Read Committed, Repeatable Read and Serializable. Because PostgreSQL is immune to dirty
reads, requesting a Read Uncommitted transaction isolation level provides read committed
instead. PostgreSQL supports full serializability via the serializable snapshot isolation (SSI)
method

2.4 HARDWARE REQUIREMENTS

The following hardware requirements are recommended to be fulfilled in order to

run this website:

21
1. CPU: Intel core i3 3rd Generation
2. RAM: 2 GB
3. GPU: Integrated Graphics
4. Storage: 1GB

2.5 SOFTWARE REQUIREMENTS

The following software requirements are recommended to be fulfilled in order to

run this website:

1. OS: Microsoft Windows/Linux

2. Browser: Chrome/Firefox/Opera/Safari
3. Programming Language: NodeJs

CHAPTER 3: SYSTEM FEASABILITY STUDY

3.1 FEASABILITY STUDY

Feasibility studies aim to objectively and rationally uncover the strengths and

22
weaknesses of an existing business or proposed venture, opportunities and threats
as presented by the environment, the resources required to carry through, and
ultimately the prospects for success. In its simplest terms, the two criteria to judge
feasibility are cost required and value to be attained.

Feasibility study begins once the goals are defined. It starts by generating board
possible solutions, which are possible to give an indication of what the new system
should look like. That is where creativity and imagination are used. Analysts must
think up new ways of doing things generating new ideas. There is no need to go
into the detailed system operation yet. The solution should provide enough
information to make reasonable estimates about project cost and give users an
indication of how the new system will fit into the organization. Feasibility of a new
system means ensuring that the new system, which we’re going to implement is
efficient and affordable. There are various types of feasibility that should be taken
into consideration:

3.1.1 ECONOMICAL FEASIBILITY:

Development of this application is highly economically feasible. The only thing to
be done is making an environment with effective supervision. It is time effective in
the sense that it will eliminate the paperwork completely. The system that is being
developed is also cost effective.

3.1.2 TECHNICAL FEASIBILITY:

The technical requirement for the system is economic and it doesn’t use any other
hardware or software. Technical evaluation must also assess whether the Existing
System can be upgraded to use the new technology and whether the organization
has the expertise to use it. Install all the upgrades frameworks into the Python
IDLE package supported Linux based application.
3.1.3 OPERATIONAL FEASIBILITY:
The system working is quite easy to use and learn due to its simple but attractive
interface. Users require no prerequisites for operating the product. Technical
performance includes issues such as determining whether the system can sense the
proper click of the mouse or after sensing the click it places the symbol in the
desired cell and whether the system is organized in such a way that it always

23
displays the correct result according to the moves made by the players.

3.1.4 LEGAL FEASIBILITY:

Determines whether the proposed system conflicts with legal requirements e.g. a
data processing system must comply with the local Data Protection Acts. Although
the payment system we have included is not legally approved by the government it
is only for the demonstration purpose and will be replaced with the local payment
methods and necessary API’s.

3.1.5 SCHEDULE FEASIBILITY:

A project will fail if it takes too long to be completed before it is useful. Typically,
this means estimating how long the system will take to develop, and if it can be
completed in a given time period using some methods like payback period.
Schedule feasibility is a measure of how reasonable the project timetable is.

CHAPTER 4: SYSTEM DESIGN

4.1 INTRODUCTION

System design is the process of designing the elements of a system such as the
architecture, modules and components, the different interfaces of those

24
components and the data that goes through that system.
System Analysis is the process that decomposes a system into its component
pieces for the purpose of defining how well those components interact to
accomplish the set requirements.
The purpose of the System Design process is to provide sufficient detailed
data and information about the system and its system elements to enable the
implementation consistent with architectural entities as defined in models
and views of the system architecture.

The Primary modules (different functions) are:

● User Registration

● Admin/User Login

● Face Detection Page

4.2 DATA FLOW DIAGRAM

Data-flow diagrams (DFDs) model a perspective of the system that is most

readily understood by users: the flow of information through the system and the
activities that process this information. Data-flow diagrams provide a graphical
representation of the system that aims to be accessible to computer specialist and
non-specialist users alike. The models enable software engineers, customers and
users to work together effectively during the analysis and specification of
requirements. Although, this means that our customers are required to understand
the modeling techniques and constructs, in data- flow modeling only a limited set
of constructs are used, and the rules applied are designed to be simple and easy to
follow. These same rules and constructs apply to all data-flow diagrams (i.e., for
each of the different software process activities in which DFDs can be used).
There are three main types of data-flow diagram:

Context diagrams: context diagram DFDs are diagrams that present an overview
of the system and its interaction with the rest of the “world”.

25
 Level 1 data-flow diagrams: Level 1 DFDs present a more detailed view of the
system than context diagrams, by showing the main sub-processes and stores of
data that make up the system as a whole.

Level 2 (and lower) data-flow diagrams: a major advantage of the data-flow

modelling technique is that, through a technique called “levelling”, the detailed
complexity of real world systems can be managed and modeled in a hierarchy
of abstractions.

4.3 ENTITY RELATIONSHIP DIAGRAM

An ER diagram shows the relationship among entity sets. An entity set is a group
of similar entities and these entities can have attributes. In terms of DBMS, an
entity is a table of attributes of a table in a database, so by showing relationships
among tables and their attributes. ER diagram shows the complete logical structure
of a database.

Flow Charts Components:

1. Entity: Rectangle: An entity is an object or component of data. An entity is

represented as a rectangle in an ER diagram.
2. Key Attribute: Oval: An attribute describes the property on an entity.
An attribute is represented as Oval in an ER diagram.
3. Decision: Diamond: A relationship is represented by diamond shape in
ER diagram. It shows the relationship among entities.
4. Flow line: Arrow: Direction of relational flow between objects.

4.4.1 DFD LEVEL - 0

26
4.4.2 DFD LEVEL – 1

4.5 Entity Relationship Diagram

27
28
29
 CHAPTER 5: SYSTEM DEVELOPMENT

5.1 FRONT-END (USER PANEL)

NAVIGATION BAR

30
LOGO

31
IMAGE LINK FORM

32
RANK

33
IMAGE RECOGNITION API (Used for face detection box and back-end as well)

34
35
36
37
SIGN IN FORM

38
39
REGISTRATION FORM

40
41
5.2 BACK-END (SERVER)

SETTING UP OUR SERVER

42
SETTING UP WITH THE SERVER

43
44
5.3 DATABASE (USER)

45
46
47
 CHAPTER 6: SYSTEM IMPLEMENTATION

6.1 INTRODUCTION

System Implementation uses the structure created during architectural design and the results
of system analysis to construct system elements that meet the stakeholder requirements and
system requirements developed in the early life cycle phases. These system elements are then
integrated to form intermediate aggregates and finally the complete system-of-interest (SoI).

6.1.1 WEBSITE TESTING

48
49
50
 CHAPTER 7: SYSTEM TESTING

7.1 SYSTEM TESTING

System Testing is a type of software testing that is performed on a complete

integrated system to evaluate the compliance of the system with the corresponding
requirements.

In system testing, integration testing passed components are taken as input. The
goal of integration testing is to detect any irregularity between the units that are
integrated together. System testing detects defects within both the integrated units
and the whole system. The result of system testing is the observed behavior of a
component or a system when it is tested.

System Testing is carried out on the whole system in the context of either system
requirement specifications or functional requirement specifications or in the
context of both. System testing tests the design and behavior of the system and
the expectations of the customer. It is performed to test the system beyond the
bounds mentioned in the software requirements specification (SRS).

System Testing is basically performed by a testing team that is independent

of the development team that helps to test the quality of the system
impartial. It has both functional and non-functional testing.

51
7.2 TESTING OF SIGN UP PAGE

7.3 TESTING OF REGISTRATION PAGE

52
7.4 TESTING OF PROFILES

53
54
 CHAPTER 8: CONCLUSION AND FUTURE SCOPE

8.1 CONCLUSION

The main objective of the application is to help Computer Science students

understands the basics of Java, JavaScript and HTML. Recognizing the proper
id of a person was not possible due to the high pool of persons and data
connected to it. The following results have been achieved after completing the
system and relate back to the system’s objective.

1. Should allow Computer Science students to browse through the code

and application. This can be achieved when students are able to run
and install the application. When they run the application, they can
browse through the implementation of different objects.

2. The user can register themselves through the “Sign In” space and
can “login” again through the Login page.

3. Should allow users to put the URL of any image of humans and the
app will detect the face in the image provided by the user.

4. Detecting faces from an image is the main purpose of this

application.

5. The user can always Sign Out from the application by clicking on
the “Sign Out”

8.2 FUTURE SCOPE

This project aimed at developing an application that could detect faces in an image
provided by the user. It helps you detect whether a person is present in an image or
not. This project covered a lot of useful and informative technologies that’ll be
useful to me in my future as a developer. The project covered everything from basic

55
HTML and CSS to Advanced JavaScript, React, NodeJS, ExpressJS, PostgreSQL
and many more. The project holds very bright scope in the future as it helps you in
identifying people’s face.

56
 REFERENCES

1. https://nodejs.org/docs/latest-v13.x/api/
2. https://www.w3schools.com/html/default.asp
3. https://www.w3schools.com/css/default.asp
4. https://www.w3schools.com/bootstrap/bootstrap_ver.asp
5. https://www.w3schools.com/icons/default.asp
6. https://www.w3schools.com/graphics/default.asp
7. https://www.w3schools.com/js/default.asp
8. https://www.w3schools.com/js/js_json_intro.asp
9. https://www.w3schools.com/js/js_ajax_intro.asp
10. https://docs.mongodb.com/manual/
11. https://www.geeksforgeeks.org/javascript-tutorial/
12. https://www.geeksforgeeks.org/css-tutorials/
13. https://www.geeksforgeeks.org/html-tutorials/
14. https://developer.mozilla.org/en-US/docs/Web/JavaScript
15. https://developer.mozilla.org/en-US/docs/Web/CSS

57
58