Admin Panel for an e-commerce site-Part1

Admin panel is the most important part of any website to manage all data of the site from one location. The first part of implementing admin panel for the e-commerce site that was shown in the previous five tutorials has been described in this tutorial step by step.

Steps:
01.Download the following zip file for the admin panel that contains the necessary css, js, and media files for the admin page. Unzip the file and copy the content into the admin folder.

admin.zip

02. Create includes folder inside the admin folder.
03. Create header.php inside the includes folder and add the following content.

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<i class="icon-reorder shaded"></i>
</a>

<a class="brand" href="index.html">
Online Furniture Shop
</a>

<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav pull-right">
<li><a href="#">
Admin
</a></li>
<li class="nav-user dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="images/user.png" class="nav-avatar" />
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="change-password.php">Change Password</a></li>
<li class="divider"></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->

04. Create sidebar.php inside the includes folder and add the following content.

<div class="span3">
<div class="sidebar">
<ul class="widget widget-menu unstyled">
<li>
<a class="collapsed" data-toggle="collapse" href="#togglePages">
<i class="menu-icon icon-cog"></i>
<i class="icon-chevron-down pull-right"></i><i class="icon-chevron-up pull-right"></i>
Order Management
</a>
<ul id="togglePages" class="collapse unstyled">
<li>
<a href="todays-orders.php">
<i class="icon-tasks"></i>
Today's Orders
<?php
$f1="00:00:00";
$from=date('Y-m-d')." ".$f1;
$t1="23:59:59";
$to=date('Y-m-d')." ".$t1;
$result = mysqli_query($con,"SELECT * FROM Orders where orderDate Between '$from' and '$to'");
$num_rows1 = mysqli_num_rows($result);
{
?>
<b class="label orange pull-right"><?php echo htmlentities($num_rows1); ?></b>
<?php } ?>
</a>
</li>
<li>
<a href="pending-orders.php">
<i class="icon-tasks"></i>
Pending Orders
<?php
$status='Delivered';
$ret = mysqli_query($con,"SELECT * FROM Orders where orderStatus!='$status' || orderStatus is null ");
$num = mysqli_num_rows($ret);
{?><b class="label orange pull-right"><?php echo htmlentities($num); ?></b>
<?php } ?>
</a>
</li>
<li>
<a href="delivered-orders.php">
<i class="icon-inbox"></i>
Delivered Orders
<?php
$status='Delivered';
$rt = mysqli_query($con,"SELECT * FROM Orders where orderStatus='$status'");
$num1 = mysqli_num_rows($rt);
{?><b class="label green pull-right"><?php echo htmlentities($num1); ?></b>
<?php } ?>

</a>
</li>
</ul>
</li>

<li>
<a href="manage-users.php">
<i class="menu-icon icon-group"></i>
Manage users
</a>
</li>
</ul>

<ul class="widget widget-menu unstyled">
<li><a href="category.php"><i class="menu-icon icon-tasks"></i> Create Category </a></li>
<li><a href="subcategory.php"><i class="menu-icon icon-tasks"></i>Sub Category </a></li>
<li><a href="insert-product.php"><i class="menu-icon icon-paste"></i>Insert Product </a></li>
<li><a href="manage-products.php"><i class="menu-icon icon-table"></i>Manage Products </a></li>

</ul><!--/.widget-nav-->

<ul class="widget widget-menu unstyled">
<li><a href="user-logs.php"><i class="menu-icon icon-tasks"></i>User Login Log </a></li>

<li>
<a href="logout.php">
<i class="menu-icon icon-signout"></i>
Logout
</a>
</li>
</ul>

</div><!--/.sidebar-->
</div><!--/.span3-->

05. Create footer.php inside the includes folder and add the following content.

<div class="footer">
<div class="container">
<center><b class="copyright">© 2022 Online Furniture Shop All rights reserved.</b></center>
</div>
</div>

06. Create index.php file inside the admin folder and add the following content.

<?php
session_start();
error_reporting(0);
$message="";
include("../includes/config.php");
if(isset($_POST['submit']))
{
	$username=$_POST['username'];
	$password=md5($_POST['password']);
	$ret=mysqli_query($con,"SELECT * FROM admin WHERE username='$username' and password='$password'");
	$num=mysqli_fetch_array($ret);
	if($num>0)
	{
		$extra="manage-products.php";
		$_SESSION['alogin']=$_POST['username'];
		$_SESSION['id']=$num['id'];
		$host=$_SERVER['HTTP_HOST'];
		$uri=rtrim(dirname($_SERVER['PHP_SELF']),'/\\');
		header("location:http://$host$uri/$extra");
		exit();
	}
	else
	{
		$message = 'Invalid username or password.';
	}
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Furniture Shop</title>
<link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link type="text/css" href="css/theme.css" rel="stylesheet">
<link type="text/css" href="images/icons/css/font-awesome.css" rel="stylesheet">
<link type="text/css" href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet'>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<i class="icon-reorder shaded"></i>
</a>
<a class="brand" href="index.html">
Admin login
</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav pull-right">
<li><a href="http://localhost/projects/PART6">
Home
</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<?php
if($message!="")
{
	echo "<center><div class='alert alert-success' role='alert'><h3>$message</h3></div><center>";
	$message="";
}
?>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="module module-login span4 offset4">
<form class="form-vertical" method="post">
<div class="module-head">
<h3>Sign In</h3>
</div>
<div class="module-body">
<div class="control-group">
<div class="controls row-fluid">
<input class="span12" type="text" id="inputEmail" name="username" placeholder="Username">
</div>
</div>
<div class="control-group">
<div class="controls row-fluid">
<input class="span12" type="password" id="inputPassword" name="password" placeholder="Password">
</div>
</div>
</div>
<div class="module-foot">
<div class="control-group">
<div class="controls clearfix">
<button type="submit" class="btn btn-primary pull-right" name="submit">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div><!--/.wrapper-->
<div class="footer">
<div class="container">
<center><b class="copyright">&copy; 2022 Online Furniture Shop </b> All rights reserved.</center>
</div>
</div>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</body>

07. Create manage-products.php file inside the admin folder and add the following content.

<?php
session_start();
include('../includes/config.php');
if(strlen($_SESSION['alogin'])==0)
{
	header('location:index.php');
}
else{
	date_default_timezone_set('Asia/Dhaka');// change according timezone
	$currentTime = date( 'd-m-Y h:i:s A', time () );
	if(isset($_GET['del']))
	{
		mysqli_query($con,"delete from products where id = '".$_GET['id']."'");
		$_SESSION['delmsg']="Product deleted !!";
	}

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin| Manage Products</title>
<link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link type="text/css" href="css/theme.css" rel="stylesheet">
<link type="text/css" href="images/icons/css/font-awesome.css" rel="stylesheet">
<link type="text/css" href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet'>
</head>
<body>

<?php include('includes/header.php');?>

<div class="wrapper">
<div class="container">
<div class="row">
<?php include('includes/sidebar.php');?>
<div class="span9">
<div class="content">
<div class="module">
<div class="module-head">
<h3>Manage Products</h3>
</div>

<div class="module-body table">
<?php if(isset($_GET['del']))
{?>
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> <?php echo htmlentities($_SESSION['delmsg']);?><?php echo htmlentities($_SESSION['delmsg']="");?>
</div>
<?php } ?>
<br />
<table cellpadding="0" cellspacing="0" border="0" class="datatable-1 table table-bordered table-striped display" width="100%">
<thead>
<tr>
<th>#</th>
<th>Product Name</th>
<th>Category </th>
<th>Subcategory</th>
<th>Company Name</th>
<th>Product Creation Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $query=mysqli_query($con,"select products.*,category.categoryName,subcategory.subcategory from products join category on category.id=products.category join subcategory on subcategory.id=products.subCategory");
$cnt=1;
while($row=mysqli_fetch_array($query))
{
?>
<tr>
<td><?php echo htmlentities($cnt);?></td>
<td><?php echo htmlentities($row['productName']);?></td>
<td><?php echo htmlentities($row['categoryName']);?></td>
<td> <?php echo htmlentities($row['subcategory']);?></td>
<td><?php echo htmlentities($row['productCompany']);?></td>
<td><?php echo htmlentities($row['postingDate']);?></td>
<td>
<a href="edit-products.php?id=<?php echo $row['id']?>" ><i class="icon-edit"></i></a>
<a href="manage-products.php?id=<?php echo $row['id']?>&del=delete" onClick="return confirm('Are you sure you want to delete?')"><i class="icon-remove-sign"></i></a></td>
</tr>
<?php $cnt=$cnt+1; } ?>
</table>
</div>
</div>
</div><!--/.content-->
</div><!--/.span9-->
</div>
</div><!--/.container-->
</div><!--/.wrapper-->
<?php include('includes/footer.php');?>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/flot/jquery.flot.js" type="text/javascript"></script>
<script src="scripts/datatables/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('.datatable-1').dataTable({
"pageLength": 5,
"lengthMenu": [5, 10, 20, 25, 50]
});
$('.dataTables_paginate').addClass("btn-group datatable-pagination");
$('.dataTables_paginate > a').wrapInner('<span />');
$('.dataTables_paginate > a:first-child').append('<i class="icon-chevron-left shaded"></i>');
$('.dataTables_paginate > a:last-child').append('<i class="icon-chevron-right shaded"></i>');
} );
</script>
</body>
<?php } ?>

08. Create manage-users.php file inside the admin folder and add the following content.

<?php
session_start();
include('../includes/config.php');
if(strlen($_SESSION['alogin'])==0)
{
	header('location:index.php');
}
else{
	date_default_timezone_set('Asia/Kolkata');// change according timezone
	$currentTime = date( 'd-m-Y h:i:s A', time () );
	if(isset($_GET['del']))
	{
		mysqli_query($con,"delete from products where id = '".$_GET['id']."'");
		$_SESSION['delmsg']="Product deleted !!";
	}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin| Manage Users</title>
<link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link type="text/css" href="css/theme.css" rel="stylesheet">
<link type="text/css" href="images/icons/css/font-awesome.css" rel="stylesheet">
<link type="text/css" href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet'>
</head>
<body>
<?php include('includes/header.php');?>
<div class="wrapper">
<div class="container">
<div class="row">
<?php include('includes/sidebar.php');?>
<div class="span9">
<div class="content">
<div class="module">
<div class="module-head">
<h3>Manage Users</h3>
</div>
<div class="module-body table">
<?php if(isset($_GET['del']))
{?>
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> <?php echo htmlentities($_SESSION['delmsg']);?><?php echo htmlentities($_SESSION['delmsg']="");?>
</div>
<?php } ?>
<br />
<table cellpadding="0" cellspacing="0" border="0" class="datatable-1 table table-bordered table-striped display" width="100%">
<thead>
<tr>
<th>#</th>
<th> Name</th>
<th>Email </th>
<th>Contact no</th>
<th>Shippping Address/City/State/Pincode </th>
<th>Billing Address/City/State/Pincode </th>
<th>Reg. Date </th>
</tr>
</thead>
<tbody>
<?php $query=mysqli_query($con,"select * from users");
$cnt=1;
while($row=mysqli_fetch_array($query))
{
?>
<tr>
<td><?php echo htmlentities($cnt);?></td>
<td><?php echo htmlentities($row['name']);?></td>
<td><?php echo htmlentities($row['email']);?></td>
<td> <?php echo htmlentities($row['contactno']);?></td>
<td><?php echo htmlentities($row['shippingAddress'].",".$row['shippingCity'].",".$row['shippingState']."-".$row['shippingPincode']);?></td>
<td><?php echo htmlentities($row['billingAddress'].",".$row['billingCity'].",".$row['billingState']."-".$row['billingPincode']);?></td>
<td><?php echo htmlentities($row['regDate']);?></td>
<?php $cnt=$cnt+1; } ?>
</table>
</div>
</div>
</div><!--/.content-->
</div><!--/.span9-->
</div>
</div><!--/.container-->
</div><!--/.wrapper-->
<?php include('includes/footer.php');?>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/flot/jquery.flot.js" type="text/javascript"></script>
<script src="scripts/datatables/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('.datatable-1').dataTable({
"pageLength": 5,
"lengthMenu": [5, 10, 20, 25, 50]
});
$('.dataTables_paginate').addClass("btn-group datatable-pagination");
$('.dataTables_paginate > a').wrapInner('<span />');
$('.dataTables_paginate > a:first-child').append('<i class="icon-chevron-left shaded"></i>');
$('.dataTables_paginate > a:last-child').append('<i class="icon-chevron-right shaded"></i>');
});

</script>
</body>
<?php } ?>

09. Create change-password.php file inside the admin folder and add the following content.


<?php
session_start();
include('../includes/config.php');
if(strlen($_SESSION['alogin'])==0){
	header('location:index.php');
}
else{
	date_default_timezone_set('Asia/Dhaka');
	$currentTime = date( 'd-m-Y h:i:s A', time () );
	if(isset($_POST['submit']))
	{
		$sql=mysqli_query($con,"SELECT password FROM admin where password='".md5($_POST['password'])."' && username='".$_SESSION['alogin']."'");
		$num=mysqli_fetch_array($sql);
		if($num>0)
		{
			$con=mysqli_query($con,"update admin set password='".md5($_POST['newpassword'])."', updationDate='$currentTime' where username='".$_SESSION['alogin']."'");
			$_SESSION['msg']="Password Changed Successfully !!";
		}
		else
		{
			$_SESSION['msg']="Old Password not match !!";
		}

	}

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin| Change Password</title>
<link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link type="text/css" href="css/theme.css" rel="stylesheet">
<link type="text/css" href="images/icons/css/font-awesome.css" rel="stylesheet">
<link type="text/css" href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet'>
<script type="text/javascript">
function valid()
{
	if(document.chngpwd.password.value=="")
	{
		alert("Current Password Filed is Empty !!");
		document.chngpwd.password.focus();
		return false;
	}
	else if(document.chngpwd.newpassword.value=="")
	{
		alert("New Password Filed is Empty !!");
		document.chngpwd.newpassword.focus();
		return false;
	}
	else if(document.chngpwd.confirmpassword.value=="")
	{
		alert("Confirm Password Filed is Empty !!");
		document.chngpwd.confirmpassword.focus();
		return false;
	}
	else if(document.chngpwd.newpassword.value!= document.chngpwd.confirmpassword.value)
	{
		alert("Password and Confirm Password Field do not match !!");
		document.chngpwd.confirmpassword.focus();
		return false;
	}
	return true;

}

</script>
</head>
<body>
<?php include('includes/header.php');?>
<div class="wrapper">
<div class="container">
<div class="row">
<?php include('includes/sidebar.php');?>
<div class="span9">
<div class="content">
<div class="module">
<div class="module-head">
<h3>Admin Change Password</h3>
</div>
<div class="module-body">
<?php if(isset($_POST['submit']))
{?>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<?php echo htmlentities($_SESSION['msg']);?><?php echo htmlentities($_SESSION['msg']="");?>
</div>
<?php } ?>
<br />
<form class="form-horizontal row-fluid" name="chngpwd" method="post" onSubmit="return valid();">
<div class="control-group">
<label class="control-label" for="basicinput">Current Password</label>
<div class="controls">
<input type="password" placeholder="Enter your current Password" name="password" class="span8 tip" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="basicinput">New Password</label>
<div class="controls">
<input type="password" placeholder="Enter your new current Password" name="newpassword" class="span8 tip" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="basicinput">Confirm Password</label>
<div class="controls">
<input type="password" placeholder="Enter your new Password again" name="confirmpassword" class="span8 tip" required>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" name="submit" class="btn">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div><!--/.content-->
</div><!--/.span9-->
</div>
</div><!--/.container-->
</div><!--/.wrapper-->
<?php include('includes/footer.php');?>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/flot/jquery.flot.js" type="text/javascript"></script>
</body>
<?php } ?>

09. Create logout.php file inside the admin folder and add the following content.

<?php
session_start();
$_SESSION['alogin']=="";
session_unset();
$_SESSION['errmsg']="You have successfully logout";
?>
<script language="javascript">
document.location="index.php";
</script>

10. Now, create an admin account and run the project from the browser.

Next Part–>

Attachments

  • zip admin
    File size: 13 MB Downloads: 32