E-commerce Site from the Scratch- Part1

This the first tutorial for creating a simple e-commerce site with all basic features from the scratch. In this tutorial, we will learn how to design the database, the structure of the files and folder, and the designing index page of a ecommerce site that will sell furniture online.

Step1:
Create a database named ‘ecommerce‘.

Step2:
Create the necessary tables by executing the following queries

CREATE TABLE `category` (
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY, 
`categoryName` varchar(255) DEFAULT NULL, 
`categoryDescription` longtext DEFAULT NULL,  `creationDate` timestamp NOT NULL DEFAULT current_timestamp(),  `updationDate` varchar(255) DEFAULT NULL);

CREATE TABLE `subcategory` (  
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,  
`categoryid` int(11) DEFAULT NULL,  
`subcategory` varchar(255) DEFAULT NULL,  
`creationDate` timestamp NULL DEFAULT current_timestamp(),  
`updationDate` varchar(255) DEFAULT NULL);

CREATE TABLE `products` (  
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,  
`category` int(11) NOT NULL,  
`subCategory` int(11) DEFAULT NULL,  
`productName` varchar(255) DEFAULT NULL,  
`productCompany` varchar(255) DEFAULT NULL,  
`productPrice` int(11) DEFAULT NULL,  
`productPriceBeforeDiscount` int(11) DEFAULT NULL,  
`productDescription` longtext DEFAULT NULL,  
`productImage` varchar(255) DEFAULT NULL,  
`shippingCharge` int(11) DEFAULT NULL,  
`productAvailability` varchar(255) DEFAULT NULL,  
`postingDate` timestamp NULL DEFAULT current_timestamp(),  
`updationDate` varchar(255) DEFAULT NULL);

CREATE TABLE `admin` (  
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,  
`username` varchar(255) NOT NULL,  
`password` varchar(255) NOT NULL,  
`creationDate` timestamp NOT NULL DEFAULT current_timestamp(),  
`updationDate` varchar(255) NOT NULL);

CREATE TABLE `users` (  
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,  
`name` varchar(255) DEFAULT NULL,  
`email` varchar(255) DEFAULT NULL,  
`contactno` bigint(11) DEFAULT NULL,  
`password` varchar(255) DEFAULT NULL,  
`shippingAddress` longtext DEFAULT NULL,  
`shippingState` varchar(255) DEFAULT NULL,  
`shippingCity` varchar(255) DEFAULT NULL,  
`shippingPincode` int(11) DEFAULT NULL,  
`billingAddress` longtext DEFAULT NULL,  
`billingState` varchar(255) DEFAULT NULL,  
`billingCity` varchar(255) DEFAULT NULL,  
`billingPincode` int(11) DEFAULT NULL,  
`regDate` timestamp NOT NULL DEFAULT current_timestamp(),  
`updationDate` varchar(255) DEFAULT NULL);

CREATE TABLE `orders` (  
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,  
`userId` int(11) DEFAULT NULL,  
`productId` varchar(255) DEFAULT NULL,  
`quantity` int(11) DEFAULT NULL,  
`orderDate` timestamp NOT NULL DEFAULT current_timestamp(),  
`paymentMethod` varchar(50) DEFAULT NULL,  
`orderStatus` varchar(55) DEFAULT NULL,   
CONSTRAINT fk_user FOREIGN KEY (userId)    
REFERENCES users(id)    
ON DELETE CASCADE ON UPDATE CASCADE);

CREATE TABLE `ordertrackhistory` (  
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,  
`orderId` int(11) DEFAULT NULL,  
`status` varchar(255) DEFAULT NULL,  
`remark` mediumtext DEFAULT NULL,  
`postingDate` timestamp NOT NULL DEFAULT current_timestamp(),   
CONSTRAINT fk_order FOREIGN KEY (orderId)    
REFERENCES orders(id)    
ON DELETE CASCADE ON UPDATE CASCADE);

CREATE TABLE `productreviews` (  
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,  
`productId` int(11) DEFAULT NULL,  
`quality` int(11) DEFAULT NULL,  
`price` int(11) DEFAULT NULL,  
`value` int(11) DEFAULT NULL,  
`name` varchar(255) DEFAULT NULL,  
`summary` varchar(255) DEFAULT NULL,  
`review` longtext DEFAULT NULL,  
`reviewDate` timestamp NOT NULL DEFAULT current_timestamp(),   
CONSTRAINT fk_product FOREIGN KEY (productId)    
REFERENCES products(id)    
ON DELETE CASCADE ON UPDATE CASCADE);

CREATE TABLE `userlog` (  
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,  
`userEmail` varchar(255) DEFAULT NULL,  
`userip` binary(16) DEFAULT NULL,  
`loginTime` timestamp NULL DEFAULT current_timestamp(),  
`logout` varchar(255) DEFAULT NULL,  
`status` int(11) DEFAULT NULL);

CREATE TABLE `wishlist` (  
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,  
`userId` int(11) DEFAULT NULL,  
`productId` int(11) DEFAULT NULL,  
`postingDate` timestamp NOT NULL DEFAULT current_timestamp());

Step3:

Create a project named ‘e-commerce-pro’ in the htdocs folder and create the following folders and files under the project folder.

e-commerce-pro
—admin
—assets
—brandsimage
—includes
——config.php
——top-header.php
——main-header.php
——menu-bar.php
——brands-slider.php
——footer.php
—index.php

Step4:
Download and unzip the assets.zip file and copy the content inside the assets folder.
assets.zip

Step5:
Download and unzip the brandsimage.zip file and copy the content inside the brandimage folder.

brandimage.zip

Step6:
Open the config.php file and add the following content to make the database connection with MySQL database.

<?php
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'ecommerce');
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);

if (mysqli_connect_errno())
{
	echo "Unable to connect with the database. " . mysqli_connect_error();
}
?>

>

Step7:
Open the top-header.php file and add the following content to make the database connection with MySQL database.

<div class="top-bar animate-dropdown">
<div class="container">
<div class="header-top-inner" style="font-size: 18px">
<div class="cnt-account">
<ul class="list-unstyled">

<?php if(strlen($_SESSION['login']))
{ ?>
<li><a href="#"><i class="icon fa fa-user"></i>Welcome -<?php echo htmlentities($_SESSION['username']);?></a></li>
<?php } ?>

<li><a href="my-account.php"><i class="icon fa fa-user"></i>My Account</a></li>
<li><a href="my-cart.php"><i class="icon fa fa-shopping-cart"></i>My Cart</a></li>
<li><a href="#"><i class="icon fa fa-key"></i>Checkout</a></li>
<li><a href="my-wishlist.php"><i class="icon fa fa-heart"></i>Wishlist</a></li>
<?php if(strlen($_SESSION['login'])==0)
{ ?>
<li><a href="login.php"><i class="icon fa fa-sign-in"></i>Register/Login</a></li>
<?php }
else{ ?>

<li><a href="logout.php"><i class="icon fa fa-sign-out"></i>Logout</a></li>
<?php } ?>
</ul>
</div><!-- /.cnt-account -->

<div class="cnt-block">
<form class="navbar-form navbar-left" name="search" method="post" action="search-result.php">
<div class="form-group">
<input type="text" class="form-control search-field" placeholder="Search" id="search" placeholder="Search here..." name="product" required="required">
</div>
<button type="submit" class="btn btn-primary" id="search_btn"><span class="glyphicon glyphicon-search"></span>
</button>
</form>

</div>

<div class="clearfix"></div>
</div>
</div>
</div>

Step8:
Open the main-header.php file and add the following content to make the database connection with MySQL database.

<?php
if(isset($_Get['action'])){
	if(!empty($_SESSION['cart'])){
		foreach($_POST['quantity'] as $key => $val){
			if($val==0){
				unset($_SESSION['cart'][$key]);
			}else{
				$_SESSION['cart'][$key]['quantity']=$val;
			}
		}
	}
}

?>
<div class="main-header">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="logo">
<a href="index.php">
<h2><div class="item">
<a href="index.php" class="image">
<img data-echo="brandsimage/logo.png" src="assets/images/blank.gif" alt="">
</a> </h2>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-9 animate-dropdown top-cart-row">
<?php
if(!empty($_SESSION['cart'])){
?>

<div class="dropdown dropdown-cart">
<a href="#" class="dropdown-toggle lnk-cart" data-toggle="dropdown">
<div class="items-cart-inner">
<div class="total-price-basket">
<span class="lbl">cart -</span>
<span class="total-price">
<span class="sign">TK.</span>
<span class="value"><?php echo $_SESSION['tp']; ?></span>
</span>
</div>

<div class="basket">
<i class="glyphicon glyphicon-shopping-cart"></i>
</div>
<div class="basket-item-count"><span class="count"><?php echo $_SESSION['qnty'];?></span></div>
</div>
</a>
<ul class="dropdown-menu">
<?php

$sql = "SELECT * FROM products WHERE id IN(";
foreach($_SESSION['cart'] as $id => $value){
$sql .=$id. ",";
}

$sql=substr($sql,0,-1) . ") ORDER BY id ASC";
$query = mysqli_query($con,$sql);
$totalprice=0;
$totalqunty=0;
if(!empty($query)){
while($row = mysqli_fetch_array($query)){
	$quantity=$_SESSION['cart'][$row['id']]['quantity'];
	$subtotal= $_SESSION['cart'][$row['id']]['quantity']*$row['productPrice']+$row['shippingCharge'];
	$totalprice += $subtotal;
	$_SESSION['qnty']=$totalqunty+=$quantity;
?>
<li>
<div class="cart-item product-summary">
<div class="row">
<div class="col-xs-4">
<div class="image">
<a href="detail.html"><img src="admin/productimages/<?php echo $row['productImage'];?>" width="35" height="50" alt=""></a>
</div>
</div>
<div class="col-xs-7">
<h3 class="name"><a href="index.php?page-detail"><?php echo $row['productName']; ?></a></h3>
<div class="price">Tk.<?php echo ($row['productPrice']+$row['shippingCharge']); ?>*<?php echo $_SESSION['cart'][$row['id']]['quantity']; ?></div>

</div>
</div>
</div><!-- /.cart-item -->
<?php } }?>
<div class="clearfix"></div>
<hr>
<div class="clearfix cart-total">
<div class="pull-right">
<span class="text">Total :</span><span class='price'>Tk.<?php echo $_SESSION['tp']="$totalprice". ".00"; ?></span>
</div>

<div class="clearfix"></div>
<a href="my-cart.php" class="btn btn-upper btn-primary btn-block m-t-20">My Cart</a>
</div><!-- /.cart-total-->
</li>
</ul><!-- /.dropdown-menu-->
</div><!-- /.dropdown-cart -->
<?php } else { ?>
<div class="dropdown dropdown-cart">
<a href="#" class="dropdown-toggle lnk-cart" data-toggle="dropdown">
<div class="items-cart-inner">
<div class="total-price-basket">
<span class="lbl">cart -</span>
<span class="total-price">
<span class="sign">TK.</span>
<span class="value">00.00</span>
</span>
</div>
<div class="basket">
<i class="glyphicon glyphicon-shopping-cart"></i>
</div>
<div class="basket-item-count"><span class="count">0</span></div>
</div>
</a>
<ul class="dropdown-menu">
<li>
<div class="cart-item product-summary">
<div class="row">
<div class="col-xs-12">
Your Shopping Cart is Empty.
</div>
</div>
</div><!-- /.cart-item -->
<hr>
<div class="clearfix cart-total">
<div class="clearfix"></div>
<a href="index.php" class="btn btn-upper btn-primary btn-block m-t-20">Continue Shooping</a>
</div><!-- /.cart-total-->
</li>
</ul><!-- /.dropdown-menu-->
</div>
<?php }?>
</div><!-- /.top-cart-row -->
</div>
</div><!-- /.row -->
</div>

Step9:

Open the menu-bar.php file and add the following content to make the database connection with MySQL database.

<div class="header-nav animate-dropdown" style="background: blue;">
<div class="container">
<div class=" navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="nav-bg-class" >
<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse">
<div class="nav-outer" >
<ul class="nav navbar-nav">
<li class="active dropdown ">
<a href="index.php" data-hover="dropdown" class="dropdown-toggle">Home</a>
</li>
<?php $sql=mysqli_query($con,"select id,categoryName from category limit 6");
while($row=mysqli_fetch_array($sql))
{
	?>
	<li class="dropdown yamm">
	<a href="category.php?cid=<?php echo $row['id'];?>"> <?php echo $row['categoryName'];?></a>
	</li>
	<?php } ?>

</ul><!-- /.navbar-nav -->
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Step10:
Open the brands-slider.php file and add the following content to make the database connection with MySQL database.

<div id="brands-carousel" class="logo-slider wow fadeInUp">
<h3 class="section-title">Our Brands</h3>
<div class="logo-slider-inner">
<div id="brand-slider" class="owl-carousel brand-slider custom-carousel owl-theme">
<div class="item">
<a href="#" class="image">
<img data-echo="brandsimage/brothers.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="brandsimage/hatil.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="brandsimage/navana.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="brandsimage/nadia.jpg" src="assets/images/blank.gif" alt="">
</a>
</div>
<div class="item">
<a href="#" class="image">
<img data-echo="brandsimage/noksha.jpg" src="assets/images/blank.gif" alt="">
</a>
</div>
<div class="item">
<a href="#" class="image">
<img data-echo="brandsimage/wood.jpg" src="assets/images/blank.gif" alt="">
</a>
</div>
<div class="item">
<a href="#" class="image">
<img data-echo="brandsimage/otobi.jpg" src="assets/images/blank.gif" alt="">
</a>
</div>
<div class="item">
<a href="#" class="image">
<img data-echo="brandsimage/hi-tech.jpg" src="assets/images/blank.gif" alt="">
</a>
</div>
<div class="item">
<a href="#" class="image">
<img data-echo="brandsimage/regel.jpg" src="assets/images/blank.gif" alt="">
</a>
</div>
</div><!-- /.owl-carousel #logo-slider -->
</div><!-- /.logo-slider-inner -->
</div><!-- /.logo-slider -->

Step11:
Open the footer.php file and add the following content to make the database connection with MySQL database.

<footer id="footer" >
<div class="links-social ">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">

<div class="contact-info">
<p class="about-us" style="color: white">Buy furniture online </a></p>
<div class="social-icons">
<a href="localhost/shopping/" class='active'><i class="icon fa fa-facebook"></i></a>
<a href="###"><i class="icon fa fa-twitter"></i></a>
<a href="##"><i class="icon fa fa-linkedin"></i></a>
</div><!-- /.social-icons -->
</div><!-- /.contact-info -->
</div><!-- /.col -->
<div class="col-xs-12 col-sm-6 col-md-6">

<div class="contact-information" style="color: white">
Contant No: +88019137863542
<br/>
Contact Hour: 10:00 AM- 9:00 PM
</div><!-- /.contact-timing -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.links-social -->
</footer>

Step12:

Create a PHP file named heading.php with the following script for implementing the Add to cart part.

<?php
session_start();
error_reporting(0);
include('includes/config.php');
if(isset($_GET['action']) && $_GET['action']=="add"){
$id=intval($_GET['id']);
if(isset($_SESSION['cart'][$id])){
$_SESSION['cart'][$id]['quantity']++;
 }else{
 $sql_p="SELECT * FROM products WHERE id={$id}";
 $query_p=mysqli_query($con,$sql_p);
 if(mysqli_num_rows($query_p)!=0){
 $row_p=mysqli_fetch_array($query_p);

 
 $_SESSION['cart'][$row_p['id']]=array("quantity" => 1, "price" => $row_p['productPrice']);
 header('location:index.php');
 }else{
 $message="Product ID is invalid";}
 }
 }
?>

Step13:

Create a head.php file with the following content that will contain the HTML script of the beginning of the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="MediaCenter, Template, eCommerce">
<meta name="robots" content="all">
<title><?php echo $title; ?></title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Customizable CSS -->
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/green.css">
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<link rel="stylesheet" href="assets/css/owl.transitions.css">
<link href="assets/css/lightbox.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/rateit.css">
<link rel="stylesheet" href="assets/css/bootstrap-select.min.css">
<link rel="stylesheet" href="assets/css/config.css">
<link href="assets/css/green.css" rel="alternate stylesheet" title="Green color">
<link href="assets/css/blue.css" rel="alternate stylesheet" title="Blue color">
<link href="assets/css/red.css" rel="alternate stylesheet" title="Red color">
<link href="assets/css/orange.css" rel="alternate stylesheet" title="Orange color">
<link href="assets/css/dark-green.css" rel="alternate stylesheet" title="Darkgreen color">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet' type='text/css'>
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
</head>
<body class="cnt-home">
<header class="header-style-1">

Step14:

Create a foot.html file with the following content that will contain the HTML script at the end of the page.

<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/echo.min.js"></script>
<script src="assets/js/jquery.easing-1.3.min.js"></script>
<script src="assets/js/bootstrap-slider.min.js"></script>
<script src="assets/js/jquery.rateit.min.js"></script>
<script type="text/javascript" src="assets/js/lightbox.min.js"></script>
<script src="assets/js/bootstrap-select.min.js">
</script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="switchstylesheet/switchstylesheet.js"></script>

</body>
</html>

Step15:

Open the index.php file and add the following content.

<?php
include ("heading.php");
include ("head.php");
include('includes/top-header.php');
include('includes/main-header.php');
include('includes/menu-bar.php');
?>
</header>
<div class="body-content outer-top-xs" id="top-banner-and-menu">
<div class="container">
<div class="furniture-container homepage-container">
<div class="row">
<div class="col-xs-12 col-sm-12 homebanner-holder">
<div id="hero" class="homepage-slider3">
<div id="owl-main" class="owl-carousel owl-inner-nav owl-ui-sm">
<div class="full-width-slider">     
<div class="item" style="background-image: url(assets/images/sliders/slider1.png);">
<!-- /.container-fluid -->
</div><!-- /.item -->
</div><!-- /.full-width-slider -->
<div class="full-width-slider">
<div class="item full-width-slider" style="background-image: url(assets/images/sliders/slider2.png);">
</div><!-- /.item -->
</div><!-- /.full-width-slider -->
<div class="full-width-slider">
<div class="item full-width-slider" style="background-image: url(assets/images/sliders/slider3.png);">
</div><!-- /.item -->
</div><!-- /.full-width-slider -->
<div class="full-width-slider">
<div class="item full-width-slider" style="background-image: url(assets/images/sliders/slider4.png);">
</div><!-- /.item -->
</div><!-- /.full-width-slider -->
</div><!-- /.owl-carousel -->
</div>
</div><!-- /.homebanner-holder -->
</div><!-- /.row -->

<div id="product-tabs-slider" class="scroll-tabs inner-bottom-vs  wow fadeInUp">

<div class="more-info-tab clearfix">
<h3 class="new-product-title pull-left">Latest items</h3>
</div>
<div class="tab-content outer-top-xs">
<div class="tab-pane in active" id="all">
<div class="product-slider">
<div class="owl-carousel home-owl-carousel custom-carousel owl-theme" data-item="4">
<?php
$ret=mysqli_query($con,"select * from products order by id desc limit 5");
while ($row=mysqli_fetch_array($ret)){
?>

<div class="item item-carousel">
<div class="products">
<div class="product">

<div class="product-image">
<div class="image">
<a href="product-details.php?pid=<?php echo htmlentities($row['id']);?>">
<img  src="admin/productimages/<?php echo htmlentities($row['productImage']);?>" data-echo="admin/productimages/<?php echo htmlentities($row['productImage']);?>"  width="180" height="300" alt=""></a>
</div><!-- /.image -->
</div><!-- /.product-image -->
<div class="product-info text-left">

<h3 class="name"><a href="product-details.php?pid=<?php echo htmlentities($row['id']);?>"><?php echo htmlentities($row['productName']);?></a></h3>
<div class="rating rateit-small"></div>
<div class="description"></div>
<div class="product-price">
<span class="price">
Rs.<?php echo htmlentities($row['productPrice']);?>
</span>
<span class="price-before-discount">Tk.<?php echo htmlentities($row['productPriceBeforeDiscount']);?>
</span>
</div><!-- /.product-price -->
</div><!-- /.product-info -->
<div class="action"><a href="index.php?page=product&action=add&id=<?php echo $row['id']; ?>" class="lnk btn btn-primary">Add to Cart</a></div>
</div><!-- /.product -->
</div><!-- /.products -->
</div><!-- /.item -->
<?php } ?>
</div><!-- /.home-owl-carousel -->
</div><!-- /.product-slider -->
</div>
</div>
</div>
<?php include('includes/brands-slider.php');?>
</div>
</div>

<?php 
include('includes/footer.php');
include ("foot.html")
?>

Next tutorial–>

The steps of this tutorial has been shown in the following video link.