Dev: About Forms and Website Architecture

 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:

LLIR uses a relational database to hold all data we need for operational purposes, namely member profiles and the waitlist. We do not store member credit card details or any history records such a courses taken previous terms. Member profiles consists of data provided by members when they join LLIR, register for courses, or update their profiles.

The software that performs business processing acts upon the database and is called the back-end code. For example, back-end code adds people to the waitlist or updates member profiles when members submit forms in the My Profile section of the Member Menu. These forms are written in HTML and are embedded in webpages. The back-end code is written in language called PHP and is stored in WordPress as files that customize our implementation of the Kadence theme.

Exception: The Contact Us form in the Public Menu uses a different mechanism and does not touch the database. For an explanation, read the box under the heading Designing a Form below.

The LLIR website is a user interface between our organization and the public. It is made up of webpages, images and other files (such as PDF documents) that can display in most web browsers. One purpose of the website is to inform the general public about LLIR and explain how to join. Members use the website to do much more, including:

  • Find out who is on the Board and read a discover volunteer opportunities
  • Get detailed information about upcoming or current courses
  • Complete the annual registration form that includes course selection
  • Update their profiles
  • See notification of events such as meetings and snow days

The Registration Committee uses a set of utilities through a tool called FileMaker Pro. These utilities are not discussed in these Developer Notes, but they they must be compatible with back-end code because they operate on the same database. The hired programmer who writes the PHP code in the website also maintains these utilities.


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:

Architecture of the LLIR Website

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.

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

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.

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.

Warnings

How to Link to a Form

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.