Developing a Joomla 3.x Component using RAD FOF- Part 1: Back-end - Joomladay Germany 2014

Peter Martin, www.db8.nl. twitter: @pe7erJoomladay.de – 12+13 september 2014

Developing a Joomla Component using RAD/FOF

Part 1: Back-end

Joomladay Deutschland 2014Joomladay Deutschland 2014

Presentation Overview

>>> Sheets available: www.db8.nl <<<

a)Introduction

b)Rapid Application Development (RAD) / FOF

c)Developing a Joomla back-end component: db8locate

(Part 2:Developing a Joomla front-end component: db8locateDemo with programming, github & local web environment)

>>> Component: https://github.com/pe7er/db8locate <<<

http://www.db8.nl/


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


a) Functionality component back-end● Category list

● Display list of categories● New / Edit a category● Delete categories● Publish/unpublish categories

● 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


a) Functionality component front-end● Display list of categories

● Display a single category

● Display list of items

● Display single item


b) Rapid Application Development (RAD)


● 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

b) Software Development Framework


Rapid Application Development (RAD)● RAD = Framework on Framework (since Joomla 3.2)

● Extension of Joomla! Platform, Not stand-aloneJoomla'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)


RAD/ FOF/ F0F ?● FOF (F O F) – Akeeba etc● RAD – FOF implementation in Joomla > version 3.2● F0F (F zero F) – Fork of FOF


c) Joomla Component with FOF


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”


“db8 locate” componentGoal: 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


1. basic component (back-end)


1. basic component (back-end)1.Entry point

/administrator/components/com_db8locate/db8locate.php

2.Dispatcher configuration/administrator/components/com_db8locate/fof.xml

3.SQL definition of database table(s)/administrator/components/com_db8locate/sql/install/mysql/install.sql

4.XML installation manifest/administrator/components/com_db8locate/db8locate.xml

5.View: list/administrator/components/com_db8locate/views/items/tmpl/form.default.xml

6.View: form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml

7. Language files/administrator/components/com_db8locate/language/en-GB/en-GB.com_db8locate.sys.ini + en-GB.com_db8locate.ini


1.1 basic component – entry point/administrator/components/com_db8locate/db8locate.php

<?phpdefined('_JEXEC') or die();

// Load FOFinclude_once JPATH_LIBRARIES.'/fof/include.php';

// Quit if FOF is not installedif(!defined('FOF_INCLUDED')) { JError::raiseError ('500', 'FOF is not installed');}

FOFDispatcher::getTmpInstance('com_db8locate')->dispatch();


1.2 basic comp. – dispatcher config/administrator/components/com_db8locate/fof.xml

●<?xml version="1.0" encoding="UTF-8"?>●<fof>

● <backend>● <dispatcher>

● <option name="default_view">items</option></dispatcher>

● </backend>●</fof>


1.3 basic component – SQL definition● Create SQL installation file:

/administrator/components/com_db8locate/sql/install/mysql/install.sql

install.sql contains:● CREATE TABLE, table name (plural):

#__db8locate_items● ID field, fieldname (singular)

component-name_singular-view_id:db8locate_item_id (in Joomla: “id”)

● title● PRIMARY KEY (`db8locate_item_id`) = ID field


1.3 basic component – SQL definition/administrator/components/com_db8locate/sql/install/mysql/install.sql

CREATE TABLE IF NOT EXISTS `#__db8locate_items` (● `db8locate_item_id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT,● `title` varchar(255) NOT NULL,● PRIMARY KEY (`db8locate_item_id`)●) DEFAULT CHARSET=utf8;


1.4 basic component – XML manifest 1/2/administrator/components/com_db8locate/db8locate.xml

<?xml version="1.0" encoding="utf-8"?><extension version="3.2" type="component" method="upgrade"> <name>db8 locate</name> <author>Peter Martin</author> <creationDate>12 September 2014</creationDate> <copyright>Copyright (C) 2014 Peter Martin / db8.nl</copyright> <license>GNU General Public License version 2</license> <authorEmail>[email protected]</authorEmail> <version>1.0.1</version> <description>Component to manage and display locations on a Google Map</description>

 <install>● <sql>● <file driver="mysql" charset="utf8">sql/install/mysql/install.sql</file>● <file driver="mysql">sql/install/mysql/install.sql</file>●

● <file driver="mysqli" charset="utf8">sql/install/mysql/install.sql</file>● <file driver="mysqli">sql/install/mysql/install.sql</file>● </sql>● </install>


1.4 basic component – XML manifest 2/2/administrator/components/com_db8locate/db8locate.xml

 <administration>  <menu view="cpanel">COM_DB8LOCATE</menu>

 <files folder="backend"> <folder>sql</folder>

<filename>db8locate.php</filename> <filename>fof.xml</filename> </files>

</administration>

</extension>


1.5 basic component – view list/administrator/components/com_db8locate/views/items/tmpl/form.default.xml

<?xml version="1.0" encoding="UTF-8"?>●

●<form type="browse"● show_header="1"● show_filters="1"● show_pagination="1"● norows_placeholder="COM_DB8LOCATE_COMMON_NORECORDS">● ● <headerset>● <header name="db8locate_item_id" type="rowselect" tdwidth="20" />● <header name="title" type="fieldsearchable" sortable="true"

buttons="yes" buttonclass="btn" />● </headerset>●

● <fieldset name="items">● <field name="db8locate_item_id" show_id="true" type="selectrow"/>● <field name="title" type="text" show_link="true" url="index.php?option=com_db8locate

&view=item&id=[ITEM:ID]" empty_replacement="(no title)" />● </fieldset>●

●</form>


1.6 basic component – view form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml

<?xml version="1.0" encoding="UTF-8"?>●

●<form validate="true" serverside_validate="true">●

● <fieldset name="basic_configuration"● label="COM_DB8LOCATE_LOCATION_ITEM_EDIT"● description="COM_DB8LOCATE_LOCATION_ITEM_EDIT_BASIC_DESC"● class="span4">● ● <field name="title" type="text"● class="inputbox"● label="JGLOBAL_TITLE"● required="true"● Size="50" />

● </fieldset>●</form>


1. basic component – installation

Via Extensions > Extension Manager > Discover


1. basic component (back-end)● List view


1. basic component (back-end)● Form view


1. basic component (back-end)● List view after couple of new & save


2. language file


2. language filesys.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"


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”

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?"


2. language file


3. switch on/off


3. switch on/off – database fieldNew field “enabled” to store publication status

ALTER TABLE `#__db8locate_items` ADD ènabled` TINYINT( 3 ) NOT NULL DEFAULT '1';


3. switch on/off – database field/administrator/components/com_db8locate/views/items/tmpl/form.default.xml

Add to <headerset>●

<header name="enabled" type="published" sortable="true" tdwidth="8%" />●

●Add to <fieldset name="items">

● <field name="enabled" type="published"/>●


3. switch on/off


3. switch on/off – form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml

Add to <fieldset>●

<field name="enabled" type="list" label="JSTATUS"● labelclass="todo-label"● class="inputbox"● filter="intval" size="1" default="1" >● <option value="1">JPUBLISHED</option>● <option value="0">JUNPUBLISHED</option>●</field>●


3. switch on/off – form


4. order


4. order – database fieldNew database field “ordering”

ALTER TABLE `#__db8locate_items` ADD òrdering` INT( 11 ) NOT NULL DEFAULT '0';


4. order – list/administrator/components/com_db8locate/views/items/tmpl/form.default.xml


<header name="ordering" type="ordering" sortable="true" tdwidth="10%" />

●


●

<field name="ordering" type="ordering" labelclass="order"/>●

●


4. order


5. categories


5. categories – database fieldAdd new database field “catid” to store category_id

ALTER TABLE `#__db8locate_items` ADD `catid` INT( 10 ) UNSIGNED NOT NULL DEFAULT '0';


5. categories – list/administrator/components/com_db8locate/views/items/tmpl/form.default.xml

Note: xml has hardcoded SQL for MySQL → should be model instead


<header name="category" type="category" sortable="true" tdwidth="10%" />

●


<field name="catid" type="sql" translate="false"query="SELECT * FROM #__categories" key_field="id" value_field="title" />

●


5. categories – list


5. categories – form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml


<field name="catid" type="category"

● extension="com_db8locate"● class="inputbox"● label="JCATEGORY"● required="true"● size="1" /> ●


5. categories – form


5. categories – toolbar/administrator/components/com_db8locate/toolbar.php

●<?phpdefined('_JEXEC') or die();

class Db8locateToolbar extends FOFToolbar {

public function Db8locateHelperRenderSubmenu($vName) { return $this->renderSubmenu($vName); }

public function renderSubmenu($vName = null) { if (is_null($vName)) { $vName = $this->input->getCmd('view', 'cpanel'); } $this->input->set('view', $vName);

parent::renderSubmenu(); $toolbar = FOFToolbar::getAnInstance($this->input->getCmd('option',

'com_db8locate'), $this->config); $toolbar->appendLink(Jtext::_('COM_DB8LOCATE_SUBMENU_CATEGORIES'),

'index.php?option=com_categories&extension=com_db8locate', $vName == 'categories');}

}


5. categories – toolbar


5. categories – toolbar in Category ManagerCreate button in Category Manager to navigate back to “Items”:/administrator/components/com_db8locate/helpers/db8locate.php

●<?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');

● }●}


5. categories – Category ManagerClick on “Location Categories”, Result:

Warning: Invalid argument supplied for foreach() in /var/www/rad/libraries/cms/helper/content.php on line 121


6. access levels

1. Access to application


6. access levels application 1/2/administrator/components/com_db8locate/access.xml

●<?xml version="1.0" encoding="utf-8"?>●<access component="com_db8locate">● ●<section name="component">

● <action name="core.admin" title="JACTION_ADMIN"description="JACTION_ADMIN_COMPONENT_DESC" />

<action name="core.manage" title="JACTION_MANAGE" description="JACTION_MANAGE_COMPONENT_DESC" />

● <action name="core.create" title="JACTION_CREATE" description="JACTION_CREATE_COMPONENT_DESC" />

● <action name="core.delete" title="JACTION_DELETE" description="JACTION_DELETE_COMPONENT_DESC" />

● <action name="core.edit" title="JACTION_EDIT" description="JACTION_EDIT_COMPONENT_DESC" />

● <action name="core.edit.state" title="JACTION_EDITSTATE" description="JACTION_EDITSTATE_COMPONENT_DESC" />

● </section>


6. access levels application 2/2/administrator/components/com_db8locate/access.xml

● <section name="category">● <action name="core.manage" title="JACTION_MANAGE"

description="JACTION_MANAGE_COMPONENT_DESC" />● <action name="core.create" title="JACTION_CREATE"

description="COM_CATEGORIES_ACCESS_CREATE_DESC" />● <action name="core.delete" title="JACTION_DELETE"

description="COM_CATEGORIES_ACCESS_DELETE_DESC" />● <action name="core.edit" title="JACTION_EDIT"

description="COM_CATEGORIES_ACCESS_EDIT_DESC" />● <action name="core.edit.state" title="JACTION_EDITSTATE"

description="COM_CATEGORIES_ ACCESS_EDITSTATE_DESC" />

● </section>●

●</access>


6. access levels

2. (Front-end) access to database items


6. access levels – list


7. parameters


7. parameters/administrator/components/com_db8locate/config.xmlvia Components > db8 locate > categories > [options]

●<?xml version="1.0" encoding="UTF-8"?>●<config>●

● <fieldset name="permissions"● label="JCONFIG_PERMISSIONS_LABEL"● description="JCONFIG_PERMISSIONS_DESC" >●

● <field name="rules"● type="rules"● label="JCONFIG_PERMISSIONS_LABEL"● class="inputbox"● filter="rules"● component="com_db8locate"● section="component" />●

● </fieldset>●

●</config>


8. multilingual


8. multilingual – database fieldAdd new field “language” to store language code

ALTER TABLE `#__db8locate_items` ADD `language` CHAR( 7 ) NOT NULL DEFAULT '*';


8. multilingual – list/administrator/components/com_db8locate/views/items/tmpl/form.default.xml


<header name="language" type="language" sortable="true" tdwidth="10%" />

●

●


<field name="language" type="text" tdwidth="10%" />●


8. multilingual – form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml


<field name="language" type="contentlanguage"

label="JFIELD_LANGUAGE_LABEL" >● <option value="*">JALL</option>● </field> ● ●


8. multilingual – form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml


<field name="language" type="contentlanguage"

label="JFIELD_LANGUAGE_LABEL" >● <option value="*">JALL</option>● </field> ● ●


8. multilingual – list


9. “magic fields”


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


10. tags


10. tags#__tags tabel stores tags:

id title4 Joomla5 Linux

#__contentitem_tag_map links content items and tags:

type_alias core_content_id content_item_id tag_id type_idcom_content.article 1 1 2 1com_content.article 1 1 3 1com_content.article 3 2 4 1com_content.article 3 2 5 1com_weblinks.weblink 2 1 4 2com_weblinks.weblink 2 1 5 2


10. tags – form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml


<field name="tags" type="tag" label="JTAG" description="JTAG_DESC" class="inputbox span12" multiple="true" >

</field>


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.


11. my own fields...


11. db8locate – database fieldAdd your own fields to database

ALTER TABLE `jos_db8locate_items` ●ADD `location` VARCHAR( 60 ) NOT NULL ,●ADD àddress` 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


11. db8locate – list


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', '');●

●

● if (empty($this->_formData)) {● return array();● } else {● return $this->_formData;● }● }●}


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>


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


12. front-end


12. front-end – basic component1.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


d) tools


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!”)


Sources● Documentation

https://www.akeebabackup.com/documentation/fof.html

● FOF Mailinglist: https://groups.google.com/forum/#!forum/frameworkonframework

● Source code Github: https://github.com/akeeba/fof

● Examples:https://github.com/akeeba/todo-fof-example/ https://github.com/akeeba/contactus Akeeba BackupAkeeba Ticket Systemhttps://github.com/tuum/com_timesheet



Questions?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


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

● Tools - J Boontje http://www.sxc.hu/photo/805571

● signs signs - Jason Antony http://www.sxc.hu/photo/751034

Technology

Developing a Joomla 3.x Component using RAD FOF- Part 1: Back-end - Joomladay Germany 2014