4

Creating and Editing CodeIgniter Views

In this section we will use the CodeIgniter welcome message view to illustrate how views work, and then edit and create some. This section will also briefly mention controllers, because views are useless without controllers.

Before we start, a quick introduction to MVC

Websites built with CodeIgniter do not work like you might expect a website to. The Expression Engine users among you will probably be familiar with the concept of all URL's being processed through the index.php file, but for those who are not - here's what I'm talking about.

In CodeIgniter no matter what URL is requested index.php deals with it. It calls the CodeIgniter core files that work out, on the basis of the segments of the URL, what to do. Each URL segment relates to a particular controller and a particular method of that controller. So a URL like this: http://localhost/ci_tutorial/index.php/welcome/index - would activate the 'index' method (or function) of the 'welcome' controller. But because the welcome controller is the default it can also be called by requesting the main url like this: http://localhost/ci_tutorial/.

Controllers

Controllers are php files that contain a class that contains functions that relate to the pages of the website as they would appear to the end-user. It is the job of the controller to control the site. Controllers decide (among other things) what views to display and what information to populate them with.

Views

Views are files constructed mostly of html, views can contain php code to display dynamic information.

Editing the welcome message

To get a clearer idea of how the view/controller relationship works lets look at, and edit the welcome message.

Open the welcome.php file (/system/application/controllers/welcome.php) in your text editor of choice. What we have here is a php class, it should look like this:

class Welcome extends Controller {

  function Welcome()
  {
    parent::Controller();
  }

  function index()
  {
    $this->load->view('welcome_message');
  }

}

What this file is doing is creating a php class, all controllers are classes. You create a php class by using the word 'class' followed by the name of the class, in this case 'Welcome', every controller extends the 'Controller' class, the controller class is part of the CodeIgniter core files and it provides your controllers with a lot of their functionality.

Between the opening and closing braces - {} - of the class we have two functions, Welcome() and index(). The Welcome function is called the constructor. Don't worry too much about this right now, just be aware that when a controller is called the first thing that happens is the constructor function is activated, the constructor function always has exactly the same name as the class. In tis case the constructor just calls the constructor of its parent class 'Controller'. If this doesn't make sense right now don't worry.

The index function is the one we are most interested in, the index function of a controller is called when the URL doesn't specify a function, i.e. rather than http://localhost/ci_tutorial/index.php/welcome/index, http://localhost/ci_tutorial/index.php/welcome/ is entered. All the index function is doing is loading the 'welcome_message' view.

$this->load->view('welcome_message');

In php $this means 'in the context of this class' so if we call a funcion that is inside the same class we use $this->fuction_name() rather than just function_name(). Also our controller inherits all of the functionality of its parent, 'Controller', and the load() function is in the parent 'Controller' class. Confused? if you don't know very much php you probably should be, but don't worry it will start to sink in as we progress and you don't need to uderstand this fully right now.

The welcome_message view

Now we know that all the index function of the 'Welcome' controller does is call the 'welcome_message' view, so lets have a look at it. You will find it at /system/application/views/welcome_message.php

The view file should look quite familiar to you, there is just some html header stuff, some css styling. You should be able to identify how this translates to the page you see in your web browser. There is one line that may look unfamiliar (or perhaps familiar to anyone who uses Expression Engine, or who has used the Smarty template engine) and that is:

Page rendered in {elapsed_time} seconds

When CodeIgniter starts it triggers a timer, this timer can then be used to monitor your page's performance. {elapsed_time} is putting the elapsed_time variable into the page. You can also use php in your view files, lets put some in. Copy and paste the following into the view file under the main heading:

The current date and time is: <?php echo date('d/m/Y H:i:s'); ?>

Now revisit your CI installation homepage in your browser and click refresh, the current date and time should be inserted. What we have done here is directly entered some php into our view file, but there is a better way to acheive the same thing. You can set the current date/time in the controller and pass it to the view, this is a much more tidy approach.

The php date function is very useful, it can be used to format and display a date, check the php dates manual for full details.

Passing data to a view

Go back to the welcome.php controller file, remember we said that the index() function was loading the welcome_message view, well the load->view() function can take another parameter, at the moment it is only using the view name but we can pass it some data like this:

class Welcome extends Controller {

  function Welcome()
  {
    parent::Controller();
  }

  function index()
  {
    $template_data = array();
    $template_data['current_date'] = date('d/m/Y H:i:s');
    $this->load->view('welcome_message', $template_data);
  }

}

Now each element of the $template_data array is available in the view, so in the view file we can change:

The current date and time is: <?php echo date('d/m/Y H:i:s'); ?>

to

The current date and time is: <?php echo $current_date; ?>

Much neater. I will point out at this stage that there is an alternative to all of this php in views buisness, you can use Expression Engine/Smarty style 'tags' to display data. This may be helpful to EE users because it makes things a bit more familiar. There is a small perfomance hit when using the -{}- method of inserting php into templates but I think it's worth it.

To use the templating system you need to load the template parser library into your controller using this line of code:

$this->load->library('parser');

If you add this line of code to the index function the template parser library will only be available to 'index', if you add it to the constructor function 'Welcome()' it will be available to all of the functions in the 'Welcome' controller. This is because the constructor is activated everytime the controller gets called regardless of the specific function that is being called. So let's add it to the constructor for neatness.

class Welcome extends Controller {

  function Welcome()
  {
    parent::Controller();
    $this->load->library('parser');
  }

  function index()
  {
    $template_data = array();
    $template_data['current_date'] = date('d/m/Y H:i:s');
    $this->load->view('welcome_message', $template_data);
  }

}

Now we need to tell the index function not to just load the view but to use the template parser, so replace the load->view() line as follows:

class Welcome extends Controller {

  function Welcome()
  {
    parent::Controller();
    $this->load->library('parser');
  }

  function index()
  {
    $template_data = array();
    $template_data['current_date'] = date('d/m/Y H:i:s');
    $this->parser->parse('welcome_message', $template_data);
  }

}

Now we can change the date/time line in the view from this:

The current date and time is: <?php echo $current_date; ?>

to this:

The current date and time is: {current_date}

As your controllers and views become more complex you will probably set many variables in the $template_data array and have a lot of tags in your views.

Remember that your views do not have to contain any dynamic data at all, you could use CodeIgniter to create a static site that just makes use of the way CodeIgniter organises your site. Then later sprinkle in some functionality as you like.

It is probably worth you while to play around with the welcome message view, add some php if you know some, try and keep all php in the controller and pass it in the $template_data array. Try and create a new view and have a poke around and see if you can get a good grasp of what is happening and why. In the next section we will create a new controller and few views to build something that will more closely represent something you might want to build. Part 5 should be ready by Wednesday 19th March 2008 (or before if I get time).