Coding a Bootstrap Admin Theme in PHP Part 1: Installation & Overview

AdminLTE bootstrap admin theme

Bootstrap is a very popular CSS framework (and much more). I am going to use this series of articles to complete a Bootstrap admin template that is on Github. This series will show you how to properly plan and execute a software build. This theme is full of options that were dreamed up by the designer. Our job is to make the dream come alive and function.

Boostrap AdminLTE Theme

AdminLTE bootstrap admin theme

AdminLTE bootstrap admin theme

You can download the theme we will be using from Github (https://github.com/almasaeed2010/AdminLTE.git).

sudo git clone https://github.com/almasaeed2010/AdminLTE.git

The git command above will create a directory named AdminLTE which has the code from the github repo. Once it is downloaded, open it in your browser and let’s check out some of the features we will be implementing. While you are viewing the demo template you should be taking notes of the different pages we may have to create.

Top Navbar

admin navbar dropdown

Navbar drop down list

The top navbar has some features on it. There are several icons which appear to be notifications for messages, alerts, notifications of some other kind, a profile picture of the admin logged in, and a gear icon that probably goes to a settings page. The icons have dropdowns with more information about the notification. The settings “gear” icon, is a sldie out menu that has options for the theme, this will be removed in production.

 

Index Content

bootstrap theme to do list

Bootstrap theme to do list

Not all the features need to be implemented, and there are so many features from a creative designer that we have plenty to pick and choose from. Some of the features include a calendar, to do list, back-end chat system for admins, a google map displaying visitors, sales charts and more.

There is a second index provided with this theme. This index has other features not shown on the first index. Some of these other features are a list of the latest members, a list of the latest orders, last products that were added and some other SEO type stuff.

bootstrap admin demo pagesThis theme also comes with some sample pages that we can utilize. These pages include: an invoice page, a profile page, 404 and a blank page to help create our own admin page. There is a login page that has social login options as well. This is something we will be implementing into the admin theme as it will make the ability to have our administrators have a simple login process. Everyone likes a simple social login.

There is also an extensive page for the mailbox messages. I am going to assume these messages can be for anything. This could be for handling error related messages on the site, messages for comments or messages from members or other admins. The pages have examples for reading a message and sending a message as well.

There is also a calendar page that is very in depth with draggable elements. I am not sure if we will implement this feature. It will handy to keep around in case we want to use it later on for something else in the back-end.

Looking at the HTML

admin bootstrap header

Admin bootstrap header

I am not a very good designer. I rely on designers to deliver themes to me for integration into many different types of back-end systems. Later in the series we will be breaking the pages into template files for a template engine. Right now, we should check out the HTML and how things are put together and how easy or hard it will be to break out sections of the page into template files.

On the left you can see some of the code for the header. It looks like it might be able to just be pulled right out of there and into it’s own template file. The HTML looks very good, a bit clouded with comments but that’s to be expected.

Leave a Comment

Your email address will not be published. Required fields are marked *