Home Joomla 1.5 Tutorial guide component MVC helloworld 02
Tutorial guide component MVC helloworld 02 PDF Print E-mail
Written by Administrator   
Tuesday, 27 May 2008 08:57

Create MVC-model-view-controller component for joomla 1.5 - Hello World 02


I descibed my first "helloworld component for joomla 1.5 in my previous tutorial hello world component for joomla 1.5 I have got a huge response for joomla developers and I believe some of them were right pointing out that helloworld should be rewritten in MVC framework.

This is very brief introduction. Please refer to these links for thorough explanation.

MVC - model view controller

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.

After researching various articles on the internet I came up with the following descriptions of the principles of the Model-View-Controller design pattern:

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

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');

As you can see there is no model instance passing into the view or accessing from the view. Unfortunatelly, there is a minor bug in joomla1.5 beta that prevents us from executing our sql script in the installation process. We can get around this problem by installing jomla 1.5 "night build" and I will show you how in the next joomla tutorial.

Add this page to your favorite Social Bookmarking websites
Digg! Del.icio.us! JoomlaVote! StumbleUpon! Google! Live! Technorati!
Last Updated on Wednesday, 30 July 2008 11:23