Joomla! Documentation™

Introduction

A software framework contains a set of application development tools for developers. Joomla has been designed for extensibility. The scope of this tutorial will be to develop a simple Hello World! component using the convention and coding standards employed by the Joomla! framework.

Joomla! is constructed using three different applications:

Site

The site application, also called frontend, is the area of your site that guests and users see. It is used for displaying content. The components of the site application live in the "components" folder in your Joomla! root.

Administrator

The administrator application, also called backend, is the administration area of your site. Where logged in managers and administrators can manage the site. The components of the administrator application live in the "administrator/components" folder in your Joomla! root.

Installation

The installation application is used once when installing Joomla! the details of this application will not be covered by this tutorial. for installing Joomla!)

Introduction to Model-View-Controller

While the idea behind a component may seem extremely simple, code can quickly become very complex as additional features are added or the interface is customized.

Model-View-Controller (referred to as MVC) is a software design pattern that can be used to organize code in such a way that the business logic and data presentation are separate. The premise behind this approach is that if the business logic is grouped into one section, then the interface and user interaction that surrounds the data can be revised and customized without having to reprogram the business logic. MVC was originally developed to map the traditional input, processing, output roles into a logical GUI architecture.

These three main roles are the basis for the Joomla! MVC. They are described here in brief, but for a more thorough explanation, please refer to the links provided at the end of this tutorial. Also do not despair, this explanation is intended as a reference to the MVC pattern and the bits and pieces of it will become clearer as you progress through this tutorial, allowing you to take a step back and reconsider what is explained here, perhaps with greater clarity.

Model

The model is the part of the component that encapsulates the application's data. It will often provide routines to manage and manipulate this data in a meaningful way in addition to routines that retrieve the data from the model. In our case, the model will contain methods to add, remove and update information about the greetings in the database. It will also contain methods to retrieve the list of greetings from the database. In general, the underlying data access technique should be encapsulated in the model. In this way, if an application is to be moved from a system that utilizes a flat file to store its information to a system that uses a database, the model is the only element that needs to be changed, not the view or the controller.

View

The view is the part of the component that is used to render the data from the model in a manner that is suitable for interaction. For a web-based application, the view would generally be an HTML page that is returned to the data. The view pulls data from the model (which is passed to it from the controller) and feeds the data into a template which is populated and presented to the user. The view does not cause the data to be modified in any way, it only displays data retrieved from the model.

Controller

The controller is responsible for responding to user actions. In the case of a web application, a user action is (generally) a page request. The controller will determine what request is being made by the user and respond appropriately by triggering the model to manipulate the data appropriately and passing the model into the view. The controller does not display the data in the model, it only triggers methods in the model which modify the data, and then pass the model into the view which displays the data.

MVC connection

The simplified picture on the right depicts the basic components being used within Joomla. Besides the Model, the View and the Controller, an Entry Point has been added that is depicted as a small circle. Attached to the viewer (view) a Template has been added. With these five components you should be able to understand this tutorial about making a basic Joomla! MVC component.

Joomla! MVC Implementation

In Joomla!, the MVC pattern is implemented using three classes: JModel, JView and JController. For more detailed information about these classes, please refer to the API reference documentation.

Developing the component

Ok, now that we have all the nitty gritty details and theory covered, let us get cracking.

This tutorial is meant to serve both as a start-to-finish tutorial, and as a simple reference and showcase on how you as a developer can use the framework to implement certain features in your component. In order to accomplish this the tutorial is divded into parts, where each part builds on the code from the previous part, allowing you to jump in at any level.

This tutorial is supported by the following versions of Joomla!

• Introduction
• Part 01 - Developing a Basic Component
• Part 02 - Adding a view to the frontend
• Part 03 - Adding a menu item type to the frontend
• Part 04 - Adding a model to the frontend
• Part 05 - Adding options to menu items
• Part 06 - Using a database
• Part 07 - Basic backend
• Part 08 - Adding language translation
• Part 09 - Adding actions to backend
• Part 10 - Adding decorations to the backend
• Part 11 - Adding validation
• Part 12 - Adding categories
• Part 13 - Adding component options
• Part 14 - Adding ACL
• Part 15 - Adding a script file