Upload
peter-martin
View
671
Download
0
Embed Size (px)
DESCRIPTION
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: * Programming a simple front-end component using FOF * Demo with programming, github & local web environment
Citation preview
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 <<<
Joomladay Deutschland 2014Joomladay Deutschland 2014
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
Joomladay Deutschland 2014Joomladay Deutschland 2014
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
Joomladay Deutschland 2014Joomladay Deutschland 2014
a) Functionality component front-end● Display list of categories
● Display a single category
● Display list of items
● Display single item
Joomladay Deutschland 2014Joomladay Deutschland 2014
b) Rapid Application Development (RAD)
Joomladay Deutschland 2014Joomladay Deutschland 2014
● 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
Joomladay Deutschland 2014Joomladay Deutschland 2014
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)
Joomladay Deutschland 2014Joomladay Deutschland 2014
RAD/ FOF/ F0F ?● FOF (F O F) – Akeeba etc● RAD – FOF implementation in Joomla > version 3.2● F0F (F zero F) – Fork of FOF
Joomladay Deutschland 2014Joomladay Deutschland 2014
c) Joomla Component with FOF
Joomladay Deutschland 2014Joomladay Deutschland 2014
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”
Joomladay Deutschland 2014Joomladay Deutschland 2014
“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
Joomladay Deutschland 2014Joomladay Deutschland 2014
1. basic component (back-end)
Joomladay Deutschland 2014Joomladay Deutschland 2014
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
Joomladay Deutschland 2014Joomladay Deutschland 2014
2. basic front-end component
Joomladay Deutschland 2014Joomladay Deutschland 2014
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
Joomladay Deutschland 2014Joomladay Deutschland 2014
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();
Joomladay Deutschland 2014Joomladay Deutschland 2014
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>
Joomladay Deutschland 2014Joomladay Deutschland 2014
2.2 front-end – view list
Joomladay Deutschland 2014Joomladay Deutschland 2014
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>
Joomladay Deutschland 2014Joomladay Deutschland 2014
2.3 front-end – view details
Joomladay Deutschland 2014Joomladay Deutschland 2014
2.4 language files1.
/components/com_db8locate/language/en-GB/en-GB.com_db8locate.ini
TIP: “Debug Language” & collect all “lables to translate”
Joomladay Deutschland 2014Joomladay Deutschland 2014
3. more views
Joomladay Deutschland 2014Joomladay Deutschland 2014
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;?>
Joomladay Deutschland 2014Joomladay Deutschland 2014
3. more views – mixed php & xml
Joomladay Deutschland 2014Joomladay Deutschland 2014
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
Joomladay Deutschland 2014Joomladay Deutschland 2014
d) local development & github
Joomladay Deutschland 2014Joomladay Deutschland 2014
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
Joomladay Deutschland 2014Joomladay Deutschland 2014
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
Joomladay Deutschland 2014Joomladay Deutschland 2014
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
Joomladay Deutschland 2014Joomladay Deutschland 2014
e) DEMO
Joomladay Deutschland 2014Joomladay Deutschland 2014
f) tools
Joomladay Deutschland 2014Joomladay Deutschland 2014
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!”)
Joomladay Deutschland 2014Joomladay Deutschland 2014
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
Joomladay Deutschland 2014Joomladay Deutschland 2014
Joomladay Deutschland 2014Joomladay Deutschland 2014
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
Joomladay Deutschland 2014Joomladay Deutschland 2014
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