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.
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.
- 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
- 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
- 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:
Stylesheet Style.Css does:
- imports all the stylesheet and font assets configured as imports
Template partial Script.Tpl does:
- invokes the "basket" function
- at the end of the "ready" block, the page scripts are included by the template engine.
- 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() )
- 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