In this section we need to explain and provide a simple flow chart of the process of displaying a page and dynamic content for that page. We will base our explanation on a page from our main website, Cliqon.Com which displays useful links. As we proceed through the explanation, you will appreciate that some elements of the programming code have been redacted for reasons of security.

Page process

Irrespective of what the URL contains, all Requests on the webserver are processed through index.php. This is achieved by configuring the .htaccess and web.config files.

Index.Php checks that the system is installed and if so, loads and processes Startup.Php.

Startup does:

- loads Tracy debugging

- loads a set of functions that enhance the PHP language

- loads Registry and creates an instance of the Registry Class, known as $clq

- sets various path constants in the registry

- loads the site configuration and adds that to the registry

- loads and processes the database connectivity using Redbean

- loads various Classes *, makes the registry aware of them and instantiates them via the registry

- starts the Session

- loads the routes configuration

- causes the Router to process the routes

Router does:

- the Router parses the URL, breaks it down into its component parts and matches the component parts against a route using RegEx

- if the Router makes a match, it invokes the corresponding named Controller

- if the Router does not make a match it displays the default Controller which displays the Home or initial page

Named Controller does:

- some Named Controllers, load and extend the base Controller

- the base Controller sanitises any REQUESTs

- the Named Controller discriminates between GET and POST requests and between AJAX and non AJAX

- in this example, our method is a non AJAX GET request and therefore Method -> page_exec(), will handle it

- more Classes loaded, including App - Cms and Core - Menu

- variables are set in the Registry

- template variables are created, including a JSON web token suitable for a "visitor" to the website and the site configuration etc.

- the content for the specific action is now requested from the Cms Class

PHP Cms Class does:

- via a process of choosing and switching execution to the final method, according to the values of the various parts of the URL: content -> list -> weblinks, the Cms Class has assembled enough information to know which component template to use - in this case weblinks.tpl which it will find in views/components/.

- the Class and Methods will also be able to load and parse a configuration file for this method and be able to provide sufficient data and options to a Vue function that will be loaded by the master page as a partial (script.tpl)

- the method publishes the component template, that is the template is parsed to a string

- as the method only returns a string, before it is returned, any Javascript code, variables, functions, methods and data that will be required by the template are set in the Registry as a JS variable

- the content variable is populated with populated with the HTML string returned from the Cms Method

- the template script variable is populated by getting JS from the Registry

- the page template to be used (page.tpl) is identified and this name and the variables are passed to the Template Class and Engine

- the Template engine parses and transforms the remainder of the master template which it loads from the views/ directory

- within the master template are several includes to sub templates. These are loaded by the Template engine, included into master template

- the entire collection - master template, partials and component template is assembled into one static HTML stream and this is echoed to the client browser

Template partial Header.Tpl does:

- at this point the Client browser will be summoned into action to do something with the requests for assets. These will include a single call to a master stylesheet loader - style.css and a single call to a javascript loader - basket.js

Stylesheet Style.Css does:

- imports all the stylesheet and font assets configured as imports

Template partial Script.Tpl does:

- configures a number of global Javascript variables

- possibly loads a Javascript language array

- invokes the "basket" function

Javascript function basket does:

- basket works its way through a list of Javascript libraries and files and loads them into Local Storage (see Basket.Js options for clearing the caches and skipping loading from the cache for certain files during development) asynchronously

- when all Javascript assets are loaded, the basket function can act like a "document.ready" and invoke a whole range of Javascript and jQuery functions to listen for events in the browser environment (such as changes, clicks and hovers etc.)

- at the end of the "ready" block, the page scripts are included by the template engine.

- within the page scripts is a Javascript function call to a Class and Methods in one of the Javascript files that was loaded, in this particular case, it will be App.weblinks(options)

Javascript function App.weblinks does:

- invokes an instance of Vue on the Div with the list-group ID  in weblinks.tpl. The Vue instance contains a configured object which it will use as options. The Object contains key / value pairs where the majority of the values are arrays or objects in their own right.

- Vue object methods contains functions to search the list, clear the search field and reset the list

- Vue object mounted contains functions to load the data ( loadData() ) and handle the pagination of the list ( pager() )

Javascript Vue mounted function loadData does:

- based on the information in the options which will be modified and enhanced by entries in the search field plus clicks on the pagination video controls, the function generates a URL and requests the data from the webserver using an API call (not AJAX as it assumed to be JSON and maybe remote) and therefore it includes a JSON web token.

- on receipt of a successful AJAX response based upon the return of an Ok flag plus usable data, the Vue data record is updated with the response returned from the server and because of what Vue does and the way it performs, the data is written as list items in the list group

- basket ready closes with an error handler if there are acute problems loading the files from the disk or from Local Storage

- any functions coded into script.tpl, outside of the basket ready are included at this point

That completes the page cycle until the user clicks on another menu item or invokes another event.


* need to sort out autoloading

Created with the Personal Edition of HelpNDoc: Full-featured multi-format Help generator