Chapter 3. Web Site Front end

These are the main visual presentation of the component to users.

Front end

Each screen used in the front end is presented with a 'search' block at the top of each page. This enables the user to enter a specific term they may be interested in and to find the relevant information, if it exists very quickly without having to traverse a number of different web pages.

Categories

Categories are one of the main building blocks and are used to separate out different 'sections' of information. The following image shows a typical display of the component categories screen.

This is the main and mot common starting screen for site visitors. It displays the defined categories along with an optional image (or Awesome icon) to the right of each category. The categories are displayed in a to column list to utilise the screen display more efficiently.

The screen below displays the current (at time of writing this guide) page available upon our web site. As can be seen it is being used to display the current component that we produce and uses their commonly used images to assist in identifying them. It would be equally possible to use Awesome Font icons if preferred.

The categories screen is divided into two distinct parts (apart from the search box). The first part, shown below displays the categories.

Figure 3.1. Categories Screen.

Categories Screen.

The descriptive text shown in the categories display above is the 'first' paragraph provided in the category description field. The 'full' description is provided in the individual category display. For this reason the first paragraph of the category descriptive text should be as informative as possible..

The second part of the screen displays a specified number of recently created articles in each tab There are three possible tabs displayable. (Configuration option) The 'Latest Articles' is perhaps the most useful. The 'featured' tab will display articles marked as of being of greater interest will be presented. The 'Popular' article tabs will display the most frequently viewed Kbase articles upon the site. We illustrate all three tabs below:

Figure 3.2. Categories Screen (2).

Categories Screen (2).

Clicking upon any of the 'category' images/cons or category tile will navigate to the Category Screen illustrated below. The display of any sub-categories display is also shown if they exist. The first screen shown below has no specified sub-categories.

Each article can be viewed completely by clicking the 'Read More' link. The 'Read More' is a component setting, otherwise the entire article would be shown in the display.

Figure 3.3. Category Screen.

Category Screen.

Pagination control will be displayed if the number of articles for the category exceeds to number specified in the component options.

If a specific category contain sub-categories then the screen will display a section detailing the subcategories immediately prior to the abbreviated display of articles within the category. See the image below.

Figure 3.4. Category Screen (2)

Category Screen (2)

Articles

The articles contain the information of most interest to site visitors. There is a screen display which can show all the articles upon the site irrespective of which category they belong too. This screen is often used by administrators to control the various articles in a convenient place. If the user (administrator) is viewing the screen some additional buttons will be displayed below each abbreviated article to permit them to unpublish or even delete the article completely. The screen (shown below ) is a separately configured menu item and is not reachable via any of the other displays.

Figure 3.5. All Articles Screen.

All Articles Screen.

The button to add additional articles may or may not be shown depending upon the ACL permissions provided to the logged in user. A guest viewer would not see the button.

The display of any specific article is shown in the image below. There is a second section of the display (often known as Metadata) which show the details of the article such as its creation data, last modified data, Language etc. Some fields are only displayed in this section if suitably configured, such as the language and tag values.

Figure 3.6. Article Display Screen.

Article Display Screen.

The above display is also illustrating the use of other 'third' party plugins to create a 'visually' pleasing display. In this example we are using the 'sliders' plugin by NoNumber available from the Joomla Extensions Directory.

Article Editor

It is possible to create (or submit) articles to the component from the form as displayed below. There are a number of individual tabs presented. The first displayed immediately below enables the entering of the main article criteria. We show the screen for the creation of a 'new' article below, if it were and edit the current text would be present.

Figure 3.7. Article Edit (1) Screen.

Article Edit (1) Screen.

The second tab named 'Publishing' contains the setting for the 'published' state of the article. This is only a changeable field if the user performing the edit is permitted to change the state of the article, otherwise a component defined default state will be used.

If it is permitted to make the article a 'featured' article there will also be a field to enable this.

It the component is configured to accept 'Joomla tags' then there will be a displayed field to permit the selected and creation of tags to be associated with the article. The tags displayed will use the default formating (CSS) as specified by the site template. This may be changed by specifying additional CSS rules. These is an article upon our site explaining which CSS needs to be provided.

Figure 3.8. Article Edit (2) Screen.

Article Edit (2) Screen.

If the component is configured to permit the addition of file attachment to articles, an 'Attachments' tab will be presented.

Figure 3.9. Article Edit (3) Screen.

Article Edit (3) Screen.

Additional tabs may be presented depending upon how the component is configured.

A language tab is presented if the user submitting (or editing) the article is configured to specify a specific language for the article. If suitably configured the choice of languages will be dependant upon the languages installed upon the site.

If the user is configured to be able to specify ACL rules for the article a Permission/Rules tab will also be presented. Normally only site administrators would see this particular tab.

Acronyms

The acronyms (or glossary) contain the specific acronyms, abbreviation or initialsm to be described. The information is usually displayed as a tabular list and is implemented as a separate and separate display although it uses the same formating and style as the article and categories.

Figure 3.10. Acronyms Screen.

Acronyms Screen.

The display above shown how the screen would be presented to most viewers of the menu item and comprised the tabular list. Item descriptions are usually short one (or two) paragraph(s) long which makes the tabular display the most useful.

[Note]Note

The leading text short in the above display is optional and is controlled by a component option. The text supplied is defined in the (back end) language file. If it is desired to change (or alter) the supplied text, then the suggested method is to create a language override for the COM_KBASE_ACRONYM_INTRO_TEXT string. This means that any local changes are preserved over a component upgrade and also permits different text to be presented for different languages supported upon the site.

If a registered user is logged in and has the required ACL permissions to manage/edit/delete/create items, then the modified display as short below is presented with two additional tabular columns, the first providing an easy visual indicator of the 'publishing state' of the acronym, and the second providing buttons to perform additional actions upon the acronym item..

Figure 3.11. Acronyms Screen (manager).

Acronyms Screen (manager).

The additional buttons displayed permit the manager to possibly edit, delete and publish/unpublish an item with a single action. Editing the item will present an edit screen where the item may be archived and placed in the trash if preferred.

The create button at the end of the display will itself display the entry form to submit a new Acronym item.

Note the use of Joomla Search Tools to aid in the viewer finding a specific term and/or restricting the type of glossary items displayed in the list.

Single Acronym Display

There is a single acronym display screen that can be used, but has not been found to be very useful in practise. Consequently it has not been described in this document. One future development of this would be to embed a link to generate a 'popup' window with the acronym details within the Kbase articles.

Acronym Editor

It is possible to create (or submit) articles to the component from the form as displayed below. There are a number of individual tabs presented. The first displayed immediately below enables the entering of the main article criteria. We show the screen for the creation of a 'new' acronym below. If it were an existing item the existing item details would be present.

Figure 3.12. Acronym Edit Screen.

Acronym Edit Screen.

All the required input parameters are presented in a simple form as shown above.

The acronym (or glossary) items are not required (currently) to require any additional information and thus is not as fully featured as the Kbase articles.

Go To Top

Joomla! Debug Console

Session

Profile Information

Memory Usage

Database Queries