Wizard’s Toolkit Documentation

Wizard’s Toolkit Design Methodology

Originally Wizard’s Toolkit was developerd for MPA - Multi Page Applications. When development expanded into mobile apps we tested other frameworks but did not like their caching and DOM usage so we created our own Single Page App methodology.

Table of Contents

Multi Page Applications
Single Page Applications
JavaScript Functions

Multi Page Applications (MPA)

If you need SEO then Multi Page methodology is the best. Every page will have a unique URL so they can easily be crawled by search engines.

There are two functions used for generating MPA. At the bottom of the PHP page these functions will pull in the HTML template and fill it with the data-driven results or other results you coded in the rest of the PHP page.

Functions

wtkMergePage()

For most MPA pages you will call this at the bottom of the page. Calling method:

<?php
$gloLoginRequired = false;
require('wtk/wtkLogin.php');
$pgHtm = 'Hello World';

wtkMergePage($pgHtm, 'Your Page Title', 'wtk/htm/mcbox.htm');
?>

Full specifications on this function at: wtkMergePage()

wtkFillBrowsePage()

When the entire page is just a list of SQL data then you can call this function and it will handle everything. This function bundles the two most powerful WTK functions: wtkBuildDataBrowse and wtkMergePage. Calling method:

<?php
$gloLoginRequired = false;
require('wtk/wtkLogin.php');

$gloHTMLtemplate = 'wtk/htm/mcbox.htm';
$pgSQL = 'SELECT `FirstName`, `LastName`, `City` FROM `wtkUsers`';
wtkFillBrowsePage($pgSQL);
?>

Full specifications on this function at: wtkFillBrowsePage()

Single Page Applications (SPA)

A Single Page Application loads all the HTML framework, external CSS and JS files upon initial visit to the web page. Thereafter all navigation and content is done via AJAX which retrieves from PHP pages the minimal HTML necessary and displays them in <div>’s. This methodology is extremely fast because the external CSS and JS files never need to be retrieved, nor the main HTML framework. You are basically just filling a <div>.

Wizard’s Toolkit is built for data-driven development. If the retrieved value is going to be static, aka never changing, then most likely it should be included in the originally downloaded HTML and hidden until needed. Of course that is assuming there is no sensitive information in this “static” information. Therefore we do not cache pages because it is uncertain as to when the data may have changed.

As a user navigates the page request is put into a JavaScript array. A back-link is possible to show and will automatically call the previously visited page. By default going to the Dashboard clears the "back history array".

For navigation all is done via JavaScript function calls which call PHP pages. The primary JS function calls are as follows:

JavaScript Functions

ajaxGo()

Navigate to new page.

ajaxGo(fncPage, fncId=0, fncRNG=0, fncAddPageQ='Y')

This directs user to new page.

Parameters
fncPage : string
Name of PHP page to direct to. The '.php' is appended.
fncId : integer
If page is a data lookup, put in unique identifier here.
fncRNG : integer
If page is a list based on a parent ID, put in parent identifier here.
fncAddPageQ : string
Defaults to 'Y' in which case will add to history queue. If pass 'N' then will not add.
Action

Uses AJAX to retrieve HTML returned by call to fncPage and displays it in mainPage div.
Example call which will display contents of userList.php:

<a onclick="JavaScript:ajaxGo('userList');">

Example call which will display contents of taskList.php associated with parent ProjectUID of 8:

<a onclick="JavaScript:ajaxGo('taskList',0,8);">

ajaxPost()

Post data and navigate to new page.

ajaxPost(fncPage, fncPost, fncAddPageQ='Y')

This posts data from an HTML form then directs user to new page.

Parameters
fncPage : string
Name of PHP page to direct to. The '.php' is appended.
fncPost : string
This is the id of the <form>.
fncAddPageQ : string
Defaults to 'Y' in which case will add to history queue. If pass 'N' then will not add.
Action

First checks to see if any required form fields are empty. If so it gives a warning using the <label> value. If it passes the "required" test then it serializes the <form> fields and posts them to the fncPage.php using AJAX. You should have that PHP page return the results or page to show which will then be displayed in the mainPage <div>.
Example call which will display contents of userList.php:

<a onclick="JavaScript:ajaxPost('ajxSaveTask','wtkForm');">

Example call which uses Wizard’s Toolkit saving methodology then redirects to taskList.php::

<input type="hidden" value="taskList.php" id="wtkGoToURL" name="wtkGoToURL">
<a onclick="JavaScript:ajaxPost('/wtk/lib/Save','wtkForm');">

The rest of this section's documentation is coming soon...

goHome()

Transition to Dashboard.

goHome()

This hides current page and displays dashboard. It also triggers retrieving any new dashboard counts and updating widgets if applicable.

<a onclick="JavaScript:goHome();">

More JavaScript documentation is coming soon...

Search results