J4.x:Developing an MVC Component/Developing a Basic Component/de - Revision history

Chmst at 09:51, 11 October 2023

2023-10-11T09:51:57Z

← Older revision		Revision as of 09:51, 11 October 2023
Line 11:		Line 11:
	In diesem Beitrag erklären wir, wie eine einfache Joomla Komponente erzeugt und installiert wird. Wir nennen diese Komponente - wie originell - "Hello World".		In diesem Beitrag erklären wir, wie eine einfache Joomla Komponente erzeugt und installiert wird. Wir nennen diese Komponente - wie originell - "Hello World".

	Als erstes verwende deinen bevorzugten Dateimanager und erstelle ein Verzeichnis für die Komponente "Hello World!". Dies Verzeichnis kann überall liegen, nur nicht innerhalb des Joomla! ~~installations Verzeichnisses~~. In diesem ~~Beispile~~ nennen wir das Verzeichnis <code>com_helloworld</code>. Das Präfix <code>com</code> bedeutet das es eine Komponente ist und <code>helloworld</code> ist ihr Name. Das ist eine gute Methode, viele parallele Projekte zu organisieren. Technisch gesehen kann dieses Verzeichnis einen beliebigen Namen haben aber es empfiehlt sich immer, sprechende Namen zu verwenden.		Als erstes verwende deinen bevorzugten Dateimanager und erstelle ein Verzeichnis für die Komponente "Hello World!". Dies Verzeichnis kann überall liegen, nur nicht innerhalb des Joomla! Installationsverzeichnisses. In diesem Beispiele nennen wir das Verzeichnis <code>com_helloworld</code>. Das Präfix <code>com</code> bedeutet das es eine Komponente ist und <code>helloworld</code> ist ihr Name. Das ist eine gute Methode, viele parallele Projekte zu organisieren. Technisch gesehen kann dieses Verzeichnis einen beliebigen Namen haben aber es empfiehlt sich immer, sprechende Namen zu verwenden.

	Als nächstes müssen wir in diesem Verzeichnis ein paar Dateien erzeugen. Da diese Komponente sowohl ein Frontend (das die Besucher der Webseite sehen) als auch ein Backend (das für Administratoren zugänglich ist) hat, brauchen wir zwei Unterverzeichnisse. Lege ein Verzeichnis 'site' an und ein anderes mit dem Namen 'admin'. Auch diese können beliebige Namen bekommen. Wir werden ein manifest file erstellen, in dem wir Joomla! sagen, wie unser Verzeichnisse heißen und wohin sie kommen sollen. Erzeuge die folgenden Dateien und füge den Code ein, den du in [[#File Details\|File Details]] findest.		Als nächstes müssen wir in diesem Verzeichnis ein paar Dateien erzeugen. Da diese Komponente sowohl ein Frontend (das die Besucher der Webseite sehen) als auch ein Backend (das für Administratoren zugänglich ist) hat, brauchen wir zwei Unterverzeichnisse. Lege ein Verzeichnis 'site' an und ein anderes mit dem Namen 'admin'. Auch diese können beliebige Namen bekommen. Wir werden ein manifest file erstellen, in dem wir Joomla! sagen, wie unser Verzeichnisse heißen und wohin sie kommen sollen. Erzeuge die folgenden Dateien und füge den Code ein, den du in [[#File Details\|File Details]] findest.

Chmst: Created page with "Als nächstes müssen wir in diesem Verzeichnis ein paar Dateien erzeugen. Da diese Komponente sowohl ein Frontend (das die Besucher der Webseite sehen) als auch ein Backend (..."

2023-10-11T09:49:58Z

Created page with "Als nächstes müssen wir in diesem Verzeichnis ein paar Dateien erzeugen. Da diese Komponente sowohl ein Frontend (das die Besucher der Webseite sehen) als auch ein Backend (..."

← Older revision		Revision as of 09:49, 11 October 2023
Line 13:		Line 13:
	Als erstes verwende deinen bevorzugten Dateimanager und erstelle ein Verzeichnis für die Komponente "Hello World!". Dies Verzeichnis kann überall liegen, nur nicht innerhalb des Joomla! installations Verzeichnisses. In diesem Beispile nennen wir das Verzeichnis <code>com_helloworld</code>. Das Präfix <code>com</code> bedeutet das es eine Komponente ist und <code>helloworld</code> ist ihr Name. Das ist eine gute Methode, viele parallele Projekte zu organisieren. Technisch gesehen kann dieses Verzeichnis einen beliebigen Namen haben aber es empfiehlt sich immer, sprechende Namen zu verwenden.		Als erstes verwende deinen bevorzugten Dateimanager und erstelle ein Verzeichnis für die Komponente "Hello World!". Dies Verzeichnis kann überall liegen, nur nicht innerhalb des Joomla! installations Verzeichnisses. In diesem Beispile nennen wir das Verzeichnis <code>com_helloworld</code>. Das Präfix <code>com</code> bedeutet das es eine Komponente ist und <code>helloworld</code> ist ihr Name. Das ist eine gute Methode, viele parallele Projekte zu organisieren. Technisch gesehen kann dieses Verzeichnis einen beliebigen Namen haben aber es empfiehlt sich immer, sprechende Namen zu verwenden.

	~~<div lang="en" dir="ltr" class="mw-content-ltr">~~		Als nächstes müssen wir in diesem Verzeichnis ein paar Dateien erzeugen. Da diese Komponente sowohl ein Frontend (das die Besucher der Webseite sehen) als auch ein Backend (das für Administratoren zugänglich ist) hat, brauchen wir zwei Unterverzeichnisse. Lege ein Verzeichnis 'site' an und ein anderes mit dem Namen 'admin'. Auch diese können beliebige Namen bekommen. Wir werden ein manifest file erstellen, in dem wir Joomla! sagen, wie unser Verzeichnisse heißen und wohin sie kommen sollen. Erzeuge die folgenden Dateien und füge den Code ein, den du in [[#File Details\|File Details]] findest.
	~~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]].
	~~</div>~~

	<div lang="en" dir="ltr" class="mw-content-ltr">		<div lang="en" dir="ltr" class="mw-content-ltr">

Chmst: Created page with "Als erstes verwende deinen bevorzugten Dateimanager und erstelle ein Verzeichnis für die Komponente "Hello World!". Dies Verzeichnis kann überall liegen, nur nicht innerhalb..."

2023-10-11T09:39:41Z

Created page with "Als erstes verwende deinen bevorzugten Dateimanager und erstelle ein Verzeichnis für die Komponente "Hello World!". Dies Verzeichnis kann überall liegen, nur nicht innerhalb..."

← Older revision		Revision as of 09:39, 11 October 2023
Line 11:		Line 11:
	In diesem Beitrag erklären wir, wie eine einfache Joomla Komponente erzeugt und installiert wird. Wir nennen diese Komponente - wie originell - "Hello World".		In diesem Beitrag erklären wir, wie eine einfache Joomla Komponente erzeugt und installiert wird. Wir nennen diese Komponente - wie originell - "Hello World".

	~~<div lang="en" dir="ltr" class="mw-content-ltr~~">		Als erstes verwende deinen bevorzugten Dateimanager und erstelle ein Verzeichnis für die Komponente "Hello World!". Dies Verzeichnis kann überall liegen, nur nicht innerhalb des Joomla! installations Verzeichnisses. In diesem Beispile nennen wir das Verzeichnis <code>com_helloworld</code>. Das Präfix <code>com</code> bedeutet das es eine Komponente ist und <code>helloworld</code> ist ihr Name. Das ist eine gute Methode, viele parallele Projekte zu organisieren. Technisch gesehen kann dieses Verzeichnis einen beliebigen Namen haben aber es empfiehlt sich immer, sprechende Namen zu verwenden.
	~~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~~ <code>com_helloworld</code> ~~(The~~ <code>com</code> ~~prefix means "component" and the~~ <code>helloworld</code> ~~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!~~
	~~</div>~~

	<div lang="en" dir="ltr" class="mw-content-ltr">		<div lang="en" dir="ltr" class="mw-content-ltr">

Chmst: Created page with "In diesem Beitrag erklären wir, wie eine einfache Joomla Komponente erzeugt und installiert wird. Wir nennen diese Komponente - wie originell - "Hello World"."

2023-10-11T09:29:03Z

Created page with "In diesem Beitrag erklären wir, wie eine einfache Joomla Komponente erzeugt und installiert wird. Wir nennen diese Komponente - wie originell - "Hello World"."

← Older revision		Revision as of 09:29, 11 October 2023
Line 9:		Line 9:
	== Die erste Komponente ==		== Die erste Komponente ==

	~~<div lang="en" dir="ltr" class="mw~~-~~content~~-~~ltr">~~		In diesem Beitrag erklären wir, wie eine einfache Joomla Komponente erzeugt und installiert wird. Wir nennen diese Komponente - wie originell - "Hello World".
	~~In this article we will cover how to create and install a basic Joomla! component, which we will inventively call the~~ "Hello World" ~~component~~.
	~~</div>~~

	<div lang="en" dir="ltr" class="mw-content-ltr">		<div lang="en" dir="ltr" class="mw-content-ltr">

Max123kl: Created page with "

{{Basic button| S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Zurück: Einleitung|class=expand success}}

2023-09-02T15:36:51Z

Created page with "<div class="row"> <div class="large-6 columns">{{Basic button| S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Zurück: Einleitung|class=expand success}}</div> <div..."

← Older revision Revision as of 15:36, 2 September 2023
Line 284: Line 284:

</div>
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">

<div class="row">
<div class="row">

<div class="large-6 columns">{{Basic button|
<div class="large-6 columns">{{Basic button|

S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Prev: Introduction|class=expand success}}</div>
S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction|Zurück: Einleitung|class=expand success}}</div>

<div class="large-6 columns">{{Basic button|
<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>
S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part|Nächstes: Hinzufügen eines Views zum Site-Bereich|class=expand}}</div>

</div>

</div>
</div>

<noinclude>
<noinclude>

Max123kl: Created page with "== Die erste Komponente =="

2023-09-02T15:26:29Z

Created page with "== Die erste Komponente =="

← Older revision		Revision as of 15:26, 2 September 2023
Line 7:		Line 7:
	{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/de}}		{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/de}}
	{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/de}}		{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/de}}
	~~<div lang~~=~~"en" dir~~=~~"ltr" class~~=~~"mw-content-ltr">~~		== Die erste Komponente ==
	=~~= Your First Component ==~~
	~~</div>~~

	<div lang="en" dir="ltr" class="mw-content-ltr">		<div lang="en" dir="ltr" class="mw-content-ltr">

Max123kl: Created page with "Entwicklung einer Basis Komponente"

2023-09-02T15:23:39Z

Created page with "Entwicklung einer Basis Komponente"

← Older revision		Revision as of 15:23, 2 September 2023
Line 3:		Line 3:
	{{Joomla version\|version=4.x\|comment=>Tutorial}}		{{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=~~<span lang="en" dir="ltr" class="mw-content-ltr">Developing a Basic Component</span>~~}}		{{Top portal heading\|color=white-bkgd\|icon=file-code-o\|icon-color=#5091cd\|size=5x\|text-color=#333\|title=Entwicklung einer Basis Komponente}}
	{{-}}		{{-}}
	{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/de}}		{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/de}}

FuzzyBot: Updating to match new version of source page

2023-09-02T15:22:51Z

Updating to match new version of source page

← Older revision		Revision as of 15:22, 2 September 2023
Line 3:		Line 3:
	{{Joomla version\|version=4.x\|comment=>Tutorial}}		{{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}}		{{Top portal heading\|color=white-bkgd\|icon=file-code-o\|icon-color=#5091cd\|size=5x\|text-color=#333\|title=<span lang="en" dir="ltr" class="mw-content-ltr">Developing a Basic Component</span>}}
	{{-}}		{{-}}
	{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/de}}		{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/de}}

Max123kl: Created page with "de"

2023-09-02T09:38:39Z

Created page with "de"

← Older revision		Revision as of 09:38, 2 September 2023
Line 5:		Line 5:
	{{Top portal heading\|color=white-bkgd\|icon=file-code-o\|icon-color=#5091cd\|size=5x\|text-color=#333\|title=Developing a Basic Component}}		{{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/~~<span lang="en" dir="ltr" class="mw-content-ltr">en</span>~~}}		{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/de}}
	{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/~~<span lang="en" dir="ltr" class="mw-content-ltr">en</span>~~}}		{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/de}}
	<div lang="en" dir="ltr" class="mw-content-ltr">		<div lang="en" dir="ltr" class="mw-content-ltr">
	== Your First Component ==		== Your First Component ==

Max123kl: Created page with "Entwicklung einer MVC Komponente - Entwicklung der Basis-Komponente"

2023-09-02T09:17:05Z

Created page with "Entwicklung einer MVC Komponente - Entwicklung der Basis-Komponente"

New page

<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=Developing a Basic Component}}
{{-}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Contents/<span lang="en" dir="ltr" class="mw-content-ltr">en</span>}}
{{Chunk:Developing_a_Model-View-Controller_(MVC)_Component_for_Joomla!4.x_-_Notes/<span lang="en" dir="ltr" class="mw-content-ltr">en</span>}}
<div lang="en" dir="ltr" class="mw-content-ltr">
== Your First Component ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
In this article we will cover how to create and install a basic Joomla! component, which we will inventively call the "Hello World" component.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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 <code>com_helloworld</code> (The <code>com</code> prefix means "component" and the <code>helloworld</code> 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!
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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]].
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
{|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
|}
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== File Details ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
{{vanchor|helloworld.xml}}
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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.
</div>

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

{{vanchor|admin/services/provider.php}}
<div lang="en" dir="ltr" class="mw-content-ltr">
This is a special file that tells Joomla! how to initialise the component - which services it requires and how they should be provided.
</div>

<syntaxhighlight 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;
}
);
}
};
</syntaxhighlight>

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

<span lang="en" dir="ltr" class="mw-content-ltr">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.</span>

<syntaxhighlight 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);
}

}
</syntaxhighlight>

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

<span lang="en" dir="ltr" class="mw-content-ltr">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!</span>

<syntaxhighlight 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);
}

}
</syntaxhighlight>

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

<div lang="en" dir="ltr" class="mw-content-ltr">
This file holds the template for the page. It is used to render the page utilising the setup done by the view object.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
When no specific layout is requested for a view, Joomla! will load the template in the <code>default.php</code> file, which is why we're using that filename.
</div>

<syntaxhighlight 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>
</syntaxhighlight>
<div lang="en" dir="ltr" class="mw-content-ltr">
== Installing the Component ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Using your preferred file manager, create a .zip file of the <code>com_helloworld</code> directory - include the directory itself and make sure to preserve the directory structure.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Now we need to install the component. Follow this process:
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
# Using your web browser, navigate to the Administrator panel of your Joomla! site. The address would be <code><joomla>/administrator/</code>. For example: <code>http://localhost/joomla/administrator/</code>
# 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.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
The page should automatically process the installation of the component, and you will receive a message telling you whether it was successful or not.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== Testing the Component ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
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 labeled "Hello World". This is the link detailed in the component's manifest file. If you click it, you should see the "Hello World" page.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Congratulations! You've created your first Joomla! component. Now, let's start making it useful.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
<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>
</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>

← Older revision		Revision as of 15:36, 2 September 2023
Line 284:		Line 284:
	</div>		</div>

	~~<div lang="en" dir="ltr" class="mw-content-ltr">~~
	<div class="row">		<div class="row">
	<div class="large-6 columns">{{Basic button\|		<div class="large-6 columns">{{Basic button\|
	S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction\|~~Prev~~: ~~Introduction~~\|class=expand success}}</div>		S:MyLanguage/J4.x:Developing_an_MVC_Component/Introduction\|Zurück: Einleitung\|class=expand success}}</div>
	<div class="large-6 columns">{{Basic button\|		<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>~~		S:MyLanguage/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part\|Nächstes: Hinzufügen eines Views zum Site-Bereich\|class=expand}}</div>
	</div>
	</div>		</div>
	<noinclude>		<noinclude>