Jumping into the actual development, starting to use database

In this step, we will start using the database, to populate the list of breeds from the breeds table.

 Files to create / update

create breeds.php        /site/controllers/breeds.php

update breeds.php        /site/models/breeds.php

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

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

update breed.xml       /breed.xml

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

File Details


protected function getListQuery()
		// Create a new query object.
		$db    = $this->getDbo();
		$query = $db->getQuery(true);

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

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

		return $query;

Normally model is used to perform database operations, like storing and retrieving data. In this part of the tutorial, I will show you how data could be fetched from the database using a model. As described in the previous step,we have a model class here, BreedModelBreeds, extending JModellList, which is meant for pulling records from database.

After declaring the model class, we are overwriting the default getListQuery() function, provided by the class to which we are extending. This getListQuery() function will return a query string back to JModelList which will execute it against selected database table and on the basis of that query, it will fetch the results, which it will pass on to the view to be displayed in a tabulated form. Now on line 26 of above mentioned code, we are pulling a database object through  $this->getDbo();. which is a database connector method, so whenever you have to do anything with database, either inserting, deleting or updating a record or want to change or add any field to a table or have to perform any sort of database specific operation, you have to call this method first. It will mkae you set and execute queries and can display results in different formats. It will also display any database and query specific bugs and errors.

After calling the database object, the next thing we are going to do is, initializing the query object into $query object. You might have worked on PHP database based applications and might have building queries in SQL. The same thing happens in Joomla as well but in an advanced level to make the querying process more flexible, organized and at the time of any error, easy to troubleshoot. For creating a query, first we call getQuery method through $db object and then pass it to $query object by giving “true” in the argument section to return a new database query object.  Passing “true” in the argument list refresh the getQuery() function and is necessary because without it, the call to getQuery() returns the last executed query that the database connection has stored.

You can take getListQuery(), simply a method to prepare a query against the database. To handle the data automatically, there are other methods in JModelList class and getItems is a good example of it, used to retrieve a list of items or records from the database.

create breeds.php        /site/controllers/breeds.php


defined('_JEXEC') or die;

require_once JPATH_COMPONENT . '/controller.php';

class BreedControllerBreeds extends BreedController
	public function &getModel($name = 'Breeds', $prefix = 'BreedModel', $config = array())
		$model = parent::getModel($name, $prefix, array('ignore_request' => true));

		return $model;

We have already gone through the front or base controller in the previous steps. In this part, I am introducing you with a second type of controller, called the sub controller or application controller. While we can put all of our tasks related code in the base controller and still we can build a complete fully functional application, still it is a good idea to create separate view, corresponding each separate view and model, so that code could be easily and perfectly organized. Developing, deploying and troubleshooting will become easier in this method. Sub controller are normally put in a “controllers” folder, located at the root of the component, both on front and backend.

So we have created a controller file, breed.php in the controllers folder of our component frontend root, as shown above. You are quite familiar with defined(‘_JEXEC’) or die; on line 4 and on line 6, we are calling our main controller which actually holds the base controller library. After that on line 13 we have created a class named, BreedControllerBreeds, in which the first portion, “Breed” is the name of component, “Controller” indicates that this is a controller class and “Breeds” is the name of file and it is extending the BreedController class.

Line 18 to 23 shows our basic purpose of creating the controller file, as we are calling our model here, that we have created above. In the BreedControllerBreeds, we are getting the model,we have created above and then it will be passed on to the View. We are calling Breeds model here because this is the model which contains support for saving, changing state, ordering etc.

This is an important point to note that, unlike other MVC frameworks, in Joomla views can get data directly from models. But it is always a best practice that you should use a controller to fetch the model to avoid messing up things, especially when you are working on a large project. Joomla also supports multiple controllers per single component.


protected $items;

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


This file is responsible for getting model data. In this view.html.php, as compared to previous step file, you can clearly see that we have added a protected property called “items” and another line of code,  $this->items = $this->get(‘Items’); .  It is a get method, specifically for JView and it has nothing to do with the actual get method belonging to model, we discussed in previous step. It ensures that we are not directly accessing the method residing in model. JView loads the model and view in the same view.html.php file.



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

<h1><?php echo JText::_('COM_BREED_TITLE_BREEDS'); ?></h1>

		<table class="table table-striped" id="breedList">

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

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

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


	<?php if (isset($this->items[0]->id)): ?>
					<td class="center hidden-phone">
						<?php echo (int) $item->id; ?>
					</td>   	<?php endif; ?>

     <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; ?>

The default.php is the actual file, holding the html related stuff. All the logic related stuff is in model and all the display code is in default.php so in this way, we have avoided mixing php and html, which is the actual beauty of MVC.

In the above mentioned default.php file code, on line 4 we are using defined(‘_JEXEC’) or die; and as I stated before,it will not allow anybody to directly access this file. Next on line 7, The heading of the page is given in h1 tags. Itis always a good idea to use h1 tags for page main heading, according to SEO point of view. We are declaring the page title in a language string, which will then be processed through component associated language ini file to give the actual text.

We are displaying the list of records we got from model, in a tabulated form and for this pupose, we are using table here with the class “table” and “table striped”. Giving the proper class names is necessary as these are pre defined in professional joomla templates for giving special styling to the table. After that, the table header, thead tag comes, which is containing our column headings. The first column refers to record id, with an if statement, because in some places record id is not ment to be shown to public because of privacy or security issues. Then comes the breed name column and breed picture and then breed category. Thats what we need for now but in the next two steps we will be playing with these in more detail.

Now coming to the table body, “tbody”. This is where we have actual processing. The table body rows are going through a php foreach loop to display the records. It is using the same property, $items, that we have declared in the view.html.php file, to render the items list. Rest is self explanatory, as we are getting the value of id in first column, breeb name in the second column and in third one, we are rendering the picture of breed. Next there is the breed category value column and then there is the end of foreach loop.








As we have added some language strings in our main view default.php file, so we are calling them here to write their appropriate values in the respective language en-GB.com_breed.ini config file that would replace them in the code.

Previewing the component frontend:

Now if you are on the localhost and to view the component frontend, please follow the following url, http://localhost/{joomla directory}/index.php?option=com_breed . When you will open that url, you should see a dogs listing screen like this, shown below.

Download Code

Next –> Implementing pagination on the list view

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 codingace.com 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

CEO: codingace.com

Request a Quote