Joomla – Component Development

 

Joomla is written in PHP and it uses object-oriented programming (OOP) techniques and software design patterns. Joomla stores data in a MySQL, MS SQL , or PostgreSQL database, and it includes features such as page caching, RSS feeds, printable versions of pages, news flashes, blogs, polls, search etc.

 

Advantages

Open source– The best advantage of using the Joomla CMS is that it is an open source platform and is available for free. All the source codes are available for free and the user can reuse it as per the requirements.

Usability– Joomla CMS can be used for making any kind of websites, from the small, simple and personal blog to the large corporate website or any e-commerce website. There are a plenty of options and features available in Joomla CMS enables the user to make a website with all necessary modules.

Accessibility– Joomla Content Management System is very easy to use and even a person having no technical knowledge about HTML programming can make a website using it. This is one of the major advantage of Joomla CMS which is making it increasingly popular. We just need to install Joomla CMS and we are all set to create, edit and manage the content in our website. We do not need to have any prior knowledge about web development to make a website using the Joomla CMS.

Themes and templates – Joomla CMS comes with various attractive themes and templates. We can make our website look attractive by using different inbuilt templates and themes. We can select the theme and template which goes well with our niche and topic. The Selecting or changing the existing theme and template is absolutely easy in Joomla CMS as like worpress.

Trouble-free Migration – If we have a website in Joomla we can migrate to any other server with ease. Since Joomla have a lot of advantages, one of the main disadvantage is that the learning curve is larger than as compared to other open source platforms.

You can download the latest version of joomla from here.

 

Joomla Components

Components are the largest and most complex extensions and it can be seen as mini-applications. A component as something that has it’s own functionality, it’s own database and it’s own presentation. So if we install a component, we add an application to our website. Most components have two parts: a site part and an administrator part. Every time a Joomla page loads, one component is called to render the main page body. For example, Content (com_content) is the component which handles the display of content; users can view at the frontend of our site and, as an administrator, we can edit the content. Components are the major portion of our page because a component is driven by a menu item and every menu item runs a component.

Examples: Content (com_content), Banners (com_banners), Contact (com_contact), News Feeds (com_newsfeeds) and Web Links (com_weblinks)

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

 

Accessing a Joomla component

In Joomla, installed components are accessing like index.php?option=com_, when we enter /index.php?option=com_ line in browser then Joomla tries to find and load the file com_/.php from whatever the folder we have installed Joomla into. So if our component is ‘com_helloworld’ we should have a ‘com_helloworld’ folder and a file named ‘helloworld.php’ inside of it.

 

Joomla component creation with a sample component Quote of the day

The component has three main parts:

• models – They manage the data

• controllers – They perform tasks, set and get the states of the models and ask the views to display

• views – They display the content according to the type (error, feed, html, json, raw, xml) and the layout chosen by the controllers

It is not necessary to have all these parts for a component, but it should have at least a controller file
and view file.

In this section we are going to create a simple component called ‘Quote of the Day’. There are two sections for this component

1. Administrator part to manage quotes

2. Site part to view quotes

First we are going to create the administrator part for the component. These are the steps to create the adminstrator part

1. Create a component folder

To create a component, first we have to create a folder com_, since our component name is quote of the day, the folder name should be com_quoteoftheday.

2. Create a base file

The next step is to create a base file for the component, the base file name should be like .php. Here it is quoteoftheday.php, we will update this file after creating the controller.php

3. Create a controller.php File

The next step is to including a controller file in our base file. The controller file can be named anything we want, but by convention it is called ‘controller.php’. In our base file (quoteoftheday.php), the following code is typical:

require_once(JPATH_COMPONENT . ‘/controller.php’);

Our controller.php file can be created anywhere we want because we are including it by path but if we have written exactly the former line it should be created in the same location where our base file is located because JPATH_COMPONENT holds the path where the executing component base file is.

So create a controller.php and make a reference to the controller library inside by importing it with:

jimport(‘joomla.application.component.controller’);

Now we have controller.php included and the base JControllerLegacy class imported, we have to define a class that extends the JControllerLegacy base class. JControllerLegacy is a core class in Joomla and able to manage controllers. We can name this class as we like but, by convention, it is named after our component so we write:

class Controller extends JControllerLegacy

{

}

For our component this should be like

class QuoteofthedayController extends JControllerLegacy

{

}

In this stage we have first two files, the base file and a controller file. The base file loads the controller and the controller defines a class. The next step is to create an object of this class and to put it to work. So add these lines to our base file:

// Get an instance of the controller prefixed by

$controller = JControllerLegacy::getInstance(”);

// Perform the Request task

$controller->execute(JFactory::getApplication()->input->getCmd(‘task’));

// Redirect if set by the controller

$controller->redirect();

The controller->execute() call will make the Joomla Platform try to do a request that, in this case, will be the default task ‘display’, because you have not specified otherwise.

class Controller extends JControllerLegacy

{

function display()

{

echo ‘displaying’;

}

}

Our final base file should be like

// No direct access to this file

defined(‘_JEXEC’) or die(‘Restricted access’);

// import joomla controller library

jimport(‘joomla.application.component.controller’);

// Get an instance of the controller prefixed by Quoteoftheday

$controller = JControllerLegacy::getInstance(‘Quoteoftheday’);

// Perform the Request task

$input = JFactory::getApplication()->input;

$controller->execute($input->getCmd(‘task’));

// Redirect if set by the controller

$controller->redirect();

4. Create a new folder called controllers and create a controller file named quoteoftheday.php file inside it with code for our actions like add,view,edit and delete

class QuoteofthedayControllerQuoteoftheday extends JControllerLegacy

{

public function add()

{

JRequest::checkToken() or jexit(JText::_(‘JINVALID_TOKEN’));

$user = JFactory::getUser();

$quote= htmlspecialchars(JRequest::getVar(‘quote’, null,’post’,”,JREQUEST_ALLOWRAW));

$author= htmlspecialchars(JRequest::getVar(‘author’, null,’post’,”,JREQUEST_ALLOWRAW));

if($user->id!=0)

{

$db = JFactory::getDbo(); // Get a db connection.

$query = $db->getQuery(true); // Create a new query object.

$columns = array(‘userId’,’quote’,’author’,’createdOn’,’updatedOn’,);

$values = array($user->id, $db->quote($quote),$db->quote($author),$db->quote(time()),$db->quote(time()));

$query

->insert($db->quoteName(‘#__quotes’))

->columns($db->quoteName($columns))

->values(implode(‘,’, $values)); / / Prepare the insert query.

$db->setQuery($query); // Set the query using our newly populated query object and execute it.

$db->query();

$this->setRedirect(‘index.php?option=com_quoteoftheday’);

}

public function edit()

{

// code to edit the quotes in the database

}

public function delete()

{

//code to delete the quotes from the database

}

}

5. Creating view part

Now we can discuss about the view part of the component. The different tasks given to the controller are methods in the controller.php file. All the needed variables are available from the platform so we will be able to retrieve them easily.

There is nothing that force us to use the ‘task’ variable to drive the call because we 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.

To trigger the views, we have to call the __construct() method of JControllerLegacy. Do this by inserting, in our method, a call to parent::__construct() as in the last line. At a minimum, our controller file should contain the following:

jimport(‘joomla.application.component.controller’);

class Controller extends JControllerLegacy

{

}

A view is a subset of data. We deliver different parts of our data with different views. So we 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 we can have multiple views Joomla uses the ‘views’ folder in our component’s base directory to keep things tidy. This folder is only a placeholder for our views. This means that we 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

…

For our quote of the day component, the views folder hierarchy that must looks like this:

‘views’ folder

add folder

tmpl

default.php

view.html.php

edit folder

tmpl

default.php

view.html.php

quoteoftheday folder

tmpl

default.php

view.html.php

Inside the views folder other folders hold the files that build each view. The Joomla Platform includes a file named view.html.php that should exist in our view folder.

When we built our request, we have to include a variable called ‘view’ that tells the MVC model what view we want to display. So with the view variable our URL is something like:

/index.php?option=com_&view=[&task=]

for quote of the day component, we can use the following url to call ‘add’ view

/index.php?option=com_quoteoftheday&view=add

The task part may or may not exist. If we omit this task part, then Joomla will call the default to task=display. With this URL, Joomla is importing a file located at /components//views//view.html.php. If this files or the path does not exist, Joomla will fail and throw an error.

Every request for a view requires that we also specify the format we are serving the view. There exist several well known formats such as html (the default one if none is specified), rss, etc. but we can use our own. If no format is specified in the request with the ‘format=’ parameter a
default value of ‘html’ is used.

The ‘html’ format makes the Joomla Platform wrap the response in whatever template our site is using so that we get a fully built HTML page. This way, with very little effort from us, we get back our page fully loaded with modules or whatever we had configured.

The specific format we are using is what we have written in the middle part of the name of the file in our view folder ( The file we talked about a few lines before ‘view.html.php’ ). If we use a different format like ‘rss’ our file should be named after it like view.rss.php or if format is like ‘pdf’ then our file should be named like view.pdf.php. We can use the ‘ajax’ format to deliver the ajax response to the friend end easily, just construct the URL like

/index.php?option=com_&view=&format=ajax

Anyway, to achieve our goal, we will need some code inside the view..php file. Now we have the view file, so we need the view class. We have to extend the JView class with our own class following the strict rules mentioned before. In this case, our class name must be built by concatenating the component name, the word ‘View’, and the view name. So our class name will be a capitalized View.

For our quote of the day component, we have a view named as add (URL …?
option=com_quoteoftheday&view=add) and our view class must be like :

class QuoteofthedayViewAdd extends JViewLegacy

{

function display($tpl=null)

{

parent::display($tpl);

}

}

Within this class we only have to feed the data that we want to display for our component under this specific case. We can do this by adding HTML codes directly, or through calls to echo inside php tags, or be more suitable and use a layout.

 

Creating a layout for view

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 our view class) can present the same data in different ways simply using different files. We can ‘inject’ the view data in the layout template and use the template code to visually format it for presenting to the user.

As we discussed before, if we do not specify any layout then Joomla will go with the ‘default’ layout. To use our layouts, we need to create a new folder under the related view folder named
‘tmpl’ and create a file named .php. If we 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=’ variable.

To use a layout our view class must call ‘parent::display();’ and pass the layout template name as a parameter. So our class should be:

class View extends JViewLegacy

{

function display($tpl=null)

{

// Prepare the data

$data1 = ….

$data2 = ….

$moredata[] = array….

// Inject the data

$this->variablename = $data1;

$this->variablename2 = $data2;

$this->variablename3 = $moredata;

// Call the layout template. If no tpl value is set Joomla will look for a default.php file

$tpl = ‘myTemplate’;

parent::display($tpl);

}

}

This way Joomla will look for a file named ‘myTemplate.php’ in the ‘tmpl’ folder of the given view. Inside this template file, we get a ‘$this’ object that has access to the variables we have injected by means of ‘$this->variablename’ that we can use in our constructions to deliver our final code.

Adding a 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. If we take Quoteoftheday component as an example , the caller will be the QuoteofthedayViewQuoteoftheday view. By default, the model named QuoteofthedayModelQuoteoftheday residing in site/models/quoteoftheday.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 QuoteofthedayViewQuoteoftheday resides in site/views/quoteoftheday/view.html.php and will make use of the class QuoteofthedayModelQuoteoftheday in the file site/models/quoteoftheday.php

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

The class QuoteofthedayViewFluffy which resides in site/views/fluff /view.html.php. The view will make use of QuoteofthedayModelFluffy 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.

The site/models/quoteoftheday.php sample code

<?php

// No direct access to this file

defined(‘_JEXEC’) or die;

jimport(‘joomla.application.component.model’);

class QuoteofthedayModelQuoteoftheday extends JModelLegacy

{

function getQuotes()

{

$user = JFactory::getUser();

$db =& JFactory::getDBO();

$query = ‘SELECT * FROM #__quotes ORDER BY rand() LIMIT 5’;

$db->setQuery( $query );

$quotes = $db->loadAssocList();

$quotes= $quotes;

return $quotes;

}

}

The QuoteofthedayViewQuoteoftheday class asks the model for data using the get method of the JView class:

site/views/quoteoftheday/view.html.php

/**

* HTML View class for the Quoteoftheday Component

*/

class QuoteofthedayViewQuoteoftheday extends JViewLegacy

{

function display($tpl=null)

{

$this->quotes= $this->get(‘Quotes’);

parent::display($tpl);

}

?>

Site Part

The next step is to create the site part for the component. In the site part, we just displaying the quotes which created by the administrator

Steps to create the site part for the quote of the day component

1. Create a folder com_quoteoftheday inside /components/

2. Create the controller.php file with the following contents

<?php

defined(‘_JEXEC’) or die(‘Restricted access’);

jimport(‘joomla.application.component.controller’);

class QuoteofthedayController extends JControllerLegacy

{

}

3. Create file quoteoftheday.php

<?php

// No direct access to this file

defined(‘_JEXEC’) or die(‘Restricted access’);

// import joomla controller library

jimport(‘joomla.application.component.controller’);

// Get an instance of the controller prefixed by Quoteoftheday

$controller = JControllerLegacy::getInstance(‘Quoteoftheday’);

// Perform the Request task

$input = JFactory::getApplication()->input;

$controller->execute($input->getCmd(‘task’));

// Redirect if set by the controller

$controller->redirect();

4. Next is to create a view file for the quotes, for this we have to create the following files

views/quoteoftheday/view.html.php

<?php

// No direct access to this file

defined(‘_JEXEC’) or die(‘Restricted access’);

// import Joomla view library

jimport(‘joomla.application.component.view’);

jimport( ‘joomla.utilities.utility’ );

/**

* HTML View class for the Quoteoftheday Component

*/

class QuoteofthedayViewQuoteoftheday extends JViewLegacy

{

function display($tpl=null)

{

$this->quotes= $this->get(‘Quotes’); // calling a method getQuotes() in the model

parent::display($tpl);

}

}

?>

/views/tmpl/default.php

<?php

defined(‘_JEXEC’) or die(‘Restricted access’);

$user = JFactory::getUser();

$host = JURI::root();

$document =& JFactory::getDocument();

$document->addStyleSheet($host.’administrator/components/com_quoteoftheday/css/style.css’);

?>

<?php if($user->id!=0)

{

$menu1=JRoute::_(‘index.php?option=com_quoteoftheday&view=add’);?>

<?php $menu2=JRoute::_(‘index.php?option=com_quoteoftheday’);?>

<div class=”quote_menu”> <a href= >Add Quote</a> | <a href=<?php echo $menu2; ?> >View Quotes</a></div>

<?php

}

?>

<table style=”width:100%;text-align:center;”>

<tr style=”background:black;color:white”>

<th>ID</th>

<th>Quote</th>

<th>Author</th>

<th>Created On</th>

<th>Actions</th>

</tr>

<?php

$row = 1;

foreach($this->quotes as $quote)

{

if($row == 1)

{

$row = 0;

?>

<tr style=”background:#F1F1F1″>

<?php

}

else

{

$row++;

?><tr>

<?php

}?>

<td><?php echo $quote[‘id’];?></td>

<td style=”width:500px;text-align: justify;”><?php echo nl2br($quote[‘quote’]);?>

</td>

<td><?php echo ucwords($quote[‘author’])?></td>

<td><?php echo date(“M d Y h:i:s A “,$quote[‘createdOn’])?></td>

<td><a href=”index.php?option=com_quoteoftheday&view=edit&id=<?php echo $quote[‘id’]?>”>Edit</a> | <a href=”index.php?

option=com_quoteoftheday&task=quoteoftheday.delete&id=<?php echo $quote[‘id’]?>”

onclick=”return confirm(‘Are you sure to delete this quote?’)”>Delete</a>

</td>

</tr>

<?php }

?>

</table>

</div>

Setting Model Part

As we discussed before, we have to create a model for managing data. The model name should be quoteoftheday.php for the quoteoftheday component. Create a file quoteoftheday.php inside the models folder and add the following lines of code in it.

models/quoteoftheday.php

<?php

// No direct access to this file

defined(‘_JEXEC’) or die;

jimport(‘joomla.application.component.model’);

class QuoteofthedayModelQuoteoftheday extends JModelLegacy

{

function getQuotes()

{

$user = JFactory::getUser();

$db =& JFactory::getDBO(); // create database connection

$query = ‘SELECT * FROM #__quotes ORDER BY rand() LIMIT 5’;

$db->setQuery( $query );

$quotes = $db->loadAssocList();

$quotes= $quotes;

return $quotes;

}

}

The above function getQuotes() can be called from our view file by using $this->get(‘Quotes’).

Thus, we have completed the site part creation for the quoteoftheday component. Now we can discuss how we set up these component as an install package.

Packaging an installation zip file

1. Create a directory com_quoteoftheday ( outside the joomla installation directory ), it should contains the following files

quoteoftheday.xml

admin/quoteoftheday.php

admin/index.html

admin/controller.php

admin/controllers/quoteoftheday.php

admin/views/add/tmpl/default.php

admin/views/add/view.html.php

admin/views/edit/tmpl/default.php

admin/views/edit/view.html.php

admin/views/quoteoftheday/tmpl/default.php

admin/views/quoteoftheday/view.html.php

admin/models/quoteoftheday.php

admin/sql/install.sql

admin/sql/uninstall.sql

site/controller.php

site/index.html

site/quoteoftheday.php

site/css/style.css

site/views/quoteoftheday/view.html.php

site/views/quoteoftheday/tmpl/default.php

site/models/quoteoftheday.php

In the quoteoftheday.xml, we should specify the folder locations,details and details about the component etc. The following are the sample quoteoftheday.xml file

<?xml version=”1.0″ encoding=”utf-8″?>

<extension type=”component” version=”3.2.1″ method=”upgrade”>

<name>Quote of the Day</name>

<creationDate>March 2014</creationDate>

<author>Shanil</author>

<authorEmail>shanil@metclouds.com</authorEmail>

<copyright>Copyright Info</copyright>

<license>License Info</license>

<version>0.0.1</version>

<description>Thank you for installing the Quote of the day component for

Joomla 3.2</description>

<install folder=”admin”>

<sql>

<file driver=”mysql” charset=”utf8″>sql/install.sql</file>

</sql>

</install>

<uninstall folder=”admin”>

<sql>

<file driver=”mysql” charset=”utf8″>sql/uninstall.sql</file>

</sql>

</uninstall>

<files folder=”site”>

<filename>index.html</filename>

<filename>controller.php</filename>

<filename>quoteoftheday.php</filename>

<filename>quoteoftheday.php</filename>

<folder>views</folder>

<folder>models</folder>

<folder>css</folder>

</files>

<administration>

<menu>Quote of the day</menu>

<files folder=”admin”>

<filename>index.html</filename>

<filename>quoteoftheday.php</filename>

<filename>controller.php</filename>

<folder>sql</folder>

<folder>controllers</folder>

<folder>models</folder>

<folder>views</folder>

<folder>css</folder>

</files>

</administration>

</extension>

The database table creation can be specified in the install.sql file

Our install.sql file should be like

 

CREATE TABLE IF NOT EXISTS `#__quotes` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`quote` longtext NOT NULL,

`author` varchar(255) NOT NULL,

`userId` int(11) NOT NULL,

`createdOn` int(11) NOT NULL,

`updatedOn` int(11) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

The unistall.sql file should contains the code for removing the database table.

Our unistall.sql file should have the following lines

DROP TABLE IF EXISTS `#__quotes`;

2. Compress the folder as zip file

Install the component from admin area

1. Login into the admin area

2. Click on the Extension manager under the Extension menu

3. Select the zip file of the component and install it

Using Quote of the Day Component

1. If the component is installed successfully then the menu item ‘Quote of the Day’ should appear inside the components menu in the admin area.

2. Click on the Quote of the Day component, there you should see the default quotes which already added to the database. We can add/edit or delete the quotes from here.

Adding Quote of the Day Component to a menu

1. Click on the Menu Manager under the ‘Menus’ tab

2. Click on the ‘New’ button in the left pane

3. Enter the Menu title

4. Select the Menu item type as quote of the day

5. Select the Menu location

6. Click on the Save button to save the menu item

Now, the new menu item will display on the menu location which you selected, click on this new menu item to view the quotes.

Possible errors while installation

1. Installation file could not found

This error happends when there is no installation file ( install.xml ) in the component folder.

2. Installation unexpectedly terminated:

This error is due to wrong component name in xml file or in the controller name.

Module for Quote of the day component

A component is driven by a menu item which means we have to create a menu item to connect the each component. I have created a module for quote of the day component to display the components
in the home page. This quote of the day component should be installed before installing the quote of the day module.

These are the steps to install quote of the day module

1. Login into the admin area

2. Click on the Extension manager under the Extension menu

3. Select the zip file of the module and install it

Adding quote of the module to the home page

1. Click on Extensions -> Module Manager

2. Click on the quote of the day module from the list

3. Enter the title for the module and select the position which we want to show it

4. Change the Status to Published

5. Click on the Menu Assignment tab select the pages which we want to display the quotes

6. Click on the save button to save the changes and now the quotes will display randomly in the pages which you selected

The quote of the day component and module can be download from here

 

Screenshots

References:

http://docs.joomla.org/Absolute_Basics_of_How_a_Component_Functions

http://docs.joomla.org/J3.2:Developing_a_MVC_Component/Adding_a_view_to_the_site_part