This tutorial series, Joomla 3 component development, is currently in progress...

In our last tutorial, we created a very basic Joomla 3 component called helloworld. As we continue our tutorial series on creating components, we will now learn how to add views to a component.

What is a view?

A "view" in Joomla is the set of code that creates the actual HTML for the component that is returned to the user. Views are a part of the MVC, and you can read much more thorough documentation about the MVC here.

For Example:

Included with Joomla is a component called Content, aka com_content. This component is what allows you to write articles and create categories.

When you're on your Joomla website and you're viewing an article or you're viewing the landing page of a category, you're looking at the "view" for an article and the "view" of a category.

Before the View: Setting up your Controller

Like we said, views are apart of the MVC. Before we setup the view we must first setup the controller.

Below, you will find a list of the files you will need to create / modify in order to setup the controller.

/components/com_helloworld/helloworld.php

We previously created this file and placed basic code in it. Remove that code and add the following code:

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
 
// import joomla controller library
jimport('joomla.application.component.controller');
 
// Get an instance of the controller prefixed by HelloWorld
$controller = JControllerLegacy::getInstance('HelloWorld');
 
// Perform the Request task
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));
 
// Redirect if set by the controller
$controller->redirect();

/components/com_helloworld/controller.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
 
// import Joomla controller library
jimport('joomla.application.component.controller');
 
/**
 * Hello World Component Controller
 */
class HelloWorldController extends JControllerLegacy
{
}

How to setup a view

Now that we've setup our controller, we are going to setup our default view. The default view is a view named after the component. So, in our case, we are going to show you how to create a view called helloworld.

Below is a list of files you need to create in order to create the helloworld view.

Folder setup

First, create the following folders:

views:/components/com_helloworld/views
view name:/components/com_helloworld/views/helloworld
tmpl:/components/com_helloworld/views/helloworld/tmpl

/components/com_helloworld/views/helloworld/view.html.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
 
// import Joomla view library
jimport('joomla.application.component.view');
 
/**
 * HTML View class for the HelloWorld Component
 */
class HelloWorldViewHelloWorld extends JViewLegacy
{
        // Overwriting JView display method
        function display($tpl = null) 
        {
                // Assign data to the view
                $this->msg = 'Hello World';
 
                // Display the view
                parent::display($tpl);
        }
}

/components/com_helloworld/views/helloworld/tmpl/default.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
?>
<h1><?php echo $this->msg; ?></h1>

How does all this work?

Using the sample above, the component will display "Hello World" to the screen. But how did it do that?!

Joomla needs to determine which component, view, and task to execute. It does so by reading the values from the url. As you can see below, we've highlighed where exactly the component, view, and task can be set:

http://domain.com/index.php?option=com_helloworld&view=helloworld&task=display

Note however, the task and the view do not need to be included in the url. If they are not, their values will default to the following:

Task display

If the URL does not specify a task, Joomla looks for a default tasked named display. The display task is setup within our view.html.php file.

View component's name

If a view is not specified, the default view is loaded. The default view is the component name. Because our component was named helloworld, the default view helloworld would be run.

The best way to explain how all of these peices work together is by looking at the following image:

Continued Education in Course How to create a Joomla 3 Component
You are viewing Section 3: How to add a Default View to your Joomla 3 Component
Section 2: Creating a Hello World Joomla 3 Component
Section 4: How to add a New View to your Joomla 3 Component
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Joomla Community Google+ Hangout #3

June 3rd, 2014

Thank you @RustyJoomla for letting me speak on the Joomla Community Google+ Hangout!

Click here to watch!

n/a Points
2014-09-09 5:21 am

You certainly don't want to say that a View ist not a part of MVC, do you? I got confused by "are apart of" which means "are seperated from". It has to be "are part of". Just to clarify ;)

Staff
20,848 Points
2014-09-09 8:28 am
Hello Blend,

Good find! It was meant to be written as 'a part of' as opposed to ' apart of'. One missing space certainly changed the meaning!

Kindest Regards,
Scott M
n/a Points
2014-10-01 8:17 am

Hi I do same as below process but i got error 404: compont not found s help me for that

Staff
20,848 Points
2014-10-01 9:10 am
Hello Himanshu,

A 404 means that Joomla is looking in the place you told it to, but not finding the file. You will want to carefully go over the information you entered when following the instructions to ensure everything is created and named correctly so that Joomla can find it.

Kindest Regards,
Scott M
n/a Points
2014-11-05 5:42 am

Thanks Man..Your diagram made it easy..Great expaination!!

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

5 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!