Developing a Joomla 3.x Component using RAD FOF- Part 2: Front-end + demo - Joomladay Germany 2014
-
Upload
peter-martin -
Category
Technology
-
view
670 -
download
0
description
Transcript of 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 <<<
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