E-commerce site from the scratch-part2

You have to complete the part-1 of e-commerce tutorial from the scratch before starting this tutorial. In this tutorial, we will learn the way of adding product related data and displaying the data with the image.

Step-1:

Insert some categories in the category table. Run the following Insert queries to add three categories values.

INSERT INTO `category` (`id`, `categoryName`, `categoryDescription`, `creationDate`, `updationDate`) VALUES
(NULL, 'Bed', 'Bed of different sizes.', current_timestamp(), NULL),
(NULL, 'Sofa', 'Sofa of different shapes.', current_timestamp(), NULL), (NULL, 'Almira', 'Almira of different sizes.', current_timestamp(), NULL), (NULL, 'Table', 'Different types of tables', current_timestamp(), NULL);

Step-2:

Insert some records in the subcategory table. Run the following Insert queries to add eight records.

INSERT INTO `subcategory` (`id`, `categoryid`, `subcategory`, `creationDate`, `updationDate`) VALUES (NULL, '1', 'Single Bed', current_timestamp(), NULL),
(NULL, '1', 'Double Bed', current_timestamp(), NULL),
(NULL, '2', 'Single Sofa', current_timestamp(), NULL),
(NULL, '2', 'Three-seated Sofa', current_timestamp(), NULL),
(NULL, '3', 'Single Almira', current_timestamp(), NULL),
(NULL, '3', 'Two door Almira', current_timestamp(), NULL),
(NULL, '4', 'Reading table', current_timestamp(), NULL),
(NULL, '4', 'Dressing table', current_timestamp(), NULL);

Step-3:

Insert some records in the products table. Run the following Insert queries to add six records.

INSERT INTO `products` (`id`, `category`, `subCategory`, `productName`, `productCompany`, `productPrice`, `productPriceBeforeDiscount`, `productDescription`,`productImage`, `shippingCharge`, `productAvailability`, `postingDate`, `updationDate`) VALUES
(NULL, '1', '1', 'Simple Single Bed', 'Hatil', '16000', '18000', NULL, 'b3.jpg', '300', 'In Stock', current_timestamp(), NULL),
(NULL, '1', '2', 'Double Bed', 'Otobi', '32000', '35000', NULL, 'b4.jpg', '400', 'In Stock', current_timestamp(), NULL),
(NULL, '2', '3', 'Single Sofa', NULL, '8000', '10000', NULL, 's1.jpg', '200', 'In Stock', current_timestamp(), NULL),
(NULL, '3', '5', 'Single Almira', 'Brothers', '17000', '18000', NULL, 'a4.jpg', '250', 'In Stock', current_timestamp(), NULL),
(NULL, '3', '6', 'Three door almira', 'Navana', '45000', '50000', NULL, 'a1.jpg', '300', 'In Stock', current_timestamp(), NULL),
(NULL, '4', '8', 'Classic Dressing table', 'Nadia', '15000', '15000', NULL, 'd4.jpg', '200', 'In Stock', current_timestamp(), NULL);

Step-4:

Create a folder named productimages inside the admin folder.

Step-5:

Download and unzip the following file and add the content inside the productimages folder.

productimages.zip

Step-6:

Add the related image file in the productImage column of the products table to display the image on the front page.

Step-7:

Open the product-details.php file inside the project folder and add the first part of this page.

<?php

include ("heading.php");
$pid=intval($_GET['pid']);
if(isset($_GET['pid']) && $_GET['action']=="wishlist" ){
if(strlen($_SESSION['login'])==0)
{
header('location:login.php');
}
else
{
mysqli_query($con,"insert into wishlist(userId,productId) values('".$_SESSION['id']."','$pid')");
echo "<script>alert('Product aaded in wishlist');</script>";
header('location:my-wishlist.php');
}
}
if(isset($_POST['submit']))
{
$qty=$_POST['quality'];
$price=$_POST['price'];
$value=$_POST['value'];
$name=$_POST['name'];
$summary=$_POST['summary'];
$review=$_POST['review'];

mysqli_query($con,"insert into productreviews(productId,quality,price,value,name,summary,review) values('$pid','$qty','$price','$value','$name','$summary','$review')");
}

?>

Step-8:

Add the second part of this page.

<?php $title="Product details"; ?>
<?php include("head.php"); ?>
<?php include('includes/top-header.php');?>
<?php include('includes/main-header.php');?>
<?php include('includes/menu-bar.php');?>
</header>

Step 9:

Add the third part of this page.

<div class="breadcrumb">
<div class="container">
<div class="breadcrumb-inner">
<?php

$ret=mysqli_query($con,"select category.categoryName as catname,subCategory.subcategory as subcatname,products.productName as pname from products join category on category.id=products.category join subcategory on subcategory.id=products.subCategory where products.id='$pid'");

while ($rw=mysqli_fetch_array($ret)) {

?>
<ul class="list-inline list-unstyled">
<li><a href="index.php">Home</a></li>
<li><?php echo htmlentities($rw['catname']);?></a></li>
<li><?php echo htmlentities($rw['subcatname']);?></li>
<li class='active'><?php echo htmlentities($rw['pname']);?></li>
</ul>
<?php }?>
</div><!-- /.breadcrumb-inner -->
</div><!-- /.container -->
</div><!-- /.breadcrumb -->

<div class="body-content outer-top-xs">
<div class='container'>
<div class='row single-product outer-bottom-sm '>
<div>
<div class="sidebar-module-container">
</div>
</div>
<?php

$ret=mysqli_query($con,"select * from products where id='$pid'");

while($row=mysqli_fetch_array($ret))
{
?>
<div class='col-md-9'>
<div class="row wow fadeInUp">
<div class="col-xs-12 col-sm-6 col-md-5 gallery-holder">
<div class="product-item-holder size-big single-product-gallery small-gallery">
<div id="owl-single-product">
<div class="single-product-gallery-item" id="slide1">
<a data-lightbox="image-1" data-title="<?php echo htmlentities($row['productName']);?>" href="admin/productimages/<?php echo htmlentities($row['productImage']);?>">
<img class="img-responsive" alt="" src="assets/images/blank.gif" data-echo="admin/productimages/<?php echo htmlentities($row['productImage']);?>" width="370" height="350" />
</a>
</div>
<div class="single-product-gallery-item" id="slide1">
<a data-lightbox="image-1" data-title="<?php echo htmlentities($row['productName']);?>" href="admin/productimages/<?php echo htmlentities($row['productImage']);?>">
<img class="img-responsive" alt="" src="assets/images/blank.gif" data-echo="admin/productimages/<?php echo htmlentities($row['productImage']);?>" width="370" height="350" />
</a>
</div>
</div>
<div class="single-product-gallery-thumbs gallery-thumbs">
<div id="owl-single-product-thumbnails">
<div class="item">
<a class="horizontal-thumb active" data-target="#owl-single-product" data-slide="1" href="#slide1">
<img class="img-responsive" alt="" src="assets/images/blank.gif" data-echo="admin/productimages/<?php echo htmlentities($row['productImage']);?>" />
</a>
</div>
</div>
</div>
</div>
</div>

<div class='col-sm-6 col-md-7 product-info-block'>
<div class="product-info">
<h1 class="name"><?php echo htmlentities($row['productName']);?></h1>
<?php $rt=mysqli_query($con,"select * from productreviews where productId='$pid'");
$num=mysqli_num_rows($rt);
{
?>
<div class="rating-reviews m-t-20">
<div class="row">
<div class="col-sm-3">
<div class="rating rateit-small"></div>
</div>
<div class="col-sm-8">
<div class="reviews">
<a href="#" class="lnk">(<?php echo htmlentities($num);?> Reviews)</a>
</div>
</div>
</div>
</div>
<?php } ?>
<div class="stock-container info-container m-t-10">
<div class="row">
<div class="col-sm-3">
<div class="stock-box">
<span class="label">Availability :</span>
</div>
</div>
<div class="col-sm-9">
<div class="stock-box">
<span class="value"><?php echo htmlentities($row['productAvailability']);?></span>
</div>
</div>
</div>
</div>

Step-10:

Add the fourth part of this page.

<div class="stock-container info-container m-t-10">
<div class="row">
<div class="col-sm-3">
<div class="stock-box">
<span class="label">Product Brand :</span>
</div>
</div>
<div class="col-sm-9">
<div class="stock-box">
<span class="value"><?php echo htmlentities($row['productCompany']);?></span>
</div>
</div>
</div>
</div>
<div class="stock-container info-container m-t-10">
<div class="row">
<div class="col-sm-3">
<div class="stock-box">
<span class="label">Shipping Charge :</span>
</div>
</div>
<div class="col-sm-9">
<div class="stock-box">
<span class="value">
<?php if($row['shippingCharge']==0)
{
echo "Free";
}
else
{
echo htmlentities($row['shippingCharge']);
}

?></span>
</div>
</div>
</div><!-- /.row -->
</div>
<div class="price-container info-container m-t-20">
<div class="row">
<div class="col-sm-6">
<div class="price-box">
<span class="price">Tk. <?php echo htmlentities($row['productPrice']);?></span>
<span class="price-strike">Rs.<?php echo htmlentities($row['productPriceBeforeDiscount']);?></span>
</div>
</div>

<div class="col-sm-6">
<div class="favorite-button m-t-10">
<a class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Wishlist" href="product-details.php?pid=<?php echo htmlentities($row['id'])?>&&action=wishlist">
<i class="fa fa-heart"></i>
</a>
</a>
</div>
</div>
</div>
</div>

Step-11:

Add the fifth part of this page.

<div class="quantity-container info-container">
<div class="row">
<div class="col-sm-2">
<span class="label">Qty :</span>
</div>
<div class="col-sm-2">
<div class="cart-quantity">
<div class="quant-input">
<div class="arrows">
<div class="arrow plus gradient"><span class="ir"><i class="icon fa fa-sort-asc"></i></span></div>
<div class="arrow minus gradient"><span class="ir"><i class="icon fa fa-sort-desc"></i></span></div>
</div>
<input type="text" value="1">
</div>
</div>
</div>
<div class="col-sm-7">
<a href="product-details.php?page=product&action=add&id=<?php echo $row['id']; ?>" class="btn btn-primary"><i class="fa fa-shopping-cart inner-right-vs"></i> ADD TO CART</a>
</div>
</div>
</div>
<div class="product-social-link m-t-20 text-right">
<span class="social-label">Share :</span>
<div class="social-icons">
<ul class="list-inline">
<li><a class="fa fa-facebook" href="http://facebook.com/transvelo"></a></li>
<li><a class="fa fa-twitter" href="#"></a></li>
<li><a class="fa fa-linkedin" href="#"></a></li>
<li><a class="fa fa-rss" href="#"></a></li>
<li><a class="fa fa-pinterest" href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product-tabs inner-bottom-xs wow fadeInUp">
<div class="row">
<div class="col-sm-3">
<ul id="product-tabs" class="nav nav-tabs nav-tab-cell">
<li class="active"><a data-toggle="tab" href="#description">DESCRIPTION</a></li>
<li><a data-toggle="tab" href="#review">REVIEW</a></li>
</ul><!-- /.nav-tabs #product-tabs -->
</div>
<div class="col-sm-9">
<div class="tab-content">
<div id="description" class="tab-pane in active">
<div class="product-tab">
<p class="text"><?php echo $row['productDescription'];?></p>
</div>
</div>
<div id="review" class="tab-pane">
<div class="product-tab">
<div class="product-reviews">
<h4 class="title">Customer Reviews</h4>
<?php $qry=mysqli_query($con,"select * from productreviews where productId='$pid'");
while($rvw=mysqli_fetch_array($qry))
{
?>
<div class="reviews" style="border: solid 1px #000; padding-left: 2% ">
<div class="review">
<div class="review-title"><span class="summary"><?php echo htmlentities($rvw['summary']);?></span><span class="date"><i class="fa fa-calendar"></i><span><?php echo htmlentities($rvw['reviewDate']);?></span></span></div>
<div class="text">"<?php echo htmlentities($rvw['review']);?>"</div>
<div class="text"><b>Quality :</b> <?php echo htmlentities($rvw['quality']);?> Star</div>
<div class="text"><b>Price :</b> <?php echo htmlentities($rvw['price']);?> Star</div>
<div class="text"><b>value :</b> <?php echo htmlentities($rvw['value']);?> Star</div>
<div class="author m-t-15"><i class="fa fa-pencil-square-o"></i> <span class="name">
<?php echo htmlentities($rvw['name']);?></span></div>
</div>
</div>
<?php } ?>
</div>
<form role="form" class="cnt-form" name="review" method="post">
<div class="product-add-review">
<h4 class="title">Write your own review</h4>
<div class="review-table">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="cell-label">&nbsp;</th>
<th>1 star</th>
<th>2 stars</th>
<th>3 stars</th>
<th>4 stars</th>
<th>5 stars</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell-label">Quality</td>
<td><input type="radio" name="quality" class="radio" value="1"></td>
<td><input type="radio" name="quality" class="radio" value="2"></td>
<td><input type="radio" name="quality" class="radio" value="3"></td>
<td><input type="radio" name="quality" class="radio" value="4"></td>
<td><input type="radio" name="quality" class="radio" value="5"></td>
</tr>
<tr>
<td class="cell-label">Price</td>
<td><input type="radio" name="price" class="radio" value="1"></td>
<td><input type="radio" name="price" class="radio" value="2"></td>
<td><input type="radio" name="price" class="radio" value="3"></td>
<td><input type="radio" name="price" class="radio" value="4"></td>
<td><input type="radio" name="price" class="radio" value="5"></td>
</tr>
<tr>
<td class="cell-label">Value</td>
<td><input type="radio" name="value" class="radio" value="1"></td>
<td><input type="radio" name="value" class="radio" value="2"></td>
<td><input type="radio" name="value" class="radio" value="3"></td>
<td><input type="radio" name="value" class="radio" value="4"></td>
<td><input type="radio" name="value" class="radio" value="5"></td>
</tr>
</tbody>
</table>
</div>
</div>

Step-12:

Add the sixth part of this page.

<div class="review-form">
<div class="form-container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputName">Your Name <span class="astk">*</span></label>
<input type="text" class="form-control txt" id="exampleInputName" placeholder="" name="name" required="required">
</div><!-- /.form-group -->
<div class="form-group">
<label for="exampleInputSummary">Summary <span class="astk">*</span></label>
<input type="text" class="form-control txt" id="exampleInputSummary" placeholder="" name="summary" required="required">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputReview">Review <span class="astk">*</span></label>
<textarea class="form-control txt txt-review" id="exampleInputReview" rows="4" placeholder="" name="review" required="required"></textarea>
</div>
</div>
</div>
<div class="action text-right">
<button name="submit" class="btn btn-primary btn-upper">SUBMIT REVIEW</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Step-13:

Add the seventh part of this page.

<?php $cid=$row['category'];
$subcid=$row['subCategory']; } ?>
<section class="section featured-product wow fadeInUp">
<h3 class="section-title">Realted Products </h3>
<div class="owl-carousel home-owl-carousel upsell-product custom-carousel owl-theme outer-top-xs">
<?php

$qry=mysqli_query($con,"select * from products where subCategory='$subcid' and category='$cid'");
while($rw=mysqli_fetch_array($qry))
{
?>
<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($rw['id']);?>"><img src="assets/images/blank.gif" data-echo="admin/productimages/<?php echo htmlentities($rw['productImage']);?>" width="150" height="240" alt=""></a>
</div>
</div>
<div class="product-info text-left">
<h3 class="name"><a href="product-details.php?pid=<?php echo htmlentities($rw['id']);?>"><?php echo htmlentities($rw['productName']);?></a></h3>
<div class="rating rateit-small"></div>
<div class="description"></div>
<div class="product-price">
<span class="price">Tk.<?php echo htmlentities($rw['productPrice']);?></span>
<span class="price-before-discount">Tk. <?php echo htmlentities($rw['productPriceBeforeDiscount']);?></span>
</div>
</div>
<div class="cart clearfix animate-effect">
<div class="action">
<ul class="list-unstyled">
<li class="add-cart-button btn-group">
<button class="btn btn-primary icon" data-toggle="dropdown" type="button">
<i class="fa fa-shopping-cart"></i>
</button>
<a href="product-details.php?page=product&action=add&id=<?php echo $rw['id']; ?>" class="lnk btn btn-primary">Add to cart</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<?php } ?>

</div>
</section>
</div>
<div class="clearfix"></div>
</div>
<?php include('includes/brands-slider.php');?>
</div>
</div>
<?php 
include('includes/footer.php');
include('foot.html');
?>

<script>
$(document).ready(function(){
$(".changecolor").switchstylesheet( { seperator:"color"} );
$('.show-theme-options').click(function(){
$(this).parent().toggleClass('open');
return false;
});
});
$(window).bind("load", function() {
$('.show-theme-options').delay(2000).trigger('click');
});
</script>
</body>
</html>

Step-14:

Now, check the site from the browser.

Next tutorial–>