PHP admin dashboard provides a user-friendly interface for administrators to manage various aspects of their website or web application efficiently. It streamlines tasks and allows for better control and organization of content and settings.
Before getting started with this tutorial, You must follow the previous step creating an admin login
Previous Step – PHP Admin Login
This admin dashboard page is created with some basic requirements as given below such as the navigation menu, which typically consists of a navbar and a sidebar to help users navigate through various features and sections of the admin panel.
Navbar: The navbar is usually located at the top of the admin dashboard, containing essential information and navigation links. In your case, it contains:
- Website Name: This is the name or title of the website you are managing through the admin panel. It provides users with a quick reference to the website they are administrating.
- Admin Profile: This could be a dropdown or a link that, when clicked, opens a menu with options related to the admin’s profile. Common options might include changing the password, updating personal information, or logging out.
- Logout: This is a button or link that allows the admin user to log out of the admin dashboard, effectively ending their current session. Logging out is essential for security reasons and to protect sensitive information.
Sidebar: The sidebar is typically located on the left or right side of the admin dashboard and serves as a navigation menu for different sections or features of the admin panel. In your case, it contains several links:
- Dashboard: This link takes the user to the main dashboard page, which often provides an overview of key website statistics, recent activities, and other relevant information.
- Website Content: This section might contain links or options related to managing the content on your website, such as creating, editing, or deleting pages or posts.
- Category: This link might lead to a page where you can manage categories for your content. Categories help organize content into different groups or topics.
- Content: This link could provide access to content management, allowing you to create, edit, or delete individual pieces of content, such as articles or posts.
- Website Settings: This section is likely dedicated to configuring various aspects of your website. The options you mentioned include:
- Site Identity: Managing the site’s name, logo, and other identity-related settings.
- Site SEO: Configuring search engine optimization settings to improve the site’s visibility in search results.
- Site Menu: Setting up or modifying the main navigation menu of the website.
- Site Sub-menu: Managing sub-menu items or sub-navigation elements on the website.
- Admins: This link or section likely deals with managing user accounts with administrative privileges. You can create, edit, or delete admin accounts here.
- Admins Profile: This link might provide options for managing individual admin profiles, such as changing their roles or permissions, updating their personal information, and setting preferences.
Steps to Create Admin Dashboard in PHP
Now, You have to follow the below steps to create a dashboard page
Create Admin Navbar
Using this HTML code, you can create a navigation bar for a website. It includes a toggle button for small screens, displays the website name, and has a user dropdown menu on the right side when a user clicks their name. It’s styled using Bootstrap classes for responsiveness and appearance.
- <nav>: Defines the navigation bar.
- <button>: A button to toggle the navigation menu.
- <a>: Displays the website name.
- <ul>: Creates a list of navigation items, aligned to the right.
- <li>: List items with a dropdown menu.
- <a>: A clickable link that toggles the dropdown.
- <ul>: Dropdown menu container.
- <li>: Menu item for the user’s profile.
- <li>: Menu item for logging out.
Directory – admin/views/common/navbar.php
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Website Name</a>
<!-- right nav--->
<ul class="navbar-nav justify-content-end">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">John</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</li>
</ul>
<!-- right nav--->
</div>
</nav>Create Admin Sidebar
This code provides the basic structure for a left sidebar navigation menu commonly found in admin panels, with expandable and collapsible sub-menus and icons for visual representation.
It is often implemented using CSS and JavaScript to create an interactive and user-friendly navigation experience.
Directory – admin/views/common/left-sidebar.php
<div class="left-sidebar bg-light">
<h3>Admin Panel</h3>
<ul class="nav flex-column collapsible">
<!--- Dashboard--->
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link">
<i class="fa fa-home"></i> Dashboard
</a>
</li>
<!--- Website content--->
<li class="nav-item toggle">
<a class="nav-link" href="#"><i class="fa fa-laptop"></i> Website Content</a>
<ul class="nav flex-column toggle-list">
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link">
<i class="fa fa-list"></i> Category
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link">
<i class="fa fa-newspaper-o"></i> Content
</a>
</li>
</ul>
</li>
<!--- Website Settings--->
<li class="nav-item toggle">
<a class="nav-link" href="#"><i class="fa fa-cog"></i> Website Settings</a>
<ul class="nav flex-column toggle-list">
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link">
<i class="fa fa-vcard-o"></i> Site Identity
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link">
<i class="fa fa-search"></i> Site SEO
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link">
<i class='fa fa-list-ul'></i> Site Menu
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link">
<i class='fa fa-list-alt'></i> Site Sub-menu
</a>
</li>
</ul>
</li>
<!--- Admins--->
<li class="nav-item toggle">
<a class="nav-link" href="#"><i class="fa fa-users"></i> Admins</a>
<ul class="nav flex-column toggle-list">
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link">
<i class="fa fa-address-card-o"></i> Admins Profile
</a>
</li>
</ul>
</li>
<!--- list item--->
<li class="nav-item toggle">
<a class="nav-link" href="#"><i class="fa fa-copy"></i> List Item-1</a>
<ul class="nav flex-column toggle-list">
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link">
<i class="fa fa-plus-square-o"></i> List Item-1.1
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link">
<i class="fa fa-plus-square-o"></i> List Item-1.2
</a>
</li>
</ul>
</li>
</ul>
</div>Explanation
- <div class=”left-sidebar bg-light”>: A container with a light background for the left sidebar.
- <h3>Admin Panel</h3>: A heading indicating the admin panel’s title.
- <ul class=”nav flex-column collapsible”>: An unordered list for vertical navigation.
- <li class=”nav-item”>: List items for individual navigation links.
- <a href=”javascript:void(0)” class=”nav-link”>: Anchor tags for clickable links.
- <i class=”fa fa-home”></i>: Icons from Font Awesome for visual representation.
- Text content: Labels for each navigation item.
- <li class=”nav-item toggle”>: List items with sub-menus.
- <ul class=”nav flex-column toggle-list”>: Nested lists for sub-menus.
- Sub-menu items: Additional list items within sub-menus, using icons and text.
- Font Awesome icons: Icons for visual representation alongside text.
- Nested structure: The code creates a hierarchy with an expandable sub-menus in a left sidebar navigation menu.
Create Dashboard Content
This HTML template includes PHP code to dynamically insert various parts of the web page, such as the sidebar, navigation bar, and dashboard content. It also links to external resources for styling and interactivity. The specific content of the included PHP files, like left-sidebar.php, navbar.php, intro.php, and support.php, would determine the actual content and functionality of this admin panel page.
Directory – admin/dashboard.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>PHP Admin Panel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../public/css/dashboard.css">
<link rel="stylesheet" href="../public/css/common.css">
</head>
<body>
<style>
</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 sidebar-col">
<!-----left sidebar---->
<?php
require_once('common/left-sidebar.php');
?>
<!-----left sidebar ---->
</div>
<div class="col-sm-9 dashboard-col">
<!--navbar -->
<?php
require_once('common/navbar.php');
?>
<!-- navbar -->
<!-----dashboard---->
<?php
require_once('dashboard/intro.php');
require_once('dashboard/support.php');
?>
<!-----dashboard ---->
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="../public/js/sidebar-list.js"></script>
</body>
</html>
Explanation –
- require_once(‘common/left-sidebar.php’);: This PHP code includes the content of the left-sidebar.php file in the web page. It’s used to insert the left sidebar content dynamically.
- require_once(‘common/navbar.php’);: Similarly, this PHP code includes the content of the navbar.php file, which is used for inserting the navigation bar at the top of the page.
- require_once(‘dashboard/intro.php’);: This code includes the content of the intro.php file, presumably used for displaying an introduction or main content in the dashboard area.
- require_once(‘dashboard/support.php’);: This code includes the content of the support.php file, which is likely used for displaying support-related content in the dashboard.
- <div class=”container-fluid”>: A container that holds the entire content.
- Inside the container, there are two main columns within a row:
- The first column (<div class=”col-sm-3 sidebar-col”>) is likely intended for a sidebar, and it includes PHP code for including a left sidebar.
- The second column (<div class=”col-sm-9 dashboard-col”>) is used for the main dashboard content and includes PHP code for the navigation bar and other dashboard-related content.<link>: External resource links for CSS styles. These links include Font Awesome icons and Bootstrap styles.
- <script>: Links to JavaScript resources, including Bootstrap and a custom script for the sidebar.
Design Admin Sidebar
Directory – admin/public/css/sidebar.css
ul.collapsible li.toggle > a::after {
content: "▶";
position: absolute;
right: 20px;
}
ul.collapsible li.toggle > a.active::after {
content: "▼";
}
ul.collapsible li.toggle {
position: relative;
}
ul.collapsible li.toggle ul {
display: none;
}
.left-sidebar{
height: 100vh;
padding: 5px 20px 20px 20px;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
width: 24.5%;
left: 0px;
top:0px;
bottom: 0px;
}
.left-sidebar h3{
font-weight: bold;
font-size: 25px;
text-align: center;
border-bottom: 1px solid lightgray;
padding-bottom: 5px;
color: #3e3939;
}
.sidebar-col{
padding-right: 0px;
}
.dashboard-col{
padding-left: 0px;
}
.toggle-list{
position: relative;
left: 22px;
}
.left-sidebar .nav-link{
color: #198754;
}
@media only screen and (max-width: 600px) {
.left-sidebar {
width: 75.5%;
z-index: 99;
display: none;
}
}
Make a Collapsible Sidebar List
Directory – admin/public/js/left-sidebar.js
// Get all the li elements within the ul with the class "collapsible"
var coll = document.querySelectorAll("ul.collapsible li.toggle > a");
// Add click event listeners to each li element to toggle the nested ul
coll.forEach(function(a) {
a.addEventListener("click", function() {
this.classList.toggle("active");
var ul = this.parentElement.querySelector("ul");
if (ul.style.display === "block") {
ul.style.display = "none";
} else {
ul.style.display = "block";
}
});
});Design Admin Navbar
Directory – admin/public/css/navbar.css
/* dashboard */
.navbar{
padding: 0px 116px 0px 36px;
}
@media only screen and (max-width: 600px) {
.navbar-nav{
position: absolute;
right: 30px;
}
}
Design Admin Dashboard Content
Directory – admin/public/css/dashboard.css
.info-box{
border: 1px solid lightgray;
padding: 29px 20px 0px 0px;
}
.info-box a{
text-decoration: none;
font-weight: bold;
color: #198754;
}
.info-icon{
text-align: right;
font-size: 70px;
color: #198754;
position: relative;
bottom: 19px;
}
.support, .intro{
padding: 20px;
}
@media only screen and (max-width: 600px) {
.intro{
text-align: center;
}
.info-box{
text-align: center;
}
.info-icon{
text-align: center;
}
.support, .intro {
padding: 20px 10px 20px 20px;
}
}