CHAPTER 1

INTRODUCTION

E-Com is the Simple Shopping Solution. It is a full-featured website and shopping

cart system that bends over backwards to give you the flexibility you need to run your online
store. The basic concept of the application is to allow the customer to shop virtually using the
Internet and allow customers to buy the items and articles of their desire from the store. The
information pertaining to the products are stores on an RDBMS at the server side (store). The
details of the items are brought forward from the database for the customer view based on the
selection through the menu and the database of all the products are updated at the end of each
transaction. Browsing through the e-com website to see the items that are there in each
category of products. E-Com are similar to the e-shops currently available on the Web, with
the difference that the products are visualized as 3D objects in a virtual world. Although E-
Com do not require sophisticated VR technology, they should be very flexible, it should be
easy to add, remove and rearrange products and to add, change or remove functionality.

1
 CHAPTER 2

PROJECT DESCRIPTION

2.1 PROJECT DEFINITION:

The Internet has changed many aspects of our life and becomes one of the requirements for
our daily life, for being a transformation channel to the world of accessing to information. So, the user
can access information that are available on the Internet easily, and carry out different activities
through the use of Internet services like e-business, e-commerce, e-learning, e-governance activities
and etc. The possibilities of sharing and accessing information that is available on the Internet are
mostly contributing to the user’s social life and daily activities. Online services have become a viable
alternative for different actions like: online shopping, educations, meetings, and organizing businesses
etc. General 2D websites, containing width and height coordinates, currently used with most online
shopping facilities are considered interesting to the users and provide several market activities and
actions of selling, buying and advertising over the Internet. Due to the development of information
technology (IT) and Internet, Business activities could expand 2D web environments to be used in 3D
virtual world environments. Where 3D virtual worlds have the potential to revolutionize business and
bring significant implications and activates to business including opportunities for co-creation and
enhancing customer’s perceptions and value of a brand.

To define the problem, one should imagine a scenario in which a standard customer enters to
a supermarket. When a customer enters to a supermarket, he finds himself in a huge crowded
environment that has lots of rayon and messy number of products. Our team intends to solve this
problem which is making shopping easier for an ordinary customer by improving the interaction
between the customer and his environment. In other words, the real-world problem which this project
aims to handle is to collect information from the surrounding area without any effort by a standard
user, namely customer in a supermarket. The desired information to be collected is expected to consist
of desired products, and classifying the products in the form of virtual reality according to their costs
and different categories

2
 CHAPTER 3

SYSTEM REQUIREMENTS

3.1 HARDWARE REQUIREMENTS:

Item Web server Web server Combined Web Combined Web & Database
(minimal) (recommended) & Database Server (recommended)
Server (minimal)

Processor 1,6 GHz CPU 2 x 1,6 GHz CPU 2 x 1,6 GHz CPU 4 x 1,6 GHz CPU

RAM 1,75 GB RAM 3,5 GB RAM 3,5 GB RAM 7 GB RAM

3.2 SOFTWARE REQUIREMENTS:

3.2.1 FRONT END LANGUAGES:

HTML Hypertext Markup Language

CSS Cascading Style Sheets

JAVASCRIPT JavaScript is a high-level, dynamic, weakly

typed, prototype-based, multi-paradigm, and
interpreted programming language

3
3.2.2 BACK END LANGUAGES:

PHP PHP is a server-side scripting language

designed for web development but also used
as a general-purpose programming language

MYSQL MySQL is an open-source relational

database management system

4
 CHAPTER 4

ANALYSIS AND DESIGN

4.1 STUDY OF PROBLEM:

The current system is critical to set up online shops, customers to browse through the
shops, and a system administrator to approve and reject requests for new shops and maintain
lists of shop categories. The basic idea is that the customer can buy product from anywhere
during any time by using their card number and password provided to them. The database
will maintain the product details information. Customer can view their product details using
the card details. This system involves with two types of users.

 Customer
 Administrator

4.1.1 CUSTOMER ROLE:

The customer can login to the system. The customer can view the product details and
buy their product. The customer can just view the information whereas they could not make
changes in the database.

4.1.2 ADMINISTRATOR ROLE:

The administrator plays a vital role in the online shopping system. The administrator
controls the entire database. The report of the product is generated by the administrator itself.
The main role of the administrator is to safeguard the database and can add/delete the
products from the database.

5
4.2 FLOW DIAGRAM:

Fig 4.1.Flow chart

6
 CHAPTER 5

IMPLEMENTATION

5.1 SOURCE CODE:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="">

<meta name="author" content="">

<title>E-com</title>

<!-- Bootstrap core CSS -->

<link href="assets/css/bootstrap.css" rel="stylesheet">

<!-- Fontawesome core CSS -->

<link href="assets/css/font-awesome.min.css" rel="stylesheet" />

<!--GOOGLE FONT -->

<-link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'

type='text/css'>

<!--Slide Show Css -->

<link href="assets/ItemSlider/css/main-style.css" rel="stylesheet" />

<!-- custom CSS here -->

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

<link rel="stylesheet" type="text/css" href="css12.css">

</head>

7
<body>

<nav class="navbar navbar-default" role="navigation">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-

target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#"><strong>E</strong>com</a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav navbar-right">

<li><a href="#">Track Order</a></li>

<li><a href="login.php">Login</a></li>

<li><a href="register.php">Signup</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">24x7 Support

<b class="caret"></b></a>

8
 <ul class="dropdown-menu">

<li><a href="#"><strong>Call: Elavarasu </strong></a></li>

<li><a href="#"><strong>Mail: elavarasu.cs16@bitsathy.ac.in

</strong></a></li>

<li class="divider"></li>

<li><a href="#"><strong>Address: BIT</strong>

<div>

<br />

</div>

</a></li>

</ul>

</li>

</ul>

<form class="navbar-form navbar-right" role="search">

<div class="form-group">

<input type="text" placeholder="Enter Keyword Here ..." class="form-

control">

</div>

<button type="submit" class="btn btn-primary">Search</button>

</form>

</div>

<!-- /.navbar-collapse -->

</div>

9
 <!-- /.container-fluid -->

</nav>

<div class="container">

<div class="row">

<div class="col-md-9">

<div class="well well-lg offer-box text-center">

<marquee> <span class="glyphicon glyphicon-cog"></span>E-com Flash sale starts

soon... </marquee>

</div>

<div class="bg">

<div class="w3-content w3-section" style="max-width:2440px">

<img class="mySlides" src="2.jpeg" style="width:100%">

<img class="mySlides" src="51.jpg" style="width:100%">

<img class="mySlides" src="52.jpg" style="width:100%">

<a href="vr1.html"> <img class="mySlides" src="155.png" style="width:100%"></a>

</div>

</div>

<div class="main box-border">

<div id="mi-slider" class="mi-slider">

<ul>

10
 <li><a href="vr1.html">

<img src="assets/ItemSlider/images/21.jpg" alt="img01"><h4>iphone

x</h4>

</a></li>

<li><a href="#">

<img src="assets/ItemSlider/images/20.jpg" alt="img02"><h4>samsung

s9</h4>

</a></li>

<li><a href="vr.html">

<img src="assets/ItemSlider/images/22.png" alt="img03"><h4>iphone

6s</h4>

</a></li>

<li><a href="#">

<img src="assets/ItemSlider/images/23.png"
alt="img04"><h4>Samsung</h4>

</a></li>

</ul>

<ul>

<li><a href="#">

<img src="assets/ItemSlider/images/5.jpg" alt="img05"><h4>Belts</h4>

</a></li>

<li><a href="#">

<img src="assets/ItemSlider/images/6.jpg" alt="img06"><h4>Hats

&amp; Caps</h4>

</a></li>

11
 <li><a href="#">

<img src="assets/ItemSlider/images/7.jpg"
alt="img07"><h4>Sunglasses</h4>

</a></li>

<li><a href="#">

<img src="assets/ItemSlider/images/8.jpg"
alt="img08"><h4>Scarves</h4>

</a></li>

</ul>

<ul>

<li><a href="#">

<img src="assets/ItemSlider/images/9.jpg"
alt="img09"><h4>Casual</h4>

</a></li>

<li><a href="#">

<img src="assets/ItemSlider/images/10.jpg"
alt="img10"><h4>Luxury</h4>

</a></li>

<li><a href="#">

<img src="assets/ItemSlider/images/11.jpg"
alt="img11"><h4>Sport</h4>

</a></li>

</ul>

<ul>

<li><a href="#">

12
 <img src="assets/ItemSlider/images/12.jpg" alt="img12"><h4>Carry-
Ons</h4>

</a></li>

<li><a href="#">

<img src="assets/ItemSlider/images/13.jpg" alt="img13"><h4>Duffel

Bags</h4>

</a></li>

<li><a href="#">

<img src="assets/ItemSlider/images/14.jpg" alt="img14"><h4>Laptop

Bags</h4>

</a></li>

<li><a href="#">

<img src="assets/ItemSlider/images/15.jpg"
alt="img15"><h4>Briefcases</h4>

</a></li>

</ul>

<nav>

<a href="#">Phones</a>

<a href="#">Accessories</a>

<a href="#">Watches</a>

<a href="#">Bags</a>

</nav>

</div>

</div>

13
 <br />

</div>

<!-- /.col -->

<div class="col-md-3 text-center">

<div class=" col-md-12 col-sm-6 col-xs-6" >

<div class="offer-text">

30% off here

</div>

<div class="thumbnail product-box">

<img src="156.jpeg" alt="" />

<div class="caption">

<h3><a href="#">Moto X play </a></h3>

<p><a href="#"> </a></p>

</div>

</div>

</div>

<div class=" col-md-12 col-sm-6 col-xs-6">

<div class="offer-text2">

30% off here

</div>

<div class="thumbnail product-box">

<img src="157.jpg" alt="" />

<div class="caption">

14
 <h3><a href="#">Moto G4 plus </a></h3>

<p><a href="#"></a></p>

</div>

</div>

</div>

</div>

<!-- /.col -->

</div>

<!-- /.row -->

<div class="row">

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

<div>

<a href="#" class="list-group-item active">Electronics

</a>

<ul class="list-group">

<li class="list-group-item">Mobile

<span class="label label-primary pull-right"></span>

</li>

<li class="list-group-item">Computers

<span class="label label-success pull-right"></span>

</li>

<li class="list-group-item">Tablets

<span class="label label-danger pull-right"></span>

15
 </li>

<li class="list-group-item">Appliances

<span class="label label-info pull-right"></span>

</li>

<li class="list-group-item">Games & Entertainment

<span class="label label-success pull-right"></span>

</li>

</ul>

</div>

<!-- /.div -->

<div>

<a href="#" class="list-group-item active list-group-item-success">Clothing &

Wears

</a>

<ul class="list-group">

<li class="list-group-item">Men's Clothing

<span class="label label-danger pull-right"></span>

</li>

<li class="list-group-item">Women's Clothing

<span class="label label-success pull-right"></span>

</li>

<li class="list-group-item">Kid's Wear

<span class="label label-info pull-right"></span>

</li>

16
 </ul>

</div>

<!-- /.div -->

<div>

<a href="#" class="list-group-item active">Accessaries & Extras

</a>

<ul class="list-group">

<li class="list-group-item">Mobile Accessaries

<span class="label label-warning pull-right"></span>

</li>

<li class="list-group-item">Men's Accessaries

<span class="label label-success pull-right"></span>

</li>

<li class="list-group-item">Women's Accessaries

<span class="label label-info pull-right"></span>

</li>

<li class="list-group-item">Kid's Accessaries

<span class="label label-primary pull-right"></span>

</li>

<li class="list-group-item">Home Products

<span class="label label-danger pull-right"></span>

</li>

<li class="list-group-item">Kitchen Products

17
 <span class="label label-warning pull-right"></span>

</li>

</ul>

</div>

<!-- /.div -->

<div>

<ul class="list-group">

<li class="list-group-item list-group-item-success"><a href="#">New Offer's

Coming </a></li>

<li class="list-group-item list-group-item-info"><a href="#">New Products

Added</a></li>

<li class="list-group-item list-group-item-warning"><a href="#">Ending

Soon Offers</a></li>

<li class="list-group-item list-group-item-danger"><a href="#">Just Ended

Offers</a></li>

</ul>

</div>

<!-- /.div -->

<div class="well well-lg offer-box offer-colors">

<span class="glyphicon glyphicon-star-empty"></span>25 % off , GRAB IT

<br />

<br />

<div class="progress progress-striped">

<div class="progress-bar progress-bar-danger" role="progressbar" aria-

valuenow="70" aria-valuemin="0" aria-valuemax="100"

18
 style="width: 70%">

<span class="sr-only">70% Complete (success)</span>

2hr 35 mins left

</div>

</div>

<a href="#">click here to know more </a>

</div>

<!-- /.div -->

</div>

<!-- /.col -->

<div class="col-md-9">

<div>

<ol class="breadcrumb">

<li><a href="#">Home</a></li>

<li class="active">Electronics</li>

</ol>

</div>

<!--Footer -->

<div class="col-md-12 footer-box">

<div class="row small-box ">

<strong>Mobiles :</strong> <a href="#">samsung</a> | <a href="#">Sony</a> | <a

href="#">Microx</a> |

<a href="#">samsung</a> | <a href="#">Sony</a> | <a href="#">Microx</a> |<a

href="#">samsung</a> |

19
 <a href="#">Sony</a> | <a href="#">Microx</a> |<a href="#">samsung</a> | <a
href="#">Sony</a> |

<a href="#">Microx</a> |<a href="#">samsung</a> | <a href="#">Sony</a> | <a

href="#">Microx</a> |

<a href="#">samsung</a> | <a href="#">Sony</a> | <a href="#">Microx</a> |<a

href="#">samsung</a> |

<a href="#">Sony</a> | <a href="#">Microx</a> | view all items

</div>

<div class="row small-box ">

<strong>Laptops :</strong> <a href="#">samsung</a> | <a href="#">Sony</a> | <a

href="#">Microx Laptops</a> |

<a href="#">samsung</a> | <a href="#">Sony</a> | <a href="#">Microx</a> |<a

href="#">samsung</a> |

<a href="#">Sony Laptops</a> | <a href="#">Microx</a> |<a

href="#">samsung</a> | <a href="#">Sony</a> |

<a href="#">Microx</a> |<a href="#">samsung</a> | <a href="#">Sony</a> | <a

href="#">Microx</a> |

<a href="#">samsung</a> | <a href="#">Sony</a> | <a href="#">Microx</a> |<a

href="#">samsung</a> |

<a href="#">Sony</a> | <a href="#">Microx</a> | view all items

</div>

<div class="row small-box ">

<strong>Tablets : </strong><a href="#">samsung</a> | <a href="#">Sony

Tablets</a> | <a href="#">Microx</a> |

<a href="#">samsung </a>| <a href="#">Sony</a> | <a href="#">Microx</a> |<a

href="#">samsung</a> |

20
 <a href="#">Sony</a> | <a href="#">Microx</a> |<a href="#">samsung
Tablets</a> | <a href="#">Sony</a> |

<a href="#">Microx</a> |<a href="#">samsung Tablets</a> | <a href="#">Sony</a>

| <a href="#">Microx</a> |

<a href="#">samsung</a> | <a href="#">Sony</a> | <a href="#">Microx</a> |<a

href="#">samsung</a> |

<a href="#">Sony</a> | <a href="#">Microx Tablets</a> | view all items

</div>

<div class="row small-box pad-botom ">

<strong>Computers :</strong> <a href="#">samsung</a> | <a href="#">Sony</a> |

<a href="#">Microx</a> |

<a href="#">samsung Computers</a> | <a href="#">Sony</a> | <a

href="#">Microx</a> |<a href="#">samsung</a> |

<a href="#">Sony</a> | <a href="#">Microx</a> |<a href="#">samsung</a> | <a

href="#">Sony</a> |

<a href="#">Microx Computers</a> |<a href="#">samsung Computers</a> | <a

href="#">Sony</a> | <a href="#">Microx</a> |

<a href="#">samsung</a> | <a href="#">Sony</a> | <a href="#">Microx

Computers</a> |<a href="#">samsung</a> |

<a href="#">Sony</a> | <a href="#">Microx</a> | view all items

</div>

<div class="row">

<div class="col-md-4">

<strong>Send a Quick Query </strong>

<hr>

21
 <form>

<div class="row">

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

<div class="form-group">

<input type="text" class="form-control" required="required"

placeholder="Name">

</div>

</div>

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

<div class="form-group">

<input type="text" class="form-control" required="required"

placeholder="Email address">

</div>

</div>

</div>

<div class="row">

<div class="col-md-12 col-sm-12">

<div class="form-group">

<textarea name="message" id="message" required="required"

class="form-control" rows="3" placeholder="Message"></textarea>

</div>

<div class="form-group">

<button type="submit" class="btn btn-primary">Submit

Request</button>

</div>

22
 </div>

</div>

</form>

</div>

<div class="col-md-4">

<strong>Our Location</strong>

<hr>

<p>

<br />

<br />

Call: 9488910102 <br>

Email: parthiban.cs16@bitsathy.ac.in<br>

</p>

</div>

<div class="col-md-4 social-box">

<strong>We are Social </strong>

<hr>

<a href="https://www.facebook.com/search/top/?q=parthiban velumani"><i

class="fa fa-facebook-square fa-3x "></i></a>

<a href="https://twitter.com/parthi9893"><i class="fa fa-twitter-square fa-3x

"></i></a>

<a href="#"><i class="fa fa-google-plus-square fa-3x c"></i></a>

<a href="#"><i class="fa fa-linkedin-square fa-3x "></i></a>

<a href="#"><i class="fa fa-pinterest-square fa-3x "></i></a>

23
 <p>

</p>

</div>

</div>

<hr>

</div>

<!-- /.col -->

<div class="col-md-12 end-box ">

</div>

<!-- /.col -->

<!--Footer end -->

<!--Core JavaScript file -->

<script src="assets/js/jquery-1.10.2.js"></script>

<!--bootstrap JavaScript file -->

<script src="assets/js/bootstrap.js"></script>

<!--Slider JavaScript file -->

<script src="assets/ItemSlider/js/modernizr.custom.63321.js"></script>

<script src="assets/ItemSlider/js/jquery.catslider.js"></script>

<script>

var myIndex = 0;

carousel();

24
function carousel() {

var i;

var x = document.getElementsByClassName("mySlides");

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

myIndex++;

if (myIndex > x.length) {myIndex = 1}

x[myIndex-1].style.display = "block";

setTimeout(carousel, 2000); // Change image every 2 seconds

</script>

<script>

$(function () {

$('#mi-slider').catslider();

});

</script>

</body>

</html>

25
Register.php

<?php

session_start();

require 'database.php';

try{

if(isset($_SESSION["username"])){

header("Location:welcome.php");

}catch(ErrorException $e){

$_SESSION["username"]= '';

$message = " ";

if(isset($_POST['submit'])){

if (empty($_POST['email']) || empty($_POST['password'])){

$message = "Email or Password is Incorrect";

else{

$email = $_POST['email'];

$pass = $_POST['password'];

$username = $_POST['username'];

if($email&& $pass && $username){

26
$db = mysqli_select_db($conn,"auth");

$sqli ="INSERT INTO users(username,email,password)

VALUES('$username','$email','$pass')";

if (mysqli_query($conn,$sqli)) {

$message = "New record created successfully";

header("Location:login.php");

} else {

$message = "Cannot create user!";

else{

$message = "Must fill out all fields";

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Register Here</title>

<link rel="stylesheet" type="text/css" href="assets/style5.css">

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">

27
</head>

<body>

<script>

function valid()

var pass1 = document.getElementById('pass1');

var pass2 = document.getElementById('pass2');

var validation = document.getElementById('validation');

if(pass1.value!=pass2.value)

validation.innerHTML="Passwords do not match";

if(pass1.value==pass2.value)

validation.innerHTML = "Passwords match";

</script>

<div class="header">

<a href="/">E-com </a>

</div>

28
 <h1>Registration Page</h1>

<span>Already have an account! <a href="login.php"> Login here!

</a></span>

<form action="register.php" method="post">

<input type="text" name="username" placeholder="Username">

<input type="email" name="email" placeholder="Email address">

<input type="password" id="pass1" name="password"

placeholder="Password">

<input type="password" id="pass2" onkeyup="valid()" placeholder="Repeat

Password">

<input type="submit" name="submit" value="Register">

</form>

<p id="validation" style="color:white; font-size:20px;">.</p>

<span><?php echo $message; ?></span>

</body>

</html>

29
 CHAPTER 6
EXPERIMENTAL RESULTS
6.1 SCREENSHOTS:

FRONT PAGE

30
 LOGIN PAGE

REGISTER PAGE

31
VR PAGE

DATABASE

32
 CHAPTER 7
CONCLUSION:
In general, today’s businesses must always strive to create the next best thing that
consumers will want because consumers continue to desire their products, services etc. to
continuously be better, faster, and cheaper. In this world of new technology, businesses need
to accommodate to the new types of consumer needs and trends because it will prove to be
vital to their business’ success and survival. E-commerce is continuously progressing and is
becoming more and more important to businesses as technology continues to advance and is
something that should be taken advantage of and implemented.

33
REFERENCES:

1. Allan Afuah and Christopher L. Tucci, (2001) Internet Business Models and
Strategies, McGraw Hill-Irwin, 2001
2. Peter S. Cohan (2000) e-Profit: High Payoff Strategies for Capturing the E-
Commerce Edge, AMACOM, NY 2000
3. Richard Coyne (2001) Technoromanticism. Cambridge, Mass.: MIT Press, 2001
4. Rick E. Bruner, Bob Heyman and Leland Harden. (2001) Net Results.2: Best
Practices for Web Marketing. Indianapolis, Ind.: New Riders, 2001
5. Simson Garfinkel. 2001. Database Nation: The Death of Privacy in the 21st
Century. Sebastopol, Calif.: O'Reilly,

34