summaryrefslogtreecommitdiffstats
path: root/user_guide/tutorial/static_pages.html
blob: 6a554bbff98495c55c8eacbe6a9a2f3ea8f64b19 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CodeIgniter Features : CodeIgniter User Guide</title>

<style type='text/css' media='all'>@import url('../userguide.css');</style>
<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />

<script type="text/javascript" src="../nav/nav.js"></script>
<script type="text/javascript" src="../nav/prototype.lite.js"></script>
<script type="text/javascript" src="../nav/moo.fx.js"></script>
<script type="text/javascript" src="../nav/user_guide_menu.js"></script>

<meta http-equiv='expires' content='-1' />
<meta http-equiv= 'pragma' content='no-cache' />
<meta name='robots' content='all' />
<meta name='author' content='ExpressionEngine Dev Team' />
<meta name='description' content='CodeIgniter User Guide' />

</head>
<body>

<!-- START NAVIGATION -->
<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
<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>
<div id="masthead">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td><h1>CodeIgniter User Guide Version 2.1.2</h1></td>
<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
</tr>
</table>
</div>
<!-- END NAVIGATION -->


<!-- START BREADCRUMB -->
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td id="breadcrumb">
<a href="http://codeigniter.com/">CodeIgniter Home</a> &nbsp;&#8250;&nbsp;
<a href="../index.html">User Guide Home</a> &nbsp;&#8250;&nbsp;
<a href="index.html">Tutorial</a> &nbsp;&#8250;&nbsp;
Static pages
</td>
<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>
</tr>
</table>
<!-- END BREADCRUMB -->

<br clear="all" />


<!-- START CONTENT -->
<div id="content">


<h1>Tutorial &minus; Static pages</h1>

<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>

<p>The first thing you're going to do is set up a <strong>controller</strong> to handle static pages.
A controller is simply a class that helps delegate work. It is the glue of your
web application.</p>

<p>For example, when a call is made to: <code>http://example.com/news/latest/10</code> We might imagine
that there is a controller named &quot;news&quot;. The method being called on news
would be &quot;latest&quot;. The news method's job could be to grab 10
news items, and render them on the page. Very often in MVC, you'll see URL
patterns that match: <code>http://example.com/[controller-class]/[controller-method]/[arguments]</code>
As URL schemes become more complex, this may change. But for now, this is all we will need to know.</p>

<p>Create a file at <dfn>application/controllers/pages.php</dfn> with the following code.</p>

<textarea class="textarea" style="width:100%" cols="50" rows="10">
&lt;?php

class Pages extends CI_Controller {

	public function view($page = 'home')
	{

	}
}
</textarea>

<p>You have created a class named &quot;pages&quot;, with a view method that accepts one argument named <var>$page</var>.
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
(<dfn>system/core/Controller.php</dfn>).</p>

<p>The <strong>controller is what will become the center of every request</strong> to your web application.
In very technical CodeIgniter discussions, it may be referred to as the <em>super object</em>.
Like any php class, you refer to it within your controllers as <var>$this</var>.
Referring to <var>$this</var> is how you will load libraries, views, and generally
command the framework.</p>

<p>Now you've created your first method, it's time to make some basic page templates.
We will be creating two &quot;views&quot; (page templates) that act as our page footer and header.</p>

<p>Create the header at <dfn>application/views/templates/header.php</dfn> and add the following code.</p>

<textarea class="textarea" style="width:100%" cols="50" rows="8">
<html>
<head>
	<title><?php echo $title ?> - CodeIgniter 2 Tutorial</title>
</head>
<body>
	<h1>CodeIgniter 2 Tutorial</h1>
	
</textarea>

<p>The header contains the basic HTML code that you'll want to display before loading the main view, together with a heading. 
It will also output the <var>$title</var> variable, which we'll define later in the controller.
Now create a footer at <dfn>application/views/templates/footer.php</dfn> that includes the following code:</p>
	
<textarea class="textarea" style="width:100%" cols="50" rows="4">
<strong>&#38;copy; 2011</strong>	
</body>
</html>
</textarea>

<h2>Adding logic to the controller</h2>

<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.
The static page templates will be located in the <dfn>application/views/pages/</dfn> directory.</p>

<p>In that directory, create two files named <dfn>home.php</dfn> and <dfn>about.php</dfn>. 
Within those files, type some text &minus; anything you'd like &minus; and save them. 
If you like to be particularly un-original, try &quot;Hello World!&quot;.</p>

<p>In order to load those pages, you'll have to check whether the requested page actually exists:</p>

<pre>
public function view($page = 'home')
{
			
	if ( ! file_exists('application/views/pages/'.$page.'.php'))
	{
		// Whoops, we don't have a page for that!
		show_404();
	}
	
	$data['title'] = ucfirst($page); // Capitalize the first letter
	
	$this->load->view('templates/header', $data);
	$this->load->view('pages/'.$page, $data);
	$this->load->view('templates/footer', $data);

}
</pre>

<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>

<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>

<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>

<p>The last thing that has to be done is loading the views in the order they should be displayed.
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>
	
<h2>Routing</h2>

<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>

<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:
<code>http://example.com/[controller-class]/[controller-method]/[arguments]</code></p>

<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>
	
<pre>
$route['default_controller'] = 'pages/view';
$route['(:any)'] = 'pages/view/$1';
</pre>

<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
(left-side) mapped to a controller and method name separated by slashes (right-side).
When a request comes in, CodeIgniter looks for the first match, and calls the appropriate controller and method, possibly with arguments.</p>

<p>More information about routing can be found in the URI Routing <a href="../general/routing.html">documentation</a>.</p>

<p>Here, the second rule in the <var>$routes</var> array matches <strong>any</strong> request using the wildcard string <dfn>(:any)</dfn>.
and passes the parameter to the view() method of the pages class.</p>

<p>Now visit <dfn>index.php/about</dfn>. Did it get routed correctly to the <var>view()</var> method
in the pages controller? Awesome!</p>

</div>
<!-- END CONTENT -->


<div id="footer">
<p>
Previous Topic:&nbsp;&nbsp;<a href="index.html">Introduction</a>
&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
Next Topic:&nbsp;&nbsp;<a href="news_section.html">News section</a>
</p>
<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>
</div>

</body>
</html>