This document provides an overview and instructions for developing a Joomla component using Rapid Application Development (RAD) and the Framework on Framework (FOF). It discusses:
1) Introducing the component and using Joomla's framework to build upon;
2) How RAD/FOF allows for faster development by providing conventions and abstraction;
3) The basic steps to create a simple component backend, including entry point, dispatcher config, database schema, and views.
3. 3
a) Introduction: Web Application
● From scratch
– PHP/MySQL/HTML/CSS/JavaScript
● Joomla component: Joomla = Framework
– Database object
– Layout Template
– Access Control List (ACL)
– MVC → template overrides
– Plugins
JJoooommllaaddaayy UUKK 22001144
4. 4
a) Functionality component back-end
● Items - List
– Display list of items
– New / Edit an item
– Delete item(s)
– Publish/unpublish item(s)
JJoooommllaaddaayy UUKK 22001144
● Category - List
– Display list of categories
– New / Edit a category
– Delete categories
– Publish/unpublish categories
● Category - Form
– Display form of a category
– Save a category
● Item - Form
– Display form of an item
– Save an item
5. 5
a) Functionality component front-end
● Items
– Display list of items
JJoooommllaaddaayy UUKK 22001144
● Category
– Display list of categories
● Category
– Display category details
● Item
– Display item details
6. 6
b) Rapid Application
Development (RAD)
JJoooommllaaddaayy UUKK 22001144
7. 7
b) Software Development Framework
● Abstracting common code functionality
● Conventions
● Don’t Repeat Yourself (DRY)
● Nooku Framework ('Koowa') – Johan Janssens
– Joomlatools extensies (DOCman), Anahita
● Framework on Framework – Nicholas
Dionysopoulos
– Basis of Akeeba Backup, Admin Tools etc
JJoooommllaaddaayy UUKK 22001144
8. 8
Rapid Application Development (RAD)
● RAD = Framework on Framework (since J 3.2)
– Extension of Joomla! Platform
– Backwards compatible
– Less code → faster development & less bugs
– Bootstrap
– Jquery
– JSON
JJoooommllaaddaayy UUKK 22001144
9. 9
Rapid Application Development (RAD)
● Convention over configuration ->
FOF convention:
● naming of functions
● database field names
-> automatic (“automagic”) functionality
● How to use?
– XML → “configure” component using FOF
– PHP → more control over output
– Anything different? →
Override / extend FOF code like models, controllers
JJoooommllaaddaayy UUKK 22001144
10. 10
RAD/ FOF/ F0F ?
● FOF (F O F)
– Akeeba etc
● RAD – FOF implementation
– In Joomla core since 3.2
● F0F (F zero F) – Fork of FOF
– Akeeba etc
JJoooommllaaddaayy UUKK 22001144
11. 11
c) Joomla Component
with FOF – back-end
JJoooommllaaddaayy UUKK 22001144
12. 12
c) Joomla Component with FOF
● Development Environment
– Local web environment (LAMP/XAMP/MAMP)
– phpMyAdmin
– Joomla 3.3.x installation
– Git (software version control) + github.com
– IDE for PHP:
● Netbeans / PHPStorm / Eclipse / ”weapon of choice”
JJoooommllaaddaayy UUKK 22001144
13. 13
“db8 locate” component
Manage & display locations on a Google Map
– Name: “db8 Locate”
– Component name: com_db8locate
– Database tabel name: #__db8locate_items
>>> Show example of back-end in browser
JJoooommllaaddaayy UUKK 22001144
29. 29
JJoooommllaaddaayy UUKK 22001144
2. language file
sys.ini → For menu items etc.
Put in /language/ map of db8locate component!
/administrator/components/com_db8locate/
language/en-GB/en-GB.com_db8locate.sys.ini
●
COM_DB8LOCATE="db8 Locate"
COM_DB8LOCATE_XML_DESCRIPTION="Component to
manage and display locations on a Google Map"
30. 30
COM_DB8LOCATE="db8 Locate"
COM_DB8LOCATE_TITLE_ITEMS="Location Items"
COM_DB8LOCATE_COMMON_NORECORDS="No Location
Items"
COM_DB8LOCATE_TITLE_ITEMS_EDIT="Edit Location Items"
COM_DB8LOCATE_LOCATION_ITEM_EDIT="Location Items"
COM_DB8LOCATE_LBL_ITEM_SAVED="Location Item saved"
COM_DB8LOCATE_CONFIRM_DELETE="Delete Location Item?"
JJoooommllaaddaayy UUKK 22001144
2. language file
.ini → large file for all language lables com_db8locate
/administrator/components/com_db8locate/
language/en-GB/en-GB.com_db8locate.ini
TIP: “Debug Language” & collect all “lables to translate”
33. 33
3. switch on/off – database field
New field “enabled” to store publication status
ALTER TABLE `#__db8locate_items` ADD `enabled`
TINYINT( 3 ) NOT NULL DEFAULT '1';
JJoooommllaaddaayy UUKK 22001144
39. 39
4. order – database field
New database field “ordering”
ALTER TABLE `#__db8locate_items` ADD `ordering` INT( 11
) NOT NULL DEFAULT '0';
JJoooommllaaddaayy UUKK 22001144
40. 40
JJoooommllaaddaayy UUKK 22001144
4. order – list
/administrator/components/com_db8locate/views/items/tmpl/form.default.xml
Add to <headerset>
●
<header name="ordering" type="ordering"
sortable="true" tdwidth="10%" />
●
● Add to <fieldset name="items">
●
<field name="ordering" type="ordering" labelclass="order"/>
●
●
43. 43
5. categories – database field
Add new database field “catid” to store category_id
ALTER TABLE `#__db8locate_items` ADD `catid` INT( 10 )
UNSIGNED NOT NULL DEFAULT '0';
JJoooommllaaddaayy UUKK 22001144
44. /administrator/components/com_db8locate/views/items/tmpl/form.default.xml
Note: xml has hardcoded SQL for MySQL → should be model instead
44
5. categories – list
Add to <headerset>
JJoooommllaaddaayy UUKK 22001144
●
<header name="category" type="category"
sortable="true" tdwidth="10%" />
●
● Add to <fieldset name="items">
<field name="catid" type="sql" translate="false"
query="SELECT * FROM #__categories"
key_field="id" value_field="title" />
●
60. 60
8. multilingual – database field
Add new field “language” to store language code
ALTER TABLE `#__db8locate_items` ADD `language`
CHAR( 7 ) NOT NULL DEFAULT '*';
JJoooommllaaddaayy UUKK 22001144
70. 70
JJoooommllaaddaayy UUKK 22001144
10. tags
Unfortunately ... not working... bug in Joomla to versie 3.2.3:
Use of com_tags only possible if JTable is used in component.
71. 71
11. my own fields...
JJoooommllaaddaayy UUKK 22001144
72. 72
11. db8locate – database field
Add your own fields to database
ALTER TABLE `jos_db8locate_items`
● ADD `location` VARCHAR( 60 ) NOT NULL ,
● ADD `address` VARCHAR( 50 ) NOT NULL ,
● ADD `postcode` VARCHAR( 12 ) NOT NULL ,
● ADD `city` VARCHAR( 50 ) NOT NULL ,
● ADD `region` VARCHAR( 50 ) NOT NULL ,
● ADD `country` VARCHAR( 50 ) NOT NULL ,
● ADD `latitude` VARCHAR( 10 ) NOT NULL ,
● ADD `longitude` VARCHAR( 10 ) NOT NULL ,
● ADD `website` VARCHAR( 100 ) NOT NULL
JJoooommllaaddaayy UUKK 22001144
74. 74
11. db8locate – further improvements
● Update your SQL installation script:
/administrator/components/com_db8locate/sql/install/mysql/install.sql
● If "required fields" are not completed,
then "save" results in emptying the fields...
/administrator/components/com_db8locate/models/items.php
●
class Db8directoryModelItems extends F0Fmodel {
● protected $_savestate = 1;
● protected function loadFormData() {
● Jfactory::getApplication()->
● setUserState('com_db8locate.add.item.data', '');
●
JJoooommllaaddaayy UUKK 22001144
●
● if (empty($this->_formData)) {
● return array();
● } else {
● return $this->_formData;
● }
● }
● }
75. 75
11. db8locate – further improvements
● Edit form too long → divide into columns
/administrator/components/com_db8locate/views/item/tmpl/form.form.xml
/administrator/components/com_db8locate/views/item/tmpl/form.form.xml
●
<fieldset name="basic_configuration"
label="COM_DB8LOCATE_ITEM_LOCATION" class="span4"> fields in column 1
</fieldset>
●
● <fieldset name="address" label="COM_DB8LOCATE_ITEM_ADDRESS"
class="span4"> fields in column 2 </fieldset>
JJoooommllaaddaayy UUKK 22001144
76. 76
11. db8locate – further improvements
● Lookup Coordinates of each Address at Google Maps API
– Add lookup code for Google Map API in Model
– Add button in Toolbar
– Add handling in Controller
JJoooommllaaddaayy UUKK 22001144
78. 78
12. basic component (front-end)
1.Entry point
/components/com_db8locate/db8locate.php
2.View: list
/components/com_db8locate/views/items/tmpl/form.default.xml
/components/com_db8locate/views/items/metadata.xml –> for menu
3.View: single item
/components/com_db8locate/views/item/tmpl/form.item.xml
/components/com_db8locate/views/item/metadata.xml –> for menu
4.Language files
/components/com_db8locate/language/en-GB/en-GB.com_db8locate.ini
JJoooommllaaddaayy UUKK 22001144
79. 79
12.1 front-end – entry point
/administrator/components/com_db8locate/db8locate.php
<?php
defined('_JEXEC') or die();
// Load FOF
include_once JPATH_LIBRARIES.'/fof/include.php';
// Quit if FOF is not installed
if(!defined('FOF_INCLUDED')) {
JError::raiseError ('500', 'FOF is not installed');
}
FOFDispatcher::getTmpInstance('com_db8locate')->dispatch()
;
JJoooommllaaddaayy UUKK 22001144
84. 84
12.4 language files
/components/com_db8locate/language/en-GB/en-GB.com_db8locate.ini
TIP: “Debug Language” & collect all “lables to translate”
JJoooommllaaddaayy UUKK 22001144
85. 85
13. more views
JJoooommllaaddaayy UUKK 22001144
86. 86
<?php
$viewTemplate = $this->getRenderedForm();
echo $viewTemplate;
?>
JJoooommllaaddaayy UUKK 22001144
13. more views
Combine XML & PHP
/components/com_db8locate/views/items/tmpl/default.php
and load form.default.xml
E.g. mix with Google Maps
87. 87
13. more views – mixed php & xml
JJoooommllaaddaayy UUKK 22001144
88. 88
JJoooommllaaddaayy UUKK 22001144
13. more views
Extra (built-in) output options:
&format=csv
administrator/index.php?option=com_db8locate&format=csv
&format=json
administrator/index.php?option=com_db8locate&format=json
90. 90
JJoooommllaaddaayy UUKK 22001144
Errors
● IMHO Harder to detect than "regular" Joomla
component!
● Cache!!
● Debug
– E.g. back-end error:
“An error has occurred. 1064 You have an error in your SQL syntax; check the manual that corresponds to
your MySQL server version for the right syntax to use near 'ORDER BY node.lft' at line 4 SQL=SELECT
node.id FROM jos_categories AS node, jos_categories AS parent WHERE node.lft BETWEEN parent.lft AND
parent.rgt AND parent.id = ORDER BY node.lft”
can be caused by error in the front-end!
Test: rename front-end com_db8locate temporary
– Front-end error:
Notice: Undefined variable: form_class in /var/www/rad/libraries/fof/render/strapper.php on line 676
Test: rebuilt .xml files step-by-step
– print_r($object) / echo $query / die(“stop here!”)
93. 93
JJoooommllaaddaayy UUKK 22001144
Contact
Presentation available at:
http://www.db8.nl
Component db8locate available at:
https://github.com/pe7er/db8locate
Peter Martin
e-mail: info at db8.nl
website: www.db8.nl
twitter: @pe7er
Review this presentation:
https://joind.in/talk/view/11625
94. 94
JJoooommllaaddaayy UUKK 22001144
Used Photos 1/2
● Speed Typing - Matthew Bowden http://www.sxc.hu/photo/275499
● Speedometer – Abdulhamid AlFadhly http://www.sxc.hu/photo/1390189
● LONDON SKYLINE CLIP ART
http://www.clker.com/clipart-london-skyline-19.html
● Forjados 1 - Albert Lazcano http://www.sxc.hu/photo/626785
● Bengali Keyborad - Mohammad Jobaed Adnan
http://www.sxc.hu/photo/676844
● Old Light Switches - Paul Cross http://www.sxc.hu/photo/1259922
● madera en pila 1 - jean froidevaux http://www.sxc.hu/photo/313864
● Books books books... - Brandon Blinkenberg
http://www.sxc.hu/photo/424027
● Sign 3: forbidden access - Davide Guglielmo
http://www.sxc.hu/photo/200982
95. 95
JJoooommllaaddaayy UUKK 22001144
Used Photos 2/2
● Communications Receiver - John Munsch http://www.sxc.hu/photo/260775
● Flags of the Baltic Sea countries - Johannes Raitio
http://www.sxc.hu/photo/471547
● Lock - Robert Linder http://www.sxc.hu/photo/1395379
● Basho Collage 5 - Billy Alexander http://www.sxc.hu/photo/1330749
● Earth: Night Edition - Europe - Sigurd Decroos
http://www.sxc.hu/photo/140879
● Retro/Vintage TV set - "meltingdog" http://www.sxc.hu/photo/1440150
● san sebastian views 1 - ibon san martin http://www.sxc.hu/photo/94018
● Tools - J Boontje http://www.sxc.hu/photo/805571
● The End Book, EWikist, 2010
http://commons.wikimedia.org/wiki/File:The_End_Book.png