Actions

User

Rvsjoen/tutorial/Developing an MVC Component/Part 04

From Joomla! Documentation

< User:Rvsjoen‎ | tutorial/Developing an MVC Component

Contents

Adding a model to the frontend

In Joomla!, models are responsible for managing the data. This means that in order to implement our model, we need some kind of function in it that returns data to whoever calls it. In our component the caller will be the HelloWorld view. To keep in line with certain unwritten naming conventions, we name this function getItem() since what we are getting from the model is actually a single item (a hello message). So let's move on to writing some code.

Creating a model

By default, the model named HelloWorldModelHelloWorld is the main model associated to this view. Whenever the view calls $this->get('something') it will eventually end up calling some function named getSomething() in its default model.

With your favorite editor, create the following file

site/models/helloworld.php

  1. <?php
    
  2. // No direct access to this file
    
  3. defined('_JEXEC') or die('Restricted access');
    
  4.  
    
  5. jimport('joomla.application.component.modelitem');
    
  6.  
    
  7. class HelloWorldModelHelloWorld extends JModelItem
    
  8. {
    
  9.         protected $item;
    
  10.  
    
  11.         /**
    
  12.          * Get the message
    
  13.          * @return string The message to be displayed to the user
    
  14.          */
    
  15.         public function getItem() 
    
  16.         {
    
  17.                 if (!isset($this->item)) {
    
  18.                         $this->item = 'Hello World!';
    
  19.                 }
    
  20.                 return $this->item;
    
  21.         }
    
  22. }
    
  23. ?>
    

The reason we are extending from JModelItem instead of just JModel is that JModelItem provides a lot of functionality for handling a single item, which is what we want. This saves us from having to implement this ourselves.

Modifying the view

Now that we have a model that we can bug to get our data, we can modify our view about so that instead of providing a hard-coded string as the hello message, it will call the model to get the message to display.

With your favorite editor, modify the following file to look like this

site/views/helloworld/view.html.php

<?php
// No direct access to this file
defined('_JEXEC') or die;
 
jimport('joomla.application.component.view');
 
class HelloWorldViewHelloWorld extends JView
{
        function display($tpl = null) 
        {
                // Assign data to the view
                $this->item = $this->get('item'); 
                // Display the view
                parent::display($tpl);
        }
}
?>

As you can see, there is only one change from the previous view.html.php and that is, instead of directly assigning to $this->item we call $this->get('item') which is really a call to the model which belongs to this view. The magic of instantiating the model and correctly calling it is not covered in this tutorial, this is all done for you.

Installation manifest

In addition to updating the version number, the models folder has been added to the files section.

helloworld.xml

  1. <?xml version="1.0" encoding="utf-8"?>
    
  2. <extension type="component" version="2.5.0" method="upgrade">
    
  3.  
    
  4.         <name>Hello World!</name>
    
  5.         <!-- The following elements are optional and free of formatting constraints -->
    
  6.         <creationDate>June 2011</creationDate>
    
  7.         <author>John Doe</author>
    
  8.         <authorEmail>john.doe@example.org</authorEmail>
    
  9.         <authorUrl>http://www.example.org</authorUrl>
    
  10.         <copyright>Copyright Info</copyright>
    
  11.         <license>License Info</license>
    
  12.         <!--  The version string is stored in the components table -->
    
  13.         <version>0.0.4</version>
    
  14.         <!-- The description is optional and defaults to the name -->
    
  15.         <description>Description of the Hello World component ...</description>
    
  16.  
    
  17.         <!-- Note the folder attribute: This attribute describes the folder
    
  18.                 to copy FROM in the package to install therefore files copied
    
  19.                 in this section are copied from "site/" in the package -->
    
  20.         <files folder="site">
    
  21.                 <filename>index.html</filename>
    
  22.                 <filename>helloworld.php</filename>
    
  23.                 <filename>controller.php</filename>
    
  24.                 <folder>views</folder>
    
  25.                 <folder>models</folder>
    
  26.         </files>
    
  27.  
    
  28.         <administration>
    
  29.                 <menu>Hello World!</menu>
    
  30.                 <!-- Note the folder attribute: This attribute describes the folder
    
  31.                         to copy FROM in the package to install therefore files copied
    
  32.                         in this section are copied from "admin/" in the package -->
    
  33.                 <files folder="admin">
    
  34.                         <filename>index.html</filename>
    
  35.                         <filename>helloworld.php</filename>
    
  36.                 </files>
    
  37.         </administration>
    
  38.  
    
  39. </extension>
    

Testing your component

For details on how to install the component into your Joomla! site, refer to the information provided in Part 01.

In order to test this component, go to the administrator interface and create a new menu item. In the menu item type selection interface, pick Hello World as the menu item type. Now you should be able to access this menu item in the frontend and it should show you the same result as when you entered the url directly in the previous part.

File listing

Download this part

Download example package

Articles in this series

This tutorial is supported by the following versions of Joomla!

Joomla 2.5