How to create a joomla component from scratch


Published on

In this presentation, Tim Plummer shows you how you can create your own Joomla component by forking Hello World, then adding some improvements to make it more like a typical third party Joomla extension. Files and code used in this presentation will be available for download.

Published in: Technology
  • Excelent slider tutorial howto make a COmponents for Joomla!
    Are you sure you want to  Yes  No
    Your message goes here
  • If you would like to know more, check out the online Joomla component development workshop which is a step by step tutorial that shows you how to fork the Hello World Tutorial and turn it into a useful extension.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How to create a joomla component from scratch

  1. 1. How to create a Joomla component from scratch Tim Plummer @bfsurveyPresented at Sydney JUG 12/06/2012
  2. 2. 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
  3. 3. My Joomla Development Story
  4. 4. What is a component?
  5. 5. What is a module?
  6. 6. What is a plugin?
  7. 7. Can we make a component in an hour? Yes (if we cheat)
  8. 8. Tools you need • Web Server & PHP & MySQL (XAMPP) • Text editor or IDE (Textpad / Notepad++ or Eclipse / Netbeans) • Web browser (Firefox with firebug)
  9. 9. What license?• GNU GPL (if you want to be listed on the JED)• Free as in “Freedom” not free as in “Free Beer”
  10. 10. Set Error Reporting to Maximum
  11. 11. SecurityNever EVER trust your userALWAYS sanitise user input!
  12. 12. Let’s fork com_helloworld
  13. 13. File Structure
  14. 14. Demo time…
  15. 15. Batch rename files@echo offsetlocal enabledelayedexpansionfor /R %%j in (*.*) do ( set filename=%%~nj set filename=!filename:helloworld=sjug! if not !filename!==%%~nj ren %%j!filename!%%~xj)
  16. 16. Find and replace textcom_helloworld com_sjugHelloWorld SjugCOM_HELLOWORLD COM_SJUGhelloworld sjugHELLOWORLD SJUGHello World Sjughello sjugHello SjugWorld Sjug
  17. 17. grepWin (free tool – windows only)
  18. 18. Xml file• Change date, author, version etc
  19. 19. Zip it up• I like 7-zip (
  20. 20. Now let’s install it
  21. 21. Now let’s try it
  22. 22. Demo time…
  23. 23. Add more fields to the form
  24. 24. Add more fields to the form/administrator/components/com_sjug/models/forms/sjug.xml
  25. 25. Add more fields to the form/administrator/language/en-GB/en-GB.com_sjug.ini
  26. 26. Add more fields to the form Use phpMyAdminYou should also add these fields to/administrator/components/com_sjug/sql/install.mysql.utf8.sql
  27. 27. Adding toolbar buttons• JToolBarHelper::publish(‘sjugs.publish, JTOOLBAR_PUBLISH, true); JToolBarHelper::unpublish(‘sjugs.unpublish, JTOOLBAR_UNPUBLISH, true); JToolBarHelper::archiveList(‘sjugs.archive);
  28. 28. Add published column to list view
  29. 29. 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">
  30. 30. Fix menu icon/media/com_sjug/images/tux-16x16.png
  31. 31. Fix Toolbar Image/media/com_sjug/images/tux-48x48.png
  32. 32. Add link to title in list view/administrator/components/com_sjug/views/sjugs/tmpl/default_body.php
  33. 33. Status Filter/administrator/components/com_sjug/views/sjugs/tmpl/default.php/administrator/components/com_sjug/views/sjugs/view.html.php
  34. 34. Status Filter/administrator/components/com_sjug/models/sjugs.php
  35. 35. Change delete to trash/administrator/components/com_sjug/views/sjugs/view.html.php
  36. 36. Now it looks like a Joomla Component
  37. 37. Now you are ready to start creating your own components
  38. 38. Questions?
  39. 39. Tim Plummer