002. Adding a view to the site part

In this chapter we will ...

Now, we want to create a view on the front end.

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

All changes at a glance

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

More detailed explanations

File Structure

components/com_foos/Controller/DisplayController.php

components/com_foos/View/Foo/HtmlView.php

components/com_foos/tmpl/foo/default.php

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.

src/administrator/components/com_foos/foos.xml

Example in Joomla 4

Side Note

Non-SEF URL

It is important to knwo 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 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