Download - Developing a Joomla 3.x Component using RAD FOF- Part 2: Front-end + demo - Joomladay Germany 2014

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

Developing a Joomla Component using RAD/FOF

Part 2: Front-end

Joomladay Deutschland 2014Joomladay Deutschland 2014

Presentation Overview

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

(Part 1: Developing a Joomla back-end component: db8locate)

a)Introduction

b)Rapid Application Development (RAD) / FOF

c)Joomla Component with FOF

d)Developing a Joomla front-end component: db8locate

e)Demo 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 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


2. basic front-end component


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


2.1 front-end – 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();


2.2 front-end – view list/components/com_db8locate/views/items/tmpl/form.default.xml

<?xml version="1.0" encoding="UTF-8"?><form type="browse" show_header="1" show_filters="0" show_pagination="1" show_enabled="1" norows_placeholder="COM_DB8LOCATE_COMMON_NORECORDS" > <headerset> <header name="title" type="fieldsearchable" sortable="true"buttons="true" /> <header name="city" type="fieldsearchable" sortable="true"buttons="false" /> <header name="region" sortable="true"buttons="false" /> <header name="country" sortable="true"buttons="false" tdwidth="20%" /> <header name="category" sortable="false"buttons="false" /> </headerset>

<fieldset name="items"> <field name="title" type="text" show_link="true" url="index.php?option=com_db8locate&view=item&id=[ITEM:ID]" class="todoitem" empty_replacement="(no title)" />

<field name="city" type="text" /> <field name="region" type="text" /> <field name="country" type="text" /> <field name="catid" type="sql" translate="false" query="SELECT * FROM #__categories" key_field="id" value_field="title"/> </fieldset></form>


2.2 front-end – view list


2.3 front-end – view details/components/com_db8locate/views/item/tmpl/form.item.xml

<?xml version="1.0" encoding="utf-8"?>●<form● type="read">● ● <fieldset name="a_single_item" class="item-container form-horizontal">● <field name="title" type="text"● label="COM_DB8LOCATE_TITLE"● class="db8locate-title-field"● size="50"/>●

● <field name="city" type="text"● label="COM_DB8LOCATE_CITY"● labelclass="db8locate-field"● size="20" />●

● <field name="website" type="text"● label="COM_DB8LOCATE_WEBSITE"● labelclass="db8locate-field"● size="40" />● ● </fieldset>●</form>


2.3 front-end – view details


2.4 language files1.

/components/com_db8locate/language/en-GB/en-GB.com_db8locate.ini

TIP: “Debug Language” & collect all “lables to translate”


3. more views


3. more viewsCombine XML & PHP/components/com_db8locate/views/items/tmpl/default.phpand load form.default.xml

E.g. mix with Google Maps

<?php$viewTemplate = $this->getRenderedForm();echo $viewTemplate;?>


3. more views – mixed php & xml


3. more views● Extra (built-in) output options:

&format=csvadministrator/index.php?option=com_db8locate&format=csv

&format=jsonadministrator/index.php?option=com_db8locate&format=json

● Media files overrides

<formlessfiles="media://com_db8locate/css/frontend.less||media://com_db8locate/css/frontend.css


d) local development & github


d) Setting up local environment 1/3● 1. Create repository at github: “jdde”

https://github.com/pe7er/jdde● 2. Create local Joomla 3.3.3 website + Akeeba

http://localhost/jdde/ ● 3. Create new project in IDE (e.g. Netbeans)

with existing code● 4. Folder for git development

$ mkdir /home/pe7er/development ● 5. Checkout “jdde” repo

$ git clone https://github.com/pe7er/jdde


d) Setting up local environment 2/3● 6. Create folders + manifest xml

in /home/pe7er/development/jdde/$ mkdir frontend$ mkdir backend$ nano db8usergroups.xml

● 7. create symbolic links for back-endBack-end $ ln -s /home/pe7er/development/jdde/backend /var/www/jdde/administrator/components/com_jdde

xml manifest$ ln -s /home/pe7er/development/jdde/jdde.xml /var/www/jdde/administrator/components/com_jdde/jdde.xml


d) Setting up local environment 3/3● 8. create symbolic links for front-end

front-end$ ln -s /home/pe7er/development/jdde/frontend /var/www/jdde/components/com_jdde

● 9. add to local git$ git add .$ git commit -m "my first commit :-)"

● 10. add to repo at github$ git push origin master


e) DEMO


f) 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

● 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

● Tower crane grey – Sameboat http://commons.wikimedia.org/wiki/File:Tower_crane_grey.png

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

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