Adding Basic Files for Component

To start developing Joomla MVC component, first you need to add six files to create a working minimal component.

Add the following basic six files:

  1. admin
    • src/Extension/StarsComponent.php: The main extension file for the component.
    • services/provider.php: It tells Joomla! how to initialize or boot the component.
    • src/Controller/DisplayController.php: The default Controller for the component.
    • src/View/Planets/HtmlView.php: The Html View for the "Planets" page.
    • tmpl/planets/default.php: The layout file for the "Planets" page.
  2. stars.xml: XML manifest file that tells Joomla! how to install the component.

1. StarsComponent.php

admin/src/Extension/StarsComponent.php

This file contains class for the extension. The class extends MVCComponent.

namespace TechFry\Component\Stars\Administrator\Extension;

use Joomla\CMS\Extension\MVCComponent;

class StarsComponent extends MVCComponent
{
    
}

2. provider.php

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\Extension\ComponentInterface;
use Joomla\CMS\Extension\Service\Provider\ComponentDispatcherFactory;
use Joomla\CMS\Extension\Service\Provider\MVCFactory;
use Joomla\CMS\Dispatcher\ComponentDispatcherFactoryInterface;
use Joomla\CMS\MVC\Factory\MVCFactoryInterface;
use Joomla\DI\Container;
use Joomla\DI\ServiceProviderInterface;
use TechFry\Component\Stars\Administrator\Extension\StarsComponent;

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

                return $component;
            }
        );
    }
};

The service provider file registers dependencies the component will use. Here, we have included two dependencies:

  • DispatcherFactory is needed to create the Dispatcher class instance, and then Joomla will call dispatch() on this Dispatcher object, as the next step in running the component.
  • MVCFactory is needed to create the Controller, View, Model and Table class instances on behalf of the component.

3. DisplayController.php

admin/src/Controller/DisplayController.php

This is a default controller for the component. It simply sets its default view and leaves the rest to its parent.

namespace TechFry\Component\Stars\Administrator\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;

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

When you view the component through Url, Joomla uses the controller to execute the task. The task is the name of method in the controller file. If you do not pass the controller or task in the Url, it defaults to Display Controller and display Task.

The default view is the name of the component. So, here we need to override the default view to planets.

4. HtmlView.php

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. For example,

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

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

namespace TechFry\Component\Stars\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);
    }
}

The view file displays data using the template layout file - $tpl, which defaults to default.php.

5. default.php

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 Stars Component!</h2>

6. stars.xml

This file tells Joomla how to install the component and what files are included.

Read More about Manifest Files

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" method="upgrade">
    <name>Stars</name>
    <!-- Other Meta Data -->
    <version>1.0.0</version>
    <description>Stars is demo extension for Joomla! 5</description>
    
    <namespace path="src/">TechFry\Component\Stars</namespace>
    
    <administration>
        <menu link="index.php?option=com_stars">Stars</menu>
        <files folder="admin">
            <folder>services</folder>
            <folder>src</folder>
            <folder>tmpl</folder>
        </files>
    </administration>
    
</extension> 

In the administration part, we include a link to the menu and include files and folders (services, src, tmpl and so on) which are in the parent folder admin of the component. While installing the component, these will get copied to the Joomla administrator/components/com_stars folder. 

Installing the Component

Create a .zip file of the com_stars directory.

On the left menu of Joomla Administration, click the "System" link. On the "Install" card, click "Extensions". On the "Upload Package File" tab, browse 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 "Stars". This is the link detailed in the component's manifest file. If you click it, you should see the default "Planets" page.