The way to implementing checkout options of the e-commerce site have been shown in this tutorial. You have to complete the part1, part2, part3 and part4 of this project before starting this tutorial.
Step-1:
Create addresses.php file inside the project folder and add the following content. Check that addresses.php file is set in location of the header() function inside my-cart.php file.
<?php
session_start();
error_reporting(0);
$message="";
include('includes/config.php');
if(strlen($_SESSION['login'])==0)
{
header('location:index.php');
}
else{
if(isset($_POST['update']))
{
$baddress=$_POST['billingaddress'];
$bstate=$_POST['bilingstate'];
$bcity=$_POST['billingcity'];
$bpincode=$_POST['billingpincode'];
$query=mysqli_query($con,"update users set billingAddress='$baddress',billingState='$bstate',billingCity='$bcity',billingPincode='$bpincode' where id='".$_SESSION['id']."'");
if($query)
{
$message='Billing Address has been updated.';
}
}
if(isset($_POST['shipupdate']))
{
$saddress=$_POST['shippingaddress'];
$sstate=$_POST['shippingstate'];
$scity=$_POST['shippingcity'];
$spincode=$_POST['shippingpincode'];
$query=mysqli_query($con,"update users set shippingAddress='$saddress',shippingState='$sstate',shippingCity='$scity',shippingPincode='$spincode' where id='".$_SESSION['id']."'");
if($query)
{
$message='Shipping Address has been updated.';
}
}
$title="My Account";
include('head.php');
?>
<?php include('includes/top-header.php');?>
<?php include('includes/main-header.php');?>
<?php include('includes/menu-bar.php');?>
</header>
<div class="breadcrumb">
<div class="container">
<div class="breadcrumb-inner">
<ul class="list-inline list-unstyled">
<li><a href="#">Home</a></li>
<li class='active'>Checkout</li>
</ul>
</div><!-- /.breadcrumb-inner -->
</div><!-- /.container -->
</div><!-- /.breadcrumb -->
<?php
if($message!="")
{
echo "<center><div class='alert alert-success' role='alert'><h3>$message</h3></div><center>";
$message="";
}
?>
<div class="body-content outer-top-bd">
<div class="container">
<div class="checkout-box inner-bottom-sm">
<div class="row">
<div class="col-md-8">
<div class="panel-group checkout-steps" id="accordion">
<!-- checkout-step-01 -->
<div class="panel panel-default checkout-step-01">
<div class="panel-heading">
<h4 class="unicase-checkout-title">
<a data-toggle="collapse" class="" data-parent="#accordion" href="#collapseOne">
<span>1</span>Billing Address
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-md-12 col-sm-12 already-registered-login">
<?php
$query=mysqli_query($con,"select * from users where id='".$_SESSION['id']."'");
while($row=mysqli_fetch_array($query))
{
?>
<form class="register-form" role="form" method="post">
<div class="form-group">
<label class="info-title" for="Billing Address">Billing Address<span>*</span></label>
<textarea class="form-control unicase-form-control text-input" " name="billingaddress" required="required"><?php echo $row['billingAddress'];?></textarea>
</div>
<div class="form-group">
<label class="info-title" for="Billing State ">Billing State <span>*</span></label>
<input type="text" class="form-control unicase-form-control text-input" id="bilingstate" name="bilingstate" value="<?php echo $row['billingState'];?>" required>
</div>
<div class="form-group">
<label class="info-title" for="Billing City">Billing City <span>*</span></label>
<input type="text" class="form-control unicase-form-control text-input" id="billingcity" name="billingcity" required="required" value="<?php echo $row['billingCity'];?>" >
</div>
<div class="form-group">
<label class="info-title" for="Billing Pincode">Billing Pincode <span>*</span></label>
<input type="text" class="form-control unicase-form-control text-input" id="billingpincode" name="billingpincode" required="required" value="<?php echo $row['billingPincode'];?>" >
</div>
<button type="submit" name="update" class="btn-upper btn btn-primary checkout-page-button">Update</button>
</form>
<?php } ?>
</div>
</div>
</div>
</div><!-- row -->
</div>
<div class="panel panel-default checkout-step-02">
<div class="panel-heading">
<h4 class="unicase-checkout-title">
<a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapseTwo">
<span>2</span>Shipping Address
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<?php
$query=mysqli_query($con,"select * from users where id='".$_SESSION['id']."'");
while($row=mysqli_fetch_array($query))
{
?>
<form class="register-form" role="form" method="post">
<div class="form-group">
<label class="info-title" for="Shipping Address">Shipping Address<span>*</span></label>
<textarea class="form-control unicase-form-control text-input" " name="shippingaddress" required="required"><?php echo $row['shippingAddress'];?></textarea>
</div>
<div class="form-group">
<label class="info-title" for="Billing State ">Shipping State <span>*</span></label>
<input type="text" class="form-control unicase-form-control text-input" id="shippingstate" name="shippingstate" value="<?php echo $row['shippingState'];?>" required>
</div>
<div class="form-group">
<label class="info-title" for="Billing City">Shipping City <span>*</span></label>
<input type="text" class="form-control unicase-form-control text-input" id="shippingcity" name="shippingcity" required="required" value="<?php echo $row['shippingCity'];?>" >
</div>
<div class="form-group">
<label class="info-title" for="Billing Pincode">Shipping Pincode <span>*</span></label>
<input type="text" class="form-control unicase-form-control text-input" id="shippingpincode" name="shippingpincode" required="required" value="<?php echo $row['shippingPincode'];?>" >
</div>
<button type="submit" name="shipupdate" class="btn-upper btn btn-primary checkout-page-button">Update</button>
</form>
<?php } ?>
</div>
</div>
</div>
</div><!-- /.checkout-steps -->
</div>
<?php include('includes/myaccount-sidebar.php');?>
</div><!-- /.row -->
</div><!-- /.checkout-box -->
<?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>
<?php } ?>
Step-2:
Create pending-orders.php file inside the project folder and add the following content.
<?php
session_start();
error_reporting(0);
include('includes/config.php');
if(strlen($_SESSION['login'])==0)
{
header('location:login.php');
}
else{
if (isset($_GET['id'])) {
mysqli_query($con,"delete from orders where userId='".$_SESSION['id']."' and paymentMethod is null and id='".$_GET['id']."' ");
}
$title="Pending Order History";
include('head.php');
?>
<?php include('includes/top-header.php');?>
<?php include('includes/main-header.php');?>
<?php include('includes/menu-bar.php');?>
</header>
<div class="breadcrumb">
<div class="container">
<div class="breadcrumb-inner">
<ul class="list-inline list-unstyled">
<li><a href="#">Home</a></li>
<li class='active'>Shopping Cart</li>
</ul>
</div><!-- /.breadcrumb-inner -->
</div><!-- /.container -->
</div><!-- /.breadcrumb -->
<div class="body-content outer-top-xs">
<div class="container">
<div class="row inner-bottom-sm">
<div class="shopping-cart">
<div class="col-md-12 col-sm-12 shopping-cart-table ">
<div class="table-responsive">
<form name="cart" method="post">
<table class="table table-bordered">
<thead>
<tr>
<th class="cart-romove item">#</th>
<th class="cart-description item">Image</th>
<th class="cart-product-name item">Product Name</th>
<th class="cart-qty item">Quantity</th>
<th class="cart-sub-total item">Price Per unit</th>
<th class="cart-sub-total item">Shiping Charge</th>
<th class="cart-total">Grandtotal</th>
<th class="cart-total item">Payment Method</th>
<th class="cart-description item">Order Date</th>
<th class="cart-total last-item">Action</th>
</tr>
</thead><!-- /thead -->
<tbody>
<?php $query=mysqli_query($con,"select products.productImage as pimg1,products.productName as pname,products.id as c,orders.productId as opid,orders.quantity as qty,products.productPrice as pprice,products.shippingCharge as shippingcharge,orders.paymentMethod as paym,orders.orderDate as odate,orders.id as oid from orders join products on orders.productId=products.id where orders.userId='".$_SESSION['id']."' and orders.paymentMethod is null");
$cnt=1;
$num=mysqli_num_rows($query);
if($num>0)
{
while($row=mysqli_fetch_array($query))
{
?>
<tr>
<td><?php echo $cnt;?></td>
<td class="cart-image">
<a class="entry-thumbnail" href="detail.html">
<img src="admin/productimages/<?php echo $row['proid'];?>/<?php echo $row['pimg1'];?>" alt="" width="84" height="146">
</a>
</td>
<td class="cart-product-name-info">
<h4 class='cart-product-description'><a href="product-details.php?pid=<?php echo $row['opid'];?>">
<?php echo $row['pname'];?></a></h4>
</td>
<td class="cart-product-quantity">
<?php echo $qty=$row['qty']; ?>
</td>
<td class="cart-product-sub-total"><?php echo $price=$row['pprice']; ?> </td>
<td class="cart-product-sub-total"><?php echo $shippcharge=$row['shippingcharge']; ?> </td>
<td class="cart-product-grand-total"><?php echo (($qty*$price)+$shippcharge);?></td>
<td class="cart-product-sub-total"><?php echo $row['paym']; ?> </td>
<td class="cart-product-sub-total"><?php echo $row['odate']; ?> </td>
<td><a href="pending-orders.php?id=<?php echo $row['oid']; ?> ">Delete</td>
</tr>
<?php $cnt=$cnt+1;} ?>
<tr>
<td colspan="9"><div class="cart-checkout-btn pull-right">
<button type="submit" name="ordersubmit" class="btn btn-primary"><a href="payment-method.php">PROCCED To Payment</a></button>
</div></td>
</tr>
<?php } else {?>
<tr>
<td colspan="10" align="center"><h4>No Result Found</h4></td>
</tr>
<?php } ?>
</tbody><!-- /tbody -->
</table><!-- /table -->
</div>
</div>
</div><!-- /.shopping-cart -->
</div> <!-- /.row -->
</form>
<?php echo include('includes/brands-slider.php');?>
</div><!-- /.container -->
</div><!-- /.body-content -->
<?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>
</html>
<?php } ?>Step-3.
Create payment-method.php file inside the project folder and add the following content.
<?php
session_start();
error_reporting(0);
include('includes/config.php');
if(strlen($_SESSION['login'])==0)
{
header('location:login.php');
}
else{
if (isset($_POST['submit'])) {
mysqli_query($con,"update orders set paymentMethod='".$_POST['paymethod']."' where userId='".$_SESSION['id']."' and paymentMethod is null ");
unset($_SESSION['cart']);
header('location:order-history.php');
}
$title="Payment Method";
include('head.php');
?>
<?php include('includes/top-header.php');?>
<?php include('includes/main-header.php');?>
<?php include('includes/menu-bar.php');?>
</header>
<div class="breadcrumb">
<div class="container">
<div class="breadcrumb-inner">
<ul class="list-inline list-unstyled">
<li><a href="home.html">Home</a></li>
<li class='active'>Payment Method</li>
</ul>
</div><!-- /.breadcrumb-inner -->
</div><!-- /.container -->
</div><!-- /.breadcrumb -->
<div class="body-content outer-top-bd">
<div class="container">
<div class="checkout-box faq-page inner-bottom-sm">
<div class="row">
<div class="col-md-12">
<h2>Choose Payment Method</h2>
<div class="panel-group checkout-steps" id="accordion">
<div class="panel panel-default checkout-step-01">
<div class="panel-heading">
<h4 class="unicase-checkout-title">
<a data-toggle="collapse" class="" data-parent="#accordion" href="#collapseOne">
Select your Payment Method
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<form name="payment" method="post">
<input type="radio" name="paymethod" value="COD" checked="checked"> COD
<input type="radio" name="paymethod" value="Internet Banking"> Internet Banking
<input type="radio" name="paymethod" value="Debit / Credit card"> Debit / Credit card <br /><br />
<input type="submit" value="submit" name="submit" class="btn btn-primary">
</form>
</div>
</div><!-- row -->
</div>
</div><!-- /.checkout-steps -->
</div>
</div><!-- /.row -->
</div><!-- /.checkout-box -->
<?php echo include('includes/brands-slider.php');?>
</div><!-- /.container -->
</div><!-- /.body-content -->
<?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>
<?php } ?>Step-4:
Create order-history.php file inside the project folder and add the following content.
<?php
session_start();
error_reporting(0);
include('includes/config.php');
if(strlen($_SESSION['login'])==0)
{
header('location:login.php');
}
else{
$title="Order History";
include('head.php');
?>
<?php include('includes/top-header.php');?>
<?php include('includes/main-header.php');?>
<?php include('includes/menu-bar.php');?>
</header>
<div class="breadcrumb">
<div class="container">
<div class="breadcrumb-inner">
<ul class="list-inline list-unstyled">
<li><a href="#">Home</a></li>
<li class='active'>Shopping Cart</li>
</ul>
</div><!-- /.breadcrumb-inner -->
</div><!-- /.container -->
</div><!-- /.breadcrumb -->
<div class="body-content outer-top-xs">
<div class="container">
<div class="row inner-bottom-sm">
<div class="shopping-cart">
<div class="col-md-12 col-sm-12 shopping-cart-table ">
<div class="table-responsive">
<form name="cart" method="post">
<table class="table table-bordered">
<thead>
<tr>
<th class="cart-romove item">#</th>
<th class="cart-description item">Image</th>
<th class="cart-product-name item">Product Name</th>
<th class="cart-qty item">Quantity</th>
<th class="cart-sub-total item">Price Per unit</th>
<th class="cart-sub-total item">Shipping Charge</th>
<th class="cart-total item">Grandtotal</th>
<th class="cart-total item">Payment Method</th>
<th class="cart-description item">Order Date</th>
<th class="cart-total last-item">Action</th>
</tr>
</thead><!-- /thead -->
<tbody>
<?php $query=mysqli_query($con,"select products.productImage as pimg1,products.productName as pname,products.id as proid,orders.productId as opid,orders.quantity as qty,products.productPrice as pprice,products.shippingCharge as shippingcharge,orders.paymentMethod as paym,orders.orderDate as odate,orders.id as orderid from orders join products on orders.productId=products.id where orders.userId='".$_SESSION['id']."' and orders.paymentMethod is not null");
$cnt=1;
while($row=mysqli_fetch_array($query))
{
?>
<tr>
<td><?php echo $cnt;?></td>
<td class="cart-image">
<a class="entry-thumbnail" href="detail.html">
<img src="admin/productimages/<?php echo $row['pimg1'];?>" alt="" width="84" height="146">
</a>
</td>
<td class="cart-product-name-info">
<h4 class='cart-product-description'><a href="product-details.php?pid=<?php echo $row['opid'];?>">
<?php echo $row['pname'];?></a></h4>
</td>
<td class="cart-product-quantity">
<?php echo $qty=$row['qty']; ?>
</td>
<td class="cart-product-sub-total"><?php echo $price=$row['pprice']; ?> </td>
<td class="cart-product-sub-total"><?php echo $shippcharge=$row['shippingcharge']; ?> </td>
<td class="cart-product-grand-total"><?php echo (($qty*$price)+$shippcharge);?></td>
<td class="cart-product-sub-total"><?php echo $row['paym']; ?> </td>
<td class="cart-product-sub-total"><?php echo $row['odate']; ?> </td>
<td>
<a href="javascript:void(0);" onClick="popUpWindow('track-order.php?oid=<?php echo htmlentities($row['orderid']);?>');" title="Track order">Track</td></tr>
<?php $cnt=$cnt+1;} ?>
</tbody><!-- /tbody -->
</table><!-- /table -->
</div>
</div>
</div><!-- /.shopping-cart -->
</div> <!-- /.row -->
</form>
<?php echo include('includes/brands-slider.php');?>
</div><!-- /.container -->
</div><!-- /.body-content -->
<?php
include('includes/footer.php');
include ("foot.html");
?>
<script language="javascript" type="text/javascript">
var popUpWin=0;
function popUpWindow(URLStr, left, top, width, height)
{
if(popUpWin)
{
if(!popUpWin.closed) popUpWin.close();
}
popUpWin = open(URLStr,'popUpWin', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width='+600+',height='+600+',left='+left+', top='+top+',screenX='+left+',screenY='+top+'');
}
$(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>
<?php } ?>Step-5:
Create myaccount-sidebar.php file inside the includes folder of the project folder and add the following content.
<div class="col-md-4">
<!-- checkout-progress-sidebar -->
<div class="checkout-progress-sidebar ">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="unicase-checkout-title">Your Checkout Progress</h4>
</div>
<div class="panel-body">
<ul class="nav nav-checkout-progress list-unstyled">
<li><a href="my-account.php">My Account</a></li>
<li><a href="addresses.php">Shipping / Billing Address</a></li>
<li><a href="order-history.php">Order History</a></li>
<li><a href="pending-orders.php">Payment Pending Order</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>Step-6:
Now, check the Checkout options from the browser.