E commerce

PROJECT REPORT
On
E-COMMERCE WEBSITE
Submitted in Partial Fulfillment of the
Requirements for the Award of the degree
Submitted by:
Priyanshu Joshi (S160022100505)
Nitin Negi (S150022100164)
Lakhan Singh Rautella (S150022100527)
Tanuj Singh (S150022100307)
Under The Guidance of
Mrs. Nisha Mam
NIIT

2 | P a g e
[Janakpuri, New Delhi]
CONTENT
Chapter Page No.
Certificate 4.
Declaration 5.
Acknowledgement 6.
Abstract 7.
List of Figures 8.
 Basic AIM
 Client Side Programming
 Server Side Programming
 How It Works
 How Do We Get Idea?
Hardware and Software Requirements Specification 9.
 Web Server
 Web Browser
 Server Software
 TCP/IP Address
 Ports and Protocols Web Authorizing Tools
 Database System
 Programming Languages
 Browser and Platform Capabilities
System Design (UML and Use Cases) 13.
 Use-case diagram 14
 Activity diagram 15
 Class diagram 16

3 | P a g e
 DFD 17-19
Database Tables 20-21
Screenshots 22-29
Coding 30
 User pages 31-125
 Admin pages 126-170
 Java Beans 171-181
 DAO 182-199
Result 200
Future Scope and Conclusion & References 201

4 | P a g e
CERTIFICATE
This to certify that the project report entitled “E-Commerce Website” which has
been submitted by [ Priyanshu Joshi (S160022100505), Nitin Negi
(S150022100164), Lakhan Singh Rautella (S150022100527) and Tanuj Singh
(S150022100307)] in the partial fulfillment of the requirements for the award of the
degree, from NIIT, New Delhi is an authentic record of the group’s own work carried
out by them under my guidance. The matter embodied on this thesis is original and
has not been submitted for the award of any other degree.
Date: Mrs. Nisha
Tech Mentor
NIIT
Janakpuri

5 | P a g e
DECLARATION
We hereby declare that all the work presented in the documentation entitled “E-
Commerce Website” in the partial fulfillment of the requirement for the award of
degree Software Engineering from NIIT in an authentic record of our own work
carried.
Date:
Priyanshu Joshi
(160022100505)
Nitin Negi
(S150022100164)
Lakhan Singh Rautella
(S150022100527)

6 | P a g e
Tanuj Singh
(S150022100307)
ACKNOWLEDGEMENT
We would like to express our gratitude towards our supervisor and our Teachers in
NIIT-Janakpuri, Mrs. Nisha who has given us support and suggestions. Without her
help we could not have presented this dissertation up to the present standard. We
also take this opportunity to thank all others who gave us support for the project and
in other aspects of our study at NIIT .
Date:
Priyanshu Joshi
(160022100505)
Nitin Negi
(S150022100164)

7 | P a g e
Lakhan Singh Rautella
(S150022100527)
Tanuj Singh
(S150022100307)
ABSTRACT
Online shopping has been known as a rapidly growing business, and although online
grocery shopping has not followed these same growth patterns in the past, it is now
being recognized for its potential. As such, the focus of previous online shopping
research has seldom encompassed this specific retail market, with the existing
studies focusing essentially on consumer’s motivations and attitudes, rather than
how consumers actually groceries online. Therefore, this dissertation has the
objective of uncovering some of the details which can help further both academic
research and managerial knowledge. The general consumer decision making
process is characterized by a pre-decisional a decisional and a post-decisional
phase. All of which were addressed in an exploratory fashion, through a mixed
methods strategy which combined both quantitative and qualitative methods of data
collection. One of the main results obtained through this study is complimentarily of
retail channels – as it was found that online grocery shopping serves essentially for
major shopping trips, being complimented with smaller trips to traditional stores.
Moreover, some resistance to online grocery shopping, specifically the shopping
of fresh produce, was also still found among the Portuguese population. Additionally,
based on two of the main consumer shopping orientations which shape online
grocery shopping. Price-sensitivity and convenience, this study uncovered consumer
groups which presented distinguishable shopping strategies. These strategies are in
general very focused and rational, and very essentially based on the shopper’s more

8 | P a g e
prominent shopping orientation. Moreover, all consumer types were found to have
general negative response to online stimuli present during shopping. Thus, this
dissertation contributed to the knowledge of consumer decision making process for
online grocery shopping, making wave for new and further researches in this field
and contributing to managerial knowledge.
INTRODUCTION
Basic Aim:
Complete online solution for SEO and SMO techniques for making websites popular
and get higher ranking on search engines.
Tailor made design with value added features for gaining and retaining customers on
the site.
Unlimited changes without functional difficulties for addressing ever-changing
business requirements
Safe and secure payment options and mechanism for generating trust among
customers and building up their confidence for the particular site.
Technical assistance for any difficulty for seamless operation of the site.
Client Side Programming:
Client-side (i.e. frontend) web development involves everything users see on their
screens. Here are the major frontend technology stack components.
 Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). HTML tell the
browser how to display the content of web pages, while CSS styles that
content, Bootstrap is a helpful framework for managing HTML and CSS.
 JavaScript (JS). JS Makes web pages interactive. There are many JavaScript
libraries (such as jQuery, AJAX) and frameworks (such as Hibernate) for faster
and easier web development.
Server Side Programming:

9 | P a g e
The server side isn’t visible to users, but it powers the client side, just as a power
station generates electricity for your house.
The challenge lies mainly in the choice of server side technologies for developing
you web application.
As for server side programming languages, they are used to create the logic of
websites and applications. Frameworks for programming languages offer lots of tools
for simpler and faster coding. Let’s mention some of the popular programming
languages and their major frameworks (in parentheses)
 Java (Hibernate)
Node.js, a JavaScript runtime, is also used for backend programming.
Web application needs a place to store its data and that’s when a Database is used.
There are two types of Databases: Relational and Non-Relational databases, each
having its pros and cons. Here are the most common databases for web
development.
 Oracle 10gXE
A web application needs a caching system to reduce the load on the database and
to handle large amount of traffic. Memcached and Redis are the most widespread
Caching system.
Finally, a web application needs a server to handle requests from client’s computers.
There are two major players in this domain:
 Apache
 Glassfish
To develop a web application, you need to select the server, database, programming
language, framework and frontend tools that you are going to use. These web
development technologies build on top of each other and are, in fact, collectively
called a stack.
How It Works?
E-Commerce web site system works with the help of a number of backend frontend
coding languages. The internal working is mainly based on the MVC flow of the E-
Commerce website.
MVC stands for – Model, View and Controller.
Model:

10 | P a g e
Model represents shape of the data and business logic. It maintains the data of the
application. Model Objects retrieve and store mol state in a database. Model is a
data and business logic.
View:
View is a user interface. View display data using model to the user and also enables
them to modify the data. View is a user interface.
Controller:
Controller handles the user request. Typically, user interact with view, which in-terms
raises appropriate URL request will be handled by a controller. The controller
renders the appropriate view with the model data as a response. Controller is a
request handler.
MVC is mostly used with spring for any web application development. It is very
powerful and nice layered architecture for flow and configuration. It is very flexible to
integrate with other web frameworks like struts. In spring web MVC, Dispatcher
servlet class works as the front controller. It is responsible to manage the flow of the
spring MVC application.
Let’s understand the steps involved in the MVC flow.
First request will be received by Dispatcher Servlet.
Second, dispatcher will take the help of handlerMapping and get to know the
Controller class name associated with the given request.
Third, so request transfer to controller, and then controller will process the request by
executing appropriate methods and returns ModeAndView object (contains Model
Data and View Name) back to Dispatcher Servlet.
Now the dispatcher servlet sends the model object to the view resolver to get the
actual view page.
Finally, the dispatcher servlet will pass the model object to the view page to display
the result.
How Do We Get The IDEA?
The invention of faster internet connectivity and powerful online tools has resulted in
a new commerce arena – E-Commerce. E-Commerce offered many advantages to
companies and customers.

11 | P a g e
 Faster buying/selling procedure, as well as easy to find products
Buying/Selling 24/7.
 More reach to customers, there is n theoretical geographic limitations.
 Low operational cost and better quality of services.
 No need of physical company set-ups.
 Easy to start and manage a business.
 Customers can easily select products from different providers without
moving around physically.
HARDWARE AND SOFTWARE
REQUIREMENT SPECIIFICATION
The hardware and software which can be employed to implement the code
generated in this project is listed below:
 Web Server
 Web Browser
 Server Software
 TCP/IP Address
 Ports and Protocols
 Web Authoring Tools
 Database System
 Domain Name
 Programming Requirements
 Browser and Platform Capabilities
Web Server
Web Server can refer to either the hardware (the computer) or the software (the
computer application) that help to deliver content that can be accessed through the
internet. The most common use of the web servers is to host websites but there are
other uses as well as such as data storage or running an enterprise application.
Web Browser
A web browser is a program/application designed to display the internet with web
pages. A few examples are Microsoft Edge and Google Chrome.
Server Software

12 | P a g e
Software is required in order for the server to run the software manages the
connections and the server, a few examples of home server software are:
 Apache
 Glass Fish Server
TCP/IP Addresses
Each computer must have unique IP address. TCP/IP uses four numbers to address
a compute. The numbers are in between 0-255. IP addresses are normally written as
four numbers separated by a period like this: 192.168.1.50. TCP/IP is used when
transferring data across a network. If computers do not use the same protocols, it
become impossible for the data to be understood.
Ports and Protocols
The protocol is the type of connection you are running through, examples are HTTP,
SSH, DNS and FTP. The port is the name of the connection you are going through,
the port no. usually the last 3 numbers of the default gateway, each device that is
connected to the network will have its own unique port number.
Web Authoring Tools
Web Authoring Tools are software or cloud servers that allow you to create and put
up a website. Microsoft publisher are the example that you can use.
Database System
A Database System is the Database a company uses to link with the website. It can
contain many things that will be changed by the users of the website. The database
will store Passwords, Names, Addresses, Store Items and other business
information.
Domain Name

13 | P a g e
The Domain Name is the main section of the website. Google is an example:
http://www.google.com/. Here “google” is the Domain Name.
Programming Languages:
Web Pages are usually written in HTML within the code other languages can be
used such as JSP, CSS,BOOTSTRAP and JavaScript. HTML itself doesn’t provide
E-Commerce capabilities so other languages must be used as well.
SYSTEM DESIGN
The Unified Modeling Language (UML) is a general-purpose, developmental,
modelling language in the field of software engineering that is intended to provide a
standard way to visualize the design of a system.
The creation UML was originally motivated by the desire to standardize the disparate
notational system and approaches to software design. It was developed by Grady
Booch, Ivan Jacobson and James RumBaugh at Rational Software in 1994-1995,
with further development led by them in 1996.
In 1997 UML was adopted as a standard by the Object Management Group (OMG),
and has been managed by this organization ever since. In 2005 UML was also
published by the International Organization of Standardization (ISO) as an approved
ISO standard. Since then the standard has been periodically revised to cover the
latest revision of UML.

15 | P a g e
Fig:use-case diagram

18 | P a g e
DFD (DATA FLOW DIAGRAM)
0TH
LEVEL DFD
1ST
LEVEL DFD (USER)

19 | P a g e
1ST
LEVEL DFD (ADMIN)
2ND
LEVEL DFD (USER)

20 | P a g e
2ND
LEVEL DFD (ADMIN)

23 | P a g e
User Interface
Home

27 | P a g e
Checkout Page
Email confirmation

28 | P a g e
Admin Interface
Login

29 | P a g e
Dashboard
Add product

30 | P a g e
Viewp/Edit/Delete product

32 | P a g e
Index.jsp
<html>
<head>
<title>Online shopping site in India...</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-
scale=1.0">
<link href="css/jquery.bxslider.css"rel="stylesheet"
type="text/css">
<link href="cssstyle.css" rel="stylesheet" type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></s
cript>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.j
s"></script>
<style>
h3
{
color:black;
}

33 | P a g e
</style>
<script src="http://code.jquery.com/jquery-2.2.4.js"
crossorigin="anonymous"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/my.js">
</script>
</head>
<body>
<div id="wrapper">
<div id= "container">
<div id="logo">
<span id="shoppers">SHOPPERS.</span><span
id="com">com</span>
</div>
<div id="search">
<form action="" class="search">
<input class="search-area" type="text" name="text"
placeholder="Searchhere for products">
<button type="submit" class="btn"><iclass="fafa-
search"></i></button>
</form>
</div>
<div id="user-menu">
<ul>
<li>
<a href="#">

34 | P a g e
<i class="fafa-shopping-cart"><strong> Cart</strong></i>
</a>
</li>
<li>
<a href="#" id="popup" onclick="popup()">
<i class="fafa-user"><b> Login& Signup</b></i>
</a>
</li>
<li>
<a href="#">
<i class="fafa-download"><strong>  APP
Download</strong></i>
</a>
</li>
</ul>
</div>
</div>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn" style="margin-left:
80px;">Electronices
<i class="fafa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column">
<p style="color:black"><strong>Mobiles</strong></p>

35 | P a g e
<a href="mi.jsp">Mi</a>
<a href="#">RealMe</a>
<a href="samsung.jsp">Samsung</a>
<a href="lenovo.jsp">Lenovo</a>
<a href="oppo.jsp">Oppo</a>
<a href="#">Vivo</a>
<a href="apple.jsp">Apple</a>
<a href="#">Honor</a>
</div>
<p style="color:black"><strong>Mobiles
Accessories</strong></p>
<a href="#">Mobile Cases</a>
<a href="#">Headphonesand Headsets</a>
<a href="#">Screenguards</a>
<a href="#">Powerbank</a>
<a href="#">Memorycard</a>
<a href="#">SmartHeadphones</a>
<a href="#">Mobile cables</a>
<a href="#">Mobile chargers</a>
<a href="#"><b>SmartWearable Tech</b></a>
<a href="#">SmartWatches</a>

</div>

36 | P a g e
<p style="color:black"><strong>Laptops and
PCs</strong></p>
<a href="#">Gaming Laptops</a>
<a href="#"><b>DesktopsPCs</b></a>
<a href="#"><b>Gaming & Accessories</b></a>
<a href="#"><b>ComputerAccessories</b></a>
<a href="#">Externals Hard Disks</a>
<a href="#">Pendrives</a>
<a href="#">Laptopskins</a>
<a href="#">LaptopBags</a>
<a href="#">Mouse</a>
<a href="#"><b>ComputerPeripherals</b></a>
<a href="#">Printers and Ink cartridges</a>

</div>
<p style="color:black"><strong>Televisions</strong></p>
<a href="#"><b>HomeEntertaintment</b></a>
<a href="#">Home Audio Speakers</a>
<a href="#">Home Theatres</a>
<a href="#">BluetoothSpeakers</a>
<a href="#">DTHSet Top Box</a>
<a href="#"><b>SmartHome Automation</b></a>
<a href="#">Google Home</a>
<a href="#"><b>Camera</b></a>

37 | P a g e
<a href="#">DSLR</a>
<a href="#">Compact& Bridge Camera</a>
<a href="#">Sports & Action</a>
<a href="#"><b>CameraAccessories</b></a>
<a href="#">Lens</a>

</div>
</div>
</div>
</div>
<button class="dropbtn" style="margin-left:80px;">TVs&
Appliances
</button>
<div class="row">
<p style="color:black"><strong>Television</strong></p>
<a href="#"><b>Smart& Ultra HD</b></a>
<a href="#"><b>TVs By Brand</b></a>
<a href="#">Mi</a>
<a href="#">LG</a>
<a href="#">SAMSUNG</a>
<a href="#">Micromax</a>

38 | P a g e
<p style="color:black; margin-top: 10px;"><strong>TVsBy
ScreenSize</strong></p>
<a href="#">48 & Above</a>
<a href="#">39-43</a>
<a href="#">32</a>
<a href="#">24 & below</a>
</div>
<p style="color:black;"><strong>Washing
Machine</strong></p>
<a href="#">Fully Automatic Front Load</a>
<a href="#">SemiAutomatic Top Load</a>
<a href="#">FullyAutomatic Front Load</a>
<p style="color:black;margin-top:
10px;"><strong>Refrigerators</strong></p>
<a href="#">Single Door</a>
<a href="#">DoubleDoor</a>
<a href="#">Triple Door</a>
<a href="#">Side By Side</a>
<a href="#">Convertoble</a>
<p style="color:black;margin-top: 10px;"><strong>Air
Conditioners</strong></p>
<a href="#">InverterAC</a>
<a href="#">Windows ACs</a>
<a href="#">SplitACs</a>
</div>
<p style="color:black;"><strong>Kitchen
Appliances</strong></p>

39 | P a g e
<a href="#">OvenToasterGrills(OTG)</a>
<a href="#">Juicer/Mixer/Grinder</a>
<a href="#">Electric Kettle</a>
<a href="#">Electric Cokkers</a>
<a href="#">SandwichMakers</a>
<a href="#">Pop-Up Toasters</a>
<a href="#">Coffee Makers</a>
<a href="#">Dishwashers</a>
<a href="#"><b>Healthy Living Appliances</b></a>
<a href="#"><b>MonsoonCooking</b></a>
</div>
<p style="color:black;"><strong>SmallHome
Appliances</strong></p>
<a href="#">Irons</a>
<a href="#">WaterGysers</a>
<a href="#">WaterPurifiers</a>
<a href="#">AirPurifiers</a>
<a href="#">Vacuum Cleaners</a>
<a href="#">Inverters</a>
<a href="#">Voltage Steblizers</a>
<a href="#">ImmersionRods</a>
</div>
</div>
</div>
</div>
<button class="dropbtn" style="margin-left:80px;">Men

40 | P a g e
</button>
<div class="row">
<p style="color:black;" ><strong>Footwear</strong></p>
<a href="#">Sports Shoes</a>
<a href="#">CasualShoes</a>
<a href="#">FormalShoes</a>
<a href="#">Sandals and Floaters</a>
<a href="#">Loafers</a>
<a href="#">Boots</a>
<a href="#">Running Shoes</a>
<a href="#">Sneakers</a>
<p style="color:black; margin-top: 10px;"><strong>Men's
Grooming</strong></p>
<a href="#">Deodorants</a>
<a href="#">Perfumes</a>
<a href="#">Beard Care</a>
<a href="#">Trimmers</a>
</div>
<p style="color:black;" >
<strong>Clothing</strong></p>
<a href="#"><b> Top Wears</b></a>
<a href="#"> T- Shirts</a>
<a href="#"> Shirts</a><a href="#">Link1</a>
<a href="#">Kurtas</a>

41 | P a g e
<a href="#">Suits And Blazzers</a>
<a href="#">Jackets</a>
<a href="#">SweatShirts</a>
<p style="color:black; margin-top: 10px;"><strong>Bottom
Wears</strong></p>
<a href="#">Jeans</a>
<a href="#">Trousers</a>
<a href="#">Shorts</a>
<a href="#">Cargo</a>
</div>
<p style="color:black;"><strong>SportsWear</strong></p>
<a href="#">Sports T-Shirts</a>
<a href="#">Trackpants</a>
<a href="#">TrackSuits</a>
<p style="color:black; margin-top: 10px;"><strong>InnerWear& Sleep
Wear</strong></p>
<a href="#">Briefs& Trunks</a>
<a href="#">Vests</a>
<a href="#">Boxers</a>
<a href="#">Thermals</a>
<a href="#"><b>Ties,Caps,Socks & More</b></a>
<a href="#"><b>KurtaPyjama & More</b></a>
<a href="#"><b>Fabrices</b></a>
<a href="#"><b>WinterWears</b></a>
</div>

42 | P a g e
<strong>Watches</strong></p>
<a href="#">Fasttrack</a>
<a href="#">Titan</a>
<a href="#">Sonata</a>
<a href="#">Casio</a>
<a href="#">Fossil</a>
<p style="color:black; margin-top:
10px;"><strong>Accesories</strong></p>
<a href="#">Backpacks</a>
<a href="#">Wallets</a>
<a href="#">Sunglases</a>
<a href="#">Belts</a>
<a href="#">Luggage & Travel</a>
</div>
</div>
</div>
</div>
<button class="dropbtn" style="margin-left:80px;">Women
</button>
<div class="row">
<p style="color:black;" ><strong>Clothing</strong></p>
<a href="#"><b>WesternWear</b></a>
<a href="#">Top,T-Shirts & Shirts</a>

43 | P a g e
<a href="#">Dresses</a>
<a href="#">Leggings & Jeggings</a>
<a href="#">Skirts</a>
<a href="#"><b>Lingries& SleepWear</b></a>
<a href="#">Nightsuits & Nightdresses</a>
<a href="#">Shapewear</a>
<a href="#"><b>Sports Wear</b></a>
<a href="#">T-Shirts</a>
<a href="#">Trakpants</a>
</div>
<p style="color:black;" ><strong>Ethnic Wear</strong></p>
<a href="#">Sarees</a>
<a href="#">Kurtas & Kurtis</a>
<a href="#">DressMaterial</a>
<a href="#">LehengaCholi</a>
<a href="#">Blouse</a>
<a href="#">Leggings& Salwars</a>
<a href="#">Peticoats</a>
<a href="#">Duppatas</a>
<a href="#"><b>WinterWear</b></a>
<a href="#">International Brands</a>
<a href="#">New Arrivals</a>
<a href="#">Party Dresses</a>
<a href="#">Crop Tops</a>

44 | P a g e
</div>
<a href="#"><strong>Sandals</strong></a>
<a href="#">Flats</a>
<a href="#">heels</a>
<a href="#">Wedges</a>
<a href="#"><b>Shoes</b></a>
<a href="#"><b>Sllipers& Flip Flop's</b></a>
<a href="#"><b>PersonalCare Appliances</b></a>
<a href="#">Hair Straightners</a>
<a href="#">Hair Dryers</a>
</div>
<p style="color:black;" ><strong>Beauty & Grooming</strong></p>
<a href="#">Make Up</a>
<a href="#">SkinCare</a>
<a href="#">Hair Care</a>
<a href="#">Bath& Spa</a>
<a href="#">SkinCare</a>
<a href="#">Deodrants & Perfumes</a>
<a href="#"><b>Accessories</b></a>
<a href="#">Slings Bags</a>
<a href="#">Wallets& Belts</a>

45 | P a g e
<a href="#">Sunglasses</a>
</div>
</div>
</div>
</div>
<button class="dropbtn" style="margin-left:80px;">Baby& Kids
</button>
<div class="row">
<p style="color:black;" ><strong>Kids Clothing</strong></p>
<a href="#"><b>Boy's Clothing</b></a>
<a href="#">Polos& T-Shirts</a>
<a href="#">Ethnic Wear</a>
<a href="#"><b>Girl'sClothing</b></a>
<a href="#">Dresses & Skirts</a>
<a href="#">T-Shirts & Tops</a>
<a href="#"><b>BabyBoyClothing</b></a>
<a href="#">BodySuits</a>
<a href="#"><b>BabyGirl Clothing</b></a>

46 | P a g e
</div>
<p style="color:black;" ><strong>Kids Footwear</strong></p>
<a href="#"><b>Boy'sFootwear</b></a>
<a href="#">Sandals</a>
<a href="#"><b>Girl's Footwear</b></a>
<a href="#">Flats & Bellis</a>
<a href="#"><b>Boy's Footwear</b></a>
<a href="#">Booties</a>
<a href="#"><b>CharacterShoes</b></a>
<a href="#"><b>SchoolSupplies</b></a>
<a href="#">SchoolBags</a>
<a href="#">LunchBox</a>
<a href="#">Kids Watches</a>
</div>
<p style="color:black;" ><strong>Toys</strong></p>
<a href="#">Remote ControlToys</a>
<a href="#">EducationalToys</a>
<a href="#">SoftToys</a>
<a href="#">Cars & Die-Cast Vehicle</a>
<a href="#">OutDoorToys</a>
<a href="#">Board Games</a>
<a href="#">Musical Toys</a>
<a href="#">Dolls & Doll Houses</a>

47 | P a g e
<a href="#">Puzzels</a>
<a href="#">Helicopter& Drones</a>
<a href="#">ToyGuns</a>
</div>
<p style="color:black;" ><strong>Baby Care</strong></p>
<a href="#">Diapers</a>
<a href="#">Wipes</a>
<a href="#">Strollers & Activity Gears</a>
<a href="#">BabyBadding</a>
<a href="#">Feeding & Nursing</a>
<a href="#">Maternity Care</a>
<a href="#">Bath Bath & Skin Care</a>
<a href="#">BabyGrooming</a>
<a href="#">BabyGifting Sets</a>
<a href="#">Furniture</a>
</div>
</div>
</div>
</div>
<button class="dropbtn" style="margin-left:80px;">Home & Furniture
</button>
<div class="row">

48 | P a g e
<p style="color:black;" ><strong>Kitchen&
Dinning</strong></p>
<a href="#">Pots & Pans</a>
<a href="#">Pressure Cookers</a>
<a href="#">KitchenTools</a>
<a href="#">Gas Stoves</a>
<p style="color:black; margin-top: 10px;" ><strong>Dinning
& Serving</strong></p>
<a href="#">CoffeeMugs</a>
<a href="#">Dinnerware & Cokkery</a>
<a href="#">Bar& Glasware</a>
<p style="color:black; margin-top: 10px;" ><strong>Kitchen
Storage</strong></p>
<a href="#">WaterBottles</a>
<a href="#">LunchBoxes</a>
<a href="#">Flasks & Casseroles</a>
<a href="#">KitchenContainers</a>
</div>
<p style="color:black;" ><strong>Furniture</strong></p>
<a href="#">Soffas</a>
<a href="#">Beds</a>
<a href="#">Dinning Tables & Sets</a>
<a href="#">Tables</a>
<a href="#">OfficeChairs</a>
<a href="#">Chairs</a>
<a href="#">BeanBags</a>
<a href="#">ShoeRacks</a>

49 | P a g e
<a href="#">Wardrobes</a>
<a href="#">SofaBeds</a>
<a href="#">Drawers</a>
</div>
<p style="color:black;" ><strong>Furnishing</strong></p>
<a href="#">Bedsheets</a>
<a href="#">Cutains</a>
<a href="#">Cushion& Pillow Covers</a>
<a href="#">Blankets,Quilts & Dohars</a>
<a href="#">Towels</a>
<a href="#">kitchen& Dinning Linen</a>
<a href="#">Mats & Carpet</a>
</div>
<p style="color:black;" ><strong>Home Decor</strong></p>
<a href="#">Paintings</a>
<a href="#">Clocks</a>
<a href="#">WallShelves</a>
<a href="#">WallDecals</a>
<a href="#"><b>Lighting</b></a>
<a href="#">SmartLighting</a>
<a href="#">LED & CFL</a>
<a href="#">Decorative Lighting & Lamps</a>
<a href="#">EmergencyLight</a>
<a href="#">Link 3</a>
</div>

50 | P a g e
</div>
</div>
</div>
</div>
<div class="Imageslider">
<ul class="bxslider">
<li><img src="image/slider2.jpg"height="350" width="100%"></li>
<li><img src="image/slider7.jpg"height="350" width="100%;"></li>
</ul>
</div>
<!-=======================categories====================-->
<div class="daydeal">
<div class="d-o-d-header"><h2>Deals of The day</h2><hr>
<button class="d-o-d-btn">ViewAll</button>
</div>
<a href="">
<div class="catbox">
<img src="image/one.jfif" alt="image not found">
<span>20% off on Men's Shoes</span>
</div>
</a>
<a href="">
<img src="image/two.jfif"alt="image not found">

51 | P a g e
<span>30% off on Backpacks</span>
</div>
</a>
<a href="">
<img src="image/three.jfif" alt="image not found">
<span>10% off on Headphones</span>
</div>
</a>
<a href="">
<img src="image/foue.jfif" alt="image not found">
<span>50% off on Sneakers</span>
</div>
</a>
<a href="">
<img src="image/six.jfif" alt="image not found">
<span>20% off on powerbank</span>
</div>
</a>
</div>

<div class="bg-model">
<div class="model-content">
<div class="close">
<button id="close"> <i class="fafa-close"></i> </button>

52 | P a g e
</div>
<img src="image/si/signup.png" height="80" width="80" alt="not
found"><br>
<form action="Connectivity" method="post">
<p id="msg">Registered Succesfully</p>
<input type="text" id="name" placeholder="Enteryour Name" name="n">
<br>
<input type="text" id="m_num" placeholder="EnterMobile Number"
name="mb"><br>
<input type="password" id="pass" placeholder="Enterpassword "
name="pas"><br>
<input type="password" id="cpas" placeholder="Confirm
Password"><br>
<button type="submit" id="sign_btn">SignUp</button>
</form>
<form action="">
<button type="submit" style="background-
color:ghostwhite;color:dodgerblue;" id="login">Existing User?
LogIn</button>
</form>
</div>
<div class="login-content">
<div class="close_login">
<button id="close_login"> <i class="fafa-close"></i> </button>
</div>
<img src="image/si/signup.png" height="80" width="80" alt="image not
found"><br>
<form action="checkUser.jsp" method="post">
<input type="text" placeholder="EnterUserName" name="un"><br>

53 | P a g e
<input type="password" placeholder="EnterPassword"
name="pass"><br>
<button type="submit" id="login_btn">Login</button>
</form>
<form action="">
<button type="submit" style="background-
color:ghostwhite;color:dodgerblue;" id="signup">Newto Shoppers?
Signup</button>
</form>
</div>
</div>

<div class="ps-care" >
<div class="d-o-d-header"><h2>Personal& Health Care</h2><hr>
<a href="">
<div class="ps-catbox">
<img src="image/perscare/pc1.jpeg" width="142.50" height="150"
alt="image not found">
<div class="ps-details">
<b><p margin>Phillips Trimmers</p></b>
<span>BestSellers</span>
<p class="off">Upto 20% off</p>
</div>
</div>
</a>
<a href="">

54 | P a g e
<img src="image/perscare/pc2.jpeg" width="134" height="150"
<b><p margin>Massagers</p></b>
<span>from Rs.99</span>
<p class="off">Scholl,Max & More</p>
</div>
</div>
</a>
<a href="">
<b><p margin>Hair Dryers</p></b>
<span>Top Brands</span>
<p class="off">philips,Panasonic</p>
</div>
</div>
</a>
<a href="">
<b><p margin>Health Sense BP Monitors</p></b>
<span>BestDeals</span>
<p class="off">35%off</p>

55 | P a g e
</div>
</div>
</a>
<a href="">
<img src="image/perscare/pc7.jpeg" width="142.50" height="150"
<b><p margin>Mens Grooming</p></b>
<p class="off">Philips,Nova& others</p>
</div>
</div>
</a>
<a href="">
<img src="image/perscare/pc8.jpeg"height="150" width="66.5"
<b><p margin>Trimmers</p></b>
<p class="off">Upto 20% off</p>
</div>
</div>
</a>
<a href="">

56 | P a g e
<img src="image/perscare/pc10.jpeg"height="150" width="50" margin-
top:1 alt="image not found">
<b><p margin>Nova Prime Series </p></b>
<span>BestSeller</span>
<p class="off">Rs.899</p>
</div>
</div>
</a>
</div>
</div>

<div class="mobiles" >
<div class="d-o-d-header"><h2>Mobiles</h2><hr>
</div>
<a href="#">
<img src="image/phones/ph1.jpeg" width="72"height="150" alt="image
not found">
<div class="mb-details">
<p><b>RedmiNote 5 pro</b></p>
<p style="margin-left: -30px;" class="off">Upto 20% off</p>
</div>
</div>
</a>

57 | P a g e
<a href="#">
not found">
<b><p>Realme 2</p></b>
<span>13MP+2MP| 8MP</span>
<p class="off">From Rs.8,990</p>
</div>
</div>
</a>
<a href="#">
<img src="image/phones/ph3.jpeg" width="70.5" height="150"
<b><p >iVOOMi i2 Lite</p></b>
<span >13MP+2MP Dual Camera</span>
<p class="off">NoeRs.6499</p>
</div>
</div>
</a>
<a href="#">
<b><p>iPhoneX 256GB</p></b>

58 | P a g e
<p class="off">NowRs.1,01,999</p>
</div>
</div>
</a>
<a href="#">
not found">
<b><p >RedmiNote 5</p></b>
<span >12MP+5MP Camera</span>
<p class="off">NowRs.11999</p>
</div>
</div>
</a>
<a href="#">
<b><p>Google Pixel2</p></b>
<span>4GB RAM</span>
<p class="off">From Rs.47,999</p>
</div>
</div>
</a>
<a href="#">

59 | P a g e
<img src="image/phones/ph7.jpeg" width="79.5" height="150;"
style="margin-right: -20px" alt="image not found">
<b><p>Lenonvo K8 Plus</p></b>
<p class="off">From Rs.9999</p>
</div>
</div>
</a>
</div>

<div class="foot" id="footid">
<footer>
<div class="about">
<ul>
<li class="head"><ahref="">About</a></li>
<li><a href="">ContactUs</a></li>
<li><a href="">AboutUs</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Shoppers Stories</a></li>
</ul>
</div>
<div class="help">
<ul>

60 | P a g e
<li><a href="">Help</a></li>
<li><a href="">Payments</a></li>
<li><a href="">Shipping</a></li>
<li><a href="">Cancellation& Returns</a></li>
<li><a href="">FAQ</a></li>
</ul>
</div>
<div class="policy">
<ul>
<li><a href="">Policy</a></li>
<li><a href="">ReturnPolicy</a></li>
<li><a href="">Terms of Use</a></li>
<li><a href="">Privacy</a></li>
<li><a href="">Sitemap</a></li>
</ul>
</div>
<div class="social">
<ul>
<li><a href="">Social</a></li>
<li><a href="">Facebook</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Youtube</a></li>
<li><a href="">Googleplus</a></li>
</ul>
<div class="vl"></div>
</div>

61 | P a g e
</footer>
</div>
</div>
</body>
</html>

62 | P a g e
Header.jsp
<html>
<head>
<title>Online shopping site in India...</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/jquery.bxslider.css"rel="stylesheet" type="text/css">
<link href="cssstyle.css"rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
href="https://www.w3schools.com/w3css/4/w3.css">
<script
cript>
<script
s"></script>
<style>
h3
{
color:black;
}
</style>
<script src="http://code.jquery.com/jquery-2.2.4.js"
crossorigin="anonymous"></script>
<script src="js/jquery.bxslider.min.js"></script>

63 | P a g e
<script src="js/my.js">
</script>
</head>
<body>
<div id="wrapper">
<div id= "container">
<div id="logo">
<span id="shoppers">SHOPPERS.</span><span
id="com">com</span>
</div>
<div id="search">
<form action="" class="search">
<input class="search-area" type="text" name="text"
placeholder="Searchhere for products">
<button type="submit" class="btn"><iclass="fafa-search"></i></button>
</form>
</div>
<div id="user-menu">
<ul>
<li>
<a href="#">
<i class="fafa-shopping-cart"><strong> Cart</strong></i>
</a>
</li>
<li>
<a href="#" id="popup" onclick="popup()">

64 | P a g e
<i class="fafa-user"><b>
<%
HttpSessions=request.getSession(false);
String user=(String)s.getAttribute("uname");
if(s!=null)
{
out.print("Hi : "+user);
}
else
{
out.print("Error In Login Try Again.....");
response.sendRedirect("index.html");
}
%>
</b></i>
</a>
</li>
<a href="UserLogout.jsp"> <span>Logout</span></a>
<li>

65 | P a g e
<a href="#">
<i class="fafa-download"><strong>  APPDownload</strong></i>
</a>
</li>
</ul>
</div>
</div>
<div class="navbar">
<button class="dropbtn" style="margin-left:80px;">Electronices
</button>
<div class="row">
<p style="color:black"><strong>Mobiles</strong></p>
<a href="mi.jsp">Mi</a>
<a href="#">RealMe</a>
<a href="samsung.jsp">Samsung</a>
<a href="lenovo.jsp">Lenovo</a>
<a href="oppo.jsp">Oppo</a>
<a href="#">Vivo</a>
<a href="apple.jsp">Apple</a>
<a href="#">Honor</a>
</div>
<p style="color:black"><strong>Mobiles Accessories</strong></p>

66 | P a g e
<a href="#">Mobile Cases</a>
<a href="#">Headphonesand Headsets</a>
<a href="#">Screenguards</a>
<a href="#">Powerbank</a>
<a href="#">Memorycard</a>
<a href="#">Mobile cables</a>
<a href="#">Mobile chargers</a>
<a href="#"><b>SmartWearable Tech</b></a>
<a href="#">SmartWatches</a>
</div>
<p style="color:black"><strong>Laptops and PCs</strong></p>
<a href="#">Gaming Laptops</a>
<a href="#"><b>DesktopsPCs</b></a>
<a href="#"><b>Gaming & Accessories</b></a>
<a href="#"><b>ComputerAccessories</b></a>
<a href="#">Externals Hard Disks</a>
<a href="#">Pendrives</a>
<a href="#">LaptopBags</a>
<a href="#">Mouse</a>
<a href="#"><b>ComputerPeripherals</b></a>
<a href="#">Printers and Ink cartridges</a>
</div>

67 | P a g e
<p style="color:black"><strong>Televisions</strong></p>
<a href="#"><b>HomeEntertaintment</b></a>
<a href="#">Home Audio Speakers</a>
<a href="#">Home Theatres</a>
<a href="#">BluetoothSpeakers</a>
<a href="#">DTHSet Top Box</a>
<a href="#"><b>SmartHome Automation</b></a>
<a href="#">Google Home</a>
<a href="#"><b>Camera</b></a>
<a href="#">DSLR</a>
<a href="#">Compact& Bridge Camera</a>
<a href="#">Sports & Action</a>
</div>
</div>
</div>
</div>
<button class="dropbtn" style="margin-left:80px;">TVs& Appliances
</button>
<div class="row">
<p style="color:black"><strong>Television</strong></p>
<a href="#"><b>Smart& Ultra HD</b></a>
<a href="#"><b>TVs By Brand</b></a>

68 | P a g e
<a href="#">Mi</a>
<a href="#">LG</a>
<a href="#">SAMSUNG</a>
<a href="#">Micromax</a>
<p style="color:black; margin-top: 10px;"><strong>TVsBy Screen
Size</strong></p>
<a href="#">48 & Above</a>
<a href="#">39-43</a>
<a href="#">32</a>
<a href="#">24 & below</a>
</div>
<p style="color:black;"><strong>Washing Machine</strong></p>
<a href="#">SemiAutomatic Top Load</a>
<p style="color:black;margin-top:
10px;"><strong>Refrigerators</strong></p>
<a href="#">Single Door</a>
<a href="#">DoubleDoor</a>
<a href="#">Triple Door</a>
<a href="#">Side By Side</a>
<a href="#">Convertoble</a>
<p style="color:black;margin-top: 10px;"><strong>Air
Conditioners</strong></p>
<a href="#">InverterAC</a>
<a href="#">Windows ACs</a>
<a href="#">SplitACs</a>

69 | P a g e
</div>
<p style="color:black;"><strong>KitchenAppliances</strong></p>
<a href="#">OvenToasterGrills(OTG)</a>
<a href="#">Juicer/Mixer/Grinder</a>
<a href="#">Electric Kettle</a>
<a href="#">Electric Cokkers</a>
<a href="#">SandwichMakers</a>
<a href="#">Pop-Up Toasters</a>
<a href="#">CoffeeMakers</a>
<a href="#">Dishwashers</a>
<a href="#"><b>Healthy Living Appliances</b></a>
<a href="#"><b>MonsoonCooking</b></a>
</div>
<p style="color:black;"><strong>SmallHome Appliances</strong></p>
<a href="#">Irons</a>
<a href="#">WaterGysers</a>
<a href="#">WaterPurifiers</a>
<a href="#">AirPurifiers</a>
<a href="#">Vacuum Cleaners</a>
<a href="#">Inverters</a>
<a href="#">Voltage Steblizers</a>
<a href="#">ImmersionRods</a>
</div>
</div>
</div>

70 | P a g e
</div>
<button class="dropbtn" style="margin-left:80px;">Men
</button>
<div class="row">
<a href="#">FormalShoes</a>
<a href="#">Sandals and Floaters</a>
<a href="#">Loafers</a>
<a href="#">Running Shoes</a>
<a href="#">Sneakers</a>
<p style="color:black; margin-top: 10px;"><strong>Men's
Grooming</strong></p>
<a href="#">Deodorants</a>
<a href="#">Perfumes</a>
<a href="#">Trimmers</a>
</div>
<p style="color: black;" >
<strong>Clothing</strong></p>

71 | P a g e
<a href="#"><b> Top Wears</b></a>
<a href="#"> T- Shirts</a>
<a href="#"> Shirts</a><a href="#">Link1</a>
<a href="#">Kurtas</a>
<a href="#">Suits And Blazzers</a>
<a href="#">Jackets</a>
<a href="#">SweatShirts</a>
<p style="color:black; margin-top: 10px;"><strong>Bottom
Wears</strong></p>
<a href="#">Trousers</a>
</div>
<p style="color:black;"><strong>SportsWear</strong></p>
<a href="#">Sports T-Shirts</a>
<a href="#">Trackpants</a>
<a href="#">TrackSuits</a>
<p style="color:black; margin-top: 10px;"><strong>InnerWear& Sleep
Wear</strong></p>
<a href="#">Briefs& Trunks</a>
<a href="#">Vests</a>
<a href="#">Boxers</a>
<a href="#">Thermals</a>
<a href="#"><b>Ties,Caps,Socks & More</b></a>
<a href="#"><b>KurtaPyjama & More</b></a>

72 | P a g e
<a href="#"><b>Fabrices</b></a>
<a href="#"><b>WinterWears</b></a>
</div>
<strong>Watches</strong></p>
<a href="#">Fasttrack</a>
<a href="#">Titan</a>
<a href="#">Sonata</a>
<a href="#">Casio</a>
<a href="#">Fossil</a>
<p style="color:black; margin-top:
10px;"><strong>Accesories</strong></p>
<a href="#">Backpacks</a>
<a href="#">Wallets</a>
<a href="#">Sunglases</a>
<a href="#">Belts</a>
</div>
</div>
</div>
</div>
<button class="dropbtn" style="margin-left:80px;">Women
</button>
<div class="row">

73 | P a g e
<p style="color:black;" ><strong>Clothing</strong></p>
<a href="#"><b>WesternWear</b></a>
<a href="#">Top,T-Shirts & Shirts</a>
<a href="#">Leggings& Jeggings</a>
<a href="#">Skirts</a>
<a href="#"><b>Lingries & SleepWear</b></a>
<a href="#">Nightsuits & Nightdresses</a>
<a href="#">Shapewear</a>
<a href="#"><b>SportsWear</b></a>
<a href="#">T-Shirts</a>
<a href="#">Trakpants</a>
</div>
<p style="color:black;" ><strong>Ethnic Wear</strong></p>
<a href="#">Sarees</a>
<a href="#">Kurtas & Kurtis</a>
<a href="#">DressMaterial</a>
<a href="#">LehengaCholi</a>
<a href="#">Blouse</a>
<a href="#">Leggings& Salwars</a>
<a href="#">Peticoats</a>
<a href="#">Duppatas</a>

74 | P a g e
<a href="#"><b>WinterWear</b></a>
<a href="#">International Brands</a>
<a href="#">New Arrivals</a>
<a href="#">Party Dresses</a>
<a href="#">Crop Tops</a>
</div>
<a href="#"><strong>Sandals</strong></a>
<a href="#">Flats</a>
<a href="#">heels</a>
<a href="#">Wedges</a>
<a href="#"><b>Shoes</b></a>
<a href="#"><b>Sllipers & Flip Flop's</b></a>

<a href="#"><b>PersonalCare Appliances</b></a>
<a href="#">Hair Straightners</a>
<a href="#">Hair Dryers</a>
</div>
<p style="color:black;" ><strong>Beauty & Grooming</strong></p>
<a href="#">Make Up</a>
<a href="#">Skin Care</a>

75 | P a g e
<a href="#">Hair Care</a>
<a href="#">Bath & Spa</a>
<a href="#">Skin Care</a>
<a href="#">Deodrants & Perfumes</a>
<a href="#"><b>Accessories</b></a>

<a href="#">Slings Bags</a>
<a href="#">Wallets & Belts</a>
<a href="#">Sunglasses</a>
</div>
</div>
</div>
</div>
<button class="dropbtn" style="margin-left:80px;">Baby& Kids
</button>
<div class="row">
<p style="color:black;" ><strong>Kids Clothing</strong></p>
<a href="#"><b>Boy's Clothing</b></a>

76 | P a g e
<a href="#"><b>Girl'sClothing</b></a>
<a href="#">Dresses & Skirts</a>
<a href="#">T-Shirts & Tops</a>
<a href="#"><b>BabyBoyClothing</b></a>
<a href="#">BodySuits</a>
<a href="#"><b>BabyGirl Clothing</b></a>
</div>
<p style="color:black;" ><strong>Kids Footwear</strong></p>
<a href="#">Sandals</a>
<a href="#"><b>Girl'sFootwear</b></a>
<a href="#">Flats & Bellis</a>
<a href="#">Booties</a>
<a href="#"><b>CharacterShoes</b></a>
<a href="#"><b>SchoolSupplies</b></a>
<a href="#">SchoolBags</a>

77 | P a g e
<a href="#">LunchBox</a>
<a href="#">Kids Watches</a>
</div>
<p style="color:black;" ><strong>Toys</strong></p>
<a href="#">Remote ControlToys</a>
<a href="#">EducationalToys</a>
<a href="#">SoftToys</a>
<a href="#">Cars & Die-Cast Vehicle</a>
<a href="#">OutDoorToys</a>
<a href="#">Board Games</a>
<a href="#">Musical Toys</a>
<a href="#">Dolls & Doll Houses</a>
<a href="#">Puzzels</a>
<a href="#">Helicopter& Drones</a>
<a href="#">ToyGuns</a>
</div>
<p style="color:black;" ><strong>BabyCare</strong></p>
<a href="#">Diapers</a>
<a href="#">Wipes</a>
<a href="#">Strollers & Activity Gears</a>
<a href="#">BabyBadding</a>
<a href="#">Feeding & Nursing</a>
<a href="#">Maternity Care</a>
<a href="#">Bath Bath & Skin Care</a>

78 | P a g e
<a href="#">BabyGrooming</a>
<a href="#">BabyGifting Sets</a>
<a href="#">Furniture</a>
</div>
</div>
</div>
</div>
<button class="dropbtn" style="margin-left:80px;">Home & Furniture
</button>
<div class="row">
<p style="color:black;" ><strong>Kitchen& Dinning</strong></p>
<a href="#">Pots & Pans</a>
<a href="#">Pressure Cookers</a>
<a href="#">KitchenTools</a>
<a href="#">Gas Stoves</a>
<p style="color:black; margin-top: 10px;" ><strong>Dinning &
Serving</strong></p>
<a href="#">CoffeeMugs</a>
<a href="#">Dinnerware & Cokkery</a>
<a href="#">Bar& Glasware</a>
<p style="color:black; margin-top: 10px;" ><strong>Kitchen
Storage</strong></p>
<a href="#">WaterBottles</a>

79 | P a g e
<a href="#">LunchBoxes</a>
<a href="#">Flasks & Casseroles</a>
<a href="#">KitchenContainers</a>
</div>
<p style="color:black;" ><strong>Furniture</strong></p>
<a href="#">Soffas</a>
<a href="#">Beds</a>
<a href="#">Dinning Tables & Sets</a>
<a href="#">Tables</a>
<a href="#">OfficeChairs</a>
<a href="#">Chairs</a>
<a href="#">BeanBags</a>
<a href="#">Shoe Racks</a>
<a href="#">Wardrobes</a>
<a href="#">SofaBeds</a>
<a href="#">Drawers</a>
</div>
<p style="color:black;" ><strong>Furnishing</strong></p>
<a href="#">Bedsheets</a>
<a href="#">Cutains</a>
<a href="#">Cushion& Pillow Covers</a>
<a href="#">Blankets,Quilts & Dohars</a>
<a href="#">Towels</a>

80 | P a g e
<a href="#">kitchen& Dinning Linen</a>
<a href="#">Mats & Carpet</a>
</div>
<p style="color:black;" ><strong>Home Decor</strong></p>
<a href="#">Paintings</a>
<a href="#">Clocks</a>
<a href="#">WallShelves</a>
<a href="#">WallDecals</a>
<a href="#"><b>Lighting</b></a>
<a href="#">SmartLighting</a>
<a href="#">LED & CFL</a>
<a href="#">Decorative Lighting & Lamps</a>
<a href="#">EmergencyLight</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>



<div class="foot" id="footid">
<footer>

81 | P a g e
<div class="about">
<ul>
<li class="head"><ahref="">About</a></li>
<li><a href="">ContactUs</a></li>
<li><a href="">AboutUs</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Shoppers Stories</a></li>
</ul>
</div>
<div class="help">
<ul>
<li><a href="">Help</a></li>
<li><a href="">Payments</a></li>
<li><a href="">Shipping</a></li>
<li><a href="">Cancellation& Returns</a></li>
<li><a href="">FAQ</a></li>
</ul>
</div>
<div class="policy">
<ul>
<li><a href="">Policy</a></li>
<li><a href="">ReturnPolicy</a></li>
<li><a href="">Terms of Use</a></li>
<li><a href="">Privacy</a></li>
<li><a href="">Sitemap</a></li>
</ul>
</div>

82 | P a g e
<div class="social">
<ul>
<li><a href="">Social</a></li>
<li><a href="">Facebook</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Youtube</a></li>
<li><a href="">Googleplus</a></li>
</ul>
<div class="vl"></div>
</div>
</footer>
</div>
</div>
</body>
</html>

83 | P a g e
Mi.jsp
<%@page import="servelet.ProductDao"%>
<%@page import="com.hibernate.Product"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="Header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<link href="css/style.css"rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mi-india</title>
<style>
img
{
height:200px;
width: 100px;
}
.b_btn
{
padding: 10px;
border-radius:5px;
background-color:blue;

84 | P a g e
border:none;
color:white;
cursor: pointer;
}
.b_btn:hover
{
padding: 10px;
border-radius:5px;
background-color:slateblue;
border:none;
color:white;
}
.a_btn
{
padding: 10px;
border-radius:5px;
background-color:orangered;
border:none;
color:white;
cursor: pointer;
}
.a_btn:hover
{
padding: 10px;
border-radius:5px;
background-color:orange;
border:none;

85 | P a g e
color:white;
}
</style>
</head>
<body>
<div class="mi">
<table cellspacing="50" width="100%">
<%
List<Product> list=ProductDao.viewByBrand("Mi");
for(Productp:list)
{
out.print("<tr><td><img
src='imageupload"+p.getProImage()+"'></td><td>"+p.getProDesc()+"</
td><td>"+p.getProPrice()+"</td><td><ahref='add_cart.jsp?id'><button
class='a_btn'>Add To Cart</button></td><td><a
href='Checkout.jsp?id="+p.getProId()+"'><buttonclass='b_btn'>Buy
Now</button></td></tr>");
}
%>

86 | P a g e
</table>
</table>
</div>
</body>
</html>
Apple.jsp
<%@include file="Header.html"%>
<!DOCTYPE html>
<html>
<head>
<title>JSP Page</title>
<style>
img
{
height:200px;
width: 100px;
}

87 | P a g e
.b_btn
{
padding: 10px;
border-radius:5px;
background-color:blue;
border:none;
color:white;
cursor: pointer;
}
.b_btn:hover
{
padding: 10px;
border-radius:5px;
background-color:slateblue;
border:none;
color:white;
}
.a_btn
{
padding: 10px;
border-radius:5px;
border:none;
color:white;
cursor: pointer;
}
.a_btn:hover

88 | P a g e
{
padding: 10px;
border-radius:5px;
background-color:orange;
border:none;
color:white;
}
</style>
</head>
<body>
<div class="mi">
<table cellspacing="50" width="100%">
<%
List<Product> list=ProductDao.viewByBrand("Iphone");
for(Productp:list)
{
out.print("<tr><td><img
src='imageupload"+p.getProImage()+"'></td><td>"+p.getProDesc()+"</
td><td>"+p.getProPrice()+"</td><td><ahref='add_cart.jsp?id'><button
class='a_btn'>Add To Cart</button></td><td><a
href='Checkout.jsp?id="+p.getProId()+"'><buttonclass='b_btn'>Buy
Now</button></td></tr>");

89 | P a g e
}
%>
</table>
</table>
</div>
</body>
</html>
CheckUser.jsp
<%--
Document : checkUser
Created on : Oct 16, 2018,11:41:31 PM
Author : Priyanshu
--%>
<%@page import="com.hibernate.EcomUser"%>
<%@page contentType="text/html" pageEncoding="UTF-8"
import="servelet.validate;"%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<%
try
{
String pass=request.getParameter("pass");

90 | P a g e
String un=request.getParameter("un");
if(validate.checkUser(un, pass))
{
HttpSessionsc =request.getSession(true);
sc.setAttribute("uname",un);
response.sendRedirect("User.jsp");
}
else
{
request.getRequestDispatcher("/index.html").include(request,response);
out.print("Invalid Crediantials....... Try Again");
}
}
catch(Exceptione)
{
out.print(e);
}
%>
</body>
</html>

91 | P a g e
Checkout.jsp
<!DOCTYPE html>
<html>
<head>
<title>Checkout</title>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.mi
n.css">
<script
cript>
<script
s"></script>
<link href="css/style.css"rel="stylesheet">
<link href="Admin/dashboard.css" rel="stylesheet" type="text/css">
<style>
.con
{
position: absolute;
top:70%;
left: 40%;
}

92 | P a g e
.pro_image
{
margin: auto;
}
.pro_image img
{
height:300px;
width: 150px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
<span class="shoppers">SHOPPERS.</span><span
class="com">com</span>
</div>
</div>
<div class="pro_image" align="center">
<%
int pid=Integer.parseInt(request.getParameter("id"));
Product p=ProductDao.viewById(pid);
out.print("<img src='imageupload"+p.getProImage()+"'>");
out.print("<strong><h3
style='color:orange'>"+p.getProDesc()+"</h3></strong>");
out.print("<strong><h3
style='color:green'>"+p.getProPrice()+"</h3></strong>");

93 | P a g e
%>
</div>
<div class="con">
<form action="PlaceOrder.jsp">
<table align="center">
<tr>
<td>
<label>Name:</label>
<input type="text" required="" name="name" class="form-control">
</td>
</tr>
<tr>
<td>
<label>Address:</label>
<input type="text" name="addr" required="" class="form-control">
</td>
</tr>
<tr>
<td>
<label>Email Id:</label>
<input type="email" name="email" required="" class="form-control"><br>
</td>
</tr>
<tr>
<td>
<input type="Submit" class="btnbtn-primary" value="PlaceOrder">

94 | P a g e
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
PlaceOrder.jsp
<%--
Document : PlaceOrder
Created on : Nov 9, 2018,3:54:16 PM
Author : Priyanshu
--%>
<%@page import="servelet.sendMail"%>
<%@page import="javax.mail.MessagingException"%>
<%@page import="javax.mail.Transport"%>
<%@page import="javax.mail.Message"%>
<%@page import="javax.mail.internet.InternetAddress"%>
<%@page import="javax.mail.internet.MimeMessage"%>
<%@page import="javax.mail.Session"%>
<%@page import="java.util.Properties"%>
<%@page import="java.util.Date"%>
<%@page import="com.hibernate.Userorder"%>
<%@page import="servelet.OrderDao"%>

95 | P a g e
<!DOCTYPE html>
<html>
<head>
<title>Order</title>
</head>
<body>
<%
try
{
String name=request.getParameter("name");
String email=request.getParameter("email");
String addr=request.getParameter("addr");
String order_name="MiA1";
Product p=new Product();
Date date=new Date();
Userorderuo=new Userorder(order_name,date, name, email,addr);
OrderDao.save(uo);
String to=email;
String sub="Confirmationof order Team Shoppers";
String mesg="Thankyou for shopping with Shoppers Your Ordered
Placed Succesfullywe will deliever shorty";
String user="joshipriyanshu007";
String pass="Priy@nshu12";
sendMail.send(to, sub, mesg,user, pass);
out.println("Notification Send");

96 | P a g e
out.println("order placed succesfully");
}
catch(Exceptionex )
{
out.print(ex);
}
%>
</body>
</html>
Style.css
*
{
margin: 0px;
padding: 0px;
}
#wrapper
{
width:100%;
height: auto;
}
#container
{
height:60px;
width:100%;

97 | P a g e
background-color:#3377FF;
position:fixed;
float: left;
z-index: 1;
}
#logo
{
width: 23%;
}
#shoppers
{
color:#fff;
font-size:280%;
font-weight: bold;
margin-left: 15px;
font-family: cursive;
}
#com
{
color:#FFE033;
font-size:180%;
font-weight: bold;
font-family:serif;
}

98 | P a g e
#search
{
width: 40%;
float: left;
margin-left: 25%;
position: absolute;
top: 8px;
height: 40px;
}
.search-area
{
width: 100%;
border:none;
padding: 11.5px;
position: relative;
}
form.searchbutton
{
top:0px;
right: 0px;
position: absolute;
width: 10%;
padding: 15px;
border:none;
background: #fff;
color:#3377FF;

99 | P a g e
cursor: pointer;
}
form.searchbutton:hover
{
background-color:#FFE033
}
#user-menu
{
position: absolute;
right: 2%;
height: inherit;
top: 0px;
padding: 5px;
}
#user-menu li
{
float: left;
display: inline;
font-size: 25px;
margin-left: 20px;
margin-top: 4%;
list-style: none;
}
#user-menu a

100 | P a g e
{
text-decoration: none;
color: white;
font-size: 18px;
}
.menu
{
width: 100%;
height:100px;
margin-top:0px;
background-color:#fff;
}
body {
margin: 0px;
}
/*------styling for mega menu*/
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
position: absolute;

101 | P a g e
top: 60px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
}
.navbar a {
font-size: 12px;
color: white;
text-align: center;
padding: 20px 22px;
margin-top: 2px;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown.dropbtn {
font-size: 16px;
border:none;
outline: none;
color: black;

102 | P a g e
padding: 14px 16px;
background-color:white;
transition: all 0.4s ease;
font: inherit;
margin: 0;
}
.dropdown:hover.dropbtn
{
color: whitesmoke;
}
.navbar a:hover
{
color:#3396FF;
}
.dropbtn
{
margin-top: 100px;
color:black;
}
.dropdown-content{
display: none;
position: absolute;

103 | P a g e
background-color:#f9f9f9;
background:#fff;
width: 100%;
left: 0;
padding: 10px;
z-index: 1;
}
.dropdown:hover.dropdown-content{
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
height: auto;
}
.column a {
float: none;
color: black;
padding: 1px;
margin-top: 20px;

104 | P a g e
margin-left: 40px;
display: block;
text-align: left;
}
.column a:hover {
background-color:#ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/*Image Slider*/
.imageslider
{
position: absolute;
top: 105px;
height: 350px;
width: 100%;
}
/*edit slider*/

105 | P a g e
.bx-wrapper .bx-pager
{
bottom:25px;
}
.bx-wrapper .bx-controls-directiona
{
z-index: 0;
}
/* styling for Categories */
.daydeal
{
height:auto;
width: 100%;
position:absolute;
top: 450px;
}
.d-o-d-header
{
height: 50px;
width: 100%;
padding: 10px;
font-family: arial;

106 | P a g e
}
.d-o-d-headerh2
{
line-height: 35px;
border-left:20pxsolid blue;
padding-left:10px;
}
.d-o-d-btn
{
color: white;
font-size: 18px;
float: right;
padding: 10px;
margin-top: -80px;
border:none;
}
.catbox
{
font-family: sans-serif;
height:240px;
width: 220px;
float: left;
margin-top:auto;
overflow: hidden;
position: relative;
margin-left: 35px;

107 | P a g e
}
.catbox span
{
display: block;
position: absolute;
bottom:100px;
width: 100%;
background: rgba(0,0,0,0.6);
color: white;
height: 35px;
line-height: 35px;
text-align: center;
}
.catbox img
{
max-width: 100%;
}
.catbox:hover img
{
transform: scale(1.2,1.2);
color:#3377FF;
}
.catbox:hover span
{
color:#3377FF;

108 | P a g e
}
/*Personal care Heading*/
.ps-care
{
position:absolute;
top: 790px;
height:auto;
width: 100%;
}
.ps-catbox
{
float: left;
margin-left:50px;
}
.ps-catboximg
{
max-width: 100%;
transition: all .5s ease;
}
.ps-catbox:hoverimg
{

109 | P a g e
transform: scale(1.1,1.1);
}
.ps-details
{
text-align: center;
line-height: 30px;
}
.ps-details span
{
color:#388e3c;
}
.ps-details .off
{
color:silver;
}
/*-------------------Mobiles styling-----------------*/
.mobiles
{
position: absolute;
top:1150px;
height:auto;
width: 100%;
position: relative;
}
.mobiles img
{

110 | P a g e
margin-left: 40px;
}
.mb-details
{
text-align: center;
line-height: 30px;
font-size: 12px;
margin-left: 20px;
}
.mb-details span
{
color:#388e3c;
text-align: center;
}
.mb-details .off
{
color:silver;
text-align: center;
}
/*-----------------------Footer----------------*/
.foot
{
position: absolute;
top:1530px;
height: auto;

111 | P a g e
width: 100%;
color: white;
background-color:#505080;
font-size: 12px;
line-height: 30px;
}
#content
{
margin-top: 500px;
width:100%;
height: auto;
background-color:yellow;
}
.foot li
{
list-style: none;
}
.foot a
{
}
.about
{
padding: 80px;

112 | P a g e
border-bottom:2px solid black;
}
.help
{
float: left;
margin-top: -230px;
margin-left: 270px;
}
.policy
{
float: left;
margin-top: -230px;
margin-left: 470px;
}
.social
{
margin-top: -230px;
margin-left: 670px;
float: left;
}
.vl
{
border-left:2px solid black;
}
.foot ul > :first-child
{
color:#B3B3DC;

113 | P a g e
font-weight: bolder;
}
/*styling for mi page*/
.mi
{
height:250px;
width:100%;
background:white;
position: absolute;
top:150px;
left: 0px;
}
.mi-img
{
height: 250px;
width: 250px;
position: relative;
margin-top: 0px;
left: 200px;
z-index: 0;
}
.mi-img img
{
height: 200px;
width: 95.5px;

114 | P a g e
}
.mi-specs
{
height: 250px;
width: 600px;
position: relative;
left: 460px;
top: -250px;
z-index: 0;
}
.mi-rate
{
height: 250px;
width: 250px;
position: absolute;
top:0px;
left:1080px;
z-index: 0;
}
.mi-specs h3
{
position: absolute;
}
.mi-specs li
{

115 | P a g e
position: relative;
top:50px;
text-indent: -5px;
list-style: none;
}
/*styling for samsung mobile*/
.samsung
{
height:auto;
width: 100%;
position:absolute;
top: 100px;
}
/*styling for tv*/
.tv-img
{
height: 250px;
width: 250px;
position: relative;
margin-top: 0px;
left: 200px;
z-index: 0;
}

116 | P a g e
.tv-img img
{
height: 105px;
width: 200px;
}
/*styling for wahing*/
.wash-img
{
height: 250px;
width: 250px;
position: relative;
margin-top: 0px;
left: 200px;
z-index: 0;
}
.wash-img img
{
height: 200px;
width: 145px;
}
/*styling for popup sign up*/
.bg-model
{
height: 100%;

117 | P a g e
width: 100%;
background-color:black;
z-index: 1;
position: relative;
top:0px;
background-color:rgba(0,0,0,0.7);
display: flex;
align-items: center;
display: none;
justify-content: center;
}
.model-content
{
height:95%;
width: 60%;
opacity: 1;
text-align: center;
padding: 10px;
border-radius:4px;
position: absolute;
}
.model-contentinput
{
padding: 5px;
width: 60%;

118 | P a g e
margin-top: 4%;
margin-left: 25%;
display: block;
border:none;
border-bottom-style:inset;
border-bottom-color:silver;
}
.model-contentbutton
{
color: white;
width: 60%;
font-size: 16px;
margin-left: 10%;
margin-top: 3%;
padding: 10px;
border:none;
cursor: pointer;
}
.model-contentbutton:hover button{
}
.close button
{
font-size: 20px;

119 | P a g e
background-color:red;
width: auto;
position: absolute;
right: 0px;
top: -4%;
padding:10px;
}
.login-content
{
height:600px;
width: 60%;
opacity: 1;
text-align: center;
display:none;
padding: 10px;
border-radius:4px;
position: relative;
}
#close_login
{
font-size: 20px;
background-color:red;

120 | P a g e
width: auto;
color: white;
position: absolute;
top:-4%;
border:none;
right: 0px;
padding:10px;
}
.login-content input
{
padding: 5px;
width: 60%;
margin-top: 4%;
margin-left: 25%;
display: block;
border:none;
border-bottom-style:inset;
border-bottom-color:silver;
}
.login-content button
{
color: white;
width: 60%;
font-size: 16px;

121 | P a g e
margin-left: 10%;
margin-top: 3%;
padding: 10px;
border:none;
cursor: pointer;
}
JavaScript
$('head').append('<linkrel="stylesheet" href="/css/style.css"
type="text/css" />');
/*slider function*/
$(document).ready(function()
{
$('.bxslider').bxSlider({
mode:'fade',
captions: true,
auto:true
});
});
/* pop up signup form*/
function popup()
{
document.querySelector(".bg-model").style.display="flex";
}
/* close button function*/

122 | P a g e
{
$("#close").click(function()
{
$(".bg-model").css("display","none");
});
});
/*pop up login*/
{
$("#login").click(function()
{
$(".model-content").css("display","none");
$(".login-content").css("display","block");
});
});
/*pop up signup on login content*/
{
$("#signup").click(function()
{
$(".model-content").css("display","block");
$(".login-content").css("display","none");
});
});
/*close button on login-content*/

123 | P a g e
{
$("#close_login").click(function()
{
$(".bg-model").css("display","none");
});
});
/*========================Signup
validation========================*/
{
$("#msg").css("display","none");
$("#sign_btn").click(function()
{
var v_name=$('#name').val();
var mbno=$('#m_num').val();
var pswd=$('#pass').val();
var cpswd=$('#cpas').val();
var name_regex= /^[a-zA-Z]+$/;
var mb_regex=/^(?:(?:+|0{0,2})91(s*[-]s*)?|[0]?)?[789]d{9}$/;
if(v_name.length == 0)
{
$('#name').attr('placeholder',"*Please enteryour name").css
({"opacity":"1","color":"red"});

124 | P a g e
$("#name").css({"border-bottom-color":"red","border-bottom-
style":"inset"});
return false;
}
else if(v_name.length<=5 || (!v_name.match(name_regex)))
{
alert("enter a valid name greater than 5 digit");
return false;
}
else if(mbno.length == 0)
{
$('#m_num').attr('placeholder',"*Please Enter your Mobile no").css
$("#m_num").css({"border-bottom-color":"red","border-bottom-
style":"inset"});
return false;
}
else if(!mbno.match(mb_regex))
{
alert("enter a valid mobelno");
return false;
}
else if(mbno.length == 0)
{
$('#m_num').attr('placeholder',"*Please Enter your Mobile no").css

125 | P a g e
$("#m_num").css({"border-bottom-color":"red","border-bottom-
style":"inset"});
return false;
}
else if(!mbno.match(mb_regex))
{
alert("enter a valid mobelno");
return false;
}
else if(pswd.length == 0 )
{
$('#pass').attr('placeholder',"*Please choose a password").css
$("#pass").css({"border-bottom-color":"red","border-bottom-
style":"inset"});
return false;
}
else if(pswd.length<6)
{
alert("enter password greater than 5 character");
return false;
}
else if(cpswd.length== 0 )
{
$('#cpas').attr('placeholder',"*Please confirm your password").css

E commerce

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to E commerce

Similar to E commerce (20)

Recently uploaded

Recently uploaded (20)

E commerce