Actions

Difference between revisions of "Absolute Basics of How a Component Functions"

From Joomla! Documentation

m (Spelling error: corrected to "So let's" instead of "Do let's")
 
(51 intermediate revisions by 13 users not shown)
Line 1: Line 1:
Some weeks ago I was asked to confirm if a custom PHP web development with a high budget was the right path to follow. After having a look at the goals of the project I thought that the custom path was overkill and told him that I believed that any open source CMS customization could deliver the same for lot less money. Having made a selection a year or so before I recommended Joomla! as the right tool for the job expecting that my paper will end at this point. But I finally got involved.
+
<noinclude><languages /></noinclude>
 +
<translate><!--T:1-->
 +
This article is designed for Joomlaǃ beginners; it is designed to explain what a Joomlaǃ component is, and how it functions. When a specific component example will benefit the tutorial, this article will refer to an example component named Hello Worldǃ.</translate>
  
The only weak point of Joomla! at the time I made my selection (version 1.x) was that is was slow because of the huge joomla.php library file but I thought when making my recommendation that the new hardware we have now would compensate.
+
<translate>
 +
==What is a Joomlaǃ Component== <!--T:2-->
 +
</translate>
 +
{{Chunk:Component/<translate><!--T:58-->
 +
en</translate>}}
 +
<translate><!--T:5-->
 +
In the Joomla! framework, components can be designed using a flat model (returns HTML code for the requested page) or Model-View-Controller (herein referred to as MVC) pattern.</translate>
  
But to my surprise the Joomla! 1.5.2 framework had just been released and a first look at it was promising. The problem was that there is very little, if any information at all about how the pieces that Joomla! connect with each other. After developing a component, a module and a plugin to achieve the goals of the project, I had to look at lots of disparate small documents, source code and tantra to learn how these pieces work together to make the new Joomla! 1.5. It's a fabulous environment to develop web solutions in an easy and powerful way. My congratulations to the development group that has been able to envision such a magnificent tool.
+
<translate>
 +
==Introduction to MVC== <!--T:6-->
 +
</translate>
 +
<translate><!--T:7-->
 +
MVC is a software design pattern that can be used to organize code in such a way that the business logic and data presentation are seperate. The premise behind this approach is that if the business logic is grouped into one section, then the interface and user interaction that surrounds the data can be revised and customized without having to reprogram the business logic. MVC was originally developed to map the traditional input, processing, output roles into a logical GUI architecture.</translate>
  
This document is my attempt to express to the community what I have learned while developing the project and also learn from the feedback and help from others. Because I am quite sure that there are lots of things that need revision I humbly request the help of the Joomla! gurus out there to take the time to read this somehow long dissertation and feed me with their knowledge. And, not less important, I request your tolerance if my English is not Oxford-like because I am not a native English speaking person. Luckily, this is a wiki, and others have come by to help with some editing.
+
<translate>
 +
===Model=== <!--T:8-->
 +
</translate>
 +
<translate><!--T:9-->
 +
The model is the part of the component that encapsulates the application's data. It will often provide routines to manage and manipulate this data in a meaningful way in addition to routines that retrieve the data from the model. In general, the underlying data access technique should be encapsulated in the model. In this way, if an application is to be moved from a system that utilizes a flat file to store its information to a system that uses a database, the model is the only element that needs to be changed, not the view or the controller.</translate>
  
Ok. Let's start...
+
<translate>
 +
===View=== <!--T:10-->
 +
</translate>
 +
<translate><!--T:11-->
 +
The view is the part of the component that is used to render the data from the model in a manner that is suitable for interaction. For a web-based application, the view would generally be an HTML page that is returned to the user. The view pulls data from the model (which is passed to it from the controller) and feeds the data into a template which is populated and presented to the user. The view does not cause the data to be modified in any way, it only displays the data received from the model.</translate>
  
You enter the Joomla! framework by making calls to index.php. Joomla! is designed mainly to deliver the results of component files. When you call a page link like index.php?option=com_<name> the Joomla! framework tries to find and load the file components/com_<name>/<name>.php from whatever the folder you have installed Joomla! into. So if your component is 'com_read' you should have a 'com_read' folder and a file named 'read.php' inside of it. I will call this file the 'base file' and it is in this file where you make the decision whether to use an old flat model (returning the HTML code for the requested page) or to use a Model-View-Controller (MVC) pattern.
+
<translate>
 +
===Controller=== <!--T:12-->
 +
</translate>
 +
<translate><!--T:13-->
 +
The controller is responsible for responding to user actions. In the case of a web application, a user action is generally a page request. The controller will determine what request is being made by the user and respond appropriately by triggering the model to manipulate the data appropriately and passing the model into the view. The controller does not display the data in the model, it only triggers methods in the model which modify the data, and then pass the model into the view which displays the data.</translate>
  
This MVC model, walks over two legs: a file and a class. The Joomla! framework will usually look for a given file and if found, tries to register a specific class within this file. If either one is missing the call fails.
+
<translate>
 +
== Joomla! Component Framework Explained == <!--T:14-->
 +
</translate>
  
You start all the fireworks by including a controller file in your base file. The controller file can be named anything you want, but by convention it is called 'controller.php'. In your base file (<name>.php), the following code is typical:
+
<translate>
 +
=== Model === <!--T:15-->
 +
</translate>
 +
<translate><!--T:16-->
 +
In the Joomla framework, models are responsible for managing the data. The first function that has to be written for a model is a get function. It returns data to the caller. For this example, the caller will be the HelloWorldViewHelloWorld view. By default, the model named HelloWorldModelHelloWorld residing in site/models/helloworld.php is the main model associated to this view.</translate>
  
<source lang="php">
+
<translate><!--T:17-->
require_once(JPATH_COMPONENT.DS.'controller.php');
+
So let's have a quick look at the naming conventions with an example, since the naming convention are the actual magic, that make everything work:</translate>
</source>
+
  
Your controller.php file can be created anywhere you want because we are including it by path but if you have written exactly the former line it should be created in the same location where your base file is located because JPATH_COMPONENT holds the path where the executing component base file is and DS represents the path separator translated to whatever is convenient for your OS, being it windows or linux.
+
<translate><!--T:18-->
 +
The class ''HelloWorldView'''HelloWorld''''' resides in ''site/views/'''helloworld'''/view.html.php'' and will make use of the class ''HelloWorldModel'''HelloWorld''''' in the file ''site/models/'''helloworld'''.php''</translate>
  
So create controller.php and make a reference to the controller library inside by importing it with:
+
<translate><!--T:19-->
 +
So let's just assume we want to use an imaginary view ''fluffy'', you would have to have:</translate>
  
<source lang="php">
+
<translate><!--T:20-->
jimport('joomla.application.component.controller');
+
The class ''HelloWorldView'''Fluffy''''' which resides in ''site/views/'''fluffy'''/view.html.php''. The view will make use of ''HelloWorldModel'''Fluffy''''' in the file ''site/models/'''fluffy'''.php''. Note: the actual screen of the view: ''site/views/'''fluffy'''/tmpl/default.php'' is required as well to make this example work.</translate>
</source>
+
  
Now that you have controller.php included and the base JController class imported, you have to define a class that extends the JController base class. This is the class leg you wrote before about and it is here where your action will happen. You can name this class as you like but, by convention, it is named after your component so you write:
+
<translate><!--T:21-->
 +
Breaking any of these bold conventions will lead to errors or a blank page.</translate>
  
<source lang="php">
+
<translate>
class <name>Controller extends JController
+
{
+
}
+
</source>
+
  
In this stage you have your first two files, the base file and the controller file. The base file loads the controller and the controller defines a class. So far so good and easy. The next step is to create an object of this class and to put it to work. So add these lines to your base file:
+
==Accessing a Joomlaǃ Component== <!--T:22-->
 +
</translate>
 +
<translate><!--T:23-->
 +
First we need to access the Joomla! platform, which is always accessed through a single point of entry. Using your preferred web browser, navigate to the following URL:</translate>
  
<source lang="php">
+
{| border=1
// Create the controller
+
| 1
$controller = new <name>Controller(); or whatever the name you gave your controller class
+
| <translate><!--T:24-->
 +
user access</translate>
 +
| <translate><!--T:25-->
 +
<tt><yoursite>/joomla/index.php</tt></translate>
 +
|-
 +
| 2
 +
| <translate><!--T:26-->
 +
administrator access</translate>
 +
| <translate><!--T:27-->
 +
<tt><yoursite>/joomla/administrator/index.php</tt></translate>
 +
|}
  
// Perform the Request task
+
<translate><!--T:28-->
$controller->execute(JRequest::getCmd('task'));
+
Hello World! example:</translate> <tt>localhost/joomla/index.php</tt>
</source>
+
  
From this point on things start happening by themselves. Up to now you were able to name files, except for the base one, and put them where you wanted, and name classes like you wanted because you were including the files by path/name and calling your classes yourself. (Well, only one file and only one class actually, but you could do it!) From now on the Joomla! framework will begin loading your files and calling your classes automatically, so you must be careful where you put your files, what you name them and what classes you define, because a single letter mismatch will make Joomla! fail.
+
<translate><!--T:29-->
 +
You can use the URL of the component, or a [[#Menu| Menu]] in order to navigate to the component. In this article we will discuss using the URL.</translate>
  
Where does the Joomla! framework get the data to play?. Well, the answer is easy: from the request, be it a GET request or a POST request. But you have NOT written anything else in the request except option=com_<name>. Where does the 'task' in the execute call come from? Do you really have a meaningful 'task' variable?
+
{| border=1
 +
| 1
 +
| <translate><!--T:30-->
 +
user access</translate>
 +
| <translate><!--T:31-->
 +
<tt><yoursite>/joomla/index.php?option=com_<component_name></tt></translate>
 +
|-
 +
| 2
 +
| <translate><!--T:32-->
 +
administrator access</translate>
 +
| <translate><!--T:33-->
 +
<tt><yoursite>/joomla/administrator/index.php?option=com_<component_name></tt></translate>
 +
|}
  
Yes, and therein lies a 'problem': Whether you pass a request or not, Joomla! will use its defaults to complete a request, making some errors difficult to spot.
+
<translate><!--T:34-->
 +
Hello World! example:</translate> <tt>localhost/joomla/index.php?option=com_helloworld</tt>
  
The controller->execute() call will make the Joomla! framework try to do a request that, in this case, will be the default task 'display', because you have not specified otherwise.
+
<translate>
 +
==MVC Basic Directory Structure== <!--T:35-->
 +
</translate>
 +
<translate><!--T:36-->
 +
Components are stored in a directory within your Joomla! installation, specifically at:
 +
*<tt>htdocs/<path_to_joomla>/components/com_<component_name>/</tt> .</translate>
  
<source lang="php">
+
<translate><!--T:37-->
class <name>Controller extends JController
+
The Hello World! component would be stored in <tt> htdocs/<path_to_joomla>/components/com_helloworld/</tt>.</translate>  
  
{
+
<translate><!--T:38-->
  function display()
+
A basic component will contain the following files within its directoryː</translate>
  {
+
<translate><!--T:39-->
    echo 'displaying';
+
*A html file that is just a security file with a background colorː <tt>index.html</tt></translate>
  }
+
<translate><!--T:40-->
}
+
*A php file that represents the controller itselfː <tt>controller.php</tt></translate>
 +
<translate><!--T:41-->
 +
*A php file that loads the controller classː <tt><component_name>.php</tt></translate>
 +
<translate><!--T:42-->
 +
*A php file that represents the model itselfː <tt>models/<component_name>.php</tt></translate>
 +
<translate><!--T:43-->
 +
*Another html file for background controlː <tt>models/index.html</tt></translate>
 +
<translate><!--T:44-->
 +
*A php file containing the default viewː <tt>views/<component_name>/tmpl/default.php</tt></translate>
 +
<translate><!--T:45-->
 +
*A xml file for adding a menu item typeː <tt>views/<component_name>/tmpl/default.xml</tt></translate>
 +
<translate><!--T:46-->
 +
*Another html file for background controlː <tt>views/<component_name>/tmpl/index.html</tt></translate>
 +
<translate><!--T:47-->
 +
*Another html file for background controlː <tt>views/<component_name>/index.html</tt></translate>
 +
<translate><!--T:48-->
 +
*A php file for displaying the viewː <tt>views/<component_name>/view.html.php</tt></translate>
  
</source>
+
<translate>
  
So that if your request contained a 'task=jump' parameter the controller would have tried to call a method (function) named jump in your controller class:
+
==JEXEC== <!--T:49-->
 +
</translate>
 +
<translate><!--T:50-->
 +
The following line is commonly found at the start of Joomla! PHP files:</translate>
  
 
<source lang="php">
 
<source lang="php">
 
+
<?php
class <name>Controller extends JController
+
    defined('_JEXEC') or die('Restricted Access');
{
+
  function jump()
+
  {
+
    echo 'jumping';
+
  }
+
}
+
 
+
 
</source>
 
</source>
  
Up to now you have delved with the controller part of the model. This is a new point of decision. You can stop here or go a step further and enter the view part. Stopping here will, at least, simplify your base file over Joomla! 1.1.x . Up to version 1.5, components usually had a switch statement that, depending on the given task (or whatever passed variable), called a function with several arguments to deliver the HTML result.
+
<translate><!--T:51-->
 
+
This enables for a secure entry point into the Joomla! platform. [[S:MyLanguage/JEXEC| JEXEC]] contains a detailed explanation.</translate>
With Joomla! 1.5, the switch is gone and your different tasks are methods in the controller.php file. Arguments are lost but all the needed variables are available from the framework so you will be able to retrieve them easily.
+
 
+
There is nothing that forces you to use the 'task' variable to drive the call because you can pass the value of any variable as the parameter to the execute method call. But in order to stick to the non-written rules, 'task' is usually used (and as it is treated specially by the system, it is a good idea to stick with it).
+
 
+
To trigger the views, you have to call the display() method of JController. Do this by inserting, in your method, a call to parent::display() as in the last line. At a minimum, your controller file should contain the following:
+
 
+
<source lang="php">
+
 
+
jimport('joomla.application.component.controller');
+
 
+
class <name>Controller extends JController
+
{
+
  function display()
+
  {
+
    parent::display();
+
  }
+
}
+
 
+
</source>
+
 
+
'''What's a view?'''
+
A view is a subset of data. It's the same concept as views in SQL parlance. You deliver different parts of your data with different views. So you could have a detailed data view and a resumed data view, the later presenting a subset of the whole data presented in the former.
+
 
+
As you can have multiple views Joomla! uses the 'views' folder in your component's base directory to keep things tidy. This folder is only a placeholder for your views. This means that you need to create a views folder with a hierarchy that looks like this:
+
 
+
<name> base folder
+
  controller.php
+
  <component_name>.php
+
  'views' folder
+
      view1 folder
+
      view2 folder
+
      ...
+
 
+
Inside the views folder other folders hold the files that build each view. The Joomla! framework includes a file named view.html.php that should exist in your view folder. A bit messy, I know, so I'll try to explain.
+
 
+
When you built your request, you included a variable named 'view' that tells the MVC model what view you want. Or, if you did not include it, you need to include it now because there is no such a thing as a default view. So your URL is something like:
+
 
+
 
+
<code><nowiki>http://example.com/index.php?option=com_<name>&view=<myview>[&task=<mytask>]</nowiki></code>
+
 
+
 
+
The task part may or may not exist. Remember that if you omit it you are defaulting to task=display. With this URL Joomla! is importing a file located at <site root dir>/components/<name>/views/<myview>/view.html.php. If this files or the path does not exist, Joomla! will fail. By simply swapping the value of the view, you deliver different views of your data.
+
 
+
Every request for a view requires that you also specify the format you are serving the view. There exist several well known formats such as html (the default one if none is specified), rss, etc. but you can use your own. If no format is specified in the request with the 'format=<myformat>' parameter a default value of 'html' is used.
+
 
+
The 'html' format makes the Joomla! framework wrap the response in whatever template your site is using so that you get a fully built HTML page. This way, with very little effort from you, you get back your page fully loaded with modules or whatever you had configured.
+
 
+
The specific format you are using is what you have written in the middle part of the name of the file in your view folder (The file we talked about a few lines before 'view.html.php'). If you use a different format like 'rss' your file should be named after it like view.rss.php. Get it?
+
 
+
As mentioned before, you can have formats other than html and Joomla! will not wrap the template on them. You could have a 'pdf' format to deliver your data in pdf format or even an 'ajax' format to deliver ajax responses to the front-end easily. Just construct your URL like
+
 
+
 
+
<code><nowiki>http://example.com/index.php?option=com_<name>&view=<myview>&format=ajax</nowiki></code>
+
 
+
 
+
to make the Joomla! Framework look for and load the file view.ajax.php located at <site root dir>/components/<name>/views/<myview>/ from where you can echo anything you want. It's that easy.
+
 
+
Anyway, to achieve your goal, you will need some code inside the view.<format>.php file. You have the view file, now you need the view class. You have to extend the JView class with your own class following the strict rules mentioned before. In this case, your class name must be built by concatenating the component name, the word 'View', and the view name. So your class name will be a capitalized <name>View<myview>. If your component is named travels and your view is named detail (URL ...?option=com_travels&view=detail) your view class must be:
+
 
+
<source lang="php">
+
 
+
class TravelsViewDetail extends JView
+
{
+
  function display($tpl=null)
+
  {
+
    echo 'blah, blah';
+
  }
+
}
+
 
+
</source>
+
 
+
Within this class you only have to feed the data you want to display for your component under this specific case. You can do this directly by delivering the [x]HTML code directly, or through calls to echo inside php tags, or be more subtle and use a layout (more on this later).
+
 
+
Can you have other functions besides display? I don't know. This is something that the gurus must answer. Where does the display function come from? Again, I don't know. Hope that someone else can help here.
+
 
+
But you can go a bit further. Up to this point you have a distributed framework that dissects your request in such a way that allow you to create small and very specific files to react only to specific types of requests. In this way the files that you must process can be very small and adjusted to the situation you are treating, speeding up the global response time of the system by not loading lots of code that will not ever be used with this kind of requests (as in Joomla! 1.x).
+
 
+
Having reached this point you can dissect a bit more and have another layer of detail: the final layout for the data you deliver.
+
 
+
A layout is a way to present the data for the view. The same data can be delivered under different visual aspects so that the same preparation code (inside the display function of your view class) can present the same data in different ways simply using different files. You 'inject' the view data in the layout template and use the template code to visually format it for presenting to the user.
+
 
+
As before, if you do not specify a layout you go with the 'default' layout. To use layouts you need to create a new folder under the related view folder named 'tmpl' and create a file named <mylayout>.php, nothing more nothing less. If you are using the default layout this file will be named 'default.php'.
+
 
+
The desired layout can be specified in the request by means of a 'layout=<mylayout>' variable or can be injected in the call if you manage to get the layout you want to use from other sources.
+
 
+
To use a layout your view class must call 'parent::display();' and pass the layout template name as a parameter. So your class should be:
+
 
+
<source lang="php">
+
 
+
class <Name>View<Viewname> extends JView
+
{
+
  function display($tpl=null)
+
  {
+
 
+
    // Prepare the data
+
    $data1 = ....
+
    $data2 = ....
+
    $moredata[] = array....
+
 
+
    // Inject the data
+
    $this->assignRef('variablename', $data1);
+
    $this->assignRef('variablename2', $data2);
+
    $this->assignRef('variablename3', $moredata);
+
 
+
    // Call the layout template
+
    $tpl = 'myTemplate';
+
    parent::display($tpl);
+
 
+
    or more directly
+
 
+
    parent::display('myTemplate');
+
  }
+
}
+
</source>
+
 
+
This way Joomla! will look for a file named 'myTemplate.php' in the 'tmpl' folder of the given view. Inside this template file you get a '$this' object that has access to the variables you have injected by means of '$this->variablename' that you can use in your constructions to deliver your [x]HTML *FINAL* code.
+
 
+
As you surely will have determined by this moment by yourself you can have different layouts files in your tmpl folder thus driving easily your output with simple, small, very specific files.
+
  
If you have been observant you will have noticed that you have not 'used' the 'model' part of MVC model. Here you have the last point of decision. You can go without this part or apply fully the model but I think I will keep this tale for another session. For sure I have already abused of my audience.
+
<translate>
 +
==Tutorials on Designing a MVC Component== <!--T:52-->
 +
</translate>
 +
<translate><!--T:53-->
 +
To learn how to design your own MVC Component, please complete the tutorial for your Joomla! version.</translate>
 +
<translate><!--T:54-->
 +
* [[S:MyLanguage/J1.5:Developing_a_MVC_Component/Introduction| Joomla! 1.5]]</translate>
 +
<translate><!--T:55-->
 +
* [[S:MyLanguage/J2.5:Developing_a_MVC_Component| Joomla! 2.5]]</translate>
 +
<translate><!--T:56-->
 +
* [[S:MyLanguage/J3.x:Developing_an_MVC_Component/Introduction| Joomla! 3.x]]</translate>
  
 +
<noinclude>
 +
<translate>
 +
<!--T:57-->
 
[[Category:Tutorials]]
 
[[Category:Tutorials]]
 
[[Category:Explanations]]
 
[[Category:Explanations]]
 
[[Category:Component Development]]
 
[[Category:Component Development]]
 +
[[Category:Beginner Development]]
 +
[[Category:Development Recommended Reading]]
 +
</translate>
 +
</noinclude>

Latest revision as of 12:50, 30 March 2016

Other languages:
Deutsch • ‎English • ‎español • ‎français • ‎Bahasa Indonesia • ‎italiano • ‎Nederlands • ‎română • ‎русский

This article is designed for Joomlaǃ beginners; it is designed to explain what a Joomlaǃ component is, and how it functions. When a specific component example will benefit the tutorial, this article will refer to an example component named Hello Worldǃ.

What is a Joomlaǃ Component

A component is a kind of Joomla! extension. Components are the main functional units of Joomla!; they can be seen as mini-applications. An easy analogy would be that Joomla! is the operating system and the components are desktop applications. Created by a component, content is usually displayed in the center of the main content area of a template (depending on the template).

Most components have two main parts: an administrator part and a site part. The site part is what is used to render pages of your site when they are requested by your site visitors during normal site operation. The administrator part provides an interface to configure and manage different aspects of the component and is accessible through the Joomla! administrator application.

Joomla! comes with a number of core components, like the content management system, contact forms and Web Links.

See also: Module, Plugin, Template

In the Joomla! framework, components can be designed using a flat model (returns HTML code for the requested page) or Model-View-Controller (herein referred to as MVC) pattern.

Introduction to MVC

MVC is a software design pattern that can be used to organize code in such a way that the business logic and data presentation are seperate. The premise behind this approach is that if the business logic is grouped into one section, then the interface and user interaction that surrounds the data can be revised and customized without having to reprogram the business logic. MVC was originally developed to map the traditional input, processing, output roles into a logical GUI architecture.

Model

The model is the part of the component that encapsulates the application's data. It will often provide routines to manage and manipulate this data in a meaningful way in addition to routines that retrieve the data from the model. In general, the underlying data access technique should be encapsulated in the model. In this way, if an application is to be moved from a system that utilizes a flat file to store its information to a system that uses a database, the model is the only element that needs to be changed, not the view or the controller.

View

The view is the part of the component that is used to render the data from the model in a manner that is suitable for interaction. For a web-based application, the view would generally be an HTML page that is returned to the user. The view pulls data from the model (which is passed to it from the controller) and feeds the data into a template which is populated and presented to the user. The view does not cause the data to be modified in any way, it only displays the data received from the model.

Controller

The controller is responsible for responding to user actions. In the case of a web application, a user action is generally a page request. The controller will determine what request is being made by the user and respond appropriately by triggering the model to manipulate the data appropriately and passing the model into the view. The controller does not display the data in the model, it only triggers methods in the model which modify the data, and then pass the model into the view which displays the data.

Joomla! Component Framework Explained

Model

In the Joomla framework, models are responsible for managing the data. The first function that has to be written for a model is a get function. It returns data to the caller. For this example, the caller will be the HelloWorldViewHelloWorld view. By default, the model named HelloWorldModelHelloWorld residing in site/models/helloworld.php is the main model associated to this view.

So let's have a quick look at the naming conventions with an example, since the naming convention are the actual magic, that make everything work:

The class HelloWorldViewHelloWorld resides in site/views/helloworld/view.html.php and will make use of the class HelloWorldModelHelloWorld in the file site/models/helloworld.php

So let's just assume we want to use an imaginary view fluffy, you would have to have:

The class HelloWorldViewFluffy which resides in site/views/fluffy/view.html.php. The view will make use of HelloWorldModelFluffy in the file site/models/fluffy.php. Note: the actual screen of the view: site/views/fluffy/tmpl/default.php is required as well to make this example work.

Breaking any of these bold conventions will lead to errors or a blank page.


Accessing a Joomlaǃ Component

First we need to access the Joomla! platform, which is always accessed through a single point of entry. Using your preferred web browser, navigate to the following URL:

1 user access <yoursite>/joomla/index.php
2 administrator access <yoursite>/joomla/administrator/index.php

Hello World! example: localhost/joomla/index.php

You can use the URL of the component, or a Menu in order to navigate to the component. In this article we will discuss using the URL.

1 user access <yoursite>/joomla/index.php?option=com_<component_name>
2 administrator access <yoursite>/joomla/administrator/index.php?option=com_<component_name>

Hello World! example: localhost/joomla/index.php?option=com_helloworld

MVC Basic Directory Structure

Components are stored in a directory within your Joomla! installation, specifically at:

  • htdocs/<path_to_joomla>/components/com_<component_name>/ .

The Hello World! component would be stored in htdocs/<path_to_joomla>/components/com_helloworld/.

A basic component will contain the following files within its directoryː

  • A html file that is just a security file with a background colorː index.html
  • A php file that represents the controller itselfː controller.php
  • A php file that loads the controller classː <component_name>.php
  • A php file that represents the model itselfː models/<component_name>.php
  • Another html file for background controlː models/index.html
  • A php file containing the default viewː views/<component_name>/tmpl/default.php
  • A xml file for adding a menu item typeː views/<component_name>/tmpl/default.xml
  • Another html file for background controlː views/<component_name>/tmpl/index.html
  • Another html file for background controlː views/<component_name>/index.html
  • A php file for displaying the viewː views/<component_name>/view.html.php


JEXEC

The following line is commonly found at the start of Joomla! PHP files:

<?php
    defined('_JEXEC') or die('Restricted Access');

This enables for a secure entry point into the Joomla! platform. JEXEC contains a detailed explanation.

Tutorials on Designing a MVC Component

To learn how to design your own MVC Component, please complete the tutorial for your Joomla! version.