Introduction to Components and Modules 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.

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 presentation 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.

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

Thank you! 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