E Commerce CD
Uploaded by
priyanshbarik96E Commerce CD
Uploaded by
priyanshbarik96A PROJECT ON
E-Commerce
Submitted in partial fulfillment of the requirement for the award of the
degree of
MASTER OF COMPUTER APPLICATIONS
Submitted by:
Name: Rahul Singh Regd. No: 2205415054
Name: Sipun Tarai Regd.No: 2205415078
Name: Ayusismita Mallik Regd.No: 2205415011
Under the Guidance of
Prof. (Dr.) Sushanta Kumar Panigrahi
Professor, Dept. of MCA, ECCAM
epartment of
D
Master of Computer Application Einstein
College of Computer Application & Management
Baniatangi, Khorda
1
CANDIDATE’S DECLARATION
I hereby certify that the work which is being presented in the Project Report entitled
“E-Commerce”inpartialfulfillmentoftherequirementsfortheawardoftheDegreeof
Master of ComputerApplicationssubmittedintheDepartmentofMCAoftheEinstein
College of Computer Application & Management is an authentic record of my own
workcarriedoutduringaperiodfromJanuary-2024toApril-2024underthesupervision
of Prof. Sushanta Ku. Panigrahi, Dept. of MCA, of the Einstein College of Computer
Application & Management.
The matter presented in this dissertation has not been submittedbyme
for the award of any other degree of this or any other Institute/University.
Name: Rahul Singh Regd. No: 2205415054
Name: Sipun Tarai Regd.No: 2205415078
Name: Ayusismita Mallik Regd.No: 2205415011
This is to certify that the abovestatementmadebythecandidateiscorrecttothe
best of our knowledge.
Supervisor Head of the Department
External Viva
Name of the Examiners: Signature with Date:
2
CERTIFICATE
This is to certify that the Project Report entitled “E-Commerce Clothing
Website “submitted to Einstein College of Computer Application and
Management in partial fulfillment of their requirement for the award of the
degreeofMASTEROFCOMPUTERAPPLICATION(MCA),isanoriginal
work carried out by Mr. Rahul Singh bearing Regd.No:22054150554 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 University or to any other
University / Institute for the fulfillment of the requirement ofanycourseof
study.
Signature of the Student Signature of the Guide
Date: Date:
3
Acknowledgement
Any achievement, be it scholastic or otherwise doesnotdependsolelyonthe
individual effort but on the guidance, encouragement and co-operation of
intellectuals, elders and friends. A number of personalities in their own
capacity have helped me in carrying out this project work. We are extremely
grateful to Prof. (Dr.) Biswajit Tripathy, Principal of the Einstein College of
Computer Application & Management, for his moral support and
encouragement.
Our sincere thanks toprojectguideProf.SushantaKu.Panigrahi,Department
of MCA, Einstein College of Computer Application & Management, for his
valuable guidance and support throughout the course of project work andfor
being a constant source of inspiration.
We thank the management of Einstein College of Computer Application &
Management for the support throughout the course ofourMasterDegreeand
for all the facilities they have provided.
Last, but certainly not least we thank all teaching and non-teaching staff of
EinsteinCollegeofComputerApplication&Managementforguidingusinthe
rightpath.Mostimportantlywewishtothankourparentsfortheirsupportand
encouragement.
4
Abstract
This abstract explores the pivotal role of personalization in optimising user
experienceone-commerceclothingwebsites.Inthefiercelycompetitiveonline
retail landscape, catering to individual preferences is paramount. By tailoring
product recommendations, marketing efforts, and user interfaces to each
shopper, these websites aim to mitigate challenges like high bounce rates and
cartabandonment.Leveragingartificialintelligenceandmachinelearning,they
analyse user data to deliver more accurate suggestions. However, ethical
considerations, including data privacy and filter bubbles, underscore the need
for transparency and user consent. In conclusion, personalization is key to
driving engagement, conversions, and brand loyalty in e-commerce clothing
platforms.
Abstract emphasises the critical role of personalization in
improving user experience and driving sales in e-commerceclothingwebsites.
Byleveragingadvancedtechnologiesandimplementingethicalpractices,online
retailers can create a more engaging and satisfying shopping experience for
their.
5
CONTENTS
CHAPTER NAME OF THE CHAPTER PAGE
1 Introduction 07
2 Statement of the Problem 08
3 Objectives 09
4 Scope 10
5 Software and Hardware Requirements 11
6 Module description 12 - 13
7 Advantages and Disadvantages 14- 15
8 List of Tables 16 - 21
9 System Design and UML Diagram 22- 26
10 Coding 27 - 59
11 Screenshots 60 - 65
12 Feasibility study 66 - 66
13 Testing 67 - 67
14 Conclusion 68 - 69
15 Future work 70 - 70
16 Bibliography 71 - 71
6
Introduction
E-commerce has revolutionised the retail industry, with clothing being one of the most
popular categories for online shoppers. This abstract explores the importance of
personalizationine-commerceclothingwebsitestoenhanceuserexperienceanddrivesales.
Personalization involves tailoring the online shopping experience toindividualpreferences,
interests,andbehavioursofusers.Theabstractbeginsbydiscussingthesignificanceofuser
experience in e-commerce, particularly in the highly competitive clothing market where
customer satisfaction and loyalty are paramount. It highlights the challenges faced by
e-commerce clothing websites, such as high bounce rates, cart abandonment, and the
difficultyinreplicatingthein-storeshoppingexperienceonline.Theabstractdelvesintothe
concept of personalization and its role in mitigating these challenges. Personalization
encompasses various strategies, including product recommendations based on browsing
history, personalised marketing emails, and customizable user interfaces. These strategies
aim to create a seamless and tailored shopping journey for each user,ultimatelyincreasing
engagement and conversion rates. Furthermore, the abstractexplorestheimplementationof
artificial intelligence and machine learning algorithms in e-commerce clothing websites to
enhancepersonalization.Thesetechnologiesenablewebsitestoanalysevastamountsofdata,
such as past purchases, browsing behaviour, and demographic information, todelivermore
accurate and relevant recommendations to users. The abstract also discusses the ethical
considerations surrounding personalization, such as data privacy concerns and the risk of
creating filter bubbles that limit users' exposure to diverse products and perspectives. It
emphasises the importance of transparency and user consent in collecting and utilising
personal data.
7
Statement of the Problem
The e-commerce clothing industry is highlycompetitive,withnumerouswebsitesvyingfor
consumer attention and purchases. In this context, our clothing website faces several
challenges that need to be addressed to enhance user experience and improve conversion
rates. The primary issues include:
User Interface and Navigation: The current website layout and navigation might not be
intuitive or user-friendly, leading to difficultiesinfindingproducts,exploringcategories,or
completing transactions. This results in a higher bounce rate and lower conversion
rates.Product Discovery and Recommendation: Customers may face challenges in
discovering new products that match their preferences or style. The lack of personalised
recommendations or effective product filtering options could hinder their shopping
experience and lead to missed sales opportunities.
Mobile Optimization: With the increasing use of mobile devices for online shopping, the
website's mobile responsiveness and performance are crucial. A subpar mobile experience,
suchasslowloadingtimesorunresponsivedesign,candeterpotentialcustomersandimpact
conversion rates negatively.
1. Checkout Process: A complicated or lengthy checkout process can lead to cart
abandonment and lost sales. Issues such as excessive form fields, lack of guest
checkoutoption,orunclearshippingandpaymentinformationneedtobeaddressedto
streamline the checkout experience and improve conversion rates.
2. CustomerEngagementandRetention:Buildinglong-termrelationshipswithcustomers
isessentialforsustainedbusinessgrowth.Thewebsitemaylackeffectivestrategiesfor
engaging customers post-purchase, such as order tracking, personalised offers, or
loyalty programs, which can impact customer retention and repeat purchases.
8
OBJECTIVE
"Our primary objective is to optimise the user experience and improveconversionrateson
our ecommerce clothing website by addressing key challenges. Firstly, we aim to enhance
user interface and navigation to make the website more intuitive and user-friendly, with a
specific focus on reducing bounce rates and increasing average session duration.Secondly,
we seek to enhance product discovery and recommendation features through personalised
recommendations and effective filtering options, aiming to increase click-through and
conversion rates on recommended items. Thirdly, our objective is to optimise the mobile
experience, ensuring seamless performance across all devices and reducing mobile bounce
rates while improving conversion rates. Additionally, we plan to streamline the checkout
process to minimise cart abandonment and friction during purchase, with a focus on
improvingconversionratesatcheckout.Finally,weaimtoimplementcustomerengagement
strategies, including post-purchase communication and loyalty programs, toincreaserepeat
purchase rates and improve customer retention. These objectives are integral to improving
the overalluserexperience,drivingsales,andfosteringlong-termcustomerrelationshipson
our e-commerce platform."
9
Scope
The scope of addressing the identified issues and achieving the outlined objectives
encompasses various aspects of the e-commerce clothing website's functionality and user
experience. Firstly, it involves comprehensive website analysis to identify specific pain
points in user interface, navigation, product discovery, mobile optimization, and checkout
process. This analysis will guide the design and development efforts aimed at enhancing
these areas.
In terms of user interface and navigation, the scope includes redesigning the layout,
improvingmenustructures,andoptimisingsearchfunctionalitiestoenhanceeaseofuseand
accessibility. For product discovery and recommendation, implementing personalised
recommendation algorithms, enhancing filtering options, and integrating social proof
mechanisms will be part of the scope.
Thescopealsoencompassesoptimisingthewebsiteformobiledevices,includingresponsive
design, performance improvements, and mobile-specific features to ensure a seamless
shopping experience across all platforms. Additionally, streamlining the checkout process
involves reducing steps, implementing guest checkout options, and enhancingtransparency
regarding shipping and payment information.
10
Software Requirements
Name of Component Specification
Operating System Windows, Linux
Language Dot net
Database MS Sql
Browser Chrome
Software Development Kit Node JS
Scripting Language JavaScript, HTML 5
Editor Visual Studio Code
Hardware Requirements
Name of Component Specification
Processor Pentium Dual Core CPU or above
RAM Minimum 3GB
Hard disc 20 GB or more
Monitor 15” Color Monitor or Advance
Keyboard Any Keyboard
Mouse Any Mouse
Printer In case of printing reports
11
Module Description
The E-CommerceClothingWebsitemoduleaimstoprovideacomprehensiveonline
platformforpurchasingclothingitems,cateringtotheneedsofbothconsumersand
the business. It encompasses various features and functionalities designed to
facilitate seamless browsing, shopping, and transactions for users while offering
efficient management tools for administrators.
Key Features:
1. Product Management:
● Admin Dashboard: A centralized interface foradministratorstomanage
products, categories, inventory, and pricing.
● Product Listings: Displaying clothing items with detailed descriptions,
multiple images, and pricing information.
● Inventory Management: Tracking stock levels, managing variants (e.g.,
sizes, colors), and receiving alerts for low stock.
● Category Management: Organizing products into categories and
subcategories for easy navigation.
● Discounts and Promotions: Setting up discount codes, sales, and
promotional offers to attract customers.
2. User Management:
● User Accounts: Registration, login, and profile management
functionalities for customers.
● Wishlist: Allowing users to save favourite items for future purchase or
reference.
● OrderHistory:Providinguserswithaccesstotheirpastordersandorder
statuses.
12
● Reviews and Ratings: Enabling users to leave feedback and ratings on
purchased items.
3. Shopping Experience:
● Intuitive Navigation: User-friendly interface with easy-to-use navigation
menus, search bar, and filters.
● Product Pages: Detailed product pages with high-quality images, sizing
guides, and customer reviews.
● Shopping Cart: Adding, removing, and updating items in the cart, with
subtotal calculation and checkout options.
● Checkout Process: Streamlined checkout flow with guest checkout
option, address validation, and secure payment gateways.
● Order Tracking: Allowing users to track the status of their orders in
real-time.
4. Mobile Optimization:
● Responsive Design: Ensuring seamless browsing and shopping
experiences across various devices and screen sizes.
● Mobile-Friendly Checkout: Optimizing the checkout process for mobile
users with simplified forms and touch-friendly elements.
5. Admin Tools and Analytics:
● Sales Reports: Generating reports on sales performance, revenue, and
popular products.
● Customer Insights: Analyzing customer behaviour, preferences, and
demographics to improve marketing strategies.
● Content Management: Managing website content, including banners,
promotional messages, and blog posts.
● Security and Compliance: Implementing security measures to protect
user data and ensuring compliance with data protection regulations.
6. Customer Support:
13
● Help Center: Providing FAQs, guides, and tutorials to assist users with
common queries.
Advantages:
1. Global Reach: E-commerce websites break down geographical barriers, allowing
businessestoreachcustomersworldwidewithouttheneedforphysicalstoresorlocal
presence.
2. Convenience: Customers can shop anytime, anywhere, from the comfort of their
homes or on-the-go, eliminating the need to visit brick-and-mortar stores and saving
time and effort.
3. Expanded Market: E-commerce websites enable businesses to tap intonichemarkets
andtargetspecificcustomersegmentsmoreeffectively,leadingtoincreasedsalesand
market penetration.
4. Lower Overheads: Operating ane-commercewebsitetypicallyincursloweroverhead
costs compared to traditional retail stores, as there's no need for expenses related to
rent, utilities, or staffing.
5. Personalization:E-commercewebsitescanleveragedataanalyticsanduserinsightsto
offerpersonalizedrecommendations,promotions,andshoppingexperiencestailoredto
individual preferences and behaviors.
6. Scalability: E-commerce websites are highly scalable, allowing businesses to easily
expandtheirproductofferings,reachnewmarkets,andaccommodateincreasedtraffic
and sales volume as they grow.
7. 24/7 Availability: E-commerce websites arealwaysaccessible,allowingcustomersto
makepurchasesatanytimeofthedayornight,whichcanleadtoincreasedsalesand
revenue.
14
Disadvantages:
1. Security Concerns: E-commerce websites are susceptible to security threats such as
data breaches, fraud, and identity theft, which can erode customer trust and damage
brand reputation.
2. Technical Issues:E-commercewebsitesmayexperiencetechnicalglitches,downtime,
or performance issues, disrupting the shopping experience and potentially leading to
lost sales and frustrated customers.
3. Lack of Tangibility: Unlike physical stores, e-commerce websites don't allow
customers to touch, feel, or try products before making a purchase, which can be a
barrier for certain types of products, such as clothing or electronics.
4. Shipping Costs and Delays: Customers may incur additional costs for shipping and
handling, and delivery delays or issues can result in dissatisfaction and negative
reviews.
5. Competition: The e-commerce landscape is highly competitive, with numerous
businesses vying for customer attention and market share, making it challenging for
new or smaller players to stand out and succeed.
6. Dependency on Technology: E-commerce websites rely heavily on technology
infrastructure, software platforms, and internet connectivity, making them vulnerable
to disruptions caused by technical failures, cyberattacks, or changes in technology
standards.
7. Customer Service Challenges: Providing quality customer service in an e-commerce
setting can be challenging, as there may be limited opportunities for face-to-face
interaction and resolving issues remotely can be more complex and time-consuming.
15
Introduction to MS SQL
Microsoft SQL Server, commonly known as MS SQL, stands as a preeminent relational
database management system (RDBMS) crafted by Microsoft. It's celebrated for its
reliability,scalability,andrichfeatureset.MSSQLorganizesdataintotableswithrowsand
columns, fostering efficient data storage, retrieval, and manipulation through established
relationships. Offering various editions, including Express, Standard,Enterprise,andAzure
SQL Database, it caters to diverse needs. Each version brings enhancements and novel
features to the fore. SQL Server boasts a plethora of capabilities, such as Transact-SQL
(T-SQL)forquerying,storedprocedures,andtriggersforencapsulatingbusinesslogic,along
with robust security measures, indexing for efficient data retrieval, and high availability
features ensuring continuous access to data. Integration with the Microsoft ecosystem is
seamless, aligning with .NET framework, Visual Studio IDE, Azure cloud platform, and
Power BI for advanced analytics. Itsscalability,performanceoptimizations,andintegration
capabilities make it a preferred choice for businesses of all sizes. Supported by a vibrant
community and extensive documentation, MS SQL stands as a cornerstone in data
management and analysis, empowering organizations to derive insights and drive business
growthnecessary.
Utilizing Microsoft SQL Server (MS SQL) offers a myriad of advantages for businesses and
organizations. Foremost among these is its robust security framework, which encompasses
encryption,role-basedaccesscontrol(RBAC),andauditingcapabilities,ensuringtheprotectionof
sensitive data and compliance with regulatory standards. Additionally, MS SQL's scalability is
unparalleled,accommodatingdiversedeploymentsizesfromsmall-scalesetupstoenterprise-level
systems. Its high availability features, including AlwaysOn Availability Groups and Failover
Clustering, guarantee continuous access to data and minimal downtime, essential for
mission-critical applications. Furthermore, MS SQL is optimized for performance, with indexing,
query optimization, and in-memoryprocessingcapabilitiesenhancingresponsetimesandoverall
database efficiency.
16
Entity Construction
Let’s start with the Customer entity. We’ll define attributes for the customer’s first and last
name, email address, postal address, and phone number.
Customer
customer_id integer
first_name string
last_name string
email string
password string
address string
phone_number string
CartandWishlistare dependent entities ofCustomer.Cartincludes each product added to
the shopping cart and the quantity of the product. It should be noted that I didn’t include the
product or any attributes that constitute foreign keys (readTHIS ARTICLE LEARN ABOUT
FOREIGN KEYS) in this list. This is because these will be added to the model when it is
converted into a physical ER diagram.
17
Cart
cart_id integer
quantity integer
Wishlistsimply
contains a list of products. Following the same reasoning as above, I
didn’t include the product as an attribute; it will appear automatically when we create
the physical diagram.
Wishlist
wishlist_id integer
The next entity isProduct, with attributes to storeSKU,description,priceandstockfor
each product.
Product
product_id integer
SKU string
description string
18
price decimal
stock integer
TheCategoryentity is very simple; the only attribute it needs (besides the surrogate key)
is the category name.
Category
category_id integer
name string
TheOrderentity stores the date of each order and its total price.
Order
order_id integer
order_date date/time
total_price decimal
Its dependent entity,Order_Item, stores the quantity and price of each item included in
an order.
19
Order_Item
order_item_id integer
quantity integer
price decimal
ThePaymententity stores the date of payment, the means of payment, and the amount
paid.
Payment
payment_id integer
payment_date date
payment_method string
amount decimal
And finally,Shipmentstores the shipping date, address, city, state, country, and postal
code.
20
Shipment
shipment_id integer
shipment_date date
address string
city string
state string
country string
zip_code string
21
System Design and UML Diagram
After adding the attributes, the logical model is complete.
22
Possible Improvements to the Online Shopping ERD
Thereareseveralimprovementswecouldmaketothisscheme,butwe’llleavethemasidesoas
not to make the model too complex. For example, instead of storing the password with the
customerdata,wecouldaddauserauthenticationsubschema,followingtheBESTPRACTICESFOR
A USER AUTHENTICATION MODULE.
Another possible improvement would be to separate the stock andpricedatafromtheproduct
information itself, as this data can vary depending on different factors (e.g. the customer’s
geographical location, stock in/out movements, etc.). To give more functionality to the data
model, it would be desirable that the stock and price of each product be obtained from other
tables. But for the sake of simplicity, we will leave these as product attributes.
Step 3: Create the Physical Model
Once we have the logical model complete and validated by the stakeholders, we are in a
positiontotransformitintoaphysicalmodel.Todoso,wejustneedtoaskVERTABELOto
generatethephysicalmodelfromthelogicalone.Butbeforedoingthis,Iadviseyoutoread
the8 THINGS TO CONSIDER WHEN CREATING A PHYSICAL DATA MODEL.
To create the physical model, Vertabelo requires us to choose the relational database
managementsystem(RDBMS)onwhichwewillmountourdatabase.Todothis,itprovides
us with a list of options that includes the most popular database engines. The choice of
RDBMS will determine some characteristics of thephysicalmodelthatmayvaryfromone
engine to another – e.g. the data type assigned to each attribute.
Forthisexample,wechoseMySQL8.xasthetargetRDBMS.Aswecanseeintheexample
below, the physicalmodelconversionhasaddedforeignkeycolumnstothe correcttables.
These are established from the relationships we defined in the logical model.
23
24
The physical model adds the columns that constitute the foreign keys and the
dependency keys.
Let’s examine theWishlisttable as an example. In the logical model, theWishlistentity
only had the attributewishlist_id, which was used as the primary key. When it becomes
a table in the physical model, two more columns appear:Customer_customer_idand
. These
Product_product_id
two columns are foreign keys to theCustomerandProduct
tables, respectively.
Now it only remains to ask Vertabelo to generate the SQL script. We will execute it in
the RDBMS and leave the database ready to connect it to the application and start
receiving information.
A noteworthy aspect of the generated physical model is that the dependent entities –
,Wishlist, andOrder_Item–
Cart
have a primary key composed of two attributes. One of
them is a surrogate key (an arbitrary ID) and the other is a foreign key that relates to the
primary key of the entity on which it depends. This can be seen more clearly in the
automatically generated script. For example, let’s look at the DDL code generated by
Vertabelo to create theCarttable:
25
-- Table: Cart
CREATE
TABLE
Cart (
cart_id
int
NOT
NULL
,
quantity
int
NOT
NULL
,
Customer_customer_id
int
NOT
NULL
,
Product_product_id
int
NOT
NULL
,
ONSTRAINT
C Cart_pk
PRIMARY
KEY
(cart_id,Customer_customer_id)
);
-- Reference: Cart_Customer (table: Cart)
LTER
A TABLE
Cart
ADD
CONSTRAINT
Cart_Customer
FOREIGN
KEY
Cart_Customer (Customer_customer_id)
REFERENCES
Customer (customer_id);
-- Reference: Cart_Product (table: Cart)
LTER
A TABLE
Cart
ADD
CONSTRAINT
Cart_Product
FOREIGN
KEY
Cart_Product (Product_product_id)
REFERENCES
Product (product_id);
We can see that theCustomer_customer_idcolumn is both part of the primary key ofCart
and a foreign key to theCustomertable, relating to thecustomer_idcolumn of the latter.
TheProduct_product_idcolumn, on the other hand, is only a foreign key to theProduct
table. This is becauseCartis not a dependent entity ofProduct, as it is ofCustomer.
Web Pages details:
26
➢ Login Page
➢ Home Page
➢ About Us Page
➢ Clothing Page
➢ OrderUs Page
➢ ContactUs Page
➢ Admin Page
➢ Register Page
➢ Track
Coding
oding is the process of using a programming language to get a computer to
C
behave how you want it to. Every line of code tells the computer to do something
<div class="breadcrumb-option" >
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="breadcrumb__links">
<a routerLink="/landing-page"><i class="fa fa-home"></i> Home</a>
<a href="#">login</a>
<span></span>
</div>
</div>
</div>
</div>
27
<section class="vh-70 ">
<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99"
style="transform: translate3d(100%, 0px, 0px);">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity">
!-- <div *ngIf="f['login_id'].touched && f['login_id'].invalid" class="alert
<
alert-danger">
div *ngIf="f['login_id'].errors && f['login_id'].errors['required']">user name
<
required.</div>
</div>
<div *ngIf="f['password'].touched && f['password'].invalid" class="alert alert-danger">
div *ngIf="f['password'].errors && f['password'].errors['required']">password
<
required.</div>
</div> -->
</div>
</div>
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card shadow" style="border-radius: 1rem;border: none;">
<div class="row g-0">
28
<div class="col-md-6 col-lg-7 d-flex ">
<div class="card-body p-4 p-lg-5 text-black">
<form [formGroup]="frmY" name="login_form" (ngSubmit)="userLogin()">
<div class="d-flex align-items-center mb-3 pb-1">
<i class="fa fa-user fa-2x me-3 text-gray-500"></i>
<span class="h1 fw-bold mb-0 text-gray-500">Login</span>
{{msg}}
</div>
h5 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Sign into your
<
account</h5>
<!--
<div class="form-outline mb-2">
label class="form-label " for="form2Example17" ngModel
<
name="mobile_number" id="mobile_number"
placeholder="mobile_number">Mobile Number</label>
input type="number" id="form2Example17" class="form-control
<
form-control-lg text" />
</div>
<div class="form-outline mb-2">
29
<label class="form-label" for="form2Example17"
placeholder="mobile_number">Password</label>
<input type="text" id="form2Example17" class="form-control form-control-lg
text" />
</div> -->
<div class="form-outline mb-2">
<label class="form-label" for="form2Example17">User Name</label>
<input type="text" id="form2Example17" class="form-control form-control-lg
text"
formControlName="login_id" placeholder="Enter your username">
</div>
div *ngIf="f['login_id'].touched && f['login_id'].invalid" class="alert
<
text-danger">
div *ngIf="f['login_id'].errors && f['login_id'].errors['required']"> *user name
<
required.</div>
</div>
<div class="form-outline mb-2">
<label class="form-label" for="form2Example17">Password</label>
input type="password" id="form2Example17" class="form-control
<
form-control-lg text "
formControlName="password" placeholder="Enter your password">
</div>
div *ngIf="f['password'].touched && f['password'].invalid" class="alert
<
text-danger">
30
div *ngIf="f['password'].errors && f['password'].errors['required']">*password
<
required.</div>
</div>
<label class="form-check-label fw-500" for="customCheck1">{{msg}}</label>
button class="btn text-white btn-lg btn-block px-10 shadow my-4"
<
type="submit"
s tyle="background-color:#4c0082 ;border-radius: 14px;"
[disabled]="frmY.invalid">Login</button>
p class="mb-3 pb-lg-2" style="color: #393f81;"
<
routerLink="/otp-signup">Forgot password? <a href="#!"
style="color: #393f81 ;">Sign up with OTP </a></p>
<a href="#!" class="small text-muted">Terms of use.</a>
<a href="#!" class="small text-muted">Privacy policy</a>
</form>
</div>
</div>
<div class="col-md-6 col-lg-5 d-none d-md-block">
img src="assets/images/home/password.gif" alt="login form" class="logimg
<
img-fluid img-responsive "
style="border-radius: 2rem; height: 500px; " />
</div>
</div>
</div>
31
</div>
32
div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000">
<img src="assets/images/anaitik/banner1.jpg" class="d-block banner w-100"
style="height: 610px;" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="assets/images/anaitik/banner2.jpg" class="d-block banner w-100"
style="height: 610px;" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/anaitik/banner3.jpg" class="d-block banner w-100"
style="height: 610px;" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button"
data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!--team section-->
33
<section class="team-section section">
<div class="container">
34
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000">
<img src="assets/images/anaitik/banner1.jpg" class="d-block banner w-100"
style="height: 610px;" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="assets/images/anaitik/banner2.jpg" class="d-block banner w-100"
style="height: 610px;" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/anaitik/banner3.jpg" class="d-block banner w-100"
style="height: 610px;" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button"
data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
35
<!--team section-->
<section class="team-section section">
<div class="container">
<div class="section-title text-center">
<h3>Our Expert
<span>Doctors</span>
</h3>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
illo, rerum
<br>natus nobis deleniti doloremque minima odit voluptatibus ipsam animi?</p>
</div>
<div class="row">
<div class="col-md-4 mb-3" (click)="productFilter('Men')">
<div class="card post-slide" >
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 380px;" alt="100%x280"
src="assets/images/anaitik/man.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Men</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional
content.</p>
</div>
</div>
36
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Women')">
<div class="card post-slide" >
<div class="post-img">
<img class="img-fluid" alt="100%x280" style="width: 100%; height: 380px;"
src="assets/images/anaitik/women.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Women</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional
content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Kids')">
<div class="card post-slide" >
<div class="post-img">
<img class="img-fluid" alt="100%x280" style="width: 100%; height: 380px;"
src="assets/images/anaitik/kids2.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Kids</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional
content.</p>
</div>
37
</div>
</div>
</div>
</div>
</section>
<!--Service Section-->
<section class="service-section bg-gray section">
<div class="container">
<div class="section-title text-center" >
<h3>Provided
<span>Services</span>
</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet.
qui suscipit atque <br>
fugiat officia corporis rerum eaque neque totam animi, sapiente culpa. Architecto!</p>
</div>
<div class="row">
<div class="col-12 text-right">
<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2"
role="button" data-bs-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button"
data-bs-slide="next">
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="col-lg-12">
38
<div id="carouselExampleIndicators2" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" >
<div class="carousel-item active" data-bs-interval="2000">
<div class="row">
<div class="col-md-4 mb-3"(click)="productFilter('Student')">
<div class="card post-slide" >
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/student.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body" >
<h4 class="card-title ">Student</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Doctor')" >
<div class="card post-slide" >
<div class="post-img">
<img class="img-fluid" alt="100%x280" style="width: 100%; height:
300px;" src="assets/images/anaitik/doctor.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
39
<div class="card-body">
<h4 class="card-title">Doctor</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Engineer')">
<div class="card post-slide" >
<div class="post-img">
<img class="img-fluid" alt="100%x280" style="width: 100%; height:
300px;" src="assets/images/anaitik/engener.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Engineer</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<div class="row">
40
<div class="col-md-4 mb-3" (click)="productFilter('Enterpreneur')">
<div class="card post-slide">
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/enterprenur.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Enterpreneur</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Enthusiasm')">
<div class="card post-slide">
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/gym.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title"> Gym Enthusiasm </h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
41
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Common Man')">
<div class="card post-slide">
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/commonman.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title"> Common Man </h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3" (click)="productFilter('Show Stopper')">
<div class="card post-slide">
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/customatic/showstopper.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
42
</div>
<div class="card-body">
<h4 class="card-title">Show Stopper</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Super Hero')">
<div class="card post-slide">
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/superhero.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title"> Super Hero </h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Fuckonly Series')">
<div class="card post-slide">
<div class="post-img">
43
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/fuckonly.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Fuck Only Series</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-20">
<button class=" view btn border-primary m-4 bg-light font-bold title-font "
(click)="productFilter('All')" >View All Product</button>
</div>
</section>
</h3>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
illo, rerum
<br>natus nobis deleniti doloremque minima odit voluptatibus ipsam animi?</p>
</div>
44
<div class="row">
<div class="col-md-4 mb-3" (click)="productFilter('Men')">
<div class="card post-slide" >
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 380px;" alt="100%x280"
src="assets/images/anaitik/man.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Men</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional
content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Women')">
<div class="card post-slide" >
<div class="post-img">
<img class="img-fluid" alt="100%x280" style="width: 100%; height: 380px;"
src="assets/images/anaitik/women.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Women</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional
content.</p>
45
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Kids')">
<div class="card post-slide" >
<div class="post-img">
<img class="img-fluid" alt="100%x280" style="width: 100%; height: 380px;"
src="assets/images/anaitik/kids2.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Kids</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional
content.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--End team section-->
<!--Service Section-->
<section class="service-section bg-gray section">
46
<div class="container">
<div class="section-title text-center" >
<h3>Provided
<span>Services</span>
</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet.
qui suscipit atque <br>
fugiat officia corporis rerum eaque neque totam animi, sapiente culpa. Architecto!</p>
</div>
<div class="row">
<div class="col-12 text-right">
<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2"
role="button" data-bs-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button"
data-bs-slide="next">
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="col-lg-12">
<div id="carouselExampleIndicators2" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" >
<div class="carousel-item active" data-bs-interval="2000">
<div class="row">
<div class="col-md-4 mb-3"(click)="productFilter('Student')">
<div class="card post-slide" >
47
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/student.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body" >
<h4 class="card-title ">Student</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Doctor')" >
<div class="card post-slide" >
<div class="post-img">
<img class="img-fluid" alt="100%x280" style="width: 100%; height:
300px;" src="assets/images/anaitik/doctor.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Doctor</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
48
<div class="col-md-4 mb-3" (click)="productFilter('Engineer')">
<div class="card post-slide" >
<div class="post-img">
<img class="img-fluid" alt="100%x280" style="width: 100%; height:
300px;" src="assets/images/anaitik/engener.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Engineer</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<div class="row">
<div class="col-md-4 mb-3" (click)="productFilter('Enterpreneur')">
<div class="card post-slide">
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/enterprenur.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
49
<h4 class="card-title">Enterpreneur</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Enthusiasm')">
<div class="card post-slide">
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/gym.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title"> Gym Enthusiasm </h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Common Man')">
<div class="card post-slide">
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/commonman.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
50
</div>
<div class="card-body">
<h4 class="card-title"> Common Man </h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3" (click)="productFilter('Show Stopper')">
<div class="card post-slide">
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/customatic/showstopper.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Show Stopper</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
51
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Super Hero')">
<div class="card post-slide">
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/superhero.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title"> Super Hero </h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" (click)="productFilter('Fuckonly Series')">
<div class="card post-slide">
<div class="post-img">
<img class="img-fluid" style="width: 100%; height: 300px;"
alt="100%x280" src="assets/images/anaitik/fuckonly.gif">
<a class="over-layer"><i class="fa fa-link"></i></a>
</div>
<div class="card-body">
<h4 class="card-title">Fuck Only Series</h4>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
52
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-20">
<button class=" view btn border-primary m-4 bg-light font-bold title-font "
(click)="productFilter('All')" >View All Product</button>
</div>
</section>
<!--End Service Section-->
<!-- <section class="pt-5 pb-5">
<div class="container">
53
<div class="row">
<div class="col-6">
<h3 class="mb-3">Carousel cards title </h3>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2"
role="button" data-bs-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2"
role="button" data-bs-slide="next">
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="col-12">
<div id="carouselExampleIndicators2" class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280"
src="https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&
;q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&a
mp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d">
<div class="card-body">
54
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural
lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280"
src="https://images.unsplash.com/photo-1517760444937-f6397edcbbcd?ixlib=rb-0.3.5&
;q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&a
mp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=42b2d9ae6feb9c4ff98b9133addfb698">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural
lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280"
src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&
;q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&a
mp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="card-body">
55
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural
lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280"
src="https://images.unsplash.com/photo-1532771098148-525cefe10c23?ixlib=rb-0.3.5&
;q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&a
mp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3f317c1f7a16116dec454fbc267dd8e4">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural
lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
56
<div class="card">
<img class="img-fluid" alt="100%x280"
src="https://images.unsplash.com/photo-1532715088550-62f09305f765?ixlib=rb-0.3.5&
;q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&a
mp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ebadb044b374504ef8e81bdec4d0e840">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural
lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280"
src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-0.3.5&am
p;q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&a
mp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=0754ab085804ae8a3b562548e6b4aa2e">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural
lead-in to additional content.</p>
</div>
</div>
</div>
</div>
57
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280"
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-0.3.5&
;q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&a
mp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ee8417f0ea2a50d53a12665820b54e23">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural
lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280"
src="https://images.unsplash.com/photo-1532777946373-b6783242f211?ixlib=rb-0.3.5&am
p;q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&a
mp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=8ac55cf3a68785643998730839663129">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural
lead-in to additional content.</p>
58
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280"
src="https://images.unsplash.com/photo-1532763303805-529d595877c5?ixlib=rb-0.3.5&am
p;q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&a
mp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=5ee4fd5d19b40f93eadb21871757eda6">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural
lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> -->
59
LOGIN PAGE
Login page for both users and administrators.
HOMEPAGE
he Home Screen will consist of screen were one can browse through the products which we
T
have on our website.
60
61
ABOUT US PAGE
This page describes about website and owners
CLOTHING PAGE (PRODUCTS)
This page consists of product details. This page appears same for both visitors and users.
Order Us Page:
Registered users can order desired products from here.
Contact us
Visitors and Registered users can contact website owners or administrators from here.
62
Track For Admin Page
Website Administrators can track and ship orders here.
REGISTER PAGE
New users can register here.
63
PAYPAL FOR PAYMENT
Once users orders products they are redirected to payment page.
64
65
Feasibility Studies
A feasibility study for an e-commerce clothing website would assess various factors to
determine the practicality and viability of the proposed venture. Firstly, the technical
feasibility would evaluate the required technology, infrastructure, and resources needed for
websitedevelopmentandmaintenance,ensuringthattheprojectistechnicallyfeasiblewithin
availablecapabilities.Marketfeasibilityanalysiswouldinvolveconductingthoroughmarket
research to understand customer preferences, market trends, and competition within the
onlineclothingretailsector.Thisassessmentwouldhelpdeterminethewebsite'spotentialto
attractandretaincustomers,generaterevenue,andachieveprofitability.Financialfeasibility
wouldinvolveestimatingtheinitialinvestmentrequiredforwebsitedevelopment,aswellas
ongoing operating expenses such as inventory management, marketing, and website
maintenance. Financialprojections,includingrevenueforecasts,costanalysis,andreturnon
investment (ROI) calculations,wouldbeconductedtoassesstheproject'sfinancialviability
and determine if it is economically feasible within the defined budget constraints.
Operational feasibility would assess the practicality of implementing and managing the
e-commercewebsite,includingevaluatingexistingprocesses,workflows,andorganizational
capabilities to ensure smooth operation. Legal and regulatory feasibility would involve
reviewing and complying with relevant laws, regulations, andindustrystandardsgoverning
e-commerce operations, including data privacy, consumer protection, and online payment
security. Lastly, schedule feasibility would evaluate the project timeline and deadlines,
assessing the feasibility of completing tasks and launching thewebsitewithintheproposed
timeframe. A comprehensive risk analysis would identify potential risks, challenges, and
uncertainties associated with the project, enabling stakeholders to develop mitigation
strategies and contingency plans. In conclusion, the feasibility study would provide
stakeholderswithvaluableinsightsintotheopportunities,risks,andchallengesoflaunching
an e-commerce clothing website, helping to inform decision-making and project planning
processes.
66
Testing
Testing for an e-commerce clothing website is a critical process aimed at ensuringthatthe
website functions as intended, provides a seamless userexperience,andmeetstheneedsof
both customers and the business. This testing process involves several key stages and
methodologies to comprehensively evaluate various aspects of the website's functionality,
performance, security, and usability.
The first stage of testing involves functional testing, where testers systematically examine
eachfeatureandfunctionalityofthewebsitetoensurethattheyworkcorrectly.Thisincludes
testingproductbrowsing,searchfunctionality,addingitemstothecart,thecheckoutprocess,
user account management,andanyotherinteractivefeatures.Testerssimulatedifferentuser
scenarios, such as browsing as a guest or registered user, making purchases with different
paymentmethods,andaccessingthewebsiteonvariousdevicesandbrowsers,toidentifyany
issues or inconsistencies.
Performancetestingisanothercrucialaspectoftestingforane-commerceclothingwebsite.
This involves assessing the website's speed, responsiveness, and scalability under different
loadconditions.Testersusetoolstosimulatehightrafficvolumesandmeasurethewebsite's
responsetimes,serverperformance,andresourceutilizationtoensurethatitcanhandlepeak
loads without slowdowns or crashes. Additionally, performance testing helps identify and
addressanybottlenecksorperformanceissuesthatcouldaffecttheuserexperienceorleadto
lost sales.
Security testing is essential to protect sensitive customer data and ensure compliance with
data protection regulations. Testers assess the website's vulnerability to common security
threats,suchasSQLinjection,cross-sitescripting(XSS),andauthenticationbypassattacks.
They also evaluate the effectiveness of encryption, access controls, and other security
measures implemented to safeguard user information, payment transactions, and other
confidential data. Any vulnerabilities or weaknesses discovered during security testing are
addressed promptly to prevent potential data breaches or cyberattacks.
67
Conclusion
Testing for an e-commerce clothing website isacriticalprocessaimedatensuring
that the website functions as intended, provides a seamless user experience, and
meetstheneedsofbothcustomersandthebusiness.Thistestingprocessinvolves
severalkeystagesandmethodologiestocomprehensivelyevaluatevariousaspects
of the website's functionality, performance, security, and usability.
The first stage of testing involves functional testing, where testers systematically
examine each feature and functionality of the website to ensure that they work
correctly. This includestestingproductbrowsing,searchfunctionality,addingitems
to the cart, the checkout process, user account management, and any other
interactive features. Testers simulate differentuserscenarios,suchasbrowsingas
a guest or registered user, making purchases with different paymentmethods,and
accessing the website on various devices and browsers, to identify any issues or
inconsistencies.
Performancetestingisanothercrucialaspectoftestingforane-commerceclothing
website. This involves assessing the website's speed, responsiveness, and
scalability under different load conditions.Testersusetoolstosimulatehightraffic
volumes and measure the website's response times, server performance, and
resource utilization to ensure that it can handle peak loads without slowdowns or
crashes. Additionally, performance testing helps identify and address any
bottlenecks or performance issues that could affect the user experienceorleadto
lost sales.
Security testing is essential to protect sensitive customer data and ensure
compliance with data protection regulations. Testers assess the website's
vulnerability to common security threats, suchasSQLinjection,cross-sitescripting
68
(XSS), and authentication bypass attacks. They also evaluate the effectiveness of
encryption,accesscontrols,andothersecuritymeasuresimplementedtosafeguard
user information, payment transactions, and other confidential data. Any
vulnerabilities or weaknesses discovered during security testing are addressed
promptly to prevent potential data breaches or cyberattacks.
Usability testing focuses on evaluating thewebsite'suserinterface,navigation,and
overall user experience. Testers assess the clarity of the website layout, the
intuitiveness of navigation menus and search functionality, and the ease of
completing common tasks such as finding products, adding items to the cart, and
checking out. Feedback from real users or test participants is collected to identify
any usability issues, pain points, or areas for improvement, allowing designersand
developers to make iterative changes to enhance the website's usability and user
satisfaction.
In addition to these core testing methodologies, other types of testing, such as
compatibilitytesting(toensurethewebsiteworkscorrectlyacrossdifferentdevices,
browsers, and operating systems), localization testing (to verify the website's
functionalityandcontentindifferentlanguagesandregions),andregressiontesting
(to ensure that new updates or changes do not introduce unintended bugs or
regressions), may also be conducted as part of the testing process.
Overall, thorough testing is essentialforane-commerceclothingwebsitetoensure
itsreliability,performance,security,andusability,ultimatelyenhancingthecustomer
experience and driving business success.
69
Future Work
Looking ahead, the future of e-commerce clothing websites holds exciting possibilities for
innovation and growth. One area of future work lies in enhancing personalization and
customization features to deliver more tailored shopping experiences for customers. By
leveraging advanced data analytics, machine learning algorithms,andartificialintelligence,
e-commerce clothing websites can better understand individual preferences, style
preferences,andpurchasingbehaviorstorecommendpersonalizedproductselections,outfits,
and styling suggestions. This level of customization not only enhances the shopping
experience but also increases customer engagement and loyalty.
Another avenue for future work involves the integrationofimmersivetechnologiessuchas
augmented reality (AR) andvirtualreality(VR)torevolutionizethewaycustomersinteract
with clothing products online. By allowing users to virtually try on clothes, visualize how
garments fit and look in different settings, and even customize designs in real-time,
e-commerce clothing websites can bridge the gap between the online and offline shopping
experience, reducing returns and enhancing overall satisfaction.
Furthermore, advancements in sustainability and ethical fashion present opportunities for
e-commerce clothing websites to adopt more environmentally friendly and socially
responsible practices. Future work may involve partnering with eco-conscious brands,
implementingsustainablesourcingandmanufacturingprocesses,andprovidingtransparency
about product origins and supply chains. By prioritizing sustainability and ethical
considerations, e-commerce clothing websites can appeal to a growing segment of socially
conscious consumers and contribute to positive social and environmental impact.
Additionally, as technology continues to evolve, e-commerceclothingwebsitescanexplore
new channels and platforms for reaching customers, such as voice commerce, social
commerce, and mobile commerce.
70
Bibliography
Creating a comprehensive bibliography for e-commerce clothing websites involves
referencing a variety of sources, including academic papers, industry reports, books, and
online resources. Here's a paragraph with an example bibliography:
"Thedevelopmentandoptimizationofe-commerceclothingwebsiteshavebeenextensively
studied and documented in academic literature and industry reports. Key academic papers
such as Chen and Chang's (2012) study on consumer behavior in online clothingshopping
and Li and Zhang's (2016) research on the impact of website design on e-commerce
performance provide valuable insights into understanding customer preferences and
optimizingwebsitefunctionality.IndustryreportsfromreputablesourcessuchaseMarketer,
Forrester Research, and Statista offer valuablestatisticsandtrendsshapingthee-commerce
clothing market. Additionally,bookslike"E-commerceWebsiteOptimization:Why95%of
YourWebsiteVisitorsDon'tBuy,andWhatYouCanDoAboutIt"byDanCroxen-Johnand
JohannvanTonderprovidepracticalstrategiesandtechniquesforimprovingconversionrates
and user experience on e-commerce websites. Online resources such as the Shopify blog,
Magento forums, and the Ecommerce Platforms website offer a wealth of information and
best practices for building and managing successful e-commerce clothing websites."
71
You might also like
- Mobile Application Development Notes BCA VI SEM100% (2)Mobile Application Development Notes BCA VI SEM25 pages
- SIDA IN POWER BI MINOR PROJECT REPORT (6) - RemovedNo ratings yetSIDA IN POWER BI MINOR PROJECT REPORT (6) - Removed8 pages
- Latest E - Commerce Website DocumentaionNo ratings yetLatest E - Commerce Website Documentaion51 pages
- TE Mini Project Report Format Sem 5.docx (2) Pages 1 Merged Pages DeletedNo ratings yetTE Mini Project Report Format Sem 5.docx (2) Pages 1 Merged Pages Deleted18 pages
- CLOTHES STORE PROJECT REPORT by SMITALI PATEKAR100% (1)CLOTHES STORE PROJECT REPORT by SMITALI PATEKAR37 pages
- MONETIZE CLOUD & AI: From technology innovation to business excellenceFrom EverandMONETIZE CLOUD & AI: From technology innovation to business excellenceNo ratings yet
- Complete MTE Syllabus II Year 2024-2025 15112024No ratings yetComplete MTE Syllabus II Year 2024-2025 151120242 pages
- Database Model and Database Types (12M)No ratings yetDatabase Model and Database Types (12M)81 pages
- Database Management of Apparel Business: By:-Aman Raj (BFT/17/2152)No ratings yetDatabase Management of Apparel Business: By:-Aman Raj (BFT/17/2152)11 pages
- DBMS Keys - Candidate, Super, Primary, Foreign Key Types With ExampleNo ratings yetDBMS Keys - Candidate, Super, Primary, Foreign Key Types With Example10 pages
- Database System Concepts & ArchitectureNo ratings yetDatabase System Concepts & Architecture53 pages
- Big Data Engineering: Post Graduate Program inNo ratings yetBig Data Engineering: Post Graduate Program in4 pages
