002. Adding a view to the site part

Adding a view to the site part

In this chapter we will ...

Now that you have a functioning back end for your component, you need to implement the font end.

The back end of our component is in the com_foos folder under /administrator/components. Now we will be working on the front end which is located in the com_foos folder under /components

Newly created or Modified files

Newly created files

components/com_foos/Controller/DisplayController.php

components/com_foos/View/Foo/HtmlView.php

components/com_foos/tmpl/foo/default.php

Modified files

src/administrator/components/com_foos/foos.xml

changelog.xml

foo_update.xml

All changes at a glance

Click here to see all changes compared to the last chapter.

More detailed explanations

File Structure

Newly created files

We will start out by creating the DisplayController.php file under components/com_foos/Controller/. This is the first file that is executed when your component is used in the front end.

components/com_foos/Controller/DisplayController.php

This is pretty similar to what we have done in the back end.

<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_foos
 *
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
namespace Joomla\Component\Foos\Site\Controller;
defined('_JEXEC') or die;
use Joomla\CMS\Factory;
use Joomla\CMS\MVC\Controller\BaseController;
use Joomla\CMS\MVC\Factory\MVCFactoryInterface;
/**
 * Foos Component Controller
 *
 * @since  1.0.0
 */
class DisplayController extends BaseController
{
	/**
	 * Constructor.
	 *
	 * @param   array                $config   An optional associative array of configuration settings.
	 * Recognized key values include 'name', 'default_task', 'model_path', and
	 * 'view_path' (this list is not meant to be comprehensive).
	 * @param   MVCFactoryInterface  $factory  The factory.
	 * @param   CMSApplication       $app      The JApplication for the dispatcher
	 * @param   \JInput              $input    Input
	 *
	 * @since   1.0
	 */
	public function __construct($config = array(), MVCFactoryInterface $factory = null, $app = null, $input = null)
	{
		parent::__construct($config, $factory, $app, $input);
	}
	/**
	 * Method to display a view.
	 *
	 * @param   boolean  $cachable   If true, the view output will be cached
	 * @param   array    $urlparams  An array of safe URL parameters and their variable types, for valid values see {@link \JFilterInput::clean()}.
	 *
	 * @return  static  This object to support chaining.
	 *
	 * @since   1.0
	 */
	public function display($cachable = false, $urlparams = array())
	{
		parent::display($cachable);
		return $this;
	}
}

Next we need to create our view. By default, Joomla! will be looking for a view in a folder with the same name as the component.

It is not necessary to use the component name for the default view; as you perhaps remember you can specify a different name in the DisplayController.

components/com_foos/View/Foo/HtmlView.php

The first view is going to be similar to the view that we created in the back end. It is going to display a simple text. Create the file HtmlView.php under components/com_foos/View/Foo/ with the following code. We are not doing anything fancy here; we are just inheriting all of the basic functionality from the BaseHtmlView class that we are extending.

<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_foos
 *
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
namespace Joomla\Component\Foos\Site\View\Foo;
defined('_JEXEC') or die;
use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;
/**
 * HTML Foos View class for the Foo component
 *
 * @since  2.0.0
 */
class HtmlView extends BaseHtmlView
{
	/**
	 * Execute and display a template script.
	 *
	 * @param   string  $tpl  The name of the template file to parse; automatically searches through the template paths.
	 *
	 * @return  mixed  A string if successful, otherwise an Error object.
	 */
	public function display($tpl = null)
	{
		return parent::display($tpl);
	}
}

components/com_foos/tmpl/foo/default.php

After that create the template file or tmpl file named default.php under components/com_foos/tmpl/foo and add the following code.

<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_foos
 *
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
defined('_JEXEC') or die;
?>
Hello Foos

The tmpl file contains the code that displays the page view. Due to you can see the result in the output, they ought to be the easiest to explain and to understand. Especially in this case. Our tmpl file contains only the word Hallo. In a real component this file is of course more complex. You can use the most complicated PHP statements here.

In order for Joomla to find the tmpl file automatically, it should be in directory tmpl.

Modified files

We need to modify our installation XML file, the update server and the change log to include the new version.

src/administrator/components/com_foos/foos.xml

changelog.xml

foo_update.xml

Example in Joomla 4

Side Note

Non-SEF URL

It is important to know that the Non-SEF URL for a foo item is YOURJOOMLA4/index.php?option=com_foos&task=display&view=foo.

• The option part is the component name.
• The task part is often left out, in which case the default task is set to display.
• If the view part is left out then the component must set the default view.

What should be considered with tmpl files

Display HTML

The content and presentation of a website should be separated according to the principle of separation of concerns. In principle, it is possible to output HTML markup with echo(). However, this quickly leads to challenges in

• nesting the quotes,
• it prevents editors and IDEs from using the correct code highlighting,
• and it is difficult to read.
  Apart from that, it tempts to ignore the IPO principle and to mix the generation of data and the output.

Bad

<?php
  echo '<div id="user_profile">';
  echo '<h2>' . $user['name'] . '</h2>';
  echo '<img src = "' . $user['profile_picture'] . '" class="profile-pic">';
  echo '</div>';
?>

Good

<div id="user_profile">
    <h1><?php = $user['name']; ?></h1>
    <img src = "<?php = $user['profile_picture']; ?>" class="profile-pic">
</div>

Test your component

Now you can zip all files and install them via Joomla Extension Manager. After that you can see the view in the front end. In the front end you can see the view if you open the address YOURJOOMLA4/index.php?option=com_foos&view=foo.

At the moment you have to enter the address manually. It would be nicer to have a menu item. We are going to work on this in the next chapter.

Concluding Remark

Now we have a basic view in the back end and in the front end.

Component development for Joomla 4 is a fairly simple, straightforward process. Using the techniques described in this tutorial, an endless variety of components can be developed with little hassle.

Overview of all files