Actions

J3.2

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

From Joomla! Documentation

< J3.2:Developing a MVC Component
(Adds note about Github repo)
 
(4 intermediate revisions by one user 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.
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|{{CurrentSTSVer|minor}}}} website.
+
=== 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>
  
== Main Output ==
+
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.
 
+
First set up the basic public output for this component.  Create <code>yoursite/components/com_helloworld/helloworld.php</code> with the following contents:
+
  
 +
=== Administrator management ===
 +
With your favorite file manager and editor, create a file ''yoursite/administrator/components/com_helloworld/helloworld.php'' containing
 
<source lang="php">
 
<source lang="php">
<?php
+
Hello world administration
 
+
echo 'Hello world';
+
 
</source>
 
</source>
  
== Manifest file ==
+
You can test this basic component by putting ''administrator/index.php?option=com_helloworld'' in your browser address after installing the component.
  
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.
+
=== Packaging 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.
  
Create <code>helloworld.xml</code> in the same directory as your <code>helloworld.php</code> above, with the following contents:
+
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]]''
  
 +
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.
 +
 +
==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>
        <administration > </administration>
+
<!-- The following elements are optional and free of formatting constraints -->
        <files>
+
<creationDate>December 2013</creationDate>
                <filename>helloworld.php</filename>
+
<author>John Doe</author>
        </files>
+
<authorEmail>john.doe@example.org</authorEmail>
</extension>
+
<authorUrl>http://www.example.org</authorUrl>
</source>
+
<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>
  
Note that the <code>name</code> element is actually optional, but it makes for easier identification in the next step.
+
<update> <!-- Runs on update; New since J2.5 -->
 +
<schemas>
 +
<schemapath type="mysql">sql/updates/mysql</schemapath>
 +
</schemas>
 +
</update>
  
== Installation ==
+
<!-- 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>
  
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.
+
<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>
  
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.
+
</extension>
 +
</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|site/helloworld.php}}
 +
<source lang="php">
 +
Hello World
 +
</source>
  
== Hello, world! ==
+
{{vanchor|admin/helloworld.php}}
 +
<source lang="php">
 +
Hello World administration
 +
</source>
 +
 
 +
{{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>

Latest revision as of 15:12, 21 January 2014


This is a multiple-article series of tutorials on how to develop a Model-View-Contoller Component for Joomla! Version Joomla 3.2.

Begin with the Introduction, and navigate the articles in this series by using the navigation 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

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.

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


Tutorial Navigation