Joomla! Documentation - User contributions [en]

Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!4.x - Contents/en

2021-04-04T07:29:27Z

GregJPreece:

<noinclude><languages /></noinclude>
<div class="large-4 columns" style="float:right; background:#fff;margin:0 0 1.0em 1.0em;">
<div class="large-12 columns panel radius mw-collapsible" style="width:100%;background:#fff;font-size:.8em">
<big>'''Articles in this Series'''</big>
<div class="large-12 columns panel mw-collapsible-content" style="border:none; background:#fff; min-width:100%;">
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Introduction]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Developing_a_Basic_Component|Developing a Basic Component]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part|Adding a View to the Site Part]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Menu_Type_to_the_Site_Part|Adding a Menu Type to the Site Part]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Language_Management|Language Management]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Model_to_the_Site_Part|Adding a Model to the Site Part]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Request_Variable_in_the_Menu_Link|Adding a Request Variable in the Menu Link]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Setting_up_the_Database|Setting Up the Database]]

</div></div>
</div>
<noinclude>{{-}}</noinclude>

<noinclude>
[[Category:Tutorials in a Series{{#translation:}}]]
</noinclude>

J4.x:Developing an MVC Component/Setting up the Database

2021-04-04T07:28:07Z

GregJPreece: Created page with "{{Joomla version|version=4.x|comment=>Tutorial}} {{-}} {{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Setting Up the D..."

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Setting Up the Database}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/<translate>en</translate>}}

Now we have finally arrived at the stage of development where we are going to create the database tables that our component will use to store and retrieve data. Depending on its purpose, your extension may not require database tables to operate, but given the sophistication level of component extensions this is unlikely.

Installation, uninstallation and version upgrades within a Joomla! component are handled using SQL scripts placed in the <tt>admin/sql</tt> folder of the component. An SQL script matches a specific database engine, for example <tt>install.mysql.utf8.sql</tt> will only be run if Joomla! is running on a MySQL database. At the time of writing, Joomla! 4 supports MySQL and PostgreSQL, and we recommend writing SQL scripts for both database types for maximum compatibility. However, for the purposes of this tutorial we will be focusing on MySQL-based scripts.

Let's go ahead and write the SQL scripts that will be needed to create a database table to hold customised greeting messages for our component. In later sections of the tutorial, we'll build a control panel to manage these messages.

== Required Changes ==

We'll need to make files to install and uninstall the component, and one upgrade file. As our component is already installed, an upgrade file is needed to make the necessary changes.

{|border=1
| 1
| Create: [[#admin/sql/install.mysql.utf8.sql|admin/sql/install.mysql.utf8.sql]]
| An SQL file that is run when the component is installed on a MySQL database
|-
| 2
| Create: [[#admin/sql/uninstall.mysql.utf8.sql|admin/sql/uninstall.mysql.utf8.sql]]
| An SQL file that is run when the component is uninstalled on a MySQL database
|-
| 3
| Create: [[#admin/sql/mysql/0.0.7.sql|admin/sql/mysql/0.0.7.sql]]
| An SQL file that is run when the component is updated to/beyond version 0.0.7 on a MySQL database
|-
| 4
| Update: [[#helloworld.xml|helloworld.xml]]
| We'll need to add the new <tt>sql</tt> directory to our file copy list, and add instructions for Joomla! on where to find our scripts
|}

== File Details ==

{{vanchor|admin/sql/install.mysql.utf8.sql}}

This file will need to be updated whenever you make changes to your component's database schema. It is run on installation. Note that when you are creating tables, you prefix the name with <tt>#__</tt>. Joomla! will automatically replace this prefix with the system-configured database table prefix. You must ensure that your database names use this prefix whenever you are creating or updating them. Additionally, we '''highly recommend''' that you prefix all your table names, key names, etc with the name of your component (as seen here) to prevent any chance of collision between components on a Joomla! site.

Note also that we are using <tt>IF EXISTS</tt> checks on our <tt>DROP</tt> statements, and placing <tt>DROP</tt> statements before <tt>CREATE</tt> statements. While it may seem that the status of the database is predictable - there should be no existing table with that name before we create it - it is best to never assume that the previous install/uninstall operation completed cleanly and successfully. In the rare instance of such an error, our code will continue to function.

If this file were for a PostgreSQL database, it would be called <tt>install.postgresql.utf8.sql</tt>.

<source lang="sql">
DROP TABLE IF EXISTS `#__helloworld_greetings`;

CREATE TABLE `#__helloworld_greetings` (
`id` SERIAL NOT NULL,
`greeting` VARCHAR(200) NOT NULL,
`published` BOOLEAN NOT NULL DEFAULT FALSE,
PRIMARY KEY (`id`)
) ENGINE = InnoDB;

INSERT INTO `#__helloworld_greetings` (`greeting`) VALUES
('Hello World!'),
('Good bye World!');
</source>

{{vanchor|admin/sql/uninstall.mysql.utf8.sql}}

This file must take every action required to remove this component's effect on the Joomla! database. In our case, it is currently very simple - if the greeting table exists, remove it.

If this file were for a PostgreSQL database, it would be called <tt>uninstall.postgresql.utf8.sql</tt>.

<source lang="sql">
DROP TABLE IF EXISTS `#__helloworld_greetings`;
</source>

{{vanchor|admin/sql/mysql/0.0.7.sql}}

When you create a new version of your component that has matching database changes, those changes will need to go into database update files. The filename is simply the version number that requires the changes, and the files are grouped into folders according to the database engine they are intended to run on. When Joomla! upgrades a component, it will look for any upgrade files between the previously installed version number and the new version number, and run them in sequence.

In our case, as we did not have any database tables before our new 0.0.7 version, this file is identical to the install file.

If this file were for a PostgreSQL database, it would be named the same, but would be placed in <tt>admin/sql/postgresql</tt>.

<source lang="sql">
DROP TABLE IF EXISTS `#__helloworld_greetings`;

CREATE TABLE `#__helloworld_greetings` (
`id` SERIAL NOT NULL,
`greeting` VARCHAR(200) NOT NULL,
`published` BOOLEAN NOT NULL DEFAULT FALSE,
PRIMARY KEY (`id`)
) ENGINE = InnoDB;

INSERT INTO `#__helloworld_greetings` (`greeting`) VALUES
('Hello World!'),
('Good bye World!');
</source>

{{vanchor|helloworld.xml}}

In our updated manifest file, we need to tell Joomla! to copy our new <tt>admin/sql</tt> folder when installing/upgrading the component. We also need to tell it that our component now has database files, which ones to run on which action, and where to find them.

The three new elements, <tt><install /></tt>, <tt><uninstall /></tt> and <tt><update /></tt> are fairly self-explanatory. While the structures are slightly different, each essentially consists of an action (the element), a database type (mysql/postgresql) and a file path. When you add PostgreSQL support to your component, you'll add an extra line in each element to direct Joomla! to the correct files.

<source lang="xml" highlight="13,49,60-74">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="4.0" method="upgrade">

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.7</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<files folder="site/">
<folder>language</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>

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

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>language</folder>
<folder>services</folder>
<folder>sql</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>

<languages>
<language tag="en-GB">admin/language/en-GB/en-GB.com_helloworld.ini</language>
<language tag="en-GB">admin/language/en-GB/en-GB.com_helloworld.sys.ini</language>
</languages>
</administration>

<install>
<sql>
<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
</sql>
</install>
<uninstall>
<sql>
<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
</sql>
</uninstall>
<update>
<schemas>
<schemapath type="mysql">sql/updates/mysql</schemapath>
</schemas>
</update>

</extension>
</source>

== Testing the Database Installation ==

As always, zip up your new component version and upload it into your Joomla! install's admin panel. It should give you a message that installation has been successful. Nothing is actually using the table just now, so use your preferred database client to connect into your Joomla! database and check that the new table exists.

Next, we'll start creating a back-end admin panel to create and manage our greeting records.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Request_Variable_in_the_Menu_Link|Prev: Adding a Request Variable in the Menu Link|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Our First Backend Page|Next: Our First Back-end Page|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

User talk:Krauthos

2021-03-19T22:44:35Z

GregJPreece:

Hey man, thanks for your corrections on the Joomla 4 tutorial. I'll be continuing with the rest of it soon - there's a lot to get through! --[[User:GregJPreece|GregJPreece]] ([[User talk:GregJPreece|talk]]) 17:44, 19 March 2021 (CDT)

User talk:Krauthos

2021-03-19T22:43:55Z

GregJPreece: Created page with "Hey man, thanks for your corrections on the Joomla 4 tutorial. I'll be continuing with the rest of it soon - there's a lot to get through!"

Hey man, thanks for your corrections on the Joomla 4 tutorial. I'll be continuing with the rest of it soon - there's a lot to get through!

J4.x talk:Developing an MVC Component/Adding a Request Variable in the Menu Link

2021-01-17T21:38:35Z

GregJPreece: Created page with "User:M-b-o| I appreciate the assist, but please don't add language tagging yet. The text and titles of these pages are not yet finalised. Some of the old terminology was a..."

[[User:M-b-o|M-b-o]] I appreciate the assist, but please don't add language tagging yet. The text and titles of these pages are not yet finalised. Some of the old terminology was a bit clunky so terms might get shifted as I go along. I do intend to language-tag everything once the tutorial is complete.

Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!4.x - Contents/en

2021-01-17T07:57:14Z

GregJPreece:

<noinclude><languages /></noinclude>
<div class="large-4 columns" style="float:right; background:#fff;margin:0 0 1.0em 1.0em;">
<div class="large-12 columns panel radius mw-collapsible" style="width:100%;background:#fff;font-size:.8em">
<big>'''Articles in this Series'''</big>
<div class="large-12 columns panel mw-collapsible-content" style="border:none; background:#fff; min-width:100%;">
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Introduction]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Developing_a_Basic_Component|Developing a Basic Component]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part|Adding a View to the Site Part]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Menu_Type_to_the_Site_Part|Adding a Menu Type to the Site Part]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Language_Management|Language Management]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Model_to_the_Site_Part|Adding a Model to the Site Part]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Request_Variable_in_the_Menu_Link|Adding a Request Variable in the Menu Link]]
</div></div>
</div>
<noinclude>{{-}}</noinclude>

<noinclude>
[[Category:Tutorials in a Series{{#translation:}}]]
</noinclude>

J4.x:Developing an MVC Component/Adding a Request Variable in the Menu Link

2021-01-17T07:56:00Z

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Adding a Request Variable to the Menu Link}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/<translate>en</translate>}}

We now have a page in our Joomla installation's public front-end that can render a greeting message, provided by a data model. Now we will add a request variable to the menu link we created earlier, and learn how to read the request variable inside the data model. Depending on the value of the variable, we will show a different greeting.

== Required Changes ==

There are two primary changes we will need to make:
* Adding the request variable and its possible values to the menu link's XML definition
* Adding code to the model to read the request variable and choose an appropriate greeting

{|border=1
| 1
| Update: [[#site/tmpl/hello/default.xml|site/tmpl/hello/default.xml]]
| Add the new parameter to the menu link's definition
|-
| 2
| Update: [[#site/src/Model/MessageModel.php|site/src/Model/MessageModel.php]]
| Have the view's data model decide which greeting to return
|-
| 3
| Update: [[#admin/language/en-GB/en-GB.com_helloworld.sys.ini|admin/language/en-GB/en-GB.com_helloworld.sys.ini]]
| Add the new language strings needed when configuring the menu link
|-
| 4
| Update: [[#site/language/en-GB/en-GB.com_helloworld.ini|site/language/en-GB/en-GB.com_helloworld.ini]]
| Swap our existing greeting string for two greetings we can choose between
|-
| 5
| Update: [[#helloworld.xml|helloworld.xml]]
| For consistency, we'll bump the component's version number
|}

== File Details ==

{{vanchor|site/tmpl/hello/default.xml}}

While this change may look fairly verbose, it's actually very straightforward. We're adding a configurable request variable (called a "field") to our menu link. When editing the menu entry in the Joomla control panel, this field and its options will be displayed in the configuration form.

Menu fields are organised into fieldsets, though we only need the one here. We'll call our field <tt>greetingType</tt>, which will be appended to the URL when the link is clicked. We're also pre-defining what values are allowed for this field, as we want to be able to rely on their values in the data model. We do this by using <tt>type="list"</tt> to tell Joomla it has a list of values, and then providing them as <tt><option /></tt> child elements.

The <tt>value</tt> attribute of each <tt><option /></tt> is the actual value that will be appended to the URL (such as <tt>&greetingType=1</tt>). The language string name inside the <tt><option /></tt> element represents the label that will be shown in the configuration form.

<source lang="xml" highlight="6-17">
<?xml version="1.0" encoding="utf-8"?>
<metadata>
<layout title="COM_HELLOWORLD_MENU_HELLO_WORLD_TITLE">
<message><![CDATA[COM_HELLOWORLD_MENU_HELLO_WORLD_DESC]]></message>
</layout>
<fields name="request">
<fieldset name="request">
<field name="greetingType"
type="list"
label="COM_HELLOWORLD_MENU_HELLO_WORLD_PARAM_LABEL"
description="COM_HELLOWORLD_MENU_HELLO_WORLD_PARAM_DESC"
default="1">
<option value="1"><![CDATA[COM_HELLOWORLD_MENU_HELLO_WORLD_PARAM_VALUE_HELLO]]></option>
<option value="2"><![CDATA[COM_HELLOWORLD_MENU_HELLO_WORLD_PARAM_VALUE_GOODBYE]]></option>
</field>
</fieldset>
</fields>
</metadata>
</source>

{{vanchor|site/src/Model/MessageModel.php}}

Here we read in the new request variable via the Joomla framework, and decide which of our two greeting messages to show. This code illustrates how to read request variables in Joomla 4:

# <tt>Factory::getApplication()</tt> returns the Joomla application object. You will use this code a lot when writing in Joomla, as your entry point to the Joomla runtime.
# <tt>->getInput()</tt> returns the <tt>\Joomla\Input\Input</tt> object for this request. This object can be used to read request variables in a safe and sanitised manner.
# <tt>$input->getInt('greetingType', 1);</tt> fetches the value of the 'greetingType' request variable we defined earlier. If no value is defined, we have specified that it should return a default value of <tt>1</tt>.

'''NOTE:''' You should never use superglobals like <tt>$_GET</tt> or <tt>$_POST</tt> to access request variables or other inputs. Use Joomla's framework to access any passed or submitted data, to ensure that it is properly handled and sanitised.

With the request variable read, we simply choose which of our two possible greetings to return to the template.

<source lang="php" highlight="7,31-34,37-45">
<?php

namespace JohnSmith\Component\HelloWorld\Site\Model;

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\MVC\Model\ItemModel;
use Joomla\CMS\Language\Text;

/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Hello World Message Model
* @since 0.0.5
*/
class MessageModel extends ItemModel {

/**
* Returns a message for display
* @param integer $pk Primary key of the "message item", currently unused
* @return object Message object
*/
public function getItem($pk= null): object {
// This gives us a Joomla\Input\Input object
$input = Factory::getApplication()->getInput();
$greetingType = $input->getInt('greetingType', 1);

$item = new \stdClass();

switch($greetingType) {
case 2:
$item->message = Text::_('COM_HELLOWORLD_MSG_GREETING_GOODBYE');
break;
case 1:
default:
$item->message = Text::_('COM_HELLOWORLD_MSG_GREETING_HELLO');
break;
}

return $item;
}

}
</source>

{{vanchor|admin/language/en-GB/en-GB.com_helloworld.sys.ini}}

Here we define the language strings that will be used in the configuration form for our menu link. Remember, even though the menu link is defined in the site part of the component, the strings are defined here because it is used in the Joomla control panel.

<source lang="ini" highlight="6-9">
; Hello World Sys.ini
; Copyright (C) 2020 John Smith. All rights reserved.

COM_HELLOWORLD_MENU_HELLO_WORLD_TITLE="Hello World!"
COM_HELLOWORLD_MENU_HELLO_WORLD_DESC="My first Joomla! page"
COM_HELLOWORLD_MENU_HELLO_WORLD_PARAM_LABEL="Greeting Type"
COM_HELLOWORLD_MENU_HELLO_WORLD_PARAM_DESC="Select which type of greeting to show"
COM_HELLOWORLD_MENU_HELLO_WORLD_PARAM_VALUE_HELLO="Say Hello"
COM_HELLOWORLD_MENU_HELLO_WORLD_PARAM_VALUE_GOODBYE="Say Goodbye"
</source>

{{vanchor|site/language/en-GB/en-GB.com_helloworld.ini}}

Here we switch out our existing greeting for two different greetings, which the model will choose between based on the value of the <tt>greetingType</tt> request variable.

<source lang="ini" highlight="5-6">
; Hello World Public Site Strings
; Copyright (C) 2020 John Smith. All rights reserved.

COM_HELLOWORLD_MSG_HELLO_WORLD="Hello World!"
COM_HELLOWORLD_MSG_GREETING_GOODBYE="Goodbye from the item model!"
COM_HELLOWORLD_MSG_GREETING_HELLO="Hello from the item model!"
</source>

{{vanchor|helloworld.xml}}

As before, our last job is to bump the component's version number. None of the changes made here require the version number to be bumped before re-importing it, but we'll do it for consistency.

<source lang="xml" highlight="13">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="4.0" method="upgrade">

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.6</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<files folder="site/">
<folder>language</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>

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

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>language</folder>
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>

<languages>
<language tag="en-GB">admin/language/en-GB/en-GB.com_helloworld.ini</language>
<language tag="en-GB">admin/language/en-GB/en-GB.com_helloworld.sys.ini</language>
</languages>
</administration>

</extension>
</source>

== Testing the Extension ==

Just as before, zip up your new component version and upload it into your Joomla! install's admin panel. Once it has updated, open the main menu setup from the left menu as you did before, then click your "Hello World" link in the list of link on the right.

[[File:Joomla 4.x Component Tutorial 0.0.6 Main Menu Link.png|frameless|Link to the main menu configuration in the Joomla control panel]]

You should see the menu link configuration form once again, but now there should be a brand new drop-down selection box:

[[File:Joomla 4.x Component Tutorial 0.0.6 Menu Link Configuration.png|frameless|Menu link configuration with custom fields added]]

Here you can see our new configuration option, "Greeting Type". This is the field we defined in XML earlier, using the language strings we also defined. To test your change, select one of the possible greeting types and save the menu link. Once the link is saved, visit the public section of your Joomla install and click the link. You should see the appropriate greeting!

[[File:Joomla 4.x Component Tutorial 0.0.6 Message from Model.png|frameless|The greeting from the data model that matches the field in the menu link]]

To make sure that the request variable is working correctly, make sure to switch the menu link's configuration back and forth a few times. The message in the public page should change as appropriate.

Great! Now we have a page taking simple data from a model, ''and'' that model can respond to request variables. Next, we'll finally get to setting up our database, and wiring our data model up to it.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Model_to_the_Site_Part|Prev: Adding a Model to the Site Part|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Setting_up_the_Database|Next: Setting up the Database|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

File:Joomla 4.x Component Tutorial 0.0.6 Main Menu Link.png

2021-01-17T07:55:30Z

GregJPreece:

Link to the main menu configuration in the Joomla control panel

File:Joomla 4.x Component Tutorial 0.0.6 Message from Model.png

2021-01-17T07:45:53Z

GregJPreece:

A message from the view's data model, switched according to a field supplied in the menu link

File:Joomla 4.x Component Tutorial 0.0.6 Menu Link Configuration.png

2021-01-17T07:40:47Z

GregJPreece:

Menu link configuration with custom fields added

J4.x:Developing an MVC Component/Adding a Model to the Site Part

2021-01-17T04:05:35Z

GregJPreece: Updating the previously used tutorial language to parse better - may need to update elsewhere

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Adding a Model to the Site Part}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/<translate>en</translate>}}

Now that we have the "Controller" and "View" portions of the Model-View-Controller design pattern in place, in this article we will add a model to our Hello World component. The model will hold some sample data for our template to render. To create a model we extend one of the abstract models provided by Joomla! Several such models exist, and can be found in the <tt>Joomla\CMS\MVC\Model</tt> namespace:

{|border=1
| 1
| <tt>Joomla\CMS\MVC\Model\AdminModel</tt>
| Despite its name, this model is not actually specific to the admin panel section of Joomla! It is actually for administering records of a particular type, allowing for batch update/delete operations, etc.
|-
| 2
| <tt>Joomla\CMS\MVC\Model\BaseModel</tt>
| The basic model from which other models inherit. If you don't require any additional functionality you can extend this model, but you likely don't want to.
|-
| 3
| <tt>Joomla\CMS\MVC\Model\FormModel</tt>
| Used in forms, allows for rows to be checked in or out for editing, and has methods for validation of form inputs.
|-
| 4
| <tt>Joomla\CMS\MVC\Model\ItemModel</tt>
| Represents a single database record, allows for basic database operations.
|-
| 5
| <tt>Joomla\CMS\MVC\Model\ListModel</tt>
| Used to display paginated lists of records, with optional filtering.
|}

Later in the tutorial we will back this model with a database query, so we're going to use <tt>ItemModel</tt> as the base for our new model class. Let's go ahead and create the new files we will need to add our model.

{|border=1
| 1
| Update: <tt>[[#site/language/en-GB/en-GB.com_helloworld.ini|site/language/en-GB/en-GB.com_helloworld.ini]]</tt>
| We'll add a new message to pull from the language system, to verify that our model is working
|-
| 2
| Create: <tt>[[#site/src/Model/MessageModel.php|site/src/Model/MessageModel.php]]</tt>
| Our new model, which will hold a message for display in the public web page
|-
| 3
| Update: <tt>[[#site/src/Controller/DisplayController.php|site/src/Controller/DisplayController.php]]</tt>
| We'll tell the default display controller to fetch the new model
|-
| 4
| Update: <tt>[[#site/tmpl/hello/default.php|site/tmpl/hello/default.php]]</tt>
| We'll add an output in the template to show the message from the model
|-
| 5
| Update: <tt>[[#helloworld.xml|helloworld.xml]]</tt>
| A simple version bump, for our new code
|}

== File Details ==

{{vanchor|site/language/en-GB/en-GB.com_helloworld.ini}}

We'll (temporarily) put a new message in here that we can use to demo the model.

<source lang="ini" highlight="5">
; Hello World Admin Strings
; Copyright (C) 2020 John Smith. All rights reserved.

COM_HELLOWORLD_MSG_HELLO_WORLD="Hello World!"
COM_HELLOWORLD_MSG_GREETING="This message is coming from the item model!"
</source>

{{vanchor|site/src/Model/MessageModel.php}}

The new single-item data model. The <tt>getItem()</tt> method is the only one required when extending <tt>ItemModel</tt>. It returns an object that represents the model's item. This "item" could be anything, but is usually a database record. Until we hook this model up to the database in a future part of the tutorial, we will return a basic object with our new message in it, straight from the language system.

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Site\Model;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Model\ItemModel;
use Joomla\CMS\Language\Text;

/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Hello World Message Model
* @since 0.0.5
*/
class MessageModel extends ItemModel {

/**
* Returns a message for display
* @param integer $pk Primary key of the "message item", currently unused
* @return object Message object
*/
public function getItem($pk= null): object {
$item = new \stdClass();
$item->message = Text::_('COM_HELLOWORLD_MSG_GREETING');
return $item;
}

}
</source>

{{vanchor|site/src/Controller/DisplayController.php}}

We're going to tell the <tt>DisplayController</tt> to add our new model to the view as it is being loaded. As we currently have only one view, this will do for now. As our component becomes more complex, our views will gain their own controllers, and can load their own models independently.

<source lang="php" highlight="30">
<?php

namespace JohnSmith\Component\HelloWorld\Site\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;
use Joomla\CMS\Factory;

/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* HelloWorld Component Controller
* @since 0.0.2
*/
class DisplayController extends BaseController {

public function display($cachable = false, $urlparams = array()) {
$document = Factory::getDocument();
$viewName = $this->input->getCmd('view', 'login');
$viewFormat = $document->getType();

$view = $this->getView($viewName, $viewFormat);
$view->setModel($this->getModel('Message'), true);

$view->document = $document;
$view->display();
}

}
</source>

{{vanchor|site/tmpl/hello/default.php}}

The last functional change to make is to add the message output into our site template. In the context of a component template, the <tt>$this</tt> variable refers to the view object. Remember setting the model on the view in the previous file? We retrieve it here, and display the message.

<source lang="php" highlight="18">
<?php

use Joomla\CMS\Language\Text;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2><?= Text::_('COM_HELLOWORLD_MSG_HELLO_WORLD') ?></h2>

<p><?= $this->getModel()->getItem()->message; ?></p>
</source>

{{vanchor|helloworld.xml}}

There's nothing new needed in the manifest file for these changes, so this update isn't technically required. However, for consistency, we will bump the component's version in the manifest file.

<source lang="xml" highlight="13">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="4.0" method="upgrade">

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.5</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<files folder="site/">
<folder>language</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>

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

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>language</folder>
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>

<languages>
<language tag="en-GB">admin/language/en-GB/en-GB.com_helloworld.ini</language>
<language tag="en-GB">admin/language/en-GB/en-GB.com_helloworld.sys.ini</language>
</languages>
</administration>

</extension>
</source>

== Testing the Component ==

Just as before, zip up your new component version and upload it into your Joomla! install's admin panel. Once you have done so, go to the front-end of your Joomla site. Click the "Hello World" link we created in the menu. You should see the new message in the page template.

[[File:Joomla 4.x Component Tutorial 0.0.5 Message from Model.png|frameless|The new language string, being passed to the template from the new model]]

Next, we'll learn how to add parameters to menu items, and how to read them within the code. After that, we'll start wiring our component up to the database.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Language_Management|Prev: Language Management|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Request_Variable_in_the_Menu_Link|Next: Adding a Request Variable in the Menu Link|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!4.x - Contents/en

2021-01-16T05:12:20Z

GregJPreece:

<noinclude><languages /></noinclude>
<div class="large-4 columns" style="float:right; background:#fff;margin:0 0 1.0em 1.0em;">
<div class="large-12 columns panel radius mw-collapsible" style="width:100%;background:#fff;font-size:.8em">
<big>'''Articles in this Series'''</big>
<div class="large-12 columns panel mw-collapsible-content" style="border:none; background:#fff; min-width:100%;">
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Introduction]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Developing_a_Basic_Component|Developing a Basic Component]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part|Adding a View to the Site Part]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Menu_Type_to_the_Site_Part|Adding a Menu Type to the Site Part]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Language_Management|Language Management]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Model_to_the_Site_Part|Adding a Model to the Site Part]]
</div></div>
</div>
<noinclude>{{-}}</noinclude>

<noinclude>
[[Category:Tutorials in a Series{{#translation:}}]]
</noinclude>

J4.x:Developing an MVC Component/Adding a Model to the Site Part

2021-01-16T05:08:46Z

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Adding a Model to the Site Part}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/<translate>en</translate>}}

Now that we have the "Controller" and "View" portions of the Model-View-Controller design pattern in place, in this article we will add a model to our Hello World component. The model will hold some sample data for our template to render. To create a model we extend one of the abstract models provided by Joomla! Several such models exist, and can be found in the <tt>Joomla\CMS\MVC\Model</tt> namespace:

{|border=1
| 1
| <tt>Joomla\CMS\MVC\Model\AdminModel</tt>
| Despite its name, this model is not actually specific to the admin panel section of Joomla! It is actually for administering records of a particular type, allowing for batch update/delete operations, etc.
|-
| 2
| <tt>Joomla\CMS\MVC\Model\BaseModel</tt>
| The basic model from which other models inherit. If you don't require any additional functionality you can extend this model, but you likely don't want to.
|-
| 3
| <tt>Joomla\CMS\MVC\Model\FormModel</tt>
| Used in forms, allows for rows to be checked in or out for editing, and has methods for validation of form inputs.
|-
| 4
| <tt>Joomla\CMS\MVC\Model\ItemModel</tt>
| Represents a single database record, allows for basic database operations.
|-
| 5
| <tt>Joomla\CMS\MVC\Model\ListModel</tt>
| Used to display paginated lists of records, with optional filtering.
|}

Later in the tutorial we will back this model with a database query, so we're going to use <tt>ItemModel</tt> as the base for our new model class. Let's go ahead and create the new files we will need to add our model.

{|border=1
| 1
| Update: <tt>[[#site/language/en-GB/en-GB.com_helloworld.ini|site/language/en-GB/en-GB.com_helloworld.ini]]</tt>
| We'll add a new message to pull from the language system, to verify that our model is working
|-
| 2
| Create: <tt>[[#site/src/Model/MessageModel.php|site/src/Model/MessageModel.php]]</tt>
| Our new model, which will hold a message for display in the public web page
|-
| 3
| Update: <tt>[[#site/src/Controller/DisplayController.php|site/src/Controller/DisplayController.php]]</tt>
| We'll tell the default display controller to fetch the new model
|-
| 4
| Update: <tt>[[#site/tmpl/hello/default.php|site/tmpl/hello/default.php]]</tt>
| We'll add an output in the template to show the message from the model
|-
| 5
| Update: <tt>[[#helloworld.xml|helloworld.xml]]</tt>
| A simple version bump, for our new code
|}

== File Details ==

{{vanchor|site/language/en-GB/en-GB.com_helloworld.ini}}

We'll (temporarily) put a new message in here that we can use to demo the model.

<source lang="ini" highlight="5">
; Hello World Admin Strings
; Copyright (C) 2020 John Smith. All rights reserved.

COM_HELLOWORLD_MSG_HELLO_WORLD="Hello World!"
COM_HELLOWORLD_MSG_GREETING="This message is coming from the item model!"
</source>

{{vanchor|site/src/Model/MessageModel.php}}

The new single-item data model. The <tt>getItem()</tt> method is the only one required when extending <tt>ItemModel</tt>. It returns an object that represents the model's item. This "item" could be anything, but is usually a database record. Until we hook this model up to the database in a future part of the tutorial, we will return a basic object with our new message in it, straight from the language system.

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Site\Model;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Model\ItemModel;
use Joomla\CMS\Language\Text;

/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Hello World Message Model
* @since 0.0.5
*/
class MessageModel extends ItemModel {

/**
* Returns a message for display
* @param integer $pk Primary key of the "message item", currently unused
* @return object Message object
*/
public function getItem($pk= null): object {
$item = new \stdClass();
$item->message = Text::_('COM_HELLOWORLD_MSG_GREETING');
return $item;
}

}
</source>

{{vanchor|site/src/Controller/DisplayController.php}}

We're going to tell the <tt>DisplayController</tt> to add our new model to the view as it is being loaded. As we currently have only one view, this will do for now. As our component becomes more complex, our views will gain their own controllers, and can load their own models independently.

<source lang="php" highlight="30">
<?php

namespace JohnSmith\Component\HelloWorld\Site\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;
use Joomla\CMS\Factory;

/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* HelloWorld Component Controller
* @since 0.0.2
*/
class DisplayController extends BaseController {

public function display($cachable = false, $urlparams = array()) {
$document = Factory::getDocument();
$viewName = $this->input->getCmd('view', 'login');
$viewFormat = $document->getType();

$view = $this->getView($viewName, $viewFormat);
$view->setModel($this->getModel('Message'), true);

$view->document = $document;
$view->display();
}

}
</source>

{{vanchor|site/tmpl/hello/default.php}}

The last functional change to make is to add the message output into our site template. In the context of a component template, the <tt>$this</tt> variable refers to the view object. Remember setting the model on the view in the previous file? We retrieve it here, and display the message.

<source lang="php" highlight="18">
<?php

use Joomla\CMS\Language\Text;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2><?= Text::_('COM_HELLOWORLD_MSG_HELLO_WORLD') ?></h2>

<p><?= $this->getModel()->getItem()->message; ?></p>
</source>

{{vanchor|helloworld.xml}}

There's nothing new needed in the manifest file for these changes, so this update isn't technically required. However, for consistency, we will bump the component's version in the manifest file.

<source lang="xml" highlight="13">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="4.0" method="upgrade">

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.5</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<files folder="site/">
<folder>language</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>

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

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>language</folder>
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>

<languages>
<language tag="en-GB">admin/language/en-GB/en-GB.com_helloworld.ini</language>
<language tag="en-GB">admin/language/en-GB/en-GB.com_helloworld.sys.ini</language>
</languages>
</administration>

</extension>
</source>

== Testing the Component ==

Just as before, zip up your new component version and upload it into your Joomla! install's admin panel. Once you have done so, go to the front-end of your Joomla site. Click the "Hello World" link we created in the menu. You should see the new message in the page template.

[[File:Joomla 4.x Component Tutorial 0.0.5 Message from Model.png|frameless|The new language string, being passed to the template from the new model]]

Next, we'll learn how to add parameters to menu items, and how to read them within the code. After that, we'll start wiring our component up to the database.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Language_Management|Prev: Language Management|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Variable_Request_in_the_Menu_Type|Next: Adding a Variable Request in the Menu Type|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

File:Joomla 4.x Component Tutorial 0.0.5 Message from Model.png

2021-01-16T05:01:17Z

GregJPreece:

A screenshot of the message string coming from the model added in this stage.

Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!4.x - Contents/en

2020-12-17T07:22:26Z

GregJPreece:

<noinclude><languages /></noinclude>
<div class="large-4 columns" style="float:right; background:#fff;margin:0 0 1.0em 1.0em;">
<div class="large-12 columns panel radius mw-collapsible" style="width:100%;background:#fff;font-size:.8em">
<big>'''Articles in this Series'''</big>
<div class="large-12 columns panel mw-collapsible-content" style="border:none; background:#fff; min-width:100%;">
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Introduction]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Developing_a_Basic_Component|Developing a Basic Component]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part|Adding a View to the Site Part]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Menu_Type_to_the_Site_Part|Adding a Menu Type to the Site Part]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Language_Management|Language Management]]
</div></div>
</div>
<noinclude>{{-}}</noinclude>

<noinclude>
[[Category:Tutorials in a Series{{#translation:}}]]
</noinclude>

J4.x:Developing an MVC Component/Language Management

2020-12-17T07:20:49Z

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Adding Language Management}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/<translate>en</translate>}}

== Basic Language Management ==

In this article we will add management for language strings to our new component. You may have noticed in the last article in this tutorial series that when we added a menu link to the component, we hard-coded English words into the link:

<source lang="xml" highlight="3,4">
<?xml version="1.0" encoding="utf-8"?>
<metadata>
<layout title="Hello World!">
<message><![CDATA[My first Joomla! page]]></message>
</layout>
</metadata>
</source>

This works as an initial test, but hard-coding a single language into the system is a bad idea. Before we get too far into building pages and forms, we should add multi-language support to the component.

Even if you do not personally have the resources to perform translations yourself, we '''''highly recommend''''' that you are diligent about correctly managing your language strings inside your component. Open source components can be translated by members of the community, and end users can create their own if they so wish.

Let's create the language files and update the manifest to reference them:

{|border=1
| 1
| Create: <tt>[[#admin/language/en-GB/en-GB.com_helloworld.ini|admin/language/en-GB/en-GB.com_helloworld.ini]]</tt>
| Component language strings for the admin panel part
|-
| 2
| Create: <tt>[[#admin/language/en-GB/en-GB.com_helloworld.sys.ini|admin/language/en-GB/en-GB.com_helloworld.sys.ini]]</tt>
| System language strings for the component
|-
| 3
| Create: <tt>[[#site/language/en-GB/en-GB.com_helloworld.ini|site/language/en-GB/en-GB.com_helloworld.ini]]</tt>
| Component language strings for the public site part
|-
| 4
| Update: <tt>[[#helloworld.xml|helloworld.xml]]</tt>
| Need to add the language files to the manifest
|-
| 5
| Update: <tt>[[#admin/tmpl/hello/default.php|admin/tmpl/hello/default.php]]</tt>
| Swap hard-coded language strings for language codes
|-
| 6
| Update: <tt>[[#site/tmpl/hello/default.php|site/tmpl/hello/default.php]]</tt>
| Swap hard-coded language strings for language codes
|-
| 7
| Update: <tt>[[#site/tmpl/hello/default.xml|site/tmpl/hello/default.xml]]</tt>
| Swap hard-coded language strings for language codes
|}

== File Details ==

{{vanchor|admin/language/en-GB/en-GB.com_helloworld.ini}}

This file contains the language strings used on the component's pages inside the admin panel of Joomla!

<source lang="ini">
; Hello World Admin Strings
; Copyright (C) 2020 John Smith. All rights reserved.

COM_HELLOWORLD_MSG_HELLO_WORLD="Hello World!"
</source>

{{vanchor|admin/language/en-GB/en-GB.com_helloworld.sys.ini}}

This file contains the language strings used in Joomla! systems outside the component's own pages. For example, our menu item's strings belong to this component, but are used by the Joomla! menu system rather than on our own pages, so they belong in this file.

<source lang="ini">
; Hello World Sys.ini
; Copyright (C) 2020 John Smith. All rights reserved.

COM_HELLOWORLD_MENU_HELLO_WORLD_TITLE="Hello World!"
COM_HELLOWORLD_MENU_HELLO_WORLD_DESC="My first Joomla! page"
</source>

{{vanchor|site/language/en-GB/en-GB.com_helloworld.ini}}

This file contains the language strings used on the component's "public" pages (pages in the site part). There's a few things to note that are common to all the language files you'll create. Firstly, language strings are stored in the common INI format, and the name of each property begins with the component's system name: <tt>com_helloworld</tt>. It is convention that all language properties are written in upper-case.

You'll also notice that both the folder and the language file itself contain the locale code for these strings, "en-GB". For each locale you wish to support, you will need a new set of files with the appropriate strings .

<source lang="ini">
; Hello World Public Site Strings
; Copyright (C) 2020 John Smith. All rights reserved.

COM_HELLOWORLD_MSG_HELLO_WORLD="Hello World!"
</source>

{{vanchor|helloworld.xml}}

As before, we need to add the new <tt>language</tt> folders to the manifest, so that Joomla! knows to copy them into place. Additionally, we need to tell Joomla! that we have language files, where to find them and what locales they support. This is done with the addition of two <tt><language /></tt> XML blocks, one for each part of the component.

<source lang="xml" highlight="13,33,38-40,47,53-56">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="4.0" method="upgrade">

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.4</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<files folder="site/">
<folder>language</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>

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

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>language</folder>
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>

<languages>
<language tag="en-GB">admin/language/en-GB/en-GB.com_helloworld.ini</language>
<language tag="en-GB">admin/language/en-GB/en-GB.com_helloworld.sys.ini</language>
</languages>
</administration>

</extension>
</source>

{{vanchor|admin/tmpl/hello/default.php}}

Replace the hard-coded English strings with the new language properties. We use the <tt>Joomla\CMS\Language\Text</tt> class to output our language strings into the page. If the end user uses another language that is supported in our component, this class will automatically fetch the correct strings for that language and output those instead.

<source lang="php" highlight="3,16">
<?php

use Joomla\CMS\Language\Text;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2><?= Text::_('COM_HELLOWORLD_MSG_HELLO_WORLD') ?></h2>
</source>

{{vanchor|site/tmpl/hello/default.php}}

Our page templates are currently identical, so the replacements required are also identical. Remove the hard-coded English and replace it with the correct language property.

<source lang="php" highlight="3,16">
<?php

use Joomla\CMS\Language\Text;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2><?= Text::_('COM_HELLOWORLD_MSG_HELLO_WORLD') ?></h2>
</source>

{{vanchor|site/tmpl/hello/default.xml}}

Just like the PHP template files, we need to replace the hard-coded English in this file with the new language properties. Unlike the PHP files, however, we don't need any additional code to do so - simply replace the English strings with the language property names and Joomla! is clever enough to match them up for us.

Remember: because these strings are used by Joomla! in its own systems (outside of our component's pages), they live in the special <tt>[[#admin/language/en-GB/en-GB.com_helloworld.sys.ini|admin/language/en-GB/en-GB.com_helloworld.sys.ini]]</tt> file.

<source lang="xml" highlight="3-4">
<?xml version="1.0" encoding="utf-8"?>
<metadata>
<layout title="COM_HELLOWORLD_MENU_HELLO_WORLD_TITLE">
<message><![CDATA[COM_HELLOWORLD_MENU_HELLO_WORLD_DESC]]></message>
</layout>
</metadata>
</source>

== Testing the Component ==

Just as before, zip up your new component version and upload it into your Joomla! install's admin panel. Once it has installed, go around and make sure that your pages and menu link appear exactly as they did before. If everything is working properly, there should be no change at all.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Menu_Type_to_the_Site_Part|Prev: Adding a Menu Type to the Site Part|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Model_to_the_Site_Part|Next: Adding a Model to the Site Part|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

J4.x:Developing an MVC Component/Adding a View to the Site Part

2020-12-17T03:11:33Z

GregJPreece: Adding illustrative screenshots

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Adding a View to the Site Part}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/<translate>en</translate>}}

== Adding the View ==

Though a component is split into "admin" and "site" parts, the process of adding a view is very similar in both. Just as in the basic view we made in the last article, we will require a controller, a view, and a template.

To get started, let's first create the new files for the site page. As before, the source code for each file can be found under [[#File Details|File Details]].

{|border=1
| 1
| Create: [[#site/src/Controller/DisplayController|site/src/Controller/DisplayController]]
| The default MVC Controller for the site part
|-
| 2
| Create: [[#site/src/View/Hello/HtmlView.php|site/src/View/Hello/HtmlView.php]]
| The MVC View object for the new "Hello" page
|-
| 3
| Create: [[#site/tmpl/hello/default.php|site/tmpl/hello/default.php]]
| The template for the new "Hello" page
|-
| 4
| Update: [[#helloworld.xml|helloworld.xml]]
| Need to add the new files to the component's manifest
|}

== File Details ==

{{vanchor|site/src/Controller/DisplayController}}

The default MVC controller in the site part. We have some basic code in here to fetch and render a view, but as before we're mostly delegating to the parent Joomla! class. As this is a PHP class, it lives under your PHP namespace root <tt>src/</tt>, in the <tt>Controller</tt> namespace.

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Site\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;
use Joomla\CMS\Factory;

/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* HelloWorld Component Controller
* @since 0.0.2
*/
class DisplayController extends BaseController {

public function display($cachable = false, $urlparams = array()) {
$document = Factory::getDocument();
$viewName = $this->input->getCmd('view', 'login');
$viewFormat = $document->getType();

$view = $this->getView($viewName, $viewFormat);

$view->document = $document;
$view->display();
}

}
</source>

{{vanchor|site/src/View/Hello/HtmlView.php}}

The MVC view for this "Hello World" page. As before, this file simply delegates to the parent object to get us started. As this is a PHP class, it lives under <tt>src/</tt>, in the <tt>View/Hello</tt> namespace that matches the view's name.

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Site\View\Hello;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* View for the user identity validation form
*/
class HtmlView extends BaseHtmlView {

/**
* Display the view
*
* @param string $template The name of the layout file to parse.
* @return void
*/
public function display($template = null) {
// Call the parent display to display the layout file
parent::display($template);
}

}
</source>

{{vanchor|site/tmpl/hello/default.php}}

The page template for our "Hello World" page in the site part. This is identical to the template we used in the admin part, to get us started. As a template, it lives under <tt>tmpl</tt> in a folder that matches the view's name.

<source lang="php">
<?php

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2>Hello world!</h2>
</source>

{{vanchor|helloworld.xml}}

Finally, let's update the component's manifest to include the new files. We need to tell Joomla! that the new files exist so that it will copy them into place. We'll also update the extension's version number in the manifest - right now, this has no real effect, but in the future changing the version number will have more significance so it's a good habit to get into.

<source lang="xml" highlight="13,32-35">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="4.0" method="upgrade">

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.2</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<files folder="site/">
<folder>src</folder>
<folder>tmpl</folder>
</files>

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>
</administration>

</extension>
</source>

== Updating the Extension ==

To test the changes to your extension, first you will need to zip up the <tt>com_helloworld</tt> folder and install it just as you did before. We'll go through the process step-by-step one more time here:

# Using your web browser, navigate to the Administrator panel of your Joomla! site. The address would be <tt><joomla>/administrator/</tt>. For example: <tt>http://localhost/joomla/administrator/</tt>
# On the left menu, click the "System" link.
# On the "Install" card, click "Extensions".
# On the "Upload Package File" tab, browse for and select the .zip file you just created.

Once your new component version is installed, click the "System" link on the main menu again, then select "Extensions" on the "Manage" card this time. A list of the installed Joomla! extensions should appear. Type "hello" into the search bar at the top right and hit return. You should see your "Hello World" extension, now listed as version 0.0.2.

[[File:Joomla 4.x Component Tutorial 0.0.2 Component Listing.png|frameless|The Hello World component, listed in the Joomla! extensions directory.]]

== Testing the New Page ==

The new page has no menu link yet (we will add that in the next article) so to test it we'll need to use a direct URL. Go to <tt><joomla>/index.php?option=com_helloworld&view=hello</tt> (not inside the <tt>/administrator</tt> path), and you should see your new "Hello World" site page appear.

[[File:Joomla_4.x_Component_Tutorial_0.0.2_Hello_World.png|frameless|The Hello World page as it appears on Joomla 4 Beta 5.]]

Next, we will add menu configuration for this page, so that it can be used inside the Joomla! menu system.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Developing_a_Basic_Component|Prev: Developing a Basic Component|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Menu_Type_to_the_Site_Part|Next: Adding a Menu Type to the Site Part|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!4.x - Contents/en

2020-12-16T01:05:03Z

GregJPreece:

J4.x:Developing an MVC Component/Adding a Menu Type to the Site Part

2020-12-16T01:04:29Z

File:Joomla 4.x Component Tutorial 0.0.3 New Menu Item.png

2020-12-16T00:56:45Z

GregJPreece: Where to find the "New Menu Item" button in the Joomla! admin panel's menu.

== Summary ==
Where to find the "New Menu Item" button in the Joomla! admin panel's menu.
== Licensing ==
{{JEDL}}

File:Joomla 4.x Component Tutorial 0.0.3 Menu Item Type.png

2020-12-16T00:56:08Z

GregJPreece: The new "Hello World" component's first link, appearing in the list of available menu item types.

== Summary ==
The new "Hello World" component's first link, appearing in the list of available menu item types.
== Licensing ==
{{JEDL}}

File:Joomla 4.x Component Tutorial 0.0.2 Component Listing.png

2020-12-16T00:55:08Z

GregJPreece: Our new Joomla! Hello World component, listed in the Joomla! installation's component directory.

== Summary ==
Our new Joomla! Hello World component, listed in the Joomla! installation's component directory.
== Licensing ==
{{JEDL}}

File:Joomla 4.x Component Tutorial 0.0.2 Hello World.png

2020-12-16T00:53:58Z

GregJPreece: Our newly created "Hello World" page, running in the public site section of our Joomla! installation.

== Summary ==
Our newly created "Hello World" page, running in the public site section of our Joomla! installation.
== Licensing ==
{{JEDL}}

Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!4.x - Contents/en

2020-12-15T06:37:21Z

GregJPreece:

J4.x:Developing an MVC Component/Adding a View to the Site Part

2020-12-15T06:34:22Z

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Adding a View to the Site Part}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/<translate>en</translate>}}

== Adding the View ==

Though a component is split into "admin" and "site" parts, the process of adding a view is very similar in both. Just as in the basic view we made in the last article, we will require a controller, a view, and a template.

To get started, let's first create the new files for the site page. As before, the source code for each file can be found under [[#File Details|File Details]].

{|border=1
| 1
| Create: [[#site/src/Controller/DisplayController|site/src/Controller/DisplayController]]
| The default MVC Controller for the site part
|-
| 2
| Create: [[#site/src/View/Hello/HtmlView.php|site/src/View/Hello/HtmlView.php]]
| The MVC View object for the new "Hello" page
|-
| 3
| Create: [[#site/tmpl/hello/default.php|site/tmpl/hello/default.php]]
| The template for the new "Hello" page
|-
| 4
| Update: [[#helloworld.xml|helloworld.xml]]
| Need to add the new files to the component's manifest
|}

== File Details ==

{{vanchor|site/src/Controller/DisplayController}}

The default MVC controller in the site part. We have some basic code in here to fetch and render a view, but as before we're mostly delegating to the parent Joomla! class. As this is a PHP class, it lives under your PHP namespace root <tt>src/</tt>, in the <tt>Controller</tt> namespace.

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Site\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;
use Joomla\CMS\Factory;

/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* HelloWorld Component Controller
* @since 0.0.2
*/
class DisplayController extends BaseController {

public function display($cachable = false, $urlparams = array()) {
$document = Factory::getDocument();
$viewName = $this->input->getCmd('view', 'login');
$viewFormat = $document->getType();

$view = $this->getView($viewName, $viewFormat);

$view->document = $document;
$view->display();
}

}
</source>

{{vanchor|site/src/View/Hello/HtmlView.php}}

The MVC view for this "Hello World" page. As before, this file simply delegates to the parent object to get us started. As this is a PHP class, it lives under <tt>src/</tt>, in the <tt>View/Hello</tt> namespace that matches the view's name.

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Site\View\Hello;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* View for the user identity validation form
*/
class HtmlView extends BaseHtmlView {

/**
* Display the view
*
* @param string $template The name of the layout file to parse.
* @return void
*/
public function display($template = null) {
// Call the parent display to display the layout file
parent::display($template);
}

}
</source>

{{vanchor|site/tmpl/hello/default.php}}

The page template for our "Hello World" page in the site part. This is identical to the template we used in the admin part, to get us started. As a template, it lives under <tt>tmpl</tt> in a folder that matches the view's name.

<source lang="php">
<?php

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2>Hello world!</h2>
</source>

{{vanchor|helloworld.xml}}

Finally, let's update the component's manifest to include the new files. We need to tell Joomla! that the new files exist so that it will copy them into place. We'll also update the extension's version number in the manifest - right now, this has no real effect, but in the future changing the version number will have more significance so it's a good habit to get into.

<source lang="xml" highlight="13,32-35">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="4.0" method="upgrade">

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.2</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<files folder="site/">
<folder>src</folder>
<folder>tmpl</folder>
</files>

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>
</administration>

</extension>
</source>

== Updating the Extension ==

To test the changes to your extension, first you will need to zip up the <tt>com_helloworld</tt> folder and install it just as you did before. We'll go through the process step-by-step one more time here:

# Using your web browser, navigate to the Administrator panel of your Joomla! site. The address would be <tt><joomla>/administrator/</tt>. For example: <tt>http://localhost/joomla/administrator/</tt>
# On the left menu, click the "System" link.
# On the "Install" card, click "Extensions".
# On the "Upload Package File" tab, browse for and select the .zip file you just created.

Once your new component version is installed, click the "System" link on the main menu again, then select "Extensions" on the "Manage" card this time. A list of the installed Joomla! extensions should appear. Type "hello" into the search bar at the top right and hit return. You should see your "Hello World" extension, now listed as version 0.0.2.

== Testing the New Page ==

The new page has no menu link yet (we will add that in the next article) so to test it we'll need to use a direct URL. Go to <tt><joomla>/index.php?option=com_helloworld&view=hello</tt> (not inside the <tt>/administrator</tt> path), and you should see your new "Hello World" site page appear.

Next, we will add menu configuration for this page, so that it can be used inside the Joomla! menu system.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Developing_a_Basic_Component|Prev: Developing a Basic Component|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_Menu_Type_to_the_Site_Part|Next: Adding a Menu Type to the Site Part|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

J4.x:Developing an MVC Component/Developing a Basic Component

2020-12-15T04:48:37Z

GregJPreece: Renaming "test" view to "hello"

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing a Basic Component}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/<translate>en</translate>}}

== Your First Component ==

In this article we will cover how to create and install a basic Joomla! component, which we will inventively call the "Hello World" component.

To begin, you must first use your preferred file manager to create a directory for the Hello World! component. This directory can be anywhere on your file system, as long as it is outside of your Joomla! installation directory. For this example we will name the directory <tt>com_helloworld</tt>, because that is how a component directory looks once it's inside Joomla. (The <tt>com</tt> prefix means "component".)

Next, inside this directory we need to create some files. Using your preferred file manager, create the following files; as you create the files, add the source code for each file which can be found in [[#File Details|File Details]].

{|border=1
| 1
| ''[[#helloworld.xml|helloworld.xml]]''
| An XML manifest file that tells Joomla! how to install our component.
|-
| 2
| ''[[#admin/services/provider.php|admin/services/provider.php]]''
| Tells Joomla! how to initialise the component
|-
| 3
| ''[[#admin/src/Controller/DisplayController|admin/src/Controller/DisplayController]]''
| The MVC Controller for the "Hello World" page we'll start with.
|-
| 4
| ''[[#admin/src/View/Hello/HtmlView.php|admin/src/View/Hello/HtmlView.php]]''
| The MVC View for the "Hello World" page we'll start with.
|-
| 5
| ''[[#admin/tmpl/hello/default.php|admin/tmpl/hello/default.php]]''
| The HTML/PHP template for the "Hello World" page
|}

== File Details ==

{{vanchor|helloworld.xml}}

This is a manifest file, which describes the component and its configuration to Joomla! It is utilised during installation to copy the component's files into the correct locations, trigger database installation, configure the component's PHP namespace, and so on.

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

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.1</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>
</administration>

</extension>
</source>

{{vanchor|admin/services/provider.php}}

This is a special file that tells Joomla! how to initialise the component - which services it requires and how they should be provided.

<source lang="php">
<?php

defined('_JEXEC') or die;

use Joomla\CMS\Dispatcher\ComponentDispatcherFactoryInterface;
use Joomla\CMS\Extension\ComponentInterface;
use Joomla\CMS\Extension\MVCComponent;
use Joomla\CMS\Extension\Service\Provider\ComponentDispatcherFactory;
use Joomla\CMS\Extension\Service\Provider\MVCFactory;
use Joomla\CMS\MVC\Factory\MVCFactoryInterface;
use Joomla\DI\Container;
use Joomla\DI\ServiceProviderInterface;

return new class implements ServiceProviderInterface {

public function register(Container $container): void {
$container->registerServiceProvider(new MVCFactory('\\JohnSmith\\Component\\HelloWorld'));
$container->registerServiceProvider(new ComponentDispatcherFactory('\\JohnSmith\\Component\\HelloWorld'));
$container->set(
ComponentInterface::class,
function (Container $container) {
$component = new MVCComponent($container->get(ComponentDispatcherFactoryInterface::class));
$component->setMVCFactory($container->get(MVCFactoryInterface::class));

return $component;
}
);
}
};
</source>

{{vanchor|admin/src/Controller/DisplayController}}

The MVC controller for our first view, "hello". As our component grows in complexity, a page's controller will handle model fetching, form submissions, and so on. Here, it simply sets its default view and leaves the rest to its parent.

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Administrator\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Default Controller of HelloWorld component
*
* @package Joomla.Administrator
* @subpackage com_helloworld
*/
class DisplayController extends BaseController {
/**
* The default view for the display method.
*
* @var string
*/
protected $default_view = 'hello';

public function display($cachable = false, $urlparams = array()) {
return parent::display();
}

}
</source>

{{vanchor|admin/src/View/Hello/HtmlView.php}}

This is the MVC view object for our first page. The job of a view object is to handle the setup work for a view template - selecting a layout, fetching Javascript, generating toolbars, etc. To simply get our "hello world" page to load, we will delegate the work of initialising the view to Joomla!

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Administrator\View\Hello;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Main "Hello World" Admin View
*/
class HtmlView extends BaseHtmlView {

/**
* Display the main "Hello World" view
*
* @param string $tpl The name of the template file to parse; automatically searches through the template paths.
* @return void
*/
function display($tpl = null) {
parent::display($tpl);
}

}
</source>

{{vanchor|admin/tmpl/hello/default.php}}

This file holds the template for the page. It is used to render the page utilising the setup done by the view object.

When no specific layout is requested for a view, Joomla! will load the template in the <tt>default.php</tt> file, which is why we're using that filename.

<source lang="php">
<?php

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2>Hello world!</h2>
</source>

== Installing the Component ==

Using your preferred file manager, create a .zip file of the <tt>com_helloworld</tt> directory - include the directory itself and make sure to preserve the directory structure.

Now we need to install the component. Follow this process:

# Using your web browser, navigate to the Administrator panel of your Joomla! site. The address would be <tt><joomla>/administrator/</tt>. For example: <tt>http://localhost/joomla/administrator/</tt>
# On the left menu, click the "System" link.
# On the "Install" card, click "Extensions".
# On the "Upload Package File" tab, browse for and select the .zip file you just created.

The page should automatically process the installation of the component, and you will receive a message telling you whether it was successful or not.

== Testing the Component ==

Once the component is installed, click the "Components" section of the menu on the left of the admin panel. You should now see a new link under this section labelled "Hello World". This is the link detailed in the component's manifest file. If you click it, you should see the "Hello World" page.

Congratulations! You've created your first Joomla! component. Now, let's start making it useful.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Prev: Introduction|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part|Next: Adding a View to the Site Part|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

J4.x:Developing an MVC Component/Developing a Basic Component

2020-12-15T02:01:01Z

GregJPreece: Moving common notes to their own chunk

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing a Basic Component}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/<translate>en</translate>}}

== Your First Component ==

In this article we will cover how to create and install a basic Joomla! component, which we will inventively call the "Hello World" component.

To begin, you must first use your preferred file manager to create a directory for the Hello World! component. This directory can be anywhere on your file system, as long as it is outside of your Joomla! installation directory. For this example we will name the directory <tt>com_helloworld</tt>, because that is how a component directory looks once it's inside Joomla. (The <tt>com</tt> prefix means "component".)

Next, inside this directory we need to create some files. Using your preferred file manager, create the following files; as you create the files, add the source code for each file which can be found in [[#File Details|File Details]].

{|border=1
| 1
| ''[[#helloworld.xml|helloworld.xml]]''
| An XML manifest file that tells Joomla! how to install our component.
|-
| 2
| ''[[#admin/services/provider.php|admin/services/provider.php]]''
| Tells Joomla! how to initialise the component
|-
| 3
| ''[[#admin/src/Controller/DisplayController|admin/src/Controller/DisplayController]]''
| The MVC Controller for the "Hello World" page we'll start with.
|-
| 4
| ''[[#admin/src/View/Test/HtmlView.php|admin/src/View/Test/HtmlView.php]]''
| The MVC View for the "Hello World" page we'll start with.
|-
| 5
| ''[[#admin/tmpl/test/default.php|admin/tmpl/test/default.php]]''
| The HTML/PHP template for the "Hello World" page
|}

== File Details ==

{{vanchor|helloworld.xml}}

This is a manifest file, which describes the component and its configuration to Joomla! It is utilised during installation to copy the component's files into the correct locations, trigger database installation, configure the component's PHP namespace, and so on.

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

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.1</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>
</administration>

</extension>
</source>

{{vanchor|admin/services/provider.php}}

This is a special file that tells Joomla! how to initialise the component - which services it requires and how they should be provided.

<source lang="php">
<?php

defined('_JEXEC') or die;

use Joomla\CMS\Dispatcher\ComponentDispatcherFactoryInterface;
use Joomla\CMS\Extension\ComponentInterface;
use Joomla\CMS\Extension\MVCComponent;
use Joomla\CMS\Extension\Service\Provider\ComponentDispatcherFactory;
use Joomla\CMS\Extension\Service\Provider\MVCFactory;
use Joomla\CMS\MVC\Factory\MVCFactoryInterface;
use Joomla\DI\Container;
use Joomla\DI\ServiceProviderInterface;

return new class implements ServiceProviderInterface {

public function register(Container $container): void {
$container->registerServiceProvider(new MVCFactory('\\JohnSmith\\Component\\HelloWorld'));
$container->registerServiceProvider(new ComponentDispatcherFactory('\\JohnSmith\\Component\\HelloWorld'));
$container->set(
ComponentInterface::class,
function (Container $container) {
$component = new MVCComponent($container->get(ComponentDispatcherFactoryInterface::class));
$component->setMVCFactory($container->get(MVCFactoryInterface::class));

return $component;
}
);
}
};
</source>

{{vanchor|admin/src/Controller/DisplayController}}

The MVC controller for our first view, "test". As our component grows in complexity, a page's controller will handle model fetching, form submissions, and so on. Here, it simply sets its default view and leaves the rest to its parent.

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Administrator\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Default Controller of HelloWorld component
*
* @package Joomla.Administrator
* @subpackage com_helloworld
*/
class DisplayController extends BaseController {
/**
* The default view for the display method.
*
* @var string
*/
protected $default_view = 'test';

public function display($cachable = false, $urlparams = array()) {
return parent::display();
}

}
</source>

{{vanchor|admin/src/View/Test/HtmlView.php}}

This is the MVC view object for our first page. The job of a view object is to handle the setup work for a view template - selecting a layout, fetching Javascript, generating toolbars, etc. To simply get our "hello world" page to load, we will delegate the work of initialising the view to Joomla!

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Administrator\View\Test;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Main "Hello World" Admin View
*/
class HtmlView extends BaseHtmlView {

/**
* Display the main "Hello World" view
*
* @param string $tpl The name of the template file to parse; automatically searches through the template paths.
* @return void
*/
function display($tpl = null) {
parent::display($tpl);
}

}
</source>

{{vanchor|admin/tmpl/test/default.php}}

This file holds the template for the page. It is used to render the page utilising the setup done by the view object.

When no specific layout is requested for a view, Joomla! will load the template in the <tt>default.php</tt> file, which is why we're using that filename.

<source lang="php">
<?php

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2>Hello world!</h2>
</source>

== Installing the Component ==

Using your preferred file manager, create a .zip file of the <tt>com_helloworld</tt> directory - include the directory itself and make sure to preserve the directory structure.

Now we need to install the component. Follow this process:

# Using your web browser, navigate to the Administrator panel of your Joomla! site. The address would be <tt><joomla>/administrator/</tt>. For example: <tt>http://localhost/joomla/administrator/</tt>
# On the left menu, click the "System" link.
# On the "Install" card, click "Extensions".
# On the "Upload Package File" tab, browse for and select the .zip file you just created.

The page should automatically process the installation of the component, and you will receive a message telling you whether it was successful or not.

== Testing the Component ==

Once the component is installed, click the "Components" section of the menu on the left of the admin panel. You should now see a new link under this section labelled "Hello World". This is the link detailed in the component's manifest file. If you click it, you should see the "Hello World" page.

Congratulations! You've created your first Joomla! component. Now, let's start making it useful.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Prev: Introduction|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part|Next: Adding a View to the Site Part|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!4.x - Contents/en

2020-12-15T01:40:33Z

GregJPreece: Undo revision 771221 by GregJPreece (talk)

J4.x:Developing an MVC Component/Developing a Basic Component

2020-12-15T01:38:29Z

GregJPreece:

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing a Basic Component}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}

== Your First Component ==

In this article we will cover how to create and install a basic Joomla! component, which we will inventively call the "Hello World" component.

To begin, you must first use your preferred file manager to create a directory for the Hello World! component. This directory can be anywhere on your file system, as long as it is outside of your Joomla! installation directory. For this example we will name the directory <tt>com_helloworld</tt>, because that is how a component directory looks once it's inside Joomla. (The <tt>com</tt> prefix means "component".)

Next, inside this directory we need to create some files. Using your preferred file manager, create the following files; as you create the files, add the source code for each file which can be found in [[#File Details|File Details]].

{|border=1
| 1
| ''[[#helloworld.xml|helloworld.xml]]''
| An XML manifest file that tells Joomla! how to install our component.
|-
| 2
| ''[[#admin/services/provider.php|admin/services/provider.php]]''
| Tells Joomla! how to initialise the component
|-
| 3
| ''[[#admin/src/Controller/DisplayController|admin/src/Controller/DisplayController]]''
| The MVC Controller for the "Hello World" page we'll start with.
|-
| 4
| ''[[#admin/src/View/Test/HtmlView.php|admin/src/View/Test/HtmlView.php]]''
| The MVC View for the "Hello World" page we'll start with.
|-
| 5
| ''[[#admin/tmpl/test/default.php|admin/tmpl/test/default.php]]''
| The HTML/PHP template for the "Hello World" page
|}

== File Details ==

{{vanchor|helloworld.xml}}

This is a manifest file, which describes the component and its configuration to Joomla! It is utilised during installation to copy the component's files into the correct locations, trigger database installation, configure the component's PHP namespace, and so on.

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

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.1</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>
</administration>

</extension>
</source>

{{vanchor|admin/services/provider.php}}

This is a special file that tells Joomla! how to initialise the component - which services it requires and how they should be provided.

<source lang="php">
<?php

defined('_JEXEC') or die;

use Joomla\CMS\Dispatcher\ComponentDispatcherFactoryInterface;
use Joomla\CMS\Extension\ComponentInterface;
use Joomla\CMS\Extension\MVCComponent;
use Joomla\CMS\Extension\Service\Provider\ComponentDispatcherFactory;
use Joomla\CMS\Extension\Service\Provider\MVCFactory;
use Joomla\CMS\MVC\Factory\MVCFactoryInterface;
use Joomla\DI\Container;
use Joomla\DI\ServiceProviderInterface;

return new class implements ServiceProviderInterface {

public function register(Container $container): void {
$container->registerServiceProvider(new MVCFactory('\\JohnSmith\\Component\\HelloWorld'));
$container->registerServiceProvider(new ComponentDispatcherFactory('\\JohnSmith\\Component\\HelloWorld'));
$container->set(
ComponentInterface::class,
function (Container $container) {
$component = new MVCComponent($container->get(ComponentDispatcherFactoryInterface::class));
$component->setMVCFactory($container->get(MVCFactoryInterface::class));

return $component;
}
);
}
};
</source>

{{vanchor|admin/src/Controller/DisplayController}}

The MVC controller for our first view, "test". As our component grows in complexity, a page's controller will handle model fetching, form submissions, and so on. Here, it simply sets its default view and leaves the rest to its parent.

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Administrator\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Default Controller of HelloWorld component
*
* @package Joomla.Administrator
* @subpackage com_helloworld
*/
class DisplayController extends BaseController {
/**
* The default view for the display method.
*
* @var string
*/
protected $default_view = 'test';

public function display($cachable = false, $urlparams = array()) {
return parent::display();
}

}
</source>

{{vanchor|admin/src/View/Test/HtmlView.php}}

This is the MVC view object for our first page. The job of a view object is to handle the setup work for a view template - selecting a layout, fetching Javascript, generating toolbars, etc. To simply get our "hello world" page to load, we will delegate the work of initialising the view to Joomla!

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Administrator\View\Test;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Main "Hello World" Admin View
*/
class HtmlView extends BaseHtmlView {

/**
* Display the main "Hello World" view
*
* @param string $tpl The name of the template file to parse; automatically searches through the template paths.
* @return void
*/
function display($tpl = null) {
parent::display($tpl);
}

}
</source>

{{vanchor|admin/tmpl/test/default.php}}

This file holds the template for the page. It is used to render the page utilising the setup done by the view object.

When no specific layout is requested for a view, Joomla! will load the template in the <tt>default.php</tt> file, which is why we're using that filename.

<source lang="php">
<?php

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2>Hello world!</h2>
</source>

== Installing the Component ==

Using your preferred file manager, create a .zip file of the <tt>com_helloworld</tt> directory - include the directory itself and make sure to preserve the directory structure.

Now we need to install the component. Follow this process:

# Using your web browser, navigate to the Administrator panel of your Joomla! site. The address would be <tt><joomla>/administrator/</tt>. For example: <tt>http://localhost/joomla/administrator/</tt>
# On the left menu, click the "System" link.
# On the "Install" card, click "Extensions".
# On the "Upload Package File" tab, browse for and select the .zip file you just created.

The page should automatically process the installation of the component, and you will receive a message telling you whether it was successful or not.

== Testing the Component ==

Once the component is installed, click the "Components" section of the menu on the left of the admin panel. You should now see a new link under this section labelled "Hello World". This is the link detailed in the component's manifest file. If you click it, you should see the "Hello World" page.

Congratulations! You've created your first Joomla! component. Now, let's start making it useful.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Prev: Introduction|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part|Next: Adding a View to the Site Part|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!4.x - Contents/en

2020-12-15T01:38:22Z

GregJPreece:

<noinclude><languages /></noinclude>

<div class="large-4 columns" style="float:right; background:#fff;margin:0 0 1.0em 1.0em;">
<div class="large-12 columns panel radius mw-collapsible" style="width:100%;background:#fff;font-size:.8em">
<big>'''Articles in this Series'''</big>
<div class="large-12 columns panel mw-collapsible-content" style="border:none; background:#fff; min-width:100%;">
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Introduction]]
# [[S:MyLanguage/J4.x:Developing_an_MVC_Component/Developing_a_Basic_Component|Developing a Basic Component]]
</div></div>
</div>

This article is part of the tutorial [[J4.x:Developing_an_MVC_Component/Introduction|"Developing an MVC Component for Joomla 4.x"]]. It is intended to be a follow-along programming tutorial, so if you have not read the previous parts of the tutorial you are encouraged to do so.

<noinclude>{{-}}</noinclude>

<noinclude>
[[Category:Tutorials in a Series{{#translation:}}]]
</noinclude>

Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!4.x - Contents/en

2020-12-14T22:45:17Z

GregJPreece: Fixing Introduction page link

J4.x:Developing an MVC Component/Developing a Basic Component

2020-12-14T22:44:26Z

GregJPreece: Adding tutorial series index

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing a Basic Component}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}

This article is part of the tutorial [[J4.x:Developing_an_MVC_Component/Introduction|"Developing an MVC Component for Joomla 4.x"]]. It is intended to be a follow-along programming tutorial, so if you have not read the previous parts of the tutorial you are encouraged to do so.

== Your First Component ==

In this article we will cover how to create and install a basic Joomla! component, which we will inventively call the "Hello World" component.

To begin, you must first use your preferred file manager to create a directory for the Hello World! component. This directory can be anywhere on your file system, as long as it is outside of your Joomla! installation directory. For this example we will name the directory <tt>com_helloworld</tt>, because that is how a component directory looks once it's inside Joomla. (The <tt>com</tt> prefix means "component".)

Next, inside this directory we need to create some files. Using your preferred file manager, create the following files; as you create the files, add the source code for each file which can be found in [[#File Details|File Details]].

{|border=1
| 1
| ''[[#helloworld.xml|helloworld.xml]]''
| An XML manifest file that tells Joomla! how to install our component.
|-
| 2
| ''[[#admin/services/provider.php|admin/services/provider.php]]''
| Tells Joomla! how to initialise the component
|-
| 3
| ''[[#admin/src/Controller/DisplayController|admin/src/Controller/DisplayController]]''
| The MVC Controller for the "Hello World" page we'll start with.
|-
| 4
| ''[[#admin/src/View/Test/HtmlView.php|admin/src/View/Test/HtmlView.php]]''
| The MVC View for the "Hello World" page we'll start with.
|-
| 5
| ''[[#admin/tmpl/test/default.php|admin/tmpl/test/default.php]]''
| The HTML/PHP template for the "Hello World" page
|}

== File Details ==

{{vanchor|helloworld.xml}}

This is a manifest file, which describes the component and its configuration to Joomla! It is utilised during installation to copy the component's files into the correct locations, trigger database installation, configure the component's PHP namespace, and so on.

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

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.1</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>
</administration>

</extension>
</source>

{{vanchor|admin/services/provider.php}}

This is a special file that tells Joomla! how to initialise the component - which services it requires and how they should be provided.

<source lang="php">
<?php

defined('_JEXEC') or die;

use Joomla\CMS\Dispatcher\ComponentDispatcherFactoryInterface;
use Joomla\CMS\Extension\ComponentInterface;
use Joomla\CMS\Extension\MVCComponent;
use Joomla\CMS\Extension\Service\Provider\ComponentDispatcherFactory;
use Joomla\CMS\Extension\Service\Provider\MVCFactory;
use Joomla\CMS\MVC\Factory\MVCFactoryInterface;
use Joomla\DI\Container;
use Joomla\DI\ServiceProviderInterface;

return new class implements ServiceProviderInterface {

public function register(Container $container): void {
$container->registerServiceProvider(new MVCFactory('\\JohnSmith\\Component\\HelloWorld'));
$container->registerServiceProvider(new ComponentDispatcherFactory('\\JohnSmith\\Component\\HelloWorld'));
$container->set(
ComponentInterface::class,
function (Container $container) {
$component = new MVCComponent($container->get(ComponentDispatcherFactoryInterface::class));
$component->setMVCFactory($container->get(MVCFactoryInterface::class));

return $component;
}
);
}
};
</source>

{{vanchor|admin/src/Controller/DisplayController}}

The MVC controller for our first view, "test". As our component grows in complexity, a page's controller will handle model fetching, form submissions, and so on. Here, it simply sets its default view and leaves the rest to its parent.

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Administrator\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Default Controller of HelloWorld component
*
* @package Joomla.Administrator
* @subpackage com_helloworld
*/
class DisplayController extends BaseController {
/**
* The default view for the display method.
*
* @var string
*/
protected $default_view = 'test';

public function display($cachable = false, $urlparams = array()) {
return parent::display();
}

}
</source>

{{vanchor|admin/src/View/Test/HtmlView.php}}

This is the MVC view object for our first page. The job of a view object is to handle the setup work for a view template - selecting a layout, fetching Javascript, generating toolbars, etc. To simply get our "hello world" page to load, we will delegate the work of initialising the view to Joomla!

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Administrator\View\Test;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Main "Hello World" Admin View
*/
class HtmlView extends BaseHtmlView {

/**
* Display the main "Hello World" view
*
* @param string $tpl The name of the template file to parse; automatically searches through the template paths.
* @return void
*/
function display($tpl = null) {
parent::display($tpl);
}

}
</source>

{{vanchor|admin/tmpl/test/default.php}}

This file holds the template for the page. It is used to render the page utilising the setup done by the view object.

When no specific layout is requested for a view, Joomla! will load the template in the <tt>default.php</tt> file, which is why we're using that filename.

<source lang="php">
<?php

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2>Hello world!</h2>
</source>

== Installing the Component ==

Using your preferred file manager, create a .zip file of the <tt>com_helloworld</tt> directory - include the directory itself and make sure to preserve the directory structure.

Now we need to install the component. Follow this process:

# Using your web browser, navigate to the Administrator panel of your Joomla! site. The address would be <tt><joomla>/administrator/</tt>. For example: <tt>http://localhost/joomla/administrator/</tt>
# On the left menu, click the "System" link.
# On the "Install" card, click "Extensions".
# On the "Upload Package File" tab, browse for and select the .zip file you just created.

The page should automatically process the installation of the component, and you will receive a message telling you whether it was successful or not.

== Testing the Component ==

Once the component is installed, click the "Components" section of the menu on the left of the admin panel. You should now see a new link under this section labelled "Hello World". This is the link detailed in the component's manifest file. If you click it, you should see the "Hello World" page.

Congratulations! You've created your first Joomla! component. Now, let's start making it useful.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Prev: Introduction|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part|Next: Adding a View to the Site Part|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

J4.x:Developing an MVC Component/Introduction

2020-12-14T22:43:12Z

GregJPreece: Adding tutorial series index

J4.x:Developing an MVC Component

2020-12-14T22:40:54Z

GregJPreece: Adding tutorial series index

<noinclude><languages /></noinclude>
{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=<translate>Developing an MVC Component for Joomla 4.x</translate>}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<translate>en</translate>}}
<translate>This is intended to be a multiple-article series of tutorials on how to develop a Model-View-Controller [[S:MyLanguage/Component|Component]] for Joomla! Version 4.x. </translate>

==Under Construction==

This section of the documentation is currently under heavy work, rewriting the Joomla 3 tutorial to be up-to-date. Joomla 4 is also still in the beta stage at the time of writing. While the information here should remain accurate, please be aware that pages will be missing and details may change until this notice is removed.

As per the [[JDOC:Page_Translation_Explained|Page Translation Guide]], translation tagging will not be added to this tutorial until it is complete and the text is stabilised.

<noinclude><div class="row">
<div class="large-4 columns">{{Basic button|<translate>
S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Let's start with the introduction</translate>|class=expand success}}
</div></div></noinclude>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!4.x - Contents/en

2020-12-14T22:37:34Z

GregJPreece: Created page with "<noinclude><languages /></noinclude> <div class="large-4 columns" style="float:right; background:#fff;margin:0 0 1.0em 1.0em;"> <div class="large-12 columns panel radius mw-co..."

J4.x:Developing an MVC Component/Developing a Basic Component

2020-12-14T22:15:16Z

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing a Basic Component}}
{{-}}

This article is part of the tutorial [[J4.x:Developing_an_MVC_Component/Introduction|"Developing an MVC Component for Joomla 4.x"]]. It is intended to be a follow-along programming tutorial, so if you have not read the previous parts of the tutorial you are encouraged to do so.

== Your First Component ==

In this article we will cover how to create and install a basic Joomla! component, which we will inventively call the "Hello World" component.

To begin, you must first use your preferred file manager to create a directory for the Hello World! component. This directory can be anywhere on your file system, as long as it is outside of your Joomla! installation directory. For this example we will name the directory <tt>com_helloworld</tt>, because that is how a component directory looks once it's inside Joomla. (The <tt>com</tt> prefix means "component".)

Next, inside this directory we need to create some files. Using your preferred file manager, create the following files; as you create the files, add the source code for each file which can be found in [[#File Details|File Details]].

{|border=1
| 1
| ''[[#helloworld.xml|helloworld.xml]]''
| An XML manifest file that tells Joomla! how to install our component.
|-
| 2
| ''[[#admin/services/provider.php|admin/services/provider.php]]''
| Tells Joomla! how to initialise the component
|-
| 3
| ''[[#admin/src/Controller/DisplayController|admin/src/Controller/DisplayController]]''
| The MVC Controller for the "Hello World" page we'll start with.
|-
| 4
| ''[[#admin/src/View/Test/HtmlView.php|admin/src/View/Test/HtmlView.php]]''
| The MVC View for the "Hello World" page we'll start with.
|-
| 5
| ''[[#admin/tmpl/test/default.php|admin/tmpl/test/default.php]]''
| The HTML/PHP template for the "Hello World" page
|}

== File Details ==

{{vanchor|helloworld.xml}}

This is a manifest file, which describes the component and its configuration to Joomla! It is utilised during installation to copy the component's files into the correct locations, trigger database installation, configure the component's PHP namespace, and so on.

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

<name>Hello World</name>

<creationDate>December 2020</creationDate>

<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>

<version>0.0.1</version>

<description>
A hello world component!
</description>


<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>

<administration>

<menu link="index.php?option=com_helloworld">Hello World</menu>

<files folder="admin/">
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>
</administration>

</extension>
</source>

{{vanchor|admin/services/provider.php}}

This is a special file that tells Joomla! how to initialise the component - which services it requires and how they should be provided.

<source lang="php">
<?php

defined('_JEXEC') or die;

use Joomla\CMS\Dispatcher\ComponentDispatcherFactoryInterface;
use Joomla\CMS\Extension\ComponentInterface;
use Joomla\CMS\Extension\MVCComponent;
use Joomla\CMS\Extension\Service\Provider\ComponentDispatcherFactory;
use Joomla\CMS\Extension\Service\Provider\MVCFactory;
use Joomla\CMS\MVC\Factory\MVCFactoryInterface;
use Joomla\DI\Container;
use Joomla\DI\ServiceProviderInterface;

return new class implements ServiceProviderInterface {

public function register(Container $container): void {
$container->registerServiceProvider(new MVCFactory('\\JohnSmith\\Component\\HelloWorld'));
$container->registerServiceProvider(new ComponentDispatcherFactory('\\JohnSmith\\Component\\HelloWorld'));
$container->set(
ComponentInterface::class,
function (Container $container) {
$component = new MVCComponent($container->get(ComponentDispatcherFactoryInterface::class));
$component->setMVCFactory($container->get(MVCFactoryInterface::class));

return $component;
}
);
}
};
</source>

{{vanchor|admin/src/Controller/DisplayController}}

The MVC controller for our first view, "test". As our component grows in complexity, a page's controller will handle model fetching, form submissions, and so on. Here, it simply sets its default view and leaves the rest to its parent.

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Administrator\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Default Controller of HelloWorld component
*
* @package Joomla.Administrator
* @subpackage com_helloworld
*/
class DisplayController extends BaseController {
/**
* The default view for the display method.
*
* @var string
*/
protected $default_view = 'test';

public function display($cachable = false, $urlparams = array()) {
return parent::display();
}

}
</source>

{{vanchor|admin/src/View/Test/HtmlView.php}}

This is the MVC view object for our first page. The job of a view object is to handle the setup work for a view template - selecting a layout, fetching Javascript, generating toolbars, etc. To simply get our "hello world" page to load, we will delegate the work of initialising the view to Joomla!

<source lang="php">
<?php

namespace JohnSmith\Component\HelloWorld\Administrator\View\Test;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

/**
* Main "Hello World" Admin View
*/
class HtmlView extends BaseHtmlView {

/**
* Display the main "Hello World" view
*
* @param string $tpl The name of the template file to parse; automatically searches through the template paths.
* @return void
*/
function display($tpl = null) {
parent::display($tpl);
}

}
</source>

{{vanchor|admin/tmpl/test/default.php}}

This file holds the template for the page. It is used to render the page utilising the setup done by the view object.

When no specific layout is requested for a view, Joomla! will load the template in the <tt>default.php</tt> file, which is why we're using that filename.

<source lang="php">
<?php

/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2>Hello world!</h2>
</source>

== Installing the Component ==

Using your preferred file manager, create a .zip file of the <tt>com_helloworld</tt> directory - include the directory itself and make sure to preserve the directory structure.

Now we need to install the component. Follow this process:

# Using your web browser, navigate to the Administrator panel of your Joomla! site. The address would be <tt><joomla>/administrator/</tt>. For example: <tt>http://localhost/joomla/administrator/</tt>
# On the left menu, click the "System" link.
# On the "Install" card, click "Extensions".
# On the "Upload Package File" tab, browse for and select the .zip file you just created.

The page should automatically process the installation of the component, and you will receive a message telling you whether it was successful or not.

== Testing the Component ==

Once the component is installed, click the "Components" section of the menu on the left of the admin panel. You should now see a new link under this section labelled "Hello World". This is the link detailed in the component's manifest file. If you click it, you should see the "Hello World" page.

Congratulations! You've created your first Joomla! component. Now, let's start making it useful.

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Prev: Introduction|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part|Next: Adding a View to the Site Part|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

J4.x talk:Developing an MVC Component

2020-12-13T23:22:35Z

GregJPreece: Created page with "M-b-o, I appreciate you adding language tagging, but as per the translation guide I am not intending to do so until I am confident the text is correct. --~~~~"

M-b-o, I appreciate you adding language tagging, but as per the translation guide I am not intending to do so until I am confident the text is correct. --[[User:GregJPreece|GregJPreece]] ([[User talk:GregJPreece|talk]]) 17:22, 13 December 2020 (CST)

J4.x:Developing an MVC Component/Introduction

2020-12-13T01:27:56Z

GregJPreece: Adding "back" button

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing an MVC Component for Joomla 4.x}}
{{-}}

This tutorial will teach you how to develop a component for Joomla 4.x. A component is a type of Joomla extension that provides its own pages to the user, rather than augmenting existing content. A component is the most powerful type of Joomla extension, able to add a large amount of new functionality to a site.

Joomla components are split into two main parts: an administrator part and a site part. The administrator part provides an interface to manage the component, and the site part provides the pages requested by users visiting the website. This tutorial will teach you how to construct both parts.

For a more detailed overview of Components and the Model-View-Controller design pattern they use, please see the [[Absolute_Basics_of_How_a_Component_Functions|Component Basics Guide]]. However, please be aware that the specific file structure, naming standards and code detailed in the guide relate to Joomla 3.x, and should be ignored for the purposes of this tutorial.

== Requirements ==

You will need to have Joomla 4.x for this tutorial. Developing for Joomla 4.x requires:

* A minimum PHP version of 7.2.5 to be installed
* Composer, to manage PHP dependencies
* NodeJS version 10 or above, to manage front-end dependencies
* A MySQL database of version 5.6 or above, '''or'''
* A PostgreSQL database of version 11 or above
* The Git version control system

If you have not set up a local development environment, you will need to do so before attempting this tutorial. To set up your local development environment, please consult the [[J4.x:Setting_Up_Your_Local_Environment|Local Environment Guide]].

== Migrating from Joomla 3.x ==

For the majority of cases, migrating from Joomla 3.x to 4.x is a straightforward process. Most of the changes needed are naming/namespacing changes and moving files around. This author intends to create a migration guide once this tutorial is complete, which will be linked here.

== Contributors ==
* [[User:Ribafs|Ribafs]] (Authored Joomla 3.x version)
* [[User:Kevinkabatra | Kevin Kabatra]] (Authored Joomla 3.x version)
* [[User:GregJPreece | Greg J Preece]] (Rewriting 3.x guide for 4.x)

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component|Prev: Overview|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Developing_a_Basic_Component|Next: Developing a Basic Component|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

J4.x:Developing an MVC Component/Introduction

2020-12-13T01:25:22Z

GregJPreece: Adding categories

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing an MVC Component for Joomla 4.x}}
{{-}}

This tutorial will teach you how to develop a component for Joomla 4.x. A component is a type of Joomla extension that provides its own pages to the user, rather than augmenting existing content. A component is the most powerful type of Joomla extension, able to add a large amount of new functionality to a site.

Joomla components are split into two main parts: an administrator part and a site part. The administrator part provides an interface to manage the component, and the site part provides the pages requested by users visiting the website. This tutorial will teach you how to construct both parts.

For a more detailed overview of Components and the Model-View-Controller design pattern they use, please see the [[Absolute_Basics_of_How_a_Component_Functions|Component Basics Guide]]. However, please be aware that the specific file structure, naming standards and code detailed in the guide relate to Joomla 3.x, and should be ignored for the purposes of this tutorial.

== Requirements ==

You will need to have Joomla 4.x for this tutorial. Developing for Joomla 4.x requires:

* A minimum PHP version of 7.2.5 to be installed
* Composer, to manage PHP dependencies
* NodeJS version 10 or above, to manage front-end dependencies
* A MySQL database of version 5.6 or above, '''or'''
* A PostgreSQL database of version 11 or above
* The Git version control system

If you have not set up a local development environment, you will need to do so before attempting this tutorial. To set up your local development environment, please consult the [[J4.x:Setting_Up_Your_Local_Environment|Local Environment Guide]].

== Migrating from Joomla 3.x ==

For the majority of cases, migrating from Joomla 3.x to 4.x is a straightforward process. Most of the changes needed are naming/namespacing changes and moving files around. This author intends to create a migration guide once this tutorial is complete, which will be linked here.

== Contributors ==
* [[User:Ribafs|Ribafs]] (Authored Joomla 3.x version)
* [[User:Kevinkabatra | Kevin Kabatra]] (Authored Joomla 3.x version)
* [[User:GregJPreece | Greg J Preece]] (Rewriting 3.x guide for 4.x)

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Developing_a_Basic_Component|Next: Developing a Basic Component|class=expand}}</div>
</div>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

J4.x:Developing an MVC Component/Introduction

2020-12-12T22:39:30Z

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing an MVC Component for Joomla 4.x}}
{{-}}

This tutorial will teach you how to develop a component for Joomla 4.x. A component is a type of Joomla extension that provides its own pages to the user, rather than augmenting existing content. A component is the most powerful type of Joomla extension, able to add a large amount of new functionality to a site.

Joomla components are split into two main parts: an administrator part and a site part. The administrator part provides an interface to manage the component, and the site part provides the pages requested by users visiting the website. This tutorial will teach you how to construct both parts.

For a more detailed overview of Components and the Model-View-Controller design pattern they use, please see the [[Absolute_Basics_of_How_a_Component_Functions|Component Basics Guide]]. However, please be aware that the specific file structure, naming standards and code detailed in the guide relate to Joomla 3.x, and should be ignored for the purposes of this tutorial.

== Requirements ==

You will need to have Joomla 4.x for this tutorial. Developing for Joomla 4.x requires:

* A minimum PHP version of 7.2.5 to be installed
* Composer, to manage PHP dependencies
* NodeJS version 10 or above, to manage front-end dependencies
* A MySQL database of version 5.6 or above, '''or'''
* A PostgreSQL database of version 11 or above
* The Git version control system

If you have not set up a local development environment, you will need to do so before attempting this tutorial. To set up your local development environment, please consult the [[J4.x:Setting_Up_Your_Local_Environment|Local Environment Guide]].

== Migrating from Joomla 3.x ==

For the majority of cases, migrating from Joomla 3.x to 4.x is a straightforward process. Most of the changes needed are naming/namespacing changes and moving files around. This author intends to create a migration guide once this tutorial is complete, which will be linked here.

== Contributors ==
* [[User:Ribafs|Ribafs]] (Authored Joomla 3.x version)
* [[User:Kevinkabatra | Kevin Kabatra]] (Authored Joomla 3.x version)
* [[User:GregJPreece | Greg J Preece]] (Rewriting 3.x guide for 4.x)

<div class="row">
<div class="large-6 columns">{{Basic button|
S:MyLanguage/J4.x:Developing_an_MVC_Component/Developing_a_Basic_Component|Next: Developing a Basic Component|class=expand}}</div>
</div>

J4.x:Developing an MVC Component

2020-12-12T21:28:32Z

GregJPreece:

{{Joomla version|version=4.x|comment=>Tutorial}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Developing an MVC Component for Joomla 4.x}}
{{-}}

This is intended to be a multiple-article series of tutorials on how to develop a Model-View-Controller [[S:MyLanguage/Component|Component]] for Joomla! Version 4.x.

==Under Construction==

This section of the documentation is currently under heavy work, rewriting the Joomla 3 tutorial to be up-to-date. Joomla 4 is also still in the beta stage at the time of writing. While the information here should remain accurate, please be aware that pages will be missing and details may change until this notice is removed.

As per the [[JDOC:Page_Translation_Explained|Page Translation Guide]], translation tagging will not be added to this tutorial until it is complete and the text is stabilised.

<noinclude><div class="row">
<div class="large-4 columns">{{Basic button|<translate>
S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Let's start with the introduction</translate>|class=expand success}}
</div></div></noinclude>

<noinclude>
[[Category:Joomla!_4.x]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Joomla! 4.0{{#translation:}}]]
</noinclude>

JDOC talk:Joomla 4 Tutorials Project

2020-01-21T17:21:47Z

GregJPreece:

[[User:GregJPreece|GregJPreece]] ([[User talk:GregJPreece|talk]]) 21:01, 3 January 2020 (CST) MVC Component Tutorial

I've been considering rewriting the component tutorial for Joomla 3.x, as many elements of it need modernising, and I really don't like the way it still uses legacy class names. If J4 is on the way and needs a similar tutorial, it seems sensible to start there.

---

Yes, please do. I’ve been holding off working my way through it as it seamed dated to a degree.

If you want a reviewer for the changes, I’d be up for it.

---

Cool, thank you. I'll get started soon. My first component is making its way into the JED right now, so I'll be working on J4 compatibility for that in the next release. I'll write the docs here as I go.

JDOC talk:Joomla 4 Tutorials Project

2020-01-04T03:01:13Z

GregJPreece: Created page with "~~~~ MVC Component Tutorial I've been considering rewriting the component tutorial for Joomla 3.x, as many elements of it need modernising, and I really don't like the way it..."

J3.x:Using the JToolbar class in the frontend

2019-12-30T22:13:37Z

GregJPreece:

{{RightTOC}}

<translate>
In the Joomla administrator panel a common toolbar system is provided to present common action items to the user, such as deleting records, publishing items, etc. This toolbar can also be used in the front-end, for presenting lists to the user, but some code will need to be manually brought into the front-end context that is not automatically provided there.
</translate>

<translate>
There are several advantages to doing this:
</translate>

<translate>
* Much of the code for creating and rendering the toolbar will still be provided by the Joomla framework, reducing the amount of code you have to write
* From a UI coding and theming perspective, code rendered by the Joomla framework is guaranteed to be compatible and theme-capable
* From a user perspective, you are providing a consistent experience that they recognise and can utilise immediately
</translate>

<translate>
== How are toolbars rendered in the back-end? ==
</translate>

<translate>
Two classes are used primarily to render a toolbar into the UI:
</translate>

<translate>
* <code lang="php">[https://github.com/joomla/joomla-cms/blob/staging/libraries/src/Toolbar/Toolbar.php Joomla\CMS\Toolbar\Toolbar]</code>, which configures and renders the toolbar
* <code lang="php">[https://github.com/joomla/joomla-cms/blob/staging/libraries/src/Toolbar/ToolbarHelper.php Joomla\CMS\Toolbar\ToolbarHelper]</code>, which greatly simplifies the configuration of a Toolbar object, and will be the entity you generally interact with when creating toolbars.
</translate>

<translate>
In the back-end layout, there is a module called <code>mod_toolbar</code>, and an associated page location called <code>toolbar</code> into which a page's toolbar module is rendered:
</translate>

<source lang="php">$toolbar = JToolbar::getInstance('toolbar')->render('toolbar');</source>

<translate>
== What work is needed in the front-end to support toolbars? ==
</translate>

<translate>
In the frontend we '''don't have''':
</translate>

<translate>
* A module that renders the toolbar
* A module position "toolbar" in the template
* Styling for the Toolbar and its components
</translate>

<translate>
In order to use a Toolbar object in the front-end, we will need to replicate these pieces of functionality, mostly by stealing them wholesale from the back-end!
</translate>

<translate>
=== Step 1: Defining a Toolbar in your view ===
</translate>

<translate>
In your view file, use the <code>ToolbarHelper</code> class to create a function that generates and renders your toolbar. You'll call this method from the view to put your toolbar in place.
</translate>

<source lang="php">
use Joomla\CMS\Language\Text;
use Joomla\CMS\MVC\View\HtmlView;
use Joomla\CMS\Toolbar\ToolbarHelper;
use Joomla\CMS\Toolbar\Toolbar;

class MyExtensionViewMyView extends HtmlView {

// ...

protected function renderToolbar(): string {
$title = Text::_('COM_MYEXTENSION_SOME_TITLE');

ToolbarHelper::title($title);
ToolbarHelper::addNew('youritem.add', 'COM_MYEXTENSION_BUTTON_CODE_NEW');
ToolbarHelper::back()

return Toolbar::getInstance()->render();
}

}
</source>

<translate>
As you can see, we are using the <code>ToolbarHelper</code> class to add a title to the bar, a "new item" button that will call the <code>youritem.add</code> action when clicked, and a back button. The <code>ToolbarHelper</code> has many assistance methods for different actions, such as handling list items, rendering a preferences link, and so on. To see the full list of available methods, see [https://github.com/joomla/joomla-cms/blob/staging/libraries/src/Toolbar/ToolbarHelper.php ToolbarHelper's source code].
</translate>

<translate>
Then, at the location in your view template that you wish the toolbar to appear:
</translate>

<source lang="php">
<?= $this->renderToolbar(); ?>
</source>

<translate>
This will render your toolbar out to the page. However, it will look pretty awful at present, because we have not yet brought in the necessary CSS to style it.
</translate>

<translate>
=== Step 2: Including styling for the Toolbar ===
</translate>

<translate>
The styles required for the toolbar are part of the standard Isis control panel theme, and can be generated easily via Less. Below is an extract of that CSS code, corrected for use in the front-end. Create a file called <code>toolbar.css</code> in an appropriate place within your extension and add this code into it.
</translate>

<div class="mw-highlight mw-collapsible mw-collapsed">
<div style="font-weight:bold;padding:1rem;">Styling code for the Toolbar, taken from the Isis template. Click to expand.</div>
<div class="mw-collapsible-content">
<source lang="css">
/*
* Generated by LESS from the standard Isis administrator theme
* Some styles related to colour have been removed, to prevent
* issues with the user's front-end theme
*/

/* Subhead */
.subhead {
color: #0C192E;
text-shadow: 0 1px 0 #FFF;
margin-bottom: 10px;
min-height: 51px;
}
.subhead-collapse {
margin-bottom: 19px;
}
.subhead-collapse.collapse {
height: auto;
overflow: visible;
}
.btn-toolbar {
margin-bottom: 5px;
}
.btn-toolbar .btn-wrapper {
display: inline-block;
margin: 0 0 8px 5px;
}
.subhead-fixed {
position: fixed;
width: 100%;
top: 30px;
z-index: 100;
}
@media (max-width: 767px) {
/* Fix ios scrolling inside bootstrap modals */
body {
-webkit-overflow-scrolling: touch;
}
.subhead {
margin-left: -20px;
margin-right: -20px;
padding-left: 10px;
padding-right: 10px;
}
}
.subhead h1 {
font-size: 17px;
font-weight: normal;
margin-left: 10px;
margin-top: 6px;
}
/* Toolbar */
#toolbar {
margin-bottom: 2px;
margin-top: 12px;
}
#toolbar .btn {
line-height: 24px;
margin-right: 4px;
padding: 0 10px;
}
#toolbar .btn-success {
min-width: 148px;
}
#toolbar .btn-primary [class^="icon-"],
#toolbar .btn-warning [class^="icon-"],
#toolbar .btn-danger [class^="icon-"],
#toolbar .btn-success [class^="icon-"],
#toolbar .btn-info [class^="icon-"],
#toolbar .btn-inverse [class^="icon-"],
#toolbar .btn-primary [class*=" icon-"],
#toolbar .btn-warning [class*=" icon-"],
#toolbar .btn-danger [class*=" icon-"],
#toolbar .btn-success [class*=" icon-"],
#toolbar .btn-info [class*=" icon-"],
#toolbar .btn-inverse [class*=" icon-"] {
background-color: transparent;
border-right: 0;
border-left: 0;
width: 16px;
margin-left: 0;
margin-right: 0;
}
#toolbar #toolbar-options,
#toolbar #toolbar-help {
float: right;
}
#toolbar [class^="icon-"],
#toolbar [class*=" icon-"] {
background-color: #e6e6e6;
border-radius: 3px 0 0 3px;
border-right: 1px solid #b3b3b3;
height: auto;
line-height: inherit;
margin: 0 6px 0 -10px;
opacity: 1;
text-shadow: none;
width: 28px;
z-index: -1;
}
#toolbar iframe .btn-group .btn {
margin-left: -1px !important;
}
html[dir=rtl] #toolbar #toolbar-options,
html[dir=rtl] #toolbar #toolbar-help {
float: left;
}
@media (max-width: 767px) {
.subhead-fixed {
position: static;
width: auto;
}
}
/* Subhead (toolbar) Collapse Button */
.btn-subhead {
display: none;
}
@media (min-width: 480px) {
#filter-bar {
height: 29px;
}
}
@media (max-width: 479px) {
.navbar .btn {
margin: 0;
}
.btn-subhead {
display: block;
margin: 10px 0;
}
.subhead-collapse.collapse {
height: 0;
overflow: hidden;
}
.btn-toolbar .btn-wrapper {
display: block;
margin: 0px 10px 5px 10px;
}
.btn-toolbar .btn-wrapper .btn {
width: 100% !important;
}
.subhead {
background: none repeat scroll 0 0 transparent;
border-bottom: 0 solid #dedede;
}
#toolbar [class^="icon-"],
#toolbar [class*=" icon-"] {
background-color: transparent;
border-right: medium none;
width: 10px;
}
}
@media (max-width: 319px) {
.view-login .navbar-fixed-bottom {
display: none;
}
}
</source>
</div>
</div>

<translate>
With this code saved in the file, register the stylesheet inside your view file's <code>display()</code> method, during document setup:
</translate>

<source lang="php">
use Joomla\CMS\Factory;
use Joomla\CMS\Uri\Uri;

class MyExtensionViewMyView extends HtmlView {

// ...

function display($tpl = null) {

// ...

$document = Factory::getDocument();
$document->addStyleSheet(Uri::root() . '/components/com_myextension/path/to/your/toolbar.css');

}

}
</source>

<translate>
Your toolbar should now be styled appropriately.
</translate>

<translate>
== Restricting actions by permission ==
</translate>

<translate>
It's usually a good idea to have your toolbar buttons restricted according to the active user's permissions. This can be easily done using the <code>ContentHelper</code> class:
</translate>

<source lang="php">
use Joomla\CMS\Helper\ContentHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\MVC\View\HtmlView;
use Joomla\CMS\Toolbar\ToolbarHelper;
use Joomla\CMS\Toolbar\Toolbar;

class MyExtensionViewMyView extends HtmlView {

// ...

protected function renderToolbar(): string {
$this->canDo = ContentHelper::getActions('com_myextension');
$title = Text::_('COM_MYEXTENSION_SOME_TITLE');

ToolbarHelper::title($title);

if ($this->canDo->get('core.create')) {
ToolbarHelper::addNew('youritem.add', 'COM_MYEXTENSION_BUTTON_CODE_NEW');
}

ToolbarHelper::back();
}

}
</source>

<translate>
== Handling List Actions ==
</translate>

<translate>
Depending on the methods and actions you enable in your Toolbar, you may need to emulate a few other elements of the back-end form handling code. As list-handling is such a common use case, this section will show how to integrate those tasks into your front-end view.
</translate>

<translate>
This section will not describe general list handling - using the <code>ListModel</code> class, generating a list query, pagination, etc - as those are documented elsewhere.
</translate>

<translate>
=== Step 1: Enabling the list functionality ===
</translate>

<translate>
In the <code>display()</code> method of your view file, use Joomla's <code>HtmlHelper</code> class to load the appropriate Javascript to handle lists.
</translate>

<source lang="php">
use Joomla\CMS\HTML\HTMLHelper;

class MyExtensionViewMyView extends HtmlView {

// ...

function display($tpl = null) {

// ...

HTMLHelper::_('formbehavior.chosen', 'select');

}

}
</source>

<translate>
This will enable the Javascript and other front-end assets that are needed for list functionality in the toolbar.
</translate>

<translate>
=== Step 2: Defining the Toolbar ===
</translate>

<translate>
You'll need to define the buttons that you wish to appear, and the actions they trigger. The most common options to use with a list are obviously add, edit and delete:
</translate>

<source lang="php">
use Joomla\CMS\Helper\ContentHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\MVC\View\HtmlView;
use Joomla\CMS\Toolbar\ToolbarHelper;
use Joomla\CMS\Toolbar\Toolbar;

class MyExtensionViewMyView extends HtmlView {

// ...

protected function renderToolbar(): string {
$this->canDo = ContentHelper::getActions('com_myextension');
$title = Text::_('COM_MYEXTENSION_SOME_TITLE');

ToolbarHelper::title($title);

if ($this->canDo->get('core.create')) {
ToolbarHelper::addNew('youritem.add', 'COM_MYEXTENSION_BUTTON_CODE_NEW');
}

if ($this->canDo->get('core.edit') || $this->canDo->get('core.edit.own')) {
ToolbarHelper::editList('youritem.edit', 'COM_MYEXTENSION_BUTTON_CODE_EDIT');
}

if ($this->canDo->get('core.delete')) {
ToolbarHelper::deleteList('COM_MYEXTENSION_DELETE_CONFIRM', 'youritem.delete', 'COM_MYEXTENSION_BUTTON_CODE_DELETE');
}
}

}
</source>

<translate>
The implementation of these actions - <code>youritem.edit</code> and so on - is left as an exercise for the reader, as the code for those is very dependent on your extension's implementation and not really relevant to the toolbar. However, if you're unsure how to proceed, here are a few tips:
</translate>

<translate>
* To check for an item being edited and retrieve it on your create/edit page, use <code>$this->get('Item');</code> in your view's <code>display()</code> method
* To retrieve the list of items being selecetd when processing an action such as "delete", use <code>$this->input->get('cid', array(), 'array');</code> in your controller
* For working examples of how to handle group deletes, see the control panel's [https://github.com/joomla/joomla-cms/blob/staging/libraries/src/MVC/Controller/AdminController.php AdminController] and [https://github.com/joomla/joomla-cms/blob/staging/libraries/src/MVC/Model/AdminModel.php AdminModel] classes
</translate>

<translate>
=== Step 3: Rendering the list ===
</translate>

<translate>
At the top of your list in your view template, you will need to wrap the list in a form, and add a few hidden fields as shown below. These hidden fields will be set by the Toolbar's Javascript as actions and items are selected.
</translate>

<source lang="html">
<form action="<?= Route::_('index.php?option=com_myextension&view=thisview') ?>" method="post" id="adminForm" name="adminForm">
<?= HTMLHelper::_('form.token'); ?>
<input type="hidden" name="option" value="com_myextension">
<input type="hidden" name="task" value="" />
<input type="hidden" name="boxchecked" value="0" />


</source>

<translate>
Naturally, you will want to add a checkbox to each row of your item list, so that they can be selected and acted on by the toolbar. This checkbox can be easily rendered using the <code>HtmlHelper</code> class:
</translate>

<source lang="php">
<?php foreach ($this->items as $i => $row) : ?>
<tr>
<td>
<?= HTMLHelper::_('grid.id', $i, $row->id); ?>
</td>



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

<translate>
If you wish to add a "check all" checkbox to the column header, this can also be provided by <code>HtmlHelper</code>:
</translate>

<source lang="html">
<thead>
<tr>
<th width="2%">
<?= HTMLHelper::_('grid.checkall'); ?>
</th>



</tr>
</thead>
</source>

== Routing and SEF URLs ==
{{underconstruction}}

== Custom frontend buttons ==
{{underconstruction}}

[[Category:Development]]
[[Category:Joomla!_3.x]]
[[Category:Component_Development]]
[[Category:Extension_development]]

How to use JDate

2019-10-24T15:28:07Z

GregJPreece: Fleshing out missing usage info about Date object, removing old-style class aliases from code examples.

<noinclude><languages /></noinclude>

<translate>
== Introduction == 
Joomla's Date class is a helper class, extended from PHP's DateTime class, which allows developers to handle date formatting more efficiently. The class allows developers to format dates for readable strings, MySQL interaction, UNIX timestamp calculation, and also provides helper methods for working in different timezones.
</translate>

<translate>
'''Regarding the "JDate" class name:''' This page has been updated to utilise namespaced class names. `JDate`, `JApplication` and other similarly named classes you will see throughout the Joomla documentation are actually class aliases, maintained for legacy reasons. It is recommended to use namespaced access to Joomla classes, which will improve your development experience by providing better code hints and checks in your editor, leading to fewer errors.

You can view the full list of aliased classes [https://github.com/joomla/joomla-cms/blob/staging/libraries/classmap.php in this file inside the Joomla codebase].
</translate>

<translate>
== Creating a Date Instance == 
All of the date helper methods require an instance of the Date class. To begin, you must create one. A Date object may be created in two ways. One is the typical native method of simply creating a new instance:
</translate>

<source lang="php">
use Joomla\CMS\Date\Date;

$date = new Date(); // Creates a new Date object equal to the current time.
</source>

<translate>

You may also create an instance using the static method defined in Date:
</translate>

<source lang="php">
use Joomla\CMS\Date\Date;

$date = Date::getInstance(); // Alias of 'new Date();'
</source>

<translate>

There is no difference between these methods, as Date::getInstance simply creates a new instance of Date exactly like the first method shown.


Alternatively, you may also retrieve the current date (as a Date object) from the Application object, by using:
</translate>
<source lang="php">
use Joomla\CMS\Factory;

$date = Factory::getDate();
</source>

<translate>
== Arguments == 


The Date constructor (and getInstance static method) accepts two optional parameters: A date string to format, and a timezone. Not passing a date string will create a Date object with the current date and time, while not passing a timezone will allow the Date object to use the default timezone set.
</translate>

<translate>

The first argument, if used, should be a string that can be parsed using PHP's native DateTime constructor. E.g:
</translate>
<source lang="php">
use Joomla\CMS\Date\Date;

$currentTime = new Date('now'); // Current date and time
$tomorrowTime = new Date('now +1 day'); // Current date and time, + 1 day.
$plus1MonthTime = new Date('now +1 month'); // Current date and time, + 1 month.
$plus1YearTime = new Date('now +1 year'); // Current date and time, + 1 year.
$plus1YearAnd1MonthTime = new Date('now +1 year +1 month'); // Current date and time, + 1 year and 1 month.
$plusTimeToTime = new Date('now +1 hour +30 minutes +3 seconds'); // Current date and time, + 1 hour, 30 minutes and 3 seconds
$plusTimeToTime = new Date('now -1 hour +30 minutes +3 seconds'); // Current date and time, + 1 hour, 30 minutes and 3 seconds
$combinedTimeToTime = new Date('now -1 hour -30 minutes 23 seconds'); // Current date and time, - 1 hour, +30 minutes and +23 seconds

$date = new Date('2012-12-1 15:20:00'); // 3:20 PM, December 1st, 2012
</source>

<translate>
A Unix timestamp (in seconds) can also be passed as the first argument, in which case it will be internally uplifted into a date. If a timezone has been specified as the second argument to the constructor, it will be converted to that timezone.
</translate>

<translate>
== Outputting Dates == 

One note of caution when outputting Date objects in a user context: do not simply print them to the screen. The Date object's toString() method simply calls its parent's format() method, without consideration for timezones or localized date formatting. This will not result in a good user experience, and will lead to inconsistencies between the formatting in your extension, and elsewhere in Joomla. Instead, you should always output Dates using the methods shown below.</translate>

<translate>
=== Common Date Formats ===

A number of date formats are predefined in Joomla as part of the base language packs. This is beneficial because it means date formats can be easily internationalised. A sample of the available format strings is below, from the en-GB language pack. It is highly recommended to utilise these formatting strings when outputting dates, so that your dates will be automatically re-formatted according to a user's locale. They can be retrieved in the same way as any language string (see below for examples).
</translate>

<source lang="ini">
DATE_FORMAT_LC="l, d F Y"
DATE_FORMAT_LC1="l, d F Y"
DATE_FORMAT_LC2="l, d F Y H:i"
DATE_FORMAT_LC3="d F Y"
DATE_FORMAT_LC4="Y-m-d"
DATE_FORMAT_LC5="Y-m-d H:i"
DATE_FORMAT_LC6="Y-m-d H:i:s"
DATE_FORMAT_JS1="y-m-d"
DATE_FORMAT_CALENDAR_DATE="%Y-%m-%d"
DATE_FORMAT_CALENDAR_DATETIME="%Y-%m-%d %H:%M:%S"
DATE_FORMAT_FILTER_DATE="Y-m-d"
DATE_FORMAT_FILTER_DATETIME="Y-m-d H:i:s"
</source>

<translate>
=== The HtmlHelper Method (Recommended) ===

As with many common output items, the HtmlHelper class is here to...help! HtmlHelper's date() method will take any date-time string that the Date constructor would accept, along with a formatting string, and output the date appropriately for the current user's timezone settings. As such, this is the recommended method for outputting dates for the user.
</translate>

<source lang="php">
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;

$myDateString = '2012-12-1 15:20:00';
echo HtmlHelper::date($myDateString, Text::_('DATE_FORMAT_FILTER_DATETIME'));
</source>

<translate>
=== The Date Object's format() Method ===

Another option is to format the Date manually. If this method is used, you will have to also manually retrieve and set the user's timezone. This method is more useful for formatting dates outside of the user interface, such as in system logs or API calls.
</translate>

<source lang="php">
use Joomla\CMS\Language\Text;
use Joomla\CMS\Date\Date;
use Joomla\CMS\Factory;

$myDateString = '2012-12-1 15:20:00';
$timezone = Factory::getUser()->getTimezone();

$date = new Date($myDateString);
$date->setTimezone($timezone);
echo $date->format(Text::_('DATE_FORMAT_FILTER_DATETIME'));
</source>

<translate>
== Other Useful Code Examples ==
</translate>

<translate>
=== Quickly Outputting the Current Time ===
</translate>

<translate>

There are two easy ways of doing this.
# The HtmlHelper's date() method, if no date value is provided, will default to the current time.
# Factory::getDate() gets the current date as a Date object, which we can then format.
</translate>

<source lang="php">
use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;

// These two are functionally equivalent
echo HtmlHelper::date('now', Text::_('DATE_FORMAT_FILTER_DATETIME'));

$timezone = Factory::getUser()->getTimezone();
echo Factory::getDate()->setTimezone($timezone)->format(Text::_('DATE_FORMAT_FILTER_DATETIME'));
</source>

<translate>
=== Adding and Subtracting from Dates ===

Because the Joomla Date object extends the PHP DateTime object, it provides methods for adding and subtracting from dates. The easiest of these methods to use is the modify() method, which accepts any relative modification string that the PHP [https://www.php.net/manual/en/function.strtotime.php strtotime]() method would accept. For example:
</translate>

<source lang="php">
use Joomla\CMS\Date\Date;

$date = new Date('2012-12-1 15:20:00');
$date->modify('+1 year');
echo $date->toSQL(); // 2013-12-01 15:20:00
</source>

<translate>
There are also separate add() and sub() methods, for adding or subtracting time from a date object respectively. These accept PHP-standard [https://www.php.net/manual/en/class.dateinterval.php DateInterval] objects:
</translate>

<source lang="php">
use Joomla\CMS\Date\Date;

$interval = new \DateInterval('P1Y1D'); // Interval represents 1 year and 1 day

$date1 = new Date('2012-12-1 15:20:00');
$date1->add($interval);
echo $date1->toSQL(); // 2013-12-02 15:20:00

$date2 = new Date('2012-12-1 15:20:00');
$date2->sub($interval);
echo $date2->toSQL(); // 2011-11-30 15:20:00
</source>

<translate>
=== Outputting Dates in ISO 8601 Format ===
</translate>

<source lang="php">
$date = new Date('2012-12-1 15:20:00');
$date->toISO8601(); // 20121201T152000Z
</source>

<translate>
=== Outputting Dates in RFC 822 Format ===
</translate>

<source lang="php">
$date = new Date('2012-12-1 15:20:00');
$date->toRFC822(); // Sat, 01 Dec 2012 15:20:00 +0000
</source>

<translate>
=== Outputting Dates in SQL Date-Time Format ===
</translate>

<source lang="php">
$date = new Date('20121201T152000Z');
$date->toSQL(); // 2012-12-01 15:20:00
</source>

<translate>
=== Outputting Dates as Unix Timestamps ===

A Unix timestamp is expressed as the number of seconds that have passed since the Unix Epoch (the first second of Jan 1st 1970).
</translate>

<source lang="php">
$date = new Date('20121201T152000Z');
$date->toSQL(); // 1354375200
</source>

<translate>

[[Category:Development]]
</translate>

J3.x:Developing an MVC Component/Adding verifications

2019-09-24T17:19:30Z

GregJPreece: Noting that Joomla core behaviours need to be specified, or JS will error on load

<noinclude><languages /></noinclude>
{{:J3.1:Developing an MVC Component/<translate>
en</translate>}}
<translate>== Introduction == </translate>
<translate>
This tutorial is part of the [[S:MyLanguage/J3.2:Developing an MVC Component|Developing an MVC Component for Joomla! 3.2]] tutorial. You are encouraged to read the previous parts of the tutorial before reading this.</translate>
<translate>
See [[S:MyLanguage/Form validation|Form validation]] for some more general info on form validation (rules).</translate>

<translate> You can watch a video associated with this step at [https://youtu.be/xzYRI3R--CE Step 11, adding verifications]. This and subsequent videos are recorded in HD; click on the YouTube settings wheel to vieiw at best resolution.</translate>

{{#widget:YouTube|id=xzYRI3R--CE}}

<translate>== Verifying the form (client side) == </translate>
<translate>

See [[S:MyLanguage/Client-side_form_validation|Client-side form validation]] for further tutorial information relating to client-side verification.</translate>
<translate>
Forms can be verified on the client side using javascript code.</translate>
<translate>
In the ''[[#admin/views/helloworld/tmpl/edit.php|admin/views/helloworld/tmpl/edit.php]]'' file, put these lines:</translate>
<span id="admin/views/helloworld/tmpl/edit.php">
<tt>admin/views/helloworld/tmpl/edit.php</tt>
<source lang="php" highlight="15">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access
defined('_JEXEC') or die('Restricted access');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld&layout=edit&id=' . (int) $this->item->id); ?>"
method="post" name="adminForm" id="adminForm" class="form-validate">
<div class="form-horizontal">
<fieldset class="adminform">
<legend><?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_DETAILS'); ?></legend>
<div class="row-fluid">
<div class="span6">
<?php foreach ($this->form->getFieldset() as $field): ?>
<div class="control-group">
<div class="control-label"><?php echo $field->label; ?></div>
<div class="controls"><?php echo $field->input; ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
</fieldset>
</div>
<input type="hidden" name="task" value="helloworld.edit" />
<?php echo JHtml::_('form.token'); ?>
</form>

</source>
</span>

<translate>
You may have noted that the html form contained in the ''[[#admin/views/helloworld/tmpl/edit.php|admin/views/helloworld/tmpl/edit.php]]'' file now has the ''form-validate'' css class.</translate>

<translate>
Modify the <tt>admin/models/forms/helloworld.xml</tt> file to indicate that the ''greeting'' field has to be verified:</translate>

<span id="admin/models/forms/helloworld.xml">
<source lang="xml" highlight="2-4,16-18">
<?xml version="1.0" encoding="utf-8"?>
<form
addrulepath="/administrator/components/com_helloworld/models/rules"
>
<fieldset>
<field
name="id"
type="hidden"
/>
<field
name="greeting"
type="text"
label="COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_GREETING_DESC"
size="40"
class="inputbox validate-greeting"
validate="greeting"
required="true"
default=""
/>
</fieldset>
</form>
</source>
</span>

<translate>
Note for the moment that the css class is now ''"inputbox validate-greeting"'' and that the attribute ''required'' is set to ''true''. It means that this field is required and has to be verified by a handler of the form validator framework of Joomla.</translate>

<translate>
With your favourite file manager and editor put a file <tt>admin/models/forms/helloworld.js</tt> containing:</translate>

<span id="admin/models/forms/helloworld.js">
<tt>admin/models/forms/helloworld.js</tt>
<source lang="javascript">
jQuery(function() {
document.formvalidator.setHandler('greeting',
function (value) {
regex=/^[^0-9]+$/;
return regex.test(value);
});
});
</source>
</span>

<translate>
It adds a handler to the form validator of Joomla for fields having the ''"validate-greeting"'' css class. Each time the ''greeting'' field is modified, the handler will be executed to verify its validity (no digits).</translate>
<translate>
The final step is to verify the form when the save button is clicked.</translate>
<translate>
With your favourite file manager and editor put a file <tt>admin/views/helloworld/submitbutton.js</tt> containing:</translate>

<span id="admin/views/helloworld/submitbutton.js">
<tt>admin/views/helloworld/submitbutton.js</tt>
<source lang="javascript">
Joomla.submitbutton = function(task)
{
if (task == '')
{
return false;
}
else
{
var isValid=true;
var action = task.split('.');
if (action[1] != 'cancel' && action[1] != 'close')
{
var forms = jQuery('form.form-validate');
for (var i = 0; i < forms.length; i++)
{
if (!document.formvalidator.isValid(forms[i]))
{
isValid = false;
break;
}
}
}

if (isValid)
{
Joomla.submitform(task);
return true;
}
else
{
alert(Joomla.JText._('COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE',
'Some values are unacceptable'));
return false;
}
}
}
</source>
</span>

<translate>
This function will verify that all forms which have the ''"form-validate"'' css class are valid. Note that it will display an alert message translated by the Joomla framework.</translate>

<translate>
The ''HelloWorldViewHelloWorld'' view class has to be modified to use these javascript files:</translate>

<span id="admin/views/helloworld/view.html.php">
<tt>admin/views/helloworld/view.html.php</tt>
<source lang="php" highlight="39,100-101,107-110">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
* HelloWorld View
*
* @since 0.0.1
*/
class HelloWorldViewHelloWorld extends JViewLegacy
{
/**
* View form
*
* @var form
*/
protected $form = null;

/**
* Display the Hello World view
*
* @param string $tpl The name of the template file to parse; automatically searches through the template paths.
*
* @return void
*/
public function display($tpl = null)
{
// Get the Data
$this->form = $this->get('Form');
$this->item = $this->get('Item');
$this->script = $this->get('Script');

// Check for errors.
if (count($errors = $this->get('Errors')))
{
JError::raiseError(500, implode('<br />', $errors));

return false;
}

// Set the toolbar
$this->addToolBar();

// Display the template
parent::display($tpl);

// Set the document
$this->setDocument();
}

/**
* Add the page title and toolbar.
*
* @return void
*
* @since 1.6
*/
protected function addToolBar()
{
$input = JFactory::getApplication()->input;

// Hide Joomla Administrator Main menu
$input->set('hidemainmenu', true);

$isNew = ($this->item->id == 0);

if ($isNew)
{
$title = JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW');
}
else
{
$title = JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT');
}

JToolbarHelper::title($title, 'helloworld');
JToolbarHelper::save('helloworld.save');
JToolbarHelper::cancel(
'helloworld.cancel',
$isNew ? 'JTOOLBAR_CANCEL' : 'JTOOLBAR_CLOSE'
);
}
/**
* Method to set up the document properties
*
* @return void
*/
protected function setDocument()
{

JHtml::_('behavior.framework');
JHtml::_('behavior.formvalidator');

$isNew = ($this->item->id < 1);
$document = JFactory::getDocument();
$document->setTitle($isNew ? JText::_('COM_HELLOWORLD_HELLOWORLD_CREATING') :
JText::_('COM_HELLOWORLD_HELLOWORLD_EDITING'));
$document->addScript(JURI::root() . $this->script);
$document->addScript(JURI::root() . "/administrator/components/com_helloworld"
. "/views/helloworld/submitbutton.js");
JText::script('COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE');
}
}

</source>
</span>

<translate>
This view now:
* verifies if the model has no error;
* adds two javascript files;
* injects javascript translation using the Joomla <tt>JText::script</tt> function.</translate>

You will also notice our two lines adding additional behaviors when injecting our scripts. By default, Joomla injects the Javascript we specify into the page <i>before</i> its own global Javascript libraries, such as jQuery and Joomla Core. As our Javascript code directly utilises the <tt>Joomla</tt> object, loading it onto the page before the global Javascript libraries will result in immediate failure, and the form validation will not run.

By specifying these two behaviors via the JHtml helper class prior to injecting our own Javascript, we ensure they are loaded first on the page, and our code will execute correctly. You would normally see JHtml used inside a template, but as our Javascript is added for each child template, it's better to specify the external dependency here.

<translate>
The final step is to implement a <tt>getScript</tt> function in the ''HelloWorldModelHelloWorld'' model:</translate>

<span id="admin/models/helloworld.php">
<tt>admin/models/helloworld.php</tt>
<source lang="php" highlight="65-73">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
* HelloWorld Model
*
* @since 0.0.1
*/
class HelloWorldModelHelloWorld extends JModelAdmin
{
/**
* Method to get a table object, load it if necessary.
*
* @param string $type The table name. Optional.
* @param string $prefix The class prefix. Optional.
* @param array $config Configuration array for model. Optional.
*
* @return JTable A JTable object
*
* @since 1.6
*/
public function getTable($type = 'HelloWorld', $prefix = 'HelloWorldTable', $config = array())
{
return JTable::getInstance($type, $prefix, $config);
}

/**
* Method to get the record form.
*
* @param array $data Data for the form.
* @param boolean $loadData True if the form is to load its own data (default case), false if not.
*
* @return mixed A JForm object on success, false on failure
*
* @since 1.6
*/
public function getForm($data = array(), $loadData = true)
{
// Get the form.
$form = $this->loadForm(
'com_helloworld.helloworld',
'helloworld',
array(
'control' => 'jform',
'load_data' => $loadData
)
);

if (empty($form))
{
return false;
}

return $form;
}
/**
* Method to get the script that have to be included on the form
*
* @return string Script files
*/
public function getScript()
{
return 'administrator/components/com_helloworld/models/forms/helloworld.js';
}
/**
* Method to get the data that should be injected in the form.
*
* @return mixed The data for the form.
*
* @since 1.6
*/
protected function loadFormData()
{
// Check the session for previously entered form data.
$data = JFactory::getApplication()->getUserState(
'com_helloworld.edit.helloworld.data',
array()
);

if (empty($data))
{
$data = $this->getItem();
}

return $data;
}
}

</source>
</span>

<translate>== Verifying the form (server side) == </translate>
<translate>

See [[S:MyLanguage/Server-side_form_validation|Server-side form validation]] for further tutorial information relating to server-side verification.</translate>
<translate>
Verifying the form on the server side is done by inheritance of <tt>JControllerForm</tt> class. We have specified in the ''[[#admin/models/forms/helloworld.xml|admin/models/forms/helloworld.xml]]'' file that the validate server function will use a <tt>greeting.php</tt> file.</translate>

<translate>
With your favourite file manager and editor, put a <tt>admin/models/rules/greeting.php</tt> file containing:</translate>

<span id="admin/models/rules/greeting.php">
<tt>admin/models/rules/greeting.php</tt>
<source lang="php">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
* Form Rule class for the Joomla Framework.
*/
class JFormRuleGreeting extends JFormRule
{
/**
* The regular expression.
*
* @access protected
* @var string
* @since 2.5
*/
protected $regex = '^[^0-9]+$';
}

</source>
</span>

<translate>
Note there is no function here - this is inherited from JFormRule (located in: libraries/joomla/form /rule.php). All that is needed is the regex string to test against.</translate>

<translate>== Packaging the component == </translate>
<translate>
Content 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.</translate>
* ''[[#helloworld.xml|helloworld.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/helloworld.php|site/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/controller.php|site/controller.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/views/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/views/helloworld/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/views/helloworld/view.html.php|site/views/helloworld/view.html.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/views/helloworld/tmpl/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#site/views/helloworld/tmpl/default.xml|site/views/helloworld/tmpl/default.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/views/helloworld/tmpl/default.php|site/views/helloworld/tmpl/default.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/models/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#site/models/helloworld.php|site/models/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/language/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/language/en-GB/index.html]]''
* [[S:MyLanguage/J3.x:Developing an MVC Component/Adding language management#site.2Flanguage.2Fen-GB.2Fen-GB.com_helloworld.ini|site/language/en-GB/en-GB.com_helloworld.ini]]
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_decorations_to_the_backend#admin/helloworld.php|admin/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Basic_backend#admin/controller.php|admin/controller.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/sql/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/sql/install.mysql.utf8.sql|admin/sql/install.mysql.utf8.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/sql/uninstall.mysql.utf8.sql|admin/sql/uninstall.mysql.utf8.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/sql/updates/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/sql/updates/mysql/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#admin/sql/updates/mysql/0.0.1.sql|admin/sql/updates/mysql/0.0.1.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/sql/install.mysql.utf8.sql|admin/sql/updates/mysql/0.0.6.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/models/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/models/fields/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/models/fields/helloworld.php|admin/models/fields/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_decorations_to_the_backend#admin/models/helloworlds.php|admin/models/helloworlds.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/models/helloworld.php|admin/models/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding decorations to the backend#admin/models/forms/filter_helloworlds.xml|admin/models/forms/filter_helloworlds.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/models/forms/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/models/forms/helloworld.js|admin/models/forms/helloworld.js]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/models/forms/helloworld.xml|admin/models/forms/helloworld.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/models/rules/greeting.php|admin/models/rules/greeting.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/models/rules/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_backend_actions#admin/controllers/helloworld.php|admin/controllers/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_backend_actions#admin/controllers/helloworlds.php|admin/controllers/helloworlds.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/controllers/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworld/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/views/helloworld/view.html.php|admin/views/helloworld/view.html.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworld/tmpl/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/views/helloworld/tmpl/edit.php|admin/views/helloworld/tmpl/edit.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/views/helloworld/submitbutton.js|admin/views/helloworld/submitbutton.js]]''
* ''[[J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworlds/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_decorations_to_the_backend#admin/views/helloworlds/view.html.php|admin/views/helloworlds/view.html.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworlds/tmpl/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_decorations_to_the_backend#admin/views/helloworlds/tmpl/default.php|admin/views/helloworlds/tmpl/default.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/tables/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/tables/helloworld.php|admin/tables/helloworld.php]]''
* ''[[#admin/language/index.html|admin/language/index.html]]''
* ''[[#admin/language/en-GB/index.html|admin/language/en-GB/index.html]]''
* ''[[S:MyLanguage/J3.x:Developing an MVC Component/Adding_decorations_to_the_backend#admin.2Flanguage.2Fen-GB.2Fen-GB.com_helloworld.ini|admin/language/en-GB/en-GB.com_helloworld.ini]]''
* ''[[S:MyLanguage/J3.x:Developing an MVC Component/Adding_decorations_to_the_backend#admin.2Flanguage.2Fen-GB.2Fen-GB.com_helloworld.sys.ini|admin/language/en-GB/en-GB.com_helloworld.sys.ini]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|media/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|media/images/index.html]]''
* ''[[S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding_decorations_to_the_backend#Adding_some_icons|media/images/tux-16x16.png]]''
* ''[[S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding_decorations_to_the_backend#Adding_some_icons|media/images/tux-48x48.png]]''

<translate>
Create a compressed file of this directory [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-11-adding-verifications.zip archive] or directly download the archive and install it using the extension manager of Joomla. You can add a menu item of this component using the menu manager in the backend.</translate>

<span id="helloworld.xml">
<tt>helloworld.xml</tt>
<source lang="xml" highlight="13">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.0" method="upgrade">

<name>COM_HELLOWORLD</name>

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

<version>0.0.11</version>

<description>COM_HELLOWORLD_DESCRIPTION</description>

<install> 
<sql>
<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
</sql>
</install>
<uninstall> 
<sql>
<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
</sql>
</uninstall>
<update> 
<schemas>
<schemapath type="mysql">sql/updates/mysql</schemapath>
</schemas>
</update>



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

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

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

<administration>

<menu link='index.php?option=com_helloworld' img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</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>

<folder>views</folder>

<folder>controllers</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>
</languages>
</administration>

</extension>
</source>
</span>

<translate>== Contributors == </translate>
*[[User:cdemko|Christophe Demko]]
*[[User:oaksu|Ozgur Aksu]]
*[[User:Scionescire|Scionescire]]

<div class="row">
<div class="large-6 columns">{{Basic button|<translate>
S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding decorations to the backend|Prev: Adding decorations to the backend</translate>|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|<translate>
S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding categories|Next: Adding categories</translate>|class=expand}}</div>
</div>
__NOTOC__
<noinclude>
<translate>

[[Category:Joomla! 3.x]]
[[Category:Joomla! 3.0]]
[[Category:Joomla! 3.1]]
[[Category:Joomla! 3.2]]
[[Category:Joomla! 3.3]]
[[Category:Joomla! 3.4]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
</translate>
</noinclude>

Form field

2019-08-29T16:14:43Z

GregJPreece: Adding note re: renderField() requirement for showon and others. Translations welcome!

<noinclude><languages /></noinclude>
<onlyinclude>
<translate>== Introduction == </translate>
<translate>
Form fields are fields in a HTML <code><form></code>. Joomla! 2.5 {{JVer|2.5}} and newer supply the JForm class to conveniently and flexibly create forms with a large amount of form fields. Each form field type is a subclass of JFormField.</translate>

<translate>
In addition to being a flexible page creation tool, JFormFields are used by Joomla! to allow [[S:MyLanguage/Administrator (User)|administrators]] to configure Joomla! or its extensions without changing the underlying code. In Joomla! 1.5, this was handled by the now deprecated [[S:MyLanguage/API15:JParameter|JParameter]] and [[S:MyLanguage/API15:JElement|JElement]] classes.</translate>

<translate>
To define form fields in the configuration of an extension, you must include them in a named fieldset, such as <code><fieldset name="basic"></code>, that is within the <code><fields name="params"></code> section of the <code><config></code> element in your [[S:MyLanguage/Manifest files|XML manifest file]].</translate>
</onlyinclude>

<translate>== Form validation == </translate>
{{:Form validation/<translate>
en</translate>}}
<translate>== Standard form field types == </translate>
{{:Standard form field types/<translate>
en</translate>}}
<translate>== Custom form field types == </translate>
<translate>
An [[S:MyLanguage/extension|extension]] can define its own form field types, which can then be used in its own forms or forms created by another extension. See [[S:MyLanguage/Creating a custom form field type|Creating a custom form field type]] for instructions.</translate>
<translate>=== Modal form field types === </translate>
<translate>
If you have a field with a lot of values that don't fit a selection box, you can always make a modal form field that will allow the user to pick an item from a modal page with a table, filtering options, etc. (just like any administrator table, e.g. "Articles").</translate>
<translate>
See [[S:MyLanguage/Creating a modal form field|Creating a modal form field]]</translate>

<translate>== Common attributes == </translate>
<translate>=== Labelclass === </translate>
<translate>
Adding the attribute <code>labelclass</code> adds a CSS class for form field's label. Source:</translate> http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_item_id=28450

<translate>=== Showon === </translate>
<translate>
Adding the attribute <code>showon</code> allows to hide the field based on the value(s) of another field.</translate>

<translate>
Syntax to show the field <tt>bar</tt> only when <tt>foo</tt> is set to "1" and <tt>baz</tt> is set to "1":</translate>

<source lang="php"><field
name="foo"
type="list"
>
<option value="1">JYES</option>
<option value="0">JNO</option>
</field>
<field
name="bar"
type="text"
showon="foo:1"
/></source>

<translate>
To match multiple values one can provide a comma-separated list of values. Like <code>showon="foo:1,2"</code></translate>

<translate>
To combine multiple fields you can use <code>[AND]</code>. Like <code>showon="foo:1[AND]bar:1"</code></translate>

<translate>
Syntax to show the field "bar" only when "foo" is set to "1" and "baz" is set to "1":</translate>

<source lang="php"><field
name="foo"
type="list"
>
<option value="1">JYES</option>
<option value="0">JNO</option>
</field>
<field
name="baz"
type="list"
>
<option value="1">JYES</option>
<option value="0">JNO</option>
</field>
<field
name="bar"
type="text"
showon="foo:1[AND]baz:1"
/></source>

<translate>
To create a choice between multiple fields you can use <tt>[OR]</tt>. Like <tt>showon="foo:1[OR]bar:1"</tt>.</translate>

<translate>
Syntax to show the field "bar" only when "foo" is set to "1" or "baz" is set to "1":</translate>

<source lang="php"><field
name="foo"
type="list"
>
<option value="1">JYES</option>
<option value="0">JNO</option>
</field>
<field
name="baz"
type="list"
>
<option value="1">JYES</option>
<option value="0">JNO</option>
</field>
<field
name="bar"
type="text"
showon="foo:1[OR]baz:1"
/></source>

<translate>
You can also use value does not equal like <tt>showon="field1!:1"</tt>.</translate>

<translate>
Syntax to show the field "bar" only when "foo" is not equal to "1":</translate>

<source lang="php"><field
name="foo"
type="list"
>
<option value="1">JYES</option>
<option value="0">JNO</option>
</field>
<field
name="baz"
type="list"
showon="foo!:1"
>
<option value="1">JYES</option>
<option value="0">JNO</option>
</field>
</source>
<translate>

To show a field when another field (e.g. foo) has been selected (so when that other field is not empty), you can use <tt>showon="foo!:"</tt> (so without a value specified).</translate>

<translate>
This was introduced with PullRequest: https://github.com/joomla/joomla-cms/pull/3379, available starting with Joomla 3.2.4.</translate>

=== Troubleshooting: Attributes not working ===

If you have read an older version of our developer documentation, or took your form display code from an existing extension, you may be experiencing issues with attributes like <code>showon</code> not working at all. In order for some special attributes to function, your fields must be rendered using their <code>renderField()</code> method. For example:

<source lang="php">
<div class="row-fluid">
<div class="span6">
<?php
foreach($this->form->getFieldset() as $field) {
echo $field->renderField();
}
?>
</div>
</div>
</source>

<noinclude>
[[Category:Landing Pages{{#translation:}}]]
[[Category:Form fields{{#translation:}}]]
[[Category:Development{{#translation:}}]]
</noinclude>

J3.x:Developing an MVC Component/Adding backend actions

2019-08-29T15:47:54Z

GregJPreece: Outputting form fields via renderField() ensures that options are correctly/fully parsed

<noinclude><languages /></noinclude>
{{:J3.1:Developing an MVC Component/<translate>
en</translate>}}
<translate>== Introduction == </translate>
<translate>
This tutorial is part of the [[S:MyLanguage/J3.2:Developing an MVC Component | Developing an MVC Component for Joomla! 3.2]] tutorial. You are encouraged to read the previous parts of the tutorial before reading this.</translate>

<translate> There is a series of 5 videos associated with this step in the tutorial, covering (1) [https://youtu.be/ODEHeAtsGx8 Changes to the Helloworlds view and layout], (2) [https://youtu.be/6pidS152n58 Handling Deletes], and then three on the functionality required to support New and Edit: (3) [https://youtu.be/bUUh8grjhkc Handling New/Edit Redirect], (4) [https://youtu.be/R1-XVPhI-Ms Display the Helloworld message editing form] and (5) [https://youtu.be/ZXKIhIwGszE Handling Save and Cancel].</translate>

{{#widget:YouTube|id=ODEHeAtsGx8}}

{{#widget:YouTube|id=6pidS152n58}}

{{#widget:YouTube|id=bUUh8grjhkc}}

{{#widget:YouTube|id=R1-XVPhI-Ms}}

{{#widget:YouTube|id=ZXKIhIwGszE}}

<translate>== Adding a toolbar == </translate>
<translate>
In Joomla, the administrator interacts generally with components through the use of a toolbar. In the file <tt>admin/views/helloworlds/view.html.php</tt> put this content. It will create a basic toolbar and a title for the component.</translate>

<translate>
The arguments used in, for example, JToolbarHelper::addNew is used to set a controller instance which will be used after button is clicked. Further details below in the [[#Adding_specific_controllers | adding specific controllers]] section.</translate>

<span id ="admin/views/helloworlds/view.html.php">
<tt>admin/views/helloworlds/view.html.php</tt>
<source lang="php" highlight="41,42,55-61">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
* HelloWorlds View
*
* @since 0.0.1
*/
class HelloWorldViewHelloWorlds extends JViewLegacy
{
/**
* Display the Hello World view
*
* @param string $tpl The name of the template file to parse; automatically searches through the template paths.
*
* @return void
*/
function display($tpl = null)
{
// Get data from the model
$this->items = $this->get('Items');
$this->pagination = $this->get('Pagination');

// Check for errors.
if (count($errors = $this->get('Errors')))
{
JError::raiseError(500, implode('<br />', $errors));

return false;
}

// Set the toolbar
$this->addToolBar();

// Display the template
parent::display($tpl);
}

/**
* Add the page title and toolbar.
*
* @return void
*
* @since 1.6
*/
protected function addToolBar()
{
JToolbarHelper::title(JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLDS'));
JToolbarHelper::addNew('helloworld.add');
JToolbarHelper::editList('helloworld.edit');
JToolbarHelper::deleteList('', 'helloworlds.delete');
}
}
</source>
</span>

<translate>
You can find other classic backend actions in the <tt>administrator/includes/toolbar.php</tt> file of your Joomla installation.</translate>

<translate>
Since the view can perform some actions, we have to add some input data. With your favourite file manager and editor, put in the file <tt>admin/views/helloworlds/tmpl/default.php</tt></translate>

<span id="admin/views/helloworlds/tmpl/default.php">
<tt>admin/views/helloworlds/tmpl/default.php</tt>
<source lang="php" highlight="42,50,65,66,67">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<form action="index.php?option=com_helloworld&view=helloworlds" method="post" id="adminForm" name="adminForm">
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="1%"><?php echo JText::_('COM_HELLOWORLD_NUM'); ?></th>
<th width="2%">
<?php echo JHtml::_('grid.checkall'); ?>
</th>
<th width="90%">
<?php echo JText::_('COM_HELLOWORLD_HELLOWORLDS_NAME') ;?>
</th>
<th width="5%">
<?php echo JText::_('COM_HELLOWORLD_PUBLISHED'); ?>
</th>
<th width="2%">
<?php echo JText::_('COM_HELLOWORLD_ID'); ?>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
<?php echo $this->pagination->getListFooter(); ?>
</td>
</tr>
</tfoot>
<tbody>
<?php if (!empty($this->items)) : ?>
<?php foreach ($this->items as $i => $row) :
$link = JRoute::_('index.php?option=com_helloworld&task=helloworld.edit&id=' . $row->id);
?>
<tr>
<td><?php echo $this->pagination->getRowOffset($i); ?></td>
<td>
<?php echo JHtml::_('grid.id', $i, $row->id); ?>
</td>
<td>
<a href="<?php echo $link; ?>" title="<?php echo JText::_('COM_HELLOWORLD_EDIT_HELLOWORLD'); ?>">
<?php echo $row->greeting; ?>
</a>
</td>
<td align="center">
<?php echo JHtml::_('jgrid.published', $row->published, $i, 'helloworlds.', true, 'cb'); ?>
</td>
<td align="center">
<?php echo $row->id; ?>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
<input type="hidden" name="task" value=""/>
<input type="hidden" name="boxchecked" value="0"/>
<?php echo JHtml::_('form.token'); ?>
</form>

</source>
</span>

<translate>

The underscore function of JRoute is used so that the site displays SEF URLs; see [[Supporting_SEF_URLs_in_your_component|Supporting SEF URLs in your component]].<br />
The "task" field is used to define the controller.task parameter which will be sent to the server in the POST request when the form is submitted.<br />
The "boxchecked" field is used to keep track of the number of checkboxes ticked.<br />
Using the form token helps prevent [[How_to_add_CSRF_anti-spoofing_to_forms|CSRF attacks]].
</translate>

<translate>== Adding specific controllers == </translate>
<translate>
Three actions have been added:</translate>
* ''helloworlds.delete''
* ''helloworld.edit''
* ''helloworld.add''

<translate>
These are compound tasks (''controller''.''task''). So two new controllers <tt>HelloWorldControllerHelloWorlds</tt> and <tt>HelloWorldControllerHelloWorld</tt> have to be coded. (To understand the difference between the two types of subcontrollers read more in this article: [[S:MyLanguage/JController_and_its_subclass_usage_overview|subcontrollers...]]).</translate>

<span id="admin/controllers/helloworlds.php">
<tt>admin/controllers/helloworlds.php</tt>
<source lang="php">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
* HelloWorlds Controller
*
* @since 0.0.1
*/
class HelloWorldControllerHelloWorlds extends JControllerAdmin
{
/**
* Proxy for getModel.
*
* @param string $name The model name. Optional.
* @param string $prefix The class prefix. Optional.
* @param array $config Configuration array for model. Optional.
*
* @return object The model.
*
* @since 1.6
*/
public function getModel($name = 'HelloWorld', $prefix = 'HelloWorldModel', $config = array('ignore_request' => true))
{
$model = parent::getModel($name, $prefix, $config);

return $model;
}
}

</source>
</span>

<span id="admin/controllers/helloworld.php">
<tt>admin/controllers/helloworld.php</tt>
<source lang="php">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
* HelloWorld Controller
*
* @package Joomla.Administrator
* @subpackage com_helloworld
* @since 0.0.9
*/
class HelloWorldControllerHelloWorld extends JControllerForm
{
}

</source>
</span>

<translate>== Adding an editing view == </translate>
<translate>
With your favourite file manager and editor, put a file <tt>admin/views/helloworld/view.html.php</tt> containing:</translate>

<span id="admin/views/helloworld/view.html.php">
<tt>admin/views/helloworld/view.html.php</tt>
<source lang="php">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
* HelloWorld View
*
* @since 0.0.1
*/
class HelloWorldViewHelloWorld extends JViewLegacy
{
/**
* View form
*
* @var form
*/
protected $form = null;

/**
* Display the Hello World view
*
* @param string $tpl The name of the template file to parse; automatically searches through the template paths.
*
* @return void
*/
public function display($tpl = null)
{
// Get the Data
$this->form = $this->get('Form');
$this->item = $this->get('Item');

// Check for errors.
if (count($errors = $this->get('Errors')))
{
JError::raiseError(500, implode('<br />', $errors));

return false;
}

// Set the toolbar
$this->addToolBar();

// Display the template
parent::display($tpl);
}

/**
* Add the page title and toolbar.
*
* @return void
*
* @since 1.6
*/
protected function addToolBar()
{
$input = JFactory::getApplication()->input;

// Hide Joomla Administrator Main menu
$input->set('hidemainmenu', true);

$isNew = ($this->item->id == 0);

if ($isNew)
{
$title = JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW');
}
else
{
$title = JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT');
}

JToolbarHelper::title($title, 'helloworld');
JToolbarHelper::save('helloworld.save');
JToolbarHelper::cancel(
'helloworld.cancel',
$isNew ? 'JTOOLBAR_CANCEL' : 'JTOOLBAR_CLOSE'
);
}
}
</source>
</span>

<translate>
This view will display data using a layout.</translate>

<translate>
Put a file <tt>admin/views/helloworld/tmpl/edit.php</tt> containing:</translate>

<span id="admin/views/helloworld/tmpl/edit.php">
<tt>admin/views/helloworld/tmpl/edit.php</tt>
<source lang="php">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

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

?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld&layout=edit&id=' . (int) $this->item->id); ?>"
method="post" name="adminForm" id="adminForm">
<div class="form-horizontal">
<fieldset class="adminform">
<legend><?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_DETAILS'); ?></legend>
<div class="row-fluid">
<div class="span6">
<?php
foreach($this->form->getFieldset() as $field) {
echo $field->renderField();
}
?>
</div>
</div>
</fieldset>
</div>
<input type="hidden" name="task" value="helloworld.edit" />
<?php echo JHtml::_('form.token'); ?>
</form>

</source>
</span>

<translate>== Adding a model and modifying the existing one == </translate>

<translate>
The <tt>HelloWorldViewHelloWorld</tt> view asks form and data from a model. This model has to provide a ''getTable'', a ''getForm'' method and a ''loadData'' method (called from the ''JModelAdmin'' controller).</translate>

<span id="admin/models/helloworld.php">
<tt>admin/models/helloworld.php</tt>
<source lang="php">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
* HelloWorld Model
*
* @since 0.0.1
*/
class HelloWorldModelHelloWorld extends JModelAdmin
{
/**
* Method to get a table object, load it if necessary.
*
* @param string $type The table name. Optional.
* @param string $prefix The class prefix. Optional.
* @param array $config Configuration array for model. Optional.
*
* @return JTable A JTable object
*
* @since 1.6
*/
public function getTable($type = 'HelloWorld', $prefix = 'HelloWorldTable', $config = array())
{
return JTable::getInstance($type, $prefix, $config);
}

/**
* Method to get the record form.
*
* @param array $data Data for the form.
* @param boolean $loadData True if the form is to load its own data (default case), false if not.
*
* @return mixed A JForm object on success, false on failure
*
* @since 1.6
*/
public function getForm($data = array(), $loadData = true)
{
// Get the form.
$form = $this->loadForm(
'com_helloworld.helloworld',
'helloworld',
array(
'control' => 'jform',
'load_data' => $loadData
)
);

if (empty($form))
{
return false;
}

return $form;
}

/**
* Method to get the data that should be injected in the form.
*
* @return mixed The data for the form.
*
* @since 1.6
*/
protected function loadFormData()
{
// Check the session for previously entered form data.
$data = JFactory::getApplication()->getUserState(
'com_helloworld.edit.helloworld.data',
array()
);

if (empty($data))
{
$data = $this->getItem();
}

return $data;
}
}

</source>
</span>

<translate>
This model inherits from the ''JModelAdmin'' class and uses its ''loadForm'' method. This method searches for forms in the ''forms'' folder. With your favourite file manager and editor, put a file <tt>admin/models/forms/helloworld.xml</tt> containing:</translate>

<span id="admin/models/forms/helloworld.xml">
<tt>admin/models/forms/helloworld.xml</tt>
<source lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<form>
<fieldset>
<field
name="id"
type="hidden"
/>
<field
name="greeting"
type="text"
label="COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_GREETING_DESC"
size="40"
class="inputbox"
default=""
/>
</fieldset>
</form>
</source>
</span>

<translate>
Note: ''COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL'' and ''COM_HELLOWORLD_HELLOWORLD_GREETING_DESC'' are an alias for ''COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL'' and ''COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC'' respectively.</translate>

<translate>
Here we are using different label and description to convey two different meanings in two different sections, but they can be easily kept equal.</translate>

<translate>== Packaging the component == </translate>

<translate>
Content of your code directory</translate>
* ''[[#helloworld.xml|helloworld.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/helloworld.php|site/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/controller.php|site/controller.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/views/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/views/helloworld/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/views/helloworld/view.html.php|site/views/helloworld/view.html.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/views/helloworld/tmpl/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#site/views/helloworld/tmpl/default.xml|site/views/helloworld/tmpl/default.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/views/helloworld/tmpl/default.php|site/views/helloworld/tmpl/default.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/models/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#site/models/helloworld.php|site/models/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/language/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/language/en-GB/index.html]]''
* [[S:MyLanguage/J3.x:Developing an MVC Component/Adding language management#site.2Flanguage.2Fen-GB.2Fen-GB.com_helloworld.ini|site/language/en-GB/en-GB.com_helloworld.ini]]
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Basic_backend#admin/helloworld.php|admin/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Basic_backend#admin/controller.php|admin/controller.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/sql/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/sql/install.mysql.utf8.sql|admin/sql/install.mysql.utf8.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/sql/uninstall.mysql.utf8.sql|admin/sql/uninstall.mysql.utf8.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/sql/updates/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/sql/updates/mysql/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#admin/sql/updates/mysql/0.0.1.sql|admin/sql/updates/mysql/0.0.1.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/sql/install.mysql.utf8.sql|admin/sql/updates/mysql/0.0.6.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/models/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/models/fields/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/models/fields/helloworld.php|admin/models/fields/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Basic_backend#admin/models/helloworlds.php|admin/models/helloworlds.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_backend_actions#admin/models/helloworlds.php|admin/models/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/models/forms/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_backend_actions#admin/models/forms/helloworld.xml|admin/models/forms/helloworld.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_backend_actions#admin/controllers/helloworld.php|admin/controllers/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_backend_actions#admin/controllers/helloworlds.php|admin/controllers/helloworlds.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/controllers/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworld/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_backend_actions#admin/views/helloworld/view.html.php|admin/views/helloworld/view.html.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_backend_actions#admin/views/helloworld/tmpl/edit.php|admin/views/helloworld/tmpl/edit.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworld/tmpl/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworlds/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Basic_backend#admin/views/helloworlds/view.html.php|admin/views/helloworlds/view.html.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworlds/tmpl/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Basic_backend#admin/views/helloworlds/tmpl/default.php|admin/views/helloworlds/tmpl/default.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/tables/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/tables/helloworld.php|admin/tables/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/language/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/language/en-GB/index.html]]''
* ''[[S:MyLanguage/J3.x:Developing an MVC Component/Adding language management#admin.2Flanguage.2Fen-GB.2Fen-GB.com_helloworld.ini|admin/language/en-GB/en-GB.com_helloworld.ini]]''
* ''[[S:MyLanguage/J3.x:Developing an MVC Component/Adding language management#admin.2Flanguage.2Fen-GB.2Fen-GB.com_helloworld.sys.ini|admin/language/en-GB/en-GB.com_helloworld.sys.ini]]''

<translate>
Create a compressed file of this directory or directly download the [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-9-adding-backend-actions.zip archive] and install it using the extension manager of Joomla. You can add a menu item of this component using the menu manager in the backend.</translate>

<span id="helloworld.xml">
<tt>helloworld.xml</tt>
<source lang="xml" highlight="13,69,70">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.0" method="upgrade">

<name>COM_HELLOWORLD</name>

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

<version>0.0.9</version>

<description>COM_HELLOWORLD_DESCRIPTION</description>

<install> 
<sql>
<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
</sql>
</install>
<uninstall> 
<sql>
<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
</sql>
</uninstall>
<update> 
<schemas>
<schemapath type="mysql">sql/updates/mysql</schemapath>
</schemas>
</update>



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

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

<administration>

<menu link='index.php?option=com_helloworld'>COM_HELLOWORLD_MENU</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>

<folder>views</folder>

<folder>controllers</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>
</languages>
</administration>

</extension>
</source>
</span>

{{notice|<translate>
Please create a pull request or issue at https://github.com/joomla/Joomla-3.2-Hello-World-Component for any code descprepancies or if editing any of the source code on this page.</translate>}}

<translate>== Contributors == </translate>
*[[User:cdemko|Christophe Demko]]
*[[User:oaksu|Ozgur Aksu]]
*[[User:betweenbrain|Matt Thomas]]
*[[User:Gunjanpatel|Gunjan Patel]]
*[[User:Scionescire|Scionescire]]

<div class="row">
<div class="large-6 columns">{{Basic button|<translate>
S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding language management|Prev: Adding language management</translate>|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|<translate>
S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding decorations to the backend|Next: Adding decorations to the backend</translate>|class=expand}}</div>
</div>
__NOTOC__
<noinclude>
<translate>

[[Category:Joomla! 3.x]]
[[Category:Joomla! 3.0]]
[[Category:Joomla! 3.1]]
[[Category:Joomla! 3.2]]
[[Category:Joomla! 3.3]]
[[Category:Joomla! 3.4]]
[[Category:Beginner Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Tutorials in a Series]]
</translate>
</noinclude>

User:GregJPreece

2019-08-29T15:40:12Z

GregJPreece: Created page with "Senior Software Engineer from Vancouver, Canada. Creating open source Joomla extensions, and the kind of weirdo that enjoys updating documentation."

Senior Software Engineer from Vancouver, Canada. Creating open source Joomla extensions, and the kind of weirdo that enjoys updating documentation.