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…

• Member of bug squad

• Contributed code to Joomla core

• Convenor of the Sydney JUG (2012)

• Co-organiser of Sydney JoomlaDay

Tim Plummer @bfsurvey

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