One of the new feature since Joomla 3.2 is Rapid Application Development (RAD) framework.
A Joomla component is a PHP/MySQL web application that uses Joomla's framework. You can build your components on Joomla's framework and Joomla will take care of the database connection, the design (using templates), access levels, forms (JForms), etc. Using Joomla's framework saves you a lot of work and development time. However, it can be even faster!
Most Joomla components include the same functionality: In the front-end a list of records from the database hyperlinked to pages with details of each record individually. In the back-end the component list records from the database, with a link to a form where you can change the data and save.
Using the Rapid Application Development Framework (also known as FOF (Framework On Framework)) allows you to develop a component with common functionality with far fewer lines of code.
In this presentation, Peter shows how you can use Joomla's RAD to build a simple Joomla component to manage locations and categories and present those on the front-end to visitors on a Google Map.
Contents:
* The Basics of FOF
* Programming a back-end component using FOF
Note: It *is* possible to attend this session without attending Part 2: Front-end After this session you should have an idea what FOF is and how to create your own back-end component using FOF.
Automating Google Workspace (GWS) & more with Apps Script
Developing a Joomla 3.x Component using RAD FOF- Part 1: Back-end - Joomladay Germany 2014
1. Developing a Joomla
Component using RAD/FOF
Part 1: Back-end
Peter Martin, www.db8.nl. twitter: @pe7er
Joomladay.de – 12+13 september 2014
2. Presentation Overview
a)Introduction
b)Rapid Application Development (RAD) / FOF
c)Developing a Joomla back-end component:
db8locate
(Part 2:
Developing a Joomla front-end component: db8locate
Demo with programming, github & local web environment)
>>> Sheets available: www.db8.nl <<<
>>> Component: https://github.com/pe7er/db8locate <<<
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
3. a) Introduction
● Your own webapplication: programming everything from
scratch
● PHP/MySQL/HTML/CSS/JavaScript
● Joomla component: Joomla = Framework
● Data to/from database – Database object
● Layout – Template
● Rights Management – Access Control List (ACL)
● MVC → template overrides
● Plugins – hook into events in own component
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
4. a) Functionality component back-end
● Category list
● Display list of categories
● New / Edit a category
● Delete categories
● Publish/unpublish categories
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
● Categorie form
● Display form of a category
● Save a category
● List of items
● Display list of items
● New / Edit an item
● Delete item(s)
● Publish/unpublish item(s)
● Item form
● Display form of an item
● Save an item
5. a) Functionality component front-end
● Display list of categories
● Display a single category
● Display list of items
● Display single item
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
6. b) Rapid Application Development (RAD)
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
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 DDeeuuttsscchhllaanndd 22001144
8. Rapid Application Development (RAD)
● RAD = Framework on Framework (since Joomla 3.2)
● Extension of Joomla! Platform, Not stand-alone
Joomla's MVC classes & similar to Joomla's MVC API
● Backwards compatibile
● Less code → faster development & less bugs
● Convention over configuration -> FOF convention
regarding naming of functions and database field names
-> automatic (“automagic”) functionality
● Bootstrap, jQuery, JSON
● Hierarchical MVC (HMCV) – display component views at
other places (other views, componenten, modules)
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
9. RAD/ FOF/ F0F ?
● FOF (F O F) – Akeeba etc
● RAD – FOF implementation in Joomla > version 3.2
● F0F (F zero F) – Fork of FOF
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
10. c) Joomla Component with FOF
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
11. 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 / Eclipse / PHPStorm / your ”weapon of choice”
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
12. “db8 locate” component
Goal: 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 DDeeuuttsscchhllaanndd 22001144
26. 1. basic component (back-end)
● List view after couple of new & save
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
27. 2. language file
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
28. 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"
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
29. 2. language file
.ini → large file for all language lables com_db8locate
/administrator/components/com_db8locate/
language/en-GB/en-GB.com_db8locate.ini
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?"
TIP: “Debug Language” & collect all “lables to translate”
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
32. 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 DDeeuuttsscchhllaanndd 22001144
38. 4. order – database field
New database field “ordering”
ALTER TABLE `#__db8locate_items` ADD `ordering` INT( 11 )
NOT NULL DEFAULT '0';
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
39. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 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"/>
●
●
42. 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 DDeeuuttsscchhllaanndd 22001144
43. 5. categories – list
/administrator/components/com_db8locate/views/items/tmpl/form.default.xml
Note: xml has hardcoded SQL for MySQL → should be model instead
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
Add to <headerset>
●
<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" />
●
44. 5. categories – list
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
49. 5. categories – toolbar in Category Manager
Create button in Category Manager to navigate back to “Items”:
/administrator/components/com_db8locate/helpers/db8locate.php
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
●<?php
●defined('_JEXEC') or die();
●
●/**
● * Helper to display db8 locate component submenus in com_categories
● */
●abstract class Db8locateHelper {
●
● public static function addSubmenu($submenu) {
JsubMenuHelper::addEntry(JText::_(
'COM_DB8LOCATE_TITLE_ITEMS'),
'index.php?option=com_db8locate', $submenu == 'locations');
JsubMenuHelper::addEntry(JText::_(
'COM_DB8LOCATE_SUBMENU_CATEGORIES'),
'index.php?option=com_categories&view=categories
&extension=com_db8locate', $submenu == 'categories');
● }
●}
50. 5. categories – Category Manager
Click on “Location Categories”, Result:
Warning: Invalid argument supplied for foreach() in
/var/www/rad/libraries/cms/helper/content.php on line
121
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
59. 8. multilingual – database field
Add new field “language” to store language code
ALTER TABLE `#__db8locate_items` ADD `language`
CHAR( 7 ) NOT NULL DEFAULT '*';
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
65. 9. “magic fields”
● Present in component:
enabled (“state”), ordering,
● Also add to database table:
created_by, created_on(“created”),
modified_by, modified_on(“modified”),
locked_by(“checked_out”),
locked_on(“checked_out_time”),
hits
● In list view: created_by & created_on
● In form view: all fields
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
70. 11. my own fields...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
71. 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 DDeeuuttsscchhllaanndd 22001144
72. 11. db8locate – list
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
73. 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 DDeeuuttsscchhllaanndd 22001144
●
● if (empty($this->_formData)) {
● return array();
● } else {
● return $this->_formData;
● }
● }
●}
74. 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 DDeeuuttsscchhllaanndd 22001144
75. 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 DDeeuuttsscchhllaanndd 22001144
77. 12. front-end – basic component
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
15:30 to 16:15 hour – Part 2: Front-end
Programming a simple front-end component using FOF
Demo with programming, github & local web environment
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
79. 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!”)
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
82. Questions?
Presentation available at:
http://www.db8.nl
Component db8locate available at:
https://github.com/pe7er/db8locate
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
Peter Martin
e-mail: info at db8.nl
website: www.db8.nl
twitter: @pe7er
83. Used photos ● Speed Typing - Matthew Bowden http://www.sxc.hu/photo/275499
● Speedometer – Abdulhamid AlFadhly http://www.sxc.hu/photo/1390189
● Earth: Night Edition - Europe - Sigurd Decroos http://www.sxc.hu/photo/140879
● 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
● 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
● Retro/Vintage TV set - "meltingdog" http://www.sxc.hu/photo/1440150
● san sebastian views 1 - ibon san martin http://www.sxc.hu/photo/94018
● Fragile Parcel - Richard Dudley http://www.sxc.hu/photo/1279274
● Sparks - Hector Landaeta http://www.sxc.hu/photo/1184243
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
● Tools - J Boontje http://www.sxc.hu/photo/805571
● signs signs - Jason Antony http://www.sxc.hu/photo/751034