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.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

Build an Admin Dashboard Template in PHP and Boostrap 4

Updated on  2nd April

24 Min Read
Reading Time: 24 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.

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

Registration Form

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

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:

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

Products table

Sales table

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:

Registration

Login

For Errors , create the new file with the name of errors.php and paste the following code in it:

Create the Product Page

Next, create the product.php page and paste the following code in it:

Insert Products in the Database

Next, i will create pserver.php file in the root folder and paste the following code in it:

 

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:

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.

Setup the Dashboard

Here is the complete code for the dashboard view that you need to put in index.php:

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

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

Create PHP websites without the worry of server management.

Deploy your PHP app on optimized PHP hosting servers.

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

THERE’S MORE TO READ.