Developing an MVC Component/Adding Ordering

From Joomla! Documentation

< J3.x:Developing an MVC Component
Revision as of 13:37, 19 September 2018 by Robbiej (talk | contribs) (Page created and some sections added)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Developing an MVC Component

This is a multiple-article series of tutorials on how to develop a Model-View-Controller Component for Joomla! VersionJoomla 3.x.

Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (the Articles in this series).

This tutorial is part of the Developing an MVC Component for Joomla! 3.2 tutorial. You are encouraged to read the previous parts of the tutorial before reading this.

In this step we add ordering capability to our component.


Joomla core components allow the administrator to define an arbitrary ordering of items by clicking on the Ordering symbol (a little up arrowhead above a down arrowhead) at the top left of the items table, and then clicking on one of the 3 vertical dots symbols and sliding the record up or down to reorder.

In this step we build the code to support this functionality for Helloworld records. Like Joomla core components we'll allow the administrator to specify the order within a category, although this can be easily changed to allow ordering across a different set of records (eg ordering within a language), or across all helloworld records.

We'll use the order defined by the administrator when we output the Category view of helloworld records on the front end.


We need to store the Ordering in the database, and we'll follow the example of Joomla components and call this field "Ordering". As usual, naming a field in a way that aligns with Joomla core unlocks a lot of library functionality which we can reuse.

Our main work in the back end is associated with the helloworlds view

  1. including the Ordering field within our query
  2. including the Ordering field within our filter fields, as we'll want to order the table using that field
  3. displaying the Ordering column in the layout file, and setting up the data to enable the dynamic reording functionality (ie sliding the record up/down to reorder).
  4. because we're going to allow ordering within a category, we'll include the category within the filter fields.

On the front end category view we'll set up the default ordering to use the Ordering field from the database.

Updating the Database[edit]

Add the ordering field to the database record:


DROP TABLE IF EXISTS `#__helloworld`;

CREATE TABLE `#__helloworld` (
	`id`       INT(11)     NOT NULL AUTO_INCREMENT,
	`asset_id` INT(10)     NOT NULL DEFAULT '0',
	`created`  DATETIME    NOT NULL DEFAULT '0000-00-00 00:00:00',
	`created_by`  INT(10) UNSIGNED NOT NULL DEFAULT '0',
	`checked_out` INT(10) NOT NULL DEFAULT '0',
	`checked_out_time` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00',
	`greeting` VARCHAR(25) NOT NULL,
	`alias`  VARCHAR(40)  NOT NULL DEFAULT '',
	`language`  CHAR(7)  NOT NULL DEFAULT '*',
	`ordering`	int(11)    NOT NULL DEFAULT '0',
	`published` tinyint(4) NOT NULL DEFAULT '1',
	`catid`	    int(11)    NOT NULL DEFAULT '0',
	`params`   VARCHAR(1024) NOT NULL DEFAULT '',
	`image`   VARCHAR(1024) NOT NULL DEFAULT '',
	`latitude` DECIMAL(9,7) NOT NULL DEFAULT 0.0,
	`longitude` DECIMAL(10,7) NOT NULL DEFAULT 0.0,

CREATE UNIQUE INDEX `aliasindex` ON `#__helloworld` (`alias`, `catid`);

INSERT INTO `#__helloworld` (`greeting`,`alias`,`language`,`ordering`) VALUES
('Hello World!','hello-world','en-GB',1),
('Goodbye World!','goodbye-world','en-GB',2);

New SQL update file:


ALTER TABLE`#__helloworld` ADD COLUMN `ordering` int(11) NOT NULL DEFAULT '0' AFTER `language`;
UPDATE `#__helloworld` SET `ordering` = `id`;

Packaging the Component[edit]

Contents of your code directory. Each file link below takes you to the step in the tutorial which has the latest version of that source code file.


<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.0" method="upgrade">

	<!-- The following elements are optional and free of formatting constraints -->
	<creationDate>January 2018</creationDate>
	<author>John Doe</author>
	<copyright>Copyright Info</copyright>
	<license>License Info</license>
	<!--  The version string is recorded in the components table -->
	<!-- The description is optional and defaults to the name -->

	<!-- Runs on install/uninstall/update; New in 2.5 -->

	<install> <!-- Runs on install -->
			<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
	<uninstall> <!-- Runs on uninstall -->
			<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
	<update> <!-- Runs on update; New since J2.5 -->
			<schemapath type="mysql">sql/updates/mysql</schemapath>

	<!-- Site Main File Copy Section -->
	<!-- Note the folder attribute: This attribute describes the folder
		to copy FROM in the package to install therefore files copied
		in this section are copied from /site/ in the package -->
	<files folder="site">

		<languages folder="site/language">
			<language tag="en-GB">en-GB/en-GB.com_helloworld.ini</language>
			<language tag="fr-FR">fr-FR/fr-FR.com_helloworld.ini</language>

	<media destination="com_helloworld" folder="media">

		<!-- Administration Menu Section -->
		<menu link='index.php?option=com_helloworld' img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu>
		<!-- Administration Main File Copy Section -->
		<!-- Note the folder attribute: This attribute describes the folder
			to copy FROM in the package to install therefore files copied
			in this section are copied from /admin/ in the package -->
		<files folder="admin">
			<!-- Admin Main File Copy Section -->
			<!-- SQL files section -->
			<!-- tables files section -->
			<!-- models files section -->
			<!-- views files section -->
			<!-- controllers files section -->
			<!-- helpers files section -->
		<languages folder="admin/language">
			<language tag="en-GB">en-GB/en-GB.com_helloworld.ini</language>
			<language tag="en-GB">en-GB/en-GB.com_helloworld.sys.ini</language>
			<language tag="fr-FR">fr-FR/fr-FR.com_helloworld.ini</language>
			<language tag="fr-FR">fr-FR/fr-FR.com_helloworld.sys.ini</language>