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.
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...