Go Top

Introduction

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

The theme is fully responsive, fully optmized for mobile based application in mind.

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

Features

Key Features

  • Build with Bootstrap v5.3.3 [Latest]
  • Dark and Light Supported
  • Various layout options [check the demo]
  • Fully Responsive Design with mobile app development in mind
  • W3C standard Light-Weight Code
  • Easy to Customize with SCSS Variables
  • Paid and free support based on query
  • Unlimited Template Possibilities
  • User management (PHP) module (jQuery ajax based) with add / modify / delete / print functionalities
  • Fully Compactable with PHP 7.3 and 8.3

Layout Features

  • Light & Dark Modes
  • Fluid & Boxed Width
  • Fixed & Scrollable Positions
  • Light & Dark Topbars
  • Bootstrap Icon based Sidebar
  • Light & Colored Sidebars
  • Preloader Option

Other key Features

  • Form validation using jQuery validate (jqueryvalidation.org) based on html5 "required" tag
  • Beautiful icons using Bootstrap Icons (icons.getbootstrap.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/)
  • 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 (5.3.3) 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

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

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

css - 2 style shaeet files [one for dashboard area and another for project's common features]

images - for stroing system related images

js - for storing Custom javascript file(s)

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

phplib - for storing common php files and standard php class(es) [ex: phpMailer]

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

upload - for storing all user uploaded files

Layout Options & How

Please change in the html element of template/header.php 's data value. 
<html data-layout="vertical" 
	  data-layout-style="default" data-layout-position="fixed" 
	  data-topbar="light" data-sidebar="dark" 
	  data-sidebar-size="lg" data-layout-width="fluid" 
	  data-layout-mode="light" data-preloader="enable">
To view the available data values, view layout section of demo - https://webarcindia.com/v3dashboard/demos/layout.php

Modules Working Architecture

All modules consists of the following bootstrap modals & files (ex:- user 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.php: php function to generate json file for user module. This json file used in data-table to list user details
    header.php: header part of template
    <div id="toolbar">....</div>: Used for bootstrap DataTable
    DataTable: List records from _usewr.json which is generated using json.php
    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.
  • user.css: define necessary styles which apply only to this module. Common styles applied to all modules are defined in custom.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 app.jquery.js which is located in js folder under template 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 app.jquery.js which is located in js folder under template 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, store each field value to corresponding using jquery function.
  • modify.php: this file use to proces & save modified 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. If print.html template not present, printread.php generate data for printing. in printread.php have an option for print preview also.
  • check-user.php: this file used to verify the user id available in new user entry screen.

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)
  • print-modal: Template driven printing / pdf conversion purpose
  • 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.
    *: indicate required field. All required fields are validated using jquery validator before the 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 user list]. on confirmation of delete, system calls delete.php with data-id and data-other as values
  • 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. if print.html template not present, system generate print data internally using printread.php. The print-modal shows only if the printPreview=1 which can defined in config.php [global level] file or printread.php [module level] file
  • 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

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 user module we made as standard follow throughout the project [expect one extra file check-user.php]. In user.js one extra function for check user also. field validations using required tag and pattern.

We made 2 forms for new user registration

  1. Modal id add-modal comes with bootstrap5 floating label
  2. Modal id add-modal1 comes without floating label
files used
  • index.php: Most of the index.php file areas are self explicatory. here we use two more modals.
  • user.css: define necessary styles which apply only to this module. Common styles applied to all modules are defined in custom.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 app.jquery.js which is located in js folder under template 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 app.jquery.js which is located in js folder under template directory. before the ajax executation the form will validate using jquery validation for "required" fields.
  • editread.php: this file use to read the data which want to edit using ajax, store each field value to corresponding form field using jquery call. The edit-modal has two areas one for view data, next is for edit date if user click on edit button
  • 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.
  • json.php: this file use to generate json data using bootstrap dataTable [user list in user home].
  • check-user.php: this file use to check a login id is present or not in user table using ajax call.
  • print-read.php: this file use to print user details based on template or ajax output. If printer.html template file present in module directory, then printout is based on template else based on ajax output. Print preview option available on entire system [$printPreview variable] by config.php located in root directory, or change $printPreview value in print-read.php file only for current module.

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.

wizard 3rd screen contains country - state - city using nested select with search.

Rich Text Editor in Form

In the below form textarea replaced with WYSIWYG HTML editor [TinyMCE]

Menu Level Sample

Credits

Our heartful thanks to for giving endless support.