How to develop simple component for Joomla! CMS 1.0 PDF Print
Hits : 10483
Written by Vijay Patil   
Wednesday, 10 February 2010 14:25
JOOMLA! 1.0 COMPONENT TUTORIAL - PART 1: FRONT-END
A tutorial explaining how simple component for Joomla! CMS 1.0 works, and how to create a component. One may wonder why to write about version 1.0 of Joomla!, when version 1.5 is almost ready (as of  January 2007). I think version 1.0 is still a very good framework: one can get to know how Joomla! works, extend the PHP knowledge, and prepare for Joomla! 1.5, which is a lot different and more advanced. And since there rather will not be upgrade possible from 1.0 to 1.5, just migration (hopefully a fast and easy one, thanks to great developers), there may be still a lot of existing web sites working on Joomla! 1.0  for quite some time.

Official Joomla! web site contains a lot of useful information:
help.joomla.org > Developer > Components
Joomla! Development Wiki
There are of course tutorials of Joseph LeBlanc , and let's not forget about the most important part - security: Guide to more secure components

1. What is a component ?

Component is mini-application working in Joomla! enviroment. There are a few component included with Joomla! installation: com_banners, com_contact, com_content, com_weblinks and others. These core  components cannot be uninstalled, of course. Components show information in frontend and backend, as Joomla! does.

2. Simplest component

The very simplest component has only two files:
very_simple.php
very_simple.xml

Download zip file and install this sample component as usual in Joomla! Then create menu position pointing to the component. If there were no errors during installation the component should work now - it  should display either "you are not logged in" or "welcome back" if you are logged in from frontend.
Joomla! installer creates two folders for the component (com_simplest), and will put these files there:
administrator/components/com_simplest/simplest.xml
components/com_simplest/simplest.php
The xml file is the "definition" file for the component - it contains details about it, list of files, SQL queries to perform during installation and after uninstalling it.
The php file is the actual frontend of a component.

3. Typical component files

The discussed component - JPortfSimple - has the following files:
{xtypo_rounded2}
  1. admin.jportfsimple.php
  2. admin.jportfsimple.html.php
  3. toolbar.jportfsimple.php
  4. toolbar.jportfsimple.html.php
  5. install.jportfsimple.php
  6. uninstall.jportfsimple.php
  7. jportfsimple.xml
  8. jportfsimple.class.php
  9. jportfsimple.php
  10. jportfsimple.html.php
  11. CSS / jp.css
  12. HELP / english.html
  13. IMAGES
  14. LANG / english.php {/xtypo_rounded2}
During component installation there are two folders created within Joomla!:

in administrator/components/com_jportfsimple - files 1 to 7 are copied here, this is so called backend and in components/com_jportfsimple - files 8, 9, 10 are copied here, this is frontend.
Location of remaining folders with files (11 to 14) depends on a developer. Location of all the above files and folders is defined in XML file,which is read during installation.

4. XML file

jportfsimple.xml
{xtypo_code}
1. <?xml version="1.0" ?>
2. <mosinstall type="component">
3. <name>jportfsimple</name>
4. <creationDate>2007/01/01</creationDate>
5. <author>Konrad Gretkiewicz</author>
6. <copyright>This component in released under the GNU/GPL License</copyright>
7. <authorEmail> kgretk@anetus.com</authorEmail>
8. <authorUrl>www.anetus.com</authorUrl>
9. <version>0.2</version>
10. <files>
11. <filename>index.html</filename>
12. <filename>jportfsimple.php</filename>
13. <filename>jportfsimple.html.php</filename>
14. <filename>jportfsimple.class.php</filename>
15. <filename>license.txt</filename>
16. <filename>_readme.txt</filename>
17. <filename>css/index.html</filename>
18. <filename>css/jp.css</filename>
19. <filename>images/index.html</filename>
20. <filename>images/no_image.jpg</filename>
21. <filename>lang/index.html</filename>
22. <filename>lang/english.php</filename>
23. </files>
24. <install>
25. <queries>
26. <query>
27. CREATE TABLE IF NOT EXISTS `#__jportfsimple_conf` (
28. `id` INT NOT NULL AUTO_INCREMENT,
29. `version` VARCHAR(20) NOT NULL,
30. `base_path` VARCHAR(50) NOT NULL,
31. `title` VARCHAR(100) NOT NULL,
32. `description` TEXT NOT NULL,
33. `css_file` VARCHAR(50) NOT NULL,
34. PRIMARY KEY (`id`)
35. ) TYPE=MyISAM
36. </query>
37. <query>
38. CREATE TABLE IF NOT EXISTS `#__jportfsimple_categories` (
39. `id` INT NOT NULL AUTO_INCREMENT,
40. `cat_name` TEXT NOT NULL,
41. `cat_info` TEXT NOT NULL,
42. `cat_path` TEXT NOT NULL,
43. `meta_desc` TEXT NOT NULL,
44. `meta_keywords` TEXT NOT NULL,
45. `cat_image` TEXT NOT NULL,
46. `cat_grp` int(11) NOT NULL default '0',
47. `ordering` int(11) NOT NULL default '0',
48. `access` TINYINT(1) NOT NULL default '0',
49. `published` TINYINT(1) NOT NULL,
50. PRIMARY KEY (`id`)
51. ) TYPE=MyISAM
52. </query>
53. <query>
54. CREATE TABLE IF NOT EXISTS `#__jportfsimple_projects` (
55. `id` INT NOT NULL AUTO_INCREMENT,
56. `catid` TEXT NOT NULL,
57. `name` TEXT NOT NULL,
58. `description` TEXT NOT NULL,
59. `meta_desc` TEXT NOT NULL,
60. `meta_keywords` TEXT NOT NULL,
61. `proj_image` TEXT NOT NULL,
62. `proj_images_path` TEXT NOT NULL,
63. `userid` int(11) NOT NULL default '0',
64. `date` datetime NOT NULL,
65. `ordering` int(11) NOT NULL default '0',
66. `access` TINYINT(1) NOT NULL default '0',
67. `published` TINYINT(1) NOT NULL,
68. PRIMARY KEY (`id`)
69. ) TYPE=MyISAM
70. </query>
71. <query>
72. INSERT INTO `#__jportfsimple_conf` VALUES (1,'0.2','images/stories/','JPortSimple','Sample description.','jp.css');
73. </query>
74. </queries>
75. </install>
76. <uninstall>
77. <queries>
78. <query>
79. DROP TABLE IF EXISTS `#__jportfsimple_conf`;
80. </query>
81. <query>
82. DROP TABLE IF EXISTS `#__jportfsimple_categories`;
83. </query>
84. <query>
85. DROP TABLE IF EXISTS `#__jportfsimple_projects`;
86. </query>
87. </queries>
88. </uninstall>
89. <installfile>
90. <filename>install.jportfsimple.php</filename>
91. </installfile>
92. <uninstallfile>
93. <filename>uninstall.jportfsimple.php</filename>
94. </uninstallfile>
95. <administration>
96. <menu>jportfsimple</menu>
97. <submenu>
98. <menu act="categories">Categories</menu>
99. <menu act="projects">Projects</menu>
100. <menu act="configure">Configuration</menu>
101. <menu act="info">About</menu>
102. </submenu>
103. <files>
104. <filename>index.html</filename>
105. <filename>admin.jportfsimple.php</filename>
106. <filename>admin.jportfsimple.html.php</filename>
107. <filename>toolbar.jportfsimple.php</filename>
108. <filename>toolbar.jportfsimple.html.php</filename>
109. <filename>logo.gif</filename>
110. <filename>help/index.html</filename>
111. <filename>help/english.html</filename>
112. </files>
113. </administration>
114. <params>
<param name="back_button" type="list" default="" label="Back Button" description="Show/Hide a Back Button, that returns you
to the previous page">
115.
116. <option value="">Use Global</option>
117. <option value="0">Hide</option>
118. <option value="1">Show</option>
119. </param>
120. <param name="item_navigation" type="list" default="" label="Navigation Bar" description="Show/Hide the Navigation bar">
121. <option value="">Use Global</option>
122. <option value="0">Hide</option>
123. <option value="1">Show</option>
124. </param>
<param name="display_num" type="list" default="50" label="Display Number" description="Number of items to be displayed by
default">
125.
126. <option value="6">6</option>
127. <option value="10">10</option>
128. <option value="16">16</option>
129. <option value="20">20</option>
130. <option value="25">25</option>
131. <option value="30">30</option>
132. <option value="50">50</option>
133. </param>
134. </params>
135. </mosinstall>
{/xtypo_code}
lines 1 to 9 - basic component's information: name, author, version
10 to 23 - frontend files
24 to 75 - SQL queries creating new tables (CREATE) with necessary structure in database. Here 3 tables are created:
jos_jportfsimple_conf (few configuration values), jos_jportfsimple_categories (for categories) and jos_jportfsimple_projects (for projects).
#_ is replaced during installation with table prefix defined for your site (usually jos_). Last query (line 81) loads sample configuration
values.
76 to 88 - SQL queries run during uninstalling the component, removing old tables (DROP)
89 to 94 - defines files to run after installing and uninstalling component
96 to 102 - created backend menu, in Components
103 to 112 - backend files
114 to 134 - defines parameter which can be modified in menu position for given component

5. Frontend

Class file defines classes used in the component.
{xtypo_code}
jportfsimple.class.php
9. // no direct access
10. defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
11.
12.
13. class jportfsimpleConf extends mosDBTable {
14. var $id = null;
15. var $version = null;
16. var $base_path = null;
17. var $title = null;
18. var $description = null;
19. var $css_file = null;
20.
21. function jportfsimpleConf(&$db){
22. $this->mosDBTable('#__jportfsimple_conf', 'id', $db);
23. }
24. }
25.
26. class jportfsimpleCategories extends mosDBTable {
27. var $id = null;
28. var $cat_name = null;
29. var $cat_info = null;
30. var $cat_path = null;
31. var $meta_desc = null;
32. var $meta_keywords = null;
33. var $cat_image = null;
34. var $cat_grp = null;
35. var $ordering = null;
36. var $access = null;
37. var $published = null;
38.
39. function jportfsimpleCategories(&$db){
40. $this->mosDBTable('#__jportfsimple_categories', 'id', $db);
41. }
42. }
43.
44. class jportfsimpleProjects extends mosDBTable {
45. var $id = null;
46. var $catid = null;
47. var $name = null;
48. var $description = null;
49. var $meta_desc = null;
50. var $meta_keywords = null;
51. var $proj_image = null;
52. var $proj_images_path = null;
53. var $userid = null;
54. var $date = null;
55. var $ordering = null;
56. var $access = null;
57. var $published = null;
58.
59. function jportfsimpleProjects(&$db){
60. $this->mosDBTable('#__jportfsimple_projects', 'id', $db);
61. }
62. }
{/xtypo_code}
There are 3 classess defined, extending Joomla's class mosDBTable, each pointing to it's database table. Of course names of all fields here and in xml file (and database) must be the same.
Main frontend file - jportfsimple.php - contains all logic for the component. It should not contain any output instructions, output should be done via .html.php file.
{xtypo_code}
jportfsimple.php
9. // no direct access
10. defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
11.
12. global $mosConfig_live_site, $mosConfig_absolute_path, $mosConfig_lang, $database;
13.
14. // load .class.php and .html.php files for the component
15. require_once( $mainframe->getPath( 'class' ) );
16. require_once( $mainframe->getPath( 'front_html' ) );
17.
18. // load language file
19. if (file_exists( $mosConfig_absolute_path.'/components/com_jportfsimple/lang/'.$mosConfig_lang.'.php'))
20. include_once( $mosConfig_absolute_path.'/components/com_jportfsimple/lang/'.$mosConfig_lang.'.php');
21. else
22. if (file_exists( $mosConfig_absolute_path.'/components/com_jportfsimple/lang/english.php'))
23. include_once( $mosConfig_absolute_path.'/components/com_jportfsimple/lang/english.php');
24.
25. // load configuration from database
26. $database->setQuery('SELECT * FROM #__jportfsimple_conf' );
27. $conf_rows = $database -> loadObjectList();
28. if ($database -> getErrorNum()) {
29. echo $database -> stderr();
30. return false;
31. }
32. $jpConf=$conf_rows[0];
33.
34. // add CSS file for the component
$mainframe->addCustomHeadTag( '<link href="'.$mosConfig_live_site.'/components/com_jportfsimple/css/'.$jpConf->css_file.'"
rel="stylesheet" type="text/css" />' );
35.
36.
37. // get option and category
38. $option = trim( mosGetParam( $_REQUEST, 'option' ));
39. $cat = (int) ( mosGetParam( $_REQUEST, 'cat' ));
40.
41. if (!$cat)
42. {
43. // if category not defined display all
44. JP_categories();
45. }
46. else
47. {
48. //display one category or one project
49.
50. $project = (int) ( mosGetParam( $_REQUEST, 'project' ));
51.
52. if ($project)
53. {
54. // display one project
55. JP_project( $cat, $project);
56. }
57. else
58. {
59. // no project so display all in category
60. JP_one_cat( $cat );
61. }
62. }
{/xtypo_code}

First part of frontend file does the following:
line 15, 16 - loads the required class and frontend html (jportfsimple.html.php) files
19 to 23 - loads language file, default is english.php in com_jportfsimple/lang folder. The name of the file must be the same as the
language file name for your Joomla! site
26 to 32 - reads data from database table containing configuration parameters. They are stored in $jpConf object.
line 35 - using Joomla function addCustomHeadTag the component loads the CSS file, what allows to style component display without
changing whole site's CSS.
38 to 39 - function mosGetParam should be always used to get any input from user, with trim or (int) as additional security
41 to 62 - main frontend "logic": if category ($cat) is not defined, then display all categories, else try to read project number, and if it is
defined, display one project, else display all projects in given category. That's it! Of course in case of more complicated component, here
you would have case statement, with more variables.

Next, let's look at each function.
(expect detail in next couple of days)

Share this post

Submit to Delicious Submit to Digg Submit to Facebook Submit to Google Bookmarks Submit to Stumbleupon Submit to Technorati Submit to Twitter Submit to LinkedIn