How Views Works in Joomla

Details

Category: Concepts About Model View Controller

Written by Vimal Thapliyal

Most requests to Joomla will end up displaying HTML formatted information. The components you build will most likely consist of several screens of information that you want to display. Views in Joomla gives us a clean way of separating out these screens so that they are independent of the others. Let's take a look at the way that Joomla handles views in conjunction with the controller.

So first, right now with the controller in place, if we go to the NoidaCity Component without specifying a task and without specifying anything else, we get a 500 error, and this error is because since we haven't specified a task, Joomla is by default calling the display function in the controller. The display function then looks for a view in our request, and if it can't find one, it just gives us this error.

We could override this function if we wanted to. Let's go to the current controller.php file (which we have created in previous tutorial) and override the display function temporarily. Add the following display function to existing code file of controller.php so your code would look like this

<?php
defined( '_JEXEC' ) or die;
 
jimport('joomla.application.component.controller');
 
class NoidaCityController extends JController{
  public function save(){
    echo "saving mall...";
  }
 
  public function delete(){
    echo "deleting mall...";
  }
 
  public function display(){
    echo "display...";
  }
}

We're writing a new function here, and it's just going to be called Display.

So now when we go back to frontend and hit Refresh, you'll notice that I did not add a task variable to this URL. It's still just calling the NoidaCity component and it's now displaying the output from our display function. That's because if you don't specify a task for our controller, by default it's going to call the display function.

Let's remove this function because we want to use the default display function that is included in Jcontroller instead of one that we defined.So your code would be again like the following code

<?php
defined( '_JEXEC' ) or die;
 
jimport('joomla.application.component.controller');
 
class NoidaCityController extends JController{
  public function save(){
    echo "saving mall...";
  }
 
  public function delete(){
    echo "deleting mall...";
  }
 
}

Now, let's add some views. To do this, create the Views folder into the com_noidacity folder of your component that's already installed in Joomla

So in that folder create two more folders, one for places and one for malls.

We can call up these views by simply adding them to the URL. So if want to view the places, just add ampersand and view=places. Now, you see Noida City Places is displayed as a header.

If we go back to the files that are on disk, you'll notice there is default.php, and that is what's outputting that Noida City Places header it has the following code

<?php defined( '_JEXEC' ) or die; ?>
<h1>Noida City Places</h1>

There is view.html.php file this file is what Joomla looks at first before it calls that default.php file. This file gives us a chance to add any data we want to the view before displaying it. Code for this file is as following

<?php
defined( '_JEXEC' ) or die;
 
jimport('joomla.application.component.view');
 
class NoidaCityViewPlaces extends JView
{
}

In this case, we don't want to add any data, so we're just defining our view as NoidaCityViewPlaces. So NoidaCity is the name of our component, Places is the name of our view, and View is in the middle. That's the naming convention that we want to use for this class. If we do want to display data, we can do so by adding it to that view.html.php file.

Here is the following code for view.html.php for malls view

<?php
defined( '_JEXEC' ) or die;
 
jimport('joomla.application.component.view');
 
class NoidaCityViewMalls extends JView
{
  protected $header;
 
  public function display($tpl = null){
    $this->header = 'Noida City Malls';
 
    parent::display($tpl);
  }
}

So for instance, notice here in Malls, in the view.html.php file here, we have a display function, and this display function allows us to add data to the view before we display it.So we have a protected class member here called Header and we're setting it down in the display function, and then we're calling the parent display function to go pull the default.php file for Malls.

Then if we go to the default.php file for Malls, and open it, you'll notice that we're just echoing out this header, and that's pulling the data that we set in the view.html.php file.(code for default.php which is tmpl folder for malls is as following)

<?php defined( '_JEXEC' ) or die; ?>
<h1><?php echo $this->header; ?></h1>

So if we go to view=malls, that now shows Noida City Malls as the header.

Views handles something that you do over and over again when building web application, that give you a chance to get data, then present it in HTML. Views keep your Presentation layer in a consistent place without getting it mixed in with code that processes data.

• < Prev
• Next >