How to create Joomla 4 component

File Details

bismillah.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" method="upgrade">
<!-- 'version' attribute for extension tag is no longer used -->

    <name>Bismillah</name>
    <!-- The following elements are optional and free of formatting constraints -->
    <creationDate>January 2022</creationDate>
    <!-- Dummy author, feel free to replace anywhere you see it-->
    <author>Abdul waheed</author>
    <authorUrl>https://www.abdulwaheed.pk</authorUrl>
    <copyright>www.abdulwaheed.pk</copyright>
    <license>GPL v3</license>
    <!--  The version string is recorded in the components table -->
    <version>1.0.0</version>
    <!-- The description is optional and defaults to the name -->
    <description>
        Bismillah component! - A basic Joomla 4 component
    </description>

    <!-- This is the PHP namespace under which the extension's
    code is organised. It should follow this format:
    Vendor\Component\ComponentName
    "Vendor" can be your company or your own name
    The "ComponentName" section MUST match the name used 
    everywhere else for your component. Whatever the name of 
    this XML file is, the namespace must match (ignoring CamelCase). 
    -->
    <namespace path="src">Abdul\Component\Bismillah</namespace>
    <administration>
        <!-- The link that will appear in the Admin panel's "Components" menu -->
        <menu link="index.php?option=com_bismillah">Bismillah</menu>
        <!-- List of files and folders to copy. Note the 'folder' attribute.
             This is the name of the folder in your component package to copy FROM -->
        <files folder="admin">
            <folder>services</folder>
            <folder>src</folder>
            <folder>tmpl</folder>
        </files>
    </administration>
</extension>

admin/services/provider.php

<?php
defined('_JEXEC') or die;
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): void {
        $container->registerServiceProvider(new MVCFactory('\\Abdul\\Component\\Bismillah'));
        $container->registerServiceProvider(new ComponentDispatcherFactory('\\Abdul\\Component\\Bismillah'));
        $container->set(
            ComponentInterface::class,
            function (Container $container) {
                $component = new MVCComponent($container->get(ComponentDispatcherFactoryInterface::class));
                $component->setMVCFactory($container->get(MVCFactoryInterface::class));

                return $component;
            }
        );
    }
};
?>

admin/src/Controller/DisplayController.php

The MVC controller for our first view, "bismillah". As our component grows in complexity, a page's controller will handle model fetching, form submissions, and so on. Here, it simply sets its default view and leaves the rest to its parent.

<?php
namespace Abdul\Component\Bismillah\Administrator\Controller;
defined('_JEXEC') or die;
use Joomla\CMS\MVC\Controller\BaseController;
/**
 * @package     Joomla.Administrator
 * @subpackage  com_bismillah
 *
 * @copyright   Copyright (C) 2022 Abdul waheed. All rights reserved.
 * @license     GNU General Public License version 3; see LICENSE
 *
/**
 * Default Controller of Bismillah component
 *
 * @package     Joomla.Administrator
 * @subpackage  com_bismillah
 */

class DisplayController extends BaseController {
    /**
     * The default view for the display method.
     *
     * @var string
     */
    protected $default_view = 'bismillah';
    
    public function display($cachable = false, $urlparams = array()) {
        return parent::display($cachable, $urlparams);
    }
    
}

admin/src/View/Bismillah/HtmlView.php

This is the MVC view object for our first page. The job of a view object is to handle the setup work for a view template - selecting a layout, fetching JavaScript, generating toolbars, etc. To simply get our "Bismillah" page to load, we will delegate the work of initializing the view to Joomla!

<?php
namespace Abdul\Component\Bismillah\Administrator\View\Bismillah;
defined('_JEXEC') or die;

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

/**
 * @package     Joomla.Administrator
 * @subpackage  com_bismillah
 *
 * @copyright   Copyright (C) 2022 Abdul waheed. All rights reserved.
 * @license     GNU General Public License version 3; see LICENSE
 */

/**
 * Main "Bismillah" Admin View
 */
class HtmlView extends BaseHtmlView {
    
    /**
     * Display the main "Bismillah" view
     *
     * @param   string  $tpl  The name of the template file to parse; automatically searches through the template paths.
     * @return  void
     */
    function display($tpl = null) {
        parent::display($tpl);
    }

}

admin/tmpl/bismillah/default.php

This file holds the template for the page. It is used to render the page utilizing the setup done by the view object. When no specific layout is requested for a view, Joomla! will load the template in the default.php file, which is why we're using that filename.

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_bismillah
 *
 * @copyright   Copyright (C) 2022 Abdul waheed. All rights reserved.
 * @license     GNU General Public License version 3; see LICENSE
 */

 // No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h1> بسم اللہ الرحمٰن الرحیم </h1>
<h2>Bismillah</h2>

So that is our first Joomla! Component. I hope you learnt now that how to create custom Joomla 4! Component.