video/user_guide/tutorial/static_pages.html

   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>CodeIgniter Features : 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>
  31 <td><h1>CodeIgniter User Guide Version 2.1.3</h1></td>
  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> &nbsp;&#8250;&nbsp;
  44 <a href="../index.html">User Guide Home</a> &nbsp;&#8250;&nbsp;
  45 <a href="index.html">Tutorial</a> &nbsp;&#8250;&nbsp;
  46 Static pages
  47 </td>
  48 <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&nbsp; <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" />&nbsp;<input type="submit" class="submit" name="sa" value="Go" /></form></td>
  49 </tr>
  50 </table>
  51 <!-- END BREADCRUMB -->
  52
  53 <br clear="all" />
  54
  55
  56 <!-- START CONTENT -->
  57 <div id="content">
  58
  59
  60 <h1>Tutorial &minus; Static pages</h1>
  61
  62 <p class="important"><strong>Note:</strong> This tutorial assumes you've downloaded CodeIgniter and <a href="../installation/index.html">installed the framework</a> in your development environment.</p>
  63
  64 <p>The first thing you're going to do is set up a <strong>controller</strong> to handle static pages.
  65 A controller is simply a class that helps delegate work. It is the glue of your
  66 web application.</p>
  67
  68 <p>For example, when a call is made to: <code>http://example.com/news/latest/10</code> We might imagine
  69 that there is a controller named &quot;news&quot;. The method being called on news
  70 would be &quot;latest&quot;. The news method's job could be to grab 10
  71 news items, and render them on the page. Very often in MVC, you'll see URL
  72 patterns that match: <code>http://example.com/[controller-class]/[controller-method]/[arguments]</code>
  73 As URL schemes become more complex, this may change. But for now, this is all we will need to know.</p>
  74
  75 <p>Create a file at <dfn>application/controllers/pages.php</dfn> with the following code.</p>
  76
  77 <textarea class="textarea" style="width:100%" cols="50" rows="10">
  78 &lt;?php
  79
  80 class Pages extends CI_Controller {
  81
  82         public function view($page = 'home')
  83         {
  84
  85         }
  86 }
  87 </textarea>
  88
  89 <p>You have created a class named &quot;pages&quot;, with a view method that accepts one argument named <var>$page</var>.
  90 The pages class is extending the CI_Controller class.
  91 This means that the new pages class can access the methods and variables defined in the CI_Controller class
  92 (<dfn>system/core/Controller.php</dfn>).</p>
  93
  94 <p>The <strong>controller is what will become the center of every request</strong> to your web application.
  95 In very technical CodeIgniter discussions, it may be referred to as the <em>super object</em>.
  96 Like any php class, you refer to it within your controllers as <var>$this</var>.
  97 Referring to <var>$this</var> is how you will load libraries, views, and generally
  98 command the framework.</p>
  99
 100 <p>Now you've created your first method, it's time to make some basic page templates.
 101 We will be creating two &quot;views&quot; (page templates) that act as our page footer and header.</p>
 102
 103 <p>Create the header at <dfn>application/views/templates/header.php</dfn> and add the following code.</p>
 104
 105 <textarea class="textarea" style="width:100%" cols="50" rows="8">
 106 <html>
 107 <head>
 108         <title><?php echo $title ?> - CodeIgniter 2 Tutorial</title>
 109 </head>
 110 <body>
 111         <h1>CodeIgniter 2 Tutorial</h1>
 112
 113 </textarea>
 114
 115 <p>The header contains the basic HTML code that you'll want to display before loading the main view, together with a heading.
 116 It will also output the <var>$title</var> variable, which we'll define later in the controller.
 117 Now create a footer at <dfn>application/views/templates/footer.php</dfn> that includes the following code:</p>
 118
 119 <textarea class="textarea" style="width:100%" cols="50" rows="4">
 120 <strong>&#38;copy; 2011</strong>
 121 </body>
 122 </html>
 123 </textarea>
 124
 125 <h2>Adding logic to the controller</h2>
 126
 127 <p>Earlier you set up a controller with a view() method. The method accepts one parameter, which is the name of the page to be loaded.
 128 The static page templates will be located in the <dfn>application/views/pages/</dfn> directory.</p>
 129
 130 <p>In that directory, create two files named <dfn>home.php</dfn> and <dfn>about.php</dfn>.
 131 Within those files, type some text &minus; anything you'd like &minus; and save them.
 132 If you like to be particularly un-original, try &quot;Hello World!&quot;.</p>
 133
 134 <p>In order to load those pages, you'll have to check whether the requested page actually exists:</p>
 135
 136 <pre>
 137 public function view($page = 'home')
 138 {
 139
 140         if ( ! file_exists('application/views/pages/'.$page.'.php'))
 141         {
 142                 // Whoops, we don't have a page for that!
 143                 show_404();
 144         }
 145
 146         $data['title'] = ucfirst($page); // Capitalize the first letter
 147
 148         $this->load->view('templates/header', $data);
 149         $this->load->view('pages/'.$page, $data);
 150         $this->load->view('templates/footer', $data);
 151
 152 }
 153 </pre>
 154
 155 <p>Now, when the page does exist, it is loaded, including the header and footer, and displayed to the user. If the page doesn't exist, a "404 Page not found" error is shown.</p>
 156
 157 <p>The first line in this method checks whether the page actually exists. PHP's native <var>file_exists()</var> function is used to check whether the file is where it's expected to be. <var>show_404()</var> is a built-in CodeIgniter function that renders the default error page.</p>
 158
 159 <p>In the header template, the <var>$title</var> variable was used to customize the page title. The value of title is defined in this method, but instead of assigning the value to a variable, it is assigned to the title element in the <var>$data</var> array.</p>
 160
 161 <p>The last thing that has to be done is loading the views in the order they should be displayed.
 162 The second parameter in the <var>view()</var> method is used to pass values to the view. Each value in the <var>$data</var> array is assigned to a variable with the name of its key. So the value of <var>$data['title']</var> in the controller is equivalent to $title in the view.<p>
 163
 164 <h2>Routing</h2>
 165
 166 <p>The controller is now functioning! Point your browser to <dfn>[your-site-url]index.php/pages/view</dfn> to see your page. When you visit <dfn>index.php/pages/view/about</dfn> you'll see the about page, again including the header and footer.</p>
 167
 168 <p>Using custom routing rules, you have the power to map any URI to any controller and method, and break free from the normal convention:
 169 <code>http://example.com/[controller-class]/[controller-method]/[arguments]</code></p>
 170
 171 <p>Let's do that. Open the routing file located at <dfn>application/config/routes.php</dfn> and add the following two lines. Remove all other code that sets any element in the <var>$route</var> array.</p>
 172
 173 <pre>
 174 $route['default_controller'] = 'pages/view';
 175 $route['(:any)'] = 'pages/view/$1';
 176 </pre>
 177
 178 <p>CodeIgniter reads its routing rules from top to bottom and routes the request to the first matching rule. Each rule is a regular expression
 179 (left-side) mapped to a controller and method name separated by slashes (right-side).
 180 When a request comes in, CodeIgniter looks for the first match, and calls the appropriate controller and method, possibly with arguments.</p>
 181
 182 <p>More information about routing can be found in the URI Routing <a href="../general/routing.html">documentation</a>.</p>
 183
 184 <p>Here, the second rule in the <var>$routes</var> array matches <strong>any</strong> request using the wildcard string <dfn>(:any)</dfn>.
 185 and passes the parameter to the view() method of the pages class.</p>
 186
 187 <p>Now visit <dfn>index.php/about</dfn>. Did it get routed correctly to the <var>view()</var> method
 188 in the pages controller? Awesome!</p>
 189
 190 </div>
 191 <!-- END CONTENT -->
 192
 193
 194 <div id="footer">
 195 <p>
 196 Previous Topic:&nbsp;&nbsp;<a href="index.html">Introduction</a>
 197 &nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
 198 <a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
 199 <a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
 200 Next Topic:&nbsp;&nbsp;<a href="news_section.html">News section</a>
 201 </p>
 202 <p><a href="http://codeigniter.com">CodeIgniter</a> &nbsp;&middot;&nbsp; Copyright &#169; 2006 - 2012 &nbsp;&middot;&nbsp; <a href="http://ellislab.com/">EllisLab, Inc.</a></p>
 203 </div>
 204
 205 </body>
 206 </html>