Online Salon Management System For Samudra Bridal Palace
Online Salon Management System For Samudra Bridal Palace
Online Salon Management System For Samudra Bridal Palace
For
Samudra Bridal Palace
J.A.J.N. Jayaweera
BIT Registration No: R142099
Index No: 1420992
2017/2018
DECLARATION
Figure: Declaration
i|Pag
Online Salon Management
ABSTRACT
Samudra Bridal Palace is a well-recognized and reputed salons among peoples and
modelers around the Maharagama area. They have three salons around Maharagama,
Baralasgamuwa and Nugegoda areas. Day by day their customer base is growing up
and current manual process not efficient enough to provide quick and reliable service
to them. Also hard to maintain salon internal process. Issuing reliable report is much
needed, Because of these salon owner willing to manage their salons from one place
and also to keep their well reputation among salons and peoples much needed.
They have no automation system for their process. Even if they use computers and
tablet they do not have proper system to full fill their needs. They are using record
book to tracking their day by day process in salons. This is very inefficient and
unreliable. And keeping records not accurate with relevant salon data when calculate
reports. And also salary calculation of employees not easy.
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 notification system for 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
employee’s ids and passwords for employees to access the system. In this case salon’s
confidential data will not be available to the unauthorized access.
The project was implemented using Visual Studio 2012 as the IDE and SQL server
used as the DBMS. Coding was done using the C# programming language and angular
2(JavaScript framework). In addition, Visual Paradigm for UML was used to draw the
UML diagrams shown in this interim report.
The system will provide user friendly simple interface which will help them to
make reliable, quick and effective service to their customers.
ii | P a g
Online Salon Management
ACKNOWLEDGEMENTS
I take this space to acknowledge and extend my heartfelt gratitude to those who have
helped me in various ways throughout the project work to make this project a success.
My sincere appreciation goes to the Samudra Bridal Palace owner Mr. Samudra
Siriwardana and staff, who enlightened me about the processes and functionalities of
the salon and co-operated in the course of development of the project.
In the mean time I would like to thanks my supervisors Mr. Dimuthu Lakshan
Amithasekara and Mr. Dilshan Navinda for counseling and supervising me throughout
the development of the project.
I would especially thanks to Mr. Sumedha Milroy for guiding me through all phases of
the project and helping for the dissertation document.
iii | P a g
Online Salon Management
TABLE OF CONTENTS
DECLARATION..............................................................................................................................i
ABSTRACT...................................................................................................................................ii
ACKNOWLEDGEMENTS..............................................................................................................iii
TABLE OF CONTENTS.................................................................................................................iv
LIST OF FIGURES.......................................................................................................................vii
LIST OF TABLE............................................................................................................................ix
LIST OF ACRONYMS....................................................................................................................x
CHAPTER 01-INTRODUCTION.....................................................................................................1
1.1. Background.................................................................................................................1
1.2. Motivations For The Project.......................................................................................1
1.3. Scope Of The Project..................................................................................................2
1.4. User Requirements.....................................................................................................3
1.5. System Requirements.................................................................................................4
1.5.1. Requirements for Web Hosting..........................................................................4
1.5.2. End User Requirements......................................................................................4
1.5.3. Requirements For Software................................................................................4
1.6. Outline Of The Remaining Chapters...........................................................................4
CHAPTER 02-ANALYSIS...............................................................................................................6
2.1. Current Manual System..............................................................................................6
2.2. Weaknesses Of Current Manual System.....................................................................7
2.3. Outline of Existing Similar Solution.............................................................................7
2.4. Requirement Gathering..............................................................................................9
2.5. Requirement Analysis...............................................................................................10
2.6. Functional Requirements..........................................................................................10
CHAPTER 03-DESIGN................................................................................................................11
3.1. Alternative Solutions................................................................................................11
3.2. Selected Solution......................................................................................................11
3.3. Software Development Process Model....................................................................12
3.4. Relevant Design Diagrams........................................................................................12
3.4.1. Use Case Diagram.............................................................................................12
3.4.2. Class diagram for the system............................................................................16
3.4.3. Activity Diagram................................................................................................18
3.4.4. Sequence Diagram............................................................................................19
3.4.5. Database Design And Entity Relationship Diagrams.........................................21
vi | P a g
Online Salon Management
LIST OF FIGURES
Figure: Declaration i
Figure 2.1: Use Case Diagram For Current Manual System 6
Figure 2.2: Main Window of Salon Management System 7
Figure 2.3: Booking View of the JBS System 8
Figure 2.4: Salon Report Creating View 8
Figure 3.1: Use Case Diagram for Owner 13
Figure 3.2: Use Case Diagram for Salon Admin 14
Figure 3.3: Use Case Diagram for Employee 15
Figure 3.4: Class Diagram for New System 17
Figure 3.5: Activity Diagram for System Login 18
Figure 3.6: Activity Diagram for Add New Service 19
Figure 3.7: Sequence Diagram For Add Booking 20
Figure 3.8: Sequence Diagram For Add Service 20
Figure 3.9: Entity Relationship Diagram for the System 21
Figure 3.10: Login Window of the System 22
Figure 3.11: Main Window of the System 23
Figure 3.12: Employee Manage Window 23
Figure 4.1: Solution Structure for Projects in Visual Studio 28
Figure 4.2: Service Add Model 30
Figure 4.3: Angular 2 Date Picker View 38
Figure 4.4: Day Pilot Pro Angular view 38
Figure 5.1: Service Category View 43
Figure 5.2: Validation for Required Fields 43
Figure 5.3: Delete Confirmation Message 44
Figure 5.4: Status Change to “True” for Deleted Records 44
Figure 5.5: Service View 45
Figure 5.6: Validation for required fields in Add Service view 46
Figure 5.8: In DB service table status changed to 1 46
Figure 5.9: User Feedback from Salon Owner 48
Figure 5.10: User Feedback from Beautician 49
vii | P a g
Online Salon Management
viii | P a g
Online Salon Management
LIST OF TABLE
Table 3.1: Use case description for System Login 15
Table 3.2: Use case description for Generate Salon’s Reports 16
Table 3.3: Use case description for Create Bookings 16
Table 3.4: Use case description for complete booking 16
Table 5.1: Test Cases for Service category 43
Table 5.2: Test Cases for Service 45
Table D 1: Test result for online booking 75
Table D 2: Test result for add booking from dashboard 76
Table D 3: Test result for cancel booking from dashboard 76
Table D 4: Test result for complete booking from dashboard 77
ix | P a g
Online Salon Management
LIST OF ACRONYMS
OSMS - Online Salon Management System
SBP - Samudra Bridal Palace
RAM - Random Access Memory
HDD - Hard disk drive
Gb - Gigabyte
RAD - Rapid Application Development
OOAD - Object Oriented Analysis and Designing
ORM - Object Relational Mapper
DBMS - Database Management System
UML - Unified Modeling Language
ER - Entity-Relationship
IIS - Internet Information Services
IDE - Integrated Development Environment
API - Application Programming Interface
CSS - Cascading Style Sheets
ISO - International Organization for Standardization
IEC - International Electrotechnical Commission
FCL - Framework Class Library
CLR - Common Language Runtime
EF - Entitiy Framework
MVC - Model–View–Controller pattern
XAML - Extensible Application Markup Language
HTML - HyperText Markup Language
WCF - Windows Communication Foundation
SOA - Service Oriented Architecture
WSDL - Web Services Description Language
SQL - Structured Query Language
ACID - Atomicity, Consistency, Isolation, Durability
x|Pag
Online Salon Management
CHAPTER 01-INTRODUCTION
1.1. Background
Day by day modern beauty culture is getting rapidly popular among the peoples,
especially among young men and woman. Also they are having a habit of
preferring a usual one beautician. So the salon owners are eager to provide their
services at its best to the customers for make sure they are remain with salon as
long as. In this case they are looking for best way to manage their salons in more
efficiencies and keep customers attractive to salons.
Samudra Bridal Palace is a well-recognized and reputed salons around the
Boralasgamuwa area. The Salon started about five years ago with one employees
in Boralasgamuwa town. By now they have three salon around Maharagama,
Nugegoda, Boralasgamuwa areas. Day by day their customer base is growing and
current manual process not efficient enough to provide quick and reliable service
to them. Managing reliable booking is much needed also generate reports,
Because of these bookings directly involve in day by day salons service.
1|Page
Online Salon Management
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.
2|Page
Online Salon Management
Generate reports :-
3|Page
Online Salon Management
System reports 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.
Main requirement of this system is manage salon process in efficient way. This system
will provide for it,
Booking Module
Product Module
Service Module
HR Module
OSMS Settings Module
Report Module
Billing Module
4|Page
Online Salon Management
At the end of project system should works on customer’s environment. There are
requirements in Hardware and Software to run the new system.
Computer or any mobile device able to run web browser and stable
internet connection.
After the Introduction chapter, the dissertation contains five main chapters.
Chapter 02: ANALYSIS - The Analysis chapter describes the existing system,
requirements and feasibility study for the proposed system and the process model used
to develop the system.
Chapter 03: DESIGN - The Design chapter includes some diagrams relating to the
system design. It further describes the designing approach used and designing of the
data base as well as the user interfaces.
Chapter 04: IMPLEMENTATION - The main codes and the software and hardware
environment used for implementing the system are described in the Implementation
chapter.
5|Page
Online Salon Management
Chapter 05: EVALUTION - The test plan and test cases of the system are given in the
Evaluation chapter.
Chapter 06: CONCLUSION - The final chapter, the Conclusion includes lessons learnt
and the information about further development of the system.
After the main chapters there is a Reference section where all the materials referred to
write the dissertation are given. Furthermore in the appendices, System
Documentation, Design Documentation, Management Reports, Test Results, Code
Listing and the. Finally, a Client Certificate is provided.
6|Page
Online Salon Management
CHAPTER 02-ANALYSIS
This section will cover the process of discovering, analyzing, defining, and
documenting the requirements that are related to the business.
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.
7|Page
Online Salon Management
When carried out further analysis of current manual system some weaknesses were
identified as follows,
2.3.1. JustBookSalon
JustBookSalon, a popular salon directory software is being used by more than
1500 salons across the world. It is highly user friendly, reliable and easily
configurable according to needs of salons. Figure 2.2 describes the main window
of the JustBookSalon system [2].
8|Page
Online Salon Management
The system has features like Billing, Booking, Services management, Employee
management, Product management, Maintain salon details, Manage authentication
and Manage promotions according services and generate various salon reports.
Salon report format creating view shown on Figure 2.4 describes the details about
customers.
9|Page
Online Salon Management
Requirement gathering is the most crucial part of the software development life cycle.
The system is built by using user requirements. Otherwise it is difficult to develop a
good product. In this project interviewing and discussion are the main requirement
gathering techniques [3].
Interview user :-
By using interview it can get clear idea about currently on going manual
process. Users of different levels can be interviewed and that will help to
facilitate users with their different needs.
Observation :-
The study of users in their natural habitats is what observation is about. By
observing users, an analyst can identify a process flow, awkward steps, pain
points and opportunities for improvement. Observation can be passive or active
(asking questions while observing). Passive observation is better for getting
feedback on a prototype (to refine requirements), where active observation is
more effective at getting an understanding of an existing business process.
Either approach can be used to uncover implicit requirements that otherwise
might go overlooked
Document Analysis :-
Before the system is designed it has to analysis books, bills and other
documents of their manual system. This will help to get the domain knowledge
of the business process.
Prototyping :-
Prototyping is a final requirement gathering technique used in this business
process to analyze the requirement. Prototyping was a simple working system
which has been built and it was demonstrated to users and then requested to
submit their requirements, and changes to be made system. Prototyping is a
good method when the user does not have a clear idea about the system.
10 | P a g
Online Salon Management
After gathering requirements from system owner and system users, requirements
are well analyzed for identify the each user’s role in the proposed system and
witch are the functions should have each user role. In this case Use case diagrams
were used for simplify the analysis. Using a use case diagram can clearly identify
external internal user roles and use case for each user roles.
11 | P a g
Online Salon Management
CHAPTER 03-DESIGN
Design is also a very important part in the project. Design data base and design user
interfaces done in this phase. According to the IEEE definition, design is both “the
process of defining the architecture, components, interfaces, and other
characteristics of a system or component” and “the result of [that] process”
There are two different alternates identify for the OSMS for SBP during the
requirement analysis. Those suggested alternate is
Stand Alone System
Standalone systems are able to function without getting help from the
internet and all the path of the system are hosted on single host. This type
of system not suitable for the Sanudra Bridal Palace as they planning to
connect their other salons to manage within system.
12 | P a g
Online Salon Management
13 | P a g
Online Salon Management
Following figure 3.1 illustrates the identified use cases for salon owner in the new
system. It’s simply describes the functionalities for owner in the system. In
addition to the other users of system owner has additional use cases for system
reports. Using system reports owner can get better decisions on the salon
management.
Following Figure 3.3 is for identified use cases for employee in salon. Its express the
deferent use cases that employee work on the system.
15 | P a g
Online Salon Management
More details about use cases can be described using use case description. From these
use case description can get a clear understand about use case diagrams.
A few use case descriptions were presented here to better explain about the use
cases of owner use case diagram. These descriptions were contain overview,
precondition, flow of events and post conditions.
Bellow table 3.1 is Use case description for the login use case.
Use Case Login
Actor All Employees
Overview
Register employees can login to the system
Precondition
Employee must register with the system, Employee should have User Name and Password
Flow of Events
Enter employee Details, Validate employee details, Login to the system
Post Condition
Invalid employee will get the error message and reject login. Valid employee will get the
main window of the system
Table 3.1: Use case description for System Login
16 | P a g
Online Salon Management
Table 3.2 is the use case description for the Generate Salon’s Reports use case.
Use Case Generate Salon’s Reports
Actor SBP/ Owner/ Salon Admin
Overview
Generate Salon’s Reports
Precondition
Employee should login to the system under authorized user type
Flow of Events
Generate salon report using veiled parameters
Post Condition
Relevant Report should be show.
Table 3.2: Use case description for Generate Salon’s Reports
Table 3.3 shows the Use case description for the Create Bookings use case.
Use Case Create Bookings
Actor SBP Owner / Salon Admin
Overview
Create Bookings
Precondition
Employee should login to the system under authorized user type
Flow of Events
Create booking, open booking module and create booking under specific customer.
Post Condition
17 | P a g
Online Salon Management
the system's classes, their attributes, operations (or methods), and the relationships
among objects [6].
Detailed Class diagram for the Samudra Bridal Palace as follows in figure 3.4 will
give an idea about the system structure using relationship between system’s classes.
18 | P a g
Online Salon Management
19 | P a g
Online Salon Management
Following activity diagram Figure 3.5 shows the “Add New Service” in the
system. It describes the activities between user and the system during the insert
salon service to the system. In this activity diagram describes the how SBP staff
add new service to the system.
20 | P a g
Online Salon Management
Following sequence diagram Figure 3.7 illustrate the add booking for customer
from booking dashboard.
21 | P a g
Online Salon Management
22 | P a g
Online Salon Management
Among all the major components of the system, a major role of the system is
played by user interfaces. Interactivity in between system and the user is
managed by the interface. User friendliness, integrated color combination and the
well- organized components are dependent on it.
Without having a user friendly interface, interaction with the system becomes
hard. Privileges must be set by the System Administrator to users in different
ways. Management of those privileges and presenting them effectively to users is
helped by the interfaces.
Log in Window
Login form uses to login to the system for authorized users using a valid username
and password. If username and password correct user allow to login to the system.
Else alert to user that enter the correct password. Figure 3.8 is the preview of login
window.
23 | P a g
Online Salon Management
24 | P a g
Online Salon Management
Visual Studio supports different programming languages and allows the code
editor and debugger to support (to varying degrees) nearly any programming
language,
25 | P a g
Online Salon Management
Visual Code
Visual Studio Code is a source code editor developed by Microsoft for Windows,
Linux and macOS. It includes support for debugging, embedded Git control, syntax
highlighting, intelligent code completion, snippets, and code refactoring. It is also
customizable, so users can change the editor's theme, keyboard shortcuts, and
preferences. It is free and open-source, although the official download is under a
proprietary license.
C# Language
26 | P a g
Online Salon Management
language. Its development team is led by Anders Hejlsberg. The most recent
version is C# 7.0, which was released in 2017 along with Visual Studio 2017.
Angular 2
Angular JS is an open source framework built over JavaScript. It was built by the
developers at Google. This framework was used to overcome obstacles
encountered while working with Single Page applications. Also, testing was
considered as a key aspect while building the framework. It was ensured that the
framework could be easily tested. The initial release of the framework was in
October 2010. Angular 2.0 was officially announced at the ng-conference in
October, 2014.
Microsoft SQL Server 2012, which supplants SQL Server 2008 R2, offers new
capabilities, notable among them the following.
Column Store indexes: Read-only indexes that group data, streamlining the
processing of large data warehouse queries.
Support for Windows Server Core: This is a stripped-down version that places
a far lower demand on computer resources than a full install does.
Power View: Makes it possible to generate mash-ups of business intelligence
(BI) reports.
Enhanced Auditing: Users can customize their audit logs to accommodate a
wider range of events with greater flexibility than was previously possible.
Always On: Users can fail over multiple databases and read secondary copies,
enhancing disaster recovery (DR) operations.
Distributed Replay: A workload can be taken from a production server and
played on another server to test it under realistic conditions before deploying
it.
1. Design Architecture
Project structure built according to the N-Layered architecture. Figure 4.1 is
illustrating the Solution structure for projects in Visual Studio. In the project
list,
Presentation Layer for front end (angular 2 project).
WebAPI Layer for handle API calls
Application Layer
Business Layer for handle business related functions
Domain Layer for handle domain objects
Infrastructure Layer for handle and calls stored procedure
SP_DataAccess Layer for handle common db configuration
28 | P a g
Online Salon Management
29 | P a g
Online Salon Management
1. Database Connection
<configuration>
<connectionStrings>
<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\
MSSQLLocalDB;AttachDbFilename="|DataDirectory|\aspnet-OTEM WebAPI2-
20170530075704.mdf";Initial Catalog="aspnet-OTEM WebAPI2-
20170530075704";Integrated Security=True"
providerName="System.Data.SqlClient"/>
<!-- Connection string for connect to local database -->
<add name="OSMSContext" connectionString="Data Source=localhost;Initial
Catalog=OSMS;Integrated Security=True;" providerName="System.Data.SqlClient"/>
</connectionStrings>
<appSettings>
<!-- Path to save images -->
<add key="ResourceFileLocation" value="E:\BIT\Project\OSMS.WebAPI\Images\"/>
<!-- Web api url -->
<add key="ResourceServerUrl" value="http://localhost:51502/"/>
</appSettings>
<system.web>
<authentication mode="None"/>
<compilation debug="true" targetFramework="4.5"/>
<httpRuntime targetFramework="4.5"/>
<httpModules>
<add name="ApplicationInsightsWebTracking"
type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule,
Microsoft.AI.Web"/>
</httpModules>
</system.web>
</configuration>
30 | P a g
Online Salon Management
Code Level
<div class="row">
<modal #addServiceModal (onClose)="resetServiceModal()">r
<modal-header>
<h4 class="modal-title">Add Service</h4>
</modal-header>
<modal-content>
<form [formGroup]="serviceForm" (ngSubmit)="submitService($event)">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Service Name</label>
<input type="text" class="form-control" formControlName="Name">
<!-- Validation -->
<div *ngIf="serviceForm.controls['Name'].hasError('required') &&
serviceForm.controls['Name'].touched" class="input-error">Please enter Service Name</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Select Branch</label>
31 | P a g
Online Salon Management
<select class="form-control"
(change)="onChangeBranch($event.target.value)" formControlName="BranchId">
<option *ngFor="let bl of branchList" [ngValue]="bl.Id"> {{bl.Name}}
</option>
</select>
</div>
</div>
<div class="col-md-4">
<label>Service Category</label>
<select class="form-control" formControlName="ServiceCategory">
<option *ngFor="let sc of serciveCategoryList" [ngValue]="sc.Id">
{{sc.Name}} </option>
</select>
<!-- Validation -->
<div *ngIf="serviceForm.controls['ServiceCategory'].hasError('required') &&
serviceForm.controls['ServiceCategory'].touched"
class="input-error">Please select Service Sub Category</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Service Time(Min)</label>
<input type="text" class="form-control" formControlName="Duration">
<!-- Validation -->
<div *ngIf="serviceForm.controls['Duration'].hasError('required') &&
serviceForm.controls['Duration'].touched" class="input-error">Please enter Service
Duration</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Service Code</label>
<input type="text" class="form-control" formControlName="Code">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Sort Order</label>
<input type="number" class="form-control"
formControlName="SortOrder">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Service Charge</label>
<input type="number" class="form-control"
formControlName="ServiceCharge">
<!-- Validation -->
<div *ngIf="serviceForm.controls['ServiceCharge'].hasError('required') &&
serviceForm.controls['ServiceCharge'].touched"
class="input-error">Please enter Service Charge</div>
</div>
32 | P a g
Online Salon Management
</div>
<!-- Image Upload Section -->
<div class="col-md-4">
<div class="form-group">
<label>Service Image</label>
<div class="input-group file-upload">
<input type="text" class="form-control" id="service-img"
placeholder="Select a file...">
<div class="input-group-addon">
<span>Browse</span>
<input class="" type="file" (change)="onChange($event)" size="60"/>
</div>
</div>
</div>
</div>
<!-- End Image Upload Section -->
</div>
<div class="">
<div class="form-group">
<label>Description</label>
<textarea class="form-control" rows="5" id="comment"
formControlName="Description"></textarea>
</div>
</div>
</form>
</modal-content>
<modal-footer>
<button type="button" class="btn btn-primary pull-right" data-dismiss="modal"
#closeServiceModal (click)="addServiceModal.close()">close</button>
<button type="submit" [disabled]="!serviceForm.valid" class="btn btn-primary pull-
right">Save</button>
</modal-footer>
</modal>
</div>
/**
* Save Service data to the databese after form validation
* @param {object} service model
* @return {int} sevice id
*/
submitServiceData() {
// Check service form validation
if (this.serviceForm.dirty && this.serviceForm.valid) {
// Variable to hold a reference of addComment/updateComment
let serviceOperation: any;
// Check service add or edit
if (this.serviceModel.Id == undefined) {
this.editing = false;
33 | P a g
Online Salon Management
}
serviceOperation = this._salonServiceService.insertOrUpdateService(this.serviceModel)
// Subscribe to observable
serviceOperation.subscribe(
(service: any) => {
this.uploadImage(service.Id);
if (this.editing) {
this.footerNotification.success('Update', 'Successfully saved');
} else {
this.footerNotification.success('Save', 'Successfully saved');
}
this.closeServiceModal.nativeElement.click();
this.loadServiceList();
if (this.editing) this.editing = !this.editing;
},
(err: any) => {
// Log errors if any
console.log(err);
});
} else if (!this.serviceForm.dirty) {
this.footerNotification.info('Info', 'No changes detected ');
}
}
/**
* save service details
* @param {object} service object
*/
insertOrUpdateService(obj: Object) {
let url = this.commonService._serviceUrl + '/' + 'api/Service/InsertOrUpdateService';
// Convert json object to C# object
let params = this.commonService.convertObject(obj);
return this._http.post(url, params.toString(), this.options)
.map((res: Response) => {
// Success on post request.
return res;
})
.catch((error: any) => {
// Error on post request.
return Observable.throw(error);
});
}
34 | P a g
Online Salon Management
/// <summary>
/// Pass Service data to Service API
/// </summary>
/// <param name="service"></param>
/// <returns>Service Id</returns>
[HttpPost]
public int InsertOrUpdateService(Service service)
{
return ServiceAPI.InsertOrUpdateService(service);
}
6. Service API
/// <summary>
/// Pass Service data to Service Business Layer
/// </summary>
/// <param name="service"></param>
public static int InsertOrUpdateService(Service service)
{
return ServiceBL.InsertOrUpdateService(service);
}
/// <summary>
/// Pass Service data to Service Action
/// </summary>
/// <param name="service"></param>
public static int InsertOrUpdateService(Service service)
{
return new InsertOrUpdateServiceAction(service).Execute(EnumDatabase.OSMS);
}
using OSMS.Domain.DomainObject;
using SP_DataAccess.DbFramework;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Common;
using System.Data.SqlClient;
35 | P a g
Online Salon Management
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace OSMS.DataAccess.SpDbCommands.ServiceSpCommands
{
public class InsertOrUpdateServiceAction : OSMSDbActionBase<int>
{
private readonly Service _service;
/// <summary>
/// Get Database connection and execute stored procedure
/// </summary>
/// <param name="db connection"></param>
/// <returns>Service id</returns>
protected override int Body(DbConnection connection)
{
int serviceCatId;
try
{
const string storedProcedureName = "dbo.OSMS_SVC_InsertOrUpdateService";
var cmd = CreateCommand(CommandType.StoredProcedure,
storedProcedureName);
36 | P a g
Online Salon Management
}
catch (Exception ex)
{
throw ex;
}
return serviceCatId;
}
}
}
9. Stored Procedure
USE [OSMS]
GO
/****** Object: StoredProcedure [dbo].[OSMS_SVC_InsertOrUpdateService] Script Date:
2017-11-07 9:00:16 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author: Janith Jayaweera
-- Create date: 2017/07/03
-- Description: Insert or update service details
-- =============================================
ALTER PROCEDURE [dbo].[OSMS_SVC_InsertOrUpdateService]
-- Add the parameters for the stored procedure here
@id int,
@name varchar(200),
@description varchar(1000) = null,
@isDelete bit,
@imagePath varchar(500) = null,
@duration int = null,
@serviceCharge varchar(500) = null,
@code varchar(500) = null,
@sortOrder int = null,
@serviceCategory int = null,
@branchId int = null,
@serviceId int output
AS
BEGIN
-- SET NOCOUNT ON added to prevent extra result sets from
-- interfering with SELECT statements.
SET NOCOUNT ON;
37 | P a g
Online Salon Management
(Name,
Description ,
IsDelete,
ImagePath,
Duration,
ServiceCharge,
Code,
SortOrder,
ServiceCategory,
BranchId
)
VALUES
(@name,
@description,
@isDelete,
@imagePath,
@duration,
@serviceCharge,
@code,
@sortOrder,
@serviceCategory,
@branchId
)
38 | P a g
Online Salon Management
ng 2 Model
On the system ng2 model used for popups.
39 | P a g
Online Salon Management
The test plan is describes the testing strategies and the approaches to testing
quality assurance will be used to validate the quality of the system. While the
coding system, it was carried out the unit testing to ensure that functionalities are
working as expected. This was done by testing the code unit wise.
An integration testing has been done for the test modules in system. It was
integration of few units of codes. And all the modules together tested as system
testing to confirm all the modules work together. And also as the system users are
40 | P a g
Online Salon Management
able to access via any browsers need to be test at least most common web
browsers like Chrome, Firefox and Edge etc.
Ideally, each test case is independent from the others. Substitutes such as method
stubs, mock objects, fakes, and test harnesses can be used to assist testing a
module in isolation. Unit tests are typically written and run by software
developers to ensure that code meets its design and behaves as intended [19].
White-box testing (also known as clear box testing, glass box testing, transparent
box testing, and structural testing) is a method of testing software that tests
internal structures or workings of an application, as opposed to its functionality
(i.e. black- box testing). In white-box testing an internal perspective of the
41 | P a g
Online Salon Management
system, as well as
42 | P a g
Online Salon Management
programming skills, are used to design test cases. The tester chooses inputs to
exercise paths through the code and determine the appropriate outputs. This is
analogous to testing nodes in a circuit, e.g. in-circuit testing (ICT) [21].
As a rule, system testing takes, as its input, all of the "integrated" software
components that have passed integration testing and also the software system
itself integrated with any applicable hardware system(s). The purpose of
integration testing is to detect any inconsistencies between the software units that
are integrated together (called assemblages) or between any of the assemblages
and the hardware. System testing is a more limited type of testing; it seeks to
detect defects both within the "inter-assemblages" and also within the system as a
whole [23].
43 | P a g
Online Salon Management
In test plan most, important part is test cases writing. Most commonly test cases
include the test case title, inputs, expected results, test case status (Pass/Fail). To
minimized complexity of testing total solution tested by module wise. Test Cases for
the “Test” Module in OSMS
In the table 5.1 it’s showing the test cases and test result for service category.
Mainly adding service category, editing service category, deleting service
category and validation tested on here.
ID Description/steps to test Expected Result/s Actual Result/s Status
1 Click Service Category Service category view should be See Figure 5.1 Pass
on left navigation in loaded in to service window
Service Module
2 Add service category 1-Should be save to database table 1- Record added to the Pass
Values: 2-Text fields should be cleared. database table
Category Name- Face 3- Add Category view should be 2- Text fields get
Description - Facial get closed. cleared 3- View get
treatments 4- New row with the entered closed
Branch - Boralasgamuwa values should be added in to table 4-New record added to
Click save on view. the table on view
3 Add new service 1-Red color border should be See Figure 5.2 Pass
category- appear around the required fields
Click save with empty & shown error massage.
text fields
4 Add new category 1-Should be save to database table 1- Record added to the Pass
Values: “Name, Branch” 2-text fields should be clear. database table
field and click save 3-Table in view should be added 2- Text fields got cleared
new row with entered values. 3-record added to the db
5 Add new test category- 1- Fields validations should Red color border appear Pass
Values: only to be fired around text box
“Description” text field 2- Data should not be insert in to validation messages
and click save database table shown
6 Delete service category- 1- Delete confirmation 1- See Figure 5.3 Pass
Click Delete button in message should be shown to 2-Deleted row
table the users removed from table in
2- If click yes - selected category view
should be removed from view 3- on data base record
3- If click no – selected category update to 1 in status
should not be removed from view column. Figure 5.4
4- deleted record should not be
deleted from database table, status
value should set 1 in database
7 Edit service category- 1-selected service category’s Selected service Pass
Click Edit button in table values should be fills into service category loaded to the
category form. form.
44 | P a g
Online Salon Management
8 Save changes made on 1-database table should be On the DB its changes Pass
service category updated as changes done in fields. applied.
1- Click Edit Change 2- Edit view should be closed Edit view get closed.
values in fields 3-Table in view should be refresh Changes reflected on
2- Click save with new values. view
Bellow Figure 5.1, 5.2, 5.3, 5.4 images are refers to “Actual Result” column in table
5.1 Test Case for Service Category.
45 | P a g
Online Salon Management
In the table 5.2 it’s showing the test cases and test result for the adding service, editing
service, deleting service and validation tested on here.
47 | P a g
Online Salon Management
48 | P a g
Online Salon Management
After implemented the system successfully it was tested by the client side. The user
acceptance testing was carried out by implementing the system at the real working
environment along with the real test data & available conditions in the actual
background.
For the evaluation, system users were selected and they were given an evaluation
form to answer some questions about the system. All the users were asked to
perform their appropriate functionalities and test the system. Finally, their feedback
was collected and analyzed. The final overall results were indicate that system
work properly and they were satisfied about the system. According to the test
results it can manage easily and supply user-friendly environment for the users.
Some bugs were identified during the accepting testing and they were corrected
and also some small features were changed according to the user requirements for
better performance.
Finally, overall feedback was indicated that the system was implemented
successfully with all the objectives and customer satisfaction.
The questionnaire used to assess the customer feedback is given below with test
results. All the users were given this evaluation form and data were collected and
analyze
Figure 5.9 illustrates the product satisfaction survey form filled by salon owner.
Allong with other salon employees feedback for the survey analysed for final
summry product satisfaction.
49 | P a g
Online Salon Management
50 | P a g
Online Salon Management
Figure 5.10 illustrates the product satisfaction survey form filled by salon manager
(Samudra Bridal Palace Maharagema Branch). Allong with other salon employees
feedback for the survey analysed for final summry satisfaction.
51 | P a g
Online Salon Management
Overall satisfaction of SBP staff about the new system is good and Figure 5.11
illustrate the chart for the summary of all the staff answered for the
satisfaction survey form.
Good
28%
Excellent
61%
52 | P a g
Online Salon Management
Manage Booking
Manage Employee
Manage Billing
Manage Services and Product
And the nonfunctional requirements of the new system is given bellow as
summary.
User Friendliness
Improved Reliability
Simple Interfaces
All the above functional and nonfunctional requirements are fulfill by the new
system and during the system development some more future enhancements ware
identified.
54 | P a g
Online Salon Management
REFERENCE
[1] Wikipedia. “Requirements analysis” Internet:
http://en.wikipedia.org/wiki/Requirements_analysis [May 14 2017]
[2] Accurate iOneSoft (Pvt.) Ltd. “JustBookSalon”. Internet:
http://justbooksalon.com [May 10 2017]
55 | P a g
Online Salon Management
56 | P a g
Online Salon Management
APPENDIX A – SYSTEM
DOCUMENTATION
The system documentation provides guidance for system administrator to setup system
on server environment to use it. This section contains importance information about
system configurations, steps how to setup and additional details about hardware and
software configuration needed.
Hardware Requirements
Personal Computer
Web Server
Printer
Software Requirements
Web Browser
Web Server
.NET 4.5
SQL Server 2012
IIS
57 | P a g
Online Salon Management
Step2: The installation will then check all the pre-requisites that are required to install
the SQL server. If everything is fine, you will see green checks as shown below. Click
OK.
58 | P a g
Online Salon Management
Step4: The installation does the pre-requisite checks once again as you can see below.
59 | P a g
Online Salon Management
Step6: Under Instance Configuration, choose Default instance. You can also define
custom instance name. Similarly, you have the option to choose the location where the
instance will be stored. I will leave the defaults and click Next button.
60 | P a g
Online Salon Management
Step9: Under Ready to Install, review the installation information and click the Install
button.
61 | P a g
Online Salon Management
Step10: After the installation is complete, click Close. You can now start creating
databases.
62 | P a g
Online Salon Management
8. Expand Common HTTP Features, and then select the Static Content feature.
9. Expand Security, and then select the following features:
Request Filtering
Windows Authentication
10. To install Internet Information Service (IIS) Manager, under Internet Information
Services, expand Web Management Tools, and then select IIS Management
Console. This step is optional
12. To verify that the web server has been installed correctly, start your browser, and then
type http://localhost in the address. The default web site opens and should display an
IIS 8 image. For more information and to install on Windows 7 [24]
63 | P a g
Online Salon Management
APPENDIX B – DESIGN
DOCUMENTATION
Following Figure B.1 is activity diagram for add new branch salon to the system. In
this scenario when user login system will check the credential and load the authorized
module for user. Then user select “SMP Settings” module form view system will load
the “Branch Salons” view. Then user able to add details for new branch and click
“Save”. Then the system add new branch salon to data base and refresh the view for
show the newly added branch salon.
Following Figure B.2 is activity diagram for deleting a services from system . In this
scenario system shows the branch salons in database on the view. User select the delete
64 | P a g
Online Salon Management
for selected collecting center. System will check the selected collecting center is in
used or not. If it is in use show message can’t delete. User can click ok to close
message or after 20 second system will automatically closed the message. If it is not in
use, record will delete (change the status) and refresh the view and removed the
deleted collection center from view.
65 | P a g
Online Salon Management
Home Page
When the system administrator login to the system successfully it will appear the
system home page (Figure C.1). On the home page user will see all the modules and
some important details in categories view.
It’s included,
Modules
o Booking
o Services
o Products
o HRM
o Reports
o Invoice
Brunch wise current ongoing booking details
Current day employee attendance
Stock details of products use in in house.
Booking summery in chart view.
Calendar view to direct access to booking view
66 | P a g
Online Salon Management
Handel Booking
Create Bookings
Select a Branch Salon
When user select booking module, it will show the branch selecting view as shown in
Figure C.2. Main process for create booking start from here.
67 | P a g
Online Salon Management
Service
Customer
In first step, employee can search and select relevant service (Figure C.5)
68 | P a g
Online Salon Management
When the booking completed with confirmation, it will appear on the dash board as
shown in Figure C.8.
69 | P a g
Online Salon Management
70 | P a g
Online Salon Management
View Booking
Click on a booking showing on dashboard, it will appear menu with all four options. Select
view booking option (Figure C.8).
It will appear the detail view of the relevant booking as shown in Figure C.9.
71 | P a g
Online Salon Management
Modify Booking
Select modify booking from the menu appear when click on booking on dashboard. It
will show the modify booking view. As same as add booking view user can change the
details of the booking from modify booking view (Figure C.11.)
Complete Booking
Select complete booking from the menu appear when click on booking on dashboard.
It will appear the invoice view with the relevant service charge details as shown on
Figure C.9.
72 | P a g
Online Salon Management
73 | P a g
Online Salon Management
APPENDIX D – MANAGEMENT
REPORTS
OSMS provide various types of management reports for the owner. And even more
reports can be added to the system with help of developers. These reports can help
salon owners to make management decisions. Owner can generate results for reports
by changing report criteria. Even it can be download as PDF files and it can use to
print hard copy of report.
Following Figure D.1 is report for salon service bookings. For the selected date range
owner can generate a report of bookings for all salon or selected salon.
Following Figure D.2 is report for employee attendance. Salon owner can be generate
employee work record from this report. Report generate information about employee
working hours and overtime. Mainly for employee salary and commotion.
74 | P a g
Online Salon Management
Following figure D.3 is report of employee wise booking count for selected date range.
This report also can be used to measure employee productivity.
75 | P a g
Online Salon Management
Following figure D.4 is report of daily income from completed appointment booking.
It’s help owner to have an idea about daily income of each branch.
76 | P a g
Online Salon Management
77 | P a g
Online Salon Management
78 | P a g
Online Salon Management
79 | P a g
Online Salon Management
Delete Function
/**
* Delete confirmation
* @param {object} service
*/
confirmDelete(service: any) {
this.deleteStatus = true;
this._salonServiceService.deleteService(service.Id)
.subscribe(reuslt => {
// Reload service page
this.loadServiceList();
}, errorMessage => {
// Log errors if any
console.log(errorMessage);
});
}
80 | P a g
Online Salon Management
/**
* delete service cateogry
* @param {any} service category id
*/
deleteServiceCategory(id: any) {
let url = this.commonService._serviceUrl + '/' + 'api/Service/DeleteServiceCategory';
// let body: string = obj;
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers });
var x = "Id=" + id;
/// <summary>
/// Pass service id to Service API
/// </summary>
/// <param name="service"></param>
/// <returns>true of false</returns>
[HttpPost]
public bool DeleteService(Service service)
{
return ServiceAPI.DeleteService(service.Id);
}
Service API
/// <summary>
/// Pass Sevice Id to Business layer
/// </summary>
/// <param name="serviceId"></param>
public static bool DeleteService(int serviceId)
{
return ServiceBL.DeleteService(serviceId);
}
81 | P a g
Online Salon Management
/// <summary>
/// Pass Service if to data access layer
/// </summary>
/// <param name="serviceCategoryId"></param>
public static bool DeleteService(int serviceCategoryId)
{
return new DeleteServiceAction(serviceCategoryId).Execute(EnumDatabase.OSMS);
}
using OSMS.Domain.DomainObject;
using SP_DataAccess.DbFramework;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Common;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace OSMS.DataAccess.SpDbCommands.ServiceSpCommands
{
public class DeleteServiceAction : OSMSDbActionBase<bool>
{
private readonly int _serviceId;
82 | P a g
Online Salon Management
return true;
}
catch (Exception ex)
{
throw ex;
}
}
}
}
Stored Procedure
USE [OSMS]
GO
/****** Object: StoredProcedure [dbo].[OSMS_Common_Update] Script Date: 2017-11-08 1:02:38
AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author: Janith Jayaweera
-- Create date: 2017-07-08
-- Description: Common Update
-- =============================================
ALTER PROCEDURE [dbo].[OSMS_Common_Update]
@tableName varchar(50),
@fields varchar(max),
@values varchar(max)
AS
BEGIN
-- SET NOCOUNT ON added to prevent extra result sets from
-- interfering with SELECT statements.
SET NOCOUNT ON;
DECLARE @sql nvarchar(max)
-- Insert statements for procedure here
83 | P a g
Online Salon Management
APPENDIX G – CLIENT
CERTIFICATE
84 | P a g
Online Salon Management
INDEX
.
H
.Net.....................................................................24,25
.NET Framework...............................................24,60 Hardware............................................................,4, 24
HARDWARE...........................................................4
A
I
ACTIVITY DIAGRAM........................................,18
Analysis..............................................................51,53 Implementation...................................................4, 24
ANALYSIS.............................................................51 IMPLEMENTATION...............................................4
appreciation.............................................................iii Interface................................................................,v,1
automation................................................................ii Interview user............................................................9
B L
Language.....................................................12, 16, 24
BIT........................................................................i, iii
C M
Manager..................................................................61
Client...................................................................,5,23 Microsoft........................................................6,24, 53
CONCLUSION.......................................................51 Model........................................................,iv,vii,x, 12
CURRENT MANUAL SYSTEM........................,6,7 SQL....................................................................24,53
customer base.........................................................., 1 SQL Server......................................................,viii,24
customers....................................................1,2,3,7,10
O
D
Object Oriented....................................................., 12
Database........................................................21,24,29 Observation...............................................................9
Database Management System............................., 24 Owner............................................................., vii, 10
Delete.............................................35,36,42,44,62,76
DESIGN.........................................,x,4,9,11,12,21,22
Designing............................................................,4,51 P
Development Tools................................................,24
Document Analysis...................................................9 PROPOSED SYSTEM................................2,4,10,12
Prototyping................................................................9
E
R
Effective............................................................., 9,22
ENTITY RELATIONSHIP DIAGRAMS..............21 Reliable............................................................,1,6,10
Entity-Relationship...................................................x Reports..........................................................13,38,72
EVALUTION...........................................................5 reputation..................................................................ii
REQUIREMENT..................................,3,4,6,9,11,39
F
S
full fill...................................................................,2,6
SCOPE................................................................,2,41
85 | P a g
Online Salon Management
Software........................................................39,40,41
USE CASE DIAGRAM.....................................12,53
supervisors............................................................, 51
V
U
View......................................................................, 10
unauthorized access................................................, Visual Studio............................................., 24, 27, 51
7
Use Case....................................................,vii,ix,6,12
86 | P a g