Prasadmini Project WT Final

Project on: Responsive E-Commerce Website
A
Mini Project
Report on
“Responsive E-Commerce Website”
SUBMITTED TO THE SAVITRIBAI PHULE PUNE UNIVERSITY, PUNE IN

PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE AWARD OF
THIRD YEAR COMPUTER ENGINEERING
SUBMITTED BY
Sachin Barvekar ROLL NO – 65
Prasad Gagare ROLL NO- 62
Mahesh Gaikwad ROLL No- 17
Ashutosh Dhumal ROLL No- 15
UNDER THE GUIDANCE OF
TRUPTI SONKUSARE
DEPARTMENT OF COMPUTER ENGINEERING

TSSM’s
PADMABHOOSHAN VASANTDADA PATIL INSTITUTE OF
TECHNOLOGY,BAVDHAN, PUNE-21.
2023-24
Department of Computer Engineering

CERTIFICATE
This is to certify that the seminar report entities
“Responsive E-Commerce Website"

Submitted by
Sachin Barvekar ROLL NO – 65
Prasad Gagare ROLL NO- 62
Mahesh Gaikwad ROLL No- 17
Ashutosh Dhumal ROLL No- 15
is a bonafide work carried out by above students under the guidance of Prof.
Pranali Kakad and it is approved for the Computer Graphics Laboratory – Mini
Project fulfilment of the requirement of Savitribai Phule PuneUniversity.
Prof. TRUPTI SONKUSARE Prof. G.S.WAYAL
Subject Teacher HOD, Computer Engineering
PADMABHOOSHAN VASANTDADA PATIL INSTITUTE OF

TECHNOLOGY,BAVDHAN, PUNE-21.
Place: Pune
Date: / /2024

ACKNOWLEDGEMENT
With due respect and gratitude I take the opportunity to thank those who have helped me
directly and indirectly. I convey my sincere thanks to Prof.G.S.Wayal HOD of computer
Department. and Prof. Trupti Sonkusare their help in selecting the mini project topic and
support. I thank to my seminar guide Prof. Trupti Sonkusare for her guidance, timely help
and valuable suggestions without which this seminar would not have been possible. Her
direction has always been encouraging as well as inspiring for me. Attempts have been
made to minimize the errors in the report. I would also like to express my appreciation and
thanks to all my friends who knowingly have assisted and encourage me throughout my
hard work.

ABSTRACT
This project is an attempt to provide the advantages of online shopping to customers of a

real shop. It helps buying the products in the shop anywhere through internet by using an
android device. Thus the customer will get the service of online shopping and home
delivery from his favorite shop. This system can be implemented to any shop in the locality
or to multinational branded shops having retail outlet chains. If shops are providing an
online portal where their customers can enjoy easy shopping from anywhere, the shops
won’t be losing any more customers to the trending online shops such as flipcart or amazon.
Since the application is available in the Smartphone it is easily accessible and always
available.

TABLE OF CONTENTS
Sr No. Title
1) Introduction
2) Future Prospect
3) Applications
4) Screenshots
5) Code
6) Conclusion
7) References

INTRODUCTION
1.1 INTRODUCTION
Two thousand years ago, Roman roads brought trade and commerce to Europe in an
unprecedented manner. A thousand years ago , the spice routes linked the culture of
East and West . At the dawn of the second millennium, the Internet, the world’s largest
computer network, the networks of networks , is making fundamental changes to the
lives of everyone on the planet-changing forever the way business is conducted.
Internet has brought an important medium for doing global business based on the state
of the art technology. Global business was conducted in a new way; electronically
using networks and the Internet. The availability of Internet has led to the development
of E-Commerce (Electronic Commerce), in which business transactions take place
via telecommunication networks.
1.2 BRIEF HISTORY OF E-COMMERCE
The Internet was conceived in 1969, when the Advanced Research Agency (a
Department of Defence Organization) funded research of computer networking. The
Internet could end up like EDI(Electronic Data Interchange) without the emergence of
the World Wide Web in 1990’s. EDI is widely viewed as the beginning of E-
Commerce if we consider ECommerce as the networking of business communities and
digitalization of business information .
The invention of online shopping by Michael Aldrich in 1979 was a milestone in the
development of ecommerce. The history of ecommerce is closely intertwined with the
history of the internet, which was opened to the public in 1991
1.3 WHAT IS E-COMMERCE?

Electronic commerce (ecommerce) refers to companies and individuals that buy and
sell goods and services over the Internet. Ecommerce operates in different types of
market segments and can be conducted over computers, tablets, smartphones, and other
smart devices. Nearly every imaginable product and service is available through
ecommerce transactions, including books, music, plane tickets, and financial services
such as stock investing and online banking. ecommerce is the process of buying and
selling tangible products and services online. It involves more than one party along
with the exchange of data or currency to process a transaction. It is part of the greater
industry that is known as electronic business (e-business), which involves all of the
processes required to run a company online.
Ecommerce has changed the way people shop and consume products and services. More
and more people are turning to their computers and smart devices to order goods, which
can easily be delivered to their homes.
There are different players of commerce such as :

• Buyers : These are the people or organization with money who want to
purchase goods and service products.
• Sellers : These are the people who offer goods and services to buyers.
Sellers are recognizing in different forms such as retailers who sell directly
to consumers and wholesalers who sell to retailers & others. Wholesalerds
are also known as distributers.
• Producers: These are the people organization that create the product &
services that sellers’s offer to buyers.
1.4 INRODUCTION TO WEB DEVELOPMENT

Web development is the work involved in developing a website for the Internet
(World Wide Web) or an intranet (a private network). Web development can range from
developing a simple single static page of plain text to complex web applications,
electronic businesses, and social network services. A more comprehensive list of tasks to
which Web development commonly refers, may include Web engineering, Web design,
Web content development, client liaison, client-side/server-side scripting, Web server
and network security configuration, and e-commerce development.
For larger organizations and businesses, Web development teams can consist of hundreds
of people (Web developers) and follow standard methods like Agile methodologies while
developing Web sites. Smaller organizations may only require a single permanent or
contracting developer, or secondary assignment to related job positions such as a graphic
designer or information systems technician. Web development may be a collaborative
effort between departments rather than the domain of a designated department. There are
three kinds of Web developer specialization: front-end developer, back-end developer,

and fullstack developer. Front-end developers are responsible for behavior and visuals
that run in the user browser, while back-end developers deal with the servers.
The front-end part used in the web development are :
I] HTML:
• In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped

ENQUIRE, a system for CERN researchers to use and share documents. In
1989, Berners-Lee wrote a memo proposing an Internet- based hypertext system.
Berners-Lee specified HTML and wrote the browser and server software in late
1990. That year, Berners-Lee and CERN data systems engineer Robert Cailliau
collaborated on a joint request for funding, but the project was not formally
adopted by CERN. In his personal notes of 1990, BernersLee listed "some of the
many areas in which hypertext is used"; an encyclopedia is the first entry.
• HTML stands for Hyper Text Markup Language.

• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
• Example:<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
• HTML elements are the building blocks of HTML pages. With HTML constructs,
images and other objects such as interactive forms may be embedded into the
rendered page. HTML provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links , quotes, and
other items. HTML elements are delineated by tags, written using angle brackets.
Tags such as <img /> and <input /> directly introduce content into the page. Other
tags such as <p> and </p> surround and provide information about document text
and may include sub-element tags. Browsers do not display the HTML tags but use
them to interpret the content of the page.

II] CSS ( Cascading Style Sheet):
• Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML or XML
(including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone
technology of the World Wide Web, alongside HTML and JavaScript.
• CSS is designed to enable the separation of content and presentation, including
layout, colors , and fonts. This separation can improve content accessibility; provide
more flexibility and control in the specification of presentation characteristics;
enable multiple web pages to share formatting by specifying the
relevant CSS in a separate .css file, which reduces complexity and repetition in the
structural content; and enable the .css file to be cached to improve the page load
speed between the pages that share the file and its formatting.
• Example: p { color: red; text-align: center; }
• p is a selector in CSS (it points to the HTML element you want to style: <p>).
• color is a property, and red is the property value.
• text-align is a property, and center is the property value. CSS is also used in
GTK Widget Toolkit.
III] JAVASCRIPT(JS):
• JavaScript , often abbreviated as JS, is a programming language that is one of the

core technologies of the World Wide Web, alongside HTML and CSS. As of 2022,
98% of websites use JavaScript on the client side for webpage behavior, often
incorporating third-party libraries. All major web browsers have a dedicated
JavaScript engine to execute the code on users' devices.
• JavaScript is a high-level, often just-in-time compiled language that conforms to the
ECMAScript standard. It has dynamic typing, prototype-based object-orientation,
and first-class functions. It is multi-paradigm, supporting event-driven, functional,
and imperative programming styles. It has application programming interfaces
(APIs) for working with text, dates, regular expressions, standard data structures,
and the Document Object Model (DOM).
• The first popular web browser with a graphical user interface, Mosaic, was released
in 1993. Accessible to non-technical people, it played a prominent role in the rapid
growth of the nascent World Wide Web. The lead developers of Mosaic then
founded the Netscape corporation, which released a more polished browser,
Netscape Navigator, in 1994. This quickly became the most-used.
• Netscape management soon decided that the best option was for Eich to devise a
new language, with syntax similar to Java and less like Scheme or other extant
scripting languages. Although the new language and its interpreter implementation

were called LiveScript when first shipped as part of a Navigator beta in September
1995, the name was changed to JavaScript for the official release in December .
• Example: document.getElement
System Architecture Of Web-Development:

Use Case Diagram Of Web-Development:

Registration: A new user will have to register in the system by providing essential details in
order to view the products in the system. The admin must accept a new user by unblocking
him.
Login: A user must login with his user name and password to the system after registration.
View Products: User can view the list of products based on their names after successful
login. A detailed description of a particular product with product name, products details,
product image, price can be viewed by users.
Search Product: Users can search for a particular product in the list by name.
Add to cart: The user can add the desired product into his cart by clicking add to cart option
on the product. He can view his cart by clicking on the cart button. All products added by
cart can be viewed in the cart. User can remove an item from the cart by clicking remove.
Online Shopping System Department of Computer Science, CUSAT Page 24
Submit Cart: After confirming the items in the cart the user can submit the cart by providing
a delivery address.On successful submitting the cart will become empty.
History: In the history the user will have a view of pending orders.
Edit Profile: The user can view and edit the profile.

FUTURE PROSPECTS
Global E-Commerce sales are expected to reach $5.7 trillion worldwide, proving
ecommerce is an increasing lucrative option for business. Ecommerce is also an industry
that’s everchanging. Trends are constantly shifting in an attempt to shape the way people in
every corner of the globe purchase products.
Future of ecommerce for online retailers:
New Marketing Channels Will Emerge:
In the past few years, there have been advancements in several areas of
ecommerce marketing—including a new mix of channels. For example, brands
can run ads on social media platforms, as well as tap into commerce, with the
release of Instagram and TikTok shopping features. Plus, as an extension of
social commerce, live shopping has started to gain traction worldwide. In
China, the live commerce market is expected to grow to $4.92 billion in 2023.
The concept is also emerging in the US, with 20% of shoppers saying they’ve
engaged in live commerce.
More Consumers Will Use Voice Search:

In 2022, voice-activated devices were predicted to facilitate $40 billion worth
of transactions. Compared to the 2017 figure of $2 billion for transactions
made via voice search, this is a big increase. To be more voice-search friendly
in 2023, consider optimizing your product information pages for common
voice search commands. For example, people may ask their voice assistant
questions like, “Where can I get Cosmetic products at a discount?”.
Private Label To Become More Common:

Private label means that a unique product is produced by one company but
packaged and sold under another company’s own brand name. Companies rely
on manufacturers to produce products that are highly specific to their
audience’s needs. For example, VegexPro provides private label products with
certifications like Organic, HACCP, Kosher, Halal, RAW, Vegan, Gluten-Free,
and Fair Trade. This company would be a great manufacturer for you to work
with if your customers want vegan or gluten-free products.
AI And Chatbots Will Become Personal Assistant:

AI and chatbots to help customers achieve their goals when they are on your
site. Chatbots have been around for a few years and are constantly evolving to
assist customers on social media channels and beyond. This is ideal for
businesses that operate in many different countries but don’t have the resources
to be online, helping customers 24/7.

APPLICATIONS
Retail and Wholesale:

Ecommerce has numerous applications in this sector. E-retailing is basically a
B2C(Business To Customer), and in some cases, a B2B(Business To Business) sale of goods
and services through online stores designed using virtual shopping carts and electronic
catalogs. A subset of retail ecommerce is m-commerce, or mobile commerce, wherein a
consumer purchases goods and services using their mobile device through the mobile
optimized site of the retailer. These retailers use the Epayment method: they accept payment
through credit or debit cards, online wallets or internet banking, without printing paper
invoices or receipts.
Online Marketing:
This refers to the gathering of data about consumer behaviors, preferences, needs,
buying patterns and so on. It helps marketing activities like fixing price, negotiating,
enhancing product features, and building strong customer relationships as this data can be
leveraged to provide customers a tailored and enhanced purchase experience.
Manufacturing:
Supply chain operations also use ecommerce; usually, a few companies form a group and
create an electronic exchange and facilitate purchase and sale of goods, exchange of market
information, back office information like inventory control, and so on. This enables the
smooth flow of raw materials and finished products among the member companies and also
with other businesses.
Online Booking:
This refers to the digital publication of books, magazines, catalogues, and developing
digital libraries.
Digital Advertising:
Online advertising uses the internet to deliver promotional material to consumers; it
involves a publisher, and an advertiser. The advertiser provides the ads, and the publisher
integrates ads into online content. Often there are creative agencies which create the ad and
even help in the placement. Different types of ads include banner ads, social media ads,
search engine marketing, retargeting, pop-up ads, and so on.

SCREENSHOTS







Database Screenshot:
CODE
HTML Tags:

HTML Template: HTML

Template:
<!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.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Tags:
1.Heading tag :
To display headings in html .
2.paragraph tag:
Used to add paragraphs in html.
3.anchor tag :
Used to add links to your page .
4.image tag :
Used to add images to your page.
It contains source .
5.br tag:

Add next line .
6.hr tag:
Used to display a horizontal ruler,used to separate content.
7.div tag :
It is a container used for other html elements.
Block element(takes full width)
Inline element (takes specific width)
8.span tag:
Container used for other html elements.
9.list in html :
Used to represent real life list data.
10. Tables in html :

Used to represent real life table data.
11. Iframe tag :

Website inside website.
12. Marque tag :

Insert a scrolling area of text.
13.input tag:
Specifies an input field where the user can enter data.
14.head tag :

a container for metadata (data about data) and is placed between the <html> tag and the
<body> tag.
15.body tag :
Define's document body .
16.title tag:
specifies the HTML page title.
17.link tag:
links one page to another page.
CSS Rule:
@import url('https://fonts.googleapis.com/css2?
family=Fira+Sans&family=Lato:ital,wght@1,300&f a
mily=Source+Code+Pro:wght@300&display=swap');
*{ margin: 0; padding: 0; box-

sizing: border-box; fontfamily:
'Spartan', sans-serif;
}
h1 { font-size:
50px; lineheight:
64px; color:
#222;
}
h2 { font-size:
46px; line-
height: 54px; color:
#222; }

h4 { font-size:
20px; color:
#222; }
h6 { fontweight:
700; font-size:
12px;
}
p{ font-size: 16px;
color: #465b52; margin:
15px 0 20px 0;
.section-p1 { padding:
40px 80px;
}
.section-m1 {
margin: 40px 0; }
button.normal { fontsize:
14px; font-weight: 600;
padding: 15px 30px;
color: black;
background-color: white;
border-radius: 4px;

cursor: pointer; border:

none; outline: none;
transition: 0.2s;
}
button.white { font-size: 13px;

font-weight: 600; padding:
11px 18px; color: white;
background-color: transparent;
cursor: pointer; border: 1px
solid white; outline: none;
transition: 0.2s;
}
body { width:
100%;
}
Javascript:
const bar=document.getElementById('bar'); const
close=document.getElementById('close'); const
nav=document.getElementById('navbar');
if(bar){ bar.addEventListener('click',
() => { nav.classList.add('active');
}) } if(close){ close.addEventListener('click',
() => { nav.classList.remove('active');

})
}
// js for sproduct page var MainImg =

document.getElementById("MainImg"); //id called var smallimg=
document.getElementsByClassName("small-img");
smallimg[0].onclick=function(){
MainImg.src = smallimg[0].src;
} smallimg[1].onclick=function(){
}
PHP:
<?php
$con=mysqli_connect('localhost','root','','test');
if(isset($_POST['sb']))
{
$email=$_POST['em'];
$query="INSERT INTO register(email) VALUES('$email')";

$run=mysqli_query($con,$query);
echo "Email Register Succesfully...";
} ?>

CONCLUSION
I have successfully implemented the site “ONLINE SHOPPY” of Responsive E-Commerce

Website with the help of various languages likes HTML, CSS, JAVASCRIPT, php & mysql
and various Tools like Font Awesome cdn, Favicon, etc. In this project we develop own logo
of “ONLINE SHOPPY’. This project helped me in gaining valuable information and
practical knowledge on several topics like designing web pages using HTML & CSS, usage
of responsive templates management of database using mysql. Also the project helped me
understanding about the development phases of a project and software development life
cycle. I learned how to test different features of a project. This project has given me great
satisfaction in having designed an application which can be implemented to any nearby
shops or branded shops selling various kinds of products by simple modifications. There is a
scope for further development in our project to a great extend. A number of features can be

added to this system in future like providing more control over products so that each
moderator can maintain their own products.
REFERENCES

https://www.apachefriends.org/index.html
/9/PhpMyAdmin. 5.05.2018
https://www.phpmyadmin.internet/

Prasadmini Project WT Final

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

Prasadmini Project WT Final

Uploaded by

Copyright:

Available Formats

Project on: Responsive E-Commerce Website

“Responsive E-Commerce Website”

SUBMITTED TO THE SAVITRIBAI PHULE PUNE UNIVERSITY, PUNE IN

THIRD YEAR COMPUTER ENGINEERING

Prasad Gagare ROLL NO- 62

Mahesh Gaikwad ROLL No- 17

Ashutosh Dhumal ROLL No- 15

UNDER THE GUIDANCE OF

DEPARTMENT OF COMPUTER ENGINEERING

Department of Computer Engineering

“Responsive E-Commerce Website"

Prasad Gagare ROLL NO- 62

Mahesh Gaikwad ROLL No- 17

Ashutosh Dhumal ROLL No- 15

Prof. TRUPTI SONKUSARE Prof. G.S.WAYAL

Subject Teacher HOD, Computer Engineering

PADMABHOOSHAN VASANTDADA PATIL INSTITUTE OF

Department of Computer Engineering

Department of Computer Engineering

This project is an attempt to provide the advantages of online shopping to customers of a

Department of Computer Engineering

Department of Computer Engineering

1.2 BRIEF HISTORY OF E-COMMERCE

1.3 WHAT IS E-COMMERCE?

Department of Computer Engineering

There are different players of commerce such as :

1.4 INRODUCTION TO WEB DEVELOPMENT

Department of Computer Engineering

• In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped

• HTML stands for Hyper Text Markup Language.

<h1>My First Heading</h1>

Department of Computer Engineering

II] CSS ( Cascading Style Sheet):

• JavaScript , often abbreviated as JS, is a programming language that is one of the

Department of Computer Engineering

System Architecture Of Web-Development:

Department of Computer Engineering

Use Case Diagram Of Web-Development:

Department of Computer Engineering

Department of Computer Engineering

More Consumers Will Use Voice Search:

Private Label To Become More Common:

AI And Chatbots Will Become Personal Assistant:

Department of Computer Engineering

Retail and Wholesale:

Department of Computer Engineering

Department of Computer Engineering

Department of Computer Engineering

Department of Computer Engineering

Department of Computer Engineering

Department of Computer Engineering

Department of Computer Engineering

Department of Computer Engineering

Department of Computer Engineering

HTML Template: HTML

Department of Computer Engineering

Add next line .

10. Tables in html :

11. Iframe tag :

12. Marque tag :

Department of Computer Engineering

*{ margin: 0; padding: 0; box-

Department of Computer Engineering