A PROJECT REPORT ON

SAVARA
ONLINE GARMENTS SHOPPING SYSTEM

AT
SINHGAD INSTITUTE OF BUSINESS ADMINISTRATION AND RESEARCH
(PUNE)

BY
ROSHANI HANMANT BABAR

SAVITRIBAI PHULE PUNE UNIVERSITY

In Partial Fulfillment of
MASTERS IN COMPUTER APPLICATION

SINHGAD INSTITUTE OF BUSINESS ADMINISTRATION AND RESEARCH

KONDHWA, PUNE-411048
2023-2024

1
 CERTIFICATE OF ORIGINALITY

This is to certify that the project report entitled Savra – Online garments shopping system
Submitted to the Department of Computer Applications, Sinhgad Institute of Business
Administration and Research in partial fulfillment of the requirement for the award of the
degree of MASTER OF COMPUTER APPLICATIONS (MCA Affiliated to Savitribai Phule
PuneUniversity), is an original work carried out by
Mr/M Babar Roshani Hanmant Exam No 1865 under my guidance.The matter
embodied in this project is a genuine work done by the student and has not been submitted
whether to this Organization or to any other University/ Organization for the fulfillment of
the requirement of any course of study.

Signature of the Student

Name of the student:

Signature of the Guide

Name and Designation of the Guide

Signature of Director-
MCA Dr. Netra Patil

Date

2
 CERTIFICATE OF APPROVAL

This is to certify that the project report Entitled SAVARA-Online Garments Shopping
System submitted to the Department of Computer Application, Sinhgad Institute of Business
Administration and Research in partial fulfillment of the requirement for the award of the
Degree of MASTER OF COMPUTER APPLICATIONS (MCA Affiliated to Savitribai Phule
Pune University) is an original work carried out by Mr./Ms Babar Roshani Hanmant

The matter embodied in this project is a genuine work done by the student and has been
certified by the following internal and external examiners deputed by Savitribai Phule Pune
University.

Internal Examiner: External Examiner:

3
 INTERNSHIP OFFER LETTER
Maverick IT Industries Pvt. Ltd.,
Office no.-5, First Floor,
Chaitanya Industrial Estates,
Nahre, pune-411041

This is certified to that, Miss Roshani Hanmant Babar, MCA Final Year
student from “Sinhgad Institute of Business Administration and Research ,
Pune, Maharashtra 412308”.
University Name – Savitribai Phule Pune University, Pune
Duration – 11-Dec-2023 to 11-june-2024
Position- Python Developer
Department- Development

Dear Roshani Hanmant Babar,

We are delighted to extend an offer for the position of Intern at Maverick IT
Industries Pvt. Ltd. We believe that your skills and enthusiasm for software
testing make you an excellent candidate for this internship.
Responsibilities:
As a Python Developer at Maverick IT Industries Pvt. Ltd. , your key
responsibilities will include:

Backend Development:

• Designing and developing scalable, high-performance server-side applications

using Python.
• Collaborating with cross-functional teams to integrate user-facing elements
with server-side logic.

4
5
 Project Report Index
INDEX
CHAPTER 1: INTRODUCTION
1.1 Existing System
1.2 Scope of Work
1.3 Operating Environment – Hardware and Software

CHAPTER 2: PROPOSED SYSTEM

2.1 Proposed System
2.2 Objectives of System

CHAPTER 3: ANALYSIS & DESIGN

3.1 Analysis Phase
3.1.1 Object Diagram
3.1.2 Class Diagram
3.1.3 Use Case Diagrams
3.2 Design Phase
3.2.1 Sequence Diagram
3.2.2 Collaboration Diagram
3.2.3 Activity Diagram
3.2.4 State Chart Diagram
3.3 Module Specifications

CHAPTER 4: BACK END SPECIFICATIONS

4.1 Entity Relationship Diagram (ERD)
4.2 Database Design
4.3 Data Dictionary

CHAPTER 5: FRONT END SPECIFICATIONS

5.1 Input Screens
5.2 Validation controls
5.2.1 Test Cases
CHAPTER 6: LIMITATIONS AND FUTURE ENHANCEMENTS
6.1 Limitations of the system
6.2 Proposed Enhancements
6.3 Conclusion

Bibliography
6
Chapter 1: INTRODUCTION

INTRODUCTION
An online shopping system is a process in which people (specifical customers) are being
provided with the option of purchasing goods and services directly from the seller, all in a real-
time environment. Online shopping is an application of the internet as electronic commerce.
From the business perspective, customers usually find the products more attractive, on
websites, as they get all the details available there.

People in large number are doing online shopping today, and it is not only because it is
convenient as one can shop from home, but also because there is an ample number of varieties
available, with a high competition of prices, and also it is easy to navigate for searching
regarding any particular item.

For sellers, their product has access to the World-Wide market, which also increases the
number of customers and enhances customer relationships. Also, web stores are a means for
small-scale companies to launch their products at the global level. The main objective of this
project is to develop a web-oriented application that can provide an online shopping feature to
users. In other words, the project aimed at creating a virtual shop environment for users, in
some handy form, which will be available to them through the internet. Although the idea of
developing online shopping websites is not new in the electronic market and has been evolved
soon after the World Wide Web(www).

In the present scenario, the biggest market for this (online shopping) business is by highly
educated people, mostly. This system has been designed keeping in mind all the aspects such
as loading the data, complexity, and maintaining the security of user credentials. Here in this
system, complexity refers to the total number of features being provided to users, and their
smooth arrangement and functioning required.

This system involves its own database to be maintained. As the information or details about
the products are stored in the database (like RDBMS, online databases on a paid basis like
firebase, etc.) for the server-side functionalities. The Server process is for dealing with the
customer’s detail and the items that are shipped to different locations based on the addresses
provided by the customers.

The application design contains two modules one is for the customers who wish to buy the
articles. And another is for the store owners who maintain and updates the information
regarding the articles and about the customers. The end-user to use this product are the common
people for whom the application is to be hosted on the web and the admin maintains the
database. The application that is deployed on the customer’s database like RDBMS, the
information regarding the items is highlighted and forwarded from the database for the
customer (front view) based on the choice through the menu list and based on all these searches
and transactions the database of all the products is updated at the end of each transaction.

The entries for products, into the application, can be made through various screens designed
for various levels of users. As soon as, the authorized personnel feeds the relevant data into the
system, several reports are generated based on the security policy used.
7
1.1 EXISTING SYSTEM AND NEED OF SYSTEM:

EXISTING SYSTEM:
The present scenario for shopping is to visit the shops and market manually and then from the
available product list one needs to choose the item he or she wants and then pay for the same
item mainly in cash mode is done, as not every society is well educated and aware to use net
banking or card modes or wallets etc.

This system is not much user-friendly as one needs to go to the market physically and then
select items only from the available list. So mostly it is difficult to get the product as per our
desire. Description About the products is less available and are mostly verbal only. For this
type of shopping, one needs to have an ample amount of free time.

Also, not really good markets exist everywhere, so many times good markets become out of
reach for certain people. In the proposed system customers need not go to the shops for
purchasing the products. He/she can order the product he/she wishes to buy through the use of
this system. The shop owner can be the admin of the system.

The shop owner can appoint officials particularly to handle this, who will help the owner in
managing the customers and product orders. The system also endorses a home delivery system
for delivering the purchased products.

1.2 SCOPE OF SYSTEM:

Our designed online shopping system provides a 24×7 service, that is customers can surf the
website, place orders anytime they wish to. Also, the delivery system works 24×7 hours a week.
Some of the features that can be modified and added to this system in the future involve its
implementation by local shopkeepers, where shops will be providing an online interface to
customers for shopping and placing orders.

Then some delivery persons can perform their work. This will be adding on benefit for the
customers as it will save their time, plus it adds on for the shopkeepers also, as people will
continue to shop from local shops rather than preferring to supermarkets every time.

Also, since the deliveries from these local vendors will not be as time-consuming as these days
Flipkart, Amazon, etc. take but rather will be delivered the same day of an order placed. Else
the shopkeeper can ask the customer that the product will be available by the next day, so if
he/she still wants to place the order, it can be done.

Again, return or exchange will be easy since the delivery boy can even do it as the store is
nearby. Including a chatbox for public benefit is also a great idea via which people can directly
have a conversation with some officials regarding any type of queries

8
1.3 OPERATING ENVIRONMENT

Software Requirements

▪ ANGULAR
▪ HTML
▪ CSS
▪ JavaScript
▪ PHP
▪ MySQL
▪ Bootstrap Framework

Hardware Requirements
• Processor: minimum 1 GHZ; recommended 2GHZ or more
• Hard Drive: minimum 32 GB; Recommended 64 GB or more
• Memory (RAM): Minimum 1GB; Recommended 4 GB or more
• Camera: With good quality
• Ethernet connection(LAN) or a Wireless adapter

9
CHAPTER 2: PROPOSED SYSTEM:

2.3 USER REQUIREMENT:

Functional requirements :
1. New Registration
2. Personal details
3. Test Functionality
4. check app operation and action

5. focus on user requirements

Non-functional requirements:
1. Performance and Availability Requirements
2. Maintainability Requirements
3. Security Requirements
4. Software Quality Attributes
5. Relibility
6. Robustness

10
CHAPTER 3: SYSTEM ANALASYS AND DESIGN:

3.1.1 Class object diagram:

11
3.1.2 USE CASE DIAGRAM:

12
3.2 DESIGN PHASE:
3.2.1 Sequence Diagram:
Admin side:

13
User side:

14
3.2.2 Collaboration Diagram:

15
3.2.3 Activity Diagram:

16
17
3.2.4 State Chart Diagram:

18
3.3 module specification:

• ADMIN PANAL:
Order Management Module:
Order History: Allows users to view their past orders.
Order Tracking: Provides tracking information for orders in transit.
Order Status: Updates users on the status of their orders (processing, shipped, delivered,
etc.).
Search and Filter Module:
Search: Enables users to search for products based on keywords, categories, or
attributes.
Filters: Allows users to refine their product search based on parameters like price range,
size, color, etc.
User Profile Module:
View/Edit Profile: Allows users to view and update their personal information.
Order History: Displays the user's order history.
Wishlist: Enables users to add products to their wishlist for future reference.
Admin Dashboard Module:
Overview: Provides an overview of sales, orders, and other key metrics.
Product Management: Allows administrators to manage products, categories, and
attributes.
Order Management: Enables administrators to view and manage orders, including
processing returns/refunds.
Reporting Module:
Sales Reports: Generates reports on sales performance over a specific period.
Inventory Reports: Provides insights into inventory levels and product popularity.
User Analytics: Analyzes user behavior and preferences to optimize marketing
strategies.
Security Module:
Data Encryption: Ensures sensitive user data is encrypted during transmission and
storage.
Authentication & Authorization: Implements secure authentication and authorization
mechanisms to prevent unauthorized access.
19
 Secure Payment Gateway Integration: Integrates with trusted payment gateways to
ensure secure transactions.
Notification Module:
Order Confirmation: Sends confirmation emails or messages to users after placing an
order.
Order Updates: Sends notifications to users about order status changes (e.g., shipped,
delivered).
• CUSTOMER PANAL:
User Authentication Module:
Sign up: Allows users to create new accounts by providing necessary details.
Login: Authenticates users based on their credentials.
Forgot Password: Enables users to reset their passwords if forgotten.
Product Management Module:
Add/Edit/Delete Products: Allows administrators to add, update, or remove products
from the catalog.
Categorization: Supports categorizing products into various categories and
subcategories for easy navigation.
Product Attributes: Manages product attributes such as size, color, material, etc.
Shopping Cart Module:
Add/Remove Items: Allows users to add items to their shopping cart or remove them.
Update Quantity: Enables users to adjust the quantity of items in the shopping cart.
Save Cart: Allows users to save their shopping cart for future sessions.
Checkout Module:
Shipping Address: Collects shipping address details from users.
Payment Options: Supports various payment methods such as credit/debit cards,
PayPal, etc.
Order Summary: Displays a summary of the order before finalizing the purchase

20
CHAPTER 4: BACKEND SPECIFICATION

4.1 ER Diagram:

21
4.3 Normalization Database Design
Database:

22
23
24
Chapter 5: FRONTEND SPECIFICATION

Input screen:

Client site:

25
26
27
28
29
30
Admin site:

31
32
5.1 Sample Code:

Login Page:
<div id="page-content" style="margin-top: 110px;">
<!-- Page Title -->
<div class="page text-center">
<div class="page-title">
<div class="wrapper">
<h1 class="page-width" style="font-family: sans-serif;">Login</h1>
</div>
</div>
</div>
<!-- End Page Title -->
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 main-col offset-md-3">
<div class="mb-4">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<!-- <div class="form-group">
<label for="CustomerEmail">Name</label>
<input type="text" [(ngModel)]="userName" placeholder="" id="CustomerEmail" class=""
autocorrect="off" autocapitalize="off" autofocus="">
</div> -->
<div class="form-group">
<label for="CustomerEmail" class="login_label">Mobile No</label>
<input type="text" [(ngModel)]="Mobile_No" name="Mobile_No"
#Mobile_NoInput="ngModel" required id="CustomerEmail" style="height: 32px;" class=""
autocorrect="off" autocapitalize="off" autofocus="">
<div *ngIf="Mobile_NoInput.invalid && (Mobile_NoInput.dirty ||
Mobile_NoInput.touched)" class="text-danger">
<div *ngIf="Mobile_NoInput.errors?.['required']" class="login_msg">Name is required.
</div>
33
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<!-- <div class="form-group">
<label for="CustomerPassword">Password</label>
<input type="password" [(ngModel)]="password" placeholder="" id="CustomerPassword"
class="">
</div> -->
<div class="form-group">
<label for="CustomerPassword" class="login_label">Password</label>
<div style="position: relative;">
<input type="{{ showPassword ? 'text' : 'password' }}" [(ngModel)]="password"
name="password" style="height: 32px; padding-right: 30px;" #passwordInput="ngModel"
required minlength="6" id="CustomerPassword" class="">
<i class="bi bi-eye" style="position: absolute; top: 50%; right: 10px; transform: translateY(-
50%);" (click)="togglePasswordVisibility()"></i>
</div>
<div *ngIf="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)"
class="text-danger">
<div *ngIf="passwordInput.errors?.['required']" class="login_msg">
Password is required.
</div>
<div *ngIf="passwordInput.errors?.['minlength']">
Password must be at least 6 characters long.
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="text-center col-12 col-sm-12 col-md-12 col-lg-12">
<button *ngIf="!isLoggedIn()" type="button" class="btn btn-dark mb-3" (click)="login()"
[disabled]="!Mobile_No || !password" style="border-radius: 3px;">Log In</button>
34
<button *ngIf="isLoggedIn()" type="button" class="btn btn-dark mb-3"
(click)="logout()">Welcome, {{ getMobile_No() }}</button>
<a *ngIf="isLoggedIn()" (click)="logout()" style="border-radius: 3px;">Logout</a>
<p class="mb-4">
<a id="RecoverPassword" routerLink="/forgot" class="Create_Forgot">Forgot your
password?</a> &nbsp; | &nbsp;
<a *ngIf="!isLoggedIn()" routerLink="/signup" id="customer_register_link"
class="Create_Forgot">Create account</a>
</p>
<p class="text-danger">{{ errorMessage }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Signup Page:
<div id="page-content">
<!--Page Title-->
<div class="page text-center">
<div class="page-title">
<div class="wrapper">
<h1 class="page-width">SignUp</h1>
</div>
</div>
</div>
<!--End Page Title-->

<div class="container">
<div class="row">

35
 <div class="col-12 col-sm-12 col-md-6 col-lg-6 main-col offset-md-3">
<div class="mb-4">
<form #signupForm="ngForm" (ngSubmit)="signup()">
<!-- Name field -->
<div class="form-group">
<label style="font-family: sans-serif; font-size: 16px; color:#001c2b; margin-
bottom:0.1rem ;" for="CustomerName" >User Name</label>
<input style="font-family: sans-serif; font-size: 16px; color:#001c2b;
height:32px;"type="text" class="sign_Input" [(ngModel)]="customer.User_Name"
name="customer[User_Name]" placeholder=""
id="CustomerName" class="form-control" required>
<div *ngIf="signupForm.controls['customer[User_Name]'].invalid &&
(signupForm.controls['customer[User_Name]'].dirty ||
signupForm.controls['customer[User_Name]'].touched)"
class="text-danger" style="font-family: sans-serif; font-size: 16px;
color:#001c2b;">
User Name is required.
</div>
</div>
<!-- Password field-->
<div class="form-group">
<label style="font-family: sans-serif; font-size: 16px; color:#001c2b; margin-
bottom:0.1rem ;" for="CustomerPassword" >Password</label>
<input style="font-family: sans-serif; font-size: 15px; color:#001c2b; height:32px;"
class="sign_Input" type="password" [(ngModel)]="customer.Password1"
name="customer[Password1]" placeholder=""
id="CustomerPassword" class="form-control" minlength="6" required>
<div *ngIf="signupForm.controls['customer[Password1]'].invalid &&
(signupForm.controls['customer[Password1]'].dirty ||
signupForm.controls['customer[Password1]'].touched)"
class="text-danger" style="font-family: sans-serif; font-size: 16px;
color:#001c2b;">
Password is required and should be at least 6 characters long.
</div>
</div>

36
 <!-- Mobile field -->
<div class="form-group">
<label style="font-family: sans-serif; font-size: 16px; color:#001c2b; margin-
bottom:0.1rem ;" for="CustomerMobile" >Mobile No</label>
<input type="text" style="height:32px;" [(ngModel)]="customer.Mobile_No"
name="customer[Mobile_No]" class="sign_Input" placeholder=""
id="CustomerMobile" class="form-control" pattern="[0-9]{10}" required
style="font-family: sans-serif; font-size: 16px; color:#001c2b; height: 32px;">
<div *ngIf="signupForm.controls['customer[Mobile_No]'].invalid &&
(signupForm.controls['customer[Mobile_No]'].dirty ||
signupForm.controls['customer[Mobile_No]'].touched)"
class="text-danger" style="font-family: sans-serif; font-size: 15px;
color:#001c2b;">
Mobile number is required.
</div>
</div>
<div class="form-group">
<label style="font-family: sans-serif; font-size: 16px; color:#001c2b; margin-
bottom:0.1rem ;" for="CustomerMobile" >Email Id</label>
<input type="text" [(ngModel)]="customer.Email_Id" name="customer[Email_Id]"
class="sign_Input" placeholder=""

id="CustomerEmail_Id" class="form-control sing_label" required style="font-

family: sans-serif; font-size: 16px; color:#001c2b; height:32px;">
<div *ngIf="signupForm.controls['customer[Email_Id]'].invalid &&
(signupForm.controls['customer[Email_Id]'].dirty ||
signupForm.controls['customer[Email_Id]'].touched)"
class="text-danger" style="font-family: sans-serif; font-size: 15px;
color:#001c2b;">
Email Id is required.
</div>
</div>

<!-- Submit button -->

<div class="text-center" style="font-family: sans-serif; font-size: 15px;
color:#001c2b;">

37
 <!-- Submit button-->
<button type="submit" class="btn btn-dark mb-3" [disabled]="!signupForm.valid"
style="border-radius: 3px;">Sign Up</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Cart Page:
<br>
<br>

<div class="container">
<div class="row">

<div class="col-lg-6 col-md-12">

<ul style="margin-top: 70px;margin-left: -15px;"
class="menu-list d-flex flex-wrap justify-content-center justify-content-md-start">
<li class="d-inline-block mr-md-4"
(click)="toggleUnderline('orders');showCart();showTotal();"
[class.selected]="selectedItem === 'orders'"
style="font-family: sans-serif; font-size: 17px; color:#001c2b;">&nbsp;SHOPPING
BAG &nbsp;&nbsp;&nbsp;
<span *ngIf="selectedItem === 'orders'" class="underline-span"></span>
</li>
<li class="d-inline-block mr-md-4 visually-hidden" (click)="toggleUnderline('delivered-
orders');showWishList();"
[class.selected]="selectedItem === 'delivered-orders'"
style="font-family: sans-serif; font-size: 17px;
color:#001c2b;">WISHLIST&nbsp;&nbsp;

38
 <span *ngIf="selectedItem === 'delivered-orders'" class="underline-span"></span>
</li>

</ul>

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

<div id="btns" *ngIf="ShowBtn" style="font-family: sans-serif; font-size: 20px;

color:#001c2b;position:absolute;">
<button style="font-family: sans-serif; font-size: 13px; background-color:#001c2b;color:
white;" name="clear" class="btn btn-secondary btn--small small--hide"
(click)="clearCart()">Clear Cart</button>&nbsp;
<button name="update" class="btn btn-secondary position-relative"
style="font-family: sans-serif; font-size: 13px; background-color:#001c2b;color: white;"
name="update"
class="btn btn-secondary btn--small cart-continue ml-
2"[routerLink]="['/productList']">Shop More<i class="bi bi-arrow-right"></i> </button>
<!-- <button style="font-family: sans-serif; font-size: 13px; background-
color:#001c2b;color: white;" name="update" class="btn btn-secondary btn--small cart-
continue ml-2"[routerLink]="['/checkout']">Checkout</button> -->
</div>

<div *ngIf="showCartForm" style="max-width: 800px; margin: 0 auto; margin-top: 60px;

border: none; margin-left: 100px; margin-bottom: 40%;">

<div class="row" style="display: flex; flex-wrap: wrap; justify-content: space-between;">

<div id="mobileView" class="col-md-6" *ngFor="let item of cartItems; let i = index"
style="width: 48%;height: 260px; margin-bottom: 20px;">
<div id="img1" style="display: flex; ">

39
 <img style="width:100%;height: 200px;margin-top: -5%;"
[src]="defaultUrl+item.Images[0]?.P_URL"
alt="Image of Selected Product" (click)="viewProduct(item.Product_Code_Id)">
<div style="margin-top: 12px; width: 100%;" >
<div style="margin-top: -30px; margin-left: 8%; height: 180px;" class="card-body">
<h5 style="font-family: sans-serif; font-size: 15px; color:#001c2b; width: 175px;"
class="card-title">{{
showMore ? item.Product_Name : (item.Product_Name | slice:0:27) }}
<span *ngIf="item.Product_Name.length > 27">
<span *ngIf="!showMore" class="dot">..</span></span></h5>
<h5 style="font-family: sans-serif; font-size: 15px; color:#001c2b;margin-top: 1%;"
class="card-text">RS. {{ item.Rate
}}</h5>

<h5 aria-hidden="true" style="font-family: sans-serif; font-size: 18px;

color:#001c2b;">
QTY
<a style="font-family: sans-serif; font-size: 20px; color:#001c2b; padding-top: 0px;
padding-left: 4px;"
(click)="decreaseQuantityTable(i)">-</a>
<input
style="font-family: sans-serif; font-size: 20px; color:#001c2b; width: 45px; height:
30px; border: none; text-align: center;"
type="text" id="Quantity" name="quantity"
[value]="cartItems[i].Quantity"(input)="manualQuantityUpdate($event, i)">
<a style="font-family: sans-serif; font-size: 20px; color:#001c2b;"
(click)="increaseQuantityTable(i)">+</a>
</h5>

<div style="display: flex; align-items: center;">

<strong
style="font-family: sans-serif; font-size: 20px; color:#001c2b; margin-right: 10px;
margin-bottom: -3px;">{{
item.Sizes }}</strong>

40
 </div>

<!-- <button
style="font-family: sans-serif; font-size: 15px; color:#001c2b; background-color:
lightgrey; margin-top: 20px;">TRACK</button> -->

<br>
<div>
<h5 (click)="toggleHeart(item)"style="float:right" class="visually-hidden"
style="font-size: 14px; margin-bottom: 20px;" type="submit">Move to Wishlist</h5>
<h5 style="font-family: sans-serif; font-size: 13px; color:#001c2b;"
class="card-title1" (click)="removeItem(i)">CANCEL</h5>

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

<div *ngIf="total" style="display: inline;">

<span id="total" style="display: block; text-align: left;">
<strong style=" margin-left: 10%; font-family: sans-serif; font-size: 20px; color:
#001c2b;">TOTAL RS.</strong>
<span style="font-family: sans-serif; font-size: 13px; color: #001c2b; display: block; text-
align: center; margin-left: -35%;">
{{SharedService.calculateGrandTotal()}}
</span>
<!-- <p style="font-size: 10px; font-family: sans-serif; font-size: 13px; color: #001c2b;">
Inclusive of all Taxes<br>
Excl all Shopping Charges
</p> -->

41
 <p style="margin-left: 3%; font-size: 10px; font-family: sans-serif; font-size: 13px; color:
#001c2b;">Inclusive of all Taxes</p>
<p style="margin-top: -10px; font-size: 10px; font-family: sans-serif; font-size: 13px;
color: #001c2b;"> Excl all Shopping Charges</p>

<button id="btn1" name="update" class="btn btn-secondary position-relative"

style="background-color: #001c2b; font-family: sans-serif; font-size: 13px; display:
block; margin: 20px ;"
[routerLink]="['/checkout']">
Checkout
</button>
</span>
</div>
<div *ngIf=" showWishListForm"
style="max-width: 800px; margin: 0 auto; margin-top: 40px; border: none; margin-left:
100px;">

<div class="row" style="display: flex; flex-wrap: wrap; justify-content: space-between;">

<div id="mobileView" class="col-md-6" *ngFor="let product of productData;let i=index"
style="width: 48%; margin-bottom: 20px;">
<div id="img1" style="display: flex;">
<img style="height: 250px; width: 165px;" src="{{ defaultUrl +
product.ProductImage[0].P_URL }}" (click)="viewProduct(product.Product_Code_Id)">
<div style="margin-top: 15px; width: 100%;">
<div style="margin-top: -30px; width: 100%;" class="card-body">
<h5 style="font-family: sans-serif; font-size: 15px; color:#001c2b;" class="card-
title">{{ showMore ? product.Product_Name : (product.Product_Name | slice:0:27) }}
<span *ngIf="product.Product_Name.length > 27">
<span *ngIf="!showMore" class="dot" >...</span>
<!-- <span (click)="toggleReadMore()" class="read-more" style="cursor: pointer;
color: blue;">
{{ showMore ? 'Read less' : 'Read more' }}
</span>-->
</span>

42
 </h5>
<h5 style="font-family: sans-serif; font-size: 20px; color:#001c2b;" class="card-
text">
RS.{{product.Rate}}</h5>
<!-- <div *ngFor="let item of cartItems; let i = index">
<h5 *ngFor="let item of cartItems; let i = index" aria-hidden="true" style="font-
family: sans-serif; font-size: 20px; color:#001c2b;">
QTY
<a style="font-family: sans-serif; font-size: 20px; color:#001c2b;"
(click)="decreaseQuantityTable(i)">-</a>
<input
style="font-family: sans-serif; font-size: 20px; color:#001c2b; width: 40px;
height: 30px; border: none;"
type="text" id="Quantity" name="quantity" [value]="cartItems[i].Quantity">
<a style="font-family: sans-serif; font-size: 20px; color:#001c2b;"
(click)="increaseQuantityTable(i)">+</a>
</h5>
</div> -->
<div style="display: flex; align-items: center;">
<br>
<br><br>

</div>

<!-- <button
style="font-family: sans-serif; font-size: 15px; color:#001c2b; background-color:
lightgrey; margin-top: 20px;">TRACK</button> -->
<!-- Inside your template -->
<!-- ... Existing HTML ... -->
<p style="font-family: sans-serif; font-size: 13px; color:#001c2b;margin-bottom:
0px;" class="card-title1"
(click)="deleteFromWishlist(product)">CANCEL</p>
<!-- ... Remaining HTML ... -->

43
 </div>
</div>
</div>
</div>
</div>
</div>
Product details page:
<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Short Description &ndash; </title>
<meta name="description" content="description">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="color: #001c2b;">

<div class="pageWrapper" ngif="showProductShowcase" style="margin-top: 130px;">

<div id="page-content">

<div id="MainContent" class="main-content" role="main">

<div id="ProductSection-product-template" class="product-template__container
prstyle2 container">
<!--#ProductSection-product-template-->
<div class="product-single product-single-1">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="product-details-img product-single__photos bottom">
<div class="zoompro-wrap product-zoom-right pl-20">
44
 <div class="zoompro-span">
<!--@if (images) {
<ngb-carousel class="carousel-inner" *ngIf="isMobile &&
selectedProduct?.Images && selectedProduct.Images.length > 0">
<ng-template class="carousel-item" ngbSlide *ngFor="let
image of selectedProduct.Images">
<div class="picsum-img-wrapper">
<img [src]="defaultUrl + image.P_URL" alt="Random
first slide" style="margin: 0; padding: 0;"/>
</div>

</ng-template>

</ngb-carousel>
}-->
<div id="hero-carousel" class="carousel slide" data-bs-
ride="carousel" *ngIf="isMobile && selectedProduct?.Images &&
selectedProduct.Images.length > 0">
<div class="carousel-indicators">
<button *ngFor="let image of selectedProduct.Images; let i =
index" type="button" data-bs-target="#hero-carousel" [attr.data-bs-slide-to]="i"
[class.active]="i === 0"></button>
</div>

<div class="carousel-inner custom-inner">

<div class="carousel-item custom-item" data-bs-
interval=2000 *ngFor="let image of selectedProduct.Images; let i = index" [class.active]="i
=== 0">
<img [src]="defaultUrl + image.P_URL" alt="Slide {{ i + 1
}}" class="d-block w-100">
</div>
</div>

45
 <button class="carousel-control-prev" type="button" data-bs-
target="#hero-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-
hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#hero-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-
hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

<img *ngIf="selectedZoomImage && !isMobile"

[src]="defaultUrl + selectedZoomImage.P_URL" id="image"
class="zoomed-image"
(click)="displayFullScreenImage(defaultUrl +
selectedZoomImage.P_URL)" />
</div>
</div>

<div class="product-thumb product-thumb-1">

<div id="gallery"
class="product-dec-slider-1 product-tab-left slick-initialized slick-
slider">
<div class="slick-list draggable">
<div class="slick-track">
<div *ngFor="let image of
selectedProduct?.Images.slice(currentImageIndex, currentImageIndex + 5)"
class="slick-slide" style="margin-left: 5px; ">

46
 <div class="gallery-item" style="height: 110px">
<img class=" lazyloaded"
style="width: 100px; min-height:108px;"
[src]="defaultUrl + image.P_URL" alt=""
(click)="displayZoomedImage(image)">
</div>
</div>
</div>
</div>
<button class="slick-prev slick-arrow" aria-label="Previous"
type="button"
(click)="displayPreviousImage()"
style="margin-right: 10px;">Previous</button>
<button class="slick-next slick-arrow" aria-label="Next"
type="button"
(click)="displayNextImage()">Next</button>
</div>
</div>

<!-- product-details.component.html -->

<div class="fullscreen-overlay" [ngClass]="{'zoomed-overlay':
isZoomed}"
*ngIf="isFullScreenImageVisible">
<div class="scrollable-container">
<div class="left-arrow" (click)="showPreviousImage1()">
<i class="fas fa-arrow-left" style="color: white;"></i>
</div>
<div class="zoomed-image-wrapper"
(click)="toggleZoom($event)">
<div class="zoomed-image-container">
<img [src]="fullScreenImageUrl" class="zoomed-image1"
style="padding-bottom: 50px; padding-top: 45px;" />
47
 </div>
</div>
<div>
<button type="button" class="close" style="color: white; "
(click)="closeFullScreenImage($event)">
<span class="bi bi-x"></span>
</button>

<br><br><br><br>
<div class="Container" style="margin-top: 40px;">
<header class="PageHeader">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1">About Us</h1>
</div>
</header>
<div class="PageContent PageContent--narrow Rte">
<div class="wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="wpb_single_image wpb_content_element vc_align_left">
<figure class="wpb_wrapper vc_figure">
<div class="vc_single_image-wrapper vc_box_border_grey">
<img src="assets/savra/WhatsApp_Image_2023-07-07_at_1.59.57_PM-
removebg-preview.png" alt="SAVRA">
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="wpb_column vc_column_container vc_col-sm-6" style="display: flex;
justify-content: center;
48
 align-items: center;">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper main contentsavra">
<h2 class="vc_custom_heading " style="font-size: 18px;">SAVRA</h2>
<!-- <p>We make easy-to-wear festive outfits. Our designs are for the
contemporary Indian women
who love traditional yet light weighted and subtle designs having the best
of both
worlds.</p>
<p>Label Madhuri Thakkar has been created keeping in mind women who
know they just need only
‘that much’ to stand apart as well as stand strong and look beautiful
among the crowd.
</p>
<p>We know we are not wrong when we say you are already beautiful!</p>
<p>We continuously strive to make your shopping experience hassle-free
and most convenient.
Please help us do so, as we are always eager to hear your thoughts.</p> --
>
<p>At Savra, we believe that professional attire should be more than just
a dress code;
it should be a reflection of confidence, comfort, and individual style.
Established in 2015 by a visionary woman,
</p>
<p>
Savra was born from a mission to cater specifically to the needs of
working women who deserve nothing less than the best in quality, style, and comfort.
</p>
<p>
Join the Savra community and experience the difference that quality,
elegance, and comfort can make in your professional wardrobe.
Whether you're seeking the perfect power suit or a versatile dress that
takes you from desk to dinner,
49
 </p>
<p>
we invite you to explore our collection of suits for girls, suits for
women, and unstitched suits pieces, and redefine what it means to dress for success.
</p>
<h2 class="vc_custom_heading " style="font-size: 18px;">OUR
mISSION</h2>
<p>
Savra is not just a brand; it's a commitment to empower women
through fashion. Our mission is simple yet profound:
to provide working women with impeccably tailored suits,
elegant kurtis, versatile dresses, and a myriad of other wardrobe
essentials that seamlessly blend professionalism with sophistication.
</p>
<p>
We understand the demands of modern-day careers and recognize the
importance of attire that not only fits impeccably but
also supports you throughout your busy day.

</p>
<h2 class="vc_custom_heading " style="font-size:
18px;">UNCOMPROMISING QUALITY</h2>
<p>
Quality is the cornerstone of everything we do at Savra.
From the finest fabrics to meticulous craftsmanship,
each piece in our collection is thoughtfully designed and curated to
meet the highest standards of excellence.
</p>
<p>
We believe that when you invest in quality, you invest in confidence that
lasts a lifetime.
</p>
<h2 class="vc_custom_heading " style="font-size: 18px;"> ELEGANT
VERSATILITY</h2>

50
 Test Case:

Test Case LOGIN_01

ID
Test Case Test Case For User
Name
Pre- User Must Login First
Requisite
Test Step Step to be Executed Expected Result Actual Result Status Remark
No (Pass/
Fail)
1. 1.Keep Username It Should Display Display Error Pass Require
And Password Blank The Error ‘These Message For Both Field Validation
2. Press Login Fields Cannot Be Textbox Is Checked.
Button Blank’
2. 1.Enter Valid User Name It Should display Display error Fail Wrong Input
E.g., Admin. the Error Password Validation are
2. Enter wrong Message Checked.
Password
3. 1. Enter Special It Should Not It not Allows you Pass Special Character are
Character for Accept Special to type special Checked.
Username E.g.,@% Characters character except
2.Enter Password the required
characters for an
valid username id
4. 1. Enter correct It Should accept It accepts Pass Valid Users login is
Username username and username and Passed.
2. Enter Valid password password and
Password forward to User
3. Press Login Home
Screen
Button
5. 1.Enter only username It Should display It accepts Fail Only Right Password
and click on Login the Error username and and Login should
Message password Entered.

51
 Test Case For Registration:
Test Case Online shopping registration
ID
Test Case Test Case For Shopping
Name
Pre- Customer Must Registration
Requisite
Test Step Step to be Expected Actual Result Status Remark
No Executed Result (Pass/Fail)

1. 1. Enter It Should accepts It accepts all details Pass Valid

correct Details of a Details of of customer
customer customer customer. Registration
2. Enter Valid Passed
Details
3. Press Save
Button
4. customer
data save in
Database

2. It Should display Display error Fail Wrong Input

the Error message Validation are
1. Enter the wrong Message Checked.
email
3. 1. Enter valid email It work properly It Accept the Pass Valid
customer Response customer
Registration
Passed

4 1.enter invalid It Should display Display error Fail Wrong Input

password the Error Customer password Validation are
Message Checked.

52
 Test Case for delivery details:

Test Case Online shopping delivery details

ID
Test Case Test Case For Shopping
Name
Pre- Customer Must delivery details
Requisite
Test Step Step to be Expected Actual Result Status Remark
No Executed Result (Pass/Fail)

1. 5. Enter It Should accepts It accepts all details Pass Valid

correct delivery Details of of customer
Details of a customer customer. Registration
customer Passed
6. Enter Valid
Details
7. Press Save
Button
8. customer
data save in
Database

2. It Should display Display error Fail Wrong Input

the Error message Validation are
1. Enter the wrong Message Checked.
details

53
 Test Case for Add to Cart:
Test Case Online shopping add to cart and
ID checkout page
Test Case Test Case For Shopping
Name
Pre- Customer add to cart and
Requisite checkoutpage

Test Step Step to be Expected Actual Result Status Remark

No Executed Result (Pass/Fail)

1. 1.user select item It Should move It accepts product Pass Move product into
and move into add product into add add to cart
to cart after login to cart
successfully user
can move to add to
cart page

2. It Should display Display success pass Success checkout.

the sucessfuly checkout message
1. all details of Message
product display in
checkout and also
fill details of
delivery
3. 1. move on It work properly It Accept the Pass Show message
payment option Both payment cash success payment
on delivery and
online gpay

54
CHAPTER 6:LIMITATION AND FUTURE ENHANCEMENTS
6.1:Conculsion:
In conclusion, the specification for the online clothing shopping system modules provides a
comprehensive outline of the essential functionalities required for the system's development.
By breaking down the system into smaller, manageable modules, we can ensure that each
aspect of the online shopping experience is addressed effectively.

From user authentication to product management, shopping cart functionality, checkout

process, order management, search and filtering, user profiles, admin dashboard, reporting,
security measures, notification system, and feedback/review management, each module serves
a specific purpose in delivering a seamless and satisfying shopping experience for users while
providing necessary tools for administrators to manage the platform efficiently.

By adhering to best practices in design, security, and user experience, and by incorporating
features for scalability, flexibility, and performance optimization, the online clothing shopping
system can be developed into a robust and reliable platform capable of meeting the needs of
both customers and administrators alike.

Continuous monitoring, testing, and refinement will be essential to ensure the system remains
up-to-date, secure, and aligned with evolving user expectations and industry standards. With a
well-defined module specification and a commitment to quality, the online clothing shopping
system can thrive in the competitive e-commerce landscape, offering users a convenient and
enjoyable shopping experience while driving business growth and success.

55