PHP Bootstrap code implies making a bootstrapper that handles all the dynamic requests made to a server and apply the MVC system so that in future you can change the functionality for each unique application or component without changing the whole. Bootstrap help you to design websites faster and easier, includinging HTML and CSS based design templates.
PHP Bootstrap templates make it less complicated for clients to construct complex and compelling web apps. PHP requires a local server to run PHP code. Designers using Bootstrap with PHP and PHP Hosting can enjoy all these benefits.
Around 18 million websites were using the Bootstrap framework by the end of the year 2018. An increasing number of websites have begun utilizing the framework in 2019, and the numbers have been rising since then. In reality, Bootstrap has become the foremost loved choice of engineers when building compelling web applications.
A PHP dashboard is a single or multi-tab visualization tool that can be integrated within PHP projects. Usually, these are browser-based applications that are built as a customizable component of larger projects. A PHP dashboard is designed to accept raw data from other components of the projects and then present it in various formats. These dashboards are generally built using JS because of great (and smooth) integration between PHP and JavaScript.
That’s why in this tutorial, I will use Bootstrap for demonstrating the idea of PHP dashboards.
Overview of Admin Dashboard
It’s a web-based interface allowing admins or authorized users to manage and monitor different aspects of a web app. It provides an overview of key metrics, such as user traffic, sales, or website performance, and enables administrators to access and control features and settings unavailable to regular users.
Some of the common functions of an admin dashboard include:
- Admin dashboards typically allow administrators to manage user accounts, including creating new accounts, modifying user information, and deleting accounts.
- Admin dashboards can provide tools for managing website content.
- Admin dashboards may include analytics tools to track website metrics, such as page views, unique visitors, bounce rates, and conversion rates.
- Admin dashboards may provide customization options to modify the website’s design or functionality.
Using PHP With Bootstrap 5
Bootstrap is a front-end framework that provides a set of pre-built CSS and JavaScript components for creating responsive and mobile-first web pages, while PHP is a server-side scripting language used for creating dynamic web pages.
Bootstrap can be used with PHP to build dynamic web pages by integrating PHP code with HTML and Bootstrap’s CSS and JavaScript components. Bootstrap and PHP can be used together to create dynamic, responsive websites with great user experience.
You can use PHP to handle server-side processing and database and Bootstrap to handle the presentation layer and user interface. You must include Bootstrap’s CSS and JavaScript files and use the appropriate Bootstrap classes and components in your code.
Requirements for PHP and Bootstrap
Before you start using PHP with Bootstrap, you must ensure that your system meets the following requirements:
-
- PHP v8.0 or later
- MariaDB v 10.x
- Bootstrap v5.0 or late
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.
Prerequisites
For this tutorial, I assume that you have a PHP application installed on a web server. My setup is:
- PHP v8.0 or later
- MariaDB v 10.x
- Bootstrap v5.0 or later
To make sure that that I don’t get distracted by server-level issues, I decided to host my application on the Cloudways PHP hosting platform because I get a highly optimized hosting stack and no server management hassles. You can try out Cloudways for free by signing for an account.
Create Admin Panel With Bootstrap
I’ll create a simple application for Sales Management. It contains a dashboard where the users can see the sales stats, maintain the data about the products, and Add New Products. Users can also register and log into the dashboard.
2. Create the Forms
The admin panel template has a full range of UI forms, including registration and login.
For validation purposes, I simply use HTML5 Validation and Custom PHP Validation.
2.1. Create a Registration Form
User registration forms are already available. I will change the fields’ 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 is what the registration form looks like after the above modifications:
2.2. Create a Login Form
Next, for the Login form, use 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-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 is how the login form looks like:
3. 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.
- Go to Applications → Application Management;
- Go to Access Details and click Application URL.
3.1. 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;
3.2. 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;
3.3. 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;
Click the Database Manager on the Cloudways Platform and check the dbname and other credentials. Next, create the file server.php and paste the following code into it.
<?php
session_start();
// initializing variables
$username = "";
$email = "";
$errors = array();
// connect to the database
$db = mysqli_connect('localhost', 'root', '', 'registration');
3.4. 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");
}
}
ins
// 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
echo $password ;
$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');
}
}
// ...
3.5. 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");
}
}
}?>
For Errors, create the new file with the name of errors.php and paste the following code in it:
<?php if (count($errors) > 0) : ?> <div class="error"> <?php foreach ($errors as $error) : ?> <p><?php echo $error ?></p> <?php endforeach ?> </div> <?php endif ?>
Create the Product Page
Next, create the product.php page and paste the following code in 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 dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="alertsDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-bell"></i>
<span class="d-lg-none">Alerts
<span class="badge badge-pill badge-warning">6 New</span>
</span>
<span class="indicator text-warning d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">New Alerts:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-success">
<strong>
<i class="fa fa-long-arrow-up fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-danger">
<strong>
<i class="fa fa-long-arrow-down fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-success">
<strong>
<i class="fa fa-long-arrow-up fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all alerts</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="pirce" required>
</div>
<div class="form-group">
<label>Product Catgory</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="dialog" 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>
Add Products in the Database
Next, I will create pserver.php file in the root folder and paste the following code in it:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
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']);
$pcat = mysqli_real_escape_string($conn,$_POST['pcat']);
$product_details = mysqli_real_escape_string($conn,$_POST['pdetails']);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$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();
?>
Visualize the Data
I need to populate the Bootstrap datatable from the corresponding tables in the database. Connect the datatable to the database.
The following code can be used to populate the Bootstrap datatable. Let’s update the table code with the following 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 Catrogy</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Catrogy</th>
<th>Product Details</th>
</tr>
</tfoot>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = 'SELECT * from products';
if (mysqli_query($conn, $sql)) {
echo "";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
$count=1;
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) { ?>
<tbody>
<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>
</tbody>
<?php
$count++;
}
} else {
echo '0 results';
}
?>
</table>
Here is how the table looks like after the above code:
Next, I will use the data in the database and visualize it in the PHP admin dashboard in the form of line charts.
As you can see, the top of the dashboard is occupied by four cards that display Monthly visitors, Revenue, New Orders, and New tickets. The data for these cards is derived from the database through a simple SELECT query.
Upgrade to the Future of Hosting!
Supercharge your website with Cloudways and leave hosting limitations to the dust.
Set up the Dashboard
Here is the complete 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="Charts">
<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="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 dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="alertsDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-bell"></i>
<span class="d-lg-none">Alerts
<span class="badge badge-pill badge-warning">6 New</span>
</span>
<span class="indicator text-warning d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">New Alerts:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-success">
<strong>
<i class="fa fa-long-arrow-up fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-danger">
<strong>
<i class="fa fa-long-arrow-down fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-success">
<strong>
<i class="fa fa-long-arrow-up fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all alerts</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);
$sqll = "SELECT * from sales_stats WHERE month='Mar' ";
if (mysqli_query($conn, $sqll))
{
echo "";
}
else
{
echo "Error: " . $sqll . "<br>" . mysqli_error($conn);
}
$result = mysqli_query($conn, $sqll);
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['Vistors']; ?> Vistors</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>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-warning o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-list"></i>
</div>
<div class="mr-5"><?php echo $row['revenue'];?> Revenue</div>
</div>
<?php
}
}
else
{
echo '0 results';
}
?>
<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>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-success o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-shopping-cart"></i>
</div>
<div class="mr-5">123 New Orders!</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>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-danger o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-support"></i>
</div>
<div class="mr-5">13 New Tickets!</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>
</div>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
$sqlll = "SELECT sales from sales_stats";
if (mysqli_query($conn, $sqlll))
{
echo "";
}
else
{
echo "Error: " . $sqlll . "<br>" . mysqli_error($conn);
}
$result = mysqli_query($conn, $sqlll);
$number=array();
if (mysqli_num_rows($result) > 0)
{
// output data of each row
while($row = mysqli_fetch_assoc($result))
{
$number[]=$row['sales'];
}
}
else
{
echo "0 results";
}
$number_formated= "[".implode(",",$number)."]";
?>
<script type="text/javascript">
window.dataf= <?php echo $number_formated; ?>
</script>
<!-- Area Chart Example-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-area-chart"></i> Sales Chart</div>
<div class="card-body">
<canvas id="myAreaChart" width="100%" height="30"></canvas>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
<!-- 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 Catrogy</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Catrogy</th>
<th>Product Details</th>
</tr>
</tfoot>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = 'SELECT * from products';
if (mysqli_query($conn, $sql)) {
echo "";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
$count=1;
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) { ?>
<tbody>
<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>
</tbody>
<?php
$count++;
}
} else {
echo '0 results';
}
?>
</table>
</div>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</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="dialog" 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.html">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>
<!-- Page level plugin JavaScript-->
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/datatables/jquery.dataTables.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<!-- Custom scripts for this page-->
<script src="js/sb-admin-datatables.min.js"></script>
<script src="js/sb-admin-charts.min.js"></script>
</div>
</body>
</html>
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.
Summary
Creating a PHP admin dashboard with Bootstrap 5 is an excellent way to streamline your web development workflow and enhance the user experience of your applications. However, the design decisions you make can have a significant impact on the performance, maintainability, and scalability of your dashboard.
By continuously learning and improving your techniques, you can stay ahead of the curve and deliver innovative, high-quality solutions that exceed your users’ expectations. So, roll up your sleeves and start coding an awesome PHP admin dashboard with Bootstrap 5!
This application can also be implemented using an API where you don’t have to mix HTML and PHP code. The data will be added or retrieved from the database using the API.
Q: Is Bootstrap a CSS?
A. Bootstrap is an open-source CSS framework designed to coordinate with responsive, mobile, and front-end web development. It contains CSS- and JavaScript-based designs for typography, forms, buttons, and other interface components.
Q: What is a dashboard in PHP?
A. In PHP, a dashboard typically refers to a user interface that displays important information and data in a concise and easy-to-read format.
Q: Is Bootstrap or PHP better?
A. Bootstrap and PHP are different technologies that serve different purposes, so it’s inaccurate to compare them and say which is better.
Share your opinion in the comment section.
COMMENT NOW
Pardeep Kumar
Pardeep is a PHP Community Manager at Cloudways - A Managed PHP Hosting Platform. He love to work on Open source platform , Frameworks and working on new ideas. You can email him at [email protected]
Get Connected on:
Twitter
