Steps to change UI

by Shailendra Paliwal
NTS Pvt Ltd
  1. Remove all tags under <title> tag upto custom javascript.
  2. Add the following PHP files in their place
<?php
include("headExtra.php");
include("requirements.php");
?>

Scroll down to end of the file, replace the following code

<div id="footer">
    <div class="wrapper">
        <span>&copy; Copyright 2012. All rights reserved. Niche Tech Solutions</span>
    </div>
</div>

replace this with the following code

<?php include("footer.php"); ?>

Optional: Check if any JS libraries (jQuery, etc) are being added in the end of file. If yes, remove them. requirements.php already includes all necessary JS libraries.

Body

Adding Navigation Bar

  1. Select from <body> upto (not including) <div class="content">.
  2. Replace this with the following code,
<body class="fix-header card-no-border">
    <div id="main-wrapper">
      <?php include("ntsheader.php"); ?>

Adding Breadcrumbs

Search <div class="content"> on the page and select the following code just below it,

<div class="title" >
    <h5 align="center">Maintenance Request Management System</h5>
</div>
 
<div align="center"><font size="+4" color="#993300" style="font-style:italic;"><b>Navigation Menu</b></font></div>
 
<?php include("hdmainmenu.php"); ?>

replace this with the following code,

<div class="align-self-center" name="margintop">
    <h3 class="breadcrumb">Maintenance Requests Management System</h3>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
        <li class="breadcrumb-item active"> WRITE NAME OF THE PAGE HERE </li>
    </ol>
</div>
<br />

Make sure to write name of the page in the code above.

Tables

  1. Add the following parameters to <table> tag
id="demo-foo-addrow" class="table m-t-30 table-hover contact-list footable-loaded footable" data-page-size="10"
Example,

Table tag before

<table id="box-table-a">

After adding parameters

<table id="demo-foo-addrow" class="table m-t-30 table-hover contact-list footable-loaded footable" data-page-size="10">

Table Column Headers

In hdtodayopeningcmp.php I selected the following column list,

<tr>
    <th scope="col">MaintReq_No</th>
    <th scope="col">LodgeFrm</th>
    <th scope="col">DateTime</th>
    <th scope="col">Contact_No</th>
    <th scope="col">Sector</th>
    <th scope="col">Building</th>
    <th scope="col">Flat</th>
    <th scope="col"><img src="images/icons/middlenav/play.png" /></th>
    <th scope="col">Category</th>
    <th scope="col">Type</th>
    <th scope="col">Maint.Req Descp</th>
    <th scope="col">Emrg</th>
    <th scope="col">Status</th>                   
    <th scope="col">Supervisor</th>
    <th scope="col">Remarks</th>
    <th scope="col" align="center"><img src="images/icons/color/mail.png" /><br />User</th>
    <th scope="col" align="center"><img src="images/icons/color/mail.png" /><br />Super</th>
    <th scope="col">Update</th>
</tr>

and replaced it with the following column list

<tr>
    <th class="footable-sortable">#<span class="footable-sort-indicator"></span></th>
    <th class="footable-sortable">Time<span class="footable-sort-indicator"></span></th>
    <th class="footable-sortable"><i class="zmdi zmdi-phone" title="Contact Number"></i><span class="footable-sort-indicator"></span></th>
    <th class="footable-sortable"><i class="zmdi zmdi-map" title="Address"></i><span class="footable-sort-indicator"></span></th>
    <th><i class="zmdi zmdi-tv-play" title="Medium of Request and Playback/Image"</th>
    <th>Category</th>
    <th>Type</th>
    <th>Description</th>
    <th>Supervisor</th>
    <th>Remarks</th>
    <th><i class="zmdi zmdi-comment-text" title="SMS Supervisor"></i></th>
    <th><i class="zmdi zmdi-alert-polygon" title="Emergency?"></i></th>
    <th>Action</th>
</tr>

In this replacement, I did the following things:

  1. Removed scope="col" parameter
  2. Replaced MaintReq_No with # or MR#
  3. Replaced Sector, Building, Flat column with one Address column
  4. Added Icons, to add a map icon add <i class="zmdi zmdi-map" title="Address">. Class of the icon can be looked up from this webpage. title parameter stores the tooltip text that will be displayed on mouse hover on the icon to explain what it means.
  5. To make a column sortable, add class="footable-sortable" and <span class="footable-sort-indicator"></span> inside the <th> tag.

Table Rows

  1. Replaced <td><?php print date("d/m/Y", strtotime($intime)); ?></td> with <td><?php echo date("h:m", strtotime($intime))."<br>".date("d/m/Y",strtotime($intime)); ?></td>
  2. Replaced three <td> tags displaying Sector, Building and Flat with the following code,
    <td><?php print "$mysector/$mybuilding/$myflat"; ?></td>

Other Modifications

  1. Replace class="greenBtn" with class="btn btn-primary" whenever they occur on page.
  2. See templatecard.php file to see more changes that can be done to the pages.
  3. optional: Remove class="iFrames" from <div> tags to remove box header icon inside pages.