05 May Languages and Technologies
This page provides an outline of the languages and technologies used on the FHA website. It is not meant to teach the reader how to use them, but is a guide to assess a reader’s readiness to dive into the website and perform development and/or maintenance on it.
Before fleeing in horror, let it be said that much of the site is easily managed and controlled using the Joomla Content Management System (CMS). This includes the creation, maintenance and retirement of articles (including those on the Front Page and News tabs of the website’s home page). The Groups tab’s source is a simple Joomla article, but its formatting is controlled by a bit of specialized CSS which you can see if you edit the article. (More about CSS later). The Bulletin Board is another matter, as its “source engine” contains about every one of the languages and technologies you’ll see below.
HTML (Hypertext Markup Language)
You will likely encounter bad HTML within Joomla articles written entirely in the Joomla editor (JCE or Joomla Content Editor is our default editor) because the article creator has made errors and tried to correct them, with partial or no success. In these cases, which occur frequently with our infrequent and forgetful article contributors, the most effective way of setting things right is to switch to code view in the editor and repair the HTML that way rather than trying to do the repair with the WYSIWYG view.
As a last note, most web browsers today support HTML 5, and you’ll find a lot of constructs on the website that are unique to HTML 5. HTML 4 constructs still work, mostly, but some will receive complaints from the FireBug debugger in Firefox. Also, be aware that unique pre-HTML-5 constructs that are now called “deprecated” may eventually lose browser support and break a web page.
Joomla Content Management System
What’s a “Content Management System”? A CMS is a platform and tools for building websites. The platform is a set of rules and conventions, database management routines and code that supports the storage and management of articles. The tools include editors, database management, user management and “hooks” that allow the platform to be customized and extended. There is a lot of documentation available here, and more from other organizations discoverable using Google.
In Joomla, all articles, all user information, and all the data used by Joomla components and plugins are stored in a MySQL database. Joomla itself has a huge amount of code that is activated (executed) by a public or front-end web page request as well as by administrator or back-end web page requests. Behind the scenes, Joomla’s code is very sophisticated and elegant, and manages to to its job well enough that simple websites can be created and managed by anyone tho can use an editor and read a manual. At the same time, using extensions, Joomla becomes a powerful tool for a diverse set of needs like those seen on the FHA website, both front-end and back end.
To manage the FHA website, one should become familiar with how access control lists work in Joomla to restrict user access to pages and facilities. This is very complicated, as access control is applied to user groups through article, category and menu item settings. But you need you know this in order to set up new (FHA) group “sub-sites” within the FHA website and to permit or deny access to (Joomla user) group members.
CSS – Cascading Style Sheets
- Controlling what’s shown in the browser window and
- Invoking AJAX or loading other web pages
Controlling the display is done by manipulating CSS, no more and no less.
<input type=”submit” label=”Save” onclick=”doSave()” />
In addition to the “onclick” event, other events you might find on the site are
- onkeyup – If a user is entering text, look at the latest entry in the text field and take action on it, e.g., call a directory lookup.
- onload – After the page finishes loading, do something, e.g., get the latest posts from the BulletinBoard
In the discussion of the FHA PHP page template, you will find this code:
JHtml::_(‘jquery.framework’); // Load jQuery with noconflict set
$document->addScriptDeclaration(‘ // $j is jQuery reference
var $j = jQuery.noConflict();
$document->addScript(‘/code/doAjaxNEW.js’); // AJAX using jQuery
jQuery provides shortcuts to many routine actions you might want to do on a web page. For example, to get the value from a text box the user may have filled in:
|With jQuery||Without jQuery|
|var val = $j(‘#inptValue’).val();||var val = document.getElementById(‘inptValue’).value;|
PHP is the generally accepted abbreviation for PHP Hypertext Processer – a self-referential non-definition. Anyway PHP code runs on our website server. Its sole purpose is to interface with the website’s database and the Joomla platform. PHP code can store, retrieve, change and delete information from any table in our database. It accesses the database using relational database commands, or queries, invoked by the MySQLi functions discussed below.
Sometimes it is useful to obtain information from Joomla. For example much of the directory-presenting PHP code will not be shown to website visitors unless they are logged-in when they open the page, so these pages find the login status of the user through Joomla, and deny or hide personal information from viitors who are not logged in.
PHP is a full-featured programming language. A good tutorial can be found at w3schools. If you are new at PHP it might be a good idea to visit the tutorial and run through a few pages to get an idea of how the language is written. You can always return to w3schools or to the PHP online reference to see what an unfamiliar code construction is doing.
MySQLi is a dialect of SQL,the standard Structured Query Language. The most common queries we use are SELECT, to retrieve data, INSERT, UPDATE, and DELETE. The PHP functions that cause actions or get information are called the PHP MySQLi Extensions.
Rather than trying to absorb these references, I find it is easier to look at the PHP code that generates the page, and use the references to find what each statement is doing. This will give you a good sense of the page’s logic flow and after going through a few pages, you will be able to generalize so reading code and understanding it will become easier with every page you read.