Lifestyle
Lifestyle
WEB DEVELOPMENT
1|Page
Annexure -II
Certificate
I , ( Name& Roll no.), certify that the Summer Training Project Report
(BCA) entitled “ “ is done by us
and it is an
authentic work carried out by us at . The
matter
embodied in this project work has been submitted earlier for the award
of any
degree or diploma to the best of my knowledge and belief.
Date:
2|Page
3|Page
Acknowledgment
Every project big or small is successful largely due to the effort of a number of
wonderful people who have always given their valuable advice or lent a
helping hand. I sincerely appreciate the inspiration; support and guidance of all
those people who have been instrumental in making this project a success.
4|Page
Annexure-lll
Table of Contents
S No Topic Page No
1 Certificate -
2 Acknowledgement -
3 List of Tables/Figures -
4 Chapter-1: Problem Definition 1-6
5 Chapter-2: System Analysis & Design 7-21
6 Chapter-3: System Coding & Implementation 22-35
7 Appendix-A 36-81
8 Bibliography 82
List of Tables
Table No Title Page No
1 Testing 26-32
List of Figures
Figure No Title Page No
1 SDLC 10
2 DFD Level Zero 13
3 DFD Level 1 14
4 DFD Level 2 15
5 ER Diagram 16
6 Input Design 17
7 Output Design 19
8 System Database Fields 21-22
9 System Database Records 22
5|Page
CHAPTER-1
PROBLEM STATEMENT
1.1 Introduction
Online shopping or e-shopping is a form of electronic commerce which allows
consumers to directly buy goods or services from a seller over the Internet
using a web browser. India is witnessing an unprecedented economic boom in
service as well as goods industry and this economic boom is visible all around
us. Companies are facing a tough competition in this dynamic arena of
business. They are always looking for new avenues so that they can increase
contact with consumers and to achieve this aim they are letting no stone
unturned. Due to increased awareness, employment and increased per capita
income of Indian consumers there has been an exponential rise in consumer
spending. Experiencing the convenience of avoiding travelling to shop and the
time saved in bargain hunting are adding advantage and craze for online
shopping. Cash on delivery is also giving sense of security to Indian
consumers. With the universal availability of Internet connectivity, consumers
save time and efforts by shopping online. The increasing use of Internet by the
younger generation in India provides an emerging prospect for online retailers.
There is a common saying about the Indian retail consumers' "can't touch,
won't buy" mentality. However, this is gradually changing with the rising trend
of online shopping.
1|Page
According to an Associated Chambers of Commerce and Industry of India
(ASSOCHAM) survey.In 2017, about 100 million consumers purchased
online and the number is expected to cross 120 million by 2020 with the
rise of digital natives, better infrastructure in terms of logistics,
broadband and Internet-ready devices to fuel the demand in e-Commerce.
India has always been a land of great potential. The socioeconomic condition
of the country has improved many folds after independence and India is now
emerging as one of the leading countries in the world. Moreover, with a
population of over 100 crore and a growth rate of above 6%, it can be
compared to a marketing giant. Hence it can be well judged why online
shopping in India is rising at fast pace over the days. As technology is
spreading to the remotest villages and many job opportunities are presenting
themselves to the unemployed youth more and more people are gaining
awareness and the money to purchase expensive and luxurious items over the
internet.
2|Page
screen size of mobiles, and all other features as facets. As the customer selects
more and more features or options from the facets provided, the search
narrows down to a small list of mobiles that suit his or her choice. If the list is
small enough and the customer likes one of the mobiles listed, he or she will
make the purchase.
The challenge is also that each category will have a different set of facets to be
displayed. For example, searching for books should display their format, as in
paper pack or hardcover, author name, book series, language, and other facets
related to books. These facets were different for mobiles that we discussed
earlier. Similarly, each category will have different facets and it needs to be
designed properly so that customers can narrow down to their preferred
products, irrespective of the category they are looking into.
The takeaway from this is that categorization and feature listing of products
should be taken care of. Misrepresentation of features can lead to incorrect
search results. Another takeaway is that we need to provide multiple facets in
the search results. For example, while displaying the list of all mobiles, we
need to provide facets for a brand. Once a brand is selected, another set of
facets for operating systems, network, and mobile phone features has to be
provided. As more and more facets are selected, we still need to show facets
within the remaining products.
3|Page
These business transactions occur either as business-to-business (B2B),
business to-consumer (B2C), consumer-to-consumer (C2C) or consumer-to-
business (C2B). The terms e-commerce and e-business are often used
interchangeably. The term ETail (electronic retailing) is also sometimes used in
reference to transactional processes for E-Shopping or Online Shopping.
Online Shopping
E-Shopping is the browsing and purchase of goods using computer (Internet)
or Television catalog; also called Home Shopping.
Online Shopping is a form of e-commerce which allows customers to directly
buy goods form seller over the Internet.
4|Page
4) Shop any store worldwide: Never again be limited geographically. Many
merchants do not have physical stores in every state, and certainly not in every
country. When you shop online, you can browse through stores around the
block or around the globe! Discover amazing new items from exotic places that
you perhaps have never even heard of before.
5) Ship your gifts directly: When you order online, you can send gifts or even
have gift baskets delivered directly to their recipient. This means you can avoid
long waits at the post office and you can get your gift delivered faster. Many
stores even offer customized cards and gift wrapping to go along with your
present.
6) Find items you might not see in stores: Since brick and mortar stores are
limited on space, merchants usually don’t carry all of the items they sell in
store. Online, you can find their entire inventory, along with many choices of
colors, styles, and even customization options. Shop on the Internet so you can
find exactly what you want.
7) No more waiting in line and pushing through crowds: Malls and retail
stores can be chaotic, especially during a big sale or a holiday season. Don’t
stress yourself out, just shop from home! You’ll never have to stand in a long
checkout line or weave your way through crowds just to get the items you
want. Shop online and you can stay in the comfort of your own home.
8) The Internet never closes: You can shop anytime online 24 hours a day 7
days a week. Online stores never close, so you never have to worry about
making time to go to the store. Online shopping is perfect for night owls or
anyone who is just too busy to make a trip to the store.
The act of buying things from websites and not shops certainly took a long time
to blend in with the shopping mind-set of the Indian customer. The current
scenario is one, which is witnessing a change in this mind-set. There have been
many websites that have been launched with the objective of selling products to
customers.
Products belonging to various product sectors are now being sold on these
websites and the range is quite a large one right from expensive laptops and
LCD televisions to mundane grocery items.
There have been many products, which have caught the fancy of online
shoppers and one of them is a handset. Handsets, irrespective of the brand, are
being sold in magnanimous numbers on different websites. All the major
market players in the telecommunications sector, FMCG sector, services,
mobile sector etc. are doing quite well with the sales that they are getting from
this online platform. The money that is earned is being put to good use by using
it in the betterment of the respective R&D departments.
5|Page
Apart, from the businesses doing well, the customers are also given many
fantastic features. Some of them include things such as free gifts with every
online purchase while some involve special offers that are quite economical
and affordable.
2. Lack of privacy
Many websites do not have high encryption for secure online
transaction or to protect online identity. Some websites illegally collect
statistics on consumers without their permission. Lack of privacy discourages
people to use internet for conducting commercial transactions.
3. Tax issue
Sales tax is another bigger issue when the buyer and seller are situated in
different locations. Computation of sales tax poses problems when the buyer
and seller are in different states. Another factor is that physical stores will lose
business if web purchases are free from tax.
4. Product suitability
People have to rely on electronic images to purchase products. Sometimes,
when the products are delivered, the product may not match with electronic
images. Finally, it may not suit the needs of the buyers. The lack of ‘touch
and feel’ prevent people from online shopping.
5.Technical limitations
Some protocol is not standardized around the world. Certain software used by
vendor to show electronic images may not be a common one. It may not be
possible to browse through a particular page due to lack of standardized
software. Insufficient telecommunication bandwidth may also pose technical
potential.
CHAPTER-2
6|Page
SYSTEM ANALYSIS & DESIGN
In day to day life, we will need to buy lots of goods or products from a
shop. It may be food items, electronic items, house hold items etc. etc.
Now days, it is really hard to get some time to go out and get them by
ourselves due to busy life style or lots of works. In order to solve this, B2C
E-Commerce websites have been started. Using these websites, we can
buy goods or products online just by visiting the website and ordering the
item online by making payments online.
Time Consuming
Shipping Rates
Refunds/Returns Disputes
Lack of options
Cash-Back offers not present
Bad customer service
Also, there are expenses for traveling from house to shop. More over the shop from
where we would like to buy something may not be open 24*7. In order to 7 overcome
these, we have e-commerce solution, i.e. one place where we can get all required
goods/products online.
7|Page
market prices and we receive our bought things at our home. No need to
go anywhere and do shopping. We can get different varieties of things
online and we can choose which one we want. 8 Through Online
Shopping, a person who wants to buy is a lifestyle e-commerce web
application, which retails various fashion and lifestyle products. This
project allows viewing various products available enables registered users
to purchase desired products instantly using PayPal payment processor
(Instant Pay) and also can place order by using Cash on Delivery (Pay
Later) option. This project provides an easy access to Administrators and
Managers to view orders placed using Pay Later and Instant Pay options.
In order to develop an e-commerce website, a number of Technologies
must be studied and understood.
8|Page
Feasibility Study:In this phase the desired system is examined and
determined that whether new system is actually achievable or feasible.
Design:In this phase the system model is designed like graphical user
interface and database.
Development:In this phase the design is executed into physical system by building
the database and programs.
9|Page
At Capacity, we follow the SDLC to build an application so that it is of high quality,
cost-effective, easy to enhance and that can work effectively. Below is the diagram
that can summarize our way of working using SDLC: -
10 | P a g e
Important Activity of SDLC
1. Plan
2. Analysis
3. Design
4. Development
5. Test
6. Implement
7. Maintain
Plan
Develop the project plan including tasks, resources and time frame.
Analysis
B2B
B2C
Others
Design
11 | P a g e
Hyperlinks plan & button
Backend required
Database
Gateway payment
Test/Quality check
Test website
Updating of database
Implement
12 | P a g e
13 | P a g e
Data Flow Diagram: -
14 | P a g e
Customer Generate
Management Customer Report
Payment Generate
Management Payment Report
E-Commerce
Products Generate
Portal
Management Products Report
Sales Generate
Management Sales Report
Login Check
Management User Login Details
15 | P a g e
Second Level DFD – E-Commerce Portal
16 | P a g e
ER – Diagram: -
17 | P a g e
Input Form Design:
Index Page: -
18 | P a g e
Product Page: -
19 | P a g e
Cart Page: -
Output Design: -
20 | P a g e
Database design
Table 1: -Index
21 | P a g e
Figure no.8: - System Database Fields3
22 | P a g e
CHAPTER-3
23 | P a g e
E-commerce contains HTML, PHP, JavaScript, database, media files that make up the
entire website are stored in a web server. Hardware for setting up a webserver
completely depends on your requirements.
CPU: for web 1,6 GHz, for web and database 4 x 1,6 GHz CPU.
RAM: 4GB.
Minimum database space: 10GB.
CPU: Quad 2GHz+ CPU.
RAM: 6GB.
Minimum database space: 10GB
Windows7
3.1.2.2MySQL
ServerV6.0.
3.1.2.4MySQL-Connector-Java
The process of testing of an integrated hardware and software system to verify that
the system meets its specified requirements. Verification: Confirmation by
examination and provisions of objective evidence that specified requirements have
been fulfilled. To test the system as a whole, requirements and expectations should
be clear and the tester needs to understand real time usage of application too.
Software reliability
Software quality
System Assurance
24 | P a g e
Optimum performance and capacity utilization
1) Browser compatibility
Lack of support for early browsers
Browser specific extensions
Browser testing should cover the main platforms (Linux,
Windows, Mac etc.)
2) Page display
Incorrect display of pages
Runtime error messages
Poor page download time
Dead hyperlink, plugin dependency, font sizing, etc.
3) Session Management
Session Expiration
Session storage
4) Usability
Non-intuitive design
Poor site navigation
Catalog navigation
Lack of help-support
5) Content Analysis
Misleading, offensive and litigious content
Royalty free images and copyright infringement
Personalization functionality
Availability 24/7
6) Availability
Denial of service attacks
Unacceptable levels of unavailability
25 | P a g e
7) Back-up and Recovery
Failure or fall over recovery
Backup failure
Fault tolerance
8) Transactions
Transaction Integrity
Throughput
Auditing
10) Internationalization
Language support
Language display
Cultural sensitivity
Regional Accounting
12) Performance
Performance bottlenecks
Load handling
Scalability analysis
26 | P a g e
13) Login and Security
Login capability
Penetration and access control
Insecure information transmission
Web attacks
Computer viruses
Digital signatures
Pass/Fail Pass
Remarks No
27 | P a g e
Test case for Sign In module with specific test data.
28 | P a g e
Table No. 2: - Test case for Sign In module
29 | P a g e
3.3.2 Test case for Sign Up module with specific test data.
30 | P a g e
31 | P a g e
32 | P a g e
Table No.3: Test case for Sign In module
33 | P a g e
3.4 Limitation
34 | P a g e
may also be linguistic problems and all these may lead to issues between
the seller and buyer.
7. High Labor Cost: In order to get the whole eCommerce and delivery
process right, a specialized workforce is required. To get all these in the
right shape, companies have to shed a good amount of money and employ a
talented pool of people.
8. Legal Issues: A lot of legal compliances and cyber laws that need to be
taken care of in an eCommerce business. These regulations may vary from
country to country. All these reasons deter businesses from going
electronic.
9. Technical Limitations: eCommerce requires advanced technology
platforms for better performance. Some limitations, such as lack of proper
domain, network and software issues and so on can affect the seamless
performance of an eCommerce site.
10. Huge Technological Cost: Last but not the least; a lot of money needs to
be invested to be built up the technical infrastructure needed to run an
eCommerce business. Moreover, they need to be upgraded based to keep
abreast with the changing technology
3.5Future scope
35 | P a g e
5) Easy setup: The setting up cost of e-commerce business is extremely low
as compared to setting up of a physical shop. Moreover, it is quite easier to
license and permit e-commerce marketing site than a physical shop.
3.6Conclusion:
Online shopping is the new mantra of this age and the people of India are
applying this in their lives to a great extent nowadays. As we progress further,
the growth rate of online marketing in our country will leap to the stars.
According to a research report — State of e-commerce in India by Commerce
for ASSOCHAM, “India’s Internet base, is already the third highest in the world
after China and the US, is growing by nearly 40% every year”. Hence, the rise
of online shopping in the Indian subcontinent has been meteoric in the recent
years. The number of shopping websites has increased and so has the total
number of persons who prefer shopping online.
36 | P a g e
the advice and guidance of sellers, to accommodate that, they have customer
service through the phone of online to answer any questions. It is also
important to note that e-commerce does not benefit all small companies
equally. How much revenue a business gets from e-commerce depends on
what kind of service it gives. For example, most people would like to try on
clothes before they buy them, so it probably would not benefit a small
business that sells clothes as much as a small business that sells home supplies
or specialty books. Nevertheless, e-commerce does benefit any business even
in small ways. This is why it is crucial to understand how e-commerce affects
small businesses because it is becoming such a huge part of how society
functions that it effects the economy greatly and whatever happens to the
economy affects us. This is why is it important to understand this subject
because in the long run, it will affect all of us.
Module 1-
37 | P a g e
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Lifestyle Store</title>
<link rel="Stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="header">
<div class="inner-header">
<div class="logo">Lifestyle Store</div>
<div class="header-link">
<a href="login.html"> Sign up </a>
</div>
<div class="header-link">
<a href="login.html"> Login </a>
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image">
<center>
<div class="banner-content">
<h1>We sell lifestyle.</h1>
<p> Flat 40% OFF on premium brands .</p>
<a href="http://Google.com/" class="button" target="_blank">Shop Now</a>
</div>
</center>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<imgsrc="img/watch.jpg" alt="Watch" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands.</p>
</div>
</a>
</div>
<div class="items">
<a href="#" >
<imgsrc="img/camera.jpg" alt="Camera" class="thumbnail">
<div class="caption"> 38 | P a g e
<h2>Cameras</h2>
<p>Choose among the best available in the world.</p>
</div>
This is the basic code of HTML
1.2 Style Sheet:-
/*
external Style Sheet
*/
body
{ width: 100%;
height: 100%;
margin: 0; }
a
{text-decoration: none;
background-color: transparent;
color:#ededed; }
.header{
background-color:#000;
color:#fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}
.inner-header{
width:80%;
margin:auto;
}
.logo{
float: left;
39 | P a g e
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
}
.header-link{
float:right;
font-size:14px;
height: 50px;
padding: 15px 15px;
font-size:16px;
font-weight: bold;
}
.content{
min-height: 600px;
}
.banner-image{
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(img/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image{
padding-top: 12%;
width:80%;
margin:auto;
}
40 | P a g e
.banner-content{
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow:hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
}
.button{
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.container{
width:90%;
margin:auto;
overflow:hidden;
}
.items{
width:30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
41 | P a g e
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float:left;
margin-left:1%;
}
.thumbnail{
display: block;
max-width: 100%;
height: auto;
}
.caption{
color:#000;
padding:0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer{
background-color: #000;
color:#fff;
font-size:14px;
}
#image {
float: left;
padding: 0px 20px 20px20px;
42 | P a g e
Module-2
Bootstrap:-
Here is the list of the pages you will create using bootstrap:
1. Index page
2. Login page
3. Signup page
4. Product page
5. Cart page
6. Settings page
7. Success page
This document explains how to build each of these pages using Bootstrap:-
1index.html:-
Code-
<!DOCTYPE html>
<html>
<head>
<link href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet" type="text/css"/>
<!--jQuery library-->
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-3.5.1.min.js"
type="text/javascript"></script>
43 | P a g e
<link rel="Stylesheet" type="text/css" href="newcss.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lifestyle Store</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="signup.html"><span class="glyphiconglyphicon-user"></span>
Sign Up</a></li>
<li><a href="login.html"><span class="glyphiconglyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="banner-image">
<div class="inner-banner-image">
<center>
<div class="banner-content">
44 | P a g e
<h1>We sell lifestyle.</h1>
<p> Flat 40% OFF on premium brands .</p>
<a href="product.html" class="btnbtn-danger btn-lg active"
target="_blank">Shop Now</a>
</div>
</center>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<imgsrc="img/7.jpg" alt="Watch" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands.</p>
</div>
</a>
</div>
<div class="items">
<a href="#" >
<imgsrc="img/1.jpg" alt="Camera" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best available in the world.</p>
</div>
</a>
</div>
<div class="items">
<a href="#" >
<imgsrc="img/8.jpg" alt="Shirt" class="thumbnail">
45 | P a g e
<div class="caption">
<h2>Shirt</h2>
<p>Our exquisite collection of shirt.</p>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000</p>
</center>
</div>
</footer>
</body>
</html>
Module 2-
Bootstrap:-
Here is the list of the pages you will create using bootstrap:
1. Index page
2. Login page
3. Signup page
4. Product page
5. Cart page
6. Settings page
7. Success page
This document explains how to build each of these pages using Bootstrap:-
46 | P a g e
1. index.html:-
Code-
<!DOCTYPE html>
<html>
<head>
<link href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet" type="text/css"/>
<!--jQuery library-->
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-3.5.1.min.js"
type="text/javascript"></script>
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-3.5.1.min.js"
type="text/javascript"></script>
<title>Lifestyle Store</title>
</head>
<body>
<div class="container">
<div class="navbar-header">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
47 | P a g e
<div class="collapse navbar-collapse" id="myNavbar">
</ul>
</div>
</div>
</nav>
<div class="banner-image">
<div class="inner-banner-image">
<center>
<div class="banner-content">
</div>
</center>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<div class="caption">
<h2>Watches</h2>
</div>
</a>
</div>
48 | P a g e
<div class="items">
<div class="caption">
<h2>Cameras</h2>
</div>
</a>
</div>
<div class="items">
<div class="caption">
<h2>Shirt</h2>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000</p>
</center>
</div>
</footer>
</body>
</html>
2. login.html:-
49 | P a g e
Code-<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >
<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>
50 | P a g e
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="signup.html"><span class="glyphiconglyphicon-user"></span>
Sign Up</a></li>
<li><a href="#"><span class="glyphiconglyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav>
<p> </p><br><br><br><br><br><br><br>
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">
<div class="panel panel-primary" >
<div class="panel-heading">
<h4>LOGIN</h4>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" name="e-
mail" required = "true">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password"
name="password" required = "true">
</div>
<button type="submit" name="submit" class="btnbtn-
primary">Login</button><br><br>
</form><br/>
51 | P a g e
</div>
<div class="panel-footer"><p>Don't have an account? <a
href="signup.html">Register</a></p></div>
</div>
</div>
</div>
</div><br><br><br><br><br><br><br><br><br>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>
</footer>
</body>
</html>
3. signup.html:-
Code-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >
<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>
52 | P a g e
<!--Latest compiled and minified JavaScript-->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="Stylesheet" type="text/css" href="newcss.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign Up</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphiconglyphicon-user"></span> Sign
Up</a></li>
<li><a href="login.html"><span class="glyphiconglyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav><br><br><br><br><br>
53 | P a g e
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3">
<h2>SIGN UP</h2>
<form>
<div class="form-group">
<input class="form-control" placeholder="Name" name="name" required =
"true">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" name="e-
mail" required = "true">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password"
name="password" required = "true">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Contact"
name="contact" required = "true">
</div>
<div class="form-group">
<input class="form-control" placeholder="City" name="city" required =
"true">
</div>
<div class="form-group">
<input class="form-control" placeholder="Address" name="address" required
= "true">
</div>
<button type="submit" name="submit" class="btnbtn-
primary">Submit</button>
</form>
54 | P a g e
</div>
</div>
</div><br><br><br><br><br><br><br><br><br>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>
</footer>
</body>
</html>
4. Product.html:-
Code-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >
<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>
55 | P a g e
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Products</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="cart.html"><span class="glyphiconglyphicon-shopping-
cart">cart</span></a></li>
<li><a href="setting.html"><span class="glyphiconglyphicon-user"></span>
Settings</a></li>
<li><a href="#"><span class="glyphiconglyphicon-log-in"></span>
Logout</a></li>
</ul>
</div>
</div>
</nav><br><br><br><br><br><br>
<div class="container">
<div class="jumbotron">
<h1>Welcome to our Lifestyle Store!</h1>
56 | P a g e
<p>We have the best cameras, watches and shirts for you. No need to hunt
around, we
have all in one place.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/5.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Cannon EOS</h3>
<p>Price:Rs.36000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/2.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Sony DSLR</h3>
<p>Price:Rs.40000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
57 | P a g e
<div class="thumbnail">
<imgsrc="img/3.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Sony DSLR</h3>
<p>Price:Rs.50000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/4.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Olympus DSLR</h3>
<p>Price:Rs.80000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/9.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
58 | P a g e
<h3>Titan Model#301</h3>
<p>Price:Rs.13000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/10.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Titan Model#201</h3>
<p>Price:Rs.3000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/11.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>HMT Milan</h3>
<p>Price:Rs.8000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
59 | P a g e
<imgsrc="img/12.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Faber Luba#111</h3>
<p>Price:Rs.18000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/8.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3> H&W </h3>
<p>Price:Rs.800.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/6.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Luis Phill</h3>
60 | P a g e
<p>Price:Rs.1000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/13.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>John Zok</h3>
<p>Price:Rs.1500.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/14.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Jhalsani</h3>
<p>Price:Rs.1300.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<footer>
61 | P a g e
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>
</footer>
</body>
</html><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >
<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>
62 | P a g e
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="cart.html"><span class="glyphiconglyphicon-shopping-
cart">cart</span></a></li>
<li><a href="setting.html"><span class="glyphiconglyphicon-user"></span>
Settings</a></li>
<li><a href="#"><span class="glyphiconglyphicon-log-in"></span>
Logout</a></li>
</ul>
</div>
</div>
</nav><br><br><br><br><br><br>
<div class="container">
<div class="jumbotron">
<h1>Welcome to our Lifestyle Store!</h1>
<p>We have the best cameras, watches and shirts for you. No need to hunt
around, we
have all in one place.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">
63 | P a g e
<div class="thumbnail">
<imgsrc="img/5.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Cannon EOS</h3>
<p>Price:Rs.36000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/2.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Sony DSLR</h3>
<p>Price:Rs.40000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/3.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Sony DSLR</h3>
<p>Price:Rs.50000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
64 | P a g e
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/4.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Olympus DSLR</h3>
<p>Price:Rs.80000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/9.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Titan Model#301</h3>
<p>Price:Rs.13000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
65 | P a g e
<imgsrc="img/10.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Titan Model#201</h3>
<p>Price:Rs.3000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/11.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>HMT Milan</h3>
<p>Price:Rs.8000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/12.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Faber Luba#111</h3>
<p>Price:Rs.18000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
66 | P a g e
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/8.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3> H&W </h3>
<p>Price:Rs.800.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/6.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Luis Phill</h3>
<p>Price:Rs.1000.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
67 | P a g e
<imgsrc="img/13.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>John Zok</h3>
<p>Price:Rs.1500.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6">
<div class="thumbnail">
<imgsrc="img/14.jpg" class="img-responsive img-thumbnail" alt="Responsive
image">
<div class="caption">
<h3>Jhalsani</h3>
<p>Price:Rs.1300.00</p>
<button class="btnbtn-primary btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>
</footer>
68 | P a g e
</body>
</html>
5. Cart html:-
Code-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >
<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>
69 | P a g e
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="cart.html"><span class="glyphiconglyphicon-shopping-
cart">cart</span></a></li>
<li><a href="setting.html"><span class="glyphiconglyphicon-user"></span>
Settings</a></li>
<li><a href="#"><span class="glyphiconglyphicon-log-in"></span>
Logout</a></li>
</ul>
</div>
</div>
</nav><br><br><br><br><br><br><br><br>
<div class="row decor_bg">
<div class="col-md-6 col-md-offset-3">
<table class="table table-striped">
<thead>
<tr>
<th>Item Number</th>
<th>Item Name</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td><td>Total</td><td>Rs </td><td><a href='success.html'
class='btnbtn-primary'>Confirm Order</a></td>
70 | P a g e
</tr>
</tbody>
</table>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>
</footer>
</body>
</html>
6. Setting html:-
Code-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss" >
<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>
71 | P a g e
<!--Latest compiled and minified JavaScript-->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="Stylesheet" type="text/css" href="newcss.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Settings</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="cart.html"><span class="glyphiconglyphicon-shopping-
cart">cart</span></a></li>
<li><a href="setting.html"><span class="glyphiconglyphicon-user"></span>
Settings</a></li>
<li><a href="#"><span class="glyphiconglyphicon-log-in"></span>
Logout</a></li>
</ul>
</div>
</div>
72 | P a g e
</nav><br><br><br><br><br><br><br><br><br><br>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3">
<h2>Change Password</h2>
<form>
<div class="form-group">
<input type="password" class="form-control" placeholder="Old Password"
name="Old password" required = "true">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="New Password"
name="New password" required = "true">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Re-type New
Password" name="Re-type New password" required = "true">
</div>
<button type="submit" name="submit" class="btnbtn-
primary">Submit</button>
</form>
</div>
</div>
</div><br><br><br><br><br><br><br><br><br><br><br><br>
<footer>
<div class="container">
<center>
<p> Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000
00000.</p>
</center>
</div>
73 | P a g e
</footer>
</body>
</html>
7. Success html:-
Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Success</title>
<link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round"
rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet" type="text/css"/>
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"
type="text/javascript"></script>
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-3.5.1.min.js"
type="text/javascript"></script>
<style>
body {
font-family: 'Varela Round', sans-serif;
}
.modal-confirm {
color: #434e65;
width: 525px;
74 | P a g e
margin: 30px auto;
}
.modal-confirm .modal-content {
padding: 20px;
font-size: 16px;
border-radius: 5px;
border: none;
}
.modal-confirm .modal-header {
background: #47c9a2;
border-bottom: none;
position: relative;
text-align: center;
margin: -20px -20px 0;
border-radius: 5px 5px 0 0;
padding: 35px;
}
.modal-confirm h4 {
text-align: center;
font-size: 36px;
margin: 10px 0;
}
.modal-confirm .form-control, .modal-confirm .btn {
min-height: 40px;
border-radius: 3px;
}
.modal-confirm .close {
position: absolute;
top: 15px;
75 | P a g e
right: 15px;
color: #fff;
text-shadow: none;
opacity: 0.5;
}
.modal-confirm .close:hover {
opacity: 0.8;
}
.modal-confirm .icon-box {
color: #fff;
width: 95px;
height: 95px;
display: inline-block;
border-radius: 50%;
z-index: 9;
border: 5px solid #fff;
padding: 15px;
text-align: center;
}
.modal-confirm .icon-box i {
font-size: 64px;
margin: -4px 0 0 -4px;
}
.modal-confirm .btn {
color: #fff;
border-radius: 4px;
background: #eeb711;
text-decoration: none;
transition: all 0.4s;
76 | P a g e
line-height: normal;
border-radius: 30px;
margin-top: 10px;
padding: 6px 20px;
border: none;
}
.modal-confirm .btn:hover, .modal-confirm .btn:focus {
background: #eda645;
outline: none;
}
.modal-confirm .btn span {
margin: 1px 3px 0;
float: left;
}
.modal-confirm .btni {
margin-left: 1px;
font-size: 20px;
float: right;
}
.trigger-btn {
display: inline-block;
margin: 100px auto;
}
</style>
</head>
<body>
77 | P a g e
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons"></i>
</div>
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body text-center">
<h4>Success!</h4>
<p> Your order is confirmed. Thank you for shopping
with us.<a href="product.php"> Click here</a> to
purchase any other item.</p>
</div>
</div>
</div>
</body>
</html>
8. Style css:-
Code-
/*
external Style Sheet
*/
.banner-image{
padding-bottom: 75px;
margin-bottom: 50px;
text-align: center;
78 | P a g e
color: #f8f8f8;
background: url(img/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image{
padding-top: 12%;
width:80%;
margin:auto;
}
.banner-content{
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow:hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
}
.items{
width:30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float:left;
79 | P a g e
margin-left:1%;
}
.thumbnail{
display: block;
max-width: 100%;
height: auto;
}
.caption{
color:#000;
padding:0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer{
padding: 10px 0;
background-color: #101010;
color:#9d9d9d;
bottom: 0;
width: 100%;
}
#image {
float: left;
padding: 0px 20px 20px20px;
80 | P a g e
Module 3
SQL:-
1.Items
2.Users
3. Users_items
1 Items:-
“Create table items( PID int primary key auto_increment , Name varchar(255) not null
, Price int not null );”
2. Users
“Create table users ( id int primary key auto_increment , Name varchar(255) not
null ,Email varchar(255) not null , Password varchar(255) not null , contact
varchar(255) not null , City varchar(255) not null , Address varchar(255) not null );”
3. Users_items: -
The query will be:“Create table users_items( id int primary key auto_increment ,
user_id int not null , item_id int not null , statusenum(‘Added to cart’,’Conformed’)
not null );”
81 | P a g e
Bibliography/ References
Information and data related to the project has been taken from the sources
below, special thanks to the editors for making the task easier:-
1) www.wikipedia .org/wiki/E-commerce
2) youtube
3) www.geeksforgeeks.org
82 | P a g e
4) Intershalla
83 | P a g e