J3.x

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)
Joomla! 
3.x
Tutorial
Developing an MVC Component

Articles in This Series

  1. Introduction
  2. Developing a Basic Component
  3. Adding a View to the Site Part
  4. Adding a Menu Type to the Site Part
  5. Adding a Model to the Site Part
  6. Adding a Variable Request in the Menu Type
  7. Using the Database
  8. Basic Backend
  9. Adding Language Management
  10. Adding Backend Actions
  11. Adding Decorations to the Backend
  12. Adding Verifications
  13. Adding Categories
  14. Adding Configuration
  15. Adding ACL
  16. Adding an Install/Uninstall/Update Script File
  17. Adding a Frontend Form
  18. Adding an Image
  19. Adding a Map
  20. Adding AJAX
  21. Adding an Alias
  22. Using the Language Filter Facility
  23. Adding a Modal
  24. Adding Associations
  25. Adding Checkout
  26. Adding Ordering
  27. Adding Levels
  28. Adding Versioning
  29. Adding Tags
  30. Adding Access
  31. Adding a Batch Process
  32. Adding Cache
  33. Adding a Feed
  34. Adding an Update Server
  35. Adding Custom Fields
  36. Upgrading to Joomla4



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.

Introduction[edit]

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.

Approach[edit]

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:

admin/sql/install.mysql.utf8.sql 

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,
	PRIMARY KEY (`id`)
)
	ENGINE =MyISAM
	AUTO_INCREMENT =0
	DEFAULT CHARSET =utf8;

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:

/admin/sql/updates/mysql/0.0.25.sql 

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.

helloworld.xml 

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

	<name>COM_HELLOWORLD</name>
	<!-- The following elements are optional and free of formatting constraints -->
	<creationDate>January 2018</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>
	<!--  The version string is recorded in the components table -->
	<version>0.0.25</version>
	<!-- The description is optional and defaults to the name -->
	<description>COM_HELLOWORLD_DESCRIPTION</description>

	<!-- Runs on install/uninstall/update; New in 2.5 -->
	<scriptfile>script.php</scriptfile>

	<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; New since J2.5 -->
		<schemas>
			<schemapath type="mysql">sql/updates/mysql</schemapath>
		</schemas>
	</update>

	<!-- 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">
		<filename>index.html</filename>
		<filename>helloworld.php</filename>
		<filename>controller.php</filename>
		<filename>router.php</filename>
		<folder>controllers</folder>
		<folder>views</folder>
		<folder>models</folder>
		<folder>helpers</folder>
	</files>

		<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>
		</languages>

	<media destination="com_helloworld" folder="media">
		<filename>index.html</filename>
		<folder>images</folder>
		<folder>js</folder>
		<folder>css</folder>
	</media>

	<administration>
		<!-- 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 -->
			<filename>index.html</filename>
			<filename>config.xml</filename>
			<filename>helloworld.php</filename>
			<filename>controller.php</filename>
			<filename>access.xml</filename>
			<!-- SQL files section -->
			<folder>sql</folder>
			<!-- tables files section -->
			<folder>tables</folder>
			<!-- models files section -->
			<folder>models</folder>
			<!-- views files section -->
			<folder>views</folder>
			<!-- controllers files section -->
			<folder>controllers</folder>
			<!-- helpers files section -->
			<folder>helpers</folder>
		</files>
		<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>
		</languages>
	</administration>

</extension>

Contributors[edit]

Prev: Adding Checkout
Next: Adding an update server
Retrieved from "https://docs.joomla.org/index.php?title=J3.x:Developing_an_MVC_Component/Adding_Ordering&oldid=524516"