SALON-POINT OF SALE

PROJECT REPORT
Submitted by

SIVA SHANKARAN V

REG NO: 2013143037041

Under the guidance of

Asst. Prof. Ms. K. JAYABHARATHI., M.Sc., M.Phil., SET.

The partial fulfillment of the requirement for the award of the degree of
Master of Computer Applications (MCA)

DEPARTMENT OF MASTER OF COMPUTER

APPLICATIONS

GURU NANAK COLLEGE (Autonomous)

(Affiliated to University of Madras)
Guru Nanak Salai, Velachery, Chennai - 600 042.

June – 2022
 DEPARTMENT OF MASTER OF COMPUTER APPLICATIONS

GURU NANAK COLLEGE (Autonomous)

(Affiliated to University of Madras)
Guru Nanak Salai, Velachery, Chennai - 600 042.

This is to certify that, this is a Bonafide record of work done by SIVA SHANKARAN V
with Register No. 2013143037041 in Main Project work during the Academic Year 2020-2022.

Internal Project Guide Head of the Department

Submitted for the project Viva-voice examination held on _______________at

DEPARTMENT OF MASTER OF COMPUTER APPLICATIONS, GURU NANAK COLLEGE

(Autonomous), Guru Nanak Salai, Velachery, Chennai - 600 042.

Internal Examiner External Examiner

 DECLARATION

I, SIVA SHANKARAN V Reg. No: 2013143037041 final year MCA student,

hereby declare that the Project Report entitled, SALON-POINT OF SALE is the original work
carried out by me under the supervision of Asst. Prof. Ms. K. JAYABHARATHI., M.Sc.,

M.Phil., SET. during the period MAR 2022 to JUN 2022 towards the partial fulfillment of
the requirements of MCA degree at Guru Nanak College (Autonomous).

Place: Chennai Sincerely,

Date:
 DEPARTMENT OF MASTER OF COMPUTER APPLICATIONS

GURU NANAK COLLEGE (Autonomous)

(Affiliated to University of Madras)
Guru Nanak Salai, Velachery, Chennai - 600 042.

CERTIFICATE
This is to certify that the Project work entitled SALON-POINT OF SALE Submitted
in partial fulfillment of the requirements for the award of MCA degree at Guru Nanak College
(Autonomous), is the bonafide record of project work carried out by SIVA SHANKARAN V
is the (2021-2022).

Place: Chennai Internal Guide

Date:
 ACKNOWLEDGEMENT

I thank the Almighty for giving me the confidence and strength for the successful

completion of the Main Project.

I thank our Honourable Principal Dr. M. G. Ragunathan M.Sc., M.Phil., Ph.D., FIAAB,
FZSI, FSLSc, FSAB, FIAES, FICCB, FMSET, FIASN, PGDESD and our Management
for providing a dynamic atmosphere for pursing our course.

I also take this opportunity to express my heartfelt thanks to our Head of Department Mrs.
S. Nirmala Devi MCA, M.Phil., SET for always being a source of inspiration and support.

I express my deep sense of gratitude to my guide Assist. Prof. Ms. K. JAYABHARATHI.,

M.Sc., M.Phil., SET for his guidance support for visualizing the Project.

I respect and thank Mr. Vijay for giving me an opportunity to do the project work in
SALON-POINT OF SALE and providing me all the support and guidance which made me
to complete the project on time.

SIVA SHANKARAN V
 Sub: Project Completion Letter

TO WHOM SO EVER IT MAY CONCERN

1 Introduction Page No
 1.1 Company Profile
1.2 About Project
1.3 Module description
2 System Study and Analysis
2.1 Problem Statement
2.2 Existing System (With Drawbacks)
2.3 Proposed System (With Advantages)
2.4 Feasibility Study
2.4.1 Technical Feasibility
2.4.2 Economic Feasibility
2.4.3 Operational Feasibility
3 Development Environment
3.1 Hardware Requirements
3.2 Software Requirements
3.3 Programming Environment
3.3.1 About Front End Technology
3.3.2 About Back End Technology
4 System Design and Development
4.1 Elements of Design
4.1.1 Process Design
4.1.2 Logical Design
4.1.3 Input Design
4.1.4 Output Design
4.1.5 Database Design
4.2 Table Structure
5 System Testing and Implementation
5.1 System Testing
5.1.1 Unit Testing
5.1.2 Integration Testing
5.1.3 Validation Testing
5.1.4 Output Testing (with live/dummy data)
5.2 System Security
5.3 System Enhancement
6 Conclusion and Future Enhancements
6.1 Conclusion
6.2 Future Enhancements
7 Appendix
7.1 Sample Coding
8 Bibliography and Reference
 SALON-POINT OF SALE

SYNOPSIS

POS is a Simple, flexible and powerful booking software for your administrative
needs. It is a web-based billing management software for salons & spa. It is designed and
developed to make business management efficient and effective. Able to clock in/out the
available online staff who provide the service at the time. Ticket creation with inventory
details and make sure the ticket to be paid as completed. Admin panel is provided the
management portal to add the inventories.

This system will provide the functionalities of manage salons’ details, manage day by day
bookings, manage issuing many reports (employee’s salary report, product report, booking
report etc.), manage service, billing, manage employee details, manage customer details and
manage day to day transactions. This system will help to improve the higher efficiency in the
processes in the salons. It will enable salon staff to add data to the system without bothering
about creating report formats that will increase the efficiency of salon staff. This system will
used unique passwords for employees to access the system. In this case salon’s confidential
data will not be available to the unauthorized access.

The system will provide user friendly simple interface which will help them to make reliable,
quick and effective service to their customers.
 1. INTRODUCTION

1.1Company Profile:
PC WORLD TECHNOLOGIES (PCWT) a leading Web Designing & Web Development
Company from India operating at a high speed with a specialized and qualified team of web
designers, web developers. We provide you the best services with affordable price and will
never let you to pay more than you need, or give less attention than you deserve.

We love and believe "customer satisfaction and support" which is the key for our success and
makes us unique to excel in the vast internet business. With clients globally, PCWT produces
innovative and professional web sites for companies in multiple industries including software
companies, hotel, traders, travels, schools, wholesale, communications and so on. Using the
latest programming technologies and design technologies, PCWT creates the effective online
application which stands unique and makes your business globally recognized.

PCWT is a website designing in Madurai, India. We offer services such as Website Design,
Web Development, E-commerce web solutions, Search Engine Optimization, Database
Development, Website promotion, Banner design, Business card design, Shopping cart
development, Content management system.

PCWT LOGO

1
Our Services

We provide services in creating and Implementing

 Web Development
Web presence is a most important aspect for any business to thrive and get promoted;
having them crafted with an expert is what you will need to see any success with your
web presence. PCWorld Technologies with its expert web developers can help you
acquire a strong and standards compliant web presence that provides best results for
your business desires. We have vast proficiency in a variety of web technologies:
HTML, CSS,Mean Stack, Lamp Stack,NodeJS, AngularJS, Ext JS, PHP, MySQL,
CakePHP, Wordpress, Pligg, Amazon Web Services, Drupal, Magento and Joomla.
PCWorld Technologies has helped worked on 350+ website development projects (as
of December 2014).
 Mobile Development
With billions of mobile handsets in use, it is becoming an obligation for businesses to
have a presence on mobile. PCWT creates modern, stylish and engaging mobile
solutions to help your business reach your users on the go. We can help you develop
intuitive mobile applications for iPhone, and Android platforms and also present web
sites optimized for mobile device form-factors
 Social Networking
PCWorld Technologies has experience in delivering award winning web applications
(web apps) for facebook platform, twitter API, Linkedin API, Pinterest API,
Instragram API, Open Social. We take great pride in offering varied, crafted solutions
for different social networks that can take the web app viral but also more persuasive.
 Graphics studio
Design is a crucial element for the success of a web site or mobile application or a web
app. PCWT together with its team of expert user interface and user experience
engineers, we understand this very well and deliver solutions that are not just unique
in conveying the idea but also incredible to use.

2
Organization Chart

WEBSITE LINK

https://pcwt.in/index.html

FACEBOOK

https://www.facebook.com/pcwtin

PCWT(Embassy). No.901, Anna Nagar, Madurai, Tamil Nadu - 625020, India.

Phone No: +91 9842140000, Mail: info@pcwt.in

3
1.2 ABOUT THE PROJECT

A salon POS is a system that facilitates customers' transactions, stores their

information and sales data. The system can be custom-made to fit the specific needs of a salon
or spa. For salons and spas that want to streamline their services and stay competitive in the
market, having a POS is a great option. With technological advancements, POS systems come
with incredible features such as appointment bookings, staff management, and inventory
control.

As a salon owner, it'll make your work easier, and you'll have ample time to deliver excellent
services to your clients. Manually handling everything can be inefficient, especially in a busy
salon. You can have highly qualified employees use high-quality products and amazing salon
space, but clients will seek services elsewhere if your organization skills are wanting.

Here are some of the benefits the system offers to your business

 Time
 It Creates a Good Image of a Business

 It Is Efficient
 It's Easy to Use
 A POS Allows More Than One Payment Option
 It Is Fast
 It Enables Efficient Employees Management
 It Facilitates Loyalty Programs
 It Gives Accurate Reports.

The system works as follows:

4
  Manage employee details - At the beginning there was only few staff members in
salon. Now, With the increase of staff It hard to keep records without proper system.
To keep employees details there should have module for manage employee. It should
include manage employee attendance too.
 Manage service details - Every salon has offer veracity of services related to beauty
culture. Salon has to maintain a service list with the price and service details. It’s also
help full for salon employees to deal with customers. Especially when creating bill. To
full fill this manage service module will be added to the system.
 Manage bookings by salon - Salon’s customers can directly call to salon and salon
admin should create booking for that customer with specific service and time.
Additionally booking can assign specific employee.
 Manage invoice - Customers had to pay full billed amount when the service received.
In this case the salon front desk should be able to generate bill for customers. And the
payment details for the bill should be recorded in to the system
 Generate reports – POS are most important for owner to get valuable decisions and
prediction in management. Many types of reports are allowed in system. Daily
summary of payment details, summary of booking, monthly summary of them, and
most requested reports types by salon owner, and so on.
 Manage customer details - Their customers are mostly regular basis. So they are
planning to keep historical data to evaluate who got service and product from their
salons. For this they are need to keep customers details against the issued reports
historical data.
 Manage product details - Each day salon expends lot of products and equipment in
their activities. So it should be manage to prevent run out stocks. General reorder
points for those items set into system and system will manage message to indicate
before stock ran out.

The Main purpose of a salon point of sale system is a crucial tool every salon or spa
should have. It eliminates the need for manual handling of most of the tasks, which can result
in costly mistakes. If your salon doesn't have a POS, you're missing out on an efficient and

5
reliable system that could make your work easier. The system can be tailored to suit your
specific needs, And help your business to grow. This is main purpose of this salon-pos.

1.3 MODULE DESCRIPTION

The modules of this project as mainly classified into,

1. Merchants
 Signup
 Merchant List
 General Detail
 Plan Details and Feature – On hold
2. Sales Staff
 Create Staff & List
 Role
 Group
3. POS
 Customer Check In/Out
 Dashboard
 Transaction
 Employee
 Permission
 Inventory
 Tax & Fees
 Category
 Tips
 Discounts
 Campaign
 Customer
 Salary
 Reporting

6
4. Billing Management
 Change Plan
5. Settings
General
 Default Commission
 Tip Payment Period
 Default Tip Split
 Employee Receipt
 Default Discount Division
 Technician Configuration
 Employee Specific Settings
 Printers
6. Technicians
 Create / Open Ticket
 Closed Tickets
 Transactions - Bill payment
 Clock in Clock out
 Report in POS
 Logout
7. Ticket Function
 Cash, Credit / Debit
 Tips
 Discount
 Combine
 Split Service
 Void
 Print
 Close Ticket
 Note

7
1. Merchants Module
In this module, the merchants want to sign up and all the details about the
merchants stored and managed.
2. Sales Staff Module
In this module, the admin want to create staff and list and what role they to do
and group them give and give an separate login details.
3. POS Module
In this module, the admin can manage all the details example customer checking,
transaction, inventory, salary, report etc. the admin and employee can only access
this system.
4. Billing Management Module
In this module, we can change the billing and also we can do edit those billing plan
etc.
5. Setting Module
In this module, in this we can do general settings and defaults commission and
payment method means pay by cash or pay by credit/debit. And technician
configuration and also print those details.
6. Technicians
In this module, the employee are clock in and then create /open ticket for
customer after completed the services we have to do bill payment and it moved to
closed ticket and then employee completed work they have to clock out and we can do
log out in this after logout the application close their page we have login on the next
day.
7. Ticket Function
In this module, the ticket function manage the customer payment cash, credit, debit
And want to discounts we can add in the payment. Void means clearing the process of
payment method and after completing we can print the bill close the ticket

8
 2. SYSTEM STUDY AND ANALYSIS

2.1 PROBLEM DEFINITION

The problem which is being faced with the ongoing salon management process is that
it requires quite a lot of manual and paperwork.

People wait a lot in queue for his/her turn but our website is probably based on reducing that
problem, as the peoples will be able to directly made an appointment through phone call or
walk in salon and manage their appointment according to their convenient.

2.2 EXISTING SYSTEM

In existing system, all the details and the transaction details are managed manually.
So it is very difficult to find and search the specific record or They have been using Microsoft
Word and Excel files to keep their day to day record. They keep records of day to day use
items and equipment in excel files which maintain separate files in each salon. And also each
day they are creating separate word file as summary for daily income. Once owner visit the
salon he collect the files and do calculation to get rough idea about the salon income and
expenses. This method is very in reliable, insufficient and insecure. Even they use computers
and printers they do not have proper system to full fill their needs.

Disadvantages:

The following are the disadvantages of current system.

 Requires large database

 The admin has to manually manage the inventory section in the system like what item
have been used or sold and what items are coming.
 No proper way to manage customers’ appointments.

 No proper plan for restock the salon items and equipment.

 Cannot analysis there historical data to make predictions.

9
  No data backup option.

 Very often these files get attack by computer virus and lost information.

 Anyone can access these files and salon’s confidential details not protect from
unauthorized access.

 Do not have employee details management system.

 Took more time to preparing bill.

2.3 PROPOSED SYSTEM

This system is meant to ease the appointment process for the people. The salon POS is
having a simple yet interactive interface that can be easily used by salons owner. The
customer make a appointment through phone call or visit the salon. The main part of this
project is that this system is one-stop –shop for all beauty services. In this system the salon
and their services are added along with their billing to customer. the admin just need to rise
the ticket in our website and their services according to their choice.

Advantages:

The following are the advantages of proposed system

 As the system is fully automated, it does not require human efforts in calculating bill
and maintain customer's detail.
 Also it maintains records of all the employees along with their salary information so
there would be systematic way of payment.
 Saves efforts and time and it is cost-effective.

2.4 FEASIBILITY STUDY:

A Feasibility study is an analysis used in measuring the ability and likelihood to

complete a project successfully including all relevant factors. It must account for factors that
affect it such as economic, technological, legal and scheduling factors. Project managers use

10
feasibility studies to determine potential positive and negative outcomes of a project before
investing a considerable amount of time and money into it.

A Feasibility Study is an exercise that involves documenting each of the potential

solutions to a particular business problem or opportunity. Feasibility Studies can be
undertaken by any type of business, project or team and they are a critical part of the Project
Life Cycle. There are different aspects in feasibility study, they are:

 Technical Feasibility Study

 Economical Feasibility Study
 Operational Feasibility Study
 Cost Estimation and Scheduling Study

2.4.1 Technical Feasibility Study:

This involves question such as whether the technology needed for the system exists,
how difficult it will be to build, whether the firm has enough experience using that
technology. The system will be developed using ReactJS, NodeJS, MySQL. As we required
some time to learn all these technologies. All these technologies are easy to learn and can
develop system very rapidly. After developing and deploying the system, any user can view
this site on online.

2.4.2 Economical Feasibility Study:

This study is carried out to check the economic impact will have on the system will
have on the organization. The amount of fund that the company can pour into the research and
development of the system is limited. The expenditures must be justified. Thus the developed
system as well within the budget and this was achieved because most of the technologies used
are freely available. Only the customized products have to be purchased.

2.4.3 Operational Feasibility Study:

This feasibility refers to the measure of solving problems with the help of a new
proposed system. It helps in taking advantage of the opportunities and fulfills the
requirements as identified during the development of the project. It takes care that the

11
management and the users support the project. People are inherently resistant to change and
computers have been known to facilitate change.

3. DEVELOPMENT ENVIRONMENT

The development environment is the set of processes and programming tools used to
create the program or software product. The term may sometimes also imply the physical
environment. An integrated development environment is one in which the processes and tools
are coordinated to provide developers an orderly interface to and convenient view of the
development process.

3.1 HARDWARE REQUIREMENTS

In the below table I have mentioned the details and the capacity of the hardware which I
used to develop this Ecommerce Web Application.

HARDWARE CAPACITY
CPU INTEL CORE i3
PROCESSOR SPEED 1.80 GHZ
RAM 4 GB
HARD DISK 1 TB

3.2 SOFTWARE REQUIREMENTS

In the below table I have mentioned the details of the software requirements which are
required to develop or to run this project.

NAME VERSION
OPERATING SYSTEM WINDOWS 10 64 BIT
LANGUAGE JAVASCRIPT, HTML, CSS, REACT
JS, NODE JS
DATABASE MYSQL

12
 DEVELOPER PLATFORM VISUAL STDUIO CODE
BROWSER GOOGLE CHROME
3.3 PROGRAMMING ENVIRONMENT

LANGUAGE DEFINITION (PROGRAMMIN IN JAVASCRIPT)

JavaScript (JS) is lightweight, interpreted, or just-in-time complied programming

language with first class functions. While it is most well-known as the scripting language for
Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB
and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded,
dynamic language, supporting object-oriented, imperative, and declarative styles. It has
Application Programming Interface (APIs) for working with text, dates, regular expressions,
standard data structures, and the Document Object Model (DOM).

The standards for JavaScript are the ECMAScript Language Specification (ECMA-262) and
the ECMAScript Internationalization API Specification (ECMA-402). The ECMAScript
standard does not include any input/output (I/O), such as networking, storages,
or graphics facilities. In practice, the web browser or other runtime system provides
JavaScript APIs for I/O. JavaScript is the world's most popular programming language.
JavaScript is the programming language of the Web and JavaScript is easy to learn.

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

   2. CSS to specify the layout of web pages

   3. JavaScript to program the behavior of web pages

JavaScript engines were originally used only in web browsers, but are now core components
of some servers and a variety of applications. The most popular runtime system for this usage
is Node.js. Although Java and JavaScript are similar in name, syntax, and respective standard
libraries, the two languages are distinct and differ greatly in design.

13
To use JavaScript you don't have to get or download JavaScript. JavaScript is already running
in your browser on your computer, on your tablet, and on your smart-phone. JavaScript is
free to use for everyone.

JavaScript Runtime Environment

The JavaScript runtime environment provides access to built-in libraries and objects that are
available to a program so that it can interact with the outside world and make the code work.In
the context of a browser this is comprised of the following elements:

1. The JavaScript engine (which in turn is made up of the heap and the call stack)
2. Web APIs
3. The callback queue
4. The event loop

It’s good to be mindful that the runtime environment can take on different forms based on the
context, for example, the runtime environment in a browser is very different from that of
Node.js. These differences are primarily at the implementation level, so most of the following
concepts are still relevant.

The JavaScript Engine

To start writing JavaScript we don’t need to install any specific software because each
web browser has its own version of the JS engine that parses the code for us. Chrome uses the
V8 JS engine which has been developed by the Chromium Project. Firefox
uses SpiderMonkey which was first written by Brendan Eich at Netscape and is now
maintained by the folks at Mozilla. The purpose of the JavaScript engine is to translate source
code that developers write into machine code that allows a computer to perform specific tasks.

The Heap

14
 The heap, also called the ‘memory heap’, is a section of unstructured memory that is
used for the allocation of objects and variables.

The CallStack

The call stack is a data structure that keeps track of where we are in the program and
runs in a last-in, first-out way. Each entry in the stack is called a stack frame. This means that
the frame at the top of the stack is the one the engine is focused on, and it will not move on to
the next function unless the function above it has been removed from the stack.

As the JS engine steps into a function, it is pushed onto the stack. When a function returns a
value or gets sent to the Web APIs, it is popped off the stack. If a function doesn’t explicitly
return a value then the engine will return undefined and also pop the function off the stack.
This is what is meant by the term “JavaScript runs synchronously”; it is single-threaded, so
can only do one thing at a time.

Web APIs

The Web APIs are not a part of the JavaScript engine, but they are part of the runtime
environment provided by the browser. There are a large number of APIs available in modern
browsers that allow us to a wide variety of things. Some of the most common categories of
browser APIs let us:

 Manipulate documents: One of the most common Web APIs used is the DOM
API, which allows developers to manipulate HTML and CSS, letting us create,
change and even remove HTML and dynamically apply styles to our web pages.
 Draw and manipulate graphics: Widely supported in browsers, the Canvas
API and the Web Graphics Library API let us programmatically update pixel data
contained in a <canvas> element.

15
  Fetch data from a server: The Fetch API provides an interface for fetching
resources across the network by using generic definitions of the Request and
Response objects.

3.3.1 ABOUT FRONT-END TECHNOLOGY

ReactJS:

React is a declarative, efficient, and flexible JavaScript library for building user
interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end
library responsible only for the view layer of the application. It is maintained by
Facebook.

React is a declarative, efficient, and flexible JavaScript library for building user
interfaces. React.js is an open-source, component-based front-end library responsible
only for the view layer of the application. It is an MVC architecture-based library that
plays the role of “C” which means control.

React uses a declarative paradigm that makes it easier to reason about your application
and aims to be both efficient and flexible. It designs simple views for each state in your
application, and React will efficiently update and render just the right component when
your data changes. The declarative view makes your code more predictable and easier to
debug.Features of React.js: There are unique features are available on React because that
it is widely popular.

Use JSX: It is faster than normal JavaScript as it performs optimizations while translating
to regular JavaScript. It makes it easier for us to create templates.

Virtual DOM: Virtual DOM exists which is like a lightweight copy of the actual DOM.
So for every object that exists in the original DOM, there is an object for that in React
Virtual DOM. It is exactly the same, but it does not have the power to directly change the
layout of the document. Manipulating DOM is slow, but manipulating Virtual DOM is
fast as nothing gets drawn on the screen.

One-way Data Binding: This feature gives you better control over your application.

16
Component: A Component is one of the core building blocks of React. In other words,
we can say that every application you will develop in React will be made up of pieces
called components. Components make the task of building UIs much easier. You can see
a UI broken down into multiple individual pieces called components and work on them
independently and merge them all in a parent component which will be your final UI.

Performance: React.js use JSX, which is faster compared to normal JavaScript and
HTML. Virtual DOM is a less time taking procedure to update webpages content.

Hypertext Markup Language (HTML):

Hypertext Markup Language (HTML) is the standard markup language for creating
webpages and web applications. With Cascading Stylesheets (CSS) and JavaScript, it
forms a triad of cornerstone technologies for the World Wide Web.

Web browser 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 <label/>label< label /> Tags such as And directly introduce
content into the page. Other tags such as surround and provide information about
document text and may 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), maintainer of both the
HTML and the CSS standards, has encouraged the use of CSS over explicit presentational
HTML since 1997.

17
In 1980, physicist Tim Berners Lee, a contractor at CERN, proposed and prototyped
ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-
Lee wrote a memo proposing an Internet -based hyertext system.

Berners-Lee specified HTML and wrote the browser and server software in late 1990. That
year, Berners- Lee and CERN data systems engineer Robert Cailliau collaborated on a
joint request for funding, but the project was not formally adopted by CERN. In his
personal notes from 1990 he listed "some of the many areas in which hypertext is uscd"
and put an encyclopedia first.

The first publicly available description of HTML was a document called "HTML Tags",
first mentioned on the Internet by Tim Berners-Lee in late 1991. It describes 18 elements
comprising the initial, relatively simple design of HTML. Except for the hyperlink tag,
these were strongly influenced by SGML guid, an in-house Standard Generalized Markup
Language (SGML)-based documentation format at CERN. Eleven of these elements still
exist in HTML 4.

HTML is a markup Language that web browser use to interpret and compose text, images,
and other material into visual or audible web pages. Default characteristics for every item
of HTML markup are defined in the browser, and these characteristics can be altered or
enhanced by the web page designer's additional use of CSS. Many of the text elements are
found in the 1988 ISO technical report TR 9537 Techniques for using SGML, which in
turn covers the features of early text formatting languages such as that used by the
RUNOFF command developed in the early 1960s for the CTSS (Compatible Time-
Sharing System) operating system: these formatting commands were derived from the
commands used by typesetters to manually format documents. However, the SGML
concept of generalized markup is based on the separation of structure and markup; HTML
has been progressively moved in this direction with CSS.

HTML markup consists of several key components, including those called tags (and their
attributes), character-based data types, character references and entity references.

18
HTML tags most commonly come in pairs <h1> and </hl>, although some represent
empty elements and so are unpaired, for example <img>. The first tag in such a pair is the
start tag, and the second is the end tag (they are also called opening tags and closing tags).
Tags may also enclose further tag markup between the start and end, including a mixture
Of tags and text. This indicates further (nested) elements, as children of the parent
element.
The start tag may also include attributes within the tag. These indicate other information,
such as identifiers for sections within the document, identifiers used to bind style information
to the presentation of the document, and for some tags such as the reference to the image
resource.

used to embed images, the Some elements, such as the line break<br>, do not permit any
embedded content, either text or further tags. These require only a single empty tag (akin to a
start tag) and do not use an end tag.

Many tags, particularly the closing end tag for the very commonly used paragraph element
<p>, are optional. An HTML browser or other agent can infer the closure for the end of an
element from the context and the structural rules defined by the HTML standard. These rules
are complex and not widely understood by most HTML coders.
Attributes

Main article: HTML attribute

Most of the attributes of an element are name-value pairs, separated by and written within the
start tag of an element after the element's name. The value may be enclosed in single or
double quotes, although values consisting of certain characters can be left unquoted in HTML
(but not XHTML). Leaving attribute values unquoted is considered unsafe. In contrast with
name-value pair attributes, there are some attributes that affect the element simply by their
presence in the start tag of the element, like the attribute for the element.

 The attribute provides a document-wide unique identifier for an element. This is used
to identify the element so that stylesheets can alter its presentational properties, and
scripts may alter, animate or delete its contents or presentation. Appended to the URL
19
 of the page, it provides a globally unique identifier for the element, typically a
subsection of the page. For example, the ID "Attributes" in
https://en.wikipedia.org/wiki/HTML#Attributes.
 The class attribute provides a way of classifying similar elements. "This can be used
for semantic or presentation purposes. For example, an HTML document might
semantically use the designation indicate that all elements with this class value are
subordinate to the main text of the document. In presentation, such elements might be
gathered together and presented as footnotes on a page instead of appearing in the
place where they occur in the HTML source. Class attributes are used semantically in
micro formats. Multiple class values may be specified. An author may use the attribute
to assign presentational properties to a particular element. It is considered better
practice to use an element's or attributes to select the element from within a stylesheet,
though sometimes this can be too cumbersome for a simple, specific, or ad hoc styling.
 The attribute is used to attach sub textual explanation to an clement. In most browsers
this attribute is displayed as a tooltip.

Cascading Style Sheet (CSS):

CSS (Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language like 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 page to share formatting by specifying the relevant CSS in a separate .css file, and
reduce complexity and repetition in the structural content.

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
voice (via speech-based browser), and on Braille-based tactile devices. CSS also has
rules for alternate formatting if the content is accessed on a mobile device.

20
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) is registered for use with CSS (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,
lain XML, SVG, and XUL.
CSS has a simple syntax and uses a number of English keywords to specify the names of
various style properties. A style sheet consists of a list of rules. Each rule or rule-set
consists of one or more selectors, and a declaration block.

In CSS, selectors declare which part of the markup a style applies to by matching tags
and attributes in the markup itself.

CSS was first proposed by Hakon Wium Lie on October 10, 1994. At the time, Lie was
working with Tim Berner Lie at CERN. Several other style sheet languages for the web
were proposed around the same time, and discussions on public mailing lists and inside
World Wide Web Consortium (W3C) resulted in the first W3C CSS Recommendation
(CSSI) being released in 1996. In particular, a proposal by Bert Bos was influential; he
became coauthor of CSSI, and is regarded as co-creator of CSS.

Style sheets have existed in one form or another since the beginnings of Standard
Generalized Markup Language (SGML) in the 1980s, and CSS was developed to provide
style sheets for the web. One requirement for a web style sheet language was for style
sheets to come from different sources on the web. Therefore, existing style sheet
languages like DSSSL and FOSI were not suitable. CSS, on the other hand, let a
document's style be influenced by multiple style sheets by way of "cascading" styles.

As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the
demands of Web developer. This evolution gave the designer more control over site
appearance, at the cost of more complex HTML. Variations in web browser
implementations, such as Viola WWW and World Wide Web made consistent site

21
appearance difficult, and users had less control over how web content was displayed. The
browser/editor developed by Tim Berners-Lee had style sheets that were hard-coded into
the program. The style sheets could therefore not be linked to documents on the web.
Robert cailliau, also of CERN, wanted to separate the structure from the presentation so
that different style sheets could describe different presentation for printing, screen-based
presentations, and editors.

Improving web presentation capabilities was a topic of interest to many in the web
community and nine different style sheet languages were proposed on the www-style
mailing list. Of these nine proposals, two were especially influential on what became
CSS: Cascading HTML Style Sheets and Stream-based Style Sheet Proposal (SSP). Two
browsers served as testbeds for the initial proposals; Lie worked with implement CSS in
Dave Raggetts Arena browser. Bert Bos implemented his own SSP proposal in the Argo
browser. Thereafter, Lie and Bos worked together to develop the CSS standard (the 'H'
was removed from the name because these style sheets could also be applied to other
markup languages besides HTML).

The first CSS specification to become an official W3C Recommendation is CSS level l ,
published on December 17, 1996. Hakon Wium Lie and Bert Bos are credited as the
original developers. Among its capabilities are support for

 Font properties such as typeface and emphasis

 Color of text, backgrounds, and other elements
 Text attributes such as spacing between words, letters, and lines of text
 Alignment of text, images, tables and other elements
 Margin, border, padding, and positioning for most elements
 Unique identification and generic classification of groups of attributes

Each web browser uses a layout engine to render web pages, and support for CSS
functionality is not consistent between them. Because browsers do not parse CSS
perfectly, multiple coding techniques have been developed •to target specific browsers
with workarounds (commonly known as CSS hacks or CSS filters). Adoption of new
functionality in CSS can be hindered by lack of support in major browsers. For example,

22
Internet Explorer was slow to add support for many CSS 3 features, which slowed
adoption of those features and damaged the browser's reputation among developers. In
order to ensure a consistent experience for their users, web developers often test their
sites across multiple operating systems, browsers, and browser versions, increasing
development time and complexity. Tools such as BrowserStrack have been built to
reduce the complexity of maintaining these environments.

In addition to these testing tools, many sites maintain lists of browser support for specific
CSS properties, including Can I Use and the Mozilla Browser. Additionally, the CSS 3
defines feature queries, which support for certain directive that will allow developers to
target functionality directly within their CSS. CSS that is not supported by older
browsers can also sometimes be patched in using JavaScript polyfills, which are pieces of
JavaScript code designed to make browsers behave consistently. These workarounds—
and the need to support fallback functionality—can add complexity to development
projects, and consequently, companies frequently define a list of browser versions that
they will and will not support.

Main article: CSS framework

CSS frameworks are pre-prepared libraries that are meant to allow for easier, more
standards- compliant styling of web pages using the Cascading Style Sheets language.
CSS frameworks include Foundation, Blueprint, Bootstrap, Cascade Framework and
Materialize. Like programming and scripting language libraries, CSS frameworks are
usually incorporated as external .css sheets referenced in the HTML <hcad>. They
provide a number of ready-made options for designing and laying out the web page.
Although many of these frameworks have been published, some authors use them mostly
for rapid prototyping, or for learning from, and prefer to 'handcraft' CSS that is
appropriate to each published site without the design, maintenance and download
overhead of having many unused features in the site's styling.

As the size of CSS resources used in a project increases, a development team often needs
to decide on a common design methodology to keep them organized. The goals are ease
of development, ease of collaboration during development and performance of the
deployed stylesheets in the browser. Popular methodologies include OOCSS (object
23
oriented CSS), ACSS (atomic CSS), OCSS (organic Cascade Style Sheet), SMACSS
(scalable and modular architecture for CSS), and BEM (block, element, modifier).

JavaScript:

JavaScript is a lightweight, interpreted programming language. It is designed for creating

network-centric applications. It is complimentary to and integrated with Java. JavaScript
is very easy to implement because it is integrated with HTML. It is open and cross-
platform.

JavaScript is a high-level, dynamic, untyped, and interpreted programming language. It

has been standardized in the ECMA Script language specification. Alongside HTML and
CSS, it is one of the three core technologies of World Wide Web content production; the
majority of websites employ it and it is supported by all modern Web browsers without
plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-
paradigm language, supporting object-oriented, imperative, and åmctional programming
styles. It has an API for working with text, arrays, dates and regular expressions, but does
not include any I/O, such as networking, storage, or graphics facilities, relying for these
upon the host environment in which it is embedded.

Despite some naming, syntactic, and standard library similarities, JavaScript and Java are
otherwise unrelated and have very different semantics. The syntax of JavaScript is
actually derived from C, while the semantics and design are influenced by the Selfand
Scheme programming languages.

JavaScript is also used in environments that are not Web-based, such as PDF documents,
site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual
machines (VMS) and platforms built upon them have also increased the popularity of
JavaScript for server-side Web applications. On the client side, JavaScript has been
traditionally implemented as an interpreted language, but more recent browsers perform
just-in-time compilation. It is also used in game development, the creation of desktop and
mobile applications, and server-side network programming with runtime environments
such as Node.js.

24
3.3.2 ABOUT BACK-END TECHNOLOGY

NodeJS:

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build

scalable network applications. In Node.js many connections can be handled concurrently.
Upon each connection, the callback is fired, but if there is no work to be done, Node.js
will sleep.

This is in contrast to today's more common concurrency model, in which OS threads are
employed. Thread-based networking is relatively inefficient and very difficult to use.
Furthermore, users of Node.js are free from worries of dead-locking the process, since
there are no locks. Almost no function in Node.js directly performs I/O, so the process
never blocks except when the I/O is performed using synchronous methods of Node.js
standard library. Because nothing blocks, scalable systems are very reasonable to develop
in Node.js.

Node.js is similar in design to, and influenced by, systems like Ruby's Event Machine and
Python's Twisted. Node.js takes the event model a bit further. It presents an event loop as
a runtime construct instead of as a library. In other systems, there is always a blocking call
to start the event-loop. Typically, behavior is defined through callbacks at the beginning
of a script, and at the end a server is started through a blocking call like
EventMachine::run(). In Node.js, there is no such start-the-event-loop call. Node.js simply
enters the event loop after executing the input script. Node.js exits the event loop when
there are no more callbacks to perform. This behavior is like browser JavaScript — the
event loop is hidden from the user.

HTTP is a first-class citizen in Node.js, designed with streaming and low latency in mind.
This makes Node.js well suited for the foundation of a web library or framework.

Node.js being designed without threads doesn't mean you can't take advantage of multiple
cores in your environment. Child processes can be spawned by using our
child_process.fork() API, and are designed to be easy to communicate with. Built upon
that same interface is the cluster module, which allows you to share sockets between
processes to enable load balancing over your cores.
25
MYSQL:

MySQL is an open-source relational database management system (RDBMS). It is

the most popular database system used with PHP. MySQL is developed, distributed, and
supported by Oracle Corporation. Structured Query Language or SQL is a standard
Database language which is used to create, maintain and retrieve the data from relational
databases like MySQL, Oracle, SQL Server, PostGre, etc. The recent ISO standard
version of SQL is SQL:2019.The data in a MySQL database are stored in tables which
consist of columns and rows. MySQL is a database system that runs on a server. MySQL
is ideal for both small and large applications. MySQL is a very fast, reliable, and easy to
use database system. It uses standard SQL. MySQL compiles on a number of platforms.
Good examples for PHP & MySQL-based scripts are WordPress, Joomla!, and Drupal..

DEVELOPER PLATFORM:

VISUAL STUDIO CODE:

Visual Studio Code is a lightweight but powerful source code editor which 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 C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).
Visual Studio Code is a source-code editor that can be used with a variety of programming
languages, including Java, JavaScript, Go, Node.js, Python, C++ and Fortran. It is based on
the Electron framework, which is used to develop Node JS web application we that run on the
Blink layout engine. Visual Studio Code employs the same editor component (codenamed
"Monaco") used in Azure DevOps (formerly called Visual Studio Online and Visual Studio
Team Services).

Out of the box, Visual Studio Code includes basic support for most common programming
languages. This basic support includes syntax highlighting, bracket matching, code folding,
and configurable snippets. Visual Studio Code also ships with IntelliSense for JavaScript,
TypeScript, JSON, CSS, and HTML, as well as debugging support for Node.js. Support for

26
additional languages can be provided by freely available extensions on the VS Code
Marketplace.

Instead of a project system, it allows users to open one or more directories, which can then be
saved in workspaces for future reuse. This allows it to operate as a language-agnostic code
editor for any language. It supports many programming languages and a set of features that
differs per language. Unwanted files and folders can be excluded from the project tree via the
settings. Many Visual Studio Code features are not exposed through menus or the user
interface but can be accessed via the command palette.

Visual Studio Code can be extended via extensions, available through a central repository.

This includes additions to the editor and language support. A notable feature is the ability to
create extensions that add support for new languages, themes, and debuggers, perform static
code analysis, and add code linters using the Language Server Protocol. Source control is a
built-in feature of Visual Studio Code. It has a dedicated tab inside of the menu bar where you
can access version control settings and view changes made to the current project. To use the
feature you must link Visual Studio Code to any supported version control system
(Git, Apache Subversion, Perforce, etc.). This allows you to create repositories as well as to
make push and pull requests directly from the Visual Studio Code program.Visual Studio
Code includes multiple extensions for FTP, allowing the software to be used as a free
alternative for web development. Code can be synced between the editor and the server,
without downloading any extra software..

Visual Studio Code collects usage data and sends it to Microsoft, although this can be
disabled. Due to the open-source nature of the application, the telemetry code is accessible to
the public, who can see exactly what is collected.

In the 2016 Developers Survey of Stack Overflow, Visual Studio Code ranked #13 among the
top popular development tools, with only 7% of the 47,000 respondents using it. Two years
later, however, Visual Studio Code achieved the #1 spot, with 35% of the 75,000 respondents
using it. In the 2019 Developers Survey, Visual Studio Code was also ranked #1, with 50% of
the 87,000 respondents using it.[31] In the 2021 Developers Survey, Visual Studio Code
continues to be ranked #1, with 70% of the 82,000 respondents using it.

27
 4. SYSTEM DESIGN AND DEVELOPMENT

4.1 ELEMENTS OF DESIGN

4.1.1 PROCESS DESIGN

DATA FLOW DIAGRAM

Data flow diagram is a design notation that depicts the process flow in a module by
using graphical notations. It is required for documenting the data flow one from to another
within a module. The DFD used below for describing the function of each submodule are
Formal DFD.

The Data Floe Diagram (DFD) takes an input-process-output view of a system i.e. data
objects flow into the software, are transformed by processing elements and resultant data
objects flow out of the software.

Data objects represented by labeled arrows and transformation are represented by circles also
called as bubbles. DFD is presented in a hierarchical fashion i.e. the first data flow model
represents the system as a whole. Subsequent DFD refine the context diagram (level 0 DFD),
providing increasing details with each subsequent level.

The DFD enables the software engineer to develop models of the information domain and
functional domain at the same time. As the DFD is refined into greater levels of details, the
analyst performs an implicit functional decomposition of system.

At the same time, the DFD refinement result in a corresponding refinement of the data as it
moves through the processes that embody the applications. A context-level DFD for the
system the primary external entities produce information for use by the system and consume
information generated by the system the labeled arrow represents data objects or object
hierarchy.

RULES FOR DFD

 Organize the DFD so that the main sequence of the actions.

28
  Reads left to right and top to bottom. Identify all inputs and outputs.
 Identify and label each process internal to the system with Rounded circles.
 A process is required for all the data transformation and Transfers. Therefore, never
connect data store to a data source or the destination or another data store with just a
Data Flow Diagram.
 Do not indicate hardware and ignore control information.
 Make sure the names of the processes accurately convey everything the process is
done.
 Ihere must not be unnamed process.
 Indicate external sources and destinations of the data, with squares.
 Numbers each occurrence of repeated external entities.
 Identify all data floes for each process step, except simple record retrievals.
 Label data flow on each arrow. Use details floc on cach arrow.
 Use the details flow arrow to indicate data movements.

DFD LEVEL 0 (CONTEXT DIAGRAM)

Admin Salon-pos Database

Customer

A level 0 DFD also known as a context diagram, shows a data system as a whole and
emphasizes the way it interacts with external entities. This DFD level 0 diagram shows how
such system might function within a Ecommerce Web Application.

29
DFD LEVEL 1: ADMIN

Customer
Management

Customer
Details

Transaction
Management

Transaction
Details

Admin Product/Services

Product/Services
Details

Employee
Management

Employee Details

Salary
Management

A level 1 DFD is more detailed than a level 0 DFD but not as detailed as level 2 DFD. It
breaks down the main process into sub processes that can they be analyized and improve on a
more intimate level.

30
DFD LEVEL 1: CUSTOMER

Customer
Update
details
profile

Check Product/
Customer product/
Services
services
detail

Check

Payment Payment
details detail

4.1.2 LOGICAL DESIGN

UML DIAGRAM:

A UML diagram is a diagram based on the UML (Unified Modeling Language) with
the purpose of visually representing a system along with its main actors, roles, actions,
artifacts or classes, in order to better understand, alter, maintain, or document information
about the system.

Design Engineering deals with the various UML [Unified Modeling language] diagrams for
the implementation of project. Design is a meaningful engineering representation of a thing
that is to be built. Software design is a process through which the requirements are translated
into representation of the software. Design is the place where quality is rendered in software
engineering. Design is the means to accurately translate customer requirements into finished
product.

The Unified Modeling Language (UML) was created to forge a common, semantically and
syntactically rich visual modeling language for the architecture, design, and implementation

31
of complex software systems both structurally and behaviorally. UML applications beyond
software development, such as process flow in manufacturing. It is analogous to the blueprints
used in other fields, and consists of different types of diagrams. In the aggregate, UML
diagrams describe the boundary, structure, and the behavior of the system and the objects
within it.

UML is not a programming language but there are tools that can be used to generate code in
various languages using UML diagrams. UML has a direct relation with object oriented
analysis and design. UML uses the strengths of these three approaches to present a more
consistent methodology that's easier to use. UML represents best practices for building and
documenting different aspects of software and business system modeling.

32
4.1.3 INPUT DESIGN

LOGIN PAGE

4.1.4 OUTPUT DESIGN

CHECKOUT PAGE

33
4.1.3 DATABASE DESIGN

EMPLOYEE DETAILS

Emp_Id Emp_Name Email_Id Role Passcode

Emp001 Bagya bagya@fatmactech.com Owner 1111

Emp001 Test emp - Admin 2222

Emp001 Test user - Admin 1112

Emp001 Kk hk - Employee 0

4.2 TABLE STRUCTURE

TABLE NAME: EMPLOYEE

Field Datatye Size Condition

Emp_id Integer 10 Primary key

Name Varchar 20 Not null

Email Varchar 25 -

Mobile Integer 10 Not null

Salary Integer 10 Not null

Gender Varchar 10 Not null

Role Varchar 10 Not null

Address Varchar 50 Not null

Passcode Integer 4 Primary key

Dob Integer 10 Not null

Status Varchar 10 Not null

34
 5. SYSTEM TESTING AND IMPLEMENTATION

5.1 SYSTEM TESTING

The purpose of testing is to discover errors. Testing is the process of trying to

discover every conceivable fault or weakness in a work product. It provides a way to check
the functionality of components, sub-assemblies, assemblies and/or a finished product It is the
process of exercising software with the intent of ensuring that the software system meets its
requirements and user expectations and does not fail in an unacceptable manner. There are
various types of test. Each test type addresses a specific testing requirement.

TYPES OF TESTING:

5.1.1 UNIT TESTING

Unit testing involves the design of test cases that validate that the internal program
logic is functioning properly, and that program inputs produce valid outputs. All decision
branches and internal code flow should be validated. It is the testing of individual software
units of the application. It is done after the completion of an individual unit before
integration. This is a structural testing, that relies on knowledge of its construction and is
invasive. Unit tests perform basic tests at component level and test a specific business
process, application, and/or system configuration. Unit tests ensure that each unique path of a
business process performs accurately to the documented specifications and contains clearly
defined inputs and expected results.

Unit testing usually conducted as part of a combined code and unit test phase of the
software lifecycle, although it is not uncommon for coding and unit testing to be conducted as
two distinct phases.

35
 This testing is done to ensure that the source code written by the developer meets the
requirement and behaves in an expected manner. The goal of the unit testing is to break each
part of source code and check that each part works properly. The client and Admin can login
successfully. Hence the unit testing is successful.

Test Results: All the test cases mentioned above passed successfully. No defects
encountered.

5.1.2 INTEGRATION TESTING

Integration tests are designed to test integrated software components to determine if

they actually run as one programs. Testing is event driven and is more concerned with the
basic outcome of screens or fields. Integration tests demonstrate that although the
components were individually satisfaction, as shown by successfully unit testing, the
combination of components is correct and consistent. Integration testing is specifically aimed
at exposing the problems that arise from the combination of components.

36
 Software integration testing is the incremental integration testing of two or more
integrated software components on a single platform to produce failures caused by interface
defects. The task of the integration test is to check that components or software applications,

Test Results: All the test cases mentioned above passed successfully. No defects
encountered.

In the above screen they have integrate more than 3 components into the view the user
analytics, new users, latest transaction, and the revenue details.

5.1.3 VALIDATION TESTING

After the culmination of black box testing, software is completely assembled as a

package, interfacing errors have been uncovered and corrected and final series of software
validation tests begin. Validation testing can be defined as many, but a single definition is
that validation succeeds when the software function in a manner that can be reasonably
expected by the customer. Validation refers to the process of using the software in a live
environment to find error. During the course of validation system may occur and the software
will be changed.

37
 In the above screenshot they validate the employee password in the database. Only one
password can be maintained for per person, And also for the online payment transaction the
users Credit/Debit Card details are also validated.

5.1.4 OUTPUT TESTING INSERTION OF DATA

Output testing is a type of software testing that validates the software system against
the functional requirements or specification. The purpose of Functional tests is to test each
function of the software application, by providing appropriate input, verifying the output
against the Functional requirements.

Functional testing mainly involves black box testing and it is not concerned about the source
code of the application. This testing checks User Interface, APIs, Database, Security, Client
and server Communication and other functionality of the Application Under Test. The testing
can be done either manually or using automation.

38
39
5.2 SYSTEM SECURITY

Computer Security, the protection of computer systems and information from harm,
theft, and unauthorized use. Computer hardware is typically protected by the same means
used to protect other valuable or sensitive equipment, namely, serial numbers, doors and
locks, and alarms. The protection of information and system access, on the other hand, is
achieved through other tactics, some of them quite complex.

The security precautions related to computer information and access address four
major threats, These threats are:

1. 1.Theft of data, such as that of military secrets from government computers.

2. Vandalism, including the destruction of data by a computer virus
3. Fraud, such as employees at a bank channeling funds into their accounts
4. Invasion of privacy, such as the illegal accessing of protected personal financial or
medical data from a large database.

SYSTEM ACCESS CONTROLS

To minimize the risk of unauthorized access to physical and logical systems. Access
control is a fundamental component of security compliance programs that ensures security
technology and access control policies are in the place to protect confidential information,
such as customer data. The system also protects password data and keeps tracks of who is
doing what in system, especially security related (e.g.., logging in, trying to open a file, using
special privileges).

DATA ACCESS CONTROLS

Monitoring who can access what data, and for what purpose. Your system might
support discretionary access controls: with these, you determine whether other people can
read or change your data. Your system might also support mandatory access controls: with
these, the system determine access rules base on the security levels of the people, the file.

40
5.3 SYSTEM ENHANCEMENT

An enhancement is any product change or upgrade increase software or hardware

capabilities beyond original client specification. Enhancement allows software and hardware
performance scalability. Hardware component enhancement, such as those to integrated
circuits are often small and demand few resources. In general component enhancement
includes:

 ADDITIONAL FUNCTIONALITY
 BUG AND ERROR HANDLING
 GREATER PROCESSING SPEED
 BETTER CROSS PLATFORM COMPATIBILITY

41
 6. CONCLUSION AND FUTURE ENHANCEMENT

6.1 Conclusion

Finally coming to the conclusion of the project report I would like to express my
sincere gratitude to all those who have helped us in this project to complete successfully. The
SALON-POS Web Application is for computerizing the salon. It is a great improvement over
the manual system. The computerization of the system has speed up the process. In the current
system, the front office managing is very slow. The system was thoroughly checked and
tested with dummy data and thus is found to be very reliable. The software takes care of all
the requirements of an average organization or small medium enterprises and is capable to
provide easy and effective storage of information related to products and the users of the
organization. It generates reports and also provides the facility for searching the details of the
employee. The system also provides the facility of backup as per the requirement.It has tried
out level best to make this application as easy as possible to use. We would be very delighted
to find this project useful. We together as a group made the maximum effort to obtain the best
and reliable software components for use with our coding.

The project SALON-POS has been designed and developed to the satisfaction of the end
user. The system has been built with the latest technology to make the best of all resources. Its
very user friendly, simple, interactive system thus makes work easier. The application is
tested well and errors are properly debugged. It has tried out level best to make this
application as easy as possible to use

6.2 Future Enhancement

We can enhance this system by including more facilities like making the application
more user friendly with cool and beautiful User Interface and with extraordinary User
Experience.

1. Create attractive separate web sites for each branches using data collect in current version.

2. Improve appointment booking using mobile app

3. Enhance the features of the system.

42
 7. APPENDIX

7.1 Sample Coding

Index.js

import React from "react";

import DataManager from '../../controller/datacontroller';

import axios from 'axios';

import config from '../../config/config';

import Footer from '../../components/Footer';

import LoadingModal from '../../components/Modal/loadingmodal';

import CommonModal from '../../components/Modal/commonmodal';

import Grid from '@material-ui/core/Grid';

import { Typography } from '@material-ui/core';

import TextFieldContent from '../../components/formComponents/TextField';

import ButtonContent from '../../components/formComponents/Button';

const section = {

height: '100%',

marginTop: 10,

display:'flex',

justifyContent:'center',

alignItems:'center',

width:'50%'

43
};

export default class App extends React.Component {

constructor(props) {

super(props);

this.state = {

dataManager: new DataManager(),

code:'',

isSynced: false,

syncData: "",

msg : '',

currentDateTime: new Date(),

openDialog: false,

isLoading: false,

componentDidMount(){

handleCloseDialog(){

this.setState({openDialog: false})

onSubmit(){

if(this.state.code.trim() !== ''){

this.setState({isLoading: true})
44
 if(navigator.onLine) {

axios.post(config.root+"business/sync/",{syncCode:this.state.code}).then(res=>{

var status = res.data["status"];

var data = res.data["data"];

if(status === 200){

if(data.length > 0){

window.localStorage.setItem("businessdetail", JSON.stringify(data[0]))

varsynccodesql=`insertinto
business_detail(businessID,name,address,owner_name,syncCode,created_at)
values('`+data[0].businessId+`','`+data[0].name+`','`+data[0].address+`','`+data[0].owner_nam
e+`','`+data[0].syncCode+`','`+this.state.currentDateTime+`')`;

this.state.dataManager.saveData(synccodesql).then((res)=>{

})

var logsql = `insert into sync_log(syncCode,businessID,created_at)

values('`+data[0].syncCode+`','`+data[0].businessId+`','`+this.state.currentDateTime+`')`;

this.state.dataManager.saveData(logsql).then((res)=>{

})

this.setState({isSynced:true,isLoading: false}, function(){

this.props.onSyncedBusiness();

})

else{

this.setState({msg: res.data.msg}, function(){

this.setState({openDialog: true,isLoading: false})

45
 })

else{

this.setState({msg: res.data.msg}, function(){

this.setState({openDialog: true,isLoading: false})

})

}).catch(err=>{

this.setState({openDialog: true,isLoading: false})

})

else {

this.setState({msg:"Please check your internet connection before syncing", openDialog:

true, isLoading: false})

}}

else{

this.setState({msg:"Please enter the code", openDialog: true})

keyPress(e){

if(e.which === 13){

this.onSubmit()

46
 }

render() {

return (

<div>

{this.state.isLoading && <LoadingModal

show={this.state.isLoading}></LoadingModal>}

<div>

<div className='container synccontainer'>

<div style={section}>

<img className="launchScreen-logo" alt="logoImg"

src="assets/images/logo.png"

style={{objectFit: 'cover'}}/>

</div>

<div style={{display:'flex', justifyContent:'center', alignItems:'flex-start',

flexDirection:'column', width:'50%'}}>

<Grid item xs={9} style={{display:'flex', justifyContent:'center', alignItems:'flex-

start', flexDirection:'column'}}>

<Grid item ><Typography variant="h6" noWrap > Enter Your Sync

Code</Typography> </Grid>

<Grid item style={{marginTop: 20,display:'flex' }}>

<TextFieldContent id="code" label="Sync Code" type="text"

value={this.state.code} onKeyPress={e=>{this.keyPress(e);}} onChange={(val) => {

if(val.target.value.match("^.{7,7}$")==null) {

47
 this.setState({code: val.target.value.toUpperCase()})}

/>

<ButtonContent

color="success"

size="medium"

variant="contained"

style={{marginLeft:'10px', color:'#fff'}}

onClick={()=>this.onSubmit()}

label="Submit"

</Grid>

<Grid item style={{marginTop: 10}}><Typography variant="subtitle2" noWrap

style={{color:'#808080'}}> This is your secret code for your business.</Typography>

<Typography variant="subtitle2" noWrap style={{color:' #808080'}}> You can

get this code from your given login credentials.</Typography> </Grid>

</Grid>

</div> </div>

<CommonModal open={this.state.openDialog}
onClose={()=>this.handleCloseDialog()} title="Error" contentText={this.state.msg} />

</div>

<Footer/>

</div> )}}

48
Dashboard index.js

import React from "react";

import TicketDashboard from './ticket';

import Category from './inventory/category';

import Product from './inventory/products';

import Tax from '../settings/tax';

import DefaultCommission from '../settings/default_commission';

import DefaultDiscount from '../settings/default_discount';

import EmployeeSettings from '../settings/employee_settings';

import SyncData from '../SyncData';

import EmployeeSalary from '../EmpSalary';

import EmployeeReport from '../EmpReport';

import PrinterSetting from "../settings/printer";

import Discount from "../Discount";

import Employees from "../Employees";

import Customers from "../Customers";

import Transactions from "../Transactions";

export default class Dashboard extends React.Component {

constructor(props) {

super(props);

this.state = {

currentPage:'dashboard'
49
 };

this.changeCurrentPage = this.changeCurrentPage.bind(this);

componentDidMount(){

changeCurrentPage(page){

this.setState({currentPage:page});

render() {

return (<>

{this.state.currentPage === 'dashboard' && <TicketDashboard

onChangePage={this.changeCurrentPage} /> }

{this.state.currentPage === 'category' && <Category

onChangePage={this.changeCurrentPage} /> }

{this.state.currentPage === 'product' && <Product

onChangePage={this.changeCurrentPage} /> }

{this.state.currentPage === 'tax' && <Tax

onChangePage={this.changeCurrentPage} /> }

{this.state.currentPage === 'commission' && <DefaultCommission

onChangePage={this.changeCurrentPage} /> }

{this.state.currentPage === 'discount_division' && <DefaultDiscount

onChangePage={this.changeCurrentPage} /> }

{this.state.currentPage === 'empsettings' && <EmployeeSettings

onChangePage={this.changeCurrentPage} /> }

50
 {this.state.currentPage === 'syncdata' && <SyncData
onChangePage={this.changeCurrentPage}
onAfterSync={()=>this.setState({currentPage:'dashboard'})}/>}

{this.state.currentPage === 'empsalary' && <EmployeeSalary

onChangePage={this.changeCurrentPage}/>}

{this.state.currentPage === 'empreport' && <EmployeeReport

onChangePage={this.changeCurrentPage}/>}

{this.state.currentPage === 'printer' && <PrinterSetting

onChangePage={this.changeCurrentPage}/>}

{this.state.currentPage === 'discount' && <Discount

onChangePage={this.changeCurrentPage}/>}

{this.state.currentPage === 'employees' && <Employees

onChangePage={this.changeCurrentPage}/>}

{this.state.currentPage === 'customers' && <Customers

onChangePage={this.changeCurrentPage}/>}

{this.state.currentPage === 'transactions' && <Transactions

onChangePage={this.changeCurrentPage}/>

</>)

}}

Empsalary

import React from 'react';

import axios from 'axios';

import config from '../../config/config';

import { Stack, Container, Typography } from '@mui/material';

import TableContent from '../../components/formComponents/DataGrid';

51
export default class ReportView extends React.Component {

constructor(props){

super(props);

this.state={

selected_emp:{},

ticket_details:[],

columns:[

field: 'ticket_code',

headerName: 'Ticket Code',

minWidth: 100,

editable: false,

renderCell: (params) => (

<div>

{params.row.ticket_code}

</div>

},

field: 'service_name',

headerName: 'Service',

minWidth: 200,

editable: false,
52
 renderCell: (params) => (

<div>

{params.row.service_name}

</div>

},

field: 'created_at',

headerName: 'Date&Time',

minWidth: 200,

editable: false,

renderCell: (params) => (

<div>

{params.row.created_at.replace("T","").substring(0,
params.row.created_at.length-5)}

</div>

},

field: 'cash_type_for',

headerName: 'Service Cost',

minWidth: 100,

editable: false,

53
 renderCell: (params) => (

<div>

$ {params.row.cash_type_for === 'service'? params.row.cash_amt : 0}

</div>

},

field: 'cash_amt',

headerName: 'Tips',

minWidth: 100,

editable: false,

renderCell: (params) => (

<div>

$ {params.row.cash_type_for === 'tips'? params.row.cash_amt : 0}

</div>

},

field: '',

headerName: 'Discount',

minWidth: 100,

editable: false,

renderCell: (params) => (

54
 <div>

$ {params.row.cash_type_for === 'discount'? params.row.cash_amt : 0}

</div>

},

]}}

componentDidMount(){

//console.log(this.props.empSelected);

if(this.props.empSelected !== undefined){

// this.setState({selected_emp: this.props.empSelected});

this.setState({selected_emp: this.props.empSelected}, function() {

// //console.log(this.state.customers)

this.getEmpTicket(this.state.selected_emp.id);

});

}}

getEmpTicket(empId){

axios.get(config.root+"/employee_commission/ticketlist/"+empId).then((res)=>{

var status = res.data["status"];

var data = res.data["data"];

if(status === 200){

if(data.length > 0){

this.setState({ticket_details:res.data.data});

}
55
 })}

render(){

return (

<div style={{height: '100%'}}>

<Container maxWidth="xl" style={{width: "100%", height: '100%'}}>

<Stack direction="row" alignItems="center" justifyContent="space-between"

mb={5} style={{ marginTop: 20}}>

<Typography variant="subtitle2" gutterBottom>Employee Name:

{this.state.selected_emp.firstName} {this.state.selected_emp.lastName}</Typography>

<Typography variant="subtitle2" gutterBottom>Total Price: $

{this.state.selected_emp.totalservice_price}</Typography>

<Typography variant="subtitle2" gutterBottom>Total Discount: $

{this.state.selected_emp.total_discount}</Typography>

<Typography variant="subtitle2" gutterBottom>Total Tips: $

{this.state.selected_emp.total_tips}</Typography>

</Stack>

<Stack style={{height: '80%'}}>

<TableContent style={{height: '100%'}} pageSize={5}

data={this.state.ticket_details} columns={this.state.columns} />

</Stack>

</Container>

</div>

)}}

56
 8. BIBLIOGRAPHY AND REFERNECE

BOOK NAME : FULL STACK REACT, TYPESCRIPT, AND NODE

AUTHOR : DAVID CHOI

BOOK NAME : FULLSTACK REACT: THE COMPLETE GUIDE TO REACTJS AND

FRIENDS

AUTHOR : ANTOHNY ACCOMAZZO, NATE MURRAY, ARI LERNER

BOOK NAME : MURACH’S MYSQL 3RD EDITION

AUTHOR : JOEL MURACH

WEBSITE REFERED

 www.w3school.com
 www.reactjs.org
 www.nodejs.org
 www.mysql.com

57