Basic frontend form

Designing the frontend interface leads us to create a Model-View-Controller triptych similar to the backend in Part 7.

Create the specific controller

The entry point now gets an instance of an UpdHelloWorld prefixed controller which extends the function of JControllerForm. Let's create a basic controllerform for the site part:

site/controllers/updhelloworld.php

<?php// No direct access.defined('_JEXEC') or die;// Include dependancy of the main controllerform class
jimport('joomla.application.component.controllerform');class HelloWorldControllerUpdHelloWorld extends JControllerForm
{publicfunction getModel($name='',$prefix='',$config=array('ignore_request'=>true)){return parent::getModel($name,$prefix,array('ignore_request'=>false));}publicfunction submit(){// Check for request forgeries.
JRequest::checkToken() or jexit(JText::_('JINVALID_TOKEN'));// Initialise variables.$app= JFactory::getApplication();$model=$this->getModel('updhelloworld');// Get the data from the form POST$data= JRequest::getVar('jform',array(),'post','array');// Now update the loaded data to the database via a function in the model$upditem=$model->updItem($data);// check if ok and display appropriate message. This can also have a redirect if desired.if($upditem){echo"<h2>Updated Greeting has been saved</h2>";}else{echo"<h2>Updated Greeting failed to be saved</h2>";}returntrue;}}

This controller will display the appropriate message after the form is submitted.

This layout utilises the forms design which resides with the related model. The getLabel and getInput will pickup the xml fields defined and display appropriately. More on the xml file within the models section of this tutorial.

Create the model

The UpdHelloWorld model sets up the data through from the related form and allows the mechanism to save the subsequent data loaded into the form into the database.

site/models/updhelloworld.php

<?php// No direct access to this filedefined('_JEXEC') or die('Restricted access');// Include dependancy of the main model form
jimport('joomla.application.component.modelform');// import Joomla modelitem library
jimport('joomla.application.component.modelitem');// Include dependancy of the dispatcher
jimport('joomla.event.dispatcher');/**
* UpdHelloWorld Model
*/class HelloWorldModelUpdHelloWorld extends JModelForm
{/**
* @var object item
*/
protected $item;/**
* Get the data for a new qualification
*/publicfunction getForm($data=array(),$loadData=true){$app= JFactory::getApplication('site');// Get the form.$form=$this->loadForm('com_helloworld.updhelloworld','updhelloworld',array('control'=>'jform','load_data'=>true));if(empty($form)){returnfalse;}return$form;}/**
* Get the message
* @return object The message to be displayed to the user
*/function&getItem(){if(!isset($this->_item)){$cache= JFactory::getCache('com_helloworld','');$id=$this->getState('helloworld.id');$this->_item =$cache->get($id);if($this->_item ===false){}}return$this->_item;}publicfunction updItem($data){// set the variables from the passed data$id=$data['id'];$greeting=$data['greeting'];// set the data into a query to update the record$db=$this->getDbo();$query=$db->getQuery(true);$query->clear();$query->update(' #__helloworld ');$query->set(' greeting = '.$db->Quote($greeting));$query->where(' id = '.(int)$id);$db->setQuery((string)$query);if(!$db->query()){
JError::raiseError(500,$db->getErrorMsg());returnfalse;}else{returntrue;}}}

The following file updhelloworld.xml should be created using your favourite editor and saved in the forms folder under the models directory. The first of the fields being referenced id using the sql type so that I returns the results from the query into a dropdown list form to be selected. site/models/forms/updhelloworld.xml

Add the last 2 lines to the admin/language/en-GB/en-GB.com_helloworld.sys.ini file to provide the text link for the menu type display. And being for the backend, it resides in the admin language folder.

Create a compressed file of this directory or directly download the archive and install it using the extension manager of Joomla. You can add a menu item of this component using the menu manager in the backend.

helloworld.xml

<?xmlversion="1.0"encoding="utf-8"?><extensiontype="component"version="2.5.0"method="upgrade"><name>COM_HELLOWORLD</name><!-- The following elements are optional and free of formatting conttraints --><creationDate>November 2009</creationDate><author>John Doe</author><authorEmail>john.doe@example.org</authorEmail><authorUrl>http://www.example.org</authorUrl><copyright>Copyright Info</copyright><license>License Info</license><!-- The version string is recorded in the components table --><version>0.0.18</version><!-- The description is optional and defaults to the name --><description>COM_HELLOWORLD_DESCRIPTION</description><!-- Runs on install/uninstall/update; New in 2.5 --><scriptfile>script.php</scriptfile><install><!-- Runs on install --><sql><filedriver="mysql"charset="utf8">sql/install.mysql.utf8.sql</file></sql></install><uninstall><!-- Runs on uninstall --><sql><filedriver="mysql"charset="utf8">sql/uninstall.mysql.utf8.sql</file></sql></uninstall><update><!-- Runs on update; New in 2.5 --><schemas><schemapathtype="mysql">sql/updates/mysql</schemapath></schemas></update><!-- Site Main File Copy Section --><!-- Note the folder attribute: This attribute describes the folder to copy FROM in the package to install therefore files copied in this section are copied from /site/ in the package --><filesfolder="site"><filename>index.html</filename><filename>helloworld.php</filename><filename>controller.php</filename><filename>updhelloworld.php</filename><folder>views</folder><folder>models</folder><folder>controllers</folder><folder>language</folder></files><mediadestination="com_helloworld"folder="media"><filename>index.html</filename><folder>images</folder></media><administration><!-- Administration Menu Section --><menuimg="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu><!-- Administration Main File Copy Section --><!-- Note the folder attribute: This attribute describes the folder to copy FROM in the package to install therefore files copied in this section are copied from /admin/ in the package --><filesfolder="admin"><!-- Admin Main File Copy Section --><filename>index.html</filename><filename>config.xml</filename><filename>access.xml</filename><filename>helloworld.php</filename><filename>controller.php</filename><!-- SQL files section --><folder>sql</folder><!-- tables files section --><folder>tables</folder><!-- models files section --><folder>models</folder><!-- views files section --><folder>views</folder><!-- controllers files section --><folder>controllers</folder><!-- helpers files section --><folder>helpers</folder></files><languagesfolder="admin"><languagetag="en-GB">language/en-GB/en-GB.com_helloworld.ini</language><languagetag="en-GB">language/en-GB/en-GB.com_helloworld.sys.ini</language></languages></administration><!-- UPDATESERVER DEFINITION --><updateservers><!-- Note: No spaces or linebreaks allowed between the server tags --><servertype="extension"priority="1"name="HelloWorld Update Site">http://yourdomain.com/update/helloworld-update.xml</server></updateservers></extension>

Now you can see in your component hello-world an array with two colums, two rows and checkboxes. You can click the checkboxes in order to select the different options you want.