PHP JavaScript deferred Loading

Deferred loading is a programming technique to improve the performance of Websites by loading code only when needed. The purpose of this article is to show how to use deferred loading of Webpage parts using PHP and JavaScript in combination with AJAX and jQuery.

Deferred loading can also be used on CSS, but that is not the scope of this article.

Introduction

When a website loads, not all content is always necessary. So why should you load such content if you don't know the use is gonna use it? In this article is assumed that the website consist on (Bootstrap) navigation tabs. The user can have several roles that gives or denies him access to certain parts of the website. If the user has the admin-role, he may access everything including the admin tab. In that case you don't want to load the admin tab at all if the user hasn't the admin-role. But also if the user has the admin-role you do need the admin tab every time you access the website.

In that case you wanna use deferred loading.

Requirements

The framework we are going to make depends on PHP-server-coding and JavaScript-Client-coding. To clue the 2 parts we are using AJAX in combination with jQuery. The application loads a form with JavaScript validation and AJAX calls for checking and CRUD operations on the Database. The form has a Bootgrid part for showing the content of the database.

Used files

FileName	Description
AdminHomeDb.php	Front- and Backend for constants (variable-names), Form creation, Database CRUD methods and Database CRUD checks.
AppValidateJS.php	Frontend, generic validation and patterns, Bootgrid variables, Event for validation (on-blur).
AdminHomeJS.php	Frontend, form specific validation and patterns, validation objects, Events for specific validation (on-blur), AJAX getters for the form, AJAX CRUD, Timed Events for the form.
App.php	Main application PHP page, which contains the JavaScript .ready method.
App-co.php	Common PHP file which contains the link between the PHP-Frontend and the PHP-Backend, such as the Database connection and the common include files. For this framework it must contain the AJAX actions and request definitions.
App-be.php	Backend PHP file which contains the AJAX-Backend implementations. Specific for the PHP deferred loading this file contains the Form, Form CRUD and Form CRUD Checks Backend implementations.

• The App in the FileName is the MainApp, meaning the Main PHP Page. The App is split into 3 files App.php, App-co.php and App-be.php.
• The AdminHome in the FileName is the WebPage Tab (deferred Form).

Form Validation

The Application validation is based on Regex with validation objects (validator).

Validation Object

A validator for a string-name has the following JS-object . <syntaxhighlight lang="javascript"> var validHomeName = {

  environ  : "Home",
  name     : "<?php echo HS_HOME_NAME; ?>",
  qid      : sprintf('[name="%s"]'  , "<?php echo HS_HOME_NAME; ?>"),
  qcb      : sprintf('[name="cb%s"]', "<?php echo HS_HOME_NAME; ?>"),
  pattern  : "^[A-Za-z0-9À-ž&@#$\\*\\+\\'\\<\\>\\.\\,\\;\\:\\-\\_\\(\\)\\[\\]\\/ \\n]{3,20}",
  message  : "Length [3..20], alphanumeric",
  minlen   : 3,
  maxlen   : 20,
  flag     : "gi",
  value    : "",
  status   : jsoStatus

}; </syntaxhighlight>

Field element	Field description
environ	The environment for the form. In this case it is all about a house/home.
name	The name (label of the html-element). The PHP-Label-Definition is made in the AdminHomeDb.php OUTSIDE the class definition.

AdminHomeDb.php

This PHP file is used in the Frontend and in the Backend.

• [1] Constant declaration .
• [2] Class AdminHomeDb extends the abstract class CRUD .
• [3] Class AdminHomeDb has method createFormHouses which create the Client-Form .

<syntaxhighlight lang="php"> // [1] - The Constant definitions for the creation of the form (PHP) and the AJAX Client call (JavaScript) and the Mapping of the form Variables to the Backend (PHP). const HS_HOME_ID = "hsHomeId"; const HS_HOME_NAME = "hsHomeName";

// [2] - The class declaration. class AdminHomeDb extends CRUD {

  /**
   * [3] Creates the admin form for Home Maintenance.
   * @param  array $aReq Request parameters
   * @return void
   */
  public function createFormHouses( $aReq ) {
     $this->log->trace( sprintf( logFormatLBW, __method__, "aReq", print_r($aReq, true)));

$r = sprintf('

%s

', _h("admin-houses-header"));

     // Form Houses
     $r.= sprintf('<form id="adminhouses" class="form-horizontal" role="form" method="post" action="Energy.php" onsubmit="return validateEdit();">');

     // House / Home id
     $r.= sprintf('

           <label class="control-label col-sm-3" for="%s">%s:</label>

              <input class="form-control" id="%s" type="text" name="%s" placeholder="%s" disabled value="%s">

',

     HS_HOME_ID, _h('hs-home-id-label'),
     HS_HOME_ID, HS_HOME_ID, _h('hs-home-id-placeholder'), "Id");
     $r.= sprintf('

              <button type="button" class="btn btn-default btn-cons" name="%s" value="Update"   title="%s" %s>%s</button>
               
              <button type="button" class="btn btn-default btn-cons" name="%s" value="Clear"    title="%s" %s>%s</button>
               
              <button type="button" class="btn btn-default btn-cons" name="%s" value="Retrieve" title="%s" %s>%s</button>
               
              <button type="button" class="btn btn-default btn-cons" name="%s" value="Check"    title="%s" %s>%s</button>
               
              <button type="button" class="btn btn-default btn-cons" name="%s" value="Delete"   title="%s" %s>%s</button>

',

     HS_BUT_UPDATE  , _h('hs-but-update-title'  ), "disabled", _h('hs-but-update')   ,
     HS_BUT_CLEAR   , _h('hs-but-clear-title'   ), "disabled", _h('hs-but-clear')    ,
     HS_BUT_RETRIEVE, _h('hs-but-retrieve-title'), "disabled", _h('hs-but-retrieve') ,
     HS_BUT_CHECK   , _h('hs-but-check-title'   ), "disabled", _h('hs-but-check')    ,
     HS_BUT_DELETE  , _h('hs-but-delete-title'  ), "disabled", _h('hs-but-delete')
     );

     $r.= sprintf('</form>');

     return $r;
  }  // createFormHouses

  /**
   * [4] Update (and Inserts) the given admin-home.
   * @ajax       ajaxUpdateAdminHome
   * @javascript doAHUpdate
   * @param  array $aReq Request parameters
   * @return array $aRet Response parameters.
   */
  public function updateAdminHome($aReq) {
     $this->log->trace( sprintf( logFormatLBW, __method__, "aReq", print_r($aReq, true) ));
     if ( intval($aReq[HS_HOME_ID]) > 0 ) {
        $query = sprintf("

Update %s Set housename= '%s', .... Where id = %u; ",

        $this->popo->getTableName('houses'),
        $aReq[HS_HOME_NAME],
        ...

} // class </syntaxhighlight>