---
title: "How to add a Default View to your Joomla 3 Component"
description: "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..."
url: https://www.inmotionhosting.com/support/edu/joomla/joomla-3/add-default-view/
date: 2014-05-09
modified: 2023-06-07
author: "Brad Markle"
categories: ["Joomla", "Joomla 3"]
tags: ["Joomla v3"]
type: post
lang: en
---

# How to add a Default View to your Joomla 3 Component

This tutorial series, [Joomla 3 component development](https://www.inmotionhosting.com/support/edu/joomla/joomla-3/joomla-search-component/), is currently in progress…

In our last tutorial, [we created a very basic Joomla 3 component](https://www.inmotionhosting.com/support/edu/joomla/joomla-3/helloworld/) 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](https://docs.joomla.org/Model-View-Controller).

| **For Example:** | Included with Joomla is a component called **Content**, *aka* **com_content**. This component is what allows you to [write articles](https://www.inmotionhosting.com/support/edu/joomla/joomla-2-5/how-to-write-a-new-article/) and [create categories](https://www.inmotionhosting.com/support/edu/joomla/joomla-2-5/how-to-add-a-new-category/). 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 M**V**C. 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:

https://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:

[![adding a view to a component](/support/images/stories/edu/joomla-3/create-component/adding-a-view-to-a-component.png)](/support/images/stories/edu/joomla-3/create-component/adding-a-view-to-a-component.png)