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

/administrator/models/breeds.php

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

		// Select the required fields from the table.
		$query
			->select(
				$this->getState(
					'list.select', 'DISTINCT a.*'
				)
			);

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

		return $query;
	}

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

Following that, we declare the getListQuery function, which returns a query string to JModelList so that it can run it against the database and select, fetch, and display records based on it.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 that enables us to set and execute queries against a database, display results in different formats, and also check for bugs and errors.

Now that we have called the database object, we are going to initialise the query into the query object. You might have experience writing queries in PHP applications, and the same thing 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, manage, and troubleshoot. Even complex parallel queries can be written in Joomla using the query break down concept.So, on line 19 of the above-mentioned code, we have started to create a query by calling the getQuery method through the $db object that we have created above this line. In the argument, we are passing true to create a new database query because it refreshes the getQuery() method.

Next, we write our actual query, which is self-explanatory; we select all of the data from #__breed_breed and then return this query so that it can be run and return the desired results.

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

	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');

		parent::display($tpl);
	}

The 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 the 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 to not directly access the method contained in the model.

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

<?php
// 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">
		<thead>
		<tr>

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

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

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

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

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

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

	<td><?php
		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>  ';
				endif;
			endforeach;
			else:
				echo $item->pic;
			endif; ?>	</td>

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

</tr>
	<?php endforeach; ?>
		
		</tbody>

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

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 because 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 the form whenever you are working on the list view. This form posts back to the com_breed component.

After the form declaration, there is a table in which data will be displayed. You will see that the table has a class name of “table table-striped.” These class names have predefined styling in CSS files and give an attractive look to the data list. Then comes the table header, where column names are given. The first column is for the checkbox field, and then the standard table headers are given. On line 46, under the foreach loop, you will notice a php code along with the tr class. This code will set the class name by checking 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 a record id to every checkbox. It has a connection with toolbar buttons, which I will discuss in the next steps. On line 55, we are generating publish and unpublish buttons.

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

COM_BREED_BREEDS_BREEDNAME="Breed Name"

COM_BREED_BREEDS_PIC="Pic"

COM_BREED_BREEDS_BREEDCAT="Breed Category"

COM_BREED_TITLE_BREEDS="Breeds List"

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