1 Creating a Simple Component for Joomla!4.x
2 Developing a Basic Component - Part 1
- 2.1 Notes
- 2.2 Requirements
- 2.3 Creating a simple module/Developing a Basic Module
- 2.4 Test your module
- 2.5 Component Contents
- 2.6 Conclusion
3 Adding a view to the site part - Part 2
- 3.1 Requirements
- 3.2 Component Contents
- 3.3 Conclusion
4 Adding a menu type to the site part - Part 3
- 4.1 Requirements
- 4.2 Component Contents
- 4.3 Conclusion
5 Adding a model to the site part - Part 4
- 5.1 Requirements
- 5.2 Component Contents
- 5.3 Conclusion
6 Adding a variable request in the menu type - Part 5
- 6.1 Requirements
- 6.2 Component Contents
- 6.3 Conclusion
7 Using the database in the backend - Part 6
- 7.1 Requirements
- 7.2 Component Contents
- 7.3 Conclusion
8 Using the database in the frontend - Part 7
- 8.1 Requirements
- 8.2 Component Contents
- 8.3 Conclusion
9 Using languages files - Part 8
- 9.1 Requirements
- 9.2 Component Contents
- 9.3 Conclusion
10 Adding configuration - Part 9
- 10.1 Requirements
- 10.2 Component Contents
- 10.3 Conclusion
11 Adding ACL - Part 10
- 11.1 Requirements
- 11.2 Component Contents
- 11.3 Conclusion
12 Adding Server side validation - Part 11a
- 12.1 Requirements
- 12.2 Component Contents
- 12.3 Conclusion
13 Adding Client side validation - Part 11b
- 13.1 Requirements
- 13.2 Component Contents
- 13.3 Conclusion
14 Adding categories - Part 12
- 14.1 Requirements
- 14.2 Component Contents
- 14.3 Conclusion
15 Adding Published/Unpublished - Part 13
- 15.1 Requirements
- 15.2 Component Contents
- 15.3 Conclusion
16 Adding Custom Fields in the backend - Part 14a
- 16.1 Requirements
- 16.2 Component Contents
- 16.3 Conclusion
17 Adding Custom Fields in the frontend - Part 14b
- 17.1 Requirements
- 17.2 Component Contents
- 17.3 Conclusion
18 Adding Associations - Part 15
- 18.1 Requirements
- 18.2 Component Contents
- 18.3 Conclusion
19 Adding Ordering and Filter - Part 16
- 19.1 Requirements
- 19.2 Component Contents
- 19.3 Conclusion
20 Adding Actions - Part 17
- 20.1 Requirements
- 20.2 Component Contents
- 20.3 Conclusion
21 Adding Params - Part 18
- 21.1 Requirements
- 21.2 Component Contents
- 21.3 Conclusion
22 Adding Pagination - Part 19
- 22.1 Requirements
- 22.2 Component Contents
- 22.3 Conclusion
23 Adding a Layout - Part 20
- 23.1 Requirements
- 23.2 Component Contents
- 23.3 Conclusion
24 Adding Checkout - Part 21
- 24.1 Requirements
- 24.2 Component Contents
- 24.3 Conclusion
25 Adding a batch process and alias - Part 22
- 25.1 Requirements
- 25.2 Component Contents
- 25.3 Conclusion
26 Adding a help link - Part 23
- 26.1 Requirements
- 26.2 Component Contents
- 26.3 Conclusion
27 Adding an update server and a changelog- Part 24
- 27.1 Requirements
- 27.2 Component Contents
- 27.3 Conclusion

Creating a Simple Component for Joomla!4.x

This is a multiple-article series of tutorials on how to develop a Model-View-Controller Component for Joomla! Version 4x. You can navigate the articles in this series by using the navigation drop down menu.

Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (Articles in this series). Let's start with the introduction.

Developing a Basic Component - Part 1

Notes

If you are new to Joomla!, please read Absolute Basics of How a Component Functions.
This tutorial is adapted from Developing a Model-View-Controller Component/2.5 and Developing a Model-View-Controller Component/3.x

Requirements

You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha7-dev). You can download Joomla! 4 at GitHub, on the Developer website or you can create a free website at https://launch.joomla.org.

Creating a simple module/Developing a Basic Module

You can see many examples of components in the standard Joomla! install. For example

Content
Banners
Tags or
Contact

This tutorial will explain how to go about creating a simple component. Through this tutorial you will learn the basic file structure of a Joomlaǃ 4 component. This basic structure can then be expanded to produce more complex modules.

todo

File Structure

There are a few basic files that are used in the standard pattern of component development:

mod_foo.php - This file is the main entry point for the module. It will perform any necessary initialization routines, call helper routines to collect any necessary data, and include the template which will display the module output.

mod_foo.xml - This file contains information about the module. It defines the files that need to be installed by the Joomla! installer and specifies configuration parameters for the module.

tmpl/default.php - This is the module template. This file will take the data collected by mod_foo.php and generate the HTML to be displayed on the page.

language/en-GB/en-GB.mod̠foo.ini and language/en-GB/en-GB.mod̠foo.sys.ini- This are the files that provide the text in United Kingdom English.

Creating mod_foo.php

The mod_foo.php file will perform following tasks:

import the class ModuleHelper to the current scope. We need it later for displaying the output.
include the template to display the output.

The helper class is imported to our current scope at the begin of the file.

use Joomla\CMS\Helper\ModuleHelper;

Last we include the template to display the output via

require ModuleHelper::getLayoutPath('mod_foo', $params->get('layout', 'default'));

Completed mod_foo.php file

The complete mod_foo.php file is as follows:

<?php
/**
 * @package    [PACKAGE_NAME]
 *
 * @author     [AUTHOR] <[AUTHOR_EMAIL]>
 * @copyright  [COPYRIGHT]
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 * @link       [AUTHOR_URL]
 */

use Joomla\CMS\Helper\ModuleHelper;

defined('_JEXEC') or die;

require ModuleHelper::getLayoutPath('mod_foo', $params->get('layout', 'default'));

Side noteː In Joomla 3x you usually used a line like $moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx'));. You not need this anymore because oft this PRː https://github.com/joomla/joomla-cms/pull/17447.

The one line that we haven’t explained so far is the first line defined('_JEXEC') or die;. This line checks to make sure that this file is being included from the Joomla! application. This is necessary to prevent variable injection and other potential security concerns.

Creating tmpl/default.php

The default.php file is the template which displays the module output.

Completed tmpl/default.php file

The code for the tmpl/default.php file is as follows:

<?php
/**
 * @package    [PACKAGE_NAME]
 *
 * @author     [AUTHOR] <[AUTHOR_EMAIL]>
 * @copyright  [COPYRIGHT]
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 * @link       [AUTHOR_URL]
 */

defined('_JEXEC') or die;

echo '[PROJECT_NAME]';

An important point to note is that the template file has the same scope as the mod_foo.php file. What this means is that a variable can be defined in the mod_foo.php file and then used in the template file without any extra declarations or function calls.

Creating com_foos.xml

The mod_foo.xml file is the installation file. Most entries are self-explanatory.

Completed mod_foo.xml file

The code for the mod_foo.xml file is as follows:

<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="3.8" client="site" method="upgrade">
    <name>MOD_FOO</name>
    <creationDate>[DATE]</creationDate>
    <author>[AUTHOR]</author>
    <authorEmail>[AUTHOR_EMAIL]</authorEmail>
    <authorUrl>[AUTHOR_URL]</authorUrl>
    <copyright>[COPYRIGHT]</copyright>
    <license>GNU General Public License version 2 or later; see LICENSE.txt</license>
    <version>1.0</version>
    <description>MOD_FOO_XML_DESCRIPTION</description>

    <files>
        <filename module="mod_foo">mod_foo.php</filename>
        <folder>tmpl</folder>
        <folder>language</folder>
        <filename>mod_foo.xml</filename>
    </files>

</extension>

Creating the language files

The files language/en-GB/en-GB.mod̠foo.ini and language/en-GB/en-GB.mod̠foo.sys.ini are used to translate text in the frontend and in the backend.

The code for language/en-GB/en-GB.mod̠foo.sys.ini is as follows:

MOD_FOO="[PROJECT_NAME]"
MOD_FOO_XML_DESCRIPTION="Foo Module"

MOD_FOO="[PROJECT_NAME]"
MOD_FOO_XML_DESCRIPTION="Foo Module"

The .sys.ini file is used to translate the description of the extension upon installation, where as the .ini file is used to translate the remaining strings and the description when viewing your extension.

More information about language files can be found hereː https://docs.joomla.org/Specification_of_language_files

Test your module

Now you can zip all files and install them via Joomla Extension Manager. After that you can choose your component in the menu of the Joomlaǃ backend.

In the front end there is no change up to now. We are going to work on this in the next chapter.

Component Contents

At this point in the tutorial, your component should contain the following files:

1	administrator/components/com_foos/Controller/DisplayController.php	this is the administrator entry point to the Foo component	new
1	administrator/components/com_foos/Extension/FoosComponent.php	the interface BootableExtensionInterface where a component class can load its internal class loader or register HTML services see https://github.com/joomla/joomla-cms/pull/20217	new
1	administrator/components/com_foos/Service/Html/Foo.php	the html service see https://github.com/joomla/joomla-cms/pull/20217	new
1	administrator/components/com_foos/View/Foos/HtmlView.php	file representing the view in the back end	new
1	administrator/components/com_foos/services/provider.php	the service provider interface see https://github.com/joomla/joomla-cms/pull/20217	new
1	administrator/components/com_foos/tmpl/foos/default.php	the default view in the back end	new
1	administrator/components/com_foos/foos.xml	this is an XML (manifest) file that tells Joomla! how to install our component.	new
1	administrator/components/com_foos/script.php	the installer script	new

1	administrator/components/com_foos/Controller/DisplayController.php	this is the administrator entry point to the Foo component	unchanged
1	administrator/components/com_foos/Extension/FoosComponent.php	the interface BootableExtensionInterface where a component class can load its internal class loader or register HTML services see https://github.com/joomla/joomla-cms/pull/20217	unchanged
1	administrator/components/com_foos/Service/Html/Foo.php	the html service see https://github.com/joomla/joomla-cms/pull/20217	unchanged
1	administrator/components/com_foos/View/Foos/HtmlView.php	file representing the view in the back end	unchanged
1	administrator/components/com_foos/services/provider.php	the service provider interface see https://github.com/joomla/joomla-cms/pull/20217	unchanged
1	administrator/components/com_foos/tmpl/foos/default.php	the default view in the back end	unchanged
1	administrator/components/com_foos/foos.xml	this is an XML (manifest) file that tells Joomla! how to install our component.	unchanged
1	administrator/components/com_foos/script.php	the installer script	unchanged
2	components/com_foos/Controller/DisplayController.php	this is the frond end entry point to the Foo component	new
2	components/com_foos/View/Foo/HtmlView.php	file representing the view in the frond end	new
2	components/com_foos/tmpl/foo/default.php	the default view in the frond end	new

User

Astridx

From Joomla! Documentation

Contents

Creating a Simple Component for Joomla!4.x

Developing a Basic Component - Part 1

Notes

Requirements

Creating a simple module/Developing a Basic Module

File Structure

Creating mod_foo.php

Completed mod_foo.php file

Creating tmpl/default.php

Completed tmpl/default.php file

Creating com_foos.xml

Completed mod_foo.xml file

Creating the language files

Test your module

Component Contents

Conclusion

Adding a view to the site part - Part 2

Requirements

Component Contents

Conclusion

Adding a menu type to the site part - Part 3

Requirements

Component Contents

Conclusion

Adding a model to the site part - Part 4

Requirements

Component Contents

Conclusion

Adding a variable request in the menu type - Part 5

Requirements

Component Contents

Conclusion

Using the database in the backend - Part 6

Requirements

Component Contents

Conclusion

Using the database in the frontend - Part 7

Requirements

Component Contents

Conclusion

Using languages files - Part 8

Requirements

Component Contents

Conclusion

Adding configuration - Part 9

Requirements

Component Contents

Conclusion

Adding ACL - Part 10

Requirements

Component Contents

Conclusion

Adding Server side validation - Part 11a

Requirements

Component Contents

Conclusion

Adding Client side validation - Part 11b

Requirements

Component Contents

Conclusion

Adding categories - Part 12

Requirements

Component Contents

Conclusion

Adding Published/Unpublished - Part 13

Requirements

Component Contents

Conclusion

Adding Custom Fields in the backend - Part 14a

Requirements

Component Contents

Conclusion

Adding Custom Fields in the frontend - Part 14b

Requirements

Component Contents

Conclusion