Joomla 4.x Tutorial - Extension Development - The M in MVC: Model

Modify this post

No new function is added in this part. We improve the previous structure. Each web application consists of

  • Logic,
  • data and
  • the presentation.

It is problematic to combine these three elements in one class. Especially for larger projects.

Joomla uses the Model-View-Controller-Concept (MVC) for the subdivision.

In this tutorial part, we add a Model to the frontend. The Model object is responsible for the data and its processing.

For impatient people

View the changed program code in the Diff Viewgithub.com/astridx/boilerplate/compare/t3...t4 and incorporate these changes into your development version.

Step by step

In the following overview, the newly added files are marked with a background and the changed ones are outlined.

Overview of the files edited in this chapter

New files

components/com_foos/ src/Model/FooModel.php

With the model it is also so that you do not reinvent the wheel. You extend the Joomla class BaseDatabaseModel. Then implement only what you specifically use. In our case it is the output $this->message = 'Hello Foo!'; for which we create the method getMsg().

components/com_foos/ src/Model/FooModel.php

// https://raw.githubusercontent.com/astridx/boilerplate/t4/src/components/com_foos/src/Model/FooModel.php

<?php

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

namespace FooNamespace\Component\Foos\Site\Model;

\defined('_JEXEC') or die;

use Joomla\CMS\MVC\Model\BaseDatabaseModel;

/**
 * Foo model for the Joomla Foos component.
 *
 * @since  __BUMP_VERSION__
 */
class FooModel extends BaseDatabaseModel
{
	/**
	 * @var string message
	 */
	protected $message;

	/**
	 * Get the message
	 *
	 * @return  string  The message to be displayed to the user
	 */
	public function getMsg()
	{
		if (!isset($this->message)) {
			$this->message = 'Hello Foo!';
		}

		return $this->message;
	}
}

Modified files

components/com_foos/ src/View/Foo/HtmlView.php

We get the data of the model in the view with $this->msg = $this->get('Msg');. This seems awkward here. In complex applications this method has proven itself. The data calculation is done in the model. The design of the view using the calculated data is done by the view.

components/com_foos/ src/View/Foo/HtmlView.php

 	public function display($tpl = null)
 	{
		$this->msg = $this->get('Msg');

 		return parent::display($tpl);
 	}
 }

You may be confused by the call $this->get('Msg'); as I was when I first started using Joomla. The method in the model is called getMsg(), but we call it here via get('Msg'). This doesn't fit. If you have dealt with object oriented programming before, you are tempted to call it via getMsg(). If you are using Joomla, you will have an easier time using things the way they are prepared for you. You call Getter in the model via the method get() with the appropriate parameter.

components/com_foos/ tmpl/foo/default.php

Über das Template geben wir die Daten aus. Hier wird später alles richtig in HTML-Tags verpackt.

components/com_foos/ tmpl/foo/default.php

 \defined('_JEXEC') or die;
 ?>
Hello Foos

Hello Foos: <?php echo $this->msg;

Test your Joomla component

  1. install your component in Joomla version 4 to test it:

Copy the files in the administrator folder into the administrator folder of your Joomla 4 installation.
Copy the files in the components folder into the components folder of your Joomla 4 installation.

A new installation is not necessary. Continue using the files from the previous part. 2.

  1. look at the frontend view of your component. Make sure that the data for the output is generated by the model.

Joomla Model in Frontend

Modify this post

Comments