Views

What is a view?

Views are files that contain the display information for your application. This is most commonly HTML, CSS and Javascript but can be anything you require such as XML or JSON for AJAX output. The purpose of views is to keep this information separate from your application logic for easy reusability and cleaner code.

Views themselves can contain code used for displaying the data you pass into them. For example, looping through an array of product information and display each one on a new table row. Views are still PHP files so you can use any code you normally would.

Creating views

Views are located in the "application/views" folder. Using the example controller you created in the controller page, let's add a view to it. Using your text editor, create a file called "product.php" in "application/views" folder, and put this code in it:

<html>
<head>
<title>My store</title>
</head>
<body>
	<p>Welcome to my store!</p>
</body>
</html>

Loading views

To load a particular view file you will use the following function:

view::load('store');

Now, open the controller file you made earlier called "store.php", and replace the echo statement in the "index" method with the view loading function:

class Products_Controller extends Controller 
{
	public function index()
	{
		view::load('store');
	}
}

If you visit your site using the URL you did earlier you should see your new view.

example.com/products

You may load views from within view files. Create a file called "header.php" in "application/views" folder, and put this code in it:

<html>
<head>
<title>My store</title>
</head>

Then modify original "store.php" view file to look like this:

<? view::load('header'); ?>
<body>
	<p>Welcome to my store!</p>
</body>
</html>

It will produce the same output. This is useful since you may share code that doesn't really change across multiple other files.

Overriding views

You may override view files in the "application/views" folder by placing them in the "templates/your_template" folder, where "your_template" is the name of the template you use on your site. For example if we place "store.php" file in the "templates/your_template" folder, then system will load "templates/your_template/store.php" instead of "application/views/store.php" file.

This is useful if you would like to make changes to one of the default view files. Instead of modifying the original file, you may create its copy and modify it instead. This allows for easy updates when new versions of the software come out since your modifies files do not get overwritten.

If view file is located in a sub-folder such as "application/views/store/products.php", you must retain the same folder structure when copying it to the "templates/your_template" folder, so it would look like this "templates/your_template/store/products.php".

Loading dynamic data

Data is passed from the controller to the view by way of an array or an object in the second parameter of the view loading function:

class Products_Controller extends Controller 
{
	public function index()
	{
		$data = array(
			'title' => 'My store',
			'description' => 'Welcome to my store'
		);
		view::load('store', $data);
	}
}

Now open your view file and change the text to variables that correspond to the array keys in your data:

<html>
<head>
<title><?php echo $title;?></title>
</head>
<body>
	<p><?php echo $description;?></p>
</body>
</html>

You may also use alternative short PHP syntax:

<html>
<head>
<title><?=$title?></title>
</head>
<body>
	<p><?=$description?></p>
</body>
</html>

Then load the page at the URL you've been using and you should see the variables replaced.

In addition to passing view the view loading function, you may also assign variables to the view anywhere in the controller before the view is loaded. The following code will produce the same results as the one above:

view::assign('title', 'My store');
view::assign('description', 'Welcome to my store');
view::load('store', $data);

Return views as data

There is a third optional parameter lets you change the behavior of the function so that it returns data as a string rather than sending it to your browser. This can be useful if you want to process the data in some way.

$output = view::load('store', $data, true);

Loading javascript and css files

Files in the "assets/css" and "assets/js" folders are loaded by the system automatically. If you're creating a plugin that comes with javascript or css files, you may place them in those folders. For example if we have a plugin called "documents", we'll create the following folders where we can place related files (note that folders must be named exactly the same as your plugin):

  • assets/css/documents
  • assets/js/documents

If you need files to be used in the control panel, you may instead create them in these folders:

  • assets/css/cp/documents
  • assets/js/cp/documents

You may also refer to the reference page for functions that allow you to load javascript and css files from within the controller.