Techgig Webinar: Joomla Introduction and Module Development June 2012

3,120 views

Published on

As you gain experience with procedural coding in PHP, you notice that there are tasks which are performed in a routine fashion and a lot of code which can be simply reused. What if you can save your time on these points using some of the existing PHP development frameworks and/or content management systems which allows MVC architecture and object oriented programming concepts to follow at ease for you?

In this beginner webinar on the topic, I would cover a quick introduction of content management system with focus on PHP based content management system “Joomla”. Joomla is considered as dynamic portal engine and content management system, and allows you to develop variety of systems from website, ecommerce store to a complex social network with the help of pre-built features i.e. caching, content management, web services, templates, and more.

The real power of Joomla lies in the scalability which can be achieved with the use of custom extensions which include templates, language files, plugins, modules and components. This webinar would further cover quick hands on workshop to download and setup Joomla on a demo server, and developing a simple module and component for Joomla version 2.5.

This webinar covers:

What is the basic database structure difference between Joomla 1.5 and Joomla 2.5 versions?
I was able to create and load modules easily in Joomla 1.5 but I can't do the same in Joomla 2.5?
Are too many modules a problem for the Joomla site?
Does the extension be compulsory an open source code?
Do I really need to switch to Joomla 2.5 from Joomla 1.5 and why?
How can I get more information on Joomla extension development?
Can I use Jquery framework in the extension development while Joomla uses MooTools JS framework?

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,120
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
279
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Hi, I am Vishwash Gaur. Today, I am going to present a beginner series webinar on the topic of Component and Module development in Joomla 2.5
  • There would be an added benefit if you have downloaded, installed and used Joomla! a little bit in prior.In reducing the procedural code issues i.e. lack of code reusability, higher debugging time and more
  • As you gain experience with procedural coding in PHP, you notice that there are tasks which are performed in a routine fashion and a lot of code is there which can be simply reused. When there are static methods in procedural code, we use objects as instances of classes and functions are wrapped to provide methods for objects to work. It results in better maintainability and testability. Is this all good – No! Everyone has seen that this OOPs programming based on MVC concept is sometimes feels as overengineered and most of the beginners simply can’t handle this. It becomes difficult to manage, extend and handle the code. So what is the solution? This can be achieved as if we use some of the existing PHP development frameworks and/or content management systems which allows MVC architecture and object oriented programming concepts to follow at ease. Some of such CMS are Joomla,Drupal, Typo3, WordPress (it is more considered as a blog engine) and more
  • Many websites, especially small or older websites, are built using static webpages. These webpages are built using HTML, Javascript, and Macromedia Flash computer code. This code is difficult to access on web servers and is virtually impossible to edit without special software and training. Thus, static websites are difficult and expensive to maintain. To solve this website design and maintenance problem, a new technology called a Content Management System (CMS) was developed. A CMS uses a database to store, retrieve, and edit the content of your website.  Each page of your site is stored as simple text - making it easy to edit, search, and manipulate. When someone visits your website the CMS automatically converts your text into the required HTML and Javascript. Furthermore, the CMS database allows for additional features to be easily integrated into the website: user login and passwords, events and calendars, blogs, news feeds, and much more.
  • Need, CMS, Technology, Cost, License, Who, HistoryFrontend, BackendExtensions – component, modules, plug-ins, templates, languagesContent and menusIt allows you to develop variety of systems from website, ecommerce store to a complex social network with the help of pre-built features i.e. caching, content management, web services, templates, and more.
  • Component: adds custom functions to your site that can be selected from menus as well as managed from the backendModule: shows data in a side box, possibly on multiple pages. Usually no manipulation.Language: defines an additional language for your sitePlugin: modifies content in articles or provides functions to extend other extensionsTemplate: define the look, feel, and navigation capabilities of your sitePackage: bundles related extensionsLibrary: provides functions to be used by other extensions
  • Note: Joomla can automatically create a database as if an authorized MySQL user account details are provided here. It will take few extra seconds on this screen for the DB creation.
  • Modules typically makeup the elements of sidebar or content menus. Module complements the content contained in a component; they are not intended to be main sub-stance of the page.Modules are installed through the admin panel, they don’t manipulate any data from the database all what they do is display the contents on the page like examples on the page.
  • Module folder is located inside the modules directory of either front end or backend as per the case of development.
  • Components frequently have sophisticated back-end controls. The back-end is commonly used to create and manage the records from database. In Joomla, Content manager and Banner manager are examples of a component.Convention: Decide structure of component before development i.e. for front end, back end or both – it would allow you easy programming reference during the development.
  • Techgig Webinar: Joomla Introduction and Module Development June 2012

    1. 1. Vishwash Gaur © 2012 Vishwash Gaur. All rights reserved.All registered trademarks, logos, products and service names belong to their respective owners. Image Credit: http://ayadipro.com/blog/high-tech-education/25-improvements-in-joomla-2-5/Disclaimer: Images used on this slide are for representative purposes only and belong to their respective owners.
    2. 2.  Basic knowledge of HTML, PHP and MySQL Interest in MVC and CMS frameworks to reduce development time A web server with PHP/MySQL installed on it Joomla! 2.5 package downloaded and installed ◦ it can be downloaded from http://www.joomla.org/download.html NOTE: This webinar is focused for the beginners in Joomla! and would cover only a basic overview due to limited time. Further details can be discussed separately later.
    3. 3. FAQ’s And Q&A Overview ◦ Content Management System ◦ What is Joomla!? ◦ Joomla! Extensions  Module Overview  Programming Conventions & Base Structure  Component Overview  Programming Conventions & Base Structure Hands on workshop ◦ How to download and install Joomla!? ◦ How to install Joomla! Extensions? Joomla! Module and Component Development – Hands on workshop ◦ Joomla! 2.5 Module Development ◦ Joomla! 2.5 Component Development - skipped
    4. 4. What is CMS?Why use CMS?What is Joomla!?Joomla Extensions
    5. 5.  Procedural code Vs Object Oriented Code Difficulties with Object Oriented Code Solution to focus on interfaces rather than implementation ◦ Content Management System
    6. 6. # A content management system (CMS) is a computer system that allows publishing, editing, and modifying content as well as site maintenance from a central page. It provides a collection of procedures used to manage workflow in a collaborative environment. #Source: Wikipedia: http://en.wikipedia.org/wiki/Content_management_system
    7. 7. No dynamic Poor code updates possible structure issuesNo easy internalcontent search Growing cost to maintain Limited features Not SEO friendly
    8. 8.  Dynamic Content and Structure Handling using Content Manager Add additional features easily Low cost to maintain Search engine friendly structure Standardized Code Template Management Support for web services Powerful Extensibility MVC Architecture
    9. 9.  Joomla! is considered as PHP based dynamic portal engine and content management system. The real power of Joomla! lies in the scalability ◦ It can be achieved with the use of custom extensions which include templates, language files, plugins, modules and components. Joomla is a phonetic spelling for the Swahili word "Jumla," which means "all together" or "as a whole“.
    10. 10. Reference & image credit: http://docs.joomla.org/Framework/1.5
    11. 11.  A Joomla! extension is a code package that extends the functionality or feature of default Joomla! installation.  Type of Joomla! 2.5 Extensions: CompoentsLibraries ModulesPackages Plugins Templates Languages Source: http://docs.joomla.org/Extension
    12. 12. How to download and installJoomla on your web server?
    13. 13.  Please go to http://www.joomla.org/download.html Click on the below shown package on the page It would download a zip package to your local computer Unzip the package and place in the root or desired folder on web server Open the web server link for the Joomla! Package placed and follow on-screen instructions
    14. 14.  Detailed Installation Instructions of Joomla! Is beyond the scope of this webinar due to limited time hence request you to visit http://docs.joomla.org/Use_Joomla!_on_your _own_computer for detailed installation instructions.
    15. 15. Select languageand proceed tonext page
    16. 16. It checks ifyour servermeets theinstallationrequirements
    17. 17. Joomla! Licenseto accept andproceed ahead.
    18. 18. Joomla can automatically create adatabase as if an authorized MySQL useraccount details are provided here.
    19. 19.  That’s it – expecting more  Helpful for beginners Can setup a working website in few minutes For more details on content management, please visit http://docs.joomla.org
    20. 20. An overview of both theJoomla! Extensions tounderstand thebasics, conventions andstructure.
    21. 21.  What is a module? ◦ Modules are lightweight and flexible extensions used for page rendering. These modules are often “boxes” arranged around a component on a typical page. A well-known example is the login module. Why should we use a module? ◦ Can work standalone ◦ Good for code reusability ◦ Can work with component for database linking Conventions ◦ Module name should be in small letters ◦ Module name should have a prefix “mod_”
    22. 22.  Depends on template Added in template using below code: ◦ <jdoc:include type="modules" name=“module-positon- name" /> Can be more than one modules on a page
    23. 23.  Go to Joomla! Admin Panel Access Top Menu>Extensions>Template Manager Click on options button on the top-right side of the toolbar Enable the “Preview module positions” Go to website front panel and add “?tp=1” to the url ◦ It will reveal the module positions in a Joomla template
    24. 24. Go to template manager
    25. 25. Click on options
    26. 26. Enable setting to previewmodule positions
    27. 27. http://yoursite.com/index.php?tp=1 Open your page with “?tp=1” at the end of url and it will reveal all Module positions
    28. 28.  Mod_modulename – module folder ◦ mod_modulename.xml ◦ mod_modulename.php ◦ helper.php: This helper file contains a class to provide various static functions to perform operations. It could be used to perform some calculation or to fetch data from DB. ◦ index.html: It is an empty file and created to prevent direct access to the directory. ◦ tmpl folder  default.php:  index.html: It is an empty file and created to prevent direct access to the directory.
    29. 29.  What is component? ◦ Components are the main functional units of Joomla!; they can be seen as mini-applications. ◦ A component can contain a module and a plug-in Why should we use a component? ◦ To manage more functional part or application ◦ To provide backend handling to a front-end functionality Conventions ◦ Component name should be prefixed by “com_” e.g. com_componentname ◦ Component name should start with small letters
    30. 30.  Depends on template Added in template using below code: ◦ <jdoc:include type="component" /> Can be only one component on a page
    31. 31. Image credit: http://www.slideshare.net/silenceit/joomlacontent-management-system
    32. 32. Website Backend:Website Front-end: admin/index.htmlhelloworld.xml admin/helloworld.phpsite/index.html admin/controller.phpsite/helloworld.php admin/models/index.html admin/models/fields/index.htmlsite/controller.php admin/models/fields/helloworld.phpsite/views/index.html admin/models/forms/index.htmlsite/views/helloworld/index.html admin/models/forms/helloworld.xmlsite/views/helloworld/view.html.php admin/models/helloworld.php admin/models/helloworlds.phpsite/views/helloworld/tmpl/index.html admin/views/index.htmlsite/views/helloworld/tmpl/default.xml admin/views/helloworlds/index.htmlsite/views/helloworld/tmpl/default.php admin/views/helloworlds/view.html.php admin/views/helloworlds/tmpl/index.htmlsite/models/index.html admin/views/helloworlds/tmpl/default.phpsite/models/helloworld.php admin/views/helloworlds/tmpl/default_head.php admin/views/helloworlds/tmpl/default_body.php admin/views/helloworlds/tmpl/default_foot.php admin/views/helloworld/index.html admin/views/helloworld/view.html.php admin/views/helloworld/tmpl/index.html admin/views/helloworld/tmpl/edit.php admin/tables/index.html admin/tables/helloworld.php admin/language/en-GB/en-GB.com_helloworld.ini admin/language/en-GB/en- GB.com_helloworld.menu.ini admin/controllers/index.html admin/controllers/helloworld.php admin/controllers/helloworlds.php
    33. 33. Hands on workshop to installmodules and components toextend website functionality inJoomla!
    34. 34.  Login to Joomla Admin panel at http://yoursite.com/administrator Go to Top menu>Extensions>Extension Manager
    35. 35. Go to extensionmanager
    36. 36. Select and uploadyour extension file
    37. 37. Post installation, componentswill be available under thecomponents menu item here
    38. 38. Postinstallation, moduleswill be availableunder the modulemanager
    39. 39. Select any existingmodule or create new
    40. 40. Select module type
    41. 41. Set additionalmodule detailsor otherconfiguration
    42. 42. Hands on workshop todevelop a basic Joomla!Module and component
    43. 43.  Let’s create a module called “Reviews” for this workshop which will display customer reviews on the web page It will allow us to display a simple text in a pre-defined Joomla module position Once this is done, we will fetch data for the module from DB
    44. 44.  modules>mod_reviews ◦ mod_reviews.php ◦ mod_reviews.xml ◦ helper.php ◦ index.html ◦ tmpl/default.php ◦ tmpl/index.html
    45. 45. <?php//license details here// no direct accessdefined( _JEXEC ) or die( Restricted access );// Include the syndicate functions only oncerequire_once( dirname(__FILE__).DS.helper.php );//load helper class and function$reviews = modReviewsHelper::getReviews( $params );//load the layout file from template viewsrequire( JModuleHelper::getLayoutPath( mod_reviews ) );?>
    46. 46. // no direct accessdefined( _JEXEC ) or die( Restricted access );As it suggests, this line checks to make sure that this file is being included from the Joomla! application.It is necessary to prevent variable injection and other potential security concerns.
    47. 47. // Include the syndicate functions only oncerequire_once( dirname(__FILE__).DS.helper.php );The helper class is defined in our helper.php file. This file is included with a require_once statement.It allows to include necessary functions for the module functionality. Helper file may include basic calculations, DB connection and query code.
    48. 48. //load helper class and function$reviews = modReviewsHelper::getReviews( $params );This line allows to invoke the appropriate helper class method to retrieve the data.Currently, we do not use any parameters but it is allowed in this module for future extensibility.
    49. 49. //load the layout file from template viewsrequire( JModuleHelper::getLayoutPath( mod_reviews ) );This line includes the template to display the output.
    50. 50. <?xml version="1.0" encoding="utf-8"?><extension type="module" version="2.5" client="site" method="upgrade"> <name>Reviews</name> <author>Vishwash Gaur</author> <version>2.5.0</version> <description>An review module.</description> <files> <filename module="mod_reviews">mod_reviews.php</filename> <filename>index.html</filename> <filename>helper.php</filename> <folder>tmpl</folder> <filename>mod_reviews.xml</filename> </files></extension> This file is used to specify which files the installer needs to copy and is used by the Module Manager to determine which parameters are used to configure the module.
    51. 51. <extension type="module“ version="2.5“ client="site“ method="upgrade">This line tells to Joomla! that selected extension type is module and compatible with Joomla version 2.5.Extension type is also defined for site which means it will be available for front-end.
    52. 52. <name>Reviews</name><author>Vishwash Gaur</author><version>2.5.0</version><description>An review module.</description>
    53. 53. <files> <filename module="mod_reviews">mod_reviews.php</filename> <filename>index.html</filename> <filename>helper.php</filename> <folder>tmpl</folder> <filename>mod_reviews.xml</filename> </files>
    54. 54. <?xml version="1.0" encoding="utf-8"?><install type="module" version="1.5.0"> <name>Hello, World!</name> <author>John Doe</author> <version>1.5.0</version> <description>A simple Hello, World! module.</description> <files> <filename>mod_reviews.xml</filename> <filename module="mod_reviews">mod_reviews.php</filename> <filename>index.html</filename> <filename>helper.php</filename> <filename>tmpl/default.php</filename> <filename>tmpl/index.html</filename> </files> <params> </params></install>
    55. 55. <?php//license details hereclass modReviewsHelper{ /** * Retrieves the reviews * * @param array $params An object containing the module parameters * @access public */ function getReviews( $params ) { return I am a happy user!; }}?>
    56. 56. <html><body bgcolor="#FFFFFF"></body></html>This file is included to prevent directory browsing. It can be event left blank and whenever someone will access the directory then this file will be default loaded.
    57. 57. <?php// no direct accessdefined( _JEXEC ) or die( Restricted access );//print user reviewsecho $reviews;?>
    58. 58. <html><body bgcolor="#FFFFFF"></body></html>This file is included to prevent directory browsing. It can be event left blank and whenever someone will access the directory then this file will be default loaded.
    59. 59.  Once a base module is ready, we can start using it immediately in Joomla. In Joomla 1.5, it was auto-detected but in Joomla 2.5, we would need to discover a newly developed extension from admin panel. For this, please login to admin panel and go to Top menu>extensions>extension manager Click on the discover tab and refresh the data
    60. 60. Go tot extensionmanager
    61. 61. Click on thediscover buttonto find newlydevelopedextensions
    62. 62. If your programming iscorrect, it will find your newlydeveloped extension.Select the extension and clickon install button to setup theextension.
    63. 63.  Once a module is added in the Joomla! System, it has to be defined on a position using module manager. It will allow module to display in the front-end.
    64. 64. Go to module managerand click on “New”button
    65. 65. Select your newlydeveloped module
    66. 66. Define moduleposition in activetemplate and setother parameters andpages to display themodule.I give it position 6 inBeez_20 template.
    67. 67. Module successfullysaved, now move tofront-end to check this.
    68. 68. You cansee userreviewhere
    69. 69.  I can’t see the module ◦ Check if you have selected correct position in the active template
    70. 70.  With the previous example, you can display one static customer review but what if there are many customer reviews which should be dynamically loaded on the page. Let’s do that!
    71. 71.  Using phpMyAdmin or any other DB management tool, create a table called __reviews in the Joomla DB Add required fields i.e. id, name, city and feedback in the table Kindly note this example is meant to be very basic for easy understanding
    72. 72. Create table and addfields in the database.Note: Ideally, it is thepart of component.
    73. 73. I have done some entries in the DB directlyfor the demo purpose. It should happenvia a back-end component in realenvironment.
    74. 74.  Now, since we are not doing any static code and want to load reviews dynamically from the database, we need to make some changes in below files: ◦ mod_reviews.php – minor change ◦ helper.php – major change for DB connection and query ◦ tmpl/default.php – minor change ◦ tmpl/reviews.php – new template file added
    75. 75. <?php//license details here// no direct accessdefined( _JEXEC ) or die( Restricted access );// Include the syndicate functions only oncerequire_once( dirname(__FILE__).DS.helper.php );//load helper class and function//$reviews = modReviewsHelper::getReviews( $params );$rows = modReviewsHelper::getReviews( $params );//load the layout file from template viewsrequire( JModuleHelper::getLayoutPath( mod_reviews ) );?>
    76. 76. <?xml version="1.0" encoding="utf-8"?><extension type="module" version="2.5" client="site" method="upgrade"> <name>Reviews</name> <author>Vishwash Gaur</author> <version>2.5.0</version> <description>An review module.</description> <files> <filename module="mod_reviews">mod_reviews.php</filename> <filename>index.html</filename> <filename>helper.php</filename> <folder>tmpl</folder> <filename>mod_reviews.xml</filename> </files></extension>
    77. 77. <?php//license details hereclass modReviewsHelper{ /** * Retrieves the reviews * * @param array $params An object containing the module parameters * @access public */ function getReviews( $params ) { return I am a happy user!; }}?>
    78. 78. <?php//license details hereclass modReviewsHelper{ /** * Retrieves the reviews * @param array $params An object containing the module parameters * @access public For the demonstration */ function getReviews( $params ) purpose, kindly understand { //return I am a happy user!; and note that Joomla! uses //limit the number of items to load from DB $items = $params->get(items, 10); it’s own code conventions //make DB connection to make DB connections and $db=& JFactory::getDBO(); $result= null; to run a query. It allows in //run db query $query = SELECT * FROM #__reviews; less code and standardized $db->setQuery($query, 0, $items); $rows = $db->loadObjectList(); approach. //display and handle error warning if ($db->getErrorNum()) { JError::raiseWarning( 500, $db->stderr(true) ); } return $rows; }
    79. 79. /** * Function to display rating and reviews via views * @param array $params An object containing the module parameters * @access public */ function renderReviews(&$reviews, &$params) { //variable to store db value of a particular record link to open in detailed view $link = JRoute::_(index.php?option=com_reviews&id=.$reviews->id.&task=view); //call template view for display require(JModuleHelper::getLayoutPath(mod_reviews , reviews)); }}?> This component doesn’t exists in the system but we have planned it for future use or next demo of component development.
    80. 80. <?php// no direct accessdefined( _JEXEC ) or die( Restricted access );//print user reviews//echo $reviews;foreach($rows as $row){ modReviewsHelper::renderReviews($row, $params);}?>
    81. 81. <?php// no direct accessdefined( _JEXEC ) or die( Restricted access ); ?><table width="95%"><tr><td><strong><?php echo ucwords(strtolower($reviews->name)); ?></strong><br /><span style="font-size:9px; margin-top:-5px;"><?php echo ucwords(strtolower($reviews->city));?></span><br /></td></tr><tr><td><?php echo wordwrap($reviews->feedback,130, "<br />n");?></td></tr></table>
    82. 82. Dynamicrecords from DB
    83. 83.  Please use below link to develop a MVC component for Joomla 2.5 tutorial http://docs.joomla.org/Developing_a_Model-View- Controller_%28MVC%29_Component_for_Joomla!1.6 Since there is already a detailed component development tutorial hence no need to re-invent the wheel. Also, with the limited available time, I would try to cover it in some session at later time.
    84. 84. Covering frequently askedquestions on Joomla!
    85. 85.  What is the basic database structure difference between Joomla! 1.5 and Joomla! 2.5 versions? From the module and component development point of view, table structure has been updated. Earlier, we had #__modules and #__components tables which have been merged to #__extensions in the new version. This new table includes all type of extensions in single table.
    86. 86.  I was able to create and load modules easily in Joomla! 1.5 but I cant do the same in Joomla! 2.5? In Joomla 1.5, system was able to detect a new module automatically but in Joomla 2.5, you would need to discover the module post development. For this, please go to yoursite/admin and select top-menu/extensions/extension manager and click on the discover tab. On discover tab, you would be able to find new extensions by clicking the discover button on top- right toolbar.
    87. 87.  Are too many modules a problem for the Joomla! site? Yes, it there are many modules or extensions then it put extra load on the loading of the page and website. Some of the websites have been experienced working good with up to 50 extensions but some might start delay in loading.
    88. 88.  Does the extension be compulsory an open source code? No, but since the CMS is open source and if you want to take benefits of community then it should be an open source code.
    89. 89.  Do I really need to switch to Joomla! 2.5 from Joomla! 1.5 and why? Yes, there are two types of releases ◦ STS: Short Term Support ◦ LTS: Long Term Support ◦ 1.5 version is LTS version and Joomla! has officially stopped support for it from April, 2012 so for any further system level issue, it won’t be supported hence it is good to move to next release for code level support. However, forums and community is always available.
    90. 90.  How and where can I get more information on Joomla! extension development? http://docs.joomla.org
    91. 91.  Can I use Jquery framework in the extension development while Joomla! uses MooTools JS framework? Yes, and if any conflict arises, please use below code to avoid the situation: <script type="text/javascript"> jQuery.noConflict(); </script>
    92. 92. Please feel free to ask anyrelevant question regardingthis webinar.
    93. 93.  Get your XAMP, LAMP, MAMP or WAMP environment ready Install and experiment Joomla! Locally Checkout online references Get a book Visit Joomla! JED, Forums and user groups Help each other and learn from experiences
    94. 94.  Please share a relevant question to this webinar. All questions which are beyond the scope of this webinar can be discussed separately on my blog at www.vishwashgaur.com or using twitter @vishwashgaur
    95. 95.  I personally thanks to all the people who managed their time to join this webinar. I look forward to learn and share more with you in future too. I can be reached easily at my blog www.vishwashgaur.com and/or using twitter @vishwashgaur
    96. 96.  XAMP: http://www.apachefriends.org/en/xampp.html Joomla!: http://www.joomla.org/ JED: http://extensions.joomla.org/ Joomla! Forum: http://forum.joomla.org/ Joomla! Magazine: http://magazine.joomla.org/authors/itemlist/user/65-Nicholas-G-Antimisiaris Joomla documentation: http://docs.joomla.org/ Joomla 2.5 essential training: http://www.lynda.com/Joomla-tutorials/Joomla-Essential-Training/95699-2.html Joomla! For beginners guide 2012: http://www.danconia.com/joomla-for-beginners-guide-2012.html Joomla! Developers guide: http://cocoate.com/sites/cocoate.com/files/private/jdev.pdf

    ×