Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Developing a Joomla 
Component using RAD/FOF 
Part 2: Front-end 
Peter Martin, www.db8.nl. twitter: @pe7er 
Joomladay.de –...
Presentation Overview 
(Part 1: Developing a Joomla back-end component: db8locate) 
a)Introduction 
b)Rapid Application De...
a) Introduction 
● Your own webapplication: programming everything from 
scratch 
● PHP/MySQL/HTML/CSS/JavaScript 
● Jooml...
a) Functionality component back-end 
● Category list 
● Display list of categories 
● New / Edit a category 
● Delete cate...
a) Functionality component front-end 
● Display list of categories 
● Display a single category 
● Display list of items 
...
b) Rapid Application Development (RAD) 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
b) Software Development Framework 
● Abstracting common code functionality 
● Conventions 
● Don’t Repeat Yourself (DRY) 
...
Rapid Application Development (RAD) 
● RAD = Framework on Framework (since Joomla 3.2) 
● Extension of Joomla! Platform, N...
RAD/ FOF/ F0F ? 
● FOF (F O F) – Akeeba etc 
● RAD – FOF implementation in Joomla > version 3.2 
● F0F (F zero F) – Fork o...
c) Joomla Component with FOF 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
c) Joomla Component with FOF 
● Development Environment 
● Local web environment: 
(LAMP/XAMP/MAMP) + phpMyAdmin 
● Joomla...
“db8 locate” component 
Goal: Manage & display locations on a Google Map 
● Name: “db8 Locate” 
● Component name: com_db8l...
1. basic component (back-end) 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
1. basic component (back-end) 
1.Entry point 
/administrator/components/com_db8locate/db8locate.php 
2.Dispatcher configur...
2. basic front-end component 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
2. front-end – basic component 
1.Entry point 
/components/com_db8locate/db8locate.php 
2.View: list 
/components/com_db8l...
2.1 front-end – entry point 
/administrator/components/com_db8locate/db8locate.php 
<?php 
defined('_JEXEC') or die(); 
//...
2.2 front-end – view list 
/components/com_db8locate/views/items/tmpl/form.default.xml 
<?xml version="1.0" encoding="UTF-...
2.2 front-end – view list 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
2.3 front-end – view details 
/components/com_db8locate/views/item/tmpl/form.item.xml 
<?xml version="1.0" encoding="utf-8...
2.3 front-end – view details 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
2.4 language files 1. 
/components/com_db8locate/language/en-GB/en-GB.com_db8locate.ini 
TIP: “Debug Language” & collect a...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
3. more views
3. more views 
Combine XML & PHP 
/components/com_db8locate/views/items/tmpl/default.php 
and load form.default.xml 
<?php...
3. more views – mixed php & xml 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
3. more views 
● Extra (built-in) output options: 
&format=csv 
administrator/index.php?option=com_db8locate&format=csv 
&...
d) local development & github 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
d) Setting up local environment 1/3 
● 1. Create repository at github: “jdde” 
https://github.com/pe7er/jdde 
● 2. Create ...
d) Setting up local environment 2/3 
● 6. Create folders + manifest xml 
in /home/pe7er/development/jdde/ 
$ mkdir fronten...
d) Setting up local environment 3/3 
● 8. create symbolic links for front-end 
front-end 
$ ln -s /home/pe7er/development/...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
e) DEMO
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
f) tools
Errors 
● IMHO Harder to detect than "regular" Joomla component! 
● Cache!! 
● Debug 
● E.g. back-end error: “An error has...
Sources 
● Documentation 
https://www.akeebabackup.com/documentation/fof.html 
● FOF Mailinglist: 
https://groups.google.c...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
Questions? 
Presentation available at: 
http://www.db8.nl 
Component db8locate available at: 
https://github.com/pe7er/db8...
Used photos 
● Speed Typing - Matthew Bowden http://www.sxc.hu/photo/275499 
● Speedometer – Abdulhamid AlFadhly http://ww...
Upcoming SlideShare
Loading in …5
×

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

3,186 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. Developing a Joomla Component using RAD/FOF Part 2: Front-end Peter Martin, www.db8.nl. twitter: @pe7er Joomladay.de – 12+13 september 2014
  2. 2. 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
  3. 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. 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. 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. 6. b) Rapid Application Development (RAD) JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  7. 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. 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. 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. 10. c) Joomla Component with FOF JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  11. 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. 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 in browser JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  13. 13. 1. basic component (back-end) JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  14. 14. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  15. 15. 2. basic front-end component JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  16. 16. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  17. 17. 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(); JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  18. 18. 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&amp;view=item&amp;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" JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 key_field="id" value_field="title"/> </fieldset> </form>
  19. 19. 2.2 front-end – view list JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  20. 20. 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" /> ● JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 ● </fieldset> ●</form>
  21. 21. 2.3 front-end – view details JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  22. 22. 2.4 language files 1. /components/com_db8locate/language/en-GB/en-GB.com_db8locate.ini TIP: “Debug Language” & collect all “lables to translate” JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  23. 23. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 3. more views
  24. 24. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  25. 25. 3. more views – mixed php & xml JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  26. 26. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  27. 27. d) local development & github JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  28. 28. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  29. 29. 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-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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  30. 30. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  31. 31. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 e) DEMO
  32. 32. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 f) tools
  33. 33. 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
  34. 34. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  35. 35. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  36. 36. 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
  37. 37. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144

×