Modules - First Steps | Astrid Günther

We create a module.H This is an add-on that extends the display of the actual content. It is used when a content is not the main content and is displayed in different positions. Besides, it is possible to select the menu items under which the module is visible.

In Joomla, there are a variety of modules that I use as a guide. For example:

Menus (mod_menu)
Login form (mod_login)
and many more.

This section explains how you create the basic framework for a simple module. In the first step it only outputs a text. We will build on this in the further course.

For impatient people: View the changed program code in the Diff View[^codeberg.org/astrid/j4examplecode/compare/t30...t31] and copy these changes into your development version.

Step by step

In this section we will add a module. There are some basic files that are used in the standard module development pattern. We create these in this part.

New files

Module

modules/mod_foo/ language/en-GB/en-GB.mod_foo.ini

This file provides the texts for for general translation.

<!-- https://codeberg.org/astrid/j4examplecode/raw/branch/t31/src/modules/mod_foo/language/en-GB/en-GB.mod_foo.ini -->

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

modules/mod_foo/ language/en-GB/en-GB.mod_foo.sys.ini

This file provides the texts for menu and installation routine.

<!-- https://codeberg.org/astrid/j4examplecode/raw/branch/t31/src/modules/mod_foo/language/en-GB/en-GB.mod_foo.sys.ini -->

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

modules/mod_foo/ mod_foo.php

mod_foo.php is the main entry point into the module. The file executes the initialization routines, calls helper routines to collect all the required data, and calls the template where the module output is displayed.

// https://codeberg.org/astrid/j4examplecode/raw/branch/t31/src/modules/mod_foo/mod_foo.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  mod_foo
 *
 * @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

\defined('_JEXEC') or die;

use Joomla\CMS\Helper\ModuleHelper;

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

In Joomla 3x a line like $ moduleclass_sfx = htmlspecialchars ($ params-> get ('moduleclass_sfx')); was necessary. This line is no longer required. See PR 17447.

modules/mod_foo/ mod_foo.xml

mod_foo.xml defines the files that are copied by the installation routine and specifies configuration parameters for the module. You already know this from the previously created extensions.

<!-- https://codeberg.org/astrid/j4examplecode/raw/branch/t31/src/modules/mod_foo/mod_foo.xml -->

<?xml version="1.0" encoding="utf-8"?>
<extension type="module" 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>__BUMP_VERSION__</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>

modules/mod_foo/tmpl/default.php

default.php is the template. This file takes the data collected by mod_foo.php and generates the HTML code that is displayed on the page. echo '[PROJECT_NAME]'; ensures that the name of the project is displayed in the frontend at the position where the module is published.

// https://codeberg.org/astrid/j4examplecode/raw/branch/t31/src/modules/mod_foo/tmpl/default.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  mod_foo
 *
 * @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

\defined('_JEXEC') or die;

echo '[PROJECT_NAME]';

Note: In the template file it is possible to use all variables defined in mod_foo.php.

Changed files

There are no changed files.

Test your Joomla module

install your module in Joomla version 4 to test it. In the beginning, the easiest thing to do is to copy the files manually in place:

Copy the files in the modules folder to the modules folder of your Joomla 4 installation.

install your module as described in part one, after you have copied all files. Open the menu System | Install | Discover. Here you will see an entry for the module you just copied. Select it and click on the button Install. 3.

Next, test if your module works properly. Open the menu 'Content | Site Modules' and click in the toolbar New.

enter a title in the appropriate field and choose a position. In the tab 'Menu Assignment' make sure that the module is displayed on all pages. At the end click the button Save in the toolbar.

That's it. Switch to the frontend view and make sure that everything is displayed correctly.

Alternatively it is possible to insert the module into a post.

We have a solid basis for the further steps in the development of the module.

Links

Joomla Dokumentation[^docs.joomla.org/j4.x:creating_a_simple_module]