Table of Contents
- Introduction to Admin Dashboards
- Key Features of an Admin Dashboard
- Setting Up the Admin Panel Database Structure
- Building the Admin Dashboard Layout
- Implementing Authentication for Admin Panel
- Displaying Data on the Dashboard
- Conclusion
Introduction to Admin Dashboards
An admin dashboard is an essential part of any content management system (CMS) or e-commerce platform. It provides administrators with an easy-to-use interface to manage the website’s content, user interactions, and other crucial information. In this module, we will walk you through the process of creating a basic admin dashboard using PHP and MySQL.
The admin dashboard will include an authentication system to ensure that only authorized users can access it. Additionally, we will implement a simple data display section where admins can view product statistics, user activity, and order summaries.
Key Features of an Admin Dashboard
For our basic admin dashboard, we will include the following features:
- Login Authentication: Admins must log in to access the dashboard.
- User Interface: A simple and intuitive interface for the admin to view and manage key data.
- Data Display: The ability to view essential statistics such as the number of products, users, and orders.
- Product Management: The ability to add, edit, and delete products.
- User Management: The ability to view, edit, and delete user accounts.
- Order Management: A section to manage and track customer orders.
Setting Up the Admin Panel Database Structure
Before we begin building the dashboard, we need to have a user authentication system in place. The following SQL code will create two important tables:
- Users: To store admin login information.
- Products: For managing products in the e-commerce system.
-- Table for storing admin user information
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
role ENUM('admin', 'user') DEFAULT 'admin'
);
-- Table for storing product information
CREATE TABLE products (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
description TEXT,
price DECIMAL(10, 2) NOT NULL,
stock INT DEFAULT 0
);
In the users table, we store the admin’s username, password, and role. The products table is used to store the details of each product, including its name, description, price, and stock quantity.
Building the Admin Dashboard Layout
The admin dashboard layout will have a sidebar navigation menu to access various sections like Dashboard, Manage Products, Manage Users, and Manage Orders. Here’s a simple example of how we can structure the layout using HTML and CSS.
admin_dashboard.php
<?php
// Include session and authentication check
session_start();
if (!isset($_SESSION['admin_logged_in']) || $_SESSION['admin_logged_in'] !== true) {
header('Location: admin_login.php');
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
}
.sidebar {
width: 250px;
background-color: #333;
color: white;
padding-top: 20px;
position: fixed;
height: 100vh;
}
.sidebar a {
display: block;
color: white;
padding: 15px;
text-decoration: none;
font-size: 18px;
}
.sidebar a:hover {
background-color: #575757;
}
.content {
margin-left: 260px;
padding: 20px;
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar">
<h2>Admin Panel</h2>
<a href="admin_dashboard.php">Dashboard</a>
<a href="manage_products.php">Manage Products</a>
<a href="manage_users.php">Manage Users</a>
<a href="manage_orders.php">Manage Orders</a>
<a href="logout.php">Logout</a>
</div>
<div class="content">
<h1>Welcome to the Admin Dashboard</h1>
<p>Here, you can manage products, users, and orders.</p>
<!-- Display basic data -->
<div>
<h2>Dashboard Overview</h2>
<p>Total Products: <?php echo getProductCount(); ?></p>
<p>Total Users: <?php echo getUserCount(); ?></p>
<p>Total Orders: <?php echo getOrderCount(); ?></p>
</div>
</div>
</body>
</html>
<?php
// Function to get product count
function getProductCount() {
global $pdo;
$stmt = $pdo->query("SELECT COUNT(*) FROM products");
$count = $stmt->fetchColumn();
return $count;
}
// Function to get user count
function getUserCount() {
global $pdo;
$stmt = $pdo->query("SELECT COUNT(*) FROM users");
$count = $stmt->fetchColumn();
return $count;
}
// Function to get order count
function getOrderCount() {
global $pdo;
$stmt = $pdo->query("SELECT COUNT(*) FROM orders");
$count = $stmt->fetchColumn();
return $count;
}
?>
In this layout:
- The sidebar allows navigation between different sections of the admin panel.
- The content section contains basic dashboard statistics and will later show data on products, users, and orders.
Implementing Authentication for Admin Panel
To ensure that only authorized users can access the admin dashboard, we need to implement an authentication system.
admin_login.php
<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Authenticate user
$username = $_POST['username'];
$password = $_POST['password'];
global $pdo;
$stmt = $pdo->prepare("SELECT * FROM users WHERE username = ?");
$stmt->execute([$username]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);
if ($user && password_verify($password, $user['password'])) {
$_SESSION['admin_logged_in'] = true;
$_SESSION['user_id'] = $user['id'];
header('Location: admin_dashboard.php');
exit();
} else {
$error = "Invalid username or password.";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Login</title>
</head>
<body>
<h1>Admin Login</h1>
<form action="admin_login.php" method="POST">
<label for="username">Username</label>
<input type="text" name="username" required><br>
<label for="password">Password</label>
<input type="password" name="password" required><br>
<button type="submit">Login</button>
</form>
<?php if (isset($error)) { echo "<p>$error</p>"; } ?>
</body>
</html>
This login page checks if the provided username and password match the admin’s credentials stored in the database. If successful, the user is redirected to the dashboard.
Displaying Data on the Dashboard
In the dashboard, we are displaying basic statistics like the total number of products, users, and orders. You can expand this functionality by adding more advanced features, such as listing the latest orders or showing detailed product information.
You can also extend the admin dashboard by adding sections for product management, user management, and order tracking.
Conclusion
In this module, we created a basic admin dashboard with login authentication, a sidebar navigation system, and essential data like product, user, and order statistics. This dashboard serves as a foundation for managing e-commerce features in an admin panel.
You can expand the functionality of this dashboard by adding more complex features such as analytics, order management, user roles, and advanced product filtering options.
