Tutorial 3- Views

At CI everything is done by Controller.
We can write any code at Controller.(html,database query,all code).
But writing all code in one file is messy and is not easy to understand.
Thats why we need to separate codes.
HTML code should be in separate file so that we can only design html there.
The file which contain output(HTML,CSS,JAVSCRIPT,..) codes is called view.
But as we know everything is done by Controller so view files must be called/loaded by Controller.

  • View files located at application/views folder.
  • But I always create a folder same name as controller and keep all view files inside that folder that is used by that controller. It does not mean those views are for only that controller, any other controller can use it.

Creating a View

  • Lets create a folder hello inside application/views
  • now create a home.php file inside hello folder.
  • Include follwoing codes
    <?php defined('BASEPATH') OR exit('No direct script access allowed');?>
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Welcome</title>
        </head>
        <body>
            <h1>Welcome to CodeIgniter Tutorial</h1>
            <div>
                Codeigniter View Tutorial.
            </div>
        </body>
    </html>

loading a View

Controller should load the view. General format to load a view like this
$this->load->view(1st parameter ,2nd parameter ,3rd parameter );

  • 1st parameter is the view file path relative to view folder excluding .php extension.Our current view file name is home.php  and it is inside application/views/hello folder. So 1st parameter should be like this hello/home
  • 2nd parameter is used to send data to view from controller.Default empty array.it should be an Associative array or  a object. At view all indexes/keys can be used as variable.
  • 3rd parameter is TRUE/FALSE. Default is FALSE. If FALSE it will send the code inside view file to browser. In other words it will echo the output.IfTRUE it will not send the output to browser it will return as string and we can use it for different purposes.

Lets Change our Hello controllers index function as following codes

public function index()
{
  $this->load->view('hello/home');
   //above line similar to following line
   //$this->load->view('hello/home','',false);
}

Now if we call the url http://localhost/ci/hello we will see the html that was in our view file.

Passing data to View

Now we will send some data from controller to view.
Now we will call our view from both method(index and welcome).
But we want to make our html different for each method.
Lets change our content of  title,h1 and the content in div tag for each method but we will use the same view.

So our index and welcome method will look like this

    public function index()
    {
        $data = array();
        $data['title']='CI tutorial index';
        $data['heading']='Heading From Index';
        $data['content']='Content From Index';
        $this->load->view('hello/home',$data);
    }
    public function welcome()
    {
        $data = new stdClass();
        $data->title='CI tutorial welcome';
        $data->heading='Heading From welcome';
        $data->content='Content From welcome';
        $this->load->view('hello/home',$data);
    }

And our View file will be like this

<?php defined('BASEPATH') OR exit('No direct script access allowed');?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title><?php echo $title; ?></title>
    </head>
    <body>
        <h1><?php echo $heading; ?></h1>
        <div>
            <?php echo $content; ?>
        </div>
    </body>
</html>

Now if we call the url http://localhost/ci/hello and http://localhost/ci/hello/welcome we will see output like this.

indexwelcome

Now if  you  see the view we used 3 variables $title,$heading and $content.
If you look at the index function those are the index of $data array. And those indexed become as variable inside view when we pass the array as 2nd parameter of load view function.

If you look at the welcome function those are the key of $data object and those keys become as variable inside view when we pass the object as 2nd parameter of load view function.

We can pass either as object or as array. But I always pass as array.

Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *