video/user_guide/tutorial/hard_coded_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 Features
  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&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>
  48 </tr>
  49 </table>
  50 <!-- END BREADCRUMB -->
  51
  52 <br clear="all" />
  53
  54
  55 <!-- START CONTENT -->
  56 <div id="content">
  57
  58
  59 <h1>Tutorial - Hard coded pages</h1>
  60
  61 <p>The first thing we're going to do is setting up a controller to handle our hard coded pages. A controller is a class with a collection of methods that represent the different actions you can perform on a certain object. In our case, we want to be able to view a page.</p>
  62
  63 <p class="important"><strong>Note:</strong> This tutorial assumes you've downloaded CodeIgniter and installed the framework in your development environment.</p>
  64
  65 <p>Create a file at <dfn>application/controllers/pages.php</dfn> with the following code.</p>
  66
  67 <textarea class="textarea" style="width:100%" cols="50" rows="9">
  68 &lt;?php
  69 class Pages extends CI_Controller {
  70
  71         public function view($page = 'home')
  72         {
  73
  74         }
  75 }
  76 </textarea>
  77
  78 <p>If you're familiar with PHP classes you see that we create a Pages class with a view method that accepts one parameter, <var>$page</var>. Another interesting observation is that the Pages class is extending the CI_Controller class. This means that the new Pages class can access the methods and variables defined in the CI_Controller class. When you look at this class in <dfn>system/core/controller.php</dfn> you can see this class is doing something really important; assigning an instance from the CodeIgniter super object to the <var>$this</var> object. In most of your code, <var>$this</var> is the object you will use to interact with the framework.</p>
  79
  80 <p>Now we've created our first method, it is time to do some basic templating. For this tutorial, we will be creating two views to acts as our footer and header. Let's create our header at <dfn>application/views/templates/header.php</dfn> and ad the following code.</p>
  81
  82 <textarea class="textarea" style="width:100%" cols="50" rows="8">
  83 <html>
  84 <head>
  85         <title><?php echo $title ?> - CodeIgniter 2 Tutorial</title>
  86 </head>
  87 <body>
  88         <h1>CodeIgniter 2 Tutorial</h1>
  89
  90 </textarea>
  91
  92 <p>Our header doesn't do anything exciting. It contains the basic HTML code that we will want to display before loading the main view. You can also see that we echo the <var>$title</var> variable, which we didn't define. We will set this variable in the Pages controller a bit later. Let's go ahead and create a footer at <dfn>application/views/templates/footer.php</dfn> that includes the following code.</p>
  93
  94 <textarea class="textarea" style="width:100%" cols="50" rows="4">
  95 <strong>&copy; 2011</strong>
  96 </body>
  97 </html>
  98 </textarea>
  99
 100 <h2>Adding logic to the controller</h2>
 101
 102 <p>Now we've set up the basics so we can finally do some real programming. Earlier we set up our controller with a view method. Because we don't want to write a separate method for every page, we made the view method accept one parameter, the name of the page. These hard coded pages will be located in <dfn>application/views/pages/</dfn>. Create two files in this directory named <dfn>home.php</dfn> and <dfn>about.php</dfn> and put in some HTML content.</p>
 103
 104 <p>In order to load these pages we'll have to check whether these page actually exists. When the page does exist, we load the view for that pages, including the header and footer and display it to the user. If it doesn't, we show a "404 Page not found" error.</p>
 105
 106 <textarea class="textarea" style="width:100%" cols="50" rows="16">
 107 public function view($page = 'home')
 108 {
 109
 110         if ( ! file_exists('application/views/pages/' . $page . EXT))
 111         {
 112                 show_404();
 113         }
 114
 115         $data['title'] = ucfirst($page);
 116
 117         $this->load->view('templates/header', $data);
 118         $this->load->view('pages/'.$page);
 119         $this->load->view('templates/footer');
 120 }
 121 </textarea>
 122
 123 <p>The first thing we do is checking whether the page we're looking for does actually exist. We use PHP's native file_exists() to do this check and pass the path where the file is supposed to be. Next is the function show_404(), a CodeIgniter function that renders the default error page and sets the appropriate HTTP headers.</p>
 124
 125 <p>In the header template you saw we were using the <var>$title</var> variable to customize our page title. This is where we define the title, but instead of assigning the value to a variable, we assign it to the title element in the <var>$data</var> array. The last thing we need to do is loading the views in the order we want them to be displayed. We also pass the <var>$data</var> array to the header view to make its elements available in the header view file.<p>
 126
 127 <h2>Routing</h2>
 128
 129 <p>Actually, our controller is already functioning. Point your browser to <dfn>index.php/pages/view</dfn> to see your homepage. When you visit <dfn>index.php/pages/view/about</dfn> you will see the about page, again including your header and footer. Now we're going to get rid of the pages/view part in our URI. As you may have seen, CodeIgniter does its routing by the class, method and parameter, separated by slashes.</p>
 130
 131 <p>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>
 132
 133 <textarea class="textarea" style="width:100%" cols="50" rows="3">
 134 $route['(:any)'] = 'pages/view/$1';
 135 $route['default_controller'] = 'pages/view';
 136 </textarea>
 137
 138 <p>CodeIgniter reads its routing rules from top to bottom and routes the request to the first matching rule. These routes are stored in the <var>$route</var> array where the keys represent the incoming request and the value the path to the method, as described above.</p>
 139
 140 <p>The first rule in our <var>$routes</var> array matches every request - using the wildcard operator <dfn>(:any)</dfn> - and passes the value to the view method of the pages class we created earlier. The default controller route makes sure every request to the root goes to the view method as well, which has the first parameter set to 'home' by default.</p>
 141
 142 </div>
 143 <!-- END CONTENT -->
 144
 145
 146 <div id="footer">
 147 <p>
 148 Previous Topic:&nbsp;&nbsp;<a href="cheatsheets.html">CodeIgniter Cheatsheets</a>
 149 &nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
 150 <a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
 151 <a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
 152 Next Topic:&nbsp;&nbsp;<a href="appflow.html">Application Flow Chart</a>
 153 </p>
 154 <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>
 155 </div>
 156
 157 </body>
 158 </html>