Example : PHP Code for Home/Dashboard Page in Left-Side-Panel Format.
STEP 1 : Create a Login page (as login/index.php) first and after successful validation open Dashboard page (dashboard.php). Even, we can also run dashboard page directly.
STEP 2 :
dashboard.php
<!DOCTYPE html>
<html>
<head>
<title>Admin Dashboard</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f2f6fc;
}
.header {
height: 70px;
background: #003366;
color: white;
display: flex;
align-items: center;
padding-left: 25px;
font-size: 26px;
font-weight: bold;
}
.marquee-box
{
height:35px;
background:#ffcc00;
color:#003366;
line-height:35px;
font-size:16px;
font-weight:bold;
border-bottom:2px solid #003366;
}
.header img {
width: 45px;
height: 45px;
margin-right: 15px;
border-radius: 50%;
}
.main {
display: flex;
height: calc(100vh - 110px);
}
.sidebar {
width: 260px;
background: #002244;
color: white;
overflow-y: auto;
}
.sidebar h3 {
text-align: center;
padding: 15px;
margin: 0;
background: #001a33;
color: #ffcc00;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
border-bottom: 1px solid #1b3d5c;
}
.menu a {
display: block;
color: white;
text-decoration: none;
padding: 14px 20px;
font-size: 16px;
}
.menu a:hover {
background: #00509e;
}
.submenu {
display: none;
background: #003366;
}
.submenu a {
padding-left: 45px;
font-size: 15px;
}
.menu li:hover .submenu {
display: block;
}
.content {
flex: 1;
background: white;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.footer {
height: 40px;
background: #003366;
color: white;
text-align: center;
line-height: 40px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="header">
<img src="image/logo.png" alt="Logo">
Online Furniture and Interior Accessories Store
</div>
<div class="marquee-box">
<marquee behavior="scroll"
direction="left"
scrollamount="6">
🛋 Welcome to Online Furniture and Interior Accessories Store |
Latest Offers Available |
New Furniture Collections Added |
Easy Online Shopping |
Fast Delivery Service |
Contact Support for Help
</marquee>
</div>
<div class="main">
<div class="sidebar">
<h3>Admin Menu</h3>
<ul class="menu">
<li>
<a href="home.php" target="pageframe">🏠 Dashboard Home</a>
</li>
<li>
<a href="#">👤 Master Entry ▾</a>
<div class="submenu">
<a href="customer.php" target="pageframe">Customer Master</a>
<a href="furniture.php" target="pageframe">Furniture Master</a>
<a href="accessories.php" target="pageframe">Interior Accessories</a>
</div>
</li>
<li>
<a href="#">📦 Product Management ▾</a>
<div class="submenu">
<a href="stock.php" target="pageframe">Stock Details</a>
<a href="discount.php" target="pageframe">Discount & Offer</a>
<a href="search.php" target="pageframe">Search Product</a>
</div>
</li>
<li>
<a href="#">🛒 Order Management ▾</a>
<div class="submenu">
<a href="cart.php" target="pageframe">Shopping Cart</a>
<a href="order.php" target="pageframe">Order Booking</a>
<a href="delivery.php" target="pageframe">Delivery & Shipping</a>
</div>
</li>
<li>
<a href="#">💳 Billing & Payment ▾</a>
<div class="submenu">
<a href="invoice.php" target="pageframe">Invoice & Billing</a>
<a href="payment.php" target="pageframe">Payment Details</a>
</div>
</li>
<li>
<a href="#">📊 Reports ▾</a>
<div class="submenu">
<a href="customer_report.php" target="pageframe">Customer Report</a>
<a href="sales_report.php" target="pageframe">Sales Report</a>
<a href="stock_report.php" target="pageframe">Stock Report</a>
</div>
</li>
<li>
<a href="#">💬 Support ▾</a>
<div class="submenu">
<a href="complaint.php" target="pageframe">Complaint & Suggestion</a>
<a href="feedback.php" target="pageframe">Feedback & Review</a>
<a href="faq.php" target="pageframe">FAQ</a>
</div>
</li>
<li>
<a href="logout.php">🚪 Logout</a>
</li>
</ul>
</div>
<div class="content">
<iframe src="home.php" name="pageframe"></iframe>
</div>
</div>
<div class="footer">
© <?php echo date("Y"); ?> Online Furniture Store | Developed by R.K. Mahto | All Rights Reserved
</div>
</body>
</html>
STEP 3 : Now create several other pages which can be included in dashboard such as home.php, customer.php, employee.php etc.
home.php
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body style="font-family:Arial; padding:30px;">
<h1>Welcome to Admin Dashboard</h1>
<p>Select any menu from the left sidebar to open the page here.</p>
</body>
</html>Example : PHP Code for Home/Dashboard Page in Top-Bottom-Panel Format.
STEP 1 : Create a Login page (as login/index.php) first and after successful validation open Dashboard page (dashboard.php). Even, we can also run dashboard page directly.
STEP 2 :
dashboard.php
<!DOCTYPE html>
<html>
<head>
<title>Advanced Dashboard</title>
<style>
body{
margin:0;
font-family:Arial;
background:#f2f6fc;
}
/* HEADER */
.header{
height:70px;
background:#003366;
color:white;
display:flex;
align-items:center;
justify-content:space-between;
padding-left:20px;
padding-right:20px;
}
.header-left{
display:flex;
align-items:center;
font-size:26px;
font-weight:bold;
}
.header-left img{
width:45px;
height:45px;
margin-right:15px;
border-radius:50%;
}
.header-right{
display:flex;
align-items:center;
gap:15px;
}
.header-right a{
color:white;
text-decoration:none;
font-size:15px;
}
.signup-btn{
background:#ffcc00;
color:#003366 !important;
padding:10px 18px;
border-radius:5px;
font-weight:bold;
}
.signup-btn:hover{
background:white;
}
/* MARQUEE */
.marquee-box{
height:35px;
background:#ffcc00;
color:#003366;
line-height:35px;
font-size:16px;
font-weight:bold;
}
/* MENU */
.menu{
background:#002244;
}
.menu ul{
list-style:none;
margin:0;
padding:0;
}
.menu ul li{
position:relative;
display:inline-block;
}
.menu ul li a{
display:block;
color:white;
padding:15px 18px;
text-decoration:none;
font-size:15px;
}
.menu ul li a:hover{
background:#00509e;
}
/* SUBMENU */
.submenu{
display:none;
position:absolute;
background:#003366;
min-width:220px;
z-index:1000;
}
.submenu li{
display:block !important;
position:relative;
}
.submenu li a{
border-bottom:1px solid #1b3d5c;
}
.menu li:hover > .submenu{
display:block;
}
/* SUB SUB MENU */
.subsubmenu{
display:none;
position:absolute;
left:220px;
top:0;
background:#004080;
min-width:220px;
}
.submenu li:hover > .subsubmenu{
display:block;
}
/* CONTENT */
.content{
height:calc(100vh - 185px);
background:white;
}
iframe{
width:100%;
height:100%;
border:none;
}
/* FOOTER */
.footer{
height:45px;
background:#003366;
color:white;
text-align:center;
line-height:45px;
font-size:14px;
}
</style>
</head>
<body>
<!-- HEADER -->
<div class="header">
<div class="header-left">
<img src="image/logo.png">
Online Furniture & Interior Store
</div>
<div class="header-right">
<a href="mailto:[email protected]">
📧 [email protected]
</a>
<a href="signup.php" target="pageframe" class="signup-btn">
Sign Up
</a>
</div>
</div>
<!-- MARQUEE -->
<div class="marquee-box">
<marquee scrollamount="6">
🛋 Welcome to Online Furniture Store |
New Collections Available |
Special Discount Offers |
Fast Delivery |
Easy Online Shopping
</marquee>
</div>
<!-- MENU -->
<div class="menu">
<ul>
<li>
<a href="home.php" target="pageframe">🏠 Home</a>
</li>
<!-- MASTER -->
<li>
<a href="#">👤 Master ▾</a>
<ul class="submenu">
<li>
<a href="customer.php" target="pageframe">
Customer Master
</a>
</li>
<li>
<a href="#">
Furniture Master ▸
</a>
<!-- SUB SUB MENU -->
<ul class="subsubmenu">
<li>
<a href="sofa.php" target="pageframe">
Sofa Details
</a>
</li>
<li>
<a href="bed.php" target="pageframe">
Bed Details
</a>
</li>
<li>
<a href="chair.php" target="pageframe">
Chair Details
</a>
</li>
</ul>
</li>
<li>
<a href="accessories.php" target="pageframe">
Interior Accessories
</a>
</li>
</ul>
</li>
<!-- PRODUCT -->
<li>
<a href="#">📦 Product ▾</a>
<ul class="submenu">
<li>
<a href="stock.php" target="pageframe">
Stock Details
</a>
</li>
<li>
<a href="discount.php" target="pageframe">
Discount & Offer
</a>
</li>
<li>
<a href="search.php" target="pageframe">
Search Product
</a>
</li>
</ul>
</li>
<!-- ORDER -->
<li>
<a href="#">🛒 Orders ▾</a>
<ul class="submenu">
<li>
<a href="cart.php" target="pageframe">
Shopping Cart
</a>
</li>
<li>
<a href="order.php" target="pageframe">
Order Booking
</a>
</li>
<li>
<a href="delivery.php" target="pageframe">
Delivery & Shipping
</a>
</li>
</ul>
</li>
<!-- REPORT -->
<li>
<a href="#">📊 Reports ▾</a>
<ul class="submenu">
<li>
<a href="customer_report.php" target="pageframe">
Customer Report
</a>
</li>
<li>
<a href="sales_report.php" target="pageframe">
Sales Report
</a>
</li>
</ul>
</li>
<!-- SUPPORT -->
<li>
<a href="#">💬 Support ▾</a>
<ul class="submenu">
<li>
<a href="feedback.php" target="pageframe">
Feedback
</a>
</li>
<li>
<a href="complaint.php" target="pageframe">
Complaint
</a>
</li>
<li>
<a href="faq.php" target="pageframe">
FAQ
</a>
</li>
</ul>
</li>
<li>
<a href="logout.php" target="pageframe">
🚪 Logout
</a>
</li>
</ul>
</div>
<!-- CONTENT -->
<div class="content">
<iframe src="home.php" name="pageframe"></iframe>
</div>
<!-- FOOTER -->
<div class="footer">
© <?php echo date("Y"); ?>
Online Furniture & Interior Store |
Developed By R.K. Mahto |
All Rights Reserved
</div>
</body>
</html>
STEP 3 : Now create several other pages which can be included in dashboard such as home.php, customer.php, employee.php etc.
home.php
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body style="font-family:Arial; padding:30px;">
<h1>Welcome to Admin Dashboard</h1>
<p>Select any menu from the top menu bar. The selected page will open here.</p>
</body>
</html>
0 Comments