Actions

J3.x

Difference between revisions of "Developing an MVC Component/Developing a Basic Component"

From Joomla! Documentation

J3.x:Developing an MVC Component
(First draft.)
 
('a' to 'an' as 'M' pronounced 'em')
 
(24 intermediate revisions by 11 users not shown)
Line 1: Line 1:
{{:Developing a Model-View-Controller Component/3.0}}
+
<noinclude><languages /></noinclude>
 +
{{:J3.1:Developing an MVC Component/<translate><!--T:1-->
 +
en</translate>}}
 +
<translate>== The first basic component == <!--T:3-->
 +
Let's create a ''Hello World!'' component.</translate>
 +
<translate>=== Public display === <!--T:4-->
 +
With your favorite file manager and editor, create a file <tt>''yoursite/components/com_helloworld/helloworld.php''</tt> containing:</translate>
 +
<source lang="php">
 +
Hello world
 +
</source>
 +
<translate><!--T:5-->
 +
Also Create an empty file <tt>''yoursite/components/com_helloworld/helloworld.xml''</tt></translate>
 +
<translate><!--T:6-->
 +
The last step is install the component, go to Extensions {{rarr}} Extension Manager {{rarr}} Discover :: Discover (Button).
 +
Select the component and install it with the installation (button).</translate>
 +
<translate><!--T:7-->
 +
You can test this basic component by putting ''index.php?option=com_helloworld'' in your browser address (don't forget to prefix this address with your Joomla! 3.x installation path) after installing this component.</translate>
  
= Developing a Basic Component =
+
<translate>=== Administrator management === <!--T:8--></translate>
 +
<translate><!--T:9-->
 +
With your favorite file manager and editor, create a file <tt>''yoursite/administrator/components/com_helloworld/helloworld.php''</tt> containing:</translate>
 +
<source lang="php">
 +
Hello world administration
 +
</source>
 +
<translate><!--T:10-->
 +
You can test this basic component by putting
 +
<tt>'''administrator/index.php?option=com_helloworld'''</tt> in your browser address after installing the component.</translate>
  
This page goes through the basic steps required to make the simplest possible component that will output ''Hello, world!'' to the [[Site (Application)|front-end]] of a Joomla!{{JVer|3.0}} website.
+
<translate>=== Pack an installation zip file === <!--T:11--></translate>
 +
<translate><!--T:12-->
 +
If you have used Joomla! before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.</translate>
  
== Main Output ==
+
<translate><!--T:13-->
 +
With your favorite file manager, create a directory (outside your Joomla! installation directory) containing:</translate>
 +
* ''[[#helloworld.xml|helloworld.xml]]''
 +
* ''[[#site/helloworld.php|site/helloworld.php]]''
 +
* ''[[#index.html|site/index.html]]''
 +
* ''[[#index.html|admin/index.html]]''
 +
* ''[[#admin/helloworld.php|admin/helloworld.php]]''
 +
* ''[[#index.html|admin/sql/index.html]]''
 +
* ''[[#index.html|admin/sql/updates/index.html]]''
 +
* ''[[#index.html|admin/sql/updates/mysql/index.html]]''
 +
* ''[[#admin/sql/updates/mysql/0.0.1.sql|admin/sql/updates/mysql/0.0.1.sql]]''
  
First set up the basic public output for this component. Create <code>yoursite/components/com_helloworld/helloworld.php</code> with the following contents:
+
<translate><!--T:14-->
 +
Create a compressed file of this directory or directly download the [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-1-basic-component.zip archive] and install it using the extension manager of Joomla. You can test this basic component by putting ''index.php?option=com_helloworld'' or ''administrator/index.php?option=com_helloworld'' in your browser address. You can also notice that the ''Hello World!'' component is visible in the administrator site of your Joomla installation under the ''Components'' menu.</translate>
  
<source lang="php">
+
<translate>==File Details== <!--T:15--></translate>
<?php
+
{{vanchor|admin/sql/updates/mysql/0.0.1.sql}}
 +
<translate><!--T:16-->
 +
is an empty file allowing to initialise schema version of the com_helloworld component.</translate>
  
echo 'Hello world';
+
<source lang="sql">
 
</source>
 
</source>
  
== Manifest file ==
+
{{vanchor|helloworld.xml}}
 
+
Every extension needs a [[manifest files|manifest file]] that specifies installation and configuration information for the extension.  The manifest file is named <code>''componentname''.xml</code>.  For a simple component we need only include a minimal number of the possible elements in this XML file.
+
 
+
Create <code>helloworld.xml</code> in the same directory as your <code>helloworld.php</code> above, with the following contents:
+
  
 
<source lang="xml">
 
<source lang="xml">
 
<?xml version="1.0" encoding="utf-8"?>
 
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.0" method="upgrade">
+
<extension type="component" version="3.2.0" method="upgrade">
 +
 
 
<name>Hello World!</name>
 
<name>Hello World!</name>
 +
<!-- The following elements are optional and free of formatting constraints -->
 +
<creationDate>December 2013</creationDate>
 +
<author>John Doe</author>
 +
<authorEmail>john.doe@example.org</authorEmail>
 +
<authorUrl>http://www.example.org</authorUrl>
 +
<copyright>Copyright Info</copyright>
 +
<license>License Info</license>
 +
<!--  The version string is recorded in the components table -->
 +
<version>0.0.1</version>
 +
<!-- The description is optional and defaults to the name -->
 +
<description>Description of the Hello World component ...</description>
 +
 +
<update> <!-- Runs on update; New since J2.5 -->
 +
<schemas>
 +
<schemapath type="mysql">sql/updates/mysql</schemapath>
 +
</schemas>
 +
</update>
 +
 +
<!-- Site Main File Copy Section -->
 +
<!-- Note the folder attribute: This attribute describes the folder
 +
to copy FROM in the package to install therefore files copied
 +
in this section are copied from /site/ in the package -->
 +
<files folder="site">
 +
<filename>index.html</filename>
 +
<filename>helloworld.php</filename>
 +
</files>
 +
 +
<administration>
 +
<!-- Administration Menu Section -->
 +
<menu link='index.php?option=com_helloworld'>Hello World!</menu>
 +
<!-- Administration Main File Copy Section -->
 +
<!-- Note the folder attribute: This attribute describes the folder
 +
to copy FROM in the package to install therefore files copied
 +
in this section are copied from /admin/ in the package -->
 +
<files folder="admin">
 +
<!-- Admin Main File Copy Section -->
 +
<filename>index.html</filename>
 +
<filename>helloworld.php</filename>
 +
<!-- SQL files section -->
 +
<folder>sql</folder>
 +
</files>
 +
</administration>
 +
 
</extension>
 
</extension>
 
</source>
 
</source>
  
Note that the <code>name</code> element is actually optional, but it makes for easier identification in the next step.
+
{{vanchor|site/helloworld.php}}
  
== Installation ==
+
<source lang="php">
 +
Hello World
 +
</source>
  
Next, we need to tell Joomla! to 'discover' this new component, so that it can be installed and used.  This is done by going to the ''Extension Manager -> Discover'' and clicking 'Discover' in the toolbar.  This will scan the <code>components</code> directory (amongst others), looking for components that have not yet been installed.
+
{{vanchor|admin/helloworld.php}}
  
The new component should be listed in the resulting table, and to install it you just select it (with the checkbox) and click 'Install' in the toolbar.
+
<source lang="php">
 +
Hello World administration
 +
</source>
  
Note: Don't worry about the message ''"Component Install: The XML file did not contain an administration element"'', as our component does not yet have any [[Administrator (Application)|administration]] features.  We'll add these later in the tutorial.
+
{{vanchor|index.html}}
  
== Hello, world! ==
+
<translate><!--T:17-->
 
+
common to all folders</translate>
You can now see the basic component in action, by navigating to <code><nowiki>http://localhost/joomla/index.php?option=com_helloworld</nowiki></code> (replacing <code>localhost/joomla</code> with your own installation location).
+
  
 +
<source lang="html4strict">
 +
<html><body bgcolor="#FFFFFF"></body></html>
 +
</source>
 +
<br />
 +
{{notice|<translate><!--T:18-->
 +
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>}}
  
 +
<div class="row">
 +
<div class="large-6 columns">{{Basic button|<translate><!--T:19-->
 +
S:MyLanguage/J3.x:Developing_an_MVC_Component/Introduction|Prev: Introduction</translate>|class=expand success}}</div>
 +
<div class="large-6 columns">{{Basic button|<translate><!--T:20-->
 +
S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding_a_view_to_the_site_part|Next: Adding a view to the site part</translate>|class=expand}}</div>
 +
</div>
 +
__NOTOC__
 +
<noinclude>
 +
<translate>
 +
<!--T:2-->
 +
[[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:Component Development]]
[[Category:Joomla! 3.0]]
+
[[Category:Tutorials]]
 +
[[Category:Tutorials in a Series]]
 +
</translate>
 +
</noinclude>

Latest revision as of 08:20, 10 July 2015

Other languages:
English • ‎français
Joomla! 
3.x
Tutorial
Developing an MVC Component


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

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



The first basic component

Let's create a Hello World! component.

Public display

With your favorite file manager and editor, create a file yoursite/components/com_helloworld/helloworld.php containing:

Hello world

Also Create an empty file yoursite/components/com_helloworld/helloworld.xml The last step is install the component, go to Extensions    Extension Manager    Discover :: Discover (Button). Select the component and install it with the installation (button). You can test this basic component by putting index.php?option=com_helloworld in your browser address (don't forget to prefix this address with your Joomla! 3.x installation path) after installing this component.

Administrator management

With your favorite file manager and editor, create a file yoursite/administrator/components/com_helloworld/helloworld.php containing:

Hello world administration

You can test this basic component by putting administrator/index.php?option=com_helloworld in your browser address after installing the component.

Pack an installation zip file

If you have used Joomla! before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.

With your favorite file manager, create a directory (outside your Joomla! installation directory) containing:

Create a compressed file of this directory or directly download the archive and install it using the extension manager of Joomla. You can test this basic component by putting index.php?option=com_helloworld or administrator/index.php?option=com_helloworld in your browser address. You can also notice that the Hello World! component is visible in the administrator site of your Joomla installation under the Components menu.

File Details

admin/sql/updates/mysql/0.0.1.sql is an empty file allowing to initialise schema version of the com_helloworld component.

 

helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.2.0" method="upgrade">
 
	<name>Hello World!</name>
	<!-- The following elements are optional and free of formatting constraints -->
	<creationDate>December 2013</creationDate>
	<author>John Doe</author>
	<authorEmail>john.doe@example.org</authorEmail>
	<authorUrl>http://www.example.org</authorUrl>
	<copyright>Copyright Info</copyright>
	<license>License Info</license>
	<!--  The version string is recorded in the components table -->
	<version>0.0.1</version>
	<!-- The description is optional and defaults to the name -->
	<description>Description of the Hello World component ...</description>
 
	<update> <!-- Runs on update; New since J2.5 -->
		<schemas>
			<schemapath type="mysql">sql/updates/mysql</schemapath>
		</schemas>
	</update>
 
	<!-- Site Main File Copy Section -->
	<!-- Note the folder attribute: This attribute describes the folder
		to copy FROM in the package to install therefore files copied
		in this section are copied from /site/ in the package -->
	<files folder="site">
		<filename>index.html</filename>
		<filename>helloworld.php</filename>
	</files>
 
	<administration>
		<!-- Administration Menu Section -->
		<menu link='index.php?option=com_helloworld'>Hello World!</menu>
		<!-- Administration Main File Copy Section -->
		<!-- Note the folder attribute: This attribute describes the folder
			to copy FROM in the package to install therefore files copied
			in this section are copied from /admin/ in the package -->
		<files folder="admin">
			<!-- Admin Main File Copy Section -->
			<filename>index.html</filename>
			<filename>helloworld.php</filename>
			<!-- SQL files section -->
			<folder>sql</folder>
		</files>
	</administration>
 
</extension>

site/helloworld.php

Hello World

admin/helloworld.php

Hello World administration

index.html

common to all folders

<html><body bgcolor="#FFFFFF"></body></html>


Info non-talk.png
General Information

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.