Componenten in Joomla

1. De basis

1.1 Wat is een component?

Een component is de hoofdapplicatie die de body van een Joomla-pagina opbouwt. Zie het als een mini-applicatie die binnen Joomla draait. Het CMS is het besturingssysteem, componenten zijn de apps die erop draaien.

De belangrijkste regel om te onthouden is deze:

Een Joomla-pagina wordt opgebouwd uit veel extensies, maar precies één component maakt de hoofdinhoud.

1.2 De vijf extensietypes

Een component is één lid van een familie van vijf extensietypes. Als je de andere types kent, wordt het woord “component” pas echt duidelijk:

Componenten, modules en plugins worden vaak samen geleverd in één installeerbaar pakket (prefix pkg_).

1.3 De pagina als krant

Dit is een handig denkmodel. De template is het paginakader. Daarbinnen vult de component het hoofdgedeelte en staan de modules eromheen:

┌────────────────────────────────┐
│  TEMPLATE (het paginakader)    │
│  ┌──────┐ ┌─────────┐ ┌──────┐ │
│  │MODULE│ │COMPONENT│ │MODULE│ │
│  │(menu)│ │ de hoofd│ │(login│ │
│  │      │ │ inhoud  │ │    ) │ │
│  └──────┘ └─────────┘ └──────┘ │
│  ┌─────────────────────┐       │
│  │MODULE (footer)      │       │
│  └─────────────────────┘       │
└────────────────────────────────┘

Als de pagina een krant was, dan is de component het hoofdartikel. De modules zijn de zijbalken, advertenties en footers eromheen.

1.4 De com_-naamgeving

Elke componentnaam begint met com_. De parameter option in de URL vertelt Joomla welke component moet worden uitgevoerd:

index.php?option=com_content&view=article&id=42
                       │            │        │
                       │            │        └─ welk item
                       │            └─ welk scherm (de "view")
                       └─ welke component

Deze ene regel is de sleutel tot het begrijpen van alle Joomla-routing en SEF-URL’s (zoekmachinevriendelijke URL’s).

1.5 Componenten die je elke dag gebruikt

Open de Administrator en kijk naar het menu. Bijna elk onderdeel is een component:

Veel hiervan vormen de infrastructuur. Zo bestaan com_categories en com_fields vooral zodat andere componenten deze kunnen hergebruiken.

3. Binnen een component: de MVC-structuur

3.1 De moderne mappenstructuur

Sinds Joomla 4 volgen componenten een duidelijke mappenstructuur met namespaces. Hieronder zie je de beheerkant van com_content in Joomla 4, 5 en 6:

administrator/components/com_content/
├── content.xml              ← manifest (naam, versie, bestanden, installatie)
├── services/
│   └── provider.php         ← registratie van DI-services (het startpunt)
├── src/                     ← PHP-klassen met PSR-4 namespaces
│   ├── Controller/          ← bepaalt WAT er moet gebeuren
│   ├── Model/               ← communiceert met de DATABASE
│   ├── View/                ← bereidt gegevens voor uitvoer voor
│   ├── Table/               ← koppelt één database-record aan een object
│   ├── Field/               ← aangepaste formuliervelden
│   ├── Service/             ← routing, HTML-helpers, categorie-factory
│   ├── Helper/              ← gedeelde hulpfuncties
│   └── Extension/           ← de componentklasse zelf
├── tmpl/                    ← de daadwerkelijke HTML-layouts (.php)
├── forms/                   ← XML-formulierdefinities
├── sql/                     ← SQL voor installatie, updates en verwijdering
└── language/                ← vertaalbestanden (.ini)

Een belangrijke wijziging om te onthouden: sinds Joomla 4 bestaat er geen controller.php-bestand meer als ingangspunt. Het startpunt is nu services/provider.php.

3.2 De drie MVC-rollen

MVC staat voor Model-View-Controller. Het is een patroon dat het werk opsplitst in drie duidelijke rollen.

Controller, de verkeersregelaar

• Leest het verzoek (bijvoorbeeld task=article.save).
• Roept het juiste model aan en geeft vervolgens door aan de juiste view.
• Bevat geen HTML en geen SQL.

Model, het brein

• Bevat de bedrijfslogica en database-toegang.
• Beantwoordt verzoeken zoals "geef artikel 42", "sla dit op", "publiceer deze ID's" of "bouw deze lijstquery".

View en Layout, het gezicht

• Het View-object verzamelt gegevens uit het Model.
• De Layout (een bestand in tmpl/) genereert de uiteindelijke HTML.

Deze scheiding van verantwoordelijkheden maakt een component eenvoudiger te onderhouden, te overriden en te testen.

3.3 De Table-klasse

Tussen het Model en de database bevindt zich de Table-klasse. Een Table-object vertegenwoordigt één database-record. Dit staat bekend als het Active Record-patroon:

$table = $this->getTable();      // bijvoorbeeld ContentTable
$table->load($id);               // SELECT * FROM #__content WHERE id = ?
$table->title = 'Nieuwe titel';
$table->store();                 // INSERT / UPDATE
$table->delete($id);

Table-klassen verzorgen ook de publicatiestatus, sortering, check-in en check-out, en de JSON-kolom params die veel items gebruiken om hun instellingen op te slaan.

5. Het ontwikkelaarsmodel

5.1 Het moderne startpunt: services/provider.php

Sinds Joomla 4 wordt een component gekoppeld aan een Dependency Injection (DI)-container in plaats van via hardgecodeerde includes. Dit is de grootste verandering ten opzichte van het klassieke Joomla. Het bestand services/provider.php registreert de benodigde factories en bouwt vervolgens het componentobject op:

return new class () implements ServiceProviderInterface {
    public function register(Container $container): void
    {
        // Registreer de factories die de component nodig heeft:
        $container->registerServiceProvider(new CategoryFactory('\\Joomla\\Component\\Content'));
        $container->registerServiceProvider(new MVCFactory('\\Joomla\\Component\\Content'));
        $container->registerServiceProvider(new ComponentDispatcherFactory('\\Joomla\\Component\\Content'));
        $container->registerServiceProvider(new RouterFactory('\\Joomla\\Component\\Content'));

        // Bouw het componentobject en injecteer afhankelijkheden:
        $container->set(ComponentInterface::class, function (Container $container) {
            $component = new ContentComponent($container->get(ComponentDispatcherFactoryInterface::class));
            $component->setMVCFactory($container->get(MVCFactoryInterface::class));
            $component->setCategoryFactory($container->get(CategoryFactoryInterface::class));
            $component->setRouterFactory($container->get(RouterFactoryInterface::class));
            return $component;
        });
    }
};

Dit is een echt voorbeeld uit com_content, licht ingekort.

5.2 Oude manier versus nieuwe manier

Het verschil wordt het duidelijkst wanneer je beide stijlen naast elkaar zet.

Klassiek (Joomla 1.5 t/m 3):

require_once 'controller.php';
$controller = new ContentController();   // sterk gekoppeld, globale status
$controller->execute(JFactory::getApplication()->input->get('task'));

Modern (Joomla 4 t/m 6):

// De MVCFactory bouwt controllers, modellen en views voor je,
// inclusief database, input, gebruiker, dispatcher enzovoort.
$controller = $mvcFactory->createController('Article', 'Site', [], $app, $input);

Waarom de nieuwe aanpak beter is:

• PSR-4 autoloading met namespaces, geen handmatige require-instructies.
• Testbaar, afhankelijkheden worden geïnjecteerd in plaats van opgehaald uit globale status.
• Consistent, alle core-componenten zijn op dezelfde manier opgebouwd.

5.3 De Dispatcher

De Dispatcher is tijdens runtime de voordeur van een component. De ComponentDispatcherFactory maakt deze aan. Hij leest het verzoek, controleert de toegangsrechten en stuurt door naar de juiste controller en taak:

CMS App → ComponentInterface → Dispatcher → Controller → Model → View

De meeste componenten schrijven geen eigen dispatcher. Ze erven de standaard ComponentDispatcher. Alleen voor speciale bootstrap- of initialisatiebehoeften maak je een eigen implementatie.

5.4 Routing en SEF-URL's

De RouterFactory geeft een component zijn eigen Router. Deze zet interne query's om naar nette URL's en andersom:

?option=com_content&view=article&id=42&catid=9
        (interne query)

        ⇄

/nieuws/9-evenementen/42-zomerfeest
        (SEF-URL)

• build() zet een query om naar URL-segmenten voor gegenereerde links.
• parse() zet URL-segmenten terug om naar een query voor binnenkomende verzoeken.

Goede routing zorgt ervoor dat URL's gebruiksvriendelijk zijn voor zowel bezoekers als zoekmachines.

5.5 Events: hoe plugins een component uitbreiden

Een component blijft los gekoppeld aan extensies die extra functionaliteit toevoegen door op belangrijke momenten events af te vuren. Plugins luisteren naar deze events. De component hoeft niet te weten welke plugins dat zijn:

// Binnen save() van het model dispatcht com_content events:
$this->getDispatcher()->dispatch('onContentBeforeSave', $event);
// ... schrijf naar de database ...
$this->getDispatcher()->dispatch('onContentAfterSave', $event);

Veelgebruikte content-events waarop plugins kunnen inhaken:

Dit is een voorbeeld van losse koppeling. Een plugin kan gedrag toevoegen aan com_content, of aan je eigen component, zonder de broncode van die component aan te passen.

7. Werken met componenten

7.1 Hoe je elke component kunt begrijpen

Als je een component wilt doorgronden, lees de bestanden dan in deze volgorde. Dit stappenplan werkt voor vrijwel elke core-component en de meeste extensies van derden:

1. Het *.xml-manifest: wat is het, welke versie heeft het, welke bestanden en tabellen gebruikt het?
2. services/provider.php: het startpunt en de diensten die worden gebruikt.
3. src/Controller/: welke taken zijn beschikbaar?
4. src/Model/: waar komt de data vandaan?
5. tmpl/: wat ziet de gebruiker uiteindelijk?

7.2 Een component op de juiste manier aanpassen

Bewerk nooit rechtstreeks bestanden van een core-component. Bij de volgende update worden ze overschreven en ben je je wijzigingen kwijt. Gebruik in plaats daarvan de juiste techniek voor wat je wilt aanpassen:

Een template override is simpelweg een kopie van een layoutbestand op een speciale locatie:

Kopieer: components/com_content/tmpl/article/default.php
Naar:     templates/mytemplate/html/com_content/article/default.php

7.3 Zelf een component bouwen: het minimum

Een eenvoudige werkende component heeft verrassend weinig nodig:

com_hello/
├── hello.xml                       ← manifest
├── services/provider.php           ← registratie in de DI-container
├── src/
│   ├── Extension/HelloComponent.php
│   ├── Controller/DisplayController.php
│   ├── Model/HelloModel.php
│   └── View/Hello/HtmlView.php
└── tmpl/hello/default.php          ← <h1>Hallo, JUG!</h1>

De stappen om dit werkend te krijgen zijn:

1. Maak er een ZIP-bestand van en ga naar Extensies → Beheren → Installeren.
2. Joomla leest het manifest, kopieert de bestanden, registreert de namespace en voert de installatiescripts uit.
3. Ga naar index.php?option=com_hello en je code wordt uitgevoerd.

Een praktische tip: begin met een kleine core-component, bijvoorbeeld com_wrapper, en hernoem die. Je leert de structuur sneller vanuit een werkend voorbeeld dan vanaf een leeg scherm.

7.4 Veelvoorkomende valkuilen

Dit zijn fouten die ontwikkelaars regelmatig maken bij het werken met componenten:

• De <namespace>-declaratie vergeten in het manifest, wat leidt tot een foutmelding zoals "class not found".
• De <namespace>-declaratie wijzigen zonder /administrator/cache/autoload_psr4.php te verversen. Verwijder dit bestand, Joomla maakt het automatisch opnieuw aan.
• Core-bestanden rechtstreeks aanpassen, waardoor wijzigingen bij de volgende update verloren gaan. Gebruik overrides.
• Een module (een klein herbruikbaar blok) verwarren met een component (één hoofdapplicatie per pagina).
• Bedrijfslogica of SQL in een layout plaatsen in plaats van in het model.
• Categorieën, velden of tags opnieuw bouwen terwijl hiervoor al gedeelde diensten beschikbaar zijn.

9. Veelgemaakte fouten en valkuilen

9.1 Componenten verwarren met modules

Een component produceert de hoofdinhoud van een pagina. Een module is een klein blok dat daaromheen staat, en je kunt er meerdere op één pagina hebben. Als je merkt dat je "veel exemplaren van hetzelfde" op één pagina wilt tonen, heb je waarschijnlijk een module nodig en geen component.

9.2 Core-bestanden aanpassen

Bestanden aanpassen binnen components/com_content/ of de beheerversie daarvan lijkt misschien snel, maar Joomla overschrijft deze bestanden bij de volgende update. Gebruik altijd een template override, plugin, aangepast veld of taaloverride.

9.3 MVC-lagen door elkaar halen

De meest voorkomende programmeerfout is het plaatsen van databasequery's of bedrijfslogica in een layoutbestand binnen tmpl/. Houd SQL en logica in het Model, beslissingen in de Controller en alleen presentatiecode in de Layout. Hierdoor blijft de component testbaar en eenvoudig aanpasbaar.

9.4 Gedeelde diensten opnieuw uitvinden

Bouw niet zelf een categoriebeheerder, veldsysteem of tagsysteem. Joomla levert hiervoor al com_categories, com_fields en com_tags als gedeelde diensten. Door deze te gebruiken krijg je hiërarchieën, ACL, taalondersteuning en beheerfunctionaliteit gratis mee.

9.5 Details in het manifest vergeten

Een ontbrekende <namespace>-declaratie veroorzaakt fouten zoals "class not found". Een ontbrekende of onjuiste <files>- of <sql>-vermelding zorgt ervoor dat bestanden of tabellen niet worden geïnstalleerd. Het manifest is klein, maar iedere regel telt.

11. In het kort

HERKENNEN    Zoek naar option=com_xxx in de URL
SITEBESTANDEN components/com_xxx/
ADMINBESTANDEN administrator/components/com_xxx/
STARTPUNT    services/provider.php  (NIET controller.php)
STRUCTUUR    src/Controller, src/Model, src/View, src/Table, tmpl/
INSTALLATIEREGEL #__extensions (type=component, params=JSON-opties)
EIGEN TABELLEN #__content, #__contact_details, #__banners, ...
RECHTEN      #__assets (JSON-regels, overerving in de boomstructuur)
OVERRIDE     templates/{tpl}/html/com_xxx/{view}/{layout}.php
UITBREIDEN   Plugin die luistert naar onContent*-events
REST API     /api/index.php/v1/... (Web Services-plugin activeren)
GEDEELD      Categorieën, Velden, Tags, Workflow, Associaties