E-Commerce: An Online Framework For Purchasing Products

E-Commerce
An online framework for purchasing products.

A training report submitted in the partial fulfillment
of the requirement for the award of degree of
Bachelor of Technology (Computer Science & Engineering)
(Session: 2018-2021)
SUBMITTED To: SUBMITTED BY:

Dr. NARESH KUMAR BHAVESH KASHYAP
CSE Department 251702067
UIET, KUK CSE-7th A
University Institute of Engineering and Technology

Kurukshetra University, Kurukshetra – 136119
Certificate
DECLARATION
2|Page
I, Bhavesh Kashyap, student of Bachelor of Technology (Computer Science & Engineering), in
the Department of Computer Science & Engineering, University institute of Engineering and
Technology, Kurukshetra University, Kurukshetra, under class Roll No. 251702067 for the
session 2018-2021, hereby, declare that the report entitled “E-Commerce, An online framework
for purchasing products” has been completed by me in 7th semester. I hereby declare, on behalf
of myself that:
i. The matter embodied in this Dissertation is an original work and has not been submitted
earlier for award of any degree or diploma to the best of my knowledge and belief.
Moreover, the Dissertation does not breach any existing copyright or any other third
party rights.
ii. The Dissertation contains no such material that may be illegal and offensive.
I hereby agree to indemnify UIET and its Teaching Staff against any and all losses incurred in
connection with any claim or proceeding assert plagiarism and/or copyright infringement if the
investigation carried out to determines that my work is the plagiarizing or infringing work.
Date: 18-09-2020 (BHAVESH KASHYAP)
3|Page
ACKNOWLEDGEMENT
I am grateful to CLOUD19 TECH SOLUTIONS PVT. LTD. for giving me opportunity to

carry out the project work in the FULL STACK WEB DEVELOPMENT during my training. I
would like to also thank my institute, UNIVERSITY INSTITUTE OF ENGINEERING AND
TECHNOLOGY KURUKSHETRA UNIVERSITY, KURUKSHETRA for giving
permission and necessary administrative support to take up the training work at CLOUD19
TECH SOLUTIONS PVT. LTD. CHANDIGARH.
Deepest thanks to my Trainer MISS. SEJAL GUPTA(MENTOR AND MANAGER) for his
guidance, monitoring, constant encouragement and correcting various assignments of ours with
attention and care. He has taken pain to go through the project and training sessions and make
necessary corrections as when needed and we are very grateful for that.
(Bhavesh Kashyap)
4|Page
PREFACE
The purpose of this report is to assemble under one cover a sufficient body of knowledge about
management and developing a successful computer science engineering project. The following
quotes outline the basic idea behind this technical report. This report assembles various functions
like planning, organizing, designing and testing of the website developed.
In this project i.e. E-Commerce, an online platform for purchasing products. It provides facilities
such as Admin work of adding products for display so that buyers can make a choice and User
part of buying products after adding them to cart.
Index
5|Page
Sr.no Title
1 Title of the project
2 Overview of JavaScript
3 Introduction to E-Commerce
4 Introduction
5 Objective of the project
6 Project Category
7 Program Structure
8 Tools/ Platform used
9 Future Scope
10 Snapshots
6|Page
E-Commerce
An Online Platform to Purchase
Products.
Portfolio of Developer
7|Page
Overview of JavaScript
JavaScript History:
JavaScript, not to be confused with Java, was created in 10 days in May 1995 by Brendan Eich,
then working at Netscape and now of Mozilla. JavaScript was not always known as JavaScript:
the original name was Mocha, a name chosen by Marc Andreessen, founder of Netscape. In
September of 1995 the name was changed to LiveScript, then in December of the same year,
upon receiving a trademark license from Sun, the name JavaScript was adopted. This was
somewhat of a marketing move at the time, with Java being very popular around then.
In 1996 - 1997 JavaScript was taken to ECMA to carve out a standard specification, which other
browser vendors could then implement based on the work done at Netscape. The work done over
this period of time eventually led to the official release of ECMA-262 Ed.1: ECMAScript is the
name of the official standard, with JavaScript being the most well known of the implementations.
ActionScript 3 is another well-known implementation of ECMAScript, with extensions (see
below).
The standards process continued in cycles, with releases of ECMAScript 2 in 1998 and
ECMAScript 3 in 1999, which is the baseline for modern day JavaScript. The "JS2" or "original
ES4" work led by Waldemar Horwat (then of Netscape, now at Google) started in 2000 and at
first, Microsoft seemed to participate and even implemented some of the proposals in their
JScript.net language.
Over time it was clear though that Microsoft had no intention of cooperating or implementing
proper JS in IE, even though they had no competing proposal and they had a partial (and
diverged at this point) implementation on the .NET server side. So by 2003 the JS2/original-ES4
work was mothballed.
The next major event was in 2005, with two major happenings in JavaScript’s history. First,
Brendan Eich and Mozilla rejoined Ecma as a not-for-profit member and work started on E4X,
ECMA-357, which came from ex-Microsoft employees at BEA (originally acquired as
Crossgain). This led to working jointly with Macromedia, who were implementing E4X in
ActionScript 3(ActionScript 3 was a fork of Waldemar's JS2/original-ES4 work).
8|Page
So, along with Macromedia (later acquired by Adobe), work restarted on ECMAScript 4 with the
goal of standardizing what was in AS3 and implementing it in SpiderMonkey. To this end,
Adobe released the "AVM2", code named Tamarin, as an open source project. But Tamarin and
AS3 were too different from web JavaScript to converge, as was realized by the parties in 2007
and 2008.
Alas, there was still turmoil between the various players; Doug Crockford — then at Yahoo! —
joined forces with Microsoft in 2007 to oppose ECMAScript 4, which led to the ECMAScript
3.1 effort.
While all of this was happening the open source and developer communities set to work to
revolutionize what could be done with JavaScript. This community effort was sparked in 2005
when Jesse James Garrett released a white paper in which he coined the term Ajax, and
described a set of technologies, of which JavaScript was the backbone, used to create web
applications where data can be loaded in the background, avoiding the need for full page reloads
and resulting in more dynamic applications. This resulted in a renaissance period of JavaScript
usage spearheaded by open source libraries and the communities that formed around them, with
libraries such as Prototype, jQuery, Dojoand Mootools and others being released.
In July of 2008 the disparate parties on either side came together in Oslo. This led to the eventual
agreement in early 2009 to rename ECMAScript 3.1 to ECMAScript 5 and drive the language
forward using an agenda that is known as Harmony.
All of this then brings us to today, with JavaScript entering a completely new and exciting cycle
of evolution, innovation and standardisation, with new developments such as
the Nodejs platform, allowing us to use JavaScript on the server-side, and HTML5 APIs to
control user media, open up web sockets for always-on communication, get data on geographical
location and device features such as accelerometer, and more. It is an exciting time to learn
JavaScript.
JavaScript Features:
There are given many features of JavaScript.
 Giving the user more control over the browser.
 JavaScript is an object-based scripting language.
9|Page
 It Handling dates and time.
 It Detecting the user's browser and OS,
 It is light weighted.
 JavaScript is a scripting language and it is not java.
 JavaScript is interpreter based scripting language.
 JavaScript is case sensitive.
 JavaScript is object based language as it provides predefined objects.
 Every statement in javascript must be terminated with semicolon (;).
 Most of the javascript control statements syntax is same as syntax of control statements in
C language.
 An important part of JavaScript is the ability to create new functions within scripts.
Declare a function in JavaScript using function keyword.
JavaScript Uses:
There are too many web applications running on the web that are using JavaScript technology
like gmail, facebook,twitter, google map, youtube etc.
Uses of JavaScript
 Client-side validation
 Dynamic drop-down menus
 Displaying data and time
 Validate user input in an HTML form before sending the data to a server.
 Build forms that respond to user input without accessing a server.
 Change the appearance of HTML documents and dynamically write HTML into separate
Windows.
 Open and close new windows or frames.
10 | P a g e
 Manipulate HTML "layers" including hiding, moving, and allowing the user to drag them
around a browser window.
 Build small but complete client side programs .
 Displaying popup windows and dialog boxes (like alert dialog box, confirm dialog box
and prompt dialog box)
 Displaying clocks etc.
JavaScript and OOPS:
Object
Any entity that has state and behavior is known as an object. For example: chair, pen, table,
keyboard, bike etc. It can be physical and logical.
Class
Collection of objects is called class. It is a logical entity.
Inheritance
When one object acquires all the properties and behaviours of parent object i.e. known as
inheritance. It provides code reusability. It is used to achieve runtime polymorphism.
Polymorphism
When one task is performed by different ways i.e. known as polymorphism. For example: to
convenes the customer differently, to draw something e.g. shape or rectangle etc.
Abstraction
Hiding internal details and showing functionality is known as abstraction. For example: phone
call, we don't know the internal processing.
Encapsulation
Binding (or wrapping) code and data together into a single unit is known as encapsulation. For
example: capsule, it is wrapped with different medicines.
11 | P a g e
Advantage of OOPs over Procedure-oriented programming language
1) OOPs makes development and maintenance easier where as in Procedure-oriented
programming language it is not easy to manage if code grows as project size grows.
2) OOPs provides data hiding whereas in Procedure-oriented programming language a global
data can be accessed from anywhere.
3) OOPs provides ability to simulate real-world event much more effectively. We can provide
the solution of real word problem if we are using the Object-Oriented Programming language.
HTML 5
12 | P a g e
HTML stands for Hyper Text Markup Language. HTML5 is a language for structuring and
presenting content for the world wide web. It is the fifth revision of the HTML standard
(originally created in 1990 and most recently standardized as HTML4 in 1997).
History:
Tim Berners-Lee invented the world wide web! Tim created the World Wide Web Consortium
(W3C). Its mission was to lead the world wide web to its full potential by developing protocols
and guidelines that ensure long-term growth for the web. In December 1999, HTML 4.01 was
published. After this, the people who ran the W3C declared that it would be difficult to extend
HTML 4 and they gave up on it for the next ten years!
Turns out that web developers got busy trying to bridge the gaps in HTML5 by rolling out
custom controls plug-ins and libraries. And finally, key browser vendors such as Microsoft,
Google, Mozilla and Apple got together to develop these further, finally ending up under the
W3C HTML
working group.
CSS:
CSS is an acronym for Cascading Style Sheets. It is a style sheet language used to describe the
presentation semantics (the look and formatting) of a document written in a markup language.
Although we will deal with the application of CSS to style web pages written in HTML, but the
language can also be applied to any kind of XML document.
JavaScript / ECMAScript 5.0

JavaScript is the scripting language of the web and browsers implement the standards described
by ECMAScript; though not all browsers implement it exactly the same way! Anyhow,
JavaScript is used in billions of web pages. It is used to add functionality, communicate with the
server, validate forms, and a host of other stuff.
JavaScript object notation(JSON)

JSON is a simple human readable textual data interchange format used by web applications
primarily when interfacing with AJAX based APIs. JSON is directly supported as part of the ES5
13 | P a g e
specification and all modern browsers support JSON serialization and deserialization. If you
wanted to define a “person” object for instance with a few properties, here’s how you would
express it using JSON syntax:64 Introducing JavaScript
var person = {
“name”: “Foo”,
“age”: 10,
“gender”: “female”,
“address”: {
“street”: “street 1”,
“city”: “city 1”,
“pincode”: 12345
}
};
Browsers support the JSON API which allows you to serialize and deserialize objects to and
from strings. Given the “person” object we defined above here’s how you’d produce a string
from it:
var str = JSON.stringify(person);
And here’s how you’d convert that string right back into a “person” object:
var person2 = JSON.parse(str);
With the JSON API handy it becomes rather trivial to send and receive data to and from web
servers.
HTML5 QuerySelector API
This API is used to retrieve elements using standard DOM.
QuerySelector methods include –
1. querySelector () - Return the first element in the page which matches the specified
selector rules(s)
2. querySelectorAll () - Returns all elements which match the specified
rule or rules.
14 | P a g e
INTRODUCTION:
What is E-commerce?
Electronic commerce refers to the buying and selling of products or services over electronic
systems such as the Internet and other computer networks. The Shopping Cart is very important
feature used in e-commerce to assist people making purchases products online. It also includes
the entire online process of developing, marketing, selling, delivering, servicing and paying for
products and services. In order to purchase a shopping cart is provided to the user.The amount of
trade conducted electronically has grown extraordinarily with widespread Internet usage. The use
of commerce is conducted in this way, spurring and drawing on innovations in electronic funds
transfer, supply chain management, Internet marketing, online transaction processing, electronic
data interchange (EDI), inventory management systems, and automated data collection systems.
The eCommerce site will let customers to view and order products online from any part of the
world.
The main advantage of e-commerce over traditional commerce is the user can browse online
shops, compare prices and order merchandise sitting at home on their PC. Secure registration and
profile management facilities for Customers. Shopping Cart feature allows online shopping
customers to “place” items in the cart. It Decreases the cost of creating, processing, distributing,
storing and retrieving paper-based information. Expands the marketplace to national and
international markets. Upon “checkout” the software calculates as total for the order including
shipping and handling postage, packing and taxes, if applicable. Reduces the time between the
outlay of capital and the receipt of products and services. Customers should be able to mail the
Shop about the items they would like to see in the Shop
The proposed system helps in building a website to buy, sell products or goods online using
internet connection. Enables consumers to shop or do other transactions 24 hours a day, all year
round from almost any location. It can be accessed over the Internet.
Purchasing of goods online, user can choose different products based on categories , online
payments , delivery services and hence covering the disadvantages of the existing system and
making the buying easier and helping the vendors to reach wider market. It Provides consumers
with more choices. Customer can purchase Products Online.
Existing E-Commerce website management system:

This existing system of buying goods has several disadvantages. It requires lots of time to travel
to the particular shop to buy the goods. It is having lots of manual work. Since everyone is
leading busy life now a days, time means a lot to everyone. Also there are expenses for travelling
from house to shop. It is less user-friendly. In current system user must go to shop and order
products. It is difficult to identify the required product.More over the shop from where we would
15 | P a g e
like to buy some thing may not be open 24*7*365. Hence we have to adjust our time with the
shopkeeper’s time or vendor’s time. In current e commerce system user have to go shop to view
the description of the product. It is unable to generate different kinds of report.
NUMBER OF MODULES OF E-Commerce WEBSITE MANAGEMENT SYSTEM
This project is divided into 5 modules:
1. Registration Module
2. Products Browse Module
3. Products Search Module
4. Shopping cart Module
5. Shipping & Billing Module
16 | P a g e
INTRODUCTION
About Project:
The main aim of the project E-Commerce is to enable users to provide an online platform to
purchase goods. As online market users are increasing very sharply and will increase with boom
in near future. Visualizing the huge opportunity this is an effort to internationalize the business
through Internet. By developing of this online page hence increasing the customer base from a
local market to all around the globe.
My project is to be an online page because nowadays Internet is a prominent tool of marketing

mantra. Every year, millions of people around the world use the Internet to shop for their needs.
So, this is very typical project and also a very basic one which let the users to buy products.
These are the modules that I am going to develop in my proposed project.

Total no. of modules: - 5
1. Main Page
i) Admin Login
ii) User Login/User Sign-up
2. Dashboard.
3. Admins.
4. Products.
5. Orders.
17 | P a g e
Project Frame Work:
Activity Diagrams of E-Commerce shopping website management system:
Login Activity:
18 | P a g e
Registration Activity Diagram:
19 | P a g e
Admin Activity Diagram:
20 | P a g e
User Activity Diagram:
21 | P a g e
DFD diagram of E-Commerce website management system project
Context Level (0th Level) Diagram:
Login DFD
22 | P a g e
DFD for new user registration
23 | P a g e
OBJECTIVES
Project Objectives:
The objective of the project “E-Commerce” is to enable users to shop for their requirements
easily.
The major objectives of this project are as follows: -
 Providing an interactive interface for the customer for buying products.

 Providing Simple, Fast and easy to use Interface.
 Retrieval of cart items from local storage using simple buttons, links and
interfaces in a very fast and efficient manner.
 Admin can look up the order details of each order can view their status.
24 | P a g e
PROJECT CATEGORY
The undergoing project falls under Online Web Portal category. Since the project is mainly
responsible for creation of the portal with the online database at backend. As we know that,
the Internet is huge client server architecture. The client is the web browser, it is requesting a
web based data, a file, or whatever, from some computer somewhere – anywhere – in the
world. The server is that computer that holds the information you want. JSP is a rich
programming for building web-based applications. It offers outstanding support for both
developers and administrators, providing improved ease-of-use, tool support, reliability,
scalability, administration and security.
Portal Features:
 Easy to understand.
 Interactive and attractive.
 Easy to use.
 Supports PC use.
 Efficient and reliable.
How to use?
Admin side:
1. Login to portal using your credentials.
2. Super Admin can add second level admins.
3. Second level admins can manage products means can add or delete the products from
display.
User side:
1. Login to portal using your credentials or sign up to the portal.
2. User can buy items.
3. It can view its cart and can add or remove items from its cart.
4. Also, user can view the order details and the status of the order.
25 | P a g e
PROGRAM STRUCTURE
Analysis Report:
System analysis is the first step towards the software building process. The purpose of system
analysis is to understand the system requirements, identify the data, functional and behavioral
requirements and building the models of the system for better understanding of the system.
In the process of system analysis, one should first understand that, what the present system,
what it does, is how it works (i.e. processes). After analyzing these points, we become able to
identify the problems the present system is facing. Upon evaluating current problems and
desired information (input and output to the system), the analyst looks towards one or more
solutions. To begin with, the data objects, processing functions, and behavior of the system
are defined in detail. After this models, from three different aspects of the system-data,
function and behavior. The models created during the system analysis process helps in better
understanding of data and control flow, functional processing, operational behavioral and
information content.
Working Process of Proposed System:
 You can use the portal for shopping of various products.

 The user login information is kept safe from others.
 When user uses the portal for the first time he/she is shown the user login page
through which he can login to his account and can purchase products. If a person is
interested in any product but he can’t buy it that particular time , he/she can put that
into his/her cart for some time so that the product can easily be accessed in future.
26 | P a g e
PROJECT DESCRIPTION/ CODE:
Basic Intro.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My Website</title>
</head>
<body>

<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero"><h1><span>B</span>havesh <span>K</span>ashyap</h1></a>
</div>
<div class="nav-list">
<div class="hamburger"><div class="bar"></div></div>
<ul>
<li><a href="#hero" data-after="Home">Home</a></li>
<li><a href="#services" data-after="Service">Services</a></li>
<li><a href="#projects" data-after="Projects">Projects</a></li>
<li><a href="#about" data-after="About">About</a></li>
<li><a href="#contact" data-after="Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</section>



<section id="hero">
<div class="hero container">
<div>
<h1>Hello, <span></span></h1>
<h1>My Name is <span></span></h1>
<h1>BHAVESH<span></span></h1>
<a href="#projects" type="button" class="cta">Portfolio</a>
</div>
</div>
</section>



<section id="services">
<div class="services container">
<div class="service-top">
<h1 class="section-title">Serv<span>i</span>ces</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum deleniti maiores pariatur assumenda
quas magni et, doloribus quod voluptate quasi molestiae magnam officiis dolorum, dolor provident atque
molestias voluptatum explicabo!</p>
</div>
<div class="service-bottom">
<div class="service-item">
27 | P a g e
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png"/></div>
<h2>Web Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
architecto placeat beatae tenetur officia quod</p>
</div>
<h2>Web Design</h2>
</div>
<h2>Web Design</h2>
</div>
<h2>Web Design</h2>
</div>
</div>
</div>
</section>



<section id="projects">
<div class="projects container">
<div class="projects-header">
<h1 class="section-title">Recent <span>Projects</span></h1>
</div>
<div class="all-projects">
<div class="project-item">
<div class="project-info">
<h1>Project 1</h1>
<h2>Coding is Love</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit
unde rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt
harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</p>
</div>
<div class="project-img">
<img src="./img/img-1.png" alt="img">
</div>
</div>
<h1>Project 2</h1>
</div>
</div>
</div>
28 | P a g e
<h1>Project 3</h1>
</div>
</div>
</div>
<h1>Project 4</h1>
</div>
</div>
</div>
<h1>Project 5</h1>
</div>
</div>
</div>
</div>
</div>
</section>



<section id="about">
<div class="about container">
<div class="col-left">
<div class="about-img">
</div>
</div>
<div class="col-right">
<h1 class="section-title">About <span>me</span></h1>
<h2>Front End Developer</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores, velit alias eius non illum beatae
atque repellat ratione qui veritatis repudiandae adipisci maiores. At inventore necessitatibus deserunt
exercitationem cumque earum omnis ipsum rem accusantium quis, quas quia, accusamus provident suscipit
magni! Expedita sint ad dolore, commodi labore nihil velit earum ducimus nulla quae nostrum fugit aut,
deserunt reprehenderit libero enim!</p>
<a href="#" class="cta">Download Resume</a>
</div>
</div>
</section>
29 | P a g e



<section id="contact">
<div class="contact container">
<div><h1 class="section-title">Contact <span>info</span></h1></div>
<div class="contact-items">
<div class="contact-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/phone.png"/></div>
<div class="contact-info">
<h1>Phone</h1>
<h2>+91 903 429 7199</h2>
<h2>+91 958 839 7161</h2>
</div>
</div>
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/new-post.png"/></div>
<h1>Email</h1>
<h2>bhavesh251702067@gmail.com</h2>
<h2>bhaveshkashyaprajput29@gmail.com</h2>
</div>
</div>
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/map-marker.png"/></div>
<h1>Address</h1>
<h2>D-29 Judicial Employees Residential Colony Sector-13 Kurukshetra</h2>
</div>
</div>
</div>
</div>
</section>



<section id="footer">
<div class="footer container">
<div class="brand"><h1><span>B</span>havesh <span>K</span>ashyap</h1></div>
<h2>Your Complete Web Solution</h2>
<div class="social-icon">
<div class="social-item">
<a href="#"><img src="https://img.icons8.com/bubbles/100/000000/facebook-new.png"/></a>
</div>
<a href="#"><img src="https://img.icons8.com/bubbles/100/000000/instagram-new.png"/></a>
</div>
<a href="#"><img src="https://img.icons8.com/bubbles/100/000000/twitter.png"/></a>
</div>
<a href="#"><img src="https://img.icons8.com/bubbles/100/000000/behance.png"/></a>
</div>
</div>
<p>Copyright © 2020 BHAVESH KASHYAP. All rights reserved</p>
</div>
</section>

<script src="./app.js"></script>
</body>
30 | P a g e
</html>
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title></title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<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>
</button>
<a href="index.html" class="navbar-brand">Lifestyle store</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="sign.html"><span class="glyphicon glyphicon-user">SignUp</span></a></li>
<li><a href="login.html"><span class="glyphicon glyphicon-log-in">Login</span></a></li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<section class="banner-image">
<div class="banner-content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on all premium brands</p>
<a href="products.html" class="btn btn-danger btn-lg active">Shop Now</a>
</div>
</div>
</section>
<section>
<div class="padding-20"></div>
<div class="row">
<div class="col-xs-4 text-center">
<div class="thumbnail">
<a href="products.html"><img src="img/watch.jpg" alt="Watches"></a>
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands.</p>
</div>
</div>
</div>
31 | P a g e
<a href="products.html"><img src="img/camera.jpg" alt="Camera"></a>
<h2>Camera</h2>
<p>Choose among the best available in the world.</p>
</div>
</div>
</div>
<a href="products.html"><img src="img/shirt.jpg" alt="Shirt"></a>
<h2>Shirts</h2>
<p>Our exquisite collection of shirts.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<center>
Copyright © Lifestyle Store. All Rights Reserved and Contact Us: +91 90000 00000
</center>
</div>
</footer>
</body>
</html>
32 | P a g e
Login.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Login</title>

</head>
<body>
<header>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#mynavbar">
</button>
</div>
<li><a href="sign.html" class=""><span class="glyphicon glyphicon-
user">SignUp</span></a></li>
<li><a href="login.html"><span class="glyphicon glyphicon-log-
in">Login</span></a></li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="row row_style">
<div class="col-xs-5 col-lg-offset-2">

<div class="panel panel-primary">
<div class="panel-heading">
<h2>LOGIN</h2>
</div>
33 | P a g e
<div class="panel-body">
<p class="text-warning">Login to make a purchase</p>
<form>
<div class="form-group">
<input type="text" placeholder="E-mail" class="form-control"
name="E-mail">
</div>
<div class="form-group">
<input type="text" placeholder="Password" class="form-control"
name="Password">
</div>
<button class="btn btn-primary">Login</button>
<div class="panel-footer">
Don't have an account?<a href="sign.html" color:blue;>Register</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<center>
Copyright © Lifestyle Store. All Rights Reserved and Contact Us: +91 90000
00000
</center>
</div>
</footer>
</body>
</html>
34 | P a g e
Products.html
<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Products</title>
</head>
<body>
<header>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#mynavbar">
</button>
</div>
<li><a href="cart.html"><span class="glyphicon glyphicon-shopping-

cart">Cart</span></a></li>
<li><a href="settings.html"><span class="glyphicon glyphicon-
user">Settings</span></a></li>
<li><a href="logout.html"><span class="glyphicon glyphicon-log-
out">Logout</span></a></li>
</ul>
</div>
</div>
</nav>
</header>
<main>
35 | P a g e
<div class="jumbotron jumbotron_style">
<h1>Welcome to our Lifestyle store!</h1>
<p> We have the best cameras,watches and shirts for you.No need to hunt it
around,we have all in one
place.
</p>
</div>
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<img src="img/camera.jpg" alt="Nikon">
<h3>Nikon NX21</h3>
<p>Rs.36000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<img src="img/camera2.jpg" alt="Sony">
<h3>Sony LDS</h3>
<p>Rs.32000.00</p>
</div>
</div>
</div>

<img src="img/camera3.jpg" alt="cannon">
<h3>Cannon EDS70D</h3>
<p>Rs.29000.00</p>
</div>
</div>
</div>
<img src="img/camera4.jpg" alt="Panasonic">
<h3>Lumix2</h3>
<p>Rs.33000.00</p>
</div>
</div>
</div>
36 | P a g e
</div>
<img src="img/watch.jpg" alt="watch">
<h3>Y&K</h3>
<p>Rs.3000.00</p>
</div>
</div>
</div>
<img src="img/watch2.jpg">
<h3>Casio G-Shock</h3>
<p>Rs.6000.00</p>
</div>
</div>
</div>
<img src="img/watch3.jpg" alt="Watch">
<h3>Omega</h3>
<p>Rs.2000.00</p>
</div>
</div>
</div>
<img src="img/watch4.jpg " alt="Watch">
<h3>Diesel 3bar</h3>
<p>Rs.3300.00</p>
</div>
</div>
</div>
</div>
<img src="img/shirt.jpg" alt="Tommy">
<h3>Tommy Hilfigher</h3>
<p>Rs.3600.00</p>
37 | P a g e
</div>
</div>
</div>

<img src="img/shirt2.jpg" alt="U.S.Polo">
<h3>U.S. Polo</h3>
<p>Rs.970.00</p>
</div>
</div>
</div>

<img src="img/shirt3.jpg" alt="cannon">
<h3>Allen Solly</h3>
<p>Rs.2900.00</p>
</div>
</div>
</div>
<img src="img/shirt4.jpg">
<h3>UCB</h3>
<p>Rs.960.00</p>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<center>
Copyright © Lifestyle Store. All Rights Reserved and Contact Us: +91 90000 00000
</center>
</div>
</footer>
</body>
38 | P a g e
</html>
TOOLS/ PLATFORM USED
For the undergoing project, following tools are used :
Platform : Windows
The Operating System : Windows 10
Front-End Tool : Chrome Browser
Text Editor : Notepad++
FUTURE SCOPE
SCOPE OF FUTURE APPLICATION: -
Software scope describes the data and control to be processed, function performance,
constraints, interfaces and reliability. Function describes in the statement of scope are
evaluated and in some case refined to provide more detail prior to the beginning of the
estimation. Because both cost and schedule estimates are functionally oriented, some degree
of decomposition is often useful.
We can easily implement this project. Reusability is possible as and when we require in this
portal. We can update it to an app or can make it more attractive and smooth using CSS. We
can add new features as and when we require. There is flexibility in all the modules. Scope of
this document is to put down the requirements, clearly identifying the information needed by
the user, the source of the information and outputs expected from the system.
Future scope:
It is directly dependent on the lay stone of the project that is we will have to design a system
which when the time passes having a better system initially should not become a joke later.
It is highly likely that the scope will change as the web application project moves forward;
the web process model should be incremental. This allows the development team to “freeze”
the scope for one increment so that an operational application release can be created. This
approach enables the project developer to work without having to accommodate a continual
stream of changes but still recognizes the continuous evolution characteristics of most
application. Besides that, the following basic quality in the software always safeguards the
future scope of the software.
39 | P a g e
Reusability: -
Reusability is possible as and when we require in this application. We can update it next
version. Reusable software reduces design, coding and testing cost by amortizing effort over
several designs. Reducing the amount of code also simplifies understanding, which increases
the likelihood that the code is correct. We follow up both types of reusability: Sharing of
newly written code within a project and reuse of previously written code on new projects.
Extensibility: -
This software is extended in ways that its original developers may not expect. The following
principles enhance extensibility like Hide data structure, avoid traversing multiple links or
methods, avoid case statements on object type and distinguish public and private operations.
Robustness: -
Its method is robust if it does not fail even if it receives improper parameters. There are some
facilities like Protect against errors, optimize after the program runs, validate arguments and
avoid predefined limits.
Understandability: -
A method is understandable if someone other than the creator of the method can understand
the code (as well as the creator after a time lapse). We use the method with small and
coherent
helps to accomplish this.
Portability: -
Since it is an Internet based application so its portability and usability depends upon the client
connected with the Internet. The interface designed that is the web page designing which is
one of the major parts of web application because it is the first impression regardless of the
value of its contents interface should grab a potential user immediately.
40 | P a g e
SnapShots of Project:
First Page: Portfolio
41 | P a g e
42 | P a g e
E-Commerce:
43 | P a g e
-END of Project-
44 | P a g e

E-Commerce: An Online Framework For Purchasing Products

Uploaded by

Copyright:

Available Formats

You might also like

E-Commerce: An Online Framework For Purchasing Products

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

E-Commerce: An Online Framework For Purchasing Products

Uploaded by

Copyright:

Available Formats

E-Commerce

An online framework for purchasing products.

SUBMITTED To: SUBMITTED BY:

University Institute of Engineering and Technology

Date: 18-09-2020 (BHAVESH KASHYAP)

I am grateful to CLOUD19 TECH SOLUTIONS PVT. LTD. for giving me opportunity to

1 Title of the project

5 Objective of the project

8 Tools/ Platform used

 Giving the user more control over the browser.

 JavaScript is an object-based scripting language.

 It Detecting the user's browser and OS,

 JavaScript is a scripting language and it is not java.

 JavaScript is interpreter based scripting language.

 JavaScript is case sensitive.

 JavaScript is object based language as it provides predefined objects.

 Every statement in javascript must be terminated with semicolon (;).

 Dynamic drop-down menus

 Displaying data and time

 Build forms that respond to user input without accessing a server.

 Open and close new windows or frames.

 Build small but complete client side programs .

 Displaying clocks etc.

JavaScript and OOPS:

JavaScript / ECMAScript 5.0

JavaScript object notation(JSON)

Existing E-Commerce website management system:

NUMBER OF MODULES OF E-Commerce WEBSITE MANAGEMENT SYSTEM

This project is divided into 5 modules:

2. Products Browse Module

3. Products Search Module

4. Shopping cart Module

5. Shipping & Billing Module

My project is to be an online page because nowadays Internet is a prominent tool of marketing

These are the modules that I am going to develop in my proposed project.

Activity Diagrams of E-Commerce shopping website management system:

Context Level (0th Level) Diagram:

The major objectives of this project are as follows: -

 Providing an interactive interface for the customer for buying products.

Working Process of Proposed System:

 You can use the portal for shopping of various products.

<link href="style.css" rel="stylesheet">

<div class="col-xs-5 col-lg-offset-2">

<li><a href="cart.html"><span class="glyphicon glyphicon-shopping-

<div class="col-md-3 col-sm-6 ">

<div class="col-md-3 col-sm-6 ">

<div class="col-md-3 col-sm-6 ">

You might also like