User:Rvsjoen/tutorial/Developing an MVC Component/Part 02

Adding a view to the frontend

In order to create a basic view for the frontend, we first need to have some logic in our previously created entry point site/helloworld.php that decides how to handle requests which are passed to the component. We will manage this by having the entry point load up a controller and execute it, so the first order of business is telling the entry point what to do, and then creating a controller.

Creating a controller

In the core code of Joomla, the class that implements a controller is named JController. In order to save ourselves a lot of work, and prevent having to reinvent the wheel, this class can be extended to be used in our component.

With your favorite editor, create the following file

site/helloworld.php

<?php
// No direct access to this file
defined('_JEXEC') or die;

jimport('joomla.application.component.controller');

// Get an instance of the controller prefixed by HelloWorld
$controller = JController::getInstance('HelloWorld');

// Perform the Request task
$controller->execute(JRequest::getCmd('task'));

// Redirect if set by the controller
$controller->redirect();
?>

The static getInstance method of the JController class will create a controller. In the code above, it will create a controller named HelloWorldController using the controller.php file in the same location as the entry point. This means that we have to create this controller so that it has something to load. The call to redirect() on the controller instance will check if the task executed at some point set an url to redirect to after finishing execution, and if so, redirect to this url. This is useful for redirecting to a different view after executing a task.

With your favorite editor, create the following file

site/controller.php

<?php
// No direct access to this file
defined('_JEXEC') or die;

jimport('joomla.application.component.controller');

class HelloWorldController extends JController
{

}
?>

Yes really, that is it. We do not have to provide any code in our controller except for this. This is because the default behavior of JController is to call the display task if no other task is given, and the display task will look for the name of the view to load in the view request variable. If no view name is given, it will load the view with the same name as the component, namely helloworld.

Creating a view

Now that we have a controller that will load and display our views, we need to give it a view to display.

With your favorite editor, create the following file

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 = 'Hello World';

		// Display the view
		parent::display($tpl);
	}
}
?>

First of all, pay close attention to the naming of the class since that may be slightly confusing at first. The class is named HelloWorldViewHelloWorld and the reason HelloWorld appears twice is because it just happens to be the name of both our component and our view. A slightly better example would be for example FooViewBar where Foo would be the name of the component (like com_foo) and Bar would be the name of the view.

Now, the most important two bits of this file are line 12, in which we assign a string to the member variable item, this variable will then be available in the view template (which we will create in a minute). On line 15 there is a call to the parent::display() function, now this is in fact where a lot of the logic happens as that is the display() function of JView, we will not go into detail on this except to tell you that it is responsible for loading up and displaying the view template.

The view templates are stored in the tmpl folder inside each view, so let us go ahead and create a view template for our view (View templates are also called layouts).

With your favorite editor, create the following file

site/views/helloworld/tmpl/default.php

<?php
// No direct access to this file
defined('_JEXEC') or die;

?>

<h1><?php echo $this->item; ?></h1>

Installation manifest

In our manifest, as you can see, we have added the newly created files and folders in the site files section on line 23 and 24. We have also updated the component version number.

helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">

	<name>Hello World!</name>
	<!-- The following elements are optional and free of formatting constraints -->
	<creationDate>June 2011</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 stored in the components table -->
	<version>0.0.2</version>
	<!-- The description is optional and defaults to the name -->
	<description>Description of the Hello World component ...</description>

	<!-- 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 -->
	<files folder="site">
		<filename>index.html</filename>
		<filename>helloworld.php</filename>
		<filename>controller.php</filename>
		<folder>views</folder>
	</files>

	<administration>
		<menu>Hello World!</menu>
		<!-- 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 -->
		<files folder="admin">
			<filename>index.html</filename>
			<filename>helloworld.php</filename>
		</files>
	</administration>

</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, open up index.php?option=com_helloworld in your browser, and see that the text displayed will be the same text that you assigned to $this->item in your view.

File listing

• helloworld.xml
• site/index.html
• site/helloworld.php
• site/controller.php
• site/views/index.html
• site/views/helloworld/index.html
• site/views/helloworld/view.html.php
• site/views/helloworld/tmpl/index.html
• site/views/helloworld/tmpl/default.php
• admin/index.html
• admin/helloworld.php

Download this part

Download example package

Articles in this series

This tutorial is supported by the following versions of Joomla!

• Introduction
• Part 01 - Developing a Basic Component
• Part 02 - Adding a view to the frontend
• Part 03 - Adding a menu item type to the frontend
• Part 04 - Adding a model to the frontend
• Part 05 - Adding options to menu items
• Part 06 - Using a database
• Part 07 - Basic backend
• Part 08 - Adding language translation
• Part 09 - Adding actions to backend
• Part 10 - Adding decorations to the backend
• Part 11 - Adding validation
• Part 12 - Adding categories
• Part 13 - Adding component options
• Part 14 - Adding ACL
• Part 15 - Adding a script file