Joomla! Documentation - User contributions [en]

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

2021-05-23T17:07:58Z

PBaxter: more detail

{{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> (The <tt>com</tt> prefix means "component" and the <tt>helloworld</tt> is the name of our component.). This is a great way of managing multiple projects on the go! Technically we can name this folder anything we want but it is always a good idea to use meaningful names!

Next, inside this directory we need to create some files. Since this component will have both a front end (visible to website visitors) and a back end (used by site administrators) we will need two sub-folders. Create a sub-folder called 'site' and one called 'admin'. Again we can call these anything we want as we will tell Joomla! where are files are and where they go within the Joomla! installation in our manifest file that we create. 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.php|admin/src/Controller/DisplayController.php]]''
| 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" 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.php}}

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($cachable, $urlparams);
}

}
</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/Introduction

2021-05-20T00:44:13Z

PBaxter: added user

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

2021-02-10T02:12:33Z

PBaxter: /* Your First Component */

{{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.php|admin/src/Controller/DisplayController.php]]''
| 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" 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.php}}

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($cachable, $urlparams);
}

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

2021-02-10T02:10:29Z

PBaxter: /* File Details */

{{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.php]]''
| 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" 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.php}}

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($cachable, $urlparams);
}

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

2021-02-10T02:05:53Z

PBaxter: /* File Details */

{{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.php]]''
| 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" 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($cachable, $urlparams);
}

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

2021-02-10T01:55:29Z

PBaxter: /* Your First Component */

{{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.php]]''
| 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>

JDOC talk:Developer Tutorials Project

2021-02-08T14:40:20Z

PBaxter: Added new user

==Developer Tutorials Project==
* [[User:Hutchy68|Tom Hutchison]] ([[User talk:Hutchy68|talk]]) 09:37, 11 February 2013 (CST) - page categorisation, wiki markup help, layout, wikification of related pages
* [[User:Kevinkabatra|Kevinkabatra]] ([[User talk:Kevinkabatra|talk]]) 13:32, 18 September 2015 (CDT) - updating current beginner tutorials to be actually geared toward beginners, anything else that is needed
* [[User:Chiessyer|Chiessyer]] ([[User talk:Chiessyer|talk]]) 10:42, 31 May 2017 (CDT) - small updates to existing tutorials as I learn how to author a component
* [[User:PBaxter|PBaxter]] ([[User talk:PBaxter|talk]]) 08:40, 8 February 2021 (CST) Joomla! 4 Component Development Tutorial
== Feedback and ideas ==



* [[User:Poproar|popROAR]] ([[User talk:Poproar|talk]]) 12:22, 4 August 2013 (CDT) - walkthroughs?
* [[User:Poproar|popROAR]] ([[User talk:Poproar|talk]]) 19:27, 3 October 2015 (CDT) - Where can we find the github example pages?

User:PBaxter

2021-02-06T17:35:41Z

PBaxter: This is my user page.

== Peter Baxter ==

I was first introduced to Joomla! several years ago looking for a CMS for my workplace.<br />
That was the early days of 3.0 and now I'm excited to be looking at the 4.x beta releases!