Rvsjoen/tutorial/Developing an MVC Component

From Joomla! Documentation

< User:Rvsjoen
Revision as of 20:44, 9 July 2011 by AmyStephen (Talk | contribs)



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:


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.


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.


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

MVC basics.png

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.


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.


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.


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

MVC joomla.png

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!

Joomla 2.5