FuelPHP - Views

View is the presentation layer of the MVC application. It separates the application logic from the presentation logic. When a controller needs to generate HTML, CSS, or any other content then, it forwards the task to the view engine.

FuelPHP provides a simple and flexible class, View with all the necessary features of a view engine. View class supports rendering of view file. View file is a HTML page with embedded PHP instructions. Variables of the view file can be set using View class as PHP array and referenced in the view file using the array's key. Let us check some of the important methods of View class.

forge

  • Purpose − Creates a new View object

  • Parameter − Following are the parameters

    • $file − Path of the view file relative to the views folder, fuel/app/views

    • $data − Array of values

    • $filter − Sets auto encoding, defaults to settings in the main configuration file

  • Returns − Instance of the view

For Example,

$view = View::forge ('path/to/view', array( 
   'title' => "Show employee, 
   'employees' => $employees, 
));

auto_filter

  • Purpose − Set whether to encode the data or not

  • Parameter − Following is the parameter

    • $filter − true / false

  • Returns − Current view object

For example,

$view->auto_filter(); 
$view = $view->auto_filter(false);

set_filename

  • Purpose − Allows to set or change the view file.

  • Parameter − Following is the parameter -

    • $file − Path to view file relative to views folder, fuel/app/views

  • Returns − Current View object

For Example,

$view = new View();
$view>set_filename('path/to/view');

set

  • Purpose − Set the value of one or more variable

  • Parameter − Following are the parameters

    • $key − Variable name or array of values

    • $value − Value / null

    • $filter − Encoding setting, true / false

  • Returns − Current view object

For Example,

$view = new View(); 
$view->set(array('name' => 'Jon'));

set_global

set_global is similar to set, except that it applies to all the views and the variables are accessible by all views. This is a static method.

View::set_global('name', 'Jon', false);

set_safe

  • Purpose − Set the value of one or more variables with safe encoding on.

  • Parameter − Following are the parameters −

    • $key − Variable name or array of values

    • $value − Value / null

  • Returns − Current view object

For Example,

$view = new View(); 
$view->set_safe(array('name' => 'Jon'), null);

get

  • Purpose − Get the value of one or more variables

  • Parameter − Following are the parameters

    • $key − Variable name

    • $default − Default value to be returned if the key is not found

  • Returns − Value of the input key

For Example,

$view = new View(); 
$name = $view>get('name');  // name = 'Jon'

render

  • Purpose − Render the view files into string by merging it with the local and global variables

  • Parameter − Following are the parameters −

    • $file − The view filename

  • Returns − The rendered view file as string

For example,

$html = View::forge()->render('/path/to/view');

Create a View

To understand the views, let us modify the action method, action_show of controller, Controller_Employee.

employee.php

<?php  
   class Controller_Employee extends Controller { 
      public function action_show() {
         return View::forge('employee/show'); 
      } 
   }

Now create a folder employee in views directory, located at fuel/app/views. Then, create a file show.php inside employee folder and add the following code.

show.php

<h3> My first view </h3>

Now, request the url http://localhost:8080/employee/show and it produces the following result.

Show View

Passing Data to View

We can pass data to the views using View methods as discussed earlier. Following is a simple example.

employee.php

class Controller_Employee extends Controller { 
   public function action_show() { 
      $data = array(); //stores variables going to views 
      $data['name'] = ‘Jon’; 
      $data[‘job’] = ‘Designer’;  
      
      //assign the view to browser output 
      return View::forge('employee/show', $data); 
   } 
}

Now, add the changes in the view file.

show.php

<html> 
   <body> 
      Hello, <?php echo $name; ?>. 
      Your job is, <?php echo $job; ?>. 
   </body> 
</html>

After requesting the URL, it will display the name and the job as follows −

Passing View Request

View Filter

Views use output encoding to pass anything you want. If you want to pass unfiltered data, we can use the set method.

employee.php

class Controller_Employee extends Controller { 
   public function action_show() { 
      $view = \View::forge('employee/show'); 
      $view->set('name', 'Jon', true); 
      $view->set('job', '<em>Designer</em>', false); 
      return $view; 
   } 
}

After requesting the URL, it will display the job details in emphasis style, as follows.

View Filter

Nested Views

FuelPHP support nested views. In nested views, a view can contain one or more view. To set the views in another view, we can use render method as follows.

employee.php

class Controller_Employee extends Controller { 
   public function action_nestedview() { 
      
      //assign variables 
      $data = array(); 
      $data['title'] = 'Home';  
      $data['name'] = 'Jon'; 
      $data['job'] = 'Designer';  
      $views = array(); 
      $views['head'] = View::forge('head', $data)->render(); 
      $views['content'] = View::forge('employee/show', $data)->render();  
      return View::forge('layout', $views, false)->render(); 
   } 
}

fuel/app/views/layout.php

<html> 
   <head> 
      <?php echo $head; ?> 
   </head> 
   
   <body> 
      <?php echo $content; ?> 
   </body> 
</html>

fuel/app/views/head.php

<title>
   <?php echo $title; ?>
</title>

fuel/app/views/employee/show.php

Hello, <?php echo $name; ?>. 
Your job is, <?php echo $job; ?>.

After requesting the URL, http://localhost:8080/employee/nestedview and checking the source view, it gives the following code.

<html> 
   <head> 
      <title>Home</title> 
   </head> 
   
   <body> 
      Hello, Jon. 
      Your job is, Designer. 
   </body> 
</html>

Template Controller

FuelPHP provides a controller, Controller_Template with built-in layout concept. The layout concept is done using before() and after() method of Controller. To use the template controller, we need to extend the controller using Controller_Template instead of Controller. While using after() / before() method, we need to call parent::before and parent::after, otherwise, the template breaks.

<?php 
   class Controller_Test extends Controller_Template { 
      public function before() { 
         parent::before(); 
         // do stuff 
      } 
        
      public function after($response) { 
         $response = parent::after($response); 
         
         // do stuff 
         return $response; 
      } 
   }

template.php

It is a default template file in Fuel. The template file is used to call JS, CSS, HTML, and call view partials. It is located at fuel/app/views/. Templates are used to wrap your view in a layout with a header, footer, sidebar, etc. We can change default template using $template variable in the action method as follows.

fuel/app/classes/controller/test.php

<?php  
   class Controller_Test extends Controller_Template { 
      public $template = 'template_test'; 
      public function action_index() { 
         $this->template->title = 'Example Page'; 
         $this->template->content = View::forge('test/index'); 
      } 
   }

fuel/app/views/template_test.php

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "utf-8"> 
      <title><?php echo $title; ?></title> 
      <?php echo Asset::css('bootstrap.css'); ?> 
   </head> 

   <body> 
      <div> 
         <?php echo $content; ?>
      </div> 
   </body> 
</html>

fuel/app/views/test/index.php

<h3>My Test page</h3>

Now, request the URL http://localhost:8080/test and it produces the following result.

Result

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "utf-8"> 
      <title>Example Page</title> 
      <link type = "text/css" rel = "stylesheet" 
         href = "http://localhost:8080/assets/css/bootstrap.css?1464964766" />
   </head> 
   
   <body> 
      <div> 
         <h3>My Test page</h3> 
      </div> 
   </body> 
</html>

Generate View Page

You can generate a view page using Fuel's Oil console. Following is the basic syntax.

oil g controller <controller-name> <page1> <page2> ..

To generate an admin controller with home and login pages, use the following command.

oil g controller admin home login

Result

Creating view: /path/to/app/fuel/app/views/admin/home.php 
Creating view: /path/to/app/fuel/app/views/admin/login.php 
Creating controller: /path/to/app/fuel/app/classes/controller/admin.php
Advertisements