How to create a Joomla
 component from scratch
           Tim Plummer
             @bfsurvey
Presented at Sydney JUG 12/06/2012
About me
              • I’ve developed over 24 Joomla
                extensions including…
Tim Plummer
 @bfsurvey
              •   Member of bug squad
              •   Contributed code to Joomla core
              •   Convenor of the Sydney JUG (2012)
              •   Co-organiser of Sydney JoomlaDay
My Joomla Development Story
What is a component?
What is a module?
What is a plugin?
Can we make a component in an hour?




   Yes    (if we cheat)
Tools you need
 • Web Server & PHP & MySQL
   (XAMPP)
 • Text editor or IDE (Textpad /
   Notepad++ or Eclipse / Netbeans)
 • Web browser (Firefox with firebug)
What license?
• GNU GPL (if you want to
  be listed on the JED)
• Free as in “Freedom” not
  free as in “Free Beer”
Set Error Reporting to Maximum
Security

Never EVER trust your user

ALWAYS sanitise user input!
Let’s fork com_helloworld
File Structure
Demo time…
Batch rename files
@echo off
setlocal enabledelayedexpansion
for /R %%j in (*.*) do (
  set filename=%%~nj
  set filename=!filename:helloworld=sjug!
  if not !filename!==%%~nj ren %%j
!filename!%%~xj
)
Find and replace text
com_helloworld     com_sjug
HelloWorld         Sjug
COM_HELLOWORLD     COM_SJUG
helloworld         sjug
HELLOWORLD         SJUG
Hello World        Sjug
hello              sjug
Hello              Sjug
World              Sjug
grepWin (free tool – windows only)
Xml file
• Change date, author, version etc
Zip it up
• I like 7-zip (http://www.7-zip.org/)
Now let’s install it
Now let’s try it
Demo time…
Add more fields to the form
Add more fields to the form
/administrator/components/com_sjug/models/forms/sjug.xml
Add more fields to the form
/administrator/language/en-GB/en-GB.com_sjug.ini
Add more fields to the form
 Use phpMyAdmin




You should also add these fields to
/administrator/components/com_sjug/sql/install.mysql.utf8.sql
Adding toolbar buttons
• http://docs.joomla.org/JToolBarHelper
    JToolBarHelper::publish(‘sjugs.publish', 'JTOOLBAR_PUBLISH', true);


    JToolBarHelper::unpublish(‘sjugs.unpublish', 'JTOOLBAR_UNPUBLISH', true);



    JToolBarHelper::archiveList(‘sjugs.archive');
Add published column to list view
Add published column to list view
/administrator/components/com_sjug/views/sjugs/tmpl/default_head.php
<th width="5%">
         <?php echo JText::_('JSTATUS'); ?>
</th>

/administrator/components/com_sjug/views/sjugs/tmpl/default_body.php
<td>
         <?php echo JHtml::_('jgrid.published', $item->published, $i, ‘sjugs.', '', 'cb',
$item->publish_up, $item->publish_down); ?>
</td>

/administrator/components/com_sjug/models/sjugs.php
$query->select('id,greeting,published,publish_up,publish_down');

/administrator/components/com_sjug/views/sjugs/tmpl/default_foot.php
<td colspan="4">
Fix menu icon
/media/com_sjug/images/tux-16x16.png
Fix Toolbar Image
/media/com_sjug/images/tux-48x48.png
Add link to title in list view
/administrator/components/com_sjug/views/sjugs/tmpl/default_body.php
Status Filter


/administrator/components/com_sjug/views/sjugs/tmpl/default.php




/administrator/components/com_sjug/views/sjugs/view.html.php
Status Filter
/administrator/components/com_sjug/models/sjugs.php
Change delete to trash


/administrator/components/com_sjug/views/sjugs/view.html.php
Now it looks like a Joomla Component
Now you are ready to start creating
     your own components
Questions?
Tim Plummer
       @bfsurvey
tim@tamlyncreative.com.au

How to create a joomla component from scratch