Creating very nice dashboard using bootstrap in your ecommerce site
Tags: javascript, bootstrap, html
Published: 2023-03-25 16:26:41

Hi Team

I need help with my front end, want to create a nice UI dashboard its not appearing very nice, must have nice navbar, tabs with avatar when user log in or div class for user-profile. 

`// Bootstrap
<?php
// Start the session
session_start();

// Check if user is logged in
if(!isset($_SESSION['email'])) {
    // Redirect to login page
    header('Location: customer-login.php');
    exit();
}

// User is logged in, display dashboard
?>

[<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <!-- Bootstrap CSS -->
    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper-core.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZEwE6MEm/6RVbUo7jKiq5D" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZEwE6MEm/6RVbUo7jKiq5D" crossorigin="anonymous">
</head>

<style>
        /* Adjust the sidebar height */
        #sidebar {
            height: 100vh;
        }
    </style>
<body>
<div class="container my-5">
        <h1>Welcome <?php echo $_SESSION['email']; ?></h1>
    </div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Dashboard</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Dashboard</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Settings</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="logout.php">Logout</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container my-4">
  <div class="row">
    <div class="col-md-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Total Orders</h5>
          <p class="card-text">1,234</p>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Total Sales</h5>
          <p class="card-text">$123,456</p>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">New Customers</h5>
          <p class="card-text">567</p>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Inventory</h5>
          <p class="card-text">456</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>](`url`)`