Key Takeaways:
- Building a custom admin dashboard with PHP and Bootstrap streamlines web app management, making tasks like performance monitoring and user management easier.
- Combining PHP’s data handling with Bootstrap’s design capabilities allows you to create a visually appealing and user-friendly dashboard for efficient web app administration.
Many businesses have trouble managing their web apps. Without a good dashboard, tasks like checking performance, managing users, and analyzing data can be hard and take a long time.
PHP and Bootstrap can help you make a custom dashboard. PHP can handle complex data, and Bootstrap makes the dashboard visually appealing and user-friendly on different devices.
This blog will show you how to build a PHP admin dashboard. A well-designed dashboard can help you work faster, streamline processes, and get useful information about your web app.
30% Off For 3 Months On All Plans!
Unleash the cloud without blowing your budget with our hosting promo code.
What is PHP Bootstrap Integration?
PHP and Bootstrap are two important tools for building websites. PHP is a programming language that helps create dynamic web pages. Bootstrap is a framework that provides ready-made styles and features for designing attractive websites.
When combined, PHP and Bootstrap create a powerful way to build web applications that are both functional and visually appealing. PHP handles the server-side logic, while Bootstrap takes care of the front-end design.
Benefits of Using Bootstrap with PHP
PHP and Bootstrap together make building websites faster and easier. Developers can focus on the website’s main features, while Bootstrap handles the design.
Using PHP and Bootstrap has many benefits.
✅ Bootstrap offers ready-made styles and features.
✅ Ensures websites look good on all devices.
✅ Assists developers in writing more organized code.
✅ Facilitates the creation of attractive and interactive websites.
Overview of an Admin Dashboard
An admin dashboard is a Web UI that enables administrators to monitor app performance and manage settings. It provides vital statistics such as user engagement, sales, and website functionality. Additionally, it allows admins to adjust settings inaccessible to regular users.
Admin dashboards facilitate different functions, including:
- Managing user accounts by creating, editing, or deleting them.
- Modifying website content.
- Viewing metrics on visitor count, session duration, and purchase rates.
- Customizing the website’s appearance and operations.
Requirements for PHP and Bootstrap 5
In this tutorial, I assume you already have a PHP-based website. Here’s what you’ll need:
- PHP 8 or higher
- MariaDB 10 or higher
- Bootstrap 5 or higher
Create Dynamic Web Apps with PHP and Bootstrap 5 on Cloudways
Power your web apps with the latest versions of PHP and Bootstrap on a high-performance hosting that meets all system requirements.
Building Admin Panel with Bootstrap
I’ll build a simple app to manage sales. It will have a dashboard where users can see sales information, update product data, and add new products. Users can also sign up and log in to the dashboard.
Step 1: Create the Forms
The admin panel template has many different forms, including signup and login. I’ll use HTML5 and custom PHP code to make sure the information users enter is correct.
Create a Registration Form
User registration forms are already available. I will change the field names and update the method and action using the following code:
<?php include('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account</div>
<div class="card-body">
<form method="post" action="register.php">
<?php include('errors.php'); ?>
<div class="form-group">
<div class="form-row">
<div class="col-md-12">
<label for="exampleInputName">Username</label>
<input class="form-control" id="exampleInputName" type="text" name="username" value="<?php echo $username; ?>" >
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp" name="email" value="<?php echo $email; ?>" >
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" type="password" name="password_1" >
</div>
<div class="col-md-6">
<label for="exampleInputPassword1">Confirm Password</label>
<input class="form-control" id="exampleInputPassword2" type="password" name="password_2" >
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" name="reg_user">Register</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="login.php">Login Page</a>
<!--- <a class="d-block small" href="forgot-password.html">Forgot Password?</a>-->
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
Here’s how the registration form appears after the modifications:
– A registration page with fields for username, email address, password, confirm password, and buttons to register or go to the login page.
Create a Login Form
Next, use the following code for the login form:
<?php include('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-login mx-auto mt-5">
<div class="card-header">Login</div>
<div class="card-body">
<form method="post" action="login.php">
<?php include('errors.php'); ?>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input class="form-control" type="text" name="username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" type="password" name="password">
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember Password</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" name="login_user">Login</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="register.php">Register an Account</a>
<!-- <a class="d-block small" href="forgot-password.php">Forgot Password?</a>-->
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
Here’s how the login form appears after the modifications:
– A login page with fields for username and password, a checkbox to remember the password, and buttons to log in or create an account.
Step 2: Set up Database Connection
You can easily access your database connection on the Cloudways Platform, as shown below.
- Log in to Cloudways Platform
- Go to Servers → Server Management
- Click on the Applications
– A server management page showing a list of servers with information like server type, memory capacity, IP address, and location, along with actions you can take.
- Go to Applications → Application Management
- Go to Access Details and click Application URL
– An application management page showing “Access Details” for database settings, including fields for the database, along with a button to open the database manager.
Users Table
Use the following SQL queries to create the tables:
CREATE TABLE `users` ( `id` int(11) NOT NULL, `username` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `password` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;Products tableCREATE TABLE `products` ( `product_id` int(22) NOT NULL, `product_name` varchar(22) NOT NULL, `product_price` int(22) NOT NULL, `product_cat` varchar(22) NOT NULL, `product_details` varchar(22) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; Sales tableCREATE TABLE `sales_stats` ( `id` int(22) NOT NULL, `sales` int(22) NOT NULL, `month` varchar(25) NOT NULL, `pending_orders` int(55) NOT NULL, `revenue` int(55) NOT NULL, `Vistors` int(55) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Products Table
CREATE TABLE `products` ( `product_id` int(22) NOT NULL, `product_name` varchar(22) NOT NULL, `product_price` int(22) NOT NULL, `product_cat` varchar(22) NOT NULL, `product_details` varchar(22) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Sales Table
CREATE TABLE `sales_stats` ( `id` int(22) NOT NULL, `sales` int(22) NOT NULL, `month` varchar(25) NOT NULL, `pending_orders` int(55) NOT NULL, `revenue` int(55) NOT NULL, `Vistors` int(55) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Go to the Database Manager on Cloudways. Find the database name and other information. Then, create a new file called server.php and copy this code into it.
<?php
session_start();
// initializing variables
$username = "";
$email = "";
$errors = array();
// connect to the database
$db = mysqli_connect('localhost', 'root', '', 'registration');
Registration
// REGISTER USER
if (isset($_POST['reg_user'])) {
// Receive all input values from the form
$username = mysqli_real_escape_string($db, $_POST['username']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);
// Form validation: ensure that the form is correctly filled
// by adding (array_push()) corresponding error unto $errors array
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($email)) {
array_push($errors, "Email is required");
}
if (empty($password_1)) {
array_push($errors, "Password is required");
}
if ($password_1 != $password_2) {
array_push($errors, "The two passwords do not match");
}
// First check the database to make sure
// a user does not already exist with the same username and/or email
$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
$result = mysqli_query($db, $user_check_query);
$user = mysqli_fetch_assoc($result);
if ($user) { // If user exists
if ($user['username'] === $username) {
array_push($errors, "Username already exists");
}
if ($user['email'] === $email) {
array_push($errors, "Email already exists");
}
}
// Finally, register user if there are no errors in the form
if (count($errors) == 0) {
$password = md5($password_1); // Encrypt the password before saving in the database
$query = "INSERT INTO users(username, email, password) VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: login.php');
}
}
Login
// LOGIN USER
if (isset($_POST['login_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']);
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($password)) {
array_push($errors, "Password is required");
}
if (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1) {
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}else {
array_push($errors, "Wrong username/password combination");
}
}
}?>
To show errors, create a new file called errors.php and copy this code into it.
<?php if (count($errors) > 0) : ?> <div class="error"> <?php foreach ($errors as $error) : ?> <p><?php echo $error ?></p> <?php endforeach ?> </div> <?php endif ?>
Step 3: Create the Product Page
Then, create a new page called product.php and copy this code into it.
<?php
include('pserver.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.php">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="index.php">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="charts.html">
<i class="fa fa-check-square"></i>
<span class="nav-link-text">Create Products</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="register.php">
<i class="fa fas fa-user"></i>
<span class="nav-link-text">Register Users</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>
<span class="d-lg-none">Messages
<span class="badge badge-pill badge-primary">12 New</span>
</span>
<span class="indicator text-primary d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty awesome! These messages clip off when they reach the end of the box so they don't overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at 3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>John Doe</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all messages</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Dashboard</a>
</li>
<li class="breadcrumb-item active">Product Page</li>
</ol>
<div class="row">
<div class="col-12">
<h1>Create Product</h1>
</div>
<div class="col-md-8">
<form method="post" action="product.php">
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control" name="pname" required>
</div>
<div class="form-group">
<label>Product Price</label>
<input type="text" class="form-control" name="price" required>
</div>
<div class="form-group">
<label>Product Category</label>
<input type="text" class="form-control" name="pcat" required>
</div>
<div class="form-group">
<label>Product Details</label>
<textarea class="form-control" name="pdetails" required></textarea>
</div>
<button type="submit" class="btn btn-primary" name="reg_p">Submit</button>
</form>
</div>
</div>
</div>
<!-- /.container-fluid-->
<!-- /.content-wrapper-->
<footer class="sticky-footer">
<div class="container">
<div class="text-center">
<small>Copyright © Your Website 2018</small>
</div>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="document" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.php">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
</div>
</body>
</html>
Step 4: Add Products to the Database
Next, I’ll create a new file called pserver.php in the main folder and copy this code into it.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if (isset($_POST['reg_p'])) {
// Receive all input values from the form
$pname = mysqli_real_escape_string($conn, $_POST['pname']);
$price = mysqli_real_escape_string($conn, $_POST['pirce']); // Note: There might be a typo here, should it be 'price'?
$pcat = mysqli_real_escape_string($conn, $_POST['pcat']);
$product_details = mysqli_real_escape_string($conn, $_POST['pdetails']);
$sql = "INSERT INTO products (product_name, product_price, product_cat, product_details)
VALUES ('$pname', '$price', '$pcat', '$product_details')";
if ($conn->query($sql) === TRUE) {
echo "alert('New record created successfully')";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>
Step 5: Visualize the Data
I need to fill the Bootstrap data table with information from the database. I’ll connect the data table to the database.
Here’s the code to fill the Bootstrap data table. Let’s update the table code with this code:
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</tfoot>
<tbody>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = 'SELECT * FROM products';
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// Output data of each row
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<th><?php echo $row['product_id']; ?></th>
<td><?php echo htmlspecialchars($row['product_name']); ?></td>
<td><?php echo htmlspecialchars($row['product_price']); ?></td>
<td><?php echo htmlspecialchars($row['product_cat']); ?></td>
<td><?php echo htmlspecialchars($row['product_details']); ?></td>
</tr>
<?php
}
} else {
echo '<tr><td colspan="5">0 results</td></tr>';
}
$conn->close();
?>
</tbody>
</table>
</div>
Here’s what the table looks like after using the code above:
Next, I’ll use the data from the database to create a line chart on the PHP admin dashboard.
– A dashboard showing information like downloads, profits, customers, and channels, along with charts for revenue breakdown and segments, and options to see more detailed reports.
As you can see, the top of the dashboard has four cards that show monthly visitors, revenue, new orders, and new tickets. The data for these cards comes from the database using a simple SELECT query.
Step 6: Set up the Dashboard
Here’s the full code for the dashboard view that you need to put in index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Page level plugin CSS -->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.php">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="index.php">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Create Product">
<a class="nav-link" href="product.php">
<i class="fa fa-check-square"></i>
<span class="nav-link-text">Create Product</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Register Users">
<a class="nav-link" href="register.php">
<i class="fa fas fa-user"></i>
<span class="nav-link-text">Register Users</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>
<span class="d-lg-none">Messages
<span class="badge badge-pill badge-primary">12 New</span>
</span>
<span class="indicator text-primary d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty awesome! These messages clip off when they reach the end of the box so they don't overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at 3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>John Doe</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all messages</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>Logout
</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Dashboard</a>
</li>
<li class="breadcrumb-item active">My Dashboard</li>
</ol>
<!-- Icon Cards-->
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT * from sales_stats WHERE month='Mar' ";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
?>
<div class="row">
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-primary o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-comments"></i>
</div>
<div class="mr-5"><?php echo $row['Visitors']; ?> Visitors</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
<?php
}
} else {
echo '0 results';
}
$conn->close();
?>
<!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-table"></i> Data Table Example
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</tfoot>
<tbody>
<?php
$sql = 'SELECT * from products';
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<th><?php echo $row['product_id']; ?></th>
<td><?php echo $row['product_name']; ?></td>
<td><?php echo $row['product_price']; ?></td>
<td><?php echo $row['product_cat']; ?></td>
<td><?php echo $row['product_details']; ?></td>
</tr>
<?php
}
} else {
echo '0 results';
}
?>
</tbody>
</
Bootstrap Admin Dashboard Templates
Here are the best free Bootstrap admin dashboard templates, each offering something different. Choose the one that’s right for your project.
1. AdminLTE
– Source: AdminLTE
AdminLTE is one of the most popular free Bootstrap admin templates available. Its clean and responsive design makes it ideal for both small and large projects. The interface is intuitive and allows developers to quickly set up an admin dashboard with a sleek look.
What sets AdminLTE apart is its extensive library of reusable components, such as charts, graphs, and forms. It supports multiple plugins, making customization seamless. The template is highly responsive, ensuring it works across all devices.
Features
- Multiple pre-designed skins
- Interactive charts and graphs
- Well-documented and easy-to-customize
Pros and Cons
✓ Highly responsive across all devices
✓ Large collection of reusable components
✗ Limited advanced customization without paid extensions
2. SB Admin 2
– Source: SB Admin 2
SB Admin 2 is a modern, free admin dashboard template based on Bootstrap 4. The minimalist design focuses on functionality while ensuring a fast and lightweight experience. Its clean layout makes navigation smooth and user-friendly.
The template includes a range of UI components like buttons, cards, and forms that can be easily adapted. It also integrates FontAwesome icons and custom Bootstrap utilities to enhance the styling options. SB Admin 2 is perfect for creating basic to intermediate admin panels.
Features
- Integrated FontAwesome icons
- Custom Bootstrap utilities for extended styling
- Minimalist design for faster load times
Pros and Cons
✓ Lightweight and fast-loading
✓ Easy integration with FontAwesome icons
✗ Limited out-of-the-box widgets
3. CoreUI
– Source: CoreUI
CoreUI is a comprehensive free admin dashboard template that offers much more than just a basic Bootstrap setup. Designed with developers in mind, CoreUI is feature-rich and provides a solid foundation for building complex admin interfaces. It comes with support for multiple frameworks like Vue.js, React, and Angular.
This template stands out for its extensive range of pre-built components, including various charting libraries and detailed forms. The flexibility CoreUI offers makes it a preferred choice for developers looking to implement dashboards in more advanced web applications.
Features
- Support for Vue.js, Angular, and React
- Detailed forms and multiple charting options
- Multi-framework compatibility
Pros and Cons
✓ Multi-framework support (Vue, Angular, React)
✓ Numerous customization options
✗ Slightly complex for beginners
4. Matrix Admin
– Source: Matrix Admin
Matrix Admin offers a straightforward, no-nonsense approach to admin dashboards. It has a simple design that’s easy to navigate, making it suitable for projects where simplicity is key. The template includes several basic widgets and UI components, providing a solid foundation for a functional dashboard.
Matrix Admin is perfect for developers looking for a lightweight template that doesn’t overwhelm with unnecessary features. It includes basic form elements, validation tools, and simple tables, making it an excellent choice for simpler backend interfaces.
Features
- Simple widgets and form validation tools
- Lightweight, easy-to-navigate design
- Basic tables with sorting and filtering functionality
Pros and Cons
✓ Lightweight and easy to set up
✓ Good for simple backends
✗ Limited customization options
5. Gentelella
– Source: Gentelella
Gentelella is an elegant free Bootstrap admin template with a flexible layout and many features for advanced backend systems. Its modern and well-structured design makes it ideal for large-scale projects. Gentelella provides multiple plugins for charts, data tables, and calendars, ensuring that developers have the tools they need to create robust dashboards.
This template stands out for its customizable panels and advanced plugins, making it highly adaptable. Gentelella is designed to handle large data sets efficiently, offering detailed tables and reports that are perfect for data-driven projects.
Features
- Multiple charting and calendar plugins
- Advanced data tables for large datasets
- Customizable panels with flexible layouts
Pros and Cons
✓ Ideal for handling large datasets
✓ Includes advanced data visualization tools
✗ Might feel overwhelming for smaller projects
Summary
Building a PHP admin dashboard with Bootstrap 5 can make your web development easier and improve how your users experience your apps. But the design choices you make can affect how well your dashboard works, how easy it is to maintain, and how it grows.
By learning and improving your skills, you can create great solutions that your users will love. You can also use an API to build this app without mixing HTML and PHP code. The API will add or get data from the database.
Q: Is Bootstrap a CSS?
A: Bootstrap is not just a CSS. It’s an open-source framework that includes CSS and JavaScript to help build responsive, mobile-first websites quickly. It provides pre-built styles for typography, forms, buttons, and more, making it easier for developers to create consistent, user-friendly web interfaces.
Q: What is a dashboard in PHP?
A: In PHP, a dashboard is a user interface designed to display essential information and data clearly. It aggregates and organizes data into an easy-to-read format, often used for monitoring and analytics, making it accessible for users to view key metrics and updates at a glance.
Q: Is Bootstrap or PHP better?
A: Bootstrap and PHP serve different purposes, so comparing them directly isn’t useful. Bootstrap is a front-end framework used for designing responsive web interfaces, while PHP is a back-end programming language for server-side functionality. They can work together in web development to create both functional and attractive websites.
Q: How to make an admin dashboard in Bootstrap?
A. To create an admin dashboard with Bootstrap, start by using the responsive grid layout to organize sections like navigation, sidebar, and main content. Include components like tables, forms, and cards to display data. Utilize Bootstrap’s built-in UI elements such as buttons, alerts, and modals for interactivity. For advanced features, consider integrating libraries like Chart.js for data visualization. This setup ensures a user-friendly and mobile-responsive design for easy management of data.
Q: Can I use Bootstrap with PHP?
A. Yes, you can use Bootstrap with PHP. Bootstrap is a front-end framework, while PHP is a back-end programming language. By combining the two, you can create dynamic, responsive web pages. PHP handles server-side logic, while Bootstrap ensures the user interface is attractive and mobile-friendly. This combination allows you to build robust, interactive web applications.
Q: Is AdminLTE free to use?
A. Yes, AdminLTE is free to use. It is an open-source, responsive dashboard template built with Bootstrap. You can use it for personal and commercial projects without any licensing fees. However, always ensure to check the specific terms on its GitHub repository for any updates or potential restrictions.
Q: How to integrate admin dashboard in Laravel?
A. To integrate an admin dashboard in Laravel, you have a couple of options. You can either use a package like Voyager or AdminLTE, or build your own dashboard from scratch. Start by setting up Laravel and installing any necessary packages through Composer. Then, add the HTML, CSS, and JavaScript for the dashboard to your Laravel views. Use Laravel’s routing and controllers to link your dynamic content, and you’ll have a powerful admin panel up and running.
Mansoor Ahmed Khan
Been in content marketing since 2014, and I still get a kick out of creating stories that resonate with the target audience and drive results. At Cloudways by DigitalOcean (a leading cloud hosting company, btw!), I lead a dream team of content creators. Together, we brainstorm, write, and churn out awesome content across all the channels: blogs, social media, emails, you name it! You can reach out to me at [email protected].
