This page discusses the handover point between the LLIR website and the automated processes that operate on our database. It first explains that the purpose of the website is to provide the online interface for LLIR members and visiting public. LLIR members submit forms on this website to update their personal profiles, renew their annual memberships and select courses. Users who are not members also can submit a form to join our waitlist. 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 focuses on:
> How HTML forms provide the bridge between the front-end user interface (the website) and the back-end code that operates on the database.
> Developing Forms
> How menuitems and in-page links open forms

Architecture of the LLIR Website

The structure of the LLIR website conforms to an architecture that is called Model-View-Controller (MVC) in computer-science terminology. MVC requires that the system be split into at least three independent layers, each of which plays a different role. The three layers that almost all websites have are:
> The Model or Persistence layer is usually a database. The term model refers to all digital information that is permanently stored.
> The View is the user interface. It is sometimes called the front-end of the system because it formats information for human readability and lets users interact with the system.
> The Controller is the mechanism that connects the model and view layers. This role is often called the back-end code because it is totally hidden from users. Part of its role is to shield the database from malevolent or erroneous user activity.

A goal of MVC to create clear separation among the layers and to define the protocols for how the layers interact. The following diagram shows how the LLIR website conforms to MVC.

Diagram of the LLIR website architectures show the Model/Controller/and VIew layers.

The MVC layers, shown on coloured areas above, reside on the server that hosts the LLIR website. See the Overview of our Platform for more details. The LLIR Webmaster uses the WordPress dashboard to maintain the contents of the view layer, the green area in the diagram. LLIR hires a programmer to write controller-layer code. The programmer creates the page templates that make up the blue area in the diagram. Each page template is a PHP file that performs all processing required by one form. These notes refer to the PHP files as back-end code because they extract data to display in forms and update the database, the orange area in the diagram, when the user enters information into the forms.

The LLIR Registrar and Registration Committee have a separate interface they use to query and modify data using FileMaker Pro. The registration, waitlist and other processes implemented in FileMaster Pro make up LLIR’s IT infrastructure that is beyond the scope of these Developer 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. The LLIR database is also accessed remotely by the FileMaker Pro installations on laptops belonging to the programmer and the LLIR Registrar.

Developing Forms

All forms in the LLIR website are created and maintained by our hired programmer. His approach is to merge the HMTL tagging that defines a form into a PHP file. PHP is his choice of programming language. Each form and its associated 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.

Warnings

Designing Forms

If you want to modify a form or create a new one, giving the programmer a detailed mockup of the visual design of the form is a good idea. The mockup can be any document that specifies the content and layout of all text and 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(s) HTML, you can create mockup forms that look and feel exactly like final forms. 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.

The 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. To see an example, view the mockup for the Change Password form or open the page ZZ Change Password. You can view and edit the source by opening this page from the dashboard.

How to Link to a Form

Menu items and in-page links (including buttons) cannot open page templates directly. Therefore, a link page is required for each form. For page template, you need an ordinary page with the characteristics listed below. Then you can link from a menuitem or in-page link to the resulting 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 an example of a link page, open page Change My Password for editing from the dashboard. In the Settings panel, see that the template is LLIRTO_Change_Password.