Unless you understand the difference between a module and a component, you will find it very difficult to administer your Joomla installation. This article will explain the difference between modules and components and give examples of the usage of each of them.
Modules
Modules are usually small pieces of functionality designed to present information in your site. They can appear a number of times, on a number of pages in various positions. On the contrary components are a full blown application, usually quite complex and are to the main body if a page. Also each module can be viewed in various pages, and the position of each module can be easily changed. You are allowed to select the menu items where a module is displayed. A good example of the usage of this functionality is targeted advertising. If your site has various sections, you can create module for each section. Each module will contain a targeted advert for the section. Now instead of showing all the modules, all the time, you customise the visibility of the module such that each advert is displayed only in the relevant menu links. Below you can see a screenshot of how to choose the menu items where a module is displayed. The module is displayed in the highlighted menu items only.
Typical examples of standard Joomla modules are the following. As we can see the function of each of the modules mentioned is quite restricted.
Main / User / Top and other menus
Latest News
Popular Articles
Polls
Login Form
Syndication Details
etc...
3rd Party Modules include
Modules for displaying AdSense code
Modules for displaying featured articles
Modules for rotating images / scrolling images etc.
Installed modules can be found in the Modules > Site Modules menu, or Installers > Modules. Configuration of modules is typically very easy, and is done by clicking on the module in Site Modules page.
Components
On the other hand, a Joomla component is typically more complex, with extensive functionality and capabilities. A component can only be displayed in the main area of a page, and can only be displayed in a single page (usually). Links to components are usually done by creating menu items as shown in the image below. Components usually have a particular page or pages for their configuration.
Standard Joomla Components
FrontPage component - this is used to display the contents in the frontpage. One can decide how many items to show in the frontpage, in how many columns, how many articles to have an intro only or not and various other options. To place a content item in the frontpage, the frontpage option must be checked on.
WebLinks - this is a component where the user can configure different link categories and add items to each category.
Banners - allows a Joomla website to create and display banners for advertising purposes
3rd Party Components
Mafia Icons - a component which is used to turn favicons into ads.
Mafia Headlines - this component is used to give google XML sitemaps for Google News and Google Search Engine Crawler.
JoomlaCloner - allows you to backup and restore your Joomla website
Image Gallery Components - various image gallery components exist for Joomla
The Joomla Extensions site lists an extensive number of free and commercial templates. There are also reviews and voting mechanisms to help you decide exactly what extensions are best for your needs. Also the Components section of this site, describes a number of extensions which we have found to be very useful.
Warning: 3rd party extension may compromise your site's security. Always make sure that your code comes from a trusted source.
Some people want to call joomla out for components not being SEF but did you know, its not joomlas fault that the person who coded the component did not use the router that makes the component sef?
Routing - Joomla! Documentation - http://docs.joomla.org/Routing Joomla Routes and SEF - Joomla! Documentation - http://docs.joomla.org/Joomla_Routes_and_SEF
API Reference Project - Joomla! Documentation - http://docs.joomla.org/API_Reference_Project Using the installer API to support package installation - Joomla ... - http://docs.joomla.org/Using_the_installer_API_to_support_package_installation
How to use the database classes in your script - Joomla! Documentation - http://docs.joomla.org/How_to_use_the_database_classes_in_your_script Routing - Joomla! Documentation - http://docs.joomla.org/Routing
Joomla 1.5 API http://api.joomla.org/
You can find all the above at http://docs.joomla.org/Category:Development
Model-view-controller (MVC) is an architectural pattern used in software engineering. In complex computer applications that present lots of data to the user, one often wishes to separate data (model) and user interface (view) concerns, so that changes to the user interface do not impact the data handling, and that the data can be reorganized without changing the user interface. The model-view-controller solves this problem by decoupling data access and business logic from data presentation and user interaction, by introducing an intermediate component: the controller. It is common to split an application into separate layers: presentation (UI), domain, and data access. In MVC the presentation layer is further separated into view and controller. MVC encompasses more of the architecture of an application than is typical for a design pattern.
Model The domain-specific representation of the information on which the application operates. In Joomla it is MySQL database tables. Joomla model classes basically contains table schemes. Formerly known as mosTable.
View Renders the model into a form suitable for interaction, typically a user interface element. In Joomla it is set of View class and 1 or more templates.
Controller Processes and responds to events, typically user actions, and may invoke changes on the model. In Joomla process tasks. to trigger tasks, Every thing you need is to create methods in controller class with the same name as a task.
Joomla MVC Works as follows
User access Component (without any task or controller variables)
Default Controller Class constructed. Then controller call default view and displayed. Of course this controller render default view.
User click on any control. The control should have task and controller variables in URL, or only task. (E.g. index.php?option=com_mvc&controller=books&task=view)
If controller passed Joomla looks for new controller file and construct it. Then Render according the task.
Where is the Model? Model is used inside controllers' task functions. If it is for example Publish task, function publish will launch appropriate model to change published field.
File structure explanation
Component
Controllers
Controller1.php
Controller2.php
Views
View1
Tmpl
View1.php
View2.php
View.html.php
View2
Tmpl
View1.php
View2.php
View.html.php
Models
Model1.php
Model2.php
Admin.component.php
Controller.php
Controller folder contains controller classes. Foe example for Book Library, Book Category controller, Book controller, Book Publisher controller and so on.
Models contain Model classes. One Model class is equal to one DB table.
View folder contains view classes and templates. Every view class may have few templates that are stored in tmpl folder. Every view class has the same name view.html.php. And tmpl folder contains html template files. Admin.component.php is a component launch file and controller.php is default controller. Let's create most simple MVC Component.
We will create component called mvc.
The component we will create can be downloaded here.
Create folder administrator/components/com_mvc.
Create file administrator/components/com_mvc/admin.mvc.php. This is standard Joomla file that will be launched on access to the component.
File listing: admin.mvc.php
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );require_once (JPATH_COMPONENT.DS.'controller.php');if($controller = JRequest::getVar('controller')) { require_once (JPATH_COMPONENT.DS.'controllers'. DS.$controller.'.php');}$classname = 'MvcController'.ucfirst($controller);$controller = new $classname( );$controller->execute( JRequest::getVar('task'));$controller->redirect();?>
Line 2 is to protect document from direct access. line 4 to require default controller. This controller will render pages if controller GET/POST variable is not set. 6-8 to include other controller class if controller GET/POST variable was set. 10-11 create new controller class. 13-14 execute controller or render page according task
This file is quite simple. First it includes controller, then create class, then execute.
Create administrator/components/com_mvc/controller.php. This is controller we includes in line 4 of admin.mvc.php. This controller will be launched if there was not any GET/POST controller variable found.
File listing: controller.php
<?phpjimport('joomla.application.component.controller');class MvcController extends JController{ function display() { parent::display(); }}?>
2d line to include Joomla API controller class for extending new one created in line 4. Function display render default view. More about that later.
Basically that is all we need. If instead parent::display(); we put echo "test this"; we will see this on the main page of the component. But let's create fully structured MVC component. For that we need to create View for this controller.
Default view should have the same name as the component.
Create folder administrator/components/com_mvc/views.
Create folder administrator/components/com_mvc/views/mvc. To create default view we need to name this folder as we named component.
Create file administrator/components/com_mvc/view/mvc/view.html.php. This file will have view class. We do not use "mvc" word in the name of this file. Every view class has different folder but the same file name. it is view.html.php
File listing: views/mvc/view.html.php
<?phpjimport( 'joomla.application.component.view');class MvcViewMvc extends JView{ function display($tpl = null) { JToolBarHelper::title(JText::_( 'MVC Main' ), 'generic.png'); parent::display($tpl); }}?>
Line 2 we include Joomla API View class to extend new one we create in line 3. 5-10 create function display(). This function is called by default, by MvcController class if not task called.
I used JToolBarHelper::title() to display tile. Here you can also use other JToolBarHelper methods. Also here you can make DB queries and prepare HTML elements to render such as Published Yes/No radio button set, Public/Registered/Special access select list, pageNav class to create navigation and other. Please, note the difference. In this view class we use Models(tables) and SQL queries to get information to create HTML elements to render. But in controller we make SQL queries and use models to control and operate records. Something like delete, publish, save, ...
Function display() will be called by default if there is no GET/POST task variable set. parent::display($tpl); will call default template if POST/GET layout variable is not set. So let's create default template.
Create file administrator/components/com_mvc/view/mvc/tmpl/default.php.
File listing: views/mvc/tmpl/default.php
<h1>MVC Main</h1>; <a href="index.php?option=com_mvc&controller=list">List something</a>;
This is HTML document. This template will display H1 header and link to other controller. This is complete MVC minimum component. We only lack Models.
Please, save all files and try to call your new component. Login to Joomla admin and put to address line /index.php?option=com_mvc. Before you continue please, be sure all code works fine till this point.
Everything you will read below just to explain some more things. How to control different tasks and different Views within one Controller. For that, let's create another section that will be controlled by Controller list. First link to controller is without task so we will call default View again and create some more links with tasks to call other Views.
Lets imagine we clicked on index.php?option=com_mvc&controller=list link. That means we enable following lines in admin.mvc.php.
File listing: views/mvc/tmpl/default.php
if($controller = JRequest::getVar('controller')) { require_once (JPATH_COMPONENT.DS.'controllers'. DS.$controller.'.php');}
That means we need to create file administrator/components/com_mvc/controllers/list.php.
Create it.
File listing: controllers/list.php
<?phpjimport('joomla.application.component.controller');class MvcControllerList extends JController{ function __construct() { parent::__construct(); } function display() { JRequest::setVar('view', 'list'); parent::display(); }}?>
JRequest::setVar('view', 'list'); tells this controller to look for View in views/list folder. If we skip or delete this line, this controller class will look for View in views/mvc default folder. So if we told controller to look for View in list folder, let's create it.
Create folder administrator/components/com_mvc/view/list
Create folder administrator/components/com_mvc/view/list/tmpl
Create file administrator/components/com_mvc/view/list/view.html.php
File listing: views/list/view.html.php
<?phpjimport( 'joomla.application.component.view');class MvcViewList extends JView{ function display($tpl = null) { JToolBarHelper::title(JText::_( 'List' ), 'generic.png' ); parent::display($tpl); }}?>
I won't explain this file. It is the same as views/mvc/view.html.php, only name of the class is different.
Create file administrator/components/com_mvc/view/list/tmpl/default.php
File listing: views/list/tmpl/default.php
<h1>This is Default.php</h1><P>This file launch automatically is nothing passed to JRequest::setVar('layout', 'something');</P><a href="index.php?option=com_mvc&controller=list&task=test"> test</a><BR><a href="index.php?option=com_mvc&controller=list&task=new_task"> new_task</a><BR>
That is it. It should work ok now. I mean you can easily navigate from MVC component homepage to list controller homepage.
But this file will display few links that have different tasks within same Controller. Here is how you can handle them. Start with task=new_task.
Create function new_task in File controllers/list.php.
File listing after adding function: controllers/list.php
<?phpjimport('joomla.application.component.controller');class MvcControllerList extends JController{ function __construct() { parent::__construct(); } function display() { JRequest::setVar('view', 'list'); parent::display(); } function new_task() { JRequest::setVar('view', 'list'); JRequest::setVar('layout','newtask'); parent::display(); }}?>
We created function new_task() in line 13-18, that will be called if GET/POST task variable equal to new_task. JRequest::setVar('view', 'list'); tells controller to look for View in views/list/ folder. JRequest::setVar('layout','newtask'); tells controller that View should display newtask template or really newtask.php. Let's create it.
Create file administrator/components/com_mvc/view/list/tmpl/newtask.php
File listing: views/list/tmpl/newtask.php
<h1>This is new task</h1><P>This task1, task2, new_task triger the same function </P><a href="index.php?option=com_mvc&controller=list">Go back</a>
This file displays some text and link back to list controller homepage. Save all files and try it. Try to navigate to list controller homepage and click on new_task link. If you see text of above listing you are done. Congratulation. You have just created new task.
One more thins to know. It is possible to call same method with different tasks. For that add $this->registerTask( 'test' , 'new_task' ); to construct method of controllers/list.php.
Final listing: controllers/list.php
<?phpjimport('joomla.application.component.controller');class MvcControllerList extends JController{ function __construct() { parent::__construct(); $this->registerTask( 'test' , 'new_task' ); } function display() { JRequest::setVar('view', 'list'); parent::display(); } function new_task() { JRequest::setVar('view', 'list'); JRequest::setVar('layout','newtask'); parent::display(); }}?>
Save all files and now try click test link on list controller homepage.
Later I'll write a lesson on how to use Models and we will create simple guestbook component.
Available extension parameter types and how to use them When you create an extension (component, module, plugin or template) you can implement parameters in the .XML file. With this parameters you can set options, and use them in the main file, the .PHP file. There are 20 extension parameter types available in Joomla! 1.5. You can use them easily and in this document you will find a description for all of them. You can also add your own parameters, but this will not be described in this article.
Table of contents
XML file
Parameters
Core parameters
Calendar
Category
Editors
File list
Folder list
Help sites
Hidden
Image list
Language
List
Menu
Menu item
Password
Radio
Section
Spacer
SQL
Text
Text area
Time zones
XML file You need an XML file for every extension. It is used mainly to install the extension. A particular XML file looks like this:
<?xml version="1.0" encoding="utf-8"?> <install version="1.5" type="extension type"> <name>Name of your extension</name> <creationDate>Created Date</creationDate> <author>Your name</author> <authorEmail>Your e-mail address</authorEmail> <authorUrl>Your website</authorUrl> <copyright>Copyright</copyright> <license>License, for example GNU/GPL</license> <version>Version of the extension</version> <description>Description of the extension</description> <files> <filename>add the files between those tags</filename> </files> <languages> <language tag="en-GB">Language file</language> </languages> <params> Place the parameters between these tags. </params> </install>
Parameters The parameters should be placed between the <params> and </params> tags. You can also add groups. For example, the 'Advanced' group. This will look like this: <params> 'Normal' parameters </params> <params group="advanced"> Advanced parameters </params>
Note: You can not add groups to templates.
Core Parameters There are 20 parameter types available within your Joomla! 1.5 installation.
These are: Calendar, Category, Editors, File list, Folder list, Help sites, Hidden, Image list, Language, List, Menu, Menu item, Password, Radio, Section, Spacer, SQL, Text, Text area and Time zones, and will be described here in detail. Each one is described in the following order:
Description
Screen shot of output
XML file
Implementation in PHP file
Reference
Calendar Description: This parameter shows a text box where you can fill in the date. You can also choose the date from a calendar, which pops up after you clicked on the icon next to the text box. Screen shot:
XML file: Use the following code in the XML file to create a parameter like this. Name: The name used to implement in the PHP file. Type: For a calendar parameter, use 'Calendar'. Default: The default date. Label: The name displayed at the output of the parameter. Description: The description displayed as a tool tip. Format: The format of the date.
<param name="calendar" type="Calendar" default="5-10-2008" label="Calendar" description="" format="%d-%m-%Y" />
PHP file:
For example, get the parameter, named publish_up, like this:
$publish_up = new JDate($row->publish_up);
Reference: administrator\components\com_content\admin.content.html.php, 122-168
Category Description: This parameter shows a drop down list of categories from a section. Screen shot:
XML file: Use the following code in the XML file to create a parameter like this.
Name: The name used to implement in the PHP file. Type: For a category parameter, use 'Category'. Label: The name displayed at the output of the parameter. Description: The description displayed as a tool tip. Section: The section ID number, can be found in the Section Mana
<param name="category" type="Category" label="Category" description="" section="3" />
PHP file:
For example, get use the parameter, named category, like this:
$category[$section->id][]
Reference: administrator\components\com_content\controller.php, 452-530
Editors Description: This parameter shows a drop down list of the available WYSIWYG editors. Screen shot:
XML file: Use the following code in the XML file to create a parameter like this.
<param name="editors" type="Editors" default="" label="Editors" description="" />
Name: The name used to implement in the PHP file. Type: For an editor parameter, use 'Editor'. Default: The default editor. Label: The name displayed at the output of the parameter. Description: The description displayed as a tool tip.
PHP file:
For example, get the parameter, named editors, like this:
