Techgig Webinar: Joomla Introduction and Module Development June 2012

Component and Module Development in Joomla! 2.5

Vishwash Gaur

© 2012 Vishwash Gaur. All rights reserved. All registered trademarks, logos, products and service names belong to their

respective owners.Image Credit: http://ayadipro.com/blog/high-tech-education/25-improvements-in-joomla-2-5/

Disclaimer: Images used on this slide are for representative purposes only and belong to their respective owners.

Books are boring!

Sit back, relax and let the human brain process something new!

Pre-requisites Basic knowledge of HTML, PHP and MySQL Interest in MVC and CMS frameworks to reduce

development time A web server with PHP/MySQL installed on it Joomla! 2.5 package downloaded and installed

◦ it can be downloaded from http://www.joomla.org/download.html

NOTE: This webinar is focused for the beginners in Joomla! and would cover only a basic overview due to limited time. Further details can be discussed separately later.

Agenda Overview

◦ Content Management System◦ What is Joomla!?◦ Joomla! Extensions

Module Overview Programming Conventions & Base Structure

Component Overview Programming Conventions & Base Structure

Hands on workshop◦ How to download and install Joomla!?◦ How to install Joomla! Extensions?

Joomla! Module and Component Development – Hands on workshop◦ Joomla! 2.5 Module Development◦ Joomla! 2.5 Component Development - skipped

FAQ’sAndQ&A

OverviewWhat is CMS?Why use CMS?What is Joomla!?Joomla Extensions

Overview Procedural code Vs Object Oriented Code Difficulties with Object Oriented Code Solution to focus on interfaces rather than

implementation◦ Content Management System

Content Management System A content management system (CMS) is a

computer system that allows publishing, editing, and modifying content as well as site maintenance from a central page. It provides a collection of procedures used to manage workflow in a collaborative environment.

#Source: Wikipedia: http://en.wikipedia.org/wiki/Content_management_system

#

Common Website Problems

No easy internal content search

Growing cost to maintain

Poor code structure issues

Not SEO friendly

Limited features

No dynamic updates possible

Easy Solution - CMS Dynamic Content and Structure Handling using

Content Manager Add additional features easily Low cost to maintain Search engine friendly structure Standardized Code Template Management Support for web services Powerful Extensibility MVC Architecture

What is Joomla!? Joomla! is considered as PHP based dynamic

portal engine and content management system. The real power of Joomla! lies in the scalability

◦ It can be achieved with the use of custom extensions which include templates, language files, plugins, modules and components.

Joomla is a phonetic spelling for the Swahili word "Jumla," which means "all together" or "as a whole“.

Joomla Framework

Reference & image credit: http://docs.joomla.org/Framework/1.5

Joomla! Extensions A Joomla! extension is a code package that

extends the functionality or feature of default Joomla! installation.

Type of Joomla! 2.5 Extensions:

Source: http://docs.joomla.org/Extension

Compoents

Modules

Plugins

LanguagesTemplates

Packages

Libraries

Download and Install Joomla!

How to download and install Joomla on your web server?

Please go to http://www.joomla.org/download.html Click on the below shown package on the page

It would download a zip package to your local computer

Unzip the package and place in the root or desired folder on web server

Open the web server link for the Joomla! Package placed and follow on-screen instructions

How to download and Install Joomla?

Detailed Installation Instructions of Joomla! Is beyond the scope of this webinar due to limited time hence request you to visit http://docs.joomla.org/Use_Joomla!_on_your_own_computer for detailed installation instructions.

Installing Joomla!

Your Drive>folder>

Select language and proceed to next page

It checks if your server meets the installation requirements

Joomla! License to accept and proceed ahead.

Joomla can automatically create a database as if an authorized MySQL user account details are provided here.

That’s it – expecting more Helpful for beginners Can setup a working website in few minutes For more details on content management,

please visit http://docs.joomla.org

Module & ComponentAn overview of both the Joomla! Extensions to understand the basics, conventions and structure.

Overview – Modules What is a module?

◦ Modules are lightweight and flexible extensions used for page rendering. These modules are often “boxes” arranged around a component on a typical page. A well-known example is the login module.

Why should we use a module?◦ Can work standalone◦ Good for code reusability◦ Can work with component for database linking

Conventions◦ Module name should be in small letters◦ Module name should have a prefix “mod_”

Modules Example

Depends on template Added in template using below code:

◦ <jdoc:include type="modules" name=“module-positon-name" />

Can be more than one modules on a page

Module Positions

Go to Joomla! Admin Panel Access Top Menu>Extensions>Template

Manager Click on options button on the top-right side

of the toolbar Enable the “Preview module positions” Go to website front panel and add “?tp=1”

to the url◦ It will reveal the module positions in a Joomla

template

Check Module Positions in Joomla

Go to template manager

Click on options

Enable setting to preview module positions

Open your page with “?tp=1” at the end of url and it will reveal all Module positions

http://yoursite.com/index.php?tp=1

Basic Module Structure Mod_modulename – module folder

◦ mod_modulename.xml◦ mod_modulename.php◦ helper.php: This helper file contains a class to

provide various static functions to perform operations. It could be used to perform some calculation or to fetch data from DB.

◦ index.html: It is an empty file and created to prevent direct access to the directory.

◦ tmpl folder default.php: index.html: It is an empty file and created to prevent

direct access to the directory.

Overview - Component What is component?

◦ Components are the main functional units of Joomla!; they can be seen as mini-applications.

◦ A component can contain a module and a plug-in Why should we use a component?

◦ To manage more functional part or application◦ To provide backend handling to a front-end

functionality Conventions

◦ Component name should be prefixed by “com_” e.g. com_componentname

◦ Component name should start with small letters

Depends on template Added in template using below code:

◦ <jdoc:include type="component" /> Can be only one component on a page

Component Positions

Component Example

Image credit: http://www.slideshare.net/silenceit/joomlacontent-management-system

Component StructureWebsite Front-end:

helloworld.xml

site/index.html

site/helloworld.php

site/controller.php

site/views/index.html

site/views/helloworld/index.html

site/views/helloworld/view.html.php

site/views/helloworld/tmpl/index.html

site/views/helloworld/tmpl/default.xml

site/views/helloworld/tmpl/default.php

site/models/index.html

site/models/helloworld.php

Website Backend:admin/index.htmladmin/helloworld.phpadmin/controller.phpadmin/models/index.htmladmin/models/fields/index.htmladmin/models/fields/helloworld.phpadmin/models/forms/index.htmladmin/models/forms/helloworld.xmladmin/models/helloworld.phpadmin/models/helloworlds.phpadmin/views/index.htmladmin/views/helloworlds/index.htmladmin/views/helloworlds/view.html.phpadmin/views/helloworlds/tmpl/index.htmladmin/views/helloworlds/tmpl/default.phpadmin/views/helloworlds/tmpl/default_head.phpadmin/views/helloworlds/tmpl/default_body.phpadmin/views/helloworlds/tmpl/default_foot.phpadmin/views/helloworld/index.htmladmin/views/helloworld/view.html.phpadmin/views/helloworld/tmpl/index.htmladmin/views/helloworld/tmpl/edit.phpadmin/tables/index.htmladmin/tables/helloworld.phpadmin/language/en-GB/en-GB.com_helloworld.iniadmin/language/en-GB/en-GB.com_helloworld.menu.iniadmin/controllers/index.htmladmin/controllers/helloworld.phpadmin/controllers/helloworlds.php

Installing Extensions in Joomla!

Hands on workshop to install modules and components to extend website functionality in Joomla!

Login to Joomla Admin panel at http://yoursite.com/administrator

Go to Top menu>Extensions>Extension Manager

Go to extension manager

Select and upload your extension file

Post installation, components will be available under the components menu item here

Post installation, modules will be available under the module manager

Select any existing module or create new

Select module type

Set additional module details or other configuration

Extension Development in

Joomla!Hands on workshop to develop a basic Joomla! Module and component

Let’s create a module called “Reviews” for this workshop which will display customer reviews on the web page

It will allow us to display a simple text in a pre-defined Joomla module position

Once this is done, we will fetch data for the module from DB

Hands-on Module Development

modules>mod_reviews◦ mod_reviews.php◦ mod_reviews.xml◦ helper.php◦ index.html◦ tmpl/default.php◦ tmpl/index.html

Module Folder Structure

mod_modulename.php<?php//license details here

// no direct accessdefined( '_JEXEC' ) or die( 'Restricted access' ); // Include the syndicate functions only oncerequire_once( dirname(__FILE__).DS.'helper.php' ); //load helper class and function$reviews = modReviewsHelper::getReviews( $params );

//load the layout file from template viewsrequire( JModuleHelper::getLayoutPath( 'mod_reviews' ) );?>

// no direct accessdefined( '_JEXEC' ) or die( 'Restricted access' );

As it suggests, this line checks to make sure that this file is being included from the Joomla! application.

It is necessary to prevent variable injection and other potential security concerns.

// Include the syndicate functions only oncerequire_once( dirname(__FILE__).DS.'helper.php' );The helper class is defined in our helper.php file.

This file is included with a require_once statement.

It allows to include necessary functions for the module functionality. Helper file may include basic calculations, DB connection and query code.

//load helper class and function$reviews = modReviewsHelper::getReviews( $params );

This line allows to invoke the appropriate helper class method to retrieve the data.

Currently, we do not use any parameters but it is allowed in this module for future extensibility.

//load the layout file from template viewsrequire( JModuleHelper::getLayoutPath( 'mod_reviews' ) );

This line includes the template to display the output.

<?xml version="1.0" encoding="utf-8"?><extension

type="module"version="2.5"client="site"method="upgrade">

<name>Reviews</name> <author>Vishwash Gaur</author> <version>2.5.0</version> <description>An review module.</description> <files> <filename module="mod_reviews">mod_reviews.php</filename> <filename>index.html</filename> <filename>helper.php</filename>

<folder>tmpl</folder><filename>mod_reviews.xml</filename>

</files></extension>

mod_reviews.xml

This file is used to specify which files the installer needs to copy and is used by the Module Manager to determine which parameters are used to configure the module.

<extension type="module“ version="2.5“ client="site“ method="upgrade">

This line tells to Joomla! that selected extension type is module and compatible with Joomla version 2.5.

Extension type is also defined for site which means it will be available for front-end.

<name>Reviews</name><author>Vishwash Gaur</author><version>2.5.0</version><description>An review module.</description>

<files> <filename

module="mod_reviews">mod_reviews.php</filename> <filename>index.html</filename> <filename>helper.php</filename>

<folder>tmpl</folder><filename>mod_reviews.xml</filename>

</files>

<?xml version="1.0" encoding="utf-8"?><install type="module" version="1.5.0"> <name>Hello, World!</name> <author>John Doe</author> <version>1.5.0</version> <description>A simple Hello, World! module.</description> <files> <filename>mod_reviews.xml</filename> <filename module="mod_reviews">mod_reviews.php</filename> <filename>index.html</filename> <filename>helper.php</filename> <filename>tmpl/default.php</filename> <filename>tmpl/index.html</filename> </files> <params> </params></install>

Difference in Joomla 1.5

<?php//license details here

class modReviewsHelper{ /** * Retrieves the reviews * * @param array $params An object containing the module parameters * @access public */ function getReviews( $params ) { return 'I am a happy user!'; }}?>

helper.php

<html><body bgcolor="#FFFFFF"></body></html>

This file is included to prevent directory browsing. It can be event left blank and whenever someone will access the directory then this file will be default loaded.

Index.html

<?php // no direct accessdefined( '_JEXEC' ) or die( 'Restricted access' );//print user reviewsecho $reviews; ?>

tmpl/default.php

<html><body bgcolor="#FFFFFF"></body></html>

This file is included to prevent directory browsing. It can be event left blank and whenever someone will access the directory then this file will be default loaded.

tmpl/index.html

Once a base module is ready, we can start using it immediately in Joomla.

In Joomla 1.5, it was auto-detected but in Joomla 2.5, we would need to discover a newly developed extension from admin panel.

For this, please login to admin panel and go to Top menu>extensions>extension manager

Click on the discover tab and refresh the data

Discover module in Joomla

Go tot extension manager

Click on the discover button to find newly developed extensions

If your programming is correct, it will find your newly developed extension.Select the extension and click on install button to setup the extension.

Once a module is added in the Joomla! System, it has to be defined on a position using module manager.

It will allow module to display in the front-end.

Display module in front-end

Go to module manager and click on “New” button

Select your newly developed module

Define module position in active template and set other parameters and pages to display the module.I give it position 6 in Beez_20 template.

Module successfully saved, now move to front-end to check this.

You can see user review here

I can’t see the module◦ Check if you have selected correct position in the

active template

Troubleshooting

With the previous example, you can display one static customer review but what if there are many customer reviews which should be dynamically loaded on the page.

Let’s do that!

Module with DB support - Advanced

Using phpMyAdmin or any other DB management tool, create a table called __reviews in the Joomla DB

Add required fields i.e. id, name, city and feedback in the table

Kindly note this example is meant to be very basic for easy understanding

Create table and add fields in the database.Note: Ideally, it is the part of component.

I have done some entries in the DB directly for the demo purpose. It should happen via a back-end component in real environment.

Now, since we are not doing any static code and want to load reviews dynamically from the database, we need to make some changes in below files:◦ mod_reviews.php – minor change◦ helper.php – major change for DB connection and

query◦ tmpl/default.php – minor change◦ tmpl/reviews.php – new template file added

Changes in the code

<?php//license details here

// no direct accessdefined( '_JEXEC' ) or die( 'Restricted access' ); // Include the syndicate functions only oncerequire_once( dirname(__FILE__).DS.'helper.php' ); //load helper class and function//$reviews = modReviewsHelper::getReviews( $params );$rows = modReviewsHelper::getReviews( $params );

//load the layout file from template viewsrequire( JModuleHelper::getLayoutPath( 'mod_reviews' ) );?>

mod_reviews.php

<?xml version="1.0" encoding="utf-8"?><extension

type="module"version="2.5"client="site"method="upgrade">

<name>Reviews</name> <author>Vishwash Gaur</author> <version>2.5.0</version> <description>An review module.</description> <files> <filename module="mod_reviews">mod_reviews.php</filename> <filename>index.html</filename> <filename>helper.php</filename>

<folder>tmpl</folder><filename>mod_reviews.xml</filename>

</files></extension>

mod_reviews.xml

<?php//license details here

class modReviewsHelper{ /** * Retrieves the reviews * * @param array $params An object containing the module parameters * @access public */ function getReviews( $params ) { return 'I am a happy user!'; }}?>

helper.php - old

<?php//license details here

class modReviewsHelper{ /** * Retrieves the reviews * @param array $params An object containing the module parameters * @access public */ function getReviews( $params ) { //return 'I am a happy user!';

//limit the number of items to load from DB$items = $params->get('items', 10);

//make DB connection $db=& JFactory::getDBO(); $result= null;

//run db query $query = 'SELECT * FROM #__reviews'; $db->setQuery($query, 0, $items); $rows = $db->loadObjectList();

//display and handle error warning if ($db->getErrorNum()) { JError::raiseWarning( 500, $db->stderr(true) ); }

return $rows; }

helper.php – Updated Part 1

For the demonstration purpose, kindly understand and note that Joomla! uses it’s own code conventions to make DB connections and to run a query. It allows in less code and standardized approach.

/** * Function to display rating and reviews via views * @param array $params An object containing the module

parameters * @access public */ function renderReviews(&$reviews, &$params) { //variable to store db value of a particular record link to open in detailed view

$link = JRoute::_('index.php?option=com_reviews&id='.$reviews->id.'&task=view');

//call template view for display

require(JModuleHelper::getLayoutPath('mod_reviews' , 'reviews'));

}}?>

helper.php – Part 2

This component doesn’t exists in the system but we have planned it for future use or next demo of component development.

<?php // no direct accessdefined( '_JEXEC' ) or die( 'Restricted access' );//print user reviews//echo $reviews; foreach($rows as $row){ modReviewsHelper::renderReviews($row, $params);}?>

tmpl/default.php

<?php // no direct accessdefined( '_JEXEC' ) or die( 'Restricted access' ); ?><table width="95%"><tr><td><strong><?php echo ucwords(strtolower($reviews->name)); ?></strong><br /><span style="font-size:9px; margin-top:-5px;"><?php echo ucwords(strtolower($reviews->city));?></span><br /></td></tr><tr><td><?php echo wordwrap($reviews->feedback,130, "<br />\n");?></td></tr></table>

tmpl/reviews.php

Display in front-end

Dynamic records from DB

Please use below link to develop a MVC component for Joomla 2.5 tutorial

http://docs.joomla.org/Developing_a_Model-View-Controller_%28MVC%29_Component_for_Joomla!1.6

Since there is already a detailed component development tutorial hence no need to re-invent the wheel. Also, with the limited available time, I would try to cover it in some session at later time.

Component Development - skipped

FAQ’sCovering frequently asked questions on Joomla!

FAQ’s What is the basic database structure difference

between Joomla! 1.5 and Joomla! 2.5 versions? From the module and component development

point of view, table structure has been updated. Earlier, we had #__modules and #__components

tables which have been merged to #__extensions in the new version.

This new table includes all type of extensions in single table.

I was able to create and load modules easily in Joomla! 1.5 but I can't do the same in Joomla! 2.5?

In Joomla 1.5, system was able to detect a new module automatically but in Joomla 2.5, you would need to discover the module post development.

For this, please go to yoursite/admin and select top-menu/extensions/extension manager and click on the discover tab.

On discover tab, you would be able to find new extensions by clicking the discover button on top-right toolbar.

FAQ’s

Are too many modules a problem for the Joomla! site?

Yes, it there are many modules or extensions then it put extra load on the loading of the page and website.

Some of the websites have been experienced working good with up to 50 extensions but some might start delay in loading.

FAQ’s

Does the extension be compulsory an open source code?

No, but since the CMS is open source and if you want to take benefits of community then it should be an open source code.

FAQ’s

Do I really need to switch to Joomla! 2.5 from Joomla! 1.5 and why?

Yes, there are two types of releases◦ STS: Short Term Support◦ LTS: Long Term Support◦ 1.5 version is LTS version and Joomla! has

officially stopped support for it from April, 2012 so for any further system level issue, it won’t be supported hence it is good to move to next release for code level support. However, forums and community is always available.

FAQ’s

How and where can I get more information on Joomla! extension development?

http://docs.joomla.org

FAQ’s

Can I use Jquery framework in the extension development while Joomla! uses MooTools JS framework?

Yes, and if any conflict arises, please use below code to avoid the situation:

<script type="text/javascript">  jQuery.noConflict();</script>

FAQ’s

Questions and Answers

Please feel free to ask any relevant question regarding this webinar.

Get your XAMP, LAMP, MAMP or WAMP environment ready

Install and experiment Joomla! Locally Checkout online references Get a book Visit Joomla! JED, Forums and user groups Help each other and learn from experiences

Next Steps

Questions and Answers Please share a relevant question to this webinar. All questions which are beyond the scope of this

webinar can be discussed separately on my blog at www.vishwashgaur.com or using twitter @vishwashgaur

Thank you! I personally thanks to all the people who

managed their time to join this webinar. I look forward to learn and share more with you in

future too.

I can be reached easily at my blog www.vishwashgaur.com and/or using twitter @vishwashgaur

XAMP: http://www.apachefriends.org/en/xampp.html Joomla!: http://www.joomla.org/ JED: http://extensions.joomla.org/ Joomla! Forum: http://forum.joomla.org/ Joomla! Magazine: http://magazine.joomla.org/authors/itemlist/user/65-Nicholas-G-Antimisiaris Joomla documentation: http://docs.joomla.org/ Joomla 2.5 essential training: http://www.lynda.com/Joomla-tutorials/Joomla-Essential-Training/95699-2.html Joomla! For beginners guide 2012: http://www.danconia.com/joomla-for-beginners-guide-2012.html Joomla! Developers guide: http://cocoate.com/sites/cocoate.com/files/private/jdev.pdf

References