Adding a view to component frontend

We are continuing our work on the breeds component, and in this step, we are going to add a view to the component’s frontend (site) part. When you make a request to Joomla, it ends up displaying an HTML-based page. The component we are going to build will consist of several pages of information that we want to display. Joomla makes it possible for us with the help of views that are independent of each other. It handles views in tandem with a controller because the controller is the one who takes the request from the URL and decides which view to load.This means that we first have to create a controller before starting work on views.

In your Joomla component directory, open com_breedc. In this step, you have to create following files.

Create  controller.php        /site/controller.php

Create  view.html.php       /site/views/breeds/view.html.php

Create  default.php           /site/views/breeds/tmpl/default.php

Create  default.xml           /site/views/breeds/tmpl/default.xml

Update  breed.php          /site/breed.php

Update  en-GB.com_breed.ini        languages/site/en-GB/en-GB.com_breed.ini

Update  breed.xml          /breed.xml

Starting to Update the component:

Starting from updating site/breed.php

<?php

defined('_JEXEC') or die;

jimport('joomla.application.component.controller');

JLoader::registerPrefix('Breed', JPATH_COMPONENT);
JLoader::register('BreedController', JPATH_COMPONENT . '/controller.php');

$controller = JControllerLegacy::getInstance('Breed');
$controller->execute(JFactory::getApplication()->input->get('task'));
$controller->redirect();

In this breed.php file, first we have declared, defined (‘_JEXEC’), or died to deny direct access to this file. After this on line 13, we are importing the main controller code through the jimport method so that the JController class can be accessed. Then we are getting the instance of our breed controller through the JControllerLegacy getInstance method by passing the component name to it as an argument. After this, on the next line, we are making use of the PHP method chaining concept, through which we can call more than one method by making just a single request. It will retrieve the task from the request and forward it to the controller for execution.In this case, the controller will be the base controller and will be located in the same directory as the breed.php file.

When the request has been run successfully, we call a redirect method so that the controller could redirect the user to a page that is meant to be displayed by the controller, and if the request has not been run successfully, the controller will display an error and keep the user on the same page, unless otherwise overridden in the controller’s redirect method in the respective function.

site/controller.php

<?php

defined('_JEXEC') or die;

jimport('joomla.application.component.controller');

class BreedController extends JControllerLegacy
{
	public function display($cachable = false, $urlparams = false)
	{
		$view = JFactory::getApplication()->input->getCmd('view', 'breeds');
		JFactory::getApplication()->input->set('view', $view);

		parent::display($cachable, $urlparams);

		return $this;
	}
}

In the base controller.php file, first we will import the library that has all the controller code through jimport function on line 13. jimport is normally used in joomla to pull in a library. Now coming to the class definition in which the name of the class is Breed, which is the name of our component, along with “Controller”, this is how a controller is named in joomla, which it tries to load. This class is extending JController class, which is the base class which joomla makes available for controllers.

On line 14, there is a function definition called “display”, which is responsible for pulling the breeds view and sending it to joomla for displaying in browser.

Next in this method, on line 11, we are calling the getApplication() method of JFactory class to get the view and here again we are using the PHP method chaining concept. Through the getCmd method, we are trying to get the view from the url are passing it the default value of “breeds”, if it didn’t find any view requests. What this means is, if you are on the component main page by opening it using index.php?option=com_breed and you are not passing it any view, like, view=breeds, still it will load the default provided view, i.e, “breeds”.  Next we set the view and call the parent display method to display this view. You can set the $cachable = true in the display()  parameter to load the cached version of the view or page, but by default it is set to false.

site/breeds/view.html.php

<?php

defined('_JEXEC') or die;

jimport('joomla.application.component.view');

class BreedViewBreeds extends JViewLegacy
{

	function display($tpl = null)
	{
		$this->msg = JText::_('BREEDS_LIST');
 
		parent::display($tpl);
	}

}

When a request is made in Joomla, it ends up displaying html code in browser. That’s why the purpose of developing a component is to display the information on the browser that we want our users to see and the component can contain a single page or dozens of pages or views. Joomla handles views along with controllers, in the following way.

We will call our breeds component to load in browser by the url, index.php?option=com_breed . When we call our component, it tries to load the default view as declared in the base controller ,like this:

$view = JFactory::getApplication()->input->getCmd(‘view’, ‘breeds’);

Now here you can see that breeds is our default view. So, if we run index.php?option=com_breed or index.php?option=com_breed&view=breeds , it will give same result.

Now coming to the view.html.php file. This is the file which joomla goes through first before calling the actual default.php file in which html code resides. This file allows us to add any data to the view, before displaying it. On line 5, we have imported the view library and after that on line 7, we have declared the actual view class, named BreedViewBreeds, where Breed is the name of component and Breeds is the name of view. Then we have a method called “display”. It allows us to add data to the view before it is displayed. Then on the next line we are setting a msg and calling the display function on line 14 which will pull the default.php file from the view tmpl directory.

The JText class

On line 12, you will notice that we are not directly passing the text, but rather we are using the JText class. What this class do is, it passes the string to Joomla’s translation system. We are using the underscrore method of JText class and passing our string to it and joomla is doing the rest for us. It will go for the key in a .ini language file,associated with the component and resides in the Joomla languages folder. It will match the key and if it found any match, its corresponding text is replaced with the string we are passing to JText.

Beside Joomla, PHP also has a translation system which is built in to it by using the gettext method. PHP has a shortcut to it through a function called underscore , so Joomla uses the same approach in its library.

Now let us update the language files we have created in the first step, to hold our language string as a key and its corresponding text as its value. Then I will show you how you can call and display this text in the component default view default.php file.

site/views/breeds/tmpl/default.php

<?php
// No direct access
defined('_JEXEC') or die;
?>

<h1><?php echo $this->msg; ?></h1>

The default.php file, laocated in the views tmpl directory is the file which is going to hold our all future html code for the breeds view to create a tabulated listing of breeds. So, you can say that default.php file acts like an html placeholder and as you can see that, in the above mentioned default.php file, we are getting and displaying the msg from view.html.php file, in h1 tags. This code then will be fetched by view file and will be displayed to the user,using a browser.

languages/site/en-GB/en-GB.com_breed.ini

COM_BREED="Breed"
BREEDS_LIST="Breeds List"

Add the language key and string

To add a language string to the language file, first navigate to the view.html.php file and copy the upper-case key from the JText underscore method, then paste it into the languages / site / en-GB / en-GB.com_breed.ini file, which is the main language file for our breeds component.One point to understand is that, the language keys should always be in uppercase, as proposed by Joomla. After that, we have pasted the key, the next step is to give its value, by putting an equal to sign with it and then the actual value, wrapped in double quotes, and then save the file. Thats it for now with this language configuration file.

breed.xml file will now become

- - - - - -

    </sql>
    </uninstall>

    <files folder="site">
        <filename>index.html</filename>
        <filename>breed.php</filename>
        <filename>controller.php</filename>
        <folder>views</folder>
    </files>
 <languages folder="languages/site">

- - - - - -

Now that our code for this step is ready, its time to update the breed.xml manifest file. We have to create a new file listing called “controller.php” and secondly a new folder listing, called “views” in the site section, as you can see in the code above, in bold letters.

Adding a menu type to breeds list view:

Create an xml file in,  site/views/breeds/tmpl/default.xml

File content:

<?xml version="1.0" encoding="utf-8"?>
<metadata>
<layout title="COM_BREED_TITLE_LIST_VIEW_BREEDS" option="View">
        <message>
                        <![CDATA[COM_BREED_TITLE_LIST_VIEW_BREEDS_DESC]]>
        </message>
</layout>
</metadata>

You can link views to a dynamically generated menu at the backend through Joomla. To make this work, it is necessary to identify these views in a way that is recognisable to administrators. This process is done through an XML file in the component frontend. In this XML file, there is a metadata element and the layout element inside it. The title parameter is the title that we are going to use in this view. It is a language string and will be translated through a language file. Then we have a message for the layout. Both of these work together and add a title and description to the view. If we create additional views, we can create additional XML files for the views that we want to be connected to a menu item.

Next –> Jumping into the actual development, starting to use database