How Views Works in Joomla

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.

500 error without specifying the task

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.

Opening controller file for editing

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

  1. <?php
  2. defined( '_JEXEC' ) or die;
  3.  
  4. jimport('joomla.application.component.controller');
  5.  
  6. class NoidaCityController extends JController{
  7. public function save(){
  8. echo "saving mall...";
  9. }
  10.  
  11. public function delete(){
  12. echo "deleting mall...";
  13. }
  14.  
  15. public function display(){
  16. echo "display...";
  17. }
  18. }

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

Display Function Override in Joomla

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

  1. <?php
  2. defined( '_JEXEC' ) or die;
  3.  
  4. jimport('joomla.application.component.controller');
  5.  
  6. class NoidaCityController extends JController{
  7. public function save(){
  8. echo "saving mall...";
  9. }
  10.  
  11. public function delete(){
  12. echo "deleting mall...";
  13. }
  14.  
  15. }

Create Views Folder

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

Create two folders for the views

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

View Places

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.

Default of view places

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

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

viewhtml file of joomla

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

  1. <?php
  2. defined( '_JEXEC' ) or die;
  3.  
  4. jimport('joomla.application.component.view');
  5.  
  6. class NoidaCityViewPlaces extends JView
  7. {
  8. }

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.

Malls Html View File

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

  1. <?php
  2. defined( '_JEXEC' ) or die;
  3.  
  4. jimport('joomla.application.component.view');
  5.  
  6. class NoidaCityViewMalls extends JView
  7. {
  8. protected $header;
  9.  
  10. public function display($tpl = null){
  11. $this->header = 'Noida City Malls';
  12.  
  13. parent::display($tpl);
  14. }
  15. }

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)

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

Malls View Display overide

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.