Chat with us, powered by LiveChat

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

April 2, 2018

14 Min Read
Reading Time: 14 minutes

Bootstrap is a very popular frontend framework for developing websites and web applications. Bootstrap can help you create a responsive, mobile-first websites quickly and easily. Similarly, PHP is a very popular server-side scripting language that is used to create dynamic websites that depend upon interaction with database systems such as MySQL. In this tutorial, I am  going to be creating a working PHP dashboard template with Bootstrap 4.

Prerequisites

For the purpose of 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 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 the purpose of this 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.

Host Your PHP Apps With Us For 10x Faster Performance

Don’t Let Your Customers Run Away With The Downtimes. Deploy With Us Today!

Registration Form

Forms for user registration is already available. I will just change 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 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.

Give Your PHP Applications Optimum Web Performance

Host Your PHP Apps With Us & See The Blazing Web Performance Yourself!

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

Share your opinion in the comment section. COMMENT NOW

Share This Article

Launch PHP websites without the worry of Server Management.

Pre-Installed Optimized Stack with Git, Composer & SSH

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 pardeep.kumar@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

BFCM 2019