Go Top

Introduction

Dashboard built using latest Bootstrap (4.1.3) with unique features and clean design for web based application developers & designers.

The theme is fully responsive, but fully optmized for desktop based application in mind (Perfectly fit in Tabs & mobiles also).

Two set of menus, one on left side bar and another on top right side. The left side bar have sub menu options (upto 4 levels)

Able to collapse the leftside menu and full screen option is also availabe for more space

General Features

  • Theme Options: Left side collapsable Menu (for more space), upto 4 levels of Menu in leftside, Mega Menu Option, On-top menu, Full Screen Option (for more space).
  • Theme Colors can change using custom.style.css which is located in root/css
  • Navigation options: scrollable and normal navigation menu
  • Fixed-top & Fixed-Left navigation, for better accessibility
  • Many chart types includes interactive and real-time charts based on chartjs.org. Data extracted from MySQL table.
  • Form validation using jQuery validate (jqueryvalidation.org) based on html5 "required" tag
  • Beautiful icons using font-awesome (fontawesome.com)
  • search in input select box using bootstrap.select
  • Date-picker in input box using Air Date-picker
  • Autocomplete in input box using jQuery.autoComplete
  • Data Table using bootstrap table (github.com/wenzhixin/bootstrap-table/)
  • Generate PDF using jsPDF and its addons html2canvas, jsPDF-AutoTable
  • Print Template driven content or HTML content using printThis jQuery plugin
  • Working forms (simple form, User Registration form, an Invoice form, form wizad for User Registration,...) with complete process example and input validation
  • Login form validation done using event listner method
  • Tested on Cross-Browser & Cross-Platform
  • Built with latest BootStrap framework
  • Form submissions process using jQuery Ajax & PHP

in jQuery submission process, form tag has rel attribute to identify the type of form.

  1. frm_jquery - normal form
  2. frm_modal - Form inside bootstrap modal box
  3. frm_wizad - form used for wizad based
  4. frm_report - form used for report generation

Folder structure

admin - All admin related pages are stored in admin folder.

Each module have seperate folder under admin folder for easy modification and debuging (module file structure will explain seperately)

cache - All runtime generated json pages [temperory pages] are stored in cache folder

css - 2 style shaeet files [one for admin area and another for home page]

images - for stroing system related images

js - for storing Custom javascript file(s)

lib - for storing common php files

process - for storing process files [login, change-password,...]

template - for storing template files. at present 2 template system [header / footer ] are stored, one for login which does not required more features and another for admin area

theme-addons - additional ui components, theme features examples, bootstrap cheetsheet, color options and many more... This folder is not required in the template system. only for cut & paste the code to reduce the time for developing application.

theme-packs - contains all theme components. just copy the particular theme folder content [ex:- vertical-theme-02] to the template folder to change the theme. At present provide 4 themes with 3 variations for each theme.

upload - for storing all user uploaded files

vendor - all third party framework files (css, js, ..) are stored in this folder with seperate sub-folders

Module Working Architecture

All modules consists of the following bootstrap modals & files (ex:- branch management module). Useing bootstrap modal window, all basic operations (add, modify, delete, print) are done in the same screen.

files used
  • index.php: Most of the index.php file areas are self explicatory.
    config.php: common variables & basic configurations are defined here
    authenticate.php: user authentication checking are done here incluse whether user logined or not, session time checking.
    $css: all module specific css files are defined
    $js: all module specific javascript files aredefined
    db_funstions.php: db related functions & class are defined
    json_branch(): php function to generate json file for branch module which is defined in db_functions.php. this json file used in data-table to list branch details
    header.php: header part of template
    <div id="toolbar">....</div>: Used for bootstrap DataTable
    DataTable: List records from _branch.json which is generated using json_branch()
    footer.php: footer part of template
    Two modals (add-modal and edit-modal) are defined in index.php and remaining modals which are common for all modules are defined in footer.php which is located in template folder under root directory.
  • branch.css: define necessary styles which apply only to this module. Common styles applied to all modules are defined in custom.style.css which is located in css folder under root directory.
  • branch.js: define necessary js / jQuery actions which apply only to this module. Common js / jQuery actions applied to all modules are defined in admin.js which is located in js folder under root directory.
  • new.php: this file use to process & save new branch details when submitting the form. the submission process can be carried out using jQuery ajax call in admin.js which is located in js folder under root directory. before the ajax executation the form will validate using jquery validation.
  • editread.php: this file use to read the data whchi want to edit using jquery, store each field value to corresponding using jquery function.
  • modify.php: this file use to proces & save modified branch details when submitting the form. the submission process can be carried out using jQuery ajax call. before the ajax executation the form will validate using jquery validation.
  • delete.php: this file use to proces the deletion request.
  • print.html: this file used as template for print or PDF conversion for a specified data.
  • printread.php: this file used to generate data for print.html template. the template element id(s) and return value names must same.
  • process-report.php: this file used to process complecated reports. here the output must be in html format. [no template used for this].
  • process-selected-datatable.php: this file used to process the bulk action on dataTable toolbar "OK" button.
Commonly used Modals
  • add-modal: define form used for adding new records
  • edit-modal: define form used for editing records
  • delete-modal: confirmation system used for removing record(s)
  • selectall-modal: confirmation system for bulk data operations
  • print-modal: Template driven printing / pdf conversion purpose
  • report-modal: for preview report before print / PDF conversion
  • logout-modal: confirmation system beforing loging out
Modals in Details
  • add-modal: modal basic elements are explained below
    <form id="add-form" method='post' action='new.php' rel='frm_modal'>: frm_modal identified the form type when submitting.
    <div id='output-modal'></div>: used to show error / notification messages in operations
    *: indicate required field. All required fields are validated using jquery validator before start submission process
  • edit-modal: Before showing the edit-modal system calls edit-read.php to read data from database and store to the respective fields in the edit-form. Most of the elements are similar to add-modal. additionally we define Delete button
    Delete button: contains 4 data values [data-id - id of record, data-title - Title of delete confirmation modal, data-fromedit='1' - delete confirmation modal require from where the deletion request comes, data-other - require to pass any extra values for deletion process.
  • delete-modal: This modal called from edit-modal or dataTable [here branch list]. on confirmation of delete, system calls delete.php with data-id and data-other as values
  • selectall-modal: this modal cal on clicking of OK button on dataTable. on confirmation of bulk action, system calls process-selected-datatable.php with selected entries ids as value.
  • print-modal: before showing this modal, system calls printread.php and place the data to print.html template which is located in module. Each module has its own print.html template. The print.html template element id and the printread.php return variables must same. This preview modal has two options either to print or convert the content to PDF.
  • report-modal: before showing this modal system calls process-report.php and place the output in this modal. This preview modal has two options either to print or convert the content to PDF.
  • logout-modal: this confirmation modal calls when user click on logout mene on top right. on confirmation system clear all session values and back to login screen.
Template based print/PDF preview

Module Working Architecture (simple form)

The branch management module contains the listed file which explained below. This module contains List all branches, Add New Branch, Edit Branch and Delete Branch. All these operations are done in the same screen. uses bootstrap modal window to achive

  • index.php: Define the forms for Add Branch, Edit branch, List records (using jQuery Data Table)
  • branch.css: define necessary styles which apply only to this module. Common styles applied to all modules are defined in custom.style.css which is located in css folder under root directory.
  • branch.js: define necessary js / jQuery actions which apply only to this module. Common js / jQuery actions applied to all modules are defined in admin.js which is located in js folder under root directory.
  • new.php: this file use to proces & save new branch details when submitting the form. the submission process can be carried out using jQuery ajax call. before the ajax executation the form will validate using jquery validation.
  • editread.php: this file use to read the data wchi want to edit using jquery, store each field value to corresponding using jquery function.
  • modify.php: this file use to proces & save modified branch details or delete the data based on the button click. the submission process can be carried out using jQuery ajax call. before the ajax executation the form will validate using jquery validation.
  • delete.php: this file use to proces the deletion request.

Login Form

This form validate using html tag required and window.addEventListener

This form process using jQuery ajax

On successfull completion of the form submission process and validation (check with user table in database) system re-directed to dashboard area

User Registration form features

The below User Registration form have the following features

  • Process Image on form submission
  • Date of Birth using custom date picker plugin
  • custom radio using bootstrap
  • replace country, state, city select box with searchable select using bootstrap.select plugin
  • nested select for country, state, city. ie based on country selection, state list generated. when state selected, its city list generated.
View Profile Photo Confirmation Photo Delete
files used
  • index.php: Most of the index.php file areas are self explicatory. here we use two more modals. one for view photo and other modal photo deletion confirmation.
  • check-user.php: this file used to verify the user id available in new user entry screen.
  • user.css: define necessary styles which apply only to this module. Common styles applied to all modules are defined in custom.style.css which is located in css folder under root directory.
  • user.js: define necessary js / jQuery actions which apply only to this module. Common js / jQuery actions applied to all modules are defined in admin.js which is located in js folder under root directory.
  • new.php: this file use to process & save new user details when submitting the form. the submission process can be carried out using jQuery ajax call in admin.js which is located in js folder under root directory. before the ajax executation the form will validate using jquery validation.
  • editread.php: this file use to read the data which want to edit using jquery, store each field value to corresponding form field using jquery call.
  • modify.php: this file use to proces & save modified user details when submitting the form. the submission process can be carried out using jQuery ajax call. before the ajax executation the form will validate using jquery validation.
  • delete.php: this file use to proces the deletion request.
  • delete-photo.php: this file used to delete the profile photo.
  • process-selected-datatable.php: this file used to process the bulk action on dataTable toolbar "OK" button.

Invoice form features

one of the most advanced form, developers required

  • invoice date using datepicker plugin. the upper date range is current date.
  • customer code can select using searchable select
  • or customer name can type in customer name field. this field uses jquery.autocomplete plugin
  • The invoice detail area uses input array to accommodate any number of items.
  • product can choose either from product code [searchable select box] or product description [autocomplete]
files used
  • index.php: Most of the index.php file areas are self explicatory. Additionally here we use one modal for delete conformation of invoice item in edit area, other modals are used for filter data for report and graph.
  • customer-list-bootstrap-select.php: this file uses to process customer code selectbox.
  • customer-list-autocomplete.php: when user type customer name, system generates the matching list using this file and onSelection process also uses this file.
  • delete.php: this file used to proces the deletion request of invoice.
  • editread.php: this file used to read the data which want to edit using jquery, store each field value to corresponding form field.
  • invoice.css: define necessary styles which apply only to this module. Common styles applied to all modules are defined in custom.style.css which is located in css folder under root directory.
  • invoice.js: define necessary js / jQuery actions which apply only to this module. Common js / jQuery actions applied to all modules are defined in admin.js which is located in js folder under root directory.
  • modify.php: this file use to proces & save modified invoice details when submitting the form. the submission process can be carried out using jQuery ajax call. before the ajax executation the form will validate using jquery validation.
  • new.php: this file use to process & save new invoice details when submitting the form. the submission process can be carried out using jQuery ajax call in admin.js which is located in js folder under root directory. before the ajax executation the form will validate using jquery validation.
  • newread.php: this file uses to generate the invoice number before starting the new invoice entry.
  • print.html: this file used as template for print or PDF conversion for an invoice.
  • printread.php: this file used to generate data for print.html template. the template element id(s) and return value names must same.
  • process-report.php: this file used to process complecated reports. here the output must be in html format. [no template used for this].
  • process-graph.php: this file used to process data for chart based on the input values
  • process-remove-row.php: this file used to process remove invoice item in edit invoice
  • process-selected-datatable.php: this file used to process the bulk action on dataTable toolbar "OK" button.
  • product-list.php: file used for generate Select box product code data in invoice item
  • product-list-autocomplete.php: file used for autocomplete product detail
  • product-list-bootstrap-select.php: file used for process product code on selection

User Registration - Form Wizad

The below User Registration form have the following features

  • In this each input field validated [required tag], when moved to next screen.
  • Support any number of screens
  • when editing, uses seperate modal box for each section.

Float Label on Form

This is the replica of simple form with float label option

jQuery Data Table Basic

The below list is Branch details using jQuery Data Table with Search Option

branch List (10 entries per page) Result of Search Branch name contains 'n'

Chart / Graph

Visualize the data using chartjs.org

Chart on Modal Window Dynamically get value from table using jQuery AJAX

Menu Level Sample

a blank page when submenu clicked

Our heartful thanks to for giving endless support