Languages and Technologies

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)

One can’t begin to understand how a website works without a basic understanding of HTML. That’s not to say you need to know every HTML construct or attribute, as long as you know where to look for a comprehensive reference to the language like this one at w3schools. But knowing the basic structure of required HTML elements and conventions is very important if you have to diagnose problems on a web page. When a web page doesn’t appear as it should, the first place to look is at the page’s HTML source. (Ctrl-U will usually show a page’s source.) When you find the problem area, your next step will be to find where that “bad” HTML came from, which might take you to a PHP page, a Javascript function, or some incorrect CSS, as discussed below.

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

CSS can be considered an extension to HTML. CSS provides a means for applying “styles” to web pages, their HTML elements and character strings within elements Styling can be applied my a separate file referenced by a <link> HTML element, by a set of rules in a web page delineated by <style>…</style> or within an HTML element, e.g., <p style=”font-weight:bold;”>.  Read what “cascading” is all about here. A good place to learn about CSS is, again, at w3schools, where you can see CSS in action and see what happens when you change it. A common use of CSS on the FHA website is to make things conditionally appear or disappear. As an example check the Bulletin Board. Near the top you’ll find “Click to see Rules & Formatting Hints”. When you click this line, the rules will appear, and click in the same place (with different text) and the rules disappear. This is CSS at work, changed using Javascript. As with HTML, you don’t need to know it all, but you should know where to find out about styling you don’t understand. A good CSS reference is at a different w3schools page.

Javascript (or JavaScript)

 Javascript is a “real” programming language, unlike HTML (a markup language that identifies document elements) and CSS (which directs browsers’ formatting of HTML elements). Javascript, like our old friend BASIC, is an interpreted language, not a compiled-to-machine-language language. That means, Javascript programs are read line by line by the browser, which then does what the line says to do. You can find on the web full-fledged applications and exotic demonstrations of Javascript at work, so it is truly a programming language, is largely host-independent, mostly browser-independent, and full-featured. However, on the FHA website Javascript has two main usage areas:

1. Controlling what’s shown in the browser window and
2. Invoking AJAX or loading other web pages

Controlling the display is done by manipulating CSS, no more and no less.

Invoking AJAX, as described elsewhere, is done to satisfy a request made by the user, e.g., to lookup names in the directory, save a Bulletin Board post, or “Update Your Info” (in the Directory drop-down). Loading different web pages is also done when the user makes a request, e.g., from a diretory listing, Javascript opens a page when the user clicks “Show Map” within a displayed directory entry.

All Javascript actions on the website are controlled by “events” that occur on the page. Events can be internal to the web page: the user clicking something triggers the “onclick” event of whatever was clicked. If the user clicks on something that doesn’t specify a Javascript action to take, of course noting happens. Events can be external to the page, but recognized by the browser: onload (after page loads), onresize (user resizes the browser window), or onbeforeunload (user action taken to close the browser window). 

On any “live” HTML object, by looking at its attributes, you can see the Javascript that will be executed then the event fires. In the example

<input type=”submit” label=”Save” onclick=”doSave()” />

when the user clicks the button labeled “Save”, a Javascript function named “doSave” will be called with no arguments.

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.
• onchange – If a user clicks a checkbox, its state will change, and Javascript may do something to reflect the change
• onload – After the page finishes loading, do something, e.g., get the latest posts from the BulletinBoard

 To understand and use Javascript effectively on the FHA website you should be familiar with events and how they are handled. And in general, you will also need to read (at least) HTML and CSS, and to know enough about Javascript’s Document Object Model (DOM) to recognize when and how DOM elements are manipulated by Javascript. If you are going to write Javascript code to alter the look and/or behavior of a web page, the DOM is your friend.

jQuery

jQuery is a “library” which extends Javascript. Others (mootools, Node.js, etc.) exist, but as of Joomla 3.0, jQuery is a part of Joomla, so it’s loaded with every page, available, and a powerful tool to use when writing code for the website. It would be good for you to visit this page now to learn a bit aout jQuery before continuing.

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

The first line tells Joomla to load jQuery at this point in generating the web page, ensuring that jQuery is loaded before any of our Javascript , which is loaded by the two following lines, plus any other Javascript files subsequently loaded below this code snippet. This is necessary because anything referenced in Javascript code must appear above the referencing code. the addScriptDeclaration() shows how to add inline Javascript, which is defined as a character string, to the document. The addScript() statement shows how to load a file containing Javascript. In this case it’s loading the code for the doAjax() function discussed here.

The declaration setting the variable $j provides a shorthand way of accessing jQuery. While by default, the $ character in jQuery-powered Javascript code us short for jQuery we set use $j instead, in case any of our Joomla add-ons use the $ name to reference other libraries they may need. So remember: $() in the literature is equivalent to jQuery(). On our site, with this declaration, $j() is equivalent to 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:

PHP

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

 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.