How To Create Joomla Component

Component is a type of Joomla extension (like Modules and Plugins). Unlike modules and plugins, components have two main parts - site and administrator. The site part is visible to visitors (front-end access). The administrator part is interface for managing extension from the back-end.

From Joomla 3.x series, components are developed using Model-View-Controller (MVC) pattern.

In Joomla, models are used for managing the data. The first function in a model is a get function. It returns data to the caller.

Accessing Joomla Component

You can either use direct URL of the component or a Menu item in order to navigate to the component.

Site Access


Administrator Access


Directory Structure

All the components are stored in components folder of Joomla Installation. 


A component contains following files within its directoryː

Component Root Directory

  • <component_name>.xml
  • site/index.html
  • site/controller.php
  • site/<component_name>.php

Models Directory

  • site/models/<component_name>.php
  • site/models/index.html

Views Directory

  • site/views/<component_name>/tmpl/default.php
  • site/views/<component_name>/tmpl/default.xml
  • site/views/<component_name>/tmpl/index.html
  • site/views/<component_name>/index.html
  • site/views/<component_name>/view.html.php

Admin Directory

  • admin/index.html
  • admin/<component_name>.php
  • admin/sql/index.html
  • admin/sql/updates/index.html
  • admin/sql/updates/mysql/index.html
  • admin/sql/updates/mysql/1.0.sql

Component Workflow (MVC)


1. <component_name>.php

The file, <component_name>.php is the entry point for the component. The main entry point, helloworld.php, essentially passes control to the controller, which handles performing the task that was specified in the URL request.

// Get an instance of the controller prefixed by HelloWorld
$controller = JControllerLegacy::getInstance('HelloWorld');

Joomla looks in controller.php, for the declaration of class HelloWorldController that extends JControllerLegacy. JControllerLegacy is a base class for a Joomla! Controller. In order for website to use controllers, you have extend this class in the component.

The getInstance is a static method of the JControllerLegacy class. It creates a controller or instantiates a controller object of a class named HelloWorldController.

// Perform the Request task
$input = JFactory::getApplication()->input;

Above statements get the required task and the controller executes the requested task. After the controller is created, Joomla instructs the controller to execute the task. The task is defined in the URL: /index.php?option=com_helloworld&task=<task_name>

If no task is set, the default task is assumed that is display. Other common tasks are save, edit, and new. When display is used, the 'view' variable decides what will be displayed.

// Redirect if set by the controller

The controller might decide to redirect the page, usually after a task like 'save' has been completed. This last statement takes care of the actual redirection.

2. admin/controller.php

The entry point now gets an instance of a HelloWorld prefixed controller. Next step is to create a basic or general controller for the administrator part.

class HelloWorldController extends JControllerLegacy
protected $default_view = 'helloworlds';

This controller will display the 'HelloWorlds' view by default.

3. view.html.php

When no task is given in the request variables, the default task is executed - display. The JControllerLegacy class has such a task.

The view file is located in: views/<view_name>/view.html.php

The above file contains class HelloWorldViewHelloWorld that extends JViewLegacy. JViewLegacy is a base class for a Joomla! View. 

The view gets the data (from the model) to be output. The HelloWorldViewHelloWorld class asks the model for data using the get method of the JViewLegacy. 

 // Assign data to the view
$this->msg = $this->get('Msg');

This get method converts the get('Msg') call into a getMsg() call on the model, which is the function which you have to provide in the model.

Then, it calls the base display class.

 // Display the template

It displays data using the file: tmpl/default.php

4. tmpl/default.php

<form action="index.php?option=com_helloworld&view=helloworlds" method="post" id="adminForm" name="adminForm">
<table class="table table-striped table-hover">
<th width="1%"><?php echo 'Number'; ?></th>
<th width="2%">
<?php echo JHtml::_('grid.checkall'); ?>
<th width="90%">
<?php echo 'Name';?>
<th width="5%">
<?php echo 'Published'; ?>
<th width="2%">
<?php echo 'ID'; ?>
<td colspan="5">
<?php echo $this->pagination->getListFooter(); ?>
<?php if (!empty($this->items)) : ?>
<?php foreach ($this->items as $i => $row) : ?>
<?php echo $this->pagination->getRowOffset($i); ?>
<?php echo JHtml::_('', $i, $row->id); ?>
<?php echo $row->greeting; ?>
<td align="center">
<?php echo JHtml::_('jgrid.published', $row->published, $i, 'helloworlds.', true, 'cb'); ?>
<td align="center">
<?php echo $row->id; ?>
<?php endforeach; ?>
<?php endif; ?>

checkAll is a javascript function defined in the Joomla core able to check all items. JHtml::_ is a helper function able to display several HTML output. In this case, it will display a checkbox for the item.

JPagination is a Joomla class able to manage and display pagination object.

5. models/<view_name>.php

The above file contains class HelloWorldModelHelloWorld that extends JModelItem. This class is called by the class HelloWorldViewHelloWorld and contains public function getMsg(). This function returns the data.

In Joomla!'s MVC, the view automatically loads the model. The get() is used to get data from a model of the view. For example,

$this->items = $this->get('Items');

$this->pagination = $this->get('Pagination');

$this->state = $this->get('State');

$this->state = $this->get('Msg');

Above functions or methods are calling to the model, which has a matching getItems(), getPagination(), getState(), getMsg() defined. The model file may not have its own functions, so these are defined in the parent class JModelList.

How To Get Data From Database

The getItems() defined in the class JModelList calls the protected function getListQuery(). You need to define this method in your model class to build an SQL query to load the list data. This function returns a string of an SQL query.

class HelloWorldModelHelloWorlds extends JModelList
* Method to build an SQL query to load the list data.
* @return string An SQL query
protected function getListQuery()
// Initialize variables.
$db = JFactory::getDbo();
$query = $db->getQuery(true);

// Create the base select statement.

return $query;

How To Include Pagination

Add the following code statement in view.html.php to get pagination from the model.

$this->pagination = $this->get('Pagination');

Next, to display add following code in tmpl/default.php layout file of the view.

<?php echo $this->pagination->getListFooter(); ?>


Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive