Views in CodeIgniter

Today we will study what are views in codeigniter and how to use them in this Views in CodeIgniter tutorial.

View is one of the important parts in the MVC architecture and as codeigniter uses MVC architecture format, view plays an important role in it.

What is a view?
- A view is a part in codeigniter which is used to create and store the user interface design which will be displayed on the browser.
- It can contain elements such as header, footer, menu, sidebar, etc. on different pages which can be shown together at a time on the browser.
- So view can be defined simply as a web page or a page fragment like header, footer, etc. Views can be embedded with other views also.
- As the view is created once and kept, it provides the programmer with the facility to reuse it by embedding with any number of other views of choice.
- Views are not called directly; they need to be loaded by a controller. We know that in MVC, controller has the ability to control all the traffic and take all the decisions; so the views to be displayed on the browser are loaded by controller.
Creating a view:
- We will first see a simple single view and load it in the controller.
- The view/ webpage to be displayed is first created and stored in the application/views folder and then loaded in the controller.
- So let us open a notepad++ document and save it as home.php in the application/views folder which is inside your xampp/CodeIgniter/htdocs folder.
- Write the following code in home.php file:

<html>
<head>
<title>homepage</title>
</head>
<body>
	<br>
	<img src="http://localhost/CodeIgniter/images/work1.jpg" width="225" height="100"/>
	<img src="http://localhost/CodeIgniter/images/work2.jpg" width="225" height="100"/>
	<h1>We are a leading software developers in India</h1>
</body>
</html>

We have used images in our homepage. So to access the images in the home.php page we need to create a folder called images (any name you want) at the root folder i.e. inside the CodeIgniter folder and paste your images in it.
This is because all the images should be at the root, outside the application folder.
Now after placing the images at their position, we will write the above code in home.php page.
The above code consists of the image path in the form of URL because you can’t use your relative path.
So we can reach to the images using the URL http://localhost/CodeIgniter/images/image_name.
Here localhost is our localhost server, CodeIgniter is the CodeIgniter folder in xampp/htdocs folder, images is the folder created to store images and image_name will be the name of the image to be displayed.
After displaying the images using img tag, a heading is displayed.
Thus body of home.php page consists of two images and a text in h1 heading tag.
Our view is ready; but now unless and until it is not loaded in the controller, it will not be visible in the browser. So let us see how to load a view in the controller.

Loading a view in the controller:
- To load a view in the controller we use the built-in loader class.
- The loader is used to load elements like libraries, views, models etc.
- This class is initialized automatically by the system.
- It consists of various functions to load different elements.
- To load a view the following function is used:

$this->load->view(‘file_name’,$data,true/false);

It has 3 parameters of which first is mandatory and the rest two are optional.
The first parameter file_name is the name of the view file to be loaded and it is mandatory. There is no need to specify the extension of a file unless it is of any other type than .php file.
The second parameter $data is optional. The data to be passed to the view files dynamically through controller is passed in $data parameter. It can take an associative array or an object as an input. The passed array keys or objects containing values are converted to variables and used in the specified view files.
The third optional parameter controls the behavior of the function which allows it to display the data in browser or return the data in a variable to process it further. If the third parameter it given as true, the function will return data which is to be accepted in a variable as shown below:

$var=$this->load->view(‘file_name’,$data,true);

And if it is given as false, the data will be displayed in browser. By default value of the third parameter is false.
So now as we understood the function to load a view, let us create a controller class and use it in that class to display it on the browser.
First we will see just a simple loading of view file without passing dynamic data to it.
So for this open a new notepad++ document and save it as comp.php in the application/controllers folder of your CodeIgniter folder.
Write the following code in the comp.php file:

<?php
	class Comp extends CI_Controller
	{
		function index()
		{
			$this->load->view('home');
		}
	}
?>

Here, we have defined a Comp class which inherits from the base class CI_Controller to access all its properties and methods.
In this class we have defined a function called index. As its name is index, this function will be called first even if its name is not specified in the URL.
A view file home.php is loaded in the index() function using the loader function given below:

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

Here, we can see that we have only specified the name of our home.php file in the function without its extension. Because there is no need to specify extension of a PHP file. If there is any other file with extension other than .php, its extension has to be specified.
This is a very simple example without any dynamic data passed using second optional parameter.
The third optional parameter is by default false, hence the file will be shown in the browser.
Till now, we finished creating our home.php page in application/views folder and a controller comp.php in application/controllers folder.
Now let us see the output:
To see the output write the following URL in the address bar of your browser:

http://localhost/CodeIgniter/index.php/comp

Here we can see that the localhost is your local server, CodeIgniter is the CodeIgniter folder placed in your local server, index.php is the default index page in CodeIgniter and comp is the name of our controller.
The output is shown below:

fig 1

Here is the home.php page shown in the above figure. Now if we send some data to the home.php file while loading it in the controller how to use it in the view file. So let us see both the processes below viz. Sending data to a view file and using it in the view file.

Adding data Dynamically to the view:
- To add data dynamically to the view, it is added in the loader function $this->load->view() inside the controller.
- We know that the function $this->load->view() has a second optional parameter $data. We use this parameter to pass data to the specified view file.
- Let us pass some data to our home.php view file in our existing Comp controller which is in our comp.php file in application/controllers folder.
- So open the comp.php file and modify its code in the way shown below:

<?php
	class Comp extends CI_Controller
	{
		function index()
		{
			$data=array(
			'title'=>'Company Homepage',
			'content'=>'We also provide technical training in various software languages and frameworks',
			'projects'=>array('library management system','online shopping system','provident fund statutory returns system','hotel management system')
			);
			$this->load->view('home',$data,false);
		}
	}
?>

In the above code we have modified the controller class Comp by adding an array to pass values to the view file.
The array is assigned to the variable $data, we can use any variable.
The array is shown below:

$data=array(
'title'=>'Company Homepage',
'content'=>'We also provide technical training in various software languages and frameworks',
'projects'=>array('library management system','online shopping system','provident fund statutory returns system','hotel management system'));

The array above consists of title, content and an array containing project names with key projects.
This whole array is passed to the view file by passing the variable $data which points to the array in the function which loads the view file as shown below:

$this->load->view('home',$data,false);

We have also specified false for the third parameter, but it is not necessary because by default it is false.
Here we finished passing the values to the view file, now we need to use them in the view file as explained below.

Using dynamic data fetched from the controller in the view file:
- When data is passed to the view file from the controller, it is passed in an array or object.
- In the view files they are treated as variables, for example: keys of the array are treated as variables. In our case the key ‘title’ in $data array will be represented as $title in the view file.
- So now in our case, let us use the values passed form controller Comp to the view file home.php.
- So open the view file i.e. home.php file which is in application/views folder and modify it as shown in the code below:

<html>
<head>
<title><?php echo $title;?></title>
</head>
<body>
	<br>
	<img src="http://localhost/CodeIgniter/images/work1.jpg" width="225" height="100"/>
	<img src="http://localhost/CodeIgniter/images/work2.jpg" width="225" height="100"/>
	<h1>We are a leading software developers in India.<?php echo $content;?></h1>
	<br><hr>
	<h2>Projects done:<h2>
	<ul>
	<?php foreach($projects as $proj){?>
	<li><?php echo $proj;?></li>
	<?php }?>
	</ul>
</body>
</html>

Here we have used the title passed in the $data array as the title of the home.php page by placing it in the head section as shown below:

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

Here key title in the $data array is used as $title variable and displayed using PHP’s echo statement.
Next we have used the value of key ‘content’ in $data array as the information to be displayed in the following statement:

<h1>We are a leading software developers in India.<?php echo $content;?></h1>

Here we had an information statement written previously. Then we added some more information by using the ‘content’ key of $data array as the variable $content in the h1 tag itself by embedding the php statement inside it.
The array of projects passed in $data array is also used by traversing it using the foreach loop and displaying it in an un-ordered list as shown below:

<ul>
	<?php foreach($projects as $proj) {?>
	<li><?php echo $proj;?></li>
	<?php }?>
	</ul>

Here the key ‘projects’ is used as $projects and used in foreach loop to display all values in its array.
After making all the changes, let us see the output. Just reload the browser and see the output. It is shown below:

fig 2

Thus we saw how to pass data to a view file, how to use it in a view file and how to show the view file in browser with the help of controller.
But imagine that you are developing a website with many webpages serving different purposes and you want same background or same design for header, footer, sidebar etc. for all webpages.
You will have to create everything specified above for all the pages, this is a very tedious job.
Even if you copy the code and paste it in all the files, it will result in file length and code repetition.
This can be handled using the concept of loading multiple views in the controller.

Loading multiple views:
- In the cases where we need same content like header, footer etc. in many pages, we can create a webpage only for header, a webpage only for footer etc. and then cascade/concatenate it with the desired data page whenever needed in the controller.
- This will reduce all our problems of repetition of code and will be flexible to us.
- In our project we have already created home.php page which contains body of the page, but now I want a header, a footer and a menu to be visible on the home page along with its content. So I will have to dissociate the home.php page by taking is head section in another file named header.php and end section in the file footer.php.
- It is a best practice to place all the views for one project by creating a separate folder.
- So let us demonstrate by creating multiple views and loading them in the controller for display purpose.
- First step: Create a folder with any name say templates in the application/views folder of your CodeIgniter folder.
- Second step: Open a new notepad++ document and save it as header.php in the application/views/templates folder.
- Now open your home.php page which is located in the application/views folder in your CodeIgniter folder and cut the html code from html tag to body tag and place it in the newly created file header.php.
- Now your header.php file will have the following code inside it:

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

Save it and close the file.
Third step: Now open a new file and save it as footer.php in the application/views/templates folder.
Now open the home.php and cut the end of body and end of html tag from there and paste it in the newly created footer.php file.
The footer.php will now contain the following code:

</body>
</html>

Our header and footer pages are ready in templates folder now.
Fourth step: Place the home.php file in another folder say application/views/body_pages folder. The code present inside it is shown below:

<br>
	<img src="http://localhost/CodeIgniter/images/work1.jpg" width="225" height="100"/>
	<img src="http://localhost/CodeIgniter/images/work2.jpg" width="225" height="100"/>
	<h1>We are a leading software developers in India.<?php echo $content;?></h1>
	<br><hr>
	<h2>Projects done:<h2>
	<ul>
	<?php foreach($projects as $proj){?>
	<li><?php echo $proj;?></li>
	<?php }?>
	</ul>

The above code is just without head and end of page section, i.e. it contains only body part.
Fifth step: Now I want to add something more to the head section, so open the header.php page and modify it. The modified code is shown below:

<html>
<head>
<title><?php echo $title;?></title>
</head>
<body>
<h1 style="font-weight:bold;font-style:times new roman;background:#D8F781;color:purple;text-align:center;">SoftLogic Software Solutions</h1>

Here in header.php file we have just added the company name with some styling applied to it.
Now save the changes and close the file.
Sixth step: I also want to add something to the footer.php file, so open it and modify the code in as shown below:

<div style="background:#D8F781;">
<em style="color:purple;text-align:center;padding-left:250px;">&copy; SoftLogic@2015</em>
</div>
</body>
</html>

Here we have defined a footer which will be placed at the bottom of the page.
Now all our pages are ready, so let us load them one by one according to their order in the controller.
Open your controller file comp.php which is inside application/controllers folder.
Modify its code as shown below:

<?php
	class Comp extends CI_Controller
	{
		function index()
		{
		
			$data=array(
			'title'=>'SoftLogic Homepage',
			'content'=>'We also provide technical training in various software languages and frameworks',
			'projects'=>array('library management system','online shopping system','provident fund statutory returns system','hotel management system'));
			
			$this->load->view('templates/header',$data);
			$this->load->view('body_pages/home',$data,false);
			$this->load->view('templates/footer');
		}
	}
?>

In the above code we have the index() function in which we have loaded all the views.
First we have defined the array of data to be passed to the respective view file.
Then first the header.php view file is loaded using the statement:

$this->load->view('templates/header',$data);

Here, we have passed the $data array with it because we want to display the company header from the title element given in the array $data.
Next we have loaded the data file home.php which is inside application/views/body_pages using the following statement:

$this->load->view('body_pages/home',$data,false);

Since the function $this->load->view() fetches file from the application/views folder only, we have specified the path ahead of it i.e. body_pages/home for the file home.php. And the array $data is also passed to it.
Next footer is required to be displayed below the body part. So footer.php file is loaded as shown below:

$this->load->view('templates/footer');

The footer and header files are inside templates folder inside the application/views folder, so its path is given as templates/footer or templates/header respectively. For footer there is no need of dynamic data, hence it is not passed while loading footer.
Now after loading all views in the controller we can see the output of homepage now.
Reload the page and see the output as shown below:

fig 3

In the similar fashion we can have as many templates we want and as many body pages we want in our website and shown them accordingly in the controller by concatenating them.

This was all about views, how to use them and how to display them. So we studied views in detail in this Views in CodeIgniter tutorial.

Views in CodeIgniter

LEAVE A REPLY Cancel reply

Exclusive content

Strategies for Thriving in the New Era of Commerce

Best coding forums one should engage in 2024

What is an agency? is it the next business model after SaaS

Latest article

Strategies for Thriving in the New Era of Commerce

Best coding forums one should engage in 2024

What is an agency? is it the next business model after SaaS

More article

Essential Strategies for Troubleshooting Common Errors!

Strategies for Thriving in the New Era of Commerce

Best coding forums one should engage in 2024

What is an agency? is it the next business model after SaaS