This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Build an Admin Dashboard Template in PHP and Boostrap 4

Published on April 2, 2018 - Content Updated on December 1, 2021

15 Min Read

 

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 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.

Prerequisites

For this tutorial, I assume that you have a PHP application installed on a web server. My setup is:

  • PHP 7.1
  • MySQL
  • Bootstrap 4

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.

About The Application

I will create a simple application for sales management. It contains a dashboard where the users can see the sales stats and maintain the data about the Products and add new Products. Users could also register for logging into the dashboard.

boostrap admin template

Build Admin Dashboard UI

I have used the free Bootstrap 4 admin template available on GitHub. The template has a well-written code and all the right components for these tutorials. The template has a neat, elegant, and simple design. However, I intend to customize the template a little to make it unique to my application.

Create the Forms

The admin panel template comes with a full range of forms UI including registration and login.

For validation purposes, I simply use Html5 Validation and Custom PHP Validation.

PHP Hosting Made Simple

Experience fast performance with 24/7/356 support.

Registration Form

Forms for user registration is already available. I will just change the fields’ name and update the method and action:

<?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:

registration form

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:

login form

Setting up the Database Connection

Since I am on Cloudways, I could easily access the MySQL database details in the Access Details tab:

database connection

Create three tables in the database, users, products, sales_stats.

Use the following SQL queries to create the tables:

Users table

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 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;

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 in 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");

}

}
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');

}

}

// ...

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>

Insert 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:

data table example

Next, I will use the data in the database and visualize it in the PHP admin dashboard in the form of line charts:

admin dashboard

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.

PHP Hosting Made Simple

Experience fast performance with 24/7/356 support.

Setup 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>

Conclusion

Now we have an application with Bootstrap 4 and PHP that you can use to add products into a database. All the data is maintained in the tables, and the most important data metrics are shown through cards at the top and the line charts. As you can see, the app is based on a PHP dashboard template that was customized to fit the requirements of the app design. You could also use a PHP admin template to create a more pleasing-looking admin for the app.

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.

– Is bootstrap a CSS?

Bootstrap is an open-source CSS framework designed to coordinate with responsive, mobile, and front-end web development. It contains CSS- and JavaScript-based design for typography, forms, buttons, and other interface components.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Cloudways hosting has one of the best customer service and hosting speed”

Sanjit C [Website Developer]

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 Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!