Difference between revisions of "Developing a MVC Component/Basic backend"

Revision as of 11:58, 11 November 2009

This page has been archived. This page contains information for an unsupported Joomla! version or is no longer relevant. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

Under Construction

Template:Future

Articles in this series[edit]

Indroduction[edit]

This tutorial is part of the Developing a Model-View-Controller (MVC) Component for Joomla!1.6 tutorial. You are encouraged to read the previous parts of the tutorial before reading this.

Basic backend[edit]

Designing the backend interface leads us to create at least a Model-View-Controller triptych. We have to modified the administrator entry point of our component, the admin/helloworld.php file

admin/helloworld.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// import joomla controller library
jimport('joomla.application.component.controller');
// Get an instance of the controller prefixed by HelloWorld
$controller = JController::getInstance('HelloWorld');
// Perform the Request task
$controller->execute(JRequest::getCmd('task'));
// Redirect if set by the controller
$controller->redirect();

Create the general controller[edit]

The entry point now get an instance of a HelloWorld prefixed controller. Let create a basic controller for the administrator part:

admin/controller.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// import Joomla controller library
jimport('joomla.application.component.controller');
/**
 * General Controller of HelloWorld component
 */
class HelloWorldController extends JController
{
	/**
	 * display task
	 *
	 * @return void
	 */
	function display($cachable = false) 
	{
		// set default view if not set
		JRequest::setVar('view', JRequest::getCmd('view', 'HelloWorldList'));
		// call parent behavior
		parent::display($cachable);
	}
}

This controller will display the 'HelloWorldList view by default.

Create the view[edit]

With your favorite file manager and editor, create a file admin/views/helloworldlist/view.html.php containing:

admin/views/helloworldlist/view.html.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// import Joomla view library
jimport('joomla.application.component.view');
/**
 * HelloWorldList View
 */
class HelloWorldViewHelloWorldList extends JView {
	/**
	 * items to be displayed
	 */
	protected $items;
	/**
	 * pagination for the items
	 */
	protected $pagination;
	/**
	 * HelloWorldList view display method
	 * @return void
	 */
	function display($tpl = null)
	{
		// Get data from the model
		$items = $this->get('Items');
		$pagination = $this->get('Pagination');
		// Assign data to the view
		$this->items = $items;
		$this->pagination = $pagination;
		// Display the template
		parent::display($tpl);
	}
}

In Joomla, views display data using layout. With your favorite file manager and editor, put a file admin/views/helloworldlist/tmpl/default.php containing

admin/views/helloworldlist/tmpl/default.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
// load tooltip behavior
JHtml::_('behavior.tooltip');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld'); ?>" method="post" name="adminForm">
	<table class="adminlist">
		<thead><?php echo $this->loadTemplate('head');?></thead>
		<tfoot><?php echo $this->loadTemplate('foot');?></tfoot>
		<tbody><?php echo $this->loadTemplate('body');?></tbody>
	</table>
</form>

This layout calls several sub-layout (head, foot and body). Each sub-layout corresponds to a file prefixed by the name of the main layout (default), and an underscore.

Put a file admin/views/helloworldlist/tmpl/default_head.php containing

admin/views/helloworldlist/tmpl/default_head.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
	<th width="5">
		<?php echo JText::_('com_helloworld_HELLOWORLD_ID'); ?>
	</th>
	<th width="20">
		<input type="checkbox" name="toggle" value="" onclick="checkAll(<?php echo count($this->items); ?>);" />
	</th>			
	<th>
		<?php echo JText::_('com_helloworld_HELLOWORLD_GREETING'); ?>
	</th>
</tr>

checkAll is a javascript function defined in the Joomla core able to check all items.

Put a file admin/views/helloworldlist/tmpl/default_body.php containing

admin/views/helloworldlist/tmpl/default_body.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<?php foreach($this->items as $i => $item): ?>
	<tr class="row<?php echo $i % 2; ?>">
		<td>
			<?php echo $item->id; ?>
		</td>
		<td>
			<?php echo JHtml::_('grid.id', $i, $item->id); ?>
		</td>
		<td>
			<?php echo $item->greeting; ?>
		</td>
	</tr>
<?php endforeach; ?>

JHtml::_ is an helper function able to display several HTML output. In this case, it will display a checkbox for the item.

Put a file admin/views/helloworldlist/tmpl/default_foot.php containing

admin/views/helloworldlist/tmpl/default_foot.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
	<td colspan="3"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>

JPagination is a Joomla class able to manage and display pagination object.

Create the model[edit]

The HelloWorldList view asks the model for data. In Joomla!1.6, there is a class able to manage list of data: JModelList. Class JModelList and inherited classes needs only one method:

_getListQuery which constructs and SQL query

and two states:

list.start for determining the list offset
list.limit for determining the list length

getItems and getPagination method are defined in JModelList class. They don't need to be defined in the HelloWorldModelHelloWorldList class.

admin/models/helloworldlist.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// import the Joomla modellist library
jimport('joomla.application.component.modellist');
/**
 * HelloWorldList Model
 */
class HelloWorldModelHelloWorldList extends JModelList {
	/**
	 * Model context string.
	 *
	 * @var		string
	 */
	protected $_context = 'com_helloworld.helloworldlist';
	/**
	 * Method to build an SQL query to load the list data.
	 *
	 * @return	string	An SQL query
	 */
	protected function _getListQuery() {
		// Create a new query object.
		$query = new JQuery;
		// Select some fields
		$query->select('id,greeting');
		// From the hello table
		$query->from('#__helloworld');
		return $query;
	}
	/**
	 * Method to auto-populate the model state.
	 *
	 * This method should only be called once per instantiation and is designed
	 * to be called on the first call to the getState() method unless the model
	 * configuration flag to ignore the request is set.
	 *
	 * @return	void
	 */
	protected function _populateState() {
		// Initialize variables.
		$app = JFactory::getApplication('administrator');
		// Load the list state.
		$this->setState('list.start', $app->getUserStateFromRequest($this->_context . '.list.start', 'limitstart', 0, 'int'));
		$this->setState('list.limit', $app->getUserStateFromRequest($this->_context . '.list.limit', 'limit', $app->getCfg('list_limit', 25), 'int'));
	}
}

The _populateState method is, by default, automatically called when a state is read by the getState method.

Packaging the component[edit]

Content of your code directory

Create a compressed file of this directory or directly download the archive and install it using the extension manager of Joomla!1.6. You can add a menu item of this component using the menu manager in the backend.

helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="1.6.0" method="upgrade">
	<name>Hello World!</name>
	<creationDate>November 2009</creationDate>
	<author>John Doe</author>
	<authorEmail>john.doe@example.org</authorEmail>
	<authorUrl>http://www.example.org</authorUrl>
	<copyright>Copyright Info</copyright>
	<license>License Info</license>
	<version>0.0.7</version>
	<description>Description of the Hello World component ...</description>

	<install> <!-- Runs on install -->
		<sql>
			<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
		</sql>
	</install>
	<uninstall> <!-- Runs on uninstall -->
		<sql>
			<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
		</sql>
	</uninstall>
	<update> <!-- Runs on update -->
		<sql>
			<file driver="mysql" charset="utf8">sql/update.mysql.utf8.sql</file>
		</sql>
	</update>

	<files folder="site">
		<filename>index.html</filename>
		<filename>helloworld.php</filename>
		<filename>controller.php</filename>
		<folder>views</folder>
		<folder>models</folder>
	</files>

	<administration>
		<menu>Hello World!</menu>
		<files folder="admin">
			<filename>index.html</filename>
			<filename>helloworld.php</filename>
			<filename>controller.php</filename>
			<folder>sql</folder>
			<folder>tables</folder>
			<folder>models</folder>
			<!-- views files section -->
			<folder>views</folder>
		</files>		
	</administration>
</extension>

Contributors[edit]

Christophe Demko

@@ Line 1: / Line 1: @@
 {{underconstruction}}
+{{future|1.6}}
 == Articles in this series ==
 * [[Developing a Model-View-Controller (MVC) Component for Joomla!1.6 - Part 01|Developing a Basic Component]]

Archived