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.

Joomla! components are developed using Model-View-Controller (MVC) pattern. In Joomla, models are used to manage the data.

1. 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

<joomla_path>/index.php?option=com_<component_name>

Administrator Access

<joomla_path>/administrator/index.php?option=com_<component_name>

2. Directory Structure

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

<joomla_path>/components/com_<component_name>/

A component contains following files within its directoryː

Component Root Directory

  • <component_name>.xml (Manifest File)
  • admin (Administrator Folder)
  • site (Site Folder)

Site Directory

  • site/src
    • /Controller
    • /Model
    • /View
  • site/tmpl

Admin Directory

  • admin/forms
  • admin/services
  • admin/sql
    • /updates/mysql/1.0.0.sql
  • admin/src
    • /Controller
    • /Extension
    • /Helper
    • /Model
    • /Table
    • /View
  • admin/tmpl

3. Component Workflow (MVC)

 

1. admin/services/provider.php

This is a special file that tells Joomla! how to initialize the component - which services it requires and how they should be provided.

use Joomla\CMS\Dispatcher\ComponentDispatcherFactoryInterface;
use Joomla\CMS\Extension\ComponentInterface;
use Joomla\CMS\Extension\MVCComponent;
use Joomla\CMS\Extension\Service\Provider\ComponentDispatcherFactory;
use Joomla\CMS\Extension\Service\Provider\MVCFactory;
use Joomla\CMS\MVC\Factory\MVCFactoryInterface;
use Joomla\DI\Container;
use Joomla\DI\ServiceProviderInterface;

return new class implements ServiceProviderInterface
{

public function register(Container $container)
{
$container->registerServiceProvider(new MVCFactory('\\TechFry\\Component\\Planets'));
$container->registerServiceProvider(new ComponentDispatcherFactory('\\TechFry\\Component\\Planets'));
$container->set(
ComponentInterface::class,
  function (Container $container)
{
    $component = new MVCComponent($container->get(ComponentDispatcherFactoryInterface::class));
     $component->setMVCFactory($container->get(MVCFactoryInterface::class));

     return $component;
  }
  );
}
};

2. admin/src/Controller/DisplayController.php

This is a basic or general controller for the administrator part. It simply sets its default view and leaves the rest to its parent.

namespace TechFry\Component\Planets\Administrator\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;

class DisplayController extends BaseController
{
protected $default_view = 'planets';

public function display($cachable = false, $urlparams = array())
{
return parent::display($cachable, $urlparams);
}
}

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

3. HtmlView.php

The file is located at: admin/src/View/Planets/HtmlView.php

The above file contains class HtmlView that extends BaseHtmlView. The BaseHtmlView is the base class for a Joomla! View.

The view gets the data from the model to be output by the layout file.

// 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.

namespace TechFry\Component\Planets\Administrator\View\Planets;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

class HtmlView extends BaseHtmlView
{
  public function display($tpl = null)
{
        parent::display($tpl);
  }
}

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

4. tmpl/planets/default.php

This file holds the template for the page. When no specific layout is requested for a view, Joomla! will load the template in the default.php file.

<h2>Welcome to My Planet!</h2>

Installing the Component

Create a .zip file of the com_planets directory.

On the left menu, click the "System" link. On the "Install" card, click "Extensions". On the "Upload Package File" tab, browse for and select the .zip file you just created.

Testing the Component

After the component is installed, click the "Components" section of the menu on the left side of the admin panel.

You should see a new link "Planets". This is the link detailed in the component's manifest file. If you click it, you should see the default "Planets" page.