MVC is an architectural pattern used in software engineering. In complex computer applications that present lots of data to the user, one often wishes to separate data (model) and user interface (view) concerns, so that changes to the user interface do not impact the data handling, and that the data can be reorganized without changing the user interface. The model-view-controller solves this problem by decoupling data access and business logic from data presentation and user interaction, by introducing an intermediate component: the controller.

The MVC paradigm is a way of breaking an application, or even just a piece of an application’s interface, into three parts: the model, the view, and the controller.

MVC was originally developed to map the traditional input, processing, output roles into the GUI realm:
mvc model controller view joomla15

Input –> Processing –> Output
Controller –> Model –> View


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 books in the database. It will also contain methods to retrieve the list of books 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 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.

Joomla! MVC Implementation

In Joomla!, the MVC pattern is implemented using three classes:

1. JModel
2. JView
3. and JController

Hello world component

a) structure

¦   com_helloworld.xml (xml – installation source)
+—admin                       – (administration folder)
¦   ¦  index.html – (blank file)
¦   ¦   admin.helloworld.php – (create controller and hand over the control)
¦   ¦   toolbar.helloworld.php  – (tool bar definition and a ‘help’ menu item)
¦   ¦   toolbar.helloworld.html.php   – (tool bar definition and a ‘help’ menu item)
¦   ¦
¦   +—images                  – (here are all picures used in the component)
¦   ¦       helloworld.png
¦   ¦       index.html          – (blank file)
¦   ¦
¦   +—controllers             – (controlers folder)
¦   ¦       default.php         – (default controler      – “default section”)
¦   ¦       helloagain.php      – (heloagain controler    – “helloagain section”)
¦   ¦       hellotestfoo.php    – (hellotestfoo controler – “helhellotestfooloagain sec.”)
¦   ¦       helloworld.php      – (helloworld controler   – “helloworld section”)
¦   ¦
¦   +—models                  – (models folder)
¦   ¦       helloworld.php      – (the only model defined here. Currently not in use)
¦   ¦
¦   +—views                   – (views folder)
¦   ¦   +—default
¦   ¦   ¦       view.php        – (default view      – “default section”)
¦   ¦   ¦
¦   ¦   +—helloagain
¦   ¦   ¦       view.php        – (helloagain view   – “helloagain section”)
¦   ¦   ¦
¦   ¦   +—hellotestfoo
¦   ¦   ¦       view.php        – (hellotestfoo view – “hellotestfoo section”)
¦   ¦   ¦
¦   ¦   +—helloworld
¦   ¦           view.php        – (helloworld view   – “helloworld section”)
¦   ¦
¦   +—sql – (SQL folder. Currently not in use. All sql files)
¦   ¦       uninstall.helloworld.sql      ( are commented out in the installation xml.)
¦   ¦       install.helloworld.sql        ( The reasson is very simple. Joomla! 1.5 has )
¦   ¦                                     ( a minor bug in installation.php. We will need )
¦   ¦                                     ( a “night build” for the next tutorial)
¦   ¦
¦   +—lang – (language folder)
¦           cs-CZ.com_helloworld.ini    – (czech text package)
¦           en-GB.com_helloworld.ini    – (english text package)
¦   index.html                      – (blank file)
¦   helloworld.php                  – (core for the frontend application. )
¦                                     ( Prints “hello world”.)
cs-CZ.com_helloworld.ini    – (czech text package)
en-GB.com_helloworld.ini    – (english text package)

b) concept
We need to rewrite the core of our previous component. It prints “hello world” by accessing methods of class helloScreens in admin.helloworld.html.php

class helloScreens
function helloworld()
{ echo JText::_(‘helloworld’); }

function helloagain()
{ echo JText::_(‘helloagain’); }

function hellotestfoo()
{ echo JText::_(‘hellotestfoo’); }

function hellodefault()
{ echo JText::_(‘hellodefault’); }

All these methods will become stand-alone views. \views\helloworld\view.php

class HelloWorldComponentView extends JView

function display()
echo JText::_(‘helloworld’);