J3.x

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

From Joomla! Documentation

< J3.x:Developing an MVC Component
(10 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{:Developing a Model-View-Controller Component/3.0}}
 
{{:Developing a Model-View-Controller Component/3.0}}
  
= Developing a Basic Component =
+
== 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
 +
<source lang="php">
 +
Hello world
 +
</source>
  
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.1}} website.
+
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.
  
== Main Output ==
+
=== Administrator management ===
 
+
With your favorite file manager and editor, create a file ''yoursite/administrator/components/com_helloworld/helloworld.php'' containing
First set up the basic public output for this component.  Create <code>yoursite/components/com_helloworld/helloworld.php</code> with the following contents:
+
<source lang="php">
 +
Hello world administration
 +
</source>
  
<source lang="php">
+
You can test this basic component by putting ''administrator/index.php?option=com_helloworld'' in your browser address after installing the component.
<?php
 
  
echo 'Hello world';
+
=== Pack an installation zip file ===
</source>
+
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.
  
== Manifest file ==
+
With your favorite file manager, create a directory (outside your Joomla! installation directory) containing
 +
* ''[[#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]]''
  
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 a compressed file of this directory or directly download the [http://joomlacode.org/gf/download/frsrelease/11394/58225/com_helloworld-1.6-part01.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.
  
Create <code>helloworld.xml</code> in the same directory as your <code>helloworld.php</code> above, with the following contents:
+
==File Details==
 +
{{vanchor|admin/sql/updates/mysql/0.0.1.sql}}
 +
is an empty file allowing to initialise schema version of the com_helloworld component.
 +
<source lang="sql">
 +
</source>
  
 +
{{vanchor|helloworld.xml}}
 
<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.1" method="upgrade">
+
<extension type="component" version="3.2" method="upgrade">
 +
 
 
<name>Hello World!</name>
 
<name>Hello World!</name>
</extension>
+
<!-- The following elements are optional and free of formatting constraints -->
</source>
+
<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>
  
Note that the <code>name</code> element is actually optional, but it makes for easier identification in the next step.
+
<!-- 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>
  
== Installation ==
+
<administration>
 +
<!-- Administration Menu Section -->
 +
<menu>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>
  
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.
+
</extension>
 +
</source>
  
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.
+
{{vanchor|site/helloworld.php}}
 +
<source lang="php">
 +
Hello World
 +
</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|admin/helloworld.php}}
 +
<source lang="php">
 +
Hello World administration
 +
</source>
  
== Hello, world! ==
+
{{vanchor|index.html}}
 +
common to all folders
 +
<source lang="html4strict">
 +
<html><body bgcolor="#FFFFFF"></body></html>
 +
</source>
  
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).
+
{{notice|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.}}
  
 +
{{:J3.2:Developing a MVC Component/Navigate
 +
|prev=Introduction
 +
|next=Adding a view to the site part}}
  
<noinclude>[[Category:Component Development]] [[Category:Joomla! 3.0]] [[Category:Joomla! 3.1]]</noinclude>
+
<noinclude>[[Category:Component Development]] [[Category:Joomla! 3.0]] [[Category:Joomla! 3.1]][[Category:Joomla! 3.2]]</noinclude>

Revision as of 07:01, 4 July 2014

Joomla! 
3.x
<translate> Tutorial</translate>
<translate> Developing an MVC Component</translate>

{{Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!3.1 - Contents/<translate> en</translate>}} <translate> This is a multiple-article series of tutorials on how to develop a Model-View-Controller Component for Joomla! VersionJoomla 3.x.</translate>

<translate> 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).</translate>



The first basic component[edit]

Let's create a Hello World! component.

Public display[edit]

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

Hello world

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[edit]

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[edit]

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[edit]

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

J3.x:Developing a MVC Component/Navigate