A.C.

PATIL COLLEGE ENGINEERING OF KHARGHAR-410210

Certificate
This is to certify that

Name of the Student PRN No

SWAPNIL NAWALE 151051053

SIMRANJIT SINGH 161052064

Have submitted the Internet Programming Project “E-Commerce Website” as per the
requirement of the syllabus of the DEGREE(INFORMATION TECHNOLOGY)course,
according to the rules laid down by DTE, during the academic year 2018-2019 in view of
fulfillment of the degree in Information Technology.

Date:____________

_____________ _____________
(Examiner 1) (Examiner 2)

_____________ _____________
(Dr.Sangita Chaudhari) (Dr. D.G.Borse)
Head of Department Principal

1
 DEPARTMENT OF INFORMATION TECHNOLOGY
A.C.Patil College of Engineering
New Panvel – 410 206

PROJECT APPROVAL FOR

This project entitled “E-Commerce Website” by Swapnil Nawale, Simranjit Singh Sachdev are approved for the

degree of Bachelor of Engineering in Information Technology.

Examiners:

1. ________________

2. ________________

3. ________________

4. ________________

5. ________________

Date:

2
 AIM

The business-to-consumer aspect of electronic commerce (e-commerce) is the most visible business
use of the World Wide Web. The primary goal of an e-commerce site is to sell goods and services
online.
An e-commerce website offers different kind of products which we can buy online sitting at home.
Therefore we provide a website of e-commerce where the customer can buy lots of different
products online by sitting at home using our website.
This document will discuss each of the underlying technologies to create and implement an e-
commerce website.

3
 INTRODUCTION

E-commerce is fast gaining ground as an accepted and used business paradigm. More and more
business houses are implementing web sites providing functionality for performing commercial
transactions over the web. It is reasonable to say that the process of shopping on the web is
becoming commonplace. The objective of this project is to develop a general purpose e-commerce
store where any product (such as books, CDs, computers, mobile phones, electronic items, and
home appliances) can be bought from the comfort of home through the Internet. An online store is a
virtual store on the Internet where customers can browse the catalog and select products of interest.
The selected items may be collected in a shopping cart. At checkout time, the items in the shopping
cart will be presented as an order. At that time, more information will be needed to complete the
transaction. Usually, the customer will be asked to fill or select a billing address, a shipping address,
a shipping option, and payment information such as credit card number. An e-mail notification is
sent to the customer as soon as the order is placed.

4
 ABSTRACT

The business-to-consumer aspect of electronic commerce (e-commerce) is the most visible business
use of the World Wide Web. The primary goal of an e-commerce site is to sell goods and services
online. This project deals with developing an e-commerce website for various products. It provides
the user with a catalog of different products available for purchase in the store. In order to facilitate
online purchase a shopping cart is provided to the user.
In order to develop an e-commerce website, a number of languages must be used. These include
HTML,CSS,Javascript,PHP. This is a project with the objective to develop a basic website where a
consumer is provided with a shopping cart application and also to know about the technologies used
to develop such an application.

5
 PROPOSED SYSTEM

In this new PHP based e-commerce Forum, there will be two type of users who will interact this
system and control the various activity. These two users will be: admin and the normal users. Users
will be responsible to purchase in particular product, receive their products, make reply to existing
posts, access message dialog box. Admin will keep track on various activity of users. Among these,
there are other features, like displaying the list of various products and delivery address based on
various parameters like product category, products can be searched by name of product or category
of product.

6
 EXISTING SYSTEM

In the previous existing e-commerce project system, there was no proper moderation channel where
the person cannot keep an eye, what’s going on and the rules are being followed by all existing
users. There was no proper communication channel. Previously, users were not able to get admin
messages and options to create their community. There was no check performed on validation and
type of questions to be entered under particular forum. In existing system, there was no proper
password recovery method, and the admin does not have the power to delete users, their activity and
points which is assigned to them. Encryption is done in order to secure our network.

7
Options of the website

The website have the following options:

1. The user who is not a registered member can’t buy any products from the website but he can
still browse for the products.
2. The users who are able to login because they registered can browse, add to cart and buy any
product they wish to buy.
3. The administrator of the website has full control of the website and he can insert,update,add
or delete any products from the website.

Modules:

It contains different modules like:

● Home
● Add Product
● Orders
● All Products
● Log out

❏ Home: It consists of the whole description of the website.In this, it will give information
about the different categories of products,search bar to search the products, login in,sign
in,etc.

❏ Add Product: It will provide the feature of adding the product to your cart so that you can
buy it later.

❏ Orders: It will show all the products that you have purchased and the products that you will
buy.

❏ All Products: It will show all the different products that our website will have and you can
buy them.

8
 RESPONSIVE WEB DESIGN FRAMEWORK

What is framework?

A web framework (WF) or web application framework (WAF) is a software framework that is
designed to support the development of web applications including web services, web resources
and web APIs. Web frameworks provide a standard way to build and deploy web applications. Web
frameworks aim to automate the overhead associated with common activities performed in web
development. For example, many web frameworks provide libraries for database access, templating
frameworks, and session management.

Bootstrap

Bootstrap is a front-end framework for HTML, CSS and JavaScript that is notable for developing
mobile-first and responsive websites. With some basic knowledge of HTML and CSS, you can
create Bootstrap forms, tables, buttons, typography, navigation, modals, image carousels and
optional JavaScript plugins, by using the premade templates Bootstrap provides you.

9
 RWD CODE

@media screen and (max-width:1280px){

#subheader p{
margin-left:10px;
}
#subheader a{
margin-right:10px;
}
#search{
margin-left:20px;
}
}
@media screen and (max-width:1024px){
#logo{margin-top:-5px;}
#search{
width:250px;
margin-left:10px;
margin-top: -10px;
}
.search-area{
width:250px;
}
#user-menu {width:190px; margin-top: 5px;}
#uder-menu li{width: 90px;}
}
@media screen and (max-width:768px){
#subheader{
padding-bottom: 10px;
}
#subheader p {
display: none;
}
#subheader a{
font-size: 10px;
margin-left: 15px;
}
#logo{
width: 100px;
margin-top:0px;
#ist{
font-size: 25px;
}
#iist{
font-size: 20px;
}
#search{
width: 350px;
margin-right: 0px;
}
.search-area{
width:350px;

10
 height:20px;
margin-right:0px;
}
.search-btn{height:40px;}
#user-menu{margin-top: 15px;}
}

@media screen and (max-width:480px){

#subheader p {
display: none;
}
#subheader{
padding-bottom: 10px;
}
#user-menu{margin-top: -9px;}

}
@media screen and (max-width:350px){
#subheader a{
font-size:8px;
}
#logo{width:70px;}
#ist{font-size: 15px;}
#iist{font-size: 12px;}
#search{width: 100px;}
.search-area{
margin-left: 15px;
width:160px;
height:30px;
}
.search-btn{
height: 30px;
font-size: 10px;
width: 50px;
margin-left:-50px;
}
#user-menu{
width:100px;
margin-top: 0px;
margin-left: 50px;
}
#user-menu li{
font-size: 15px;
width: 70px;
margin-left: 30px;
margin-top: 0px;
}
}

11
Types of CSS

There are three types of CSS:

1. Internal CSS
2. External CSS
3. Inline CSS

Internal CSS: An internal style sheet should be used when a single document has a unique style.In
this, style of CSS is specified in the <head> section. It affects all the elements in the body section.
Internal CSS is used in the condition when we want a style to be used in the complete HTML body
not in any other web page.

External CSS: An external style sheet is ideal when the style is applied to many pages. With this
we can change the look of an entire Web site by changing only one file.
External CSS file contains only CSS code and it is saved with a “.css” extension.

Inline CSS: Inline CSS is used for a specific HTML tag. <style> attribute is used to style a
particular HTML tag. It will affect only single elements.It is not the best practice for a good
programmer and the code will be quite large and very complex.

12
 CSS CODE

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: normal;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*my work start from here*/
*{
margin: 0px;
padding: 0px;
}
body, button, input, label, select, td, textarea {
font-family: Arial, Helvetica, tahoma,verdana,arial,sans-serif;
font-size: 12px;
}
body{
width: 100%;
position: relative;
background-color: #ffffff;
min-width: 1080px;
}
.homepageheader {
position: fixed;
height: 82px;
width: 100%;
min-width: 980px;

13
 border-bottom: 1px solid #8E9D8E;
margin: 0px;
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(199, 88, 126);
}
.loginButton .signinButton {
color: #FFFFFF;
background: #169E8F;
border: 1px solid #FFFFFF;
cursor: pointer;
display: inline-block;
font-weight: bold;
line-height: 15px;
padding: 12px 24px;
border-radius: 16px;
text-align: center;
text-decoration: none;
float: right;
margin: 20px 0px 0px 10px;
font-size: 17px;
}
.uiloginbutton:hover {
background-color: #24bfae;
}
#newsearch{
float:left;
padding:15px;
}
.srctextinput{
margin: 0px;
padding: 9px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
border:1px solid #0076a3; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
width: 335px;
}

14
.srcbutton {
margin: 0;
padding: 9px 5px;
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #169E8F;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.srcbutton:hover {
text-decoration: none;
background: #24bfae;
}
.pquantys {
margin: 0px;
padding: 9px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
border:1px solid #0076a3; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}

15
 SKELETON

Architecture and Flow of the Website.

16
 RESPONSIVE WEB DESIGN

@media screen and (max-width:1280px){

#subheader p{
margin-left:10px;
}
#subheader a{
margin-right:10px;
}
#search{
margin-left:20px;
}
}
@media screen and (max-width:1024px){
#logo{margin-top:-5px;}
#search{
width:500px;
margin-left:10px;
}
.search-area{
width:500px;
}
#user-menu {width:200px;}
#uder-menu li{width: 90px;}
}
@media screen and (max-width:768px){
#subheader a{
font-size: 15px;
margin-left: 15px;
}
#logo{
width: 130px;
margin-top:0px;
#ist{
font-size: 25px;
}
#iist{
font-size: 20px;
}
#search{
width: 350px;
}
.search-area{
width:350px;
height:40px;

17
 }
.search-btn{height:40px;}
#user-menu{margin-top: 15px;}
}
@media screen and (max-width:480px){
#subheader p{
display: none;
}
#subheader{
padding-bottom: 10px;
}
}
@mediascreen and (max-width:360px){
#subheader a{
font-size:12px;
}
#logo{width:70px;}
#ist{font-size: 15px;}
#iist{font-size: 12px;}
#search{width: 100px;}
.search-area{
width:170px;
height:30px;
}
.search-btn{
height: 25px;
font-size: 10px;
width: 60px;
margin-left:-60px;
}
#user-menu{
width:100px;
margin-top: 10px;
}
#user-menu li{
font-size: 15px;
width: 70px;
margin-left: 30px;
margin-top: 0px;
}
}

18
 PHP

connect.php:
<?php
mysql_connect("localhost","root","") or die("Couldn't connet to SQL server");
mysql_select_db("ebuybd") or die("Couldn'ttt select DB");
?>
Index.php:

<?php include ( "inc/connect.php" ); ?>

<?php
ob_start();
session_start();
if (!isset($_SESSION['user_login'])) {
$user = "";
} else {
$user = $_SESSION['user_login'];
$result = mysql_query("SELECT * FROM user WHERE id='$user'");
$get_user_email = mysql_fetch_assoc($result);
$uname_db = $get_user_email['firstName'];}
?>
<!DOCTYPE html>
<html>
<head>
<title>Welcome to ebuy online shop</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="/js/homeslideshow.js"></script>
</head>
<body style="min-width: 980px;">
<div class="homepageheader" style="position: relative;">
<div class="signinButton loginButton">
<div class="uiloginbutton signinButton loginButton" style="margin-right: 40px;">
<?php
if ($user!="") {
echo '<a style="text-decoration: none; color: #fff;" href="logout.php">LOG OUT</a>';
}
else {
echo '<a style="color: #fff; text-decoration: none;" href="signin.php">SIGN IN</a>';
}?>
</div>
<div class="uiloginbutton signinButton loginButton" style="">
<?php
if ($user!="") {

19
 echo '<a style="text-decoration: none; color: #fff;"
href="profile.php?uid='.$user.'">Hi '.$uname_db.'</a>';
}
else {
echo '<a style="text-decoration: none; color: #fff;" href="login.php">LOG IN</a>';
}?>
</div>
</div>
<div style="float: left; margin: 5px 0px 0px 23px;">
<a href="index.php">
<img style=" height: 75px; width: 130px;" src="image/ebuybdlogo.png">
</a>
</div>
<div class="">
<div id="srcheader">
<form id="newsearch" method="get" action="search.php">
<input type="text" class="srctextinput" name="keywords" size="21" maxlength="120"
placeholder="Search Here..."><input type="submit" value="search" class="srcbutton" >
</form>
<div class="srcclear"></div>
</div>
</div>
</div>
<div class="home-welcome">
<div class="home-welcome-text" style="background-image: url(image/homebackgrndimg.png);
height: 380px; ">
<h1 style="margin: 0px;">Welcome To eBuy</h1>
<h2>Largest Online Shopping In Bangladesh</h2>
</div>
</div>
<div class="home-prodlist">
<div>
<h3 style="text-align: center;">Products Category</h3>
</div>
<div style="padding: 20px 30px; width: 85%; margin: 0 auto;">
<ul style="float: left;">
<li style="float: left; padding: 25px;">
<div class="home-prodlist-img"><a href="women/saree.php">
<imgsrc="./image/product/saree/new-designer-fancy-look-attractive-saree-2-
original.jpg" class="home-prodlist-imgi">
</a>
</div>
</li>
</ul>
<ul style="float: left;">
<li style="float: left; padding: 25px;">

20
 <div class="home-prodlist-img"><a href="women/perfume.php">
</a>
</div>
</li>
</ul>
<ul style="float: left;">
<li style="float: left; padding: 25px;">
<div class="home-prodlist-img"><a href="women/hijab.php">
</div>
</li>
</ul>
<ul style="float: left;">
<li style="float: left; padding: 25px;">
<div class="home-prodlist-img"><a href="women/toilatry.php">
<img src="./image/product/beauty/toiletries.png" class="home-prodlist-imgi">
</a>
</div>
</li>
</ul>
<ul style="float: left;">
<li style="float: left; padding: 25px;">
<div class="home-prodlist-img">
<a href="women/footwear.php">
</div>
</li>
</ul>
<ul style="float: left;">
<li style="float: left; padding: 25px;">
<div class="home-prodlist-img"><a href="women/tshirt.php">
<img src="./image/product/saree/tshirts1.png" class="home-prodlist-imgi">
</a>
</div>
</li>
</ul>
<ul style="float: left;">
<li style="float: left; padding: 25px;">
<div class="home-prodlist-img"><a href="women/watch.php">
</div>
</li>
</ul>
<ul style="float: left;">
<li style="float: left; padding: 25px;">
<div class="home-prodlist-img"><a href="women/ornament.php"></div>
</li></ul></div></div>
</body>
</html>

21
 AJAX

function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "my_parse_file.php";
var fn = document.getElementById("first_name").value;
var ln = document.getElementById("last_name").value;
var vars = "firstname="+fn+"&lastname="+ln;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}

22
 SCREENSHOTS

Home Page:

Login Page:

23
Sign Up Page:

Customer Order Page:

24
 CONCLUSION

The Internet has become a major resource in modern business, thus electronic shopping has gained
significance not only from the entrepreneur’s but also from the customer’s point of view. For the
entrepreneur, electronic shopping generates new business opportunities and for the customer, it
makes comparative shopping possible.
In this project, the provided the user with an e-commerce website that can be used to buy products
online.

25