If you are not familiar with WordPress, read the overview of our platform first. Refer to our Implementation Strategy for more about how the website is split into separate viewing areas for LLIR members and the general public.
This page takes a deeper dive into the overall structure (architecture) of LLIR’s software than the introductory pages mentioned above. Think of LLIR software as having the following four distinct parts:
All software that performs business processing such as assigning courses based on seniority, maintaining the waitlist and updating data entered by users when they complete forms makes up what is called the back-end code. It is written in language called php and is stored in WordPress as files that customize our implementation of the Kadence theme.
A database that holds all member data that LLIR needs, namely: the information that makes up member profiles. We do not store member credit card details or any history records such a courses taken previous terms. All stored information is provided by members when they join LLIR, register for courses, or update their profiles using the website. (Membership and course fees are paid through a third-party utility that is accessed from the annual registration form.)
The website is the user interface used by members to access information and update their profiles and by the public to read about LLIR and join.
An additional set of utilities, available to the Registration Committee through a tool called FileMaker Pro, is not discussed in these Developer Notes.
This page hopes to explain the roles and responsibilities associated with different parts of the software.
LLIR pays a professional programmer with expertise in FileMaker Pro and knowledge of website development. The programmer reports to the LLIR Registrar and writes all code related to database operations and FileMaster Pro utilities. This person must be a WordPress administrator to have access to our website and the master database.
Maintaining the website is the responsibility of the webmaster, an LLIR volunteer who must learn and then use WordPress tools. The webmaster does not have access to the code and files maintained by the programmer.
In general, content of the website is approved by a committee or the entire LLIR Board. However, the webmaster must have the authority to make time-sensitive or minor changes, typically modifications that fall within the scope of a single webpage, quickly and independently.
The webmaster also is responsible for ensuring styles (fonts, colours and more) are applied consistently throughout the website and has the authority to make make modifications that make draft content to approved styles.
The goal of this author, a former webmaster, is to clarify the separation of authorities between the programmer and webmaster within the WordPress environment. All changes to the Website should be made with approval and knowledge of the webmaster. This issue has become sore point in the past and is still a grey area when it comes to forms, as explained below.
Read on to learn more about:
How HTML forms provide the bridge between the front-end user interface (the website) and the back-end code that operates on the database.
The design of the LLIR website is based on a clear separation between business processing and user interface. The design is enforces by three layers that are the industry standard for web application architecture, sometimes called Model-View-Controller (MVC). Forms are the points where the two sides meet and belong to a third layer: the interface layer between the back-end and front-end code. MVC lets developers modify the content the website without affecting operations on business processes and update business operations without forcing changes to the user interface.
The following diagram shows the layers in the LLIR website. The View layer is what users see. The Model layer composed of business logic and database processing. The actual database is often considered a separate fourth layer called Persistance. The middle layer is called the Controller because all it controls the transmission of user input to the business logic and then returns results for the user to see.
The boxes on coloured backgrounds above reside on the server that hosts the LLIR website. The webmaster uses the WordPress dashboard to maintain the contents of the View layer, the green area. The programmer creates the page templates that make up the blue area or Controller layer. Each page template is a php file that performs all processing required by one form, including extracting information from the database to display when the form opens. The php code also writes updates to the database after the user submits the form by calling php functions that make up the orange area.
Notes
MySQL is a free but fully functional database product that supports industry standards and the SQL language for relational databases. LLIR uses an installation of MySQL that resides on the same server as our website.
Our MySQL database is also accessed remotely by FileMaker Pro utilities that are installed on laptops used by the Registration committee. The utilities run wholly outside the WordPress environment
Developing Forms
All forms in the LLIR website are created and maintained by our hired programmer. However, like all website content, the design and content of forms must be approved by the Board.
Designing a Form
If you want to modify a form or create a new one, give the programmer as precise a specification of the visual layout as possible, plus detailed requirements for validation of user input. For example, phone numbers must contain exactly 10 digits. The visual design can be any document that specifies the content and layout of all text and all controls (entry fields, buttons and the like) that you want to appear on the form. Taking this approach means reviewers can proofread and approve the mockup before the programmer starts writing the back-end code.
If you, or a volunteer helper, know HTML, you can create specifications that look exactly like the final forms. These HTML mockups can even perform some input validation, but cannot run back-end code to display or update information stored on the database. To mock-up a form in HTML, create an ordinary webpage and add the Kadence block type custom HTML to the page.
HTML mockups for the forms in the My Profile section of the LLIR website are included at the end of the WordPress All Pages panel. These pages have titles beginning with ZZ so that they are the last pages in the list. For an example, first look at the published Change Password form. Compare it to the mockup page ZZ Change Password. You can open this page from the Dashboard.
WordPress plug-ins are available that support building forms without dropping into HTML. If LLIR feels a need to bring form design under control of the volunteers, investigating plug-ins may be an option. However, the code generated by plug-ins is always complex using one would add considerable work to the programmer task of integrating forms with the back-end code.
The opinion of this author is that LLIR forms tend to so simple that they are best coded in raw HTML.
The website contains one a form generated by a plug-in: the public Contact Us page. It was imported into the LLIR website as a WordPress sample page. We can use this page because the form does not touch the database or require any back-end processing. If you look carefully, you can see that fonts and other style setting on this page do not conform to LLIR standards. If you inspect the page to see the code (using a browser inspect feature), you can see that the page types of block and style setting imported from another website. As a result, this page is virtually impossible to edit.
Implementing a Form
The programmer completes each form by merging the HTML <form> tag from the prototype page into a php file. Each form and its associated php code is is stored as a page template. Page templates are a feature provided by Kadence for including custom code in a WordPress website that uses the Kadence theme.
Accessing Page Template Files
Our paid programmer is the sole developer of all PHP code in our website. He creates a Page Template for each form in the website. Each Page Template contains the HTML code that tells the web browser how to display the form and the PHP code that performs associated processing.
Page Templates are not visible from the WordPress dashboard However, you can use them to access forms by using what these notes call link pages.
Files that contain PHP code are considered to be extensions to the theme because they because they add custom functionality to our website. Page Templates and possibly other PHP files maintained by our programmer are stored with the files that make up our installation of the Kadence theme.
Page Templates are accessible only from CPanel. The LLIR Webmaster has access has access to CPanel and uses it for a variety of administrative functions. To access the Page Templates:
Go to the File Manager section of CPanel.
Nagivate to the folder: public_html/llirto.ca/wp-content/themes/kadence
Every Page_Template is file with a filename that starts with LLIRTO_ and has extension (file type) .php. The rest of the name should indicate which form.
To download one Page Template, right-click on it and select Download. You can use the shift key to select all or several of them to download at once.
After you download a Page Template, you can modify it (using great care and flat-text or specialized code editor) and then upload the new version.
When the WebMaster or another administrator updates the Kadence theme from the WordPress dashboard, all Page Templates are deleted, so keeping a current copy of all Page Templates is essential. Our programmer currently does that.
Warnings
Page template files are not visible to WordPress administrators so every request for a modification to a form must be submitted through the LLIR Registrar, to whom the programmer reports.
Menu items and in-page links or buttons cannot open page templates directly. You must create a link page for each form. A link page is an ordinary page with the characteristics listed below. As a result, the form opens when a user clicks a menu item or button to the link page.
The title of the page matches the title of the form.
The page is based on the template specified by the programmer. In contrast, ordinary webpages use the Default template. To create such a page in the editor:
Add a new page and give it a title as usual.
In the editor, open the Settings panel and make sure Page is selected at the top of the panel.
To the right of Template, select the appropriate page template from the dropdown list.
Because the contents of such a page are never visible to users, add note for developers so that they never delete a link page thinking it is not used because it has no contents except a title.
In the editor Settings panel, set check the box under Search Exclude so that forms never appear in results of the WordPress Search feature.
Save the page as usual.
Opening a link page automatically invokes the page template to start executing the php code and display the form.
Example Link Page
To see a sample link page:
From the Dashboard, open page Change My Password for editing from the dashboard.
In the Settings panel, verify that the template is LLIRTO_Change_Password.
