rahul (4)
rahul (4)
On
E-COMMERCE WEBSITE
By
ROHIT KUMAR
2022-2025
0
A PROJECT REPORT ON
E-COMMERCE WEBSITE
OF
BATCH 2022-2025
SUBMITTED TO
1
CERTIFICATE
This is to certify that the project entitled, "E-commerce Website", is bonafide work of
ROHIT KUMAR bearing Enrollment No AJU/220650 under the guidance of Dean, School of
Engineering and IT, Dr. Arvind Kumar Pandey submitted in partial fulfillment of the
requirements for the award of degree of BACHELOR OF COMPUTER APPLICATION from
ARKA JAIN UNIVERSITY, JHARKHAND during the academic year 2024-2025.
2
COMPANY INTERNSHIP CERTIFICATE
3
ABSTRACT
Online Shopping play a great importance in the modern business environment. Dream gate has
opened the door of opportunity and advantage to the firms. This paper analysed the different
issue of online shopping. The project aims to provide theoretical contribution in understanding
the present status of online shopping. The Study Discuss the consumers’ online shopping
behaviours. Paper also identify the problems face by the consumers when they want to accept
internet shopping. Present paper is an expressive study based on the detailed review of earlier
pertinent studies related to the various concepts of online shopping to discover the concept of
online shopping. Solitude and safety risk emerge regularly as a reason for being cautious about
internet shopping.
Shopping convenience, information seeking, social contact, and diversity affects the consumer
attitude towards online shopping. The impossibility of product testing, problems with
complaints, product return and missus of personal data are the main doubts regarding on-line
shopping Keywords E-Commerce is now seen as a reality for many businesses and a normal
part of a business plan. The immediate benefits, in terms of cost savings, efficiencies and
enhanced profitability are clear at every stage in the supply chain. Adopting e-business is no
longer a competitive advantage, but a normal business process, without which an enterprise is
unlikely to survive in the New economy . Year 2000 saw many Dot-com companies built up
and many companies going into E-commerce however now it is a different story, more and
more companies are failing, and investors are becoming cautious to invest money into Internet
ventures.
4
ACKNOWLEDGEMENT
After completion of my final year project, I would like to take this chance to express
my sincere gratitude to my project guide and Dean, School of Engineering and IT,
Dr. Arvind Kumar Pandey who has guided me a lot throughout my project
development. Without him, I think I could not have finished the project on time. In
addition, while I met some logic problem or design problem, he was always the one
who gave me useful and logical answers.
I would like to thank SAMRAT BANDYOPADHYAY for one more time for
sharing his experience with me so that I could get more logical understanding on
how to develop chat application which is suitable for current society.
Finally, I want to thank to all my friends and teachers, who helped and co-operated
with me directly or indirectly in the accomplishment of this project.
5
DECLARATION
I ROHIT KUMAR hereby declare that the project entitled, “E-COMMERCE WEBSITE”
done at ARKA JAIN UNIVERSITY, has not been in any case duplicated to submit to any
other university for the award of any degree. To the best of my knowledge other than me, no
one has submitted to any other university.
The project is done in partial fulfillment of the requirements for the award of degree of
BACHLEOR OF COMPUTER APPLICATION to be submitted as final semester project
as part of our curriculum.
ROHIT KUMAR
AJU/220650
6
Table of Contents
Certificate Page No:
Abstract
Acknowledgement
Declaration
Chapter 1: Introduction 8-9
1.1 Objective
1.2 Purpose & Scope
Chapter 2: System Analysis 10-24
2.1 Existing System
2.2 Purpose System
2.3 Requirement Analysis
2.4 Hardware Requirement & Software Requirement
2.5 Justification of Selection of Technology
2.6 Database normalization & DFD
Chapter 3: System Design 25-29
3.1 Module Division
3.2 Data Dictionary
3.3 ER Diagram
Chapter 4 : Coding 29-109
5.1 Testing
7
CHAPTER 1
Introduction
1.1 Overview
Online Shopping is a from of electronic commerce which allows consumer to directly buy
goods or services from a seller over the internet using a web browser or a mobile app. Consumer
find product of interest by visiting the website of the retailer directly or by searching among
alternative vendors using a shopping search engine, which displays the same products
availability and pricing at different e-retailer. As of 2020, customers can shop online using a
range of different computers can shop online using a range of different computer and device,
including desktop computers, laptops , tablets computers and smart phones. The process is
called business to customer (B2C) online shopping . when an online store is set up to enable
business to buy from another business, the process is called business-to business online
shopping. Online stores usually enable shoppers to use “ search” features to find specific
models, brands or items. Online customer must have access to the internet and valid method of
payment in order to complete a transaction, such as a service such as credit card an interact-
enabled debit card, or a service such as paypal. The largest of these online retailing corporations
are Alibaba . Amazon.com and eBay.
8
1.2 Objective
Today the internet and its boom have created a new economic scenario that not only stresses
on the classical concept of the “product” but also on the modern concept of “service”. It is this
level of service that dictates whether a commercial venture will succeed or not in the market.
To provide a high accessibility of service we will design the online shopping website, so that
potential customers need not go to a physical shop to buy products or services. There are several
objective of this websites are following given bellows.
9
CHAPTER 2
REQUIREMENTS AND ANALYSIS
Data gathering is the process of gathering and measuring information on variables of interest,
in an established systematic fashion that enables one to answer stated research question, test
hypotheses, and evaluate outcomes. The data collection component of research is common to
all fields of study including physical and social science, humanities, business, etc. data
gathering techniques used in the (Software Developed Lifecycle ) SDLC
The measure of how beneficial or practical the development of information system will be to
an organization. Along this topic feasibility is measured. So far taking the feasibility study and
feasibility analysis during the development of the project E-commerce website we have studied
on the following four major categories of feasibility study.
Operational feasibility: operational feasibility is the measure of how well a proposed system
solve the problems. And takes advantage of the opportunity identified during scope definition
and how it satisfies the requirements identified in the requirements analysis phase of system
development.
Technical feasibility : A technical feasibility study assesses the details of how you intend to
deliver a product or services to customer. Think materials labour , transportation, where your
business will be located and the technology that will be necessary to bring all this together.
10
Economic feasibility : the degree to which the economic advantage of something to be made,
done, or feasibility of a single-payer health system. During the development of E-commerce
website. We have tried to address all these feasibility analysis phases seriously. That „s why
we think , our project will succeed properly.
A waterfall under the software development life cycle (SDLC) is the methodology used to
produce E- commerce website and the customer self self shopping system. It is used by system
developers to produce or alter information systems or software. It divides the development
process into several stages or process. After the completion of one stage. It will logically move
to another stage. Sometimes moving back to the previous stage is necessary due to failure that
occurs in current stage
Requirements
Analysis
Design
Testing
Operation
11
2.4 Hardware Requirement
RAM : 2GB
Xampp
XAMPP is a free and open-source cross- platform web server solution stack package developed
by Apache friends, Consisting mainly of the Apache HTTP Server, MariaDB database, and
interpreters for scripts written in the PHP and Perl programming languages.
2.6.1 Language
HTML : Hypertext Markup Language is the standard markup language for documents
designed to be displayed in a web browser. It can be assisted technologies such as Cascading
style sheets and Scripting languages such as javascrip .
CSS: Cascading style sheets (CSS) is style sheet language used for describing the presentation
of a document written in a markup language like HTML. CSS is a cornerstone technology of
the world wide web , alongside HTML and Javascript.
12
Javascript : javascript is a programming language that conforms to the ECMAScript
specification. Javascript is high-level, often just- in- time compiled, and multi- paradigm. It has
curly- bracket syntax, dynamic typing , prototype –based object- orientation, and first- class
functions.
PHP : php is a server side scripting language. That is used to develop static websites or
dynamic websites or Web application. PHP scripts can only be interpreted on a server that has
PHP installed.
2.6.2 MYSQL
This application is widely used for purposes , including data warehousing . e-commerce and
logging applications. The data in MYSQL databases are stored in the from of tables. It help the
admins to collect the data in an easy way. One of the reasons MYSQL is the world‟s most
popular open source database is that it provides comprehensives support for every application
development need. MYSQL also provides connectors and drivers (ODBC, JDBC, etc.) that
allow all forms of application to make use of MYSQL preferred data management server.
13
2.8 Data Flow Diagram (DFD)
DFD is an important tool used by system analysis. A data flow diagram model, system using
external entities from which data flows to process which transforms the data and create output
data transforms which go to processes or external entities such as files. The main merit of DFD
is that it can provide an overview of what data a system would process.
SYMBOLS
A circle represents a process that transforms incoming data flow into outgoing data
flows.
A square defines a source or destination of system data.
An arrow identifies data flow direction.
An open rectangle is a data store, data at rest or a temporary repository of data.
14
2.5.1 DFD Context level: 0
15
2.8.2 Level 1
16
Level 1:USER
17
LEVEL – 2: ADMIN
18
LEVEL – 2: ADMIN
19
LEVEL – 2: USER
20
LEVEL – 2: USER
21
22
2.7 Flow Chart
A flowchart is a type of diagram that represents a workflow or process. A flowchart can also
be defined as a diagrammatic representation of an algorithm, a step-by-step approach to solving
a task. The flowchart shows the steps as boxes of various kinds, and their order by connecting
the boxes with arrows.
23
Fig 2.7
24
3.1 Database Normalization
Normalization is a database design technique that reduces data redundancy and eliminates
undesirable characteristics like Insertion, Update and Deletion Anomalies. Normalization rules
divides larger tables into smaller tables and links them using relationships. The purpose of
Normalisation in SQL is to eliminate redundant (repetitive) data and ensure data is stored
logically.
25
CHAPTER 4
Program Code and Testing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> HEADER | E-COMMERCE WEBSITE </title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo" type="image/gif"
sizes="16x16">
<!-- EXTERNAL LINKS -->
<link rel="stylesheet" href="css/header.css">
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<section>
<!-- MAIN CONTAINER -->
<div id="container">
<!-- SHOP NAME -->
<div id="shopName"><a href="index.html"> <b>SHOP</b>LANE </a></div>
<!-- COLLCETIONS ON WEBSITE -->
<div id="collection">
<div id="clothing"><a href="clothing.html"> CLOTHING </a></div>
<div id="accessories"><a href="accessories.html"> ACCESSORIES
</a></div>
<div id="account"><a href="account.html"> ACCOUNT </a></div>
</div>
<!-- SEARCH SECTION -->
<div id="search">
<i class="fas fa-search search"></i>
<input type="text" id="input" name="searchBox" placeholder="Search for
Clothing and Accessories">
</div>
<!-- USER SECTION (CART AND USER ICON) -->
<div id="user">
<a href="cart.html"> <i class="fas fa-shopping-cart addedToCart"><div
id="badge"> 0 </div></i></a>
<a href="#"> <i class="fas fa-user-circle userIcon"></i> </a>
</div>
</div>
109
</section>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="/style.css"> -->
<title> E-COMMERCE WEBSITE BY EDYODA | CREATED BY PRIYANKA
SHARMA </title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo" type="image/gif"
sizes="16x16">
<!-- header links -->
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<!-- slider links -->
<!-- <script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-
CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script> -->
<script src="js/jQuery3.4.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick-theme.min.css">
</head>
<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(1).innerHTML = req.responseText;
}
</script>
<!-- SLIDER -->
<div id="2"></div>
<script>
109
load("slider.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(2).innerHTML = req.responseText;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> FOOTER | E-COMMERCE WEBSITE BY EDYODA </title>
<!-- EXTERNAL LINKS -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/footer.css">
</head>
<body>
<footer>
<section>
<div id="containerFooter">
<div id="webFooter">
<h3> online store </h3>
<p> men clothing </p>
<p> women clothing </p>
<p> men accessories </p>
<p> women accessories </p>
</div>
<div id="webFooter">
<h3> helpful link </h3>
<p> home </p>
<p> about </p>
<p> contact </p>
</div>
<div id="webFooter">
<h3> partners </h3>
<p> zara </p>
<p> pantaloons </p>
<p> levis </p>
<p> ucb </p>
<p> + many more </p>
</div>
109
<div id="webFooter">
<h3> address </h3>
<p> Arka Jain university </p>
<p> Ghamaria </p>
<p> Jharkhand - 831001 </p>
<p> India </p>
</div>
</div>
<div id="credit"><a href="https://www.linkedin.com/in/md-asif-17633a26b/"> ©
MD. Asif </a>     |     <a href="https://www.edyoda.com/"
target="_blank"> EDYODA </a></div>
</section>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="/style.css"> -->
<title> E-COMMERCE WEBSITE BY EDYODA | CREATED BY PRIYANKA
SHARMA </title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo" type="image/gif"
sizes="16x16">
<!-- header links -->
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<!-- slider links -->
<!-- <script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-
CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script> -->
<script src="js/jQuery3.4.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick-theme.min.css">
</head>
<body>
<!-- HEADER -->
<div id="1"></div>
<script>
109
load("header.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(1).innerHTML = req.responseText;
}
</script>
<!-- SLIDER -->
<div id="2"></div>
<script>
load("slider.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(2).innerHTML = req.responseText;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>TechnoHacks Login Page</title>
<link rel="stylesheet" href="account.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<!-- MAKE A LOGIN FORM -->
<div class="container">
<div class="curved-shape"></div>
<div class="curved-shape2"></div>
<div class="form-box Login">
<h2 class="animation" style="--D:0; --S:21;">Login</h2>
<form action="#">
<div class="input-box animation" style="--D:1; --S:22;">
<input type="text" required>
<label for="">Username</label>
<i class='bx bxs-user'></i>
</div>
<div class="input-box animation" style="--D:2; --S:23;">
<input type="password" required>
<label for="">Password</label>
<i class='bx bxs-lock'></i>
</div>
<div class="input-box animation" style="--D:3; --S:24;">
<button class="btn" type="submit">Login</button>
</div>
<div class="regi-link animation" style="--D:4; --S:25;">
<p>Don't have an account ? <a href="#" class="SignUpLink">Sign Up</a></p>
109
</div>
</form>
</div>
<div class="info-content Login">
<h2 class="animation" style="--D:0; --S:20;">WELCOME BACK!</h2>
<p class="animation" style="--D:1; --S:21;">Login to your account to access your data
& files you've been storing.</p>
</div>
<div class="form-box Register">
<h2 class="animation" style="--li:17; --S:0">Register</h2>
<form action="#">
<div class="input-box animation" style="--li:18; --S:1">
<input type="email" required>
<label for="">Email</label>
<i class='bx bxs-envelope'></i>
</div>
<div class="input-box animation" style="--li:18; --S:1">
<input type="text" required>
<label for="">Username</label>
<i class='bx bxs-user'></i>
</div>
<div class="input-box animation" style="--li:19; --S:2">
<input type="password" required>
<label for="">Create Password</label>
<i class='bx bxs-lock'></i>
</div>
<div class="input-box animation" style="--li:20; --S:3">
<button class="btn" type="submit">Register</button>
</div>
<div class="regi-link animation" style="--li:21; --S:4">
<p>Don't have an account ? <a href="#" class="SignInLink">Sign In</a></p>
</div>
</form>
</div>
<div class="info-content Register">
<h2 class="animation" style="--li:17; --S:0;">WELCOME NOOBIE!</h2>
<p class="animation" style="--li:18; --S:1;">New User? Register yourself and join us
for exciting experiences.</p>
</div>
</div>
<script src="account.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Cart | E-COMMERCE WEBSITE BY EDYODA </title>
109
<link rel="stylesheet" href="css/cart.css">
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo" type="image/gif"
sizes="16x16">
<!-- header links -->
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(1).innerHTML = req.responseText;
}
</script>
<div id="cartContainer">
<!-- JS rendered code -->
</div>
</div>
</body>
<!-- FOOTER -->
<div id="4"></div>
<script>
load("footer.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(4).innerHTML = req.responseText;
}
</script>
<script src="/cart.js"></script>
</html>
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="/style.css"> -->
<title> E-COMMERCE WEBSITE BY EDYODA | CREATED BY PRIYANKA
SHARMA </title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo" type="image/gif"
sizes="16x16">
<!-- header links -->
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<!-- slider links -->
<!-- <script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-
CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script> -->
<script src="js/jQuery3.4.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick-theme.min.css">
</head>
<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(1).innerHTML = req.responseText;
}
</script>
<!-- SLIDER -->
<div id="2"></div>
<script>
load("slider.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
109
document.getElementById(2).innerHTML = req.responseText;
}
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> CONTENT | E-COMMERCE WEBSITE BY EDYODA </title>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo" type="image/gif"
sizes="16x16">
</head>
<body>
<div id="mainContainer">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> CONTENT DETAILS | E-COMMERCE WEBSITE BY EDYODA </title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo" type="image/gif"
sizes="16x16">
<!-- <link rel="stylesheet" href="/box1.css"> -->
<link rel="stylesheet" href="css/contetDetails.css">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
109
rel="stylesheet">
<!-- header links -->
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(1).innerHTML = req.responseText;
}
</script>
<div id="containerProduct">
<!-- JS rendered code -->
</div>
<script src="/contentDetails.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> ORDER PLACED | E-COMMERCE WEBSITE BY EDYODA </title>
<!-- favicon -->
109
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo" type="image/gif"
sizes="16x16">
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<div id="aboutCheck">
<h1> Order Placed Successfully! </h1>
<p> We've sent you an email with the Order details. </p>
</div>
</div>
<!-- FOOTER -->
<div id="4"></div>
<script>
load("footer.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(4).innerHTML = req.responseText;
}
</script>
</body>
<script src="/orderPlaced.js"></script>
</html>
<!DOCTYPE html>
<html lang="en">
109
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> SLIDER | E-COMMERCE WEBSITE </title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo" type="image/gif"
sizes="16x16">
<!-- EXTERNAL LINKS -->
<script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-
CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick-theme.min.css">
<style>
body
{
margin: 0;
}
#containerSlider
{
margin: auto;
width: 90%;
text-align: center;
padding-top: 100px;
box-sizing: border-box;
}
#containerSlider img
{
width: 100%;
height: 140%;
text-align: center;
align-content: center;
}
@media(max-width: 732px)
{
#containerSlider img
{
height: 12em;
}
}
@media(max-width: 500px)
{
#containerSlider img
{
height: 10em;
}
}
109
</style>
</head>
<body>
<section>
<div id="containerSlider">
<div id="slidingImage"> <img src="img/img1.png" alt="image1"> </div>
<div id="slidingImage"> <img src="img/img2.png" alt="image2"> </div>
<div id="slidingImage"> <img src="img/img3.png" alt="image3"> </div>
<div id="slidingImage"> <img src="img/img4.png" alt="image4"> </div>
</div>
</section>
</body>
<!-- <script src=“https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.js”></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(function()
{
$('#containerSlider').slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
});
</script>
</html>
body
{
margin: 0;
font-family: 'Lato', sans-serif;
}
#cartMainContainer
{
padding: 90px 50px;
}
#cartContainer
{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
img
{
width: 80px;
float: left;
109
border-radius: 10px;
margin-right: 50px;
}
#boxContainer
{
display: grid;
grid-gap: 20px;
padding: 20px;
width: 100%;
/* float: left; */
}
#box
{
background-color: white;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
border-radius: 10px;
width: 100%;
/* margin: auto */
padding: 20px 10px;
}
#box:hover
{
box-shadow: 0px 1px 3px 2px rgb(185, 185, 185);
}
#totalContainer
{
width: 50%;
padding: 20px;
margin: auto;
background-color: white;
border-radius: 10px;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
}
#totalContainer:hover
{
box-shadow: 0px 1px 3px 2px rgb(185, 185, 185);
}
button
{
padding: 8px 12px;
background-color: rgb(3, 122, 122);
border: none;
border-radius: 5px;
cursor: pointer;
}
button a
{
text-decoration: none;
color: white;
font-size: 15px;
}
109
button:hover
{
background-color: rgb(3, 94, 94);
}
button a:focus
{
outline: none;
}
@media(max-width: 800px)
{
img
{
width: 60px;
margin-right: 20px;
}
h3, h4
{
font-size: 14px;
}
h2
{
font-size: 18px;
}
#cartMainContainer
{
padding: 90px 20px;
}
}
@media(max-width: 555px)
{
#cartContainer
{
display: grid;
grid-template-columns: 1fr;
}
#boxContainer
{
padding: 20px;
width: 80%;
}
}
body
{
margin: 0;
font-family: 'Lato', sans-serif;
}
h1
109
{
width: 90%;
margin: auto;
padding: 50px 0;
letter-spacing: 2px;
font-weight: 700;
text-transform: capitalize;
}
#containerClothing, #containerAccessories
{
display: grid;
grid-gap: 70px 20px;
grid-template-columns: repeat(5, 1fr);
width: 90%;
margin: auto;
padding-bottom: 40px;
}
#box
{
width: 100%;
background-color: white;
align-content: center;
border-radius: 10px;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
}
#box:hover
{
box-shadow: 1px 6px 3px 0 rgb(185, 185, 185);
}
#containerClothing img
{
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#containerAccessories img
{
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#details
{
padding: 0 15px;
text-transform: capitalize;
}
#box a
{
text-decoration: none;
color: rgb(29, 29, 29);
}
109
h3
{
font-size: 16px;
}
h4
{
font-weight: 100;
}
h2
{
color: rgb(3, 94, 94);
}
@media(max-width: 1070px)
{
h1
{
font-size: 25px;
}
#containerClothing, #containerAccessories
{
width: 95%;
grid-gap: 10px;
}
}
@media(max-width: 850px)
{
h1
{
width: 80%;
}
#containerClothing, #containerAccessories
{
display: grid;
grid-gap: 70px 20px;
grid-template-columns: repeat(3, 1fr);
width: 80%;
}
}
@media(max-width: 650px)
{
h1
{
font-size: 20px;
}
h1
{
width: 90%;
}
109
#containerClothing, #containerAccessories
{
width: 90%;
}
}
@media(max-width: 600px)
{
h1
{
width: 70%;
}
#containerClothing, #containerAccessories
{
width: 70%;
}
}
@media(max-width: 505px)
{
h1
{
width: 80%;
}
#containerClothing, #containerAccessories
{
width: 80%;
grid-template-columns: repeat(2, 1fr);
}
}
body
{
margin: 0;
text-transform: capitalize;
font-family: 'Lato', sans-serif;
font-weight: 100;
}
#containerProduct
{
padding-top: 80px;
}
#containerD
{
width: 90%;
margin: auto;
display: grid;
grid-template-columns: 1fr 2fr;
padding: 80px 40px;
}
#imageSection
{
109
width: 80%;
margin: auto;
}
#imageSection img
{
width: 100%;
float: right;
border-radius: 10px;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
}
#imageSection img:hover
{
box-shadow: 1px 0px 9px 1px rgb(3, 122, 122);
#productDetails
{
width: 100%;
}
h1
{
font-size: 35px;
letter-spacing: 1px;
word-spacing: 2px;
}
h4
{
font-size: 15px;
font-weight: bold;
color: rgb(3, 122, 122);
letter-spacing: 1px;
word-spacing: 2px;
}
#productPreview
{
padding-bottom: 10px;
}
#productPreview > img
{
width: 50px;
padding: 10px 10px;
border-radius: 15px;
cursor: pointer;
}
p
{
font-size: 15px;
word-spacing: 2px;
letter-spacing: 1px;
line-height: 25px;
109
}
button
{
padding: 10px 15px;
color: white;
background-color: rgb(3, 122, 122);
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
button a
{
text-decoration: none;
font-size: 18px;
}
button:hover
{
background-color: rgb(3, 94, 94);
}
button a:focus
{
outline: none;
}
@media(max-width: 1300px)
{
h1
{
font-size: 28px;
}
#productPreview > img
{
width: 40px;
padding: 10px 10px;
padding-bottom: 30px;
}
button
{
padding: 8px 13px;
background-color: rgb(3, 122, 122);
border: none;
border-radius: 5px;
cursor: pointer;
}
}
@media(max-width: 1170px)
{
109
h1
{
font-size: 22px;
}
#productPreview > img
{
width: 40px;
padding: 10px 10px;
padding-bottom: 30px;
}
button a
{
font-size: 15px;
}
h4, p
{
font-size: 13px;
}
h3
{
font-size: 15px;
}
@media(max-width: 900px)
{
/* #containerProduct */
#containerD
{
width: 60%;
margin: auto;
display: grid;
grid-template-columns: 1fr;
}
#imageSection
{
width: 100%;
text-align: center;
}
#imageSection img
{
text-align: center;
width: 70%;
float: none;
}
#productDetails
{
width: 100%;
}
109
#button
{
text-align: center;
}
}
@media(max-width: 650px)
{
#containerD
{
width: 80%;
}
}
body
{
margin: 0;
font-family: 'Lato', sans-serif;
}
#containerFooter
{
width: 100%;
background-color: rgb(29, 29, 29);
color: white;
letter-spacing: 1px;
display: grid;
grid-template-columns: repeat(4, 1fr);
text-transform: uppercase;
font-size: 15px;
padding: 15px 300px;
box-sizing: border-box;
}
#containerFooter h3:hover, #containerFooter p:hover
{
color: lightslategray;
cursor: pointer;
}
#webFooter
{
padding-top: 30px;
font-size: 12px;
}
#credit
{
width: 100%;
margin: auto;
padding: 20px 0;
text-align: center;
background-color: rgb(29, 29, 29);
color: white;
109
font-size: 11px;
letter-spacing: 1px;
}
#credit a
{
color: white;
text-decoration: none;
position: relative;
}
#credit a::after
{
content: "";
background: white;
mix-blend-mode: exclusion;
width: calc(100% + 18px);
height: 0;
position: absolute;
bottom: -4px;
left: -10px;
transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
#credit a:hover::after
{
height: calc(100% + 8px)
}
@media(max-width: 1350px)
{
#containerFooter
{
padding: 15px 200px;
}
}
@media(max-width: 1166px)
{
#containerFooter
{
padding: 15px 100px;
}
}
@media(max-width: 950px)
{
#containerFooter
{
padding: 15px 50px;
}
}
@media(max-width: 850px)
109
{
#containerFooter
{
font-size: 13px;
}
#webFooter
{
font-size: 10px;
}
}
@media(max-width: 750px)
{
#containerFooter
{
display: grid;
grid-template-columns: 1fr 1fr;
padding: 15px 100px;
}
#webFooter
{
padding: 15px 20px;
}
}
@media(max-width: 540px)
{
#containerFooter
{
padding: 0 25px;
}
}
body
{
margin: 0;
}
#badge
{
position: absolute;
background-color: rgb(255, 30, 30);
color: white;
border-radius: 50%;
padding: 5px 8px;
font-size: 14px;
top: 10px;
right:158px;
}
#container
{
background-color: white;
margin: auto;
text-align: center;
109
width: 100%;
display: grid;
grid-gap: 10px;
grid-template-columns: 1.5fr 1.5fr 5fr 1fr;
font-family: 'Lato', sans-serif;
z-index: 1;
justify-content: space-between;
align-items: center;
padding: 15px 40px;
box-sizing: border-box;
position: fixed;
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), 0 2px 6px 2px rgba(60, 64, 67, 0.149);
}
#shopName
{
font-size: 40px;
font-family: 'Lato', sans-serif;
}
#shopName a
{
text-decoration: none;
color: rgb(92, 44, 44);
}
#shopName > b
{
font-weight: 900;
font: black;
}
#collection
{
font-weight: bold;
display: grid;
grid-template-columns: 1fr 1fr;
}
#collection a
{
padding: 10px;
text-decoration: none;
color: rgb(29, 29, 29);
}
.search
{
padding: 14px;
/* color: gray; */
color: rgb(29, 29, 29);
min-width: 25px;
text-align: center;
position: absolute;
}
109
.addedToCart
{
font-size: 1.5em;
margin-right: 25px;
}
#user
{
display: flex;
/* float: right; */
align-items: center;
}
.userIcon
{
font-size: 45px;
}
#input
{
width: 35em;
height: 3em;
padding: 2px 50px;
background-color: rgb(241, 241, 241);
border: none;
border-radius: 5px;
}
#input::placeholder
{
font-weight: bold;
}
#input:focus
{
outline: none;
}
#user a
{
color: rgb(29, 29, 29)
}
@media(max-width: 1300px)
{
#collection
{
font-size: 13px;
}
#input
{
width: 25em;
}
}
109
@media(max-width: 1212px)
{
#collection
{
font-size: 13px;
}
#input
{
width: 20em;
}
.addedToCart
{
font-size: 1.5em;
margin: 10px 20px;
}
}
@media(max-width: 1090px)
{
#container
{
display: grid;
grid-template-columns: 1fr 2fr 0.5fr;
}
#search
{
display: none;
}
}
@media(max-width: 750px)
{
#shopName
{
font-size: 28px;
}
#collection
{
font-size: 12px;
}
.userIcon
{
font-size: 35px;
}
.addedToCart
{
font-size: 1.2em;
margin: 10px 20px;
}
}
@media(max-width: 650px)
109
{
#shopName
{
font-size: 24px;
}
#collection
{
font-size: 10px;
}
.userIcon
{
font-size: 30px;
}
}
@media(max-width: 550px)
{
#container
{
padding: 20px 25px;
}
}
/* badge media */
@media(max-width: 1480px)
{
#badge
{
right:150px;
}
}
@media(max-width: 1426px)
{
#badge
{
right:142px;
}
}
@media(max-width: 1360px)
{
#badge
{
right:136px;
}
}
@media(max-width: 1320px)
{
#badge
{
right:129px;
}
109
}
@media(max-width: 1259px)
{
#badge
{
right:119px;
}
}
@media(max-width: 1212px)
{
#badge
{
right: 96px;
}
}
@media(max-width: 1155px)
{
#badge
{
right: 87px;
}
}
@media(max-width: 1090px)
{
#badge
{
right: 119px;
}
}
@media(max-width: 1030px)
{
#badge
{
right: 109px;
}
}
@media(max-width: 970px)
{
#badge
{
right: 100px;
}
}
@media(max-width: 910px)
{
#badge
{
right: 94px;
}
}
@media(max-width: 850px)
109
{
#badge
{
right: 87px;
}
}
@media(max-width: 750px)
{
#badge
{
right: 87px;
padding: 3px 6px;
font-size: 12px;
top: 12px;
}
}
@media(max-width: 650px)
{
#badge
{
right: 78px;
}
}
@media(max-width: 550px)
{
#badge
{
right: 62px;
top: 18px;
}
}
#orderContainer
{
font-family: 'Lato', sans-serif;
width: 80%;
padding-top: 250px;
padding-bottom: 150px;
margin: auto;
text-align: center;
}
#orderContainer i
{
color: rgb(5, 187, 5);
padding-bottom: 30px;
font-size: 10em;
}
#aboutCheck p
{
font-weight: 100;
109
letter-spacing: 1px;
}
#aboutCheck h1
{
letter-spacing: 1px;
word-spacing: 1px;
}
@media(max-width: 700px)
{
#orderContainer i
{
font-size: 8em;
padding-bottom: 30px;
}
h1
{
font-size: 18px;
}
p
{
font-size: 15px;
}
}
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
color: #fff;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #25252b;
}
.container{
position: relative;
width: 750px;
height: 450px;
border: 2px solid #30e2d9e8;
box-shadow: 0 0 25px #30e2d9e8;
overflow: hidden;
}
.container .form-box{
position: absolute;
109
top: 0;
width: 50%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.form-box.Login{
left: 0;
padding: 0 40px;
}
.form-box.Login .animation{
transform: translateX(0%);
transition: .7s;
opacity: 1;
transition-delay: calc(.1s * var(--S));
}
.form-box.Register{
right: 0;
padding: 0 60px;
}
.form-box.Register .animation{
transform: translateX(120%);
transition: .7s ease;
opacity: 0;
filter: blur(10px);
transition-delay: calc(.1s * var(--S));
}
}
.form-box h2{
font-size: 32px;
text-align: center;
}
.form-box .input-box{
position: relative;
width: 100%;
109
height: 50px;
margin-top: 25px;
}
.input-box input{
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: #fff;
font-weight: 600;
border-bottom: 2px solid #fff;
padding-right: 23px;
transition: .5s;
}
.input-box input:focus ,
.input-box input:valid{
border-bottom: 2px solid #30e2d9e8;
}
.input-box label{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
color: #fff;
transition: .5s;
}
.input-box input:focus ~ label,
.input-box input:valid ~ label{
top: -5px;
color: #30e2d9e8;
}
.input-box i{
position: absolute;
top: 50%;
right: 0;
font-size: 18px;
transform: translateY(-50%);
transition: .5s;
}
.input-box input:focus ~ i,
.input-box input:valid ~ i{
color: #30e2d9e8;
}
.btn{
position: relative;
width: 100%;
height: 45px;
background: transparent;
109
border-radius: 40px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
border: 2px solid #30e2d9e8;
overflow: hidden;
z-index: 1;
}
.btn::before{
content: "";
position: absolute;
height: 300%;
width: 100%;
background: linear-gradient(#25252b,#30e2d9e8,#25252b
,#30e2d9e8);
top: -100%;
left: 0;
z-index: -1;
transition: .5s;
}
.btn:hover:before{
top: 0;
}
.regi-link{
font-size: 14px;
text-align: center;
margin: 20px 0 10px;
}
.regi-link a{
text-decoration: none;
color: #30e2d9e8;
font-weight: 600;
}
.regi-link a:hover{
text-decoration: underline;
}
.info-content{
position: absolute;
top: 0;
height: 100%;
width: 50%;
display: flex;
justify-content: center;
flex-direction: column;
}
.info-content.Login{
right: 0;
text-align: right;
padding: 0 40px 60px 150px;
109
}
.info-content.Login .animation{
transform: translateX(0);
transition: .7s ease;
transition-delay: calc(.1s * var(--S));
opacity: 1;
filter: blur(0px);
}
.container.active .info-content.Login .animation{
transform: translateX(120%);
opacity: 0;
filter: blur(10px);
transition-delay: calc(.1s * var(--D));
}
.info-content.Register{
left: 0;
text-align: left;
padding: 0 150px 60px 40px;
pointer-events: none;
}
.info-content.Register .animation{
transform: translateX(-120%);
transition: .7s ease;
opacity: 0;
filter: blur(10px);
transition-delay: calc(.1s * var(--S));
}
.container.active .info-content.Register .animation{
transform: translateX(0%);
opacity: 1;
filter: blur(0);
transition-delay: calc(.1s * var(--li));
}
.info-content h2{
text-transform: uppercase;
font-size: 36px;
line-height: 1.3;
}
.info-content p{
font-size: 16px;
}
.container .curved-shape{
position: absolute;
right: 0;
top: -5px;
height: 600px;
width: 850px;
background: linear-gradient(45deg,#25252b,#30e2d9e8);
109
transform: rotate(10deg) skewY(40deg);
transform-origin: bottom right;
transition: 1.5s ease;
transition-delay: 1.6s;
}
.container.active .curved-shape{
transform: rotate(0deg) skewY(0deg);
transition-delay: .5s;
}
.container .curved-shape2{
position: absolute;
left: 250px;
top: 100%;
height: 700px;
width: 850px;
background: #25252b;
border-top: 3px solid #30e2d9e8;
transform: rotate(0deg) skewY(0deg);
transform-origin: bottom left;
transition: 1.5s ease;
transition-delay: .5s;
}
.container.active .curved-shape2{
transform: rotate(-11deg) skewY(-41deg);
transition-delay: 1.2s;
}
const container=document.querySelector('.container');
const LoginLink=document.querySelector('.SignInLink')
const RegisterLink=document.querySelector('.SignUpLink')
RegisterLink.addEventListener('click',()=>{
container.classList.add('active');
})
LoginLink.addEventListener('click',()=>{
container.classList.remove('active');
})
console.clear();
if(document.cookie.indexOf(',counter=')>=0)
{
let counter = document.cookie.split(',')[1].split('=')[1]
document.getElementById("badge").innerHTML = counter
}
// console.log(boxContainerDiv);
buttonLink.appendChild(buttonText)
cartContainer.appendChild(boxContainerDiv)
cartContainer.appendChild(totalContainerDiv)
// let cartMain = document.createElement('div')
// cartmain.id = 'cartMainContainer'
// cartMain.appendChild(totalContainerDiv)
return cartContainer
}
// BACKEND CALL
let httpRequest = new XMLHttpRequest()
let totalAmount = 0
httpRequest.onreadystatechange = function()
{
if(this.readyState === 4)
{
if(this.status == 200)
{
// console.log('call successful');
contentTitle = JSON.parse(this.responseText)
let i;
let totalAmount = 0
for(i=0; i<counter; i++)
{
let itemCounter = 1
for(let j = i+1; j<counter; j++)
109
{
if(Number(item[j]) == Number(item[i]))
{
itemCounter +=1;
}
}
totalAmount += Number(contentTitle[item[i]-1].price) * itemCounter
dynamicCartSection(contentTitle[item[i]-1],itemCounter)
i += (itemCounter-1)
}
amountUpdate(totalAmount)
}
}
else
{
console.log('call failed!');
}
}
// console.clear();
let contentTitle;
console.log(document.cookie);
function dynamicClothingSection(ob) {
let boxDiv = document.createElement("div");
boxDiv.id = "box";
let h3 = document.createElement("h3");
let h3Text = document.createTextNode(ob.name);
h3.appendChild(h3Text);
109
let h4 = document.createElement("h4");
let h4Text = document.createTextNode(ob.brand);
h4.appendChild(h4Text);
let h2 = document.createElement("h2");
let h2Text = document.createTextNode("rs " + ob.price);
h2.appendChild(h2Text);
boxDiv.appendChild(boxLink);
boxLink.appendChild(imgTag);
boxLink.appendChild(detailsDiv);
detailsDiv.appendChild(h3);
detailsDiv.appendChild(h4);
detailsDiv.appendChild(h2);
return boxDiv;
}
// console.log(boxDiv)
// BACKEND CALLING
httpRequest.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status == 200) {
// console.log('call successful');
contentTitle = JSON.parse(this.responseText);
if (document.cookie.indexOf(",counter=") >= 0) {
var counter = document.cookie.split(",")[1].split("=")[1];
document.getElementById("badge").innerHTML = counter;
}
for (let i = 0; i < contentTitle.length; i++) {
if (contentTitle[i].isAccessory) {
console.log(contentTitle[i]);
containerAccessories.appendChild(
dynamicClothingSection(contentTitle[i])
);
} else {
console.log(contentTitle[i]);
containerClothing.appendChild(
dynamicClothingSection(contentTitle[i])
109
);
}
}
} else {
console.log("call failed!");
}
}
};
httpRequest.open(
"GET",
"https://5d76bf96515d1a0014085cf9.mockapi.io/product",
true
);
httpRequest.send();
console.clear()
let id = location.search.split('?')[1]
console.log(id)
if(document.cookie.indexOf(',counter=')>=0)
{
let counter = document.cookie.split(',')[1].split('=')[1]
document.getElementById("badge").innerHTML = counter
}
function dynamicContentDetails(ob)
{
let mainContainer = document.createElement('div')
mainContainer.id = 'containerD'
document.getElementById('containerProduct').appendChild(mainContainer);
imageSectionDiv.appendChild(imgTag)
// console.log(productDetailsDiv);
let h1 = document.createElement('h1')
let h1Text = document.createTextNode(ob.name)
109
h1.appendChild(h1Text)
let h4 = document.createElement('h4')
let h4Text = document.createTextNode(ob.brand)
h4.appendChild(h4Text)
console.log(h4);
let h3 = document.createElement('h3')
let h3Text = document.createTextNode('Description')
h3.appendChild(h3Text)
let i;
for(i=0; i<ob.photos.length; i++)
{
let imgTagProductPreviewDiv = document.createElement('img')
imgTagProductPreviewDiv.id = 'previewImg'
imgTagProductPreviewDiv.src = ob.photos[i]
imgTagProductPreviewDiv.onclick = function(event)
{
console.log("clicked" + this.src)
imgTag.src = ob.photos[i]
document.getElementById("imgDetails").src = this.src
}
productPreviewDiv.appendChild(imgTagProductPreviewDiv)
}
console.log(mainContainer.appendChild(imageSectionDiv));
mainContainer.appendChild(imageSectionDiv)
mainContainer.appendChild(productDetailsDiv)
productDetailsDiv.appendChild(h1)
productDetailsDiv.appendChild(h4)
productDetailsDiv.appendChild(detailsDiv)
detailsDiv.appendChild(h3DetailsDiv)
detailsDiv.appendChild(h3)
detailsDiv.appendChild(para)
productDetailsDiv.appendChild(productPreviewDiv)
productDetailsDiv.appendChild(buttonDiv)
return mainContainer
}
// BACKEND CALLING
109
CHAPTER 4
5.1 TESTING
This type of testing selects the path of the program according to the location of definition and
use of variables. This kind of testing was used only when some local variable were declared.
The definition-use chain method was used in this type of testing. These were particularly useful
in nested statements.
Unit testing focuses verification effort on the smallest unit of software design, the module. The
unit testing we have is white box oriented and some modules the steps are conducted in parallel.
* All logical decisions have been exercised on their true and false sides
LOOP TESTING
110
* In this type of testing all the loops are tested to all the limits possible. The following exercise
was adopted for all loops:
*. All the loops were tested at their limits, just above them and just below them.
*. For nested loops test the inner most loop first and then work outwards
Established technique of flow graph with Cyclomatic complexity was used to derive test cases
for all the functions. The main steps in deriving test cases were:
Use the design of the code and draw correspondent flow graph.
V(G)=E-N+2 or
V(G)=P+1 or
V(G)=Number Of Regions
111
Where V(G) is Cyclomatic complexity
112
CHAPTER 5
Results and Discussion
5.1 Output
113
114
115
116
117
5.2 Future Scope
The following section describes the work that will be implemented with future releases of E-
commerce websites System.
Enhance User Interface by adding more user interactivefeatures. Provide Deals and
promotional
Offer details to home page. Provide product of the week/ day to home page .
Payment Options : Add different payment options such as online , cart , cash etc .
Oder process Estimate: Provide customer a visual graphical order status bar .
118
CHAPTER 6
Conclusion
The E- commerce website system has been computed successfully and was also tested
successfully by taking “ Test Cases “ . It is user friendly, and has required options, which can
be utilized by the the user to perform the desried operations.
E- commerce website system is developed using HTML, CSS, JS as front end and PHP,
MYSQL as back end on windows environment.
User friendly
119
CHAPTER 7
References
http://books.goalkicker.com/MicrosoftSQLServerBook/
W3 Schools http://www.w3schools.com/
Stack Overflow : https://stackoverflow.com/
www.youtube.com
120