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 1: Back-end 
Peter Martin, www.db8.nl. twitter: @pe7er 
Joomladay.de – ...
Presentation Overview 
a)Introduction 
b)Rapid Application Development (RAD) / FOF 
c)Developing a Joomla back-end compone...
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...
1.1 basic component – entry point 
/administrator/components/com_db8locate/db8locate.php 
<?php 
defined('_JEXEC') or die(...
1.2 basic comp. – dispatcher config 
/administrator/components/com_db8locate/fof.xml 
●<?xml version="1.0" encoding="UTF-8...
1.3 basic component – SQL definition 
● Create SQL installation file: 
/administrator/components/com_db8locate/ 
sql/insta...
1.3 basic component – SQL definition 
/administrator/components/com_db8locate/sql/install/mysql/install.sql 
CREATE TABLE ...
1.4 basic component – XML manifest 1/2 
/administrator/components/com_db8locate/db8locate.xml 
<?xml version="1.0" encodin...
1.4 basic component – XML manifest 2/2 
/administrator/components/com_db8locate/db8locate.xml 
<!-- Administrator back-end...
1.5 basic component – view list 
/administrator/components/com_db8locate/views/items/tmpl/form.default.xml 
JJoooommllaadd...
1.6 basic component – view form 
/administrator/components/com_db8locate/views/item/tmpl/form.form.xml 
<?xml version="1.0...
1. basic component – installation 
Via Extensions > Extension Manager > Discover 
JJoooommllaaddaayy DDeeuuttsscchhllaannd...
1. basic component (back-end) 
● List view 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
1. basic component (back-end) 
● Form view 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
1. basic component (back-end) 
● List view after couple of new & save 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
2. language file 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
2. language file 
sys.ini → For menu items etc. 
Put in /language/ map of db8locate component! 
/administrator/components/...
2. language file 
.ini → large file for all language lables com_db8locate 
/administrator/components/com_db8locate/ 
langu...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
2. language file
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
3. switch on/off
3. switch on/off – database field 
New field “enabled” to store publication status 
ALTER TABLE `#__db8locate_items` ADD `...
3. switch on/off – database field 
/administrator/components/com_db8locate/views/items/tmpl/form.default.xml 
Add to <head...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
3. switch on/off
3. switch on/off – form 
/administrator/components/com_db8locate/views/item/tmpl/form.form.xml 
Add to <fieldset> 
● 
<fie...
3. switch on/off – form 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
4. order
4. order – database field 
New database field “ordering” 
ALTER TABLE `#__db8locate_items` ADD `ordering` INT( 11 ) 
NOT N...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
4. order – list 
/administrator/components/com_db8locate/views/items/t...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
4. order
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
5. categories
5. categories – database field 
Add new database field “catid” to store category_id 
ALTER TABLE `#__db8locate_items` ADD ...
5. categories – list 
/administrator/components/com_db8locate/views/items/tmpl/form.default.xml 
Note: xml has hardcoded S...
5. categories – list 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
5. categories – form 
/administrator/components/com_db8locate/views/item/tmpl/form.form.xml 
Add to <fieldset> 
● 
<field ...
5. categories – form 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
5. categories – toolbar 
/administrator/components/com_db8locate/toolbar.php 
●<?php 
defined('_JEXEC') or die(); 
class D...
5. categories – toolbar 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
5. categories – toolbar in Category Manager 
Create button in Category Manager to navigate back to “Items”: 
/administrato...
5. categories – Category Manager 
Click on “Location Categories”, Result: 
Warning: Invalid argument supplied for foreach(...
6. access levels 
1. Access to application 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
6. access levels application 1/2 
/administrator/components/com_db8locate/access.xml 
●<?xml version="1.0" encoding="utf-8...
6. access levels application 2/2 
/administrator/components/com_db8locate/access.xml 
● <section name="category"> 
● <acti...
6. access levels 
2. (Front-end) access to 
database items 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
6. access levels – list 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
7. parameters
7. parameters 
/administrator/components/com_db8locate/config.xml 
via Components > db8 locate > categories > [options] 
●...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
8. multilingual
8. multilingual – database field 
Add new field “language” to store language code 
ALTER TABLE `#__db8locate_items` ADD `l...
8. multilingual – list 
/administrator/components/com_db8locate/views/items/tmpl/form.default.xml 
JJoooommllaaddaayy DDee...
8. multilingual – form 
/administrator/components/com_db8locate/views/item/tmpl/form.form.xml 
Add to <fieldset> 
● 
<fiel...
8. multilingual – form 
/administrator/components/com_db8locate/views/item/tmpl/form.form.xml 
Add to <fieldset> 
● 
<fiel...
8. multilingual – list 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
9. “magic fields” 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
9. “magic fields” 
● Present in component: 
enabled (“state”), ordering, 
● Also add to database table: 
created_by, creat...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
10. tags
10. tags 
#__tags tabel stores tags: 
id title 
4 Joomla 
5 Linux 
#__contentitem_tag_map links content items and tags: 
t...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
10. tags – form 
/administrator/components/com_db8locate/views/item/tm...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
10. tags 
Unfortunately ... not working... bug in Joomla to versie 3.2...
11. my own fields... 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
11. db8locate – database field 
Add your own fields to database 
ALTER TABLE `jos_db8locate_items` 
●ADD `location` VARCHA...
11. db8locate – list 
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
11. db8locate – further improvements 
● Update your SQL installation script: 
/administrator/components/com_db8locate/sql/...
11. db8locate – further improvements 
● Edit form too long → divide into columns 
/administrator/components/com_db8locate/...
11. db8locate – further improvements 
● Lookup Coordinates of each Address at Google Maps API 
● Add lookup code for Googl...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
12. front-end
12. front-end – basic component 
1.Entry point 
/components/com_db8locate/db8locate.php 
2.View: list 
/components/com_db8...
JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 
d) 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://www...
Upcoming SlideShare
Loading in …5
×

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

2,183 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:
* The Basics of FOF
* Programming a back-end component using FOF
Note: It *is* possible to attend this session without attending Part 2: Front-end After this session you should have an idea what FOF is and how to create your own back-end component using FOF.

Published in: Technology
  • Be the first to comment

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

  1. 1. Developing a Joomla Component using RAD/FOF Part 1: Back-end Peter Martin, www.db8.nl. twitter: @pe7er Joomladay.de – 12+13 september 2014
  2. 2. Presentation Overview a)Introduction b)Rapid Application Development (RAD) / FOF c)Developing a Joomla back-end component: db8locate (Part 2: Developing a Joomla front-end component: db8locate 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 back-end 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. 1.1 basic component – 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
  16. 16. 1.2 basic comp. – dispatcher config /administrator/components/com_db8locate/fof.xml ●<?xml version="1.0" encoding="UTF-8"?> ●<fof> JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 ● <backend> ● <dispatcher> ● <option name="default_view">items</option> </dispatcher> ● </backend> ●</fof>
  17. 17. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  18. 18. 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; JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  19. 19. 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>joomla@db8.nl</authorEmail> <version>1.0.1</version> <description>Component to manage and display locations on a Google Map</description> <!-- SQL query files to execute on installation --> <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> JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  20. 20. 1.4 basic component – XML manifest 2/2 /administrator/components/com_db8locate/db8locate.xml <!-- Administrator back-end section --> <administration> <!-- Administration menu --> <menu view="cpanel">COM_DB8LOCATE</menu> <!-- Back-end files --> <files folder="backend"> <folder>sql</folder> <filename>db8locate.php</filename> <filename>fof.xml</filename> </files> </administration> </extension> JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  21. 21. 1.5 basic component – view list /administrator/components/com_db8locate/views/items/tmpl/form.default.xml JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 <?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 &amp;view=item&amp;id=[ITEM:ID]" empty_replacement="(no title)" /> ● </fieldset> ● ●</form>
  22. 22. 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"> ● JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 ● <field name="title" type="text" ● class="inputbox" ● label="JGLOBAL_TITLE" ● required="true" ● Size="50" /> ● </fieldset> ●</form>
  23. 23. 1. basic component – installation Via Extensions > Extension Manager > Discover JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  24. 24. 1. basic component (back-end) ● List view JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  25. 25. 1. basic component (back-end) ● Form view JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  26. 26. 1. basic component (back-end) ● List view after couple of new & save JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  27. 27. 2. language file JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  28. 28. 2. language file sys.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" JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  29. 29. 2. language file .ini → large file for all language lables com_db8locate /administrator/components/com_db8locate/ language/en-GB/en-GB.com_db8locate.ini 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?" TIP: “Debug Language” & collect all “lables to translate” JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  30. 30. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 2. language file
  31. 31. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 3. switch on/off
  32. 32. 3. switch on/off – database field New field “enabled” to store publication status ALTER TABLE `#__db8locate_items` ADD `enabled` TINYINT( 3 ) NOT NULL DEFAULT '1'; JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  33. 33. 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"/> ● JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  34. 34. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 3. switch on/off
  35. 35. 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> ● JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  36. 36. 3. switch on/off – form JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  37. 37. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 4. order
  38. 38. 4. order – database field New database field “ordering” ALTER TABLE `#__db8locate_items` ADD `ordering` INT( 11 ) NOT NULL DEFAULT '0'; JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  39. 39. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 4. order – list /administrator/components/com_db8locate/views/items/tmpl/form.default.xml Add to <headerset> ● <header name="ordering" type="ordering" sortable="true" tdwidth="10%" /> ● ●Add to <fieldset name="items"> ● <field name="ordering" type="ordering" labelclass="order"/> ● ●
  40. 40. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 4. order
  41. 41. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 5. categories
  42. 42. 5. categories – database field Add new database field “catid” to store category_id ALTER TABLE `#__db8locate_items` ADD `catid` INT( 10 ) UNSIGNED NOT NULL DEFAULT '0'; JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  43. 43. 5. categories – list /administrator/components/com_db8locate/views/items/tmpl/form.default.xml Note: xml has hardcoded SQL for MySQL → should be model instead JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 Add to <headerset> ● <header name="category" type="category" sortable="true" tdwidth="10%" /> ● ●Add to <fieldset name="items"> <field name="catid" type="sql" translate="false" query="SELECT * FROM #__categories" key_field="id" value_field="title" /> ●
  44. 44. 5. categories – list JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  45. 45. 5. categories – form /administrator/components/com_db8locate/views/item/tmpl/form.form.xml Add to <fieldset> ● <field name="catid" type="category" ● extension="com_db8locate" ● class="inputbox" ● label="JCATEGORY" ● required="true" ● size="1" /> ● JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  46. 46. 5. categories – form JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  47. 47. 5. categories – toolbar /administrator/components/com_db8locate/toolbar.php ●<?php defined('_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'); } JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 }
  48. 48. 5. categories – toolbar JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  49. 49. 5. categories – toolbar in Category Manager Create button in Category Manager to navigate back to “Items”: /administrator/components/com_db8locate/helpers/db8locate.php JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 ●<?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'); ● } ●}
  50. 50. 5. categories – Category Manager Click on “Location Categories”, Result: Warning: Invalid argument supplied for foreach() in /var/www/rad/libraries/cms/helper/content.php on line 121 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  51. 51. 6. access levels 1. Access to application JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  52. 52. 6. access levels application 1/2 /administrator/components/com_db8locate/access.xml ●<?xml version="1.0" encoding="utf-8"?> ●<access component="com_db8locate"> ● JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 ●<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>
  53. 53. 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" /> JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 ● </section> ● ●</access>
  54. 54. 6. access levels 2. (Front-end) access to database items JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  55. 55. 6. access levels – list JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  56. 56. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 7. parameters
  57. 57. 7. parameters /administrator/components/com_db8locate/config.xml via 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" /> ● JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 ● </fieldset> ● ●</config>
  58. 58. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 8. multilingual
  59. 59. 8. multilingual – database field Add new field “language” to store language code ALTER TABLE `#__db8locate_items` ADD `language` CHAR( 7 ) NOT NULL DEFAULT '*'; JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  60. 60. 8. multilingual – list /administrator/components/com_db8locate/views/items/tmpl/form.default.xml JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 Add to <headerset> ● <header name="language" type="language" sortable="true" tdwidth="10%" /> ● ● ●Add to <fieldset name="items"> <field name="language" type="text" tdwidth="10%" /> ●
  61. 61. 8. multilingual – form /administrator/components/com_db8locate/views/item/tmpl/form.form.xml Add to <fieldset> ● <field name="language" type="contentlanguage" label="JFIELD_LANGUAGE_LABEL" > ● <option value="*">JALL</option> ● </field> ● JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 ●
  62. 62. 8. multilingual – form /administrator/components/com_db8locate/views/item/tmpl/form.form.xml Add to <fieldset> ● <field name="language" type="contentlanguage" label="JFIELD_LANGUAGE_LABEL" > ● <option value="*">JALL</option> ● </field> ● JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 ●
  63. 63. 8. multilingual – list JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  64. 64. 9. “magic fields” JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  65. 65. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  66. 66. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 10. tags
  67. 67. 10. tags #__tags tabel stores tags: id title 4 Joomla 5 Linux #__contentitem_tag_map links content items and tags: type_alias core_content_id content_item_id tag_id type_id com_content.article 1 1 2 1 com_content.article 1 1 3 1 com_content.article 3 2 4 1 com_content.article 3 2 5 1 com_weblinks.weblink 2 1 4 2 com_weblinks.weblink 2 1 5 2 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  68. 68. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 10. tags – form /administrator/components/com_db8locate/views/item/tmpl/form.form.xml Add to <fieldset> ● <field name="tags" type="tag" label="JTAG" description="JTAG_DESC" class="inputbox span12" multiple="true" > </field>
  69. 69. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 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.
  70. 70. 11. my own fields... JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  71. 71. 11. db8locate – database field Add your own fields to database ALTER TABLE `jos_db8locate_items` ●ADD `location` VARCHAR( 60 ) NOT NULL , ●ADD `address` 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  72. 72. 11. db8locate – list JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  73. 73. 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', ''); ● JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 ● ● if (empty($this->_formData)) { ● return array(); ● } else { ● return $this->_formData; ● } ● } ●}
  74. 74. 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> JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  75. 75. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  76. 76. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 12. front-end
  77. 77. 12. 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 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  78. 78. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 d) tools
  79. 79. 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
  80. 80. 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
  81. 81. JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144
  82. 82. 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
  83. 83. 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 JJoooommllaaddaayy DDeeuuttsscchhllaanndd 22001144 ● Tools - J Boontje http://www.sxc.hu/photo/805571 ● signs signs - Jason Antony http://www.sxc.hu/photo/751034

×