J4.x

Entwicklung einer MVC Komponente - Entwicklung der Basis-Komponente

From Joomla! Documentation

< J4.x:Developing an MVC Component
This page is a translated version of the page J4.x:Developing an MVC Component/Developing a Basic Component and the translation is 35% complete.
Other languages:
Deutsch • ‎English
Joomla! 
4.x
>Tutorial
Entwicklung einer Basis Komponente



Dieser Artikel ist Teil des Tutorials „Entwickeln einer MVC-Komponente für Joomla 4.x“. Er ist als Serie einer Programmieranleitung gedacht. Wenn Sie also die vorherigen Teile des Tutorials nicht gelesen haben, sollten Sie dies tun.

Die erste Komponente

In diesem Beitrag erklären wir, wie eine einfache Joomla Komponente erzeugt und installiert wird. Wir nennen diese Komponente - wie originell - "Hello World".

Als erstes verwende deinen bevorzugten Dateimanager und erstelle ein Verzeichnis für die Komponente "Hello World!". Dies Verzeichnis kann überall liegen, nur nicht innerhalb des Joomla! Installationsverzeichnisses. In diesem Beispiele nennen wir das Verzeichnis com_helloworld. Das Präfix com bedeutet das es eine Komponente ist und helloworld ist ihr Name. Das ist eine gute Methode, viele parallele Projekte zu organisieren. Technisch gesehen kann dieses Verzeichnis einen beliebigen Namen haben aber es empfiehlt sich immer, sprechende Namen zu verwenden.

Als nächstes müssen wir in diesem Verzeichnis ein paar Dateien erzeugen. Da diese Komponente sowohl ein Frontend (das die Besucher der Webseite sehen) als auch ein Backend (das für Administratoren zugänglich ist) hat, brauchen wir zwei Unterverzeichnisse. Lege ein Verzeichnis 'site' an und ein anderes mit dem Namen 'admin'. Auch diese können beliebige Namen bekommen. Wir werden ein manifest file erstellen, in dem wir Joomla! sagen, wie unser Verzeichnisse heißen und wohin sie kommen sollen. Erzeuge die folgenden Dateien und füge den Code ein, den du in File Details findest.

1 helloworld.xml An XML manifest file that tells Joomla! how to install our component.
2 admin/services/provider.php Tells Joomla! how to initialise the component
3 admin/src/Controller/DisplayController.php The MVC Controller for the "Hello World" page we'll start with.
4 admin/src/View/Hello/HtmlView.php The MVC View for the "Hello World" page we'll start with.
5 admin/tmpl/hello/default.php The HTML/PHP template for the "Hello World" page

File Details

helloworld.xml

This is a manifest file, which describes the component and its configuration to Joomla! It is utilised during installation to copy the component's files into the correct locations, trigger database installation, configure the component's PHP namespace, and so on.

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

    <name>Hello World</name>
    <!-- The following elements are optional and free of formatting constraints -->
    <creationDate>December 2020</creationDate>
    <!-- Dummy author, feel free to replace anywhere you see it-->
    <author>John Smith</author>
    <authorUrl>https://smith.ca</authorUrl>
    <copyright>John Smith</copyright>
    <license>GPL v3</license>
    <!--  The version string is recorded in the components table -->
    <version>0.0.1</version>
    <!-- The description is optional and defaults to the name -->
    <description>
        A hello world 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/">JohnSmith\Component\HelloWorld</namespace>
            
    <administration>
        <!-- The link that will appear in the Admin panel's "Components" menu -->
        <menu link="index.php?option=com_helloworld">Hello World</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

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

<?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('\\JohnSmith\\Component\\HelloWorld'));
        $container->registerServiceProvider(new ComponentDispatcherFactory('\\JohnSmith\\Component\\HelloWorld'));
        $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, "hello". 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 JohnSmith\Component\HelloWorld\Administrator\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;

/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2020 John Smith. All rights reserved.
 * @license     GNU General Public License version 3; see LICENSE
 */

/**
 * Default Controller of HelloWorld component
 *
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 */
class DisplayController extends BaseController {
    /**
     * The default view for the display method.
     *
     * @var string
     */
    protected $default_view = 'hello';
    
    public function display($cachable = false, $urlparams = array()) {
        return parent::display($cachable, $urlparams);
    }
    
}

admin/src/View/Hello/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 "hello world" page to load, we will delegate the work of initialising the view to Joomla!

<?php

namespace JohnSmith\Component\HelloWorld\Administrator\View\Hello;

defined('_JEXEC') or die;

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

/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2020 John Smith. All rights reserved.
 * @license     GNU General Public License version 3; see LICENSE
 */

/**
 * Main "Hello World" Admin View
 */
class HtmlView extends BaseHtmlView {
    
    /**
     * Display the main "Hello World" 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/hello/default.php

This file holds the template for the page. It is used to render the page utilising 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_helloworld
 *
 * @copyright   Copyright (C) 2020 John Smith. All rights reserved.
 * @license     GNU General Public License version 3; see LICENSE
 */

 // No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2>Hello world!</h2>

Installing the Component

Using your preferred file manager, create a .zip file of the com_helloworld directory - include the directory itself and make sure to preserve the directory structure.

Now we need to install the component. Follow this process:

  1. Using your web browser, navigate to the Administrator panel of your Joomla! site. The address would be <joomla>/administrator/. For example: http://localhost/joomla/administrator/
  2. On the left menu, click the "System" link.
  3. On the "Install" card, click "Extensions".
  4. On the "Upload Package File" tab, browse for and select the .zip file you just created.

The page should automatically process the installation of the component, and you will receive a message telling you whether it was successful or not.

Testing the Component

Once the component is installed, click the "Components" section of the menu on the left of the admin panel. You should now see a new link under this section labeled "Hello World". This is the link detailed in the component's manifest file. If you click it, you should see the "Hello World" page.

Congratulations! You've created your first Joomla! component. Now, let's start making it useful.