The Joomla! Community Magazine™

Joomla! 3.0 Extension Development Series: Beginning Development

Written by | Friday, 01 February 2013 00:00 | Published in 2013 February
In order to have a good working example for this tutorial series on Joomla! 3.0 component development I have chosen to walk through the process by actually writing an extension. This component will be available for review and download by visiting the accompanying site referenced throughout this and future articles. My goal is to write a rather robust component beyond a simple “Hello World” component to fully demonstrate key points in actual component development.

Step 0: Make coffee

Again, it is important to start your day and project off right. Get into a pattern, a rhythm and soon you’ll find your creativity, focus, and coding skills to be at the ready when you sit down to begin work. Don’t overlook the importance of being in the right frame of mind when you begin work.


Step 1: Write basic component outline for files needed

The first thing to do is to create a rough overview of the files, folders, database tables, and associated fields. For our component we will be creating the following system.

Component Details

Name: Lendr
Component Name: com_lendr
Description: Lendr is a bootstrapped Joomla! 3.0 component which will allow users to create a profile, add their books to their library collection, view other users libraries, request a book to borrow, add books to a wishlist, and sign up to be on a waitlist for a particular book.

Basic Functions

This new component Lendr will provide the following set of features:

  • User accounts / basic profiles
  • Books / Libraries for Users
  • Wishlists for books desired
  • Lending / Borrowing of a book
  • Requesting to borrow a book
  • Waitlists for a book already lent

Now we should write down our basic structure of files needed. This will not be a comprehensive list and will most definitely be modified as we progress through the process. However, having a starting outline will help to keep things somewhat on track. Here is the initial outline of key files needed for Lendr.

Basic Files

ControllersModelsViewsTablesMisc.

Save
List
Add
Edit
Lend
Delete
Wish
Review
Request
Default

Book
Default
Library
Profile
Review
Waitlist
Wishlist

Book
Wishlist
Library
Profile
Waitlist
Review

Book
Wishlist
Library
Waitlist
Review

Install
Router
XML

 

Now that we have this written out and a rough outline we begin creating these files in our folder structure.


Step 2: Write the Database table files

We begin by creating the database table files. We store these in the table folder located in the frontside of our component. Please refer back to the first article in this series to recall how your local environment should be configured. We create each of the files we described in our outline. Below is one of these files.

/joomla_root/components/com_lendr/site/tables/book.php [Click to view source]

In our case the table file holds a single construct function. This function provides the table name associated with this JTable file and also defines the primary key field, book_id, in this file.

While creating these database tables it is appropriate to begin the process of creating the install.mysql.sql script which will be used when the component is installed through the Joomla! administrator panel. The start of that file is below:

/joomla_root/administrator/components/com_lendr/admin/install.mysql.sql [Click to view source]

We will continue to add to this file throughout the process of creating our tables. By adding these tables as we create them it will make it easier at the end when compiling the component to install.

 


Step 3: Begin component folder and file creation

After creating the database tables we set up the file structure for the entire component. Below is the basic directory structure.

com_lendr/
   admin/
      controllers/
      models/
      views/
      index.html
      install.mysql.sql
      lendr.php
   site/
      assets/
      controllers/
      helpers/
      language/
      models/
      tables/
      views/
      index.html
      lendr.php
      router.php
install.php
lendr.xml

Each of these files and folders is important, though not all are required. We shall begin working through each of these files and the functions they contain. Along the way we will explain the purpose of each.


Step 4: Write the install files, root file, controllers, and view controllers

In this step we are going to add content to several files. First we will look at the install files, then we'll work with some controllers and finally we'll add our view controllers.

Install Files

The root level files are those files used by Joomla! during the install process. They are located outside the site and admin folders in your component folder. There is an XML file which is used to define the component details, and all associated files, menus, and languages; and there is also an install.php file. This install.php file holds a number of functions that run upon installation. The name is not specific but must be referenced properly in the XML file. The functions do not have to be utilized or even present but can be used to perform additional actions during the component install.

Sample Files
lendr.xml [Click to view source]
install.php [Click to view source]

Root File (lendr.php)

The lendr.php file in the root of the site folder is the first file recognized and read by Joomla! after installation. This file handles the redirection of tasks to other controllers, the loading of helper files, stylesheets, javascript, plugin libraries and other core pieces necessary throughout the entire component. It will be expanded upon in future tutorials in this series.

This file will load the tables associated with this component; import any plugins that exist in the plugin group "lendr"; determine the controller requested by the user and then execute the appropriate controller based on that request.

Controllers

The controllers in a Joomla! 3 component are created as a class with a single function. Typically the controller name defines the task for the controller. This is a departure from previous Joomla! versions where a controller was dedicated to a variety of tasks related to a particular area of a component. By creating controllers with a single executable function there is a greater opportunity for chaining controllers together and forming an easy-to-follow path for tracing an action and troubleshooting. Below is one of the controllers we will define for Lendr, followed by our default controller for some basic functionality.

Sample
edit.php [Click to view source]
default.php [Click to view source]

View Controllers

Joomla! is a bit unique in how the views are handled. Joomla! makes use of a secondary controller to help in the rendering aspect of data and the assigning of variables to be used in the view layouts. This secondary controller is found in the views folder of the component and is often named similarly to the type of render desired. (e.g. html.php for rendering html, phtml.php for rendering a partial template, raw.php for rendering raw data, etc...). Below is one of the view controllers used by Lendr.

Sample
html.php [Click to view source]
raw.php [Click to view source]

Step 5: Create Models

Joomla! models work like most MVC systems and handle the bulk of the data manipulation and data retrieval. Lendr models will be focused on heavily in the next tutorial so here we will look only at the general structure.

Sample
book.php [Click to view source]
default.php [Click to view source]

These Joomla! models are just two of the files that will be created with the Lendr component system. The other models are similar in nature and basic structure but will be written in more detail in the following tutorial.


Beginning Development Wrap-up

Now that we have created the basic folder structure of the component, written the database tables, install files, controllers, view controllers, and models our component should be installable. Of course while there is no functionality yet and the component merely creates an empty shell it does provide some sense of satisfaction to have an installable component. Be sure to examine our Github repository to view the other database tables, controllers, view controllers, and models which have not been written out here.

View Full Tutorial with code snippets at http://lendr.websparkinc.com.

In the next tutorial we will dive into the actual functionality to be written to the various models.

Read 49044 times
Tagged under Developers, English
David Hurley

David Hurley

David Hurley is an open source advocate and travels most weeks of the year to speak around the world on topics of tech, PHP and open source software. He is the Community Manager for Joomla - the second largest content management system in the world. He is also a member of the Production Leadership Team and the Framework maintainers. David writes semi-obsessively at http://dbhurley.com and is an active partner in several businesses.

avatar
Hi David,
I highly welcome any tutorial on component development, so I went ahead to try it.
2 remarks, with Firefox I can't get from one tab to the other on your site, clicking on the tabs doesn't function.
Furthermore I downloaded the code and installed it, but I got error messages while expecting an empty skeleton component.
In the backend I get:
Notice: Undefined property: JAdministrator::$JComponentTitle in /public_html/test/administrator/templates/isis/index.php on line 161

Maybe it's intentionally and will sort itself out in the upcoming episodes.
I'll be following along.

Thanks for sharing this.
VOTES:1
avatar
Hi Alfred!

Thanks for the comments :)

Currently only one tab is functional on the site. The others will become active as the tutorials are written and released. Also, yes, you will get that error in the admin panel as we have not yet covered that in the tutorial. It will be sorted. :)

I do hope you'll continue to watch as new tutorials in the series are released and you'll find some little bits that are helpful to you!
VOTES:-1
avatar
Hi David,

I understand that not all sections are active right now, but I can't even switch between Overview and Beginning Development, 2 sections that should be active now.

Alfred
VOTES:1
avatar
Great tutorial!

When will the next parts be released? On a monthly basis?
VOTES:3
avatar
Thanks so much for the feedback! I'm writing one article for each magazine release.
VOTES:2
avatar
GREAT STUFF!!
I am loving developing in Joomla, going to take the foundations of these tutorials and develop my very own, of my own making (and like I said before use your foundations, they seem the best to me).

Keep this amazing work up, you're a good person!
VOTES:-1
avatar
very much appreciated tutorial.
VOTES:0
avatar
I have a question concerning the manifest file lendr.xml. Its header specifies:
 

Shouldn't be version="3.0.0", instead? Does it matter, anyway?
VOTES:-1
avatar
Thanks for the tutorial, but I cannot access example file contents nor your site lendr.sparkbuilt.com. All I get is 'Bandwidth Limit Exceeded The server is temporarily unable to service your request due to the site owner reaching his/her bandwidth limit'.
VOTES:2
avatar
A real nice tutorial.
I've been wondering about plugin creation though and couldn't find the answer.
Can I create a DB table for a plugin? If so, how is it done?
Thanks
VOTES:0
avatar
Hi Mr. Hurley,

First of all, I´d like to thank ang congratulate you for all your effort and initiative in developing LENDR component along with the idea surrounding it, which is to learn Joomla 3 component development by using/analysing an already done component. Very well done!

I have, however, a problem with that. I´ve just downloaded and installed Joomla 3.1 in my computer, and it is correctly working.

I have also just downloaded and installed LENDR component. Everything was perfect so far.

When I go to menu COMPONENTS => COM_LENDR => COM_LENDR_SETTINGS, in the backend, I just get a blank page. No error message and no page is shown here.

When I go to MAIN MENU aiming to add a new entry for that component, there´s no LENDR in the components list, so I don´t know/have a way to add that entry and see its behavior in the Joomla! frontend.

Can you please tell me what I´m doing wrong? Thanks in advance.
VOTES:0
avatar
Thorsten Seckert Thursday, 04 July 2013
hi there,

unfortunately for me it's the same - blank screen in the backend,no LENDR to choose from in the list of components.
did they change anything between 3.0 and 3.1?

regards
VOTES:0
avatar
My problem:
administrator/index.php?option=com_lendr&view=settings => blank
index.php?option=com_lendr&view=settings => Class 'LendrViewsSettingsHtml' not found in C:\xampp\htdocs\joomla\components\com_lendr\controllers\default.php on line 32

I'm using Joomla 3, how about this error?
VOTES:1
avatar
Thorsten Seckert Thursday, 04 July 2013
sorry, I also want to add many thanks for the tutorial especially since I couldn't find any other help for Joomla 3 development on the net so far...
VOTES:0
avatar
Thorsten Seckert Tuesday, 16 July 2013
Hi David,

I was just wondering which license your tutorial runs under?
Can I take parts of the code, change it and use it in my program?


Regards
Thorsten
VOTES:0
avatar
lendr.sparkbuilt.com seems to be unavailable. Is this permanent?
VOTES:0
avatar
David,

Thanks for your tutorial! It would be great to have this as an example to expand upon, however it appears to be broken in it's current state. After installing Lendr 4.0 on a Joomla 3.1.5 website when I go in the back end to Components->Lendr->Lender Settings I get:

Fatal error: Class 'LendrViewsSettingsHtml' not found in C:xampphtdocscedmavhtdocsadministratorcomponentscom_lendrcontrollersdisplay.php on line 27

Any chance you will revisit this and get it working? A complete example component for 3.0 with the tutorial would be huge help for many of us who are working hard to master Joomla OOP/MVC.

Thanks!

Erik
VOTES:0
avatar
We need to add "author" field in "_lendr_books" table. I think its missing.
VOTES:0
avatar
> Fatal error: Class 'LendrViewsSettingsHtml' not found

It's only the wrong link in the menu. There is no sign that the view "settings" has ever existed.

The standard joomla component for processing "config.xml" is accesible from menu "Components->Lendr" (click it - do not open the submenu), and then click on "Options" on the right of the page.

To fix the menu, in source_dir/

Change:
"<menu view="settings" img="components/com_lendr/assets/images/settings_icon.png"
alt="LENDR/Settings">COM_LENDR_SETTINGS</menu>"
To:
"<menu link="option=com_config&view=component&component=com_lendr" img="components/com_lendr/assets/images/settings_icon.png"
alt="LENDR/Settings">COM_LENDR_SETTINGS</menu>"

Uninstall, and reinstall the component.

Good Luck!
VOTES:0
avatar
anyone can recommend a patient professional joomla 3 person to help me with migration improvement and moodle thank you
VOTES:0