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

Developing a Joomla
Component using RAD/FOF
Part 2: Front-end
Peter Martin, www.db8.nl. twitter: @pe7er
Joomladay.de – 12+13 september 2014

Presentation Overview
(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
>>> Sheets available: www.db8.nl <<<
>>> Component: https://github.com/pe7er/db8locate <<<
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144

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)

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

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)

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” component
Goal: 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 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

2.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();

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 files 1.
/components/com_db8locate/language/en-GB/en-GB.com_db8locate.ini
TIP: “Debug Language” & collect all “lables to translate”

3. more views

3. more views
Combine XML & PHP
/components/com_db8locate/views/items/tmpl/default.php
and load form.default.xml
<?php
$viewTemplate = $this->getRenderedForm();
echo $viewTemplate;
?>
E.g. mix with Google Maps

3. more views – mixed php & xml

3. 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
● Media files overrides
<form
lessfiles="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

● 6. Create folders + manifest xml
in /home/pe7er/development/jdde/
$ mkdir frontend
$ mkdir backend
$ nano db8usergroups.xml
● 7. create symbolic links for back-end
Back-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

● 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 Backup
Akeeba Ticket System
https://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

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

More Related Content

What's hot

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

More from Peter Martin

Recently uploaded

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