Create components for Joomla! - Managing the front end

 Please note: this page is under update!
Contents here may refer both to current or previous version of Joomla! component builder, and contents may be related to Joomla! 1.5 version.


Develop MVC component for Joomla! 3.x Front - End Side

Now you have to add an item to your menu to access the component from the front end, we will use the "View for booklist list" view in our example. Of course we have also to add some authors, editors and book to see the component to work.

From the front end point of view, the entry point's work is simple, in fact, normally, access happens via a menu item, the view is already defined in the URL created by Joomla!.

For example, the URL involved, we suppose SEF is off, means that Joomla! looks mybooks.php in the folder /components/com_mybooks. On the basis of the parameter view, in the url, this entry point loads the appropiate controller and executes the right task, default task is display. The view \views\booklist\view.html.php is then executed.

Within the last file we have, among others, the following lines of code:

function display ($tpl = null) (
 $data = $this->get ('Data');
 $this->assignRef( 'data', $data);
 parent::display ($ tpl);

The header of the method display() include the optional parameter $tpl, Attention! is not the name of the template to load, but the name of the sub-template!

  1. The code $data = $this->get('Data') invokes the method getData() in the file /models/mybooklist.php, this method makes the query on the db and returns a recordset as an array of object,s in the standard Joomla!.
  2. the code $this->assignRef( 'data', $data) creates the property $this->data within the class MybooksViewBooklist so that such information is easily accessible from the template.
  3. the code parent::display($tpl) invokes and executes the file /components/com_mybookst/views/booklist/tmpl/default.php which displays the contents of the recordset.

In the file /components/com_mybooks/views/booklist/tmpl/default.php you will find a code like this:

<?php foreach($this->data as $dataItem): ?>
    $link = JRoute::_( "index.php?option=com_ccat&amp;view=ccatbrand&amp;brand_id={$dataItem->id}" );
  <td class="cb_fieldDiv jcb_fieldValue" >
    <a href="/<?php echo $link; ?>"><?php echo $dataItem->title; ?></a>
<?php endforeach; ?> 

The foreach loop iterates through all the records retrieved from the method getData(), in the model, and assign them to $this->data from view with assignRef().

the code $link = JRoute::_("...") creates the URL to see the single record, in the following lines we see how to use this URL (<a href ="<?php echo $ link;?> ">) And how to retrieve data from the record set ($DataItem->title, where "title" is the name of the field in the table), Joomla!Component Builder will return all the fields of the reference table, it's to you to decide which to show, and write the code for generating the best layout.

As for the display of single record, the process is practically the same, obviously in the template there is no foreach: simple, no?


The component builder, on front end side, does not support any operation on the data except for the visualization of a grid of data. If you need to operate on data you have to write the proper controller. These kind of operations will be implemented in the future.


previous & more interesting: manage the back end


0 #3 Paul 2016-01-03 07:56
Ciao Marco

This is a great tool - takes all the hard work (the boring bits) out of the job!

Could you please give me a pointer to get me started on my latest project.

Using your very good mybooks example as a base can you tell me how I would set it up so when I open authorslist, and select an author, the author display can have a link to open the bookslist form showing only books attributed to that author. I then want to add books to that list, which will automatically take the author ID of the selected author.
Exiting from the bookslist should return to the selected author.

I know this is not the design of your example, but this functionality will allow me to transfer the knowledge to my own project/s


Ciao Paul,
I think the best solution is to use filters.
from authors' list you can jump to books using a link like this:


when filter is populated, you can use it's value to select the right value for the author.

the value is saved in user state (see populateState() in model list: you have to store the value) so you can use this value to preselect the value in com_mybooks\admin\models\fields\bookauthorid.php.

the bad news is: there is not support for filters in JCB 2.5.x and you have to write the filter form and the display code into the template (see other components for an idea about how to do it).

0 #2 Mimmo 2015-06-24 22:23 Marco,
Ottimo lavoro, credimi ho apprezzato appieno la versione 1.5 con descrizione in Italiano.
Faresti cosa gradita se pubblicassi la versione per 2.5 e 3 con istruzioni anche in lingua ITALIANA.

=== Risposta
Ciao Mimmo e grazie
Mi spiace ma se avessi il tempo il tempo di pubblicare la versione italiana lo userei per rilasciare una nuova versione in direzione J3.5.
Del resto, proprio l'esperienza con la J1.5 mi ha insegnato che qui il target è internazionale, e la versione italiana interessa davvero a pochi.
(pochi sviluppatori in Italia)

-3 #1 Guest 2013-09-26 06:25
Hello sir, I wont to make a registation form component using MVC and display at frantend and store it in the backend table. so, if you have any this type of tutorial or any suggestion then please reply me.

Aggiungi commento

Please note: URL in text are not linked and user's site address is only for internal use and is not published.

Comments are human checked. All spam will be removed, so don't waste your time and, especially, mine!

Codice di sicurezza