Blame - user_guide/general/views.html - code-igniter-v3-giggi

blob: 746f7b846f0ddef8af28f4bbabcdd730ce7d097f [file] [log] [blame]

Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
				2	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
				3	<head>
				4
				5	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
				6	<title>Views : CodeIgniter User Guide</title>
				7
				8	<style type='text/css' media='all'>@import url('../userguide.css');</style>
				9	<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />
				10
				11	<script type="text/javascript" src="../nav/nav.js"></script>
				12	<script type="text/javascript" src="../nav/prototype.lite.js"></script>
				13	<script type="text/javascript" src="../nav/moo.fx.js"></script>
				14	<script type="text/javascript" src="../nav/user_guide_menu.js"></script>
				15
				16	<meta http-equiv='expires' content='-1' />
				17	<meta http-equiv= 'pragma' content='no-cache' />
				18	<meta name='robots' content='all' />
				19	<meta name='author' content='ExpressionEngine Dev Team' />
				20	<meta name='description' content='CodeIgniter User Guide' />
				21
				22	</head>
				23	<body>
				24
				25	<!-- START NAVIGATION -->
				26	<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
				27	<div id="nav2"><a name="top"></a><a href="javascript:void(0);" onclick="myHeight.toggle();"><img src="../images/nav_toggle_darker.jpg" width="154" height="43" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
				28	<div id="masthead">
				29	<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
				30	<tr>
Derek Jones	8917af7	2010-03-05 12:41:45 -0600	[diff] [blame]	31	<td><h1>CodeIgniter User Guide Version 2.0.0</h1></td>
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	32	<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
				33	</tr>
				34	</table>
				35	</div>
				36	<!-- END NAVIGATION -->
				37
				38
				39	<!-- START BREADCRUMB -->
				40	<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
				41	<tr>
				42	<td id="breadcrumb">
				43	<a href="http://codeigniter.com/">CodeIgniter Home</a>  ›
				44	<a href="../index.html">User Guide Home</a>  ›
				45	Views
				46	</td>
				47	<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="codeigniter.com/user_guide/" />Search User Guide  <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" /> <input type="submit" class="submit" name="sa" value="Go" /></form></td>
				48	</tr>
				49	</table>
				50	<!-- END BREADCRUMB -->
				51
				52	<br clear="all" />
				53
				54
				55	<!-- START CONTENT -->
				56	<div id="content">
				57
				58	<h1>Views</h1>
				59
				60	<p>A <dfn>view</dfn> is simply a web page, or a page fragment, like a header, footer, sidebar, etc.
				61	In fact, views can flexibly be embedded within other views (within other views, etc., etc.) if you need this type
				62	of hierarchy.</p>
				63
				64	<p>Views are never called directly, they must be loaded by a <a href="controllers.html">controller</a>. Remember that in an MVC framework, the Controller acts as the
				65	traffic cop, so it is responsible for fetching a particular view. If you have not read the <a href="controllers.html">Controllers</a> page
				66	you should do so before continuing.</p>
				67
				68	<p>Using the example controller you created in the <a href="controllers.html">controller</a> page, let's add a view to it.</p>
				69
				70	<h2>Creating a View</h2>
				71
				72	<p>Using your text editor, create a file called <dfn>blogview.php</dfn>, and put this in it:</p>
				73
				74	<textarea class="textarea" style="width:100%" cols="50" rows="10">
				75	<html>
				76	<head>
				77	<title>My Blog</title>
				78	</head>
				79	<body>
				80	<h1>Welcome to my Blog!</h1>
				81	</body>
				82	</html>
				83	</textarea>
				84
				85	<p>Then save the file in your <dfn>application/views/</dfn> folder.</p>
				86
				87	<h2>Loading a View</h2>
				88
				89	<p>To load a particular view file you will use the following function:</p>
				90
				91	<code>$this->load->view('<var>name</var>');</code>
				92
				93	<p>Where <var>name</var> is the name of your view file. Note: The .php file extension does not need to be specified unless you use something other than <kbd>.php</kbd>.</p>
				94
				95
				96	<p>Now, open the controller file you made earlier called <dfn>blog.php</dfn>, and replace the echo statement with the view loading function:</p>
				97
				98
				99	<textarea class="textarea" style="width:100%" cols="50" rows="10">
Derek Allard	4b6d493	2008-12-07 17:04:56 +0000	[diff] [blame]	100	<?php
Greg Aker	16fcb2e	2010-11-09 13:53:07 -0600	[diff] [blame]	101	class Blog extends CI_Controller {
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	102
				103	function index()
				104	{
				105	$this->load->view('blogview');
				106	}
				107	}
Derek Allard	4b6d493	2008-12-07 17:04:56 +0000	[diff] [blame]	108	?>
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	109	</textarea>
				110
				111
Derek Jones	e77162b	2010-09-27 09:08:00 -0500	[diff] [blame]	112	<p>If you visit your site using the URL you did earlier you should see your new view. The URL was similar to this:</p>
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	113
				114	<code>example.com/index.php/<var>blog</var>/</code>
				115
				116	<h2>Loading multiple views</h2>
Derek Jones	e77162b	2010-09-27 09:08:00 -0500	[diff] [blame]	117	<p>CodeIgniter will intelligently handle multiple calls to $this->load->view from within a controller. If more than one call happens they will be appended together. For example, you may wish to have a header view, a menu view, a content view, and a footer view. That might look something like this:</p>
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	118	<p><code><?php<br />
				119	<br />
Greg Aker	16fcb2e	2010-11-09 13:53:07 -0600	[diff] [blame]	120	class Page extends CI_Controller {<br /><br />
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	121
				122	function index()<br />
				123	{<br />
				124	$data['page_title'] = 'Your title';<br />
				125	$this->load->view('header');<br />
				126	$this->load->view('menu');<br />
				127	$this->load->view('content', $data);<br />
				128	$this->load->view('footer');<br />
				129	}<br />
				130	<br />
				131	}<br />
				132	?></code></p>
				133	<p>In the example above, we are using "dynamically added data", which you will see below.</p>
				134	<h2>Storing Views within Sub-folders</h2>
				135	<p>Your view files can also be stored within sub-folders if you prefer that type of organization. When doing so you will need
				136	to include the folder name loading the view. Example:</p>
				137
				138	<code>$this->load->view('<kbd>folder_name</kbd>/<var>file_name</var>');</code>
				139
				140
				141	<h2>Adding Dynamic Data to the View</h2>
				142
				143	<p>Data is passed from the controller to the view by way of an <strong>array</strong> or an <strong>object</strong> in the second
				144	parameter of the view loading function. Here is an example using an array:</p>
				145
				146	<code>$data = array(<br />
				147	'title' => 'My Title',<br />
				148	'heading' => 'My Heading',<br />
				149	'message' => 'My Message'<br />
				150	);<br />
				151	<br />
				152	$this->load->view('blogview', <var>$data</var>);</code>
				153
				154	<p>And here's an example using an object:</p>
				155
				156	<code>$data = new Someclass();<br />
				157	$this->load->view('blogview', <var>$data</var>);</code>
				158
				159	<p>Note: If you use an object, the class variables will be turned into array elements.</p>
				160
				161
				162	<p>Let's try it with your controller file. Open it add this code:</p>
				163
				164	<textarea class="textarea" style="width:100%" cols="50" rows="14">
				165	<?php
Greg Aker	16fcb2e	2010-11-09 13:53:07 -0600	[diff] [blame]	166	class Blog extends CI_Controller {
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	167
				168	function index()
				169	{
				170	$data['title'] = "My Real Title";
				171	$data['heading'] = "My Real Heading";
Barry Mieny	dd67197	2010-10-04 16:33:58 +0200	[diff] [blame]	172
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	173	$this->load->view('blogview', $data);
				174	}
				175	}
				176	?>
				177	</textarea>
				178
				179
				180	<p>Now open your view file and change the text to variables that correspond to the array keys in your data:</p>
				181
				182
				183	<textarea class="textarea" style="width:100%" cols="50" rows="10">
				184	<html>
				185	<head>
				186	<title><?php echo $title;?></title>
				187	</head>
				188	<body>
				189	<h1><?php echo $heading;?></h1>
				190	</body>
				191	</html>
				192	</textarea>
				193
				194	<p>Then load the page at the URL you've been using and you should see the variables replaced.</p>
				195
				196	<h2>Creating Loops</h2>
				197
				198	<p>The data array you pass to your view files is not limited to simple variables. You can
				199	pass multi dimensional arrays, which can be looped to generate multiple rows. For example, if you
				200	pull data from your database it will typically be in the form of a multi-dimensional array.</p>
				201
				202	<p>Here's a simple example. Add this to your controller:</p>
				203
				204	<textarea class="textarea" style="width:100%" cols="50" rows="17">
				205	<?php
Greg Aker	16fcb2e	2010-11-09 13:53:07 -0600	[diff] [blame]	206	class Blog extends CI_Controller {
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	207
				208	function index()
				209	{
				210	$data['todo_list'] = array('Clean House', 'Call Mom', 'Run Errands');
				211
				212	$data['title'] = "My Real Title";
				213	$data['heading'] = "My Real Heading";
Barry Mieny	dd67197	2010-10-04 16:33:58 +0200	[diff] [blame]	214
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	215	$this->load->view('blogview', $data);
				216	}
				217	}
				218	?>
				219	</textarea>
				220
				221
				222	<p>Now open your view file and create a loop:</p>
				223
				224
				225	<textarea class="textarea" style="width:100%" cols="50" rows="24">
				226	<html>
				227	<head>
				228	<title><?php echo $title;?></title>
				229	</head>
				230	<body>
				231	<h1><?php echo $heading;?></h1>
Barry Mieny	dd67197	2010-10-04 16:33:58 +0200	[diff] [blame]	232
				233	<h3>My Todo List</h3>
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	234
				235	<ul>
Pascal Kriete	feba2de	2011-02-14 13:25:30 -0500	[diff] [blame]	236	<?php foreach ($todo_list as $item):?>
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	237
				238	<li><?php echo $item;?></li>
				239
				240	<?php endforeach;?>
				241	</ul>
Barry Mieny	dd67197	2010-10-04 16:33:58 +0200	[diff] [blame]	242
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	243	</body>
				244	</html>
				245	</textarea>
				246	<p><strong>Note:</strong> You'll notice that in the example above we are using PHP's alternative syntax. If you
				247	are not familiar with it you can read about it <a href="alternative_php.html">here</a>.</p>
				248
				249	<h2>Returning views as data</h2>
				250
				251	<p>There is a third <strong>optional</strong> parameter lets you change the behavior of the function so that it returns data as a string
				252	rather than sending it to your browser. This can be useful if you want to process the data in some way. If you
				253	set the parameter to <kbd>true</kbd> (boolean) it will return data. The default behavior is <kbd>false</kbd>, which sends it
				254	to your browser. Remember to assign it to a variable if you want the data returned:</p>
				255
				256	<code>$string = $this->load->view('<var>myfile</var>', '', <kbd>true</kbd>);</code>
				257
				258	</div>
				259	<!-- END CONTENT -->
				260
				261
				262	<div id="footer">
				263	<p>
				264	Previous Topic:  <a href="reserved_names.html">Reserved Names</a>
				265	·
				266	<a href="#top">Top of Page</a>   ·
				267	<a href="../index.html">User Guide Home</a>   ·
				268	Next Topic:  <a href="models.html">Models</a>
				269	</p>
Derek Jones	700205a	2011-01-28 07:44:28 -0600	[diff] [blame]	270	<p><a href="http://codeigniter.com">CodeIgniter</a>  ·  Copyright © 2006 - 2011  ·  <a href="http://ellislab.com/">EllisLab, Inc.</a></p>
Derek Allard	2067d1a	2008-11-13 22:59:24 +0000	[diff] [blame]	271	</div>
				272
				273	</body>
admin	b0dd10f	2006-08-25 17:25:49 +0000	[diff] [blame]	274	</html>