Creating a list view at backend

Files to create / update

update breeds.php        /administrator/models/breeds.php

update view.html.php   /administrator/views/breeds/view.html.php

update default.php       /administrator/views/breeds/tmpl/default.php

update breed.xml       /breed.xml

update en-GB.com_breed.ini     /languages/administrator/en-GB/en-GB.com_breed.ini

update en-GB.com_breed.sys.ini    /languages/administrator/en-GB/en-GB.com_breed.sys.ini

File Details


	protected function getListQuery()
		$db    = $this->getDbo();
		$query = $db->getQuery(true);

		// Select the required fields from the table.
					'', 'DISTINCT a.*'

		$query->from('`#__breed_breed` AS a');

		return $query;

In Joomla component, model has a critical job and it performs a lot of functions, but for now, for understanding purpose, you can take it as an entity for performing database functions, like storing or retrieving data. In our “BreedModelBreeds” model class, we are extending JModelList which facilitates us to pull records from database on the basis of a certain query.

Next we are declaring the getListQuery function which is returning a query string back to JModelList, so that it could run it against database and to select, fetch and display records based on this query. We want to display all the breeds contained in the database table. Then we are getting a database object from the model, like $this->getDbo(); which will actually pull the database object. You can say that getDbo() is a database connector method which enables us to set and execute queries against database and display results in different formats and also checks for bugs and errors.

Now that we have called the db object, we are going to initialize the query into $query object. You might have experience writing queries in PHP applications and the same things works in Joomla as well. The difference between a normal PHP application and Joomla is that, Joomla has taken the query building concept to an advanced level so that it would be easy to build and manage and easy to troubleshoot. Even one can write complex parallel queries in Joomla by using the query break down concept, which it provides. So, on line 19 of above mentioned code, we have started to create a query by calling the getQuery method through $db object that we have created above this line. In the argument,we are passing true to create a new database query, because it refreshs the getQuery() method.

Next we are writing our actual query and all of this is self explanatory, we are selecting all the data from #__breed_breed and then returning this query back so that it could be run and fetch the results we wanted.


	function display($tpl = null)
		$app = JFactory::getApplication();
	    $this->items = $this->get('Items');

		// Check for errors.
		if (count($errors = $this->get('Errors')))
			throw new Exception(implode("\n", $errors));

	    JToolBarHelper::title(JText::_('COM_BREED_TITLE_BREEDS'), 'breeds.png');


JView class is responsible for loading the view and model in the single view.html.php file. Through this view.html.php file, we are getting the model data. In this file, we have added two new lines, as compared to previous step file and those are “protected $items;” and ” $this->items = $this->get(‘Items’);” on lines 9 and 15 respectively. It is a JView specific get method and it makes it possible for not directly accessing the method contained in model.


// No direct access
defined('_JEXEC') or die;

<form action="<?php echo JRoute::_('index.php?option=com_breed&view=breeds'); ?>" method="post"
	  name="adminForm" id="adminForm">
		<table class="table table-striped" id="breedList">

			<th width="1%" class="hidden-phone">
						<input type="checkbox" name="checkall-toggle" value=""
							   title="<?php echo JText::_('JGLOBAL_CHECK_ALL'); ?>" onclick="Joomla.checkAll(this)"/>
					<?php if (isset($this->items[0]->state)): ?>
			<th width="1%" class="nowrap center">
	             <?php echo JText::_('JSTATUS'); ?>
					<?php endif; ?>

		<?php if (isset($this->items[0]->id)): ?>
			<th width="1%" class="nowrap center hidden-phone">
					<?php echo JText::_('JGRID_HEADING_ID'); ?>  
			<?php endif; ?>

	<th class='left'>
				<?php echo JText::_('COM_BREED_BREEDS_BREEDNAME'); ?>   	</th>
			<th class='left'>
				<?php echo JText::_('COM_BREED_BREEDS_PIC'); ?>
			<th class='left'>
				<?php echo JText::_('COM_BREED_BREEDS_BREEDCAT'); ?>

			<?php foreach ($this->items as $i => $item) : ?>

		<tr class="row<?php echo $i % 2; ?>">
					<td class="hidden-phone">
							<?php echo JHtml::_('', $i, $item->id); ?>
							<td class="center">
	<?php echo JHtml::_('jgrid.published', $item->state, $i, 'breeds.', $canChange, 'cb'); ?>
							<td class="hidden-phone">
							<?php echo  $item->id; ?>

<td>	<?php echo $this->escape($item->breedname); ?></td>

		if (!empty($item->pic)) :
			$picArr = explode(',', $item->pic);
			foreach ($picArr as $fileSingle) :
			if (!is_array($fileSingle)) :
				$uploadPath = '/components/com_breed/breedpic' .DIRECTORY_SEPARATOR . $fileSingle;
				echo '<a href="' . JRoute::_(JUri::root() . $uploadPath, false) . '" target=_blank><img src="' . JRoute::_(JUri::root() . $uploadPath, false) . '" width="100px" title="See the pic"> </a>  ';
				echo $item->pic;
			endif; ?>	</td>

<td>     	<?php echo $item->breedcat; ?>      </td>

	<?php endforeach; ?>

			<input type="hidden" name="task" value=""/>
			<input type="hidden" name="boxchecked" value="0"/>
			<?php echo JHtml::_('form.token'); ?>

Here is the actual default.php file which will display the list of records. You can notice that the name of the form is “adminForm”. This is very important to keep in mind that the javascript code running in the backend process is coded to work with the form named, “adminForm”. So, don’t forget to add this name to form, whenever you are working on the list view. This form posts back to com_breed component.

After the form declaration, there starts a table in which data will be displayed. You will see that the table has class names, “table table-striped”. These class names have pre defined styling in css files and give an attractive look to the data list. Then comes the table header, where column names are given. First column is for checkbox field and then the standard table headrer are given. On line 46, under the foreach loop, you will notice a php code along with tr class. This code will set the class name by checking that whether this row is odd or even.

On line 51, we are using a JHtml class to generate a checkbox for that specific row, by assigning record id to every checkbox. It has a connection with Toolbar buttons which I will discuss in next steps. On line 55, we are generating publish and unpublish buttons.






According to the language strings that we have added in the view default.php file, we are adding their appropriate values in the en-GB.com_breed.ini language config file, located in the languages folder in the backend and in the en-GB directory. Each key in the file corresponds to its respective value.

Download Code

Next –> Implementing Grid sort and pagination at backend

Add a Comment

Your email address will not be published. Required fields are marked *

Enjoy best web development services at an affordable price. Looking forward to build a good relationship and serve you better...


My name is Nohman Habib and I am a web developer with over 10 years of experience, programming in Joomla, Wordpress, WHMCS, vTiger and Hybrid Apps. My plan to start is to share my experience and expertise with others. Here my basic area of focus is to post tutorials primarily on Joomla development, HTML5, CSS3 and PHP.

Nohman Habib


Request a Quote