| admin | b0dd10f | 2006-08-25 17:25:49 +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>
|
| 3 | <head>
|
| 4 |
|
| 5 | <title>Code Igniter User Guide</title>
|
| 6 |
|
| 7 | <style type='text/css' media='all'>@import url('../userguide.css');</style>
|
| 8 | <link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />
|
| 9 |
|
| 10 | <script type="text/javascript" src="../scripts/nav.js"></script>
|
| 11 | <script type="text/javascript" src="../scripts/prototype.lite.js"></script>
|
| 12 | <script type="text/javascript" src="../scripts/moo.fx.js"></script>
|
| 13 | <script type="text/javascript">
|
| 14 | window.onload = function() {
|
| 15 | myHeight = new fx.Height('nav', {duration: 400});
|
| 16 | myHeight.hide();
|
| 17 | }
|
| 18 | </script>
|
| 19 |
|
| 20 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
| 21 | <meta http-equiv='expires' content='-1' />
|
| 22 | <meta http-equiv= 'pragma' content='no-cache' />
|
| 23 | <meta name='robots' content='all' />
|
| 24 | <meta name='author' content='Rick Ellis' />
|
| 25 | <meta name='description' content='Code Igniter User Guide' />
|
| 26 |
|
| 27 | </head>
|
| 28 | <body>
|
| 29 |
|
| 30 | <!-- START NAVIGATION -->
|
| 31 | <div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
|
| 32 | <div id="nav2"><a name="top"></a><a href="javascript:void(0);" onclick="myHeight.toggle();"><img src="../images/nav_toggle.jpg" width="153" height="44" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
|
| 33 | <div id="masthead">
|
| 34 | <table cellpadding="0" cellspacing="0" border="0" style="width:100%">
|
| 35 | <tr>
|
| 36 | <td><h1>Code Igniter User Guide Version 1.4.0</h1></td>
|
| 37 | <td id="breadcrumb_right"><a href="../toc.html">Full Table of Contents</a></td>
|
| 38 | </tr>
|
| 39 | </table>
|
| 40 | </div>
|
| 41 | <!-- END NAVIGATION -->
|
| 42 |
|
| 43 |
|
| 44 | <!-- START BREADCRUMB -->
|
| 45 | <table cellpadding="0" cellspacing="0" border="0" style="width:100%">
|
| 46 | <tr>
|
| 47 | <td id="breadcrumb">
|
| 48 | <a href="http://www.codeigniter.com/">Code Igniter Home</a> ›
|
| 49 | <a href="../index.html">User Guide Home</a> ›
|
| 50 | Views
|
| 51 | </td>
|
| 52 | <td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="www.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>
|
| 53 | </tr>
|
| 54 | </table>
|
| 55 | <!-- END BREADCRUMB -->
|
| 56 |
|
| 57 | <br clear="all" />
|
| 58 |
|
| 59 |
|
| 60 | <!-- START CONTENT -->
|
| 61 | <div id="content">
|
| 62 |
|
| 63 | <h1>Views</h1>
|
| 64 |
|
| 65 | <p>A <dfn>view</dfn> is simply a web page, or a page fragment, like a header, footer, sidebar, etc.
|
| 66 | In fact, views can flexibly be embedded within other views (within other views, etc., etc.) if you need this type
|
| 67 | of hierarchy.</p>
|
| 68 |
|
| 69 | <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
|
| 70 | traffic cop, so it is responsible for fetching a particular view. If you have not read the <a href="controllers.html">Controllers</a> page
|
| 71 | you should do so before continuing.</p>
|
| 72 |
|
| 73 | <p>Using the example controller you created in the <a href="controllers.html">controller</a> page, let's add a view to it.</p>
|
| 74 |
|
| 75 | <h2>Creating a View</h2>
|
| 76 |
|
| 77 | <p>Using your text editor, create a file called <dfn>blogview.php</dfn>, and put this in it:</p>
|
| 78 |
|
| 79 | <textarea class="textarea" style="width:100%" cols="50" rows="10">
|
| 80 | <html>
|
| 81 | <head>
|
| 82 | <title>My Blog</title>
|
| 83 | </head>
|
| 84 | <body>
|
| 85 | <h1>Welcome to my Blog!</h1>
|
| 86 | </body>
|
| 87 | </html>
|
| 88 | </textarea>
|
| 89 |
|
| 90 | <p>Then save the file in your <dfn>application/views/</dfn> folder.</p>
|
| 91 |
|
| 92 | <h2>Loading a View</h2>
|
| 93 |
|
| 94 | <p>To load a particular view file you will use the following function:</p>
|
| 95 |
|
| 96 | <code>$this->load->view('<var>name</var>');</code>
|
| 97 |
|
| admin | 108d18a | 2006-09-02 17:45:38 +0000 | [diff] [blame] | 98 | <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 then <kbd>.php</kbd>.</p>
|
| admin | b0dd10f | 2006-08-25 17:25:49 +0000 | [diff] [blame] | 99 |
|
| 100 | <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>
|
| 101 |
|
| 102 |
|
| 103 | <textarea class="textarea" style="width:100%" cols="50" rows="10">
|
| 104 | <?php
|
| 105 | class Blog extends Controller {
|
| 106 |
|
| 107 | function index()
|
| 108 | {
|
| 109 | $this->load->view('blogview');
|
| 110 | }
|
| 111 | }
|
| 112 | ?>
|
| 113 | </textarea>
|
| 114 |
|
| 115 |
|
| 116 | <p>If you visit the your site using the URL you did earlier you should see your new view. The URL was similar to this:</p>
|
| 117 |
|
| 118 | <code>www.your-site.com/index.php/<var>blog</var>/</code>
|
| 119 |
|
| 120 |
|
| 121 | <h2>Adding Dynamic Data to the View</h2>
|
| 122 |
|
| 123 | <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
|
| 124 | parameter of the view loading function. Here is an example using an array:</p>
|
| 125 |
|
| 126 | <code>$data = array(<br />
|
| 127 | 'title' => 'My Title',<br />
|
| 128 | 'heading' => 'My Heading'<br />
|
| 129 | 'message' => 'My Message'<br />
|
| 130 | );<br />
|
| 131 | <br />
|
| 132 | $this->load->view('blogview', <var>$data</var>);</code>
|
| 133 |
|
| 134 | <p>And here's an example using an object:</p>
|
| 135 |
|
| 136 | <code>$data = new Someclass();<br />
|
| 137 | $this->load->view('blogview', <var>$data</var>);</code>
|
| 138 |
|
| 139 | <p>Note: If you use an object, the class variables will be turned into array elements.</p>
|
| 140 |
|
| 141 |
|
| 142 | <p>Let's try it with your controller file. Open it add this code:</p>
|
| 143 |
|
| 144 | <textarea class="textarea" style="width:100%" cols="50" rows="14">
|
| 145 | <?php
|
| 146 | class Blog extends Controller {
|
| 147 |
|
| 148 | function index()
|
| 149 | {
|
| 150 | $data['title'] = "My Real Title";
|
| 151 | $data['heading'] = "My Real Heading";
|
| 152 |
|
| 153 | $this->load->view('blogview', $data);
|
| 154 | }
|
| 155 | }
|
| 156 | ?>
|
| 157 | </textarea>
|
| 158 |
|
| 159 |
|
| 160 | <p>Now open your view file and change the text to variables that correspond to the array keys in your data:</p>
|
| 161 |
|
| 162 |
|
| 163 | <textarea class="textarea" style="width:100%" cols="50" rows="10">
|
| 164 | <html>
|
| 165 | <head>
|
| 166 | <title><?=$title;?></title>
|
| 167 | </head>
|
| 168 | <body>
|
| 169 | <h1><?=$heading;?></h1>
|
| 170 | </body>
|
| 171 | </html>
|
| 172 | </textarea>
|
| 173 |
|
| 174 | <p>Then load the page at the URL you've been using and you should see the variables replaced.</p>
|
| 175 |
|
| 176 | <p><strong>Note:</strong> Youl'll notice that in the example above we are using PHP's alternative syntax. If you
|
| 177 | are not familiar with it you can read about it <a href="alternative_php.html">here</a>.</p>
|
| 178 |
|
| 179 | <h2>Creating Loops</h2>
|
| 180 |
|
| 181 | <p>The data array you pass to your view files is not limited to simple variables. You can
|
| 182 | pass multi dimensional arrays, which can be looped to generate multiple rows. For example, if you
|
| 183 | pull data from your database it will typically be in the form of a multi-dimensional array.</p>
|
| 184 |
|
| 185 | <p>Here's a simple example. Add this to your controller:</p>
|
| 186 |
|
| 187 | <textarea class="textarea" style="width:100%" cols="50" rows="17">
|
| 188 | <?php
|
| 189 | class Blog extends Controller {
|
| 190 |
|
| 191 | function index()
|
| 192 | {
|
| 193 | $data['todo_list'] = array('Clean House', 'Call Mom', 'Run Errands');
|
| 194 |
|
| 195 | $data['title'] = "My Real Title";
|
| 196 | $data['heading'] = "My Real Heading";
|
| 197 |
|
| 198 | $this->load->view('blogview', $data);
|
| 199 | }
|
| 200 | }
|
| 201 | ?>
|
| 202 | </textarea>
|
| 203 |
|
| 204 |
|
| 205 | <p>Now open your view file and create a loop:</p>
|
| 206 |
|
| 207 |
|
| 208 | <textarea class="textarea" style="width:100%" cols="50" rows="24">
|
| 209 | <html>
|
| 210 | <head>
|
| 211 | <title><?=$title;?></title>
|
| 212 | </head>
|
| 213 | <body>
|
| 214 | <h1><?=$heading;?></h1>
|
| 215 |
|
| 216 | <h3>My Todo List</h3>
|
| 217 |
|
| 218 | <ul>
|
| 219 | <?php foreach($todo_list as $item):?>
|
| 220 |
|
| 221 | <li><?=$item;?></li>
|
| 222 |
|
| 223 | <?php endforeach;?>
|
| 224 | </ul>
|
| 225 |
|
| 226 |
|
| 227 | </body>
|
| 228 | </html>
|
| 229 | </textarea>
|
| 230 |
|
| 231 |
|
| 232 |
|
| 233 | </div>
|
| 234 | <!-- END CONTENT -->
|
| 235 |
|
| 236 |
|
| 237 | <div id="footer">
|
| 238 | <p>
|
| 239 | Previous Topic: <a href="controllers.html">Controllers</a>
|
| 240 | ·
|
| 241 | <a href="#top">Top of Page</a> ·
|
| 242 | <a href="../index.html">User Guide Home</a> ·
|
| 243 | Next Topic: <a href="models.html">Models</a>
|
| 244 | <p>
|
| 245 | <p><a href="http://www.codeigniter.com">Code Igniter</a> · Copyright © 2006 · <a href="http://www.pmachine.com">pMachine, Inc.</a></p>
|
| 246 | </div>
|
| 247 |
|
| 248 | </body>
|
| 249 | </html> |