diff options
| author | Joël Cox <joel@joelcox.nl> | 2011-10-09 18:39:39 +0200 |
|---|---|---|
| committer | Joël Cox <joel@joelcox.nl> | 2011-10-09 18:39:39 +0200 |
| commit | f4fb1db458fab52d0493ead52c9ea7e01206eaa7 (patch) | |
| tree | c549600f342f4d3f0df75a2f2f7c265be0f1cc72 /user_guide_src/source/tutorial | |
| parent | c4dd200c1155a118afa32cd91d9bd67bc243f83a (diff) | |
Moved tutorial to new user guide directory.
Diffstat (limited to 'user_guide_src/source/tutorial')
| -rw-r--r-- | user_guide_src/source/tutorial/conclusion.html | 91 | ||||
| -rw-r--r-- | user_guide_src/source/tutorial/create_news_items.html | 179 | ||||
| -rw-r--r-- | user_guide_src/source/tutorial/hard_coded_pages.html | 158 | ||||
| -rw-r--r-- | user_guide_src/source/tutorial/index.html | 101 | ||||
| -rw-r--r-- | user_guide_src/source/tutorial/news_section.html | 230 | ||||
| -rw-r--r-- | user_guide_src/source/tutorial/static_pages.html | 206 |
6 files changed, 965 insertions, 0 deletions
diff --git a/user_guide_src/source/tutorial/conclusion.html b/user_guide_src/source/tutorial/conclusion.html new file mode 100644 index 000000000..ccf89175f --- /dev/null +++ b/user_guide_src/source/tutorial/conclusion.html @@ -0,0 +1,91 @@ +<!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.0.3</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> › +<a href="../index.html">User Guide Home</a> › +<a href="index.html">Tutorial</a> › +Conclusion +</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 <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> +</tr> +</table> +<!-- END BREADCRUMB --> + +<br clear="all" /> + + +<!-- START CONTENT --> +<div id="content"> + + +<h1>Tutorial - Conclusion</h1> + +<p>This tutorial did not cover all of the things you might expect of a full-fledged content management system, but it introduced you to the more important topics of routing, writing controllers, and models. We hope this tutorial gave you an insight into some of CodeIgniter's basic design patterns, which you can expand upon.</p> + +<p>Now that you've completed this tutorial, we recommend you check out the rest of the documentation. CodeIgniter is often praised because of its comprehensive documentation. Use this to your advantage and read the "Introduction" and "General Topics" sections thoroughly. You should read the class and helper references when needed.</p> + +<p>Every intermediate PHP programmer should be able to get the hang of CodeIgniter within a few days.</p> + +<p>If you still have questions about the framework or your own CodeIgniter code, you can:</p> +<ul> + <li>Check out our <a href="http://codeigniter.com/forums">forums</a></li> + <li>Visit our <a href="http://codeigniter.com/wiki/IRC">IRC chatroom</a></li> + <li>Explore the <a href="http://codeigniter.com/wiki/">Wiki</a></li> +</ul> + +</div> +<!-- END CONTENT --> + + +<div id="footer"> +<p> +Previous Topic: <a href="create_news_items.html">Create news items</a> + · +<a href="#top">Top of Page</a> · +<a href="../index.html">User Guide Home</a> · +Next Topic: <a href="../general/urls.html">CodeIgniter URLs</a> +</p> +<p><a href="http://codeigniter.com">CodeIgniter</a> · Copyright © 2006 - 2011 · <a href="http://ellislab.com/">EllisLab, Inc.</a></p> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/user_guide_src/source/tutorial/create_news_items.html b/user_guide_src/source/tutorial/create_news_items.html new file mode 100644 index 000000000..48c82c799 --- /dev/null +++ b/user_guide_src/source/tutorial/create_news_items.html @@ -0,0 +1,179 @@ +<!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.0.3</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> › +<a href="../index.html">User Guide Home</a> › +<a href="index.html">Tutorial</a> › +Create news items +</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 <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> +</tr> +</table> +<!-- END BREADCRUMB --> + +<br clear="all" /> + + +<!-- START CONTENT --> +<div id="content"> + + +<h1>Tutorial - Create news items</h1> + +<p>You now know how you can read data from a database using CodeIgnite, but you haven't written any information to the database yet. In this section you'll expand your news controller and model created earlier to include this functionality.</p> + +<h2>Create a form</h2> + +<p>To input data into the database you need to create a form where you can input the information to be stored. This means you'll be needing a form with two fields, one for the title and one for the text. You'll derive the slug from our title in the model. Create the new view at <dfn>application/views/news/create.php</dfn>.</p> + +<textarea class="textarea" style="width:100%" cols="50" rows="16"> +<h2>Create a news item</h2> + +<?php echo validation_errors(); ?> + +<?php echo form_open('news/create') ?> + + <label for="title">Title</label> + <input type="input" name="title" /><br /> + + <label for="text">Text</label> + <textarea name="text"></textarea><br /> + + <input type="submit" name="submit" value="Create news item" /> + +</form> +</textarea> + +<p>There are only two things here that probably look unfamiliar to you: the <dfn>form_open()</dfn> function and the <dfn>validation_errors()</dfn> function.</p> + +<p>The first function is provided by the <a href="../helpers/form_helper.html">form helper</a> and renders the form element and adds extra functionality, like adding a hidden <a href="../libraries/security.html">CSFR prevention field</a>. The latter is used to report errors related to form validation.</p> + +<p>Go back to your news controller. You're going to do two things here, check whether the form was submitted and whether the submitted data passed the validation rules. You'll use the <a href="../libraries/form_validation.html">form validation</a> library to do this.</p> + +<pre> +public function create() +{ + $this->load->helper('form'); + $this->load->library('form_validation'); + + $data['title'] = 'Create a news item'; + + $this->form_validation->set_rules('title', 'Title', 'required'); + $this->form_validation->set_rules('text', 'text', 'required'); + + if ($this->form_validation->run() === FALSE) + { + $this->load->view('templates/header', $data); + $this->load->view('news/create'); + $this->load->view('templates/footer'); + + } + else + { + $this->news_model->set_news(); + $this->load->view('news/success'); + } +} +</pre> + +<p>The code above adds a lot of functionality. The first few lines load the form helper and the form validation library. After that, rules for the form validation are set. The <var>set_rules()</var> method takes three arguments; the name of the input field, the name to be used in error messages, and the rule. In this case the title and text fields are required.</p> + +<p>CodeIgniter has a powerful form validation library as demonstrated above. You can read <a href="../libraries/form_validation.html">more about this library here</a>.</p> + +<p>Continuing down, you can see a condition that checks whether the form validation ran successfully. If it did not, the form is displayed, if it was submitted <strong>and</strong> passed all the rules, the model is called. After this, a view is loaded to display a success message. Create a view at <dfn>application/view/news/success.php</dfn> and write a success message.</p> + +<h2>Model</h2> + +<p>The only thing that remains is writing a method that writes the data to the database. You'll use the Active Record class to insert the information and use the input library to get the posted data. Open up the model created earlier and add the following:</p> + +<pre> +public function set_news() +{ + $this->load->helper('url'); + + $slug = url_title($this->input->post('title'), 'dash', TRUE); + + $data = array( + 'title' => $this->input->post('title'), + 'slug' => $slug, + 'text' => $this->input->post('text') + ); + + return $this->db->insert('news', $data); +} +</pre> + +<p>This new method takes care of inserting the news item into the database. The third line contains a new function, <dfn>url_title()</dfn>. This function - provided by the <a href="../helpers/url_helper.html">URL helper</a> - strips down the string you pass it, replacing all spaces by dashes (-) and makes sure everything is in lowercase characters. This leaves you with a nice slug, perfect for creating URIs.</p> + +<p>Let's continue with preparing the record that is going to be inserted later, inside the <var>$data</var> array. Each element corresponds with a column in the database table created earlier. You might notice a new method here, namely the <dfn>post()</dfn> method from the <a href="../libraries/input.html">input library</a>. This method makes sure the data is sanitized, protecting you from nasty attacks from others. The input library is loaded by default. At last, you insert our <var>$data</var> array into our database.</p> + +<h2>Routing</h2> + +<p>Before you can start adding news items into your CodeIgniter application you have to add an extra rule to <dfn>config/routes.php</dfn> file. Make sure your file contains the following. This makes sure CodeIgniter sees 'create' as a method instead of a news item's slug.</p> + +<pre> +$route['news/create'] = 'news/create'; +$route['news/(:any)'] = 'news/view/$1'; +$route['news'] = 'news'; +$route['(:any)'] = 'pages/view/$1'; +$route['default_controller'] = 'pages/view'; +</pre> + +<p>Now point your browser to your local development environment where you installed CodeIgniter and add <dfn>index.php/news/create</dfn> to the URL. Congratulations, you just created your first CodeIgniter application! Add some news and check out the different pages you made.</p> + +</div> +<!-- END CONTENT --> + + +<div id="footer"> +<p> +Previous Topic: <a href="news_section.html">News section</a> + · +<a href="#top">Top of Page</a> · +<a href="../index.html">User Guide Home</a> · +Next Topic: <a href="conclusion.html">Conclusion</a> +</p> +<p><a href="http://codeigniter.com">CodeIgniter</a> · Copyright © 2006 - 2011 · <a href="http://ellislab.com/">EllisLab, Inc.</a></p> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/user_guide_src/source/tutorial/hard_coded_pages.html b/user_guide_src/source/tutorial/hard_coded_pages.html new file mode 100644 index 000000000..408634a78 --- /dev/null +++ b/user_guide_src/source/tutorial/hard_coded_pages.html @@ -0,0 +1,158 @@ +<!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.0.3</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> › +<a href="../index.html">User Guide Home</a> › +Features +</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 <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> +</tr> +</table> +<!-- END BREADCRUMB --> + +<br clear="all" /> + + +<!-- START CONTENT --> +<div id="content"> + + +<h1>Tutorial - Hard coded pages</h1> + +<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> + +<p class="important"><strong>Note:</strong> This tutorial assumes you've downloaded CodeIgniter and installed the framework in your development environment.</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="9"> +<?php +class Pages extends CI_Controller { + + public function view($page = 'home') + { + + } +} +</textarea> + +<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> + +<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> + +<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>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> + +<textarea class="textarea" style="width:100%" cols="50" rows="4"> +<strong>© 2011</strong> +</body> +</html> +</textarea> + +<h2>Adding logic to the controller</h2> + +<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> + +<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> + +<textarea class="textarea" style="width:100%" cols="50" rows="16"> +public function view($page = 'home') +{ + + if ( ! file_exists('application/views/pages/' . $page . EXT)) + { + show_404(); + } + + $data['title'] = ucfirst($page); + + $this->load->view('templates/header', $data); + $this->load->view('pages/'.$page); + $this->load->view('templates/footer'); +} +</textarea> + +<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> + +<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> + +<h2>Routing</h2> + +<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> + +<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> + +<textarea class="textarea" style="width:100%" cols="50" rows="3"> +$route['(:any)'] = 'pages/view/$1'; +$route['default_controller'] = 'pages/view'; +</textarea> + +<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> + +<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> + +</div> +<!-- END CONTENT --> + + +<div id="footer"> +<p> +Previous Topic: <a href="cheatsheets.html">CodeIgniter Cheatsheets</a> + · +<a href="#top">Top of Page</a> · +<a href="../index.html">User Guide Home</a> · +Next Topic: <a href="appflow.html">Application Flow Chart</a> +</p> +<p><a href="http://codeigniter.com">CodeIgniter</a> · Copyright © 2006 - 2011 · <a href="http://ellislab.com/">EllisLab, Inc.</a></p> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/user_guide_src/source/tutorial/index.html b/user_guide_src/source/tutorial/index.html new file mode 100644 index 000000000..4f665fe0a --- /dev/null +++ b/user_guide_src/source/tutorial/index.html @@ -0,0 +1,101 @@ +<!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.0.3</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> › +<a href="../index.html">User Guide Home</a> › +<a href="index.html">Tutorial</a> › +Introduction +</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 <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> +</tr> +</table> +<!-- END BREADCRUMB --> + +<br clear="all" /> + + +<!-- START CONTENT --> +<div id="content"> + + +<h1>Tutorial − Introduction</h1> + +<p>This tutorial is intended to introduce you to the CodeIgniter framework and the basic principles of MVC architecture. It will show you how a basic CodeIgniter application is constructed in step-by-step fashion.</p> + +<p>In this tutorial, you will be creating a <strong>basic news application</strong>. You will begin by writing the code that can load static pages. Next, you will create a news section that reads news items from a database. Finally, you'll add a form to create news items in the database.</p> + +<p>This tutorial will primarily focus on:</p> +<ul> +<li>Model-View-Controller basics</li> +<li>Routing basics</li> +<li>Form validation</li> +<li>Performing basic database queries using "Active Record"</li> +</ul> + +<p>The entire tutorial is split up over several pages, each explaining a small part of the functionality of the CodeIgniter framework. You'll go through the following pages:</p> +<ul> +<li>Introduction, this page, which gives you an overview of what to expect.</li> +<li><a href="static_pages.html">Static pages</a>, which will teach you the basics of controllers, views and routing.</li> +<li><a href="news_section.html">News section</a>, where you'll start using models and will be doing some basic database operations.</li> +<li><a href="create_news_items.html">Create news items</a>, which will introduce more advanced database operations and form validation.</li> +<li><a href="conclusion.html">Conclusion</a>, which will give you some pointers on further reading and other resources.</li> +</ul> + +<p>Enjoy your exploration of the CodeIgniter framework.</p> + +</div> +<!-- END CONTENT --> + + +<div id="footer"> +<p> +Previous Topic: <a href="../overview/goals.html">Goals</a> + · +<a href="#top">Top of Page</a> · +<a href="../index.html">User Guide Home</a> · +Next Topic: <a href="static_pages.html">Static pages</a> +</p> +<p><a href="http://codeigniter.com">CodeIgniter</a> · Copyright © 2006 - 2011 · <a href="http://ellislab.com/">EllisLab, Inc.</a></p> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/user_guide_src/source/tutorial/news_section.html b/user_guide_src/source/tutorial/news_section.html new file mode 100644 index 000000000..b2d883184 --- /dev/null +++ b/user_guide_src/source/tutorial/news_section.html @@ -0,0 +1,230 @@ +<!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.0.3</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> › +<a href="../index.html">User Guide Home</a> › +<a href="index.html">Tutorial</a> › +News section +</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 <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> +</tr> +</table> +<!-- END BREADCRUMB --> + +<br clear="all" /> + + +<!-- START CONTENT --> +<div id="content"> + + +<h1>Tutorial − News section</h1> + +<p>In the last section, we went over some basic concepts of the framework by writing a class that includes static pages. We cleaned up the URI by adding custom routing rules. Now it's time to introduce dynamic content and start using a database.</p> + +<h2>Setting up your model</h2> + +<p>Instead of writing database operations right in the controller, queries should be placed in a model, so they can easily be reused later. Models are the place where you retrieve, insert, and update information in your database or other data stores. They represent your data.</p> + +<p>Open up the <dfn>application/models</dfn> directory and create a new file called <dfn>news_model.php</dfn> and add the following code. Make sure you've configured your database properly as described <a href="../database/configuration.html">here</a>.</p> + +<pre> +<?php +class News_model extends CI_Model { + + public function __construct() + { + $this->load->database(); + } +} +</pre> + +<p>This code looks similar to the controller code that was used earlier. It creates a new model by extending CI_Model and loads the database library. This will make the database class available through the <var>$this->db</var> object.</p> + +<p>Before querying the database, a database schema has to be created. Connect to your database and run the SQL command below. Also add some seed records.</p> + +<pre> +CREATE TABLE news ( + id int(11) NOT NULL AUTO_INCREMENT, + title varchar(128) NOT NULL, + slug varchar(128) NOT NULL, + text text NOT NULL, + PRIMARY KEY (id), + KEY slug (slug) +); +</pre> + +<p>Now that the database and a model have been set up, you'll need a method to get all of our posts from our database. To do this, the database abstraction layer that is included with CodeIgniter — <a href="../database/active_record.html">Active Record</a> — is used. This makes it possible to write your 'queries' once and make them work on <a href="../general/requirements.html">all supported database systems</a>. Add the following code to your model.</p> + +<pre> +public function get_news($slug = FALSE) +{ + if ($slug === FALSE) + { + $query = $this->db->get('news'); + return $query->result_array(); + } + + $query = $this->db->get_where('news', array('slug' => $slug)); + return $query->row_array(); +} +</pre> + +<p>With this code you can perform two different queries. You can get all news records, or get a news item by its <a href="#" title="a URL friendly version of a string">slug</a>. You might have noticed that the <var>$slug</var> variable wasn't sanitized before running the query; Active Record does this for you.</p> + +<h2>Display the news</h2> + +<p>Now that the queries are written, the model should be tied to the views that are going to display the news items to the user. This could be done in our pages controller created earlier, but for the sake of clarity, a new "news" controller is defined. Create the new controller at <dfn>application/controllers/news.php</dfn>.</p> + +<pre> +<?php +class News extends CI_Controller { + + public function __construct() + { + parent::__construct(); + $this->load->model('news_model'); + } + + public function index() + { + $data['news'] = $this->news_model->get_news(); + } + + public function view($slug) + { + $data['news'] = $this->news_model->get_news($slug); + } +} +</pre> + +<p>Looking at the code, you may see some similarity with the files we created earlier. First, the "__construct" method: it calls the constructor of its parent class (<dfn>CI_Controller</dfn>) and loads the model, so it can be used in all other methods in this controller.</p> + +<p>Next, there are two methods to view all news items and one for a specific news item. You can see that the <var>$slug</var> variable is passed to the model's method in the second method. The model is using this slug to identify the news item to be returned.</p> + +<p>Now the data is retrieved by the controller through our model, but nothing is displayed yet. The next thing to do is passing this data to the views.</p> + +<pre> +public function index() +{ + $data['news'] = $this->news_model->get_news(); + $data['title'] = 'News archive'; + + $this->load->view('templates/header', $data); + $this->load->view('news/index', $data); + $this->load->view('templates/footer'); +} +</pre> + +<p>The code above gets all news records from the model and assigns it to a variable. The value for the title is also assigned to the <var>$data['title']</var> element and all data is passed to the views. You now need to create a view to render the news items. Create <dfn>application/views/news/index.php</dfn> and add the next piece of code.</p> + +<pre> +<?php foreach ($news as $news_item): ?> + + <h2><?php echo $news_item['title'] ?></h2> + <div id="main"> + <?php echo $news_item['text'] ?> + </div> + <p><a href="news/<?php echo $news_item['slug'] ?>">View article</a></p> + +<?php endforeach ?> +</pre> + +<p>Here, each news item is looped and displayed to the user. You can see we wrote our template in PHP mixed with HTML. If you prefer to use a template language, you can use CodeIgniter's <a href="../libraries/parser.html">Template Parser</a> class or a third party parser.</p> + +<p>The news overview page is now done, but a page to display individual news items is still absent. The model created earlier is made in such way that it can easily be used for this functionality. You only need to add some code to the controller and create a new view. Go back to the news controller and add the following lines to the file.</p> + +<pre> +public function view($slug) +{ + $data['news_item'] = $this->news_model->get_news($slug); + + if (empty($data['news_item'])) + { + show_404(); + } + + $data['title'] = $data['news_item']['title']; + + $this->load->view('templates/header', $data); + $this->load->view('news/view', $data); + $this->load->view('templates/footer'); +} +</pre> + +<p>Instead of calling the <var>get_news()</var> method without a parameter, the <var>$slug</var> variable is passed, so it will return the specific news item. The only things left to do is create the corresponding view at <dfn>application/views/news/view.php</dfn>. Put the following code in this file.</p> + +<pre> +<?php +echo '<h2>'.$news_item['title'].'</h2>'; +echo $news_item['text']; +</pre> + +<h2>Routing</h2> +<p>Because of the wildcard routing rule created earlier, you need need an extra route to view the controller that you just made. Modify your routing file (<dfn>application/config/routes.php</dfn>) so it looks as follows. This makes sure the requests reaches the news controller instead of going directly to the pages controller. The first line routes URI's with a slug to the view method in the news controller.</p> + +<pre> +$route['news/(:any)'] = 'news/view/$1'; +$route['news'] = 'news'; +$route['(:any)'] = 'pages/view/$1'; +$route['default_controller'] = 'pages/view'; +</pre> + +<p>Point your browser to your document root, followed by <dfn>index.php/news</dfn> and watch your news page.</p> + +</div> +<!-- END CONTENT --> + + +<div id="footer"> +<p> +Previous Topic: <a href="static_pages.html">Static pages</a> + · +<a href="#top">Top of Page</a> · +<a href="../index.html">User Guide Home</a> · +Next Topic: <a href="create_news_items.html">Create news items</a> +</p> +<p><a href="http://codeigniter.com">CodeIgniter</a> · Copyright © 2006 - 2011 · <a href="http://ellislab.com/">EllisLab, Inc.</a></p> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/user_guide_src/source/tutorial/static_pages.html b/user_guide_src/source/tutorial/static_pages.html new file mode 100644 index 000000000..26c8306e1 --- /dev/null +++ b/user_guide_src/source/tutorial/static_pages.html @@ -0,0 +1,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.0.3</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> › +<a href="../index.html">User Guide Home</a> › +<a href="index.html">Tutorial</a> › +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 <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> +</tr> +</table> +<!-- END BREADCRUMB --> + +<br clear="all" /> + + +<!-- START CONTENT --> +<div id="content"> + + +<h1>Tutorial − 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 "news". The method being called on news +would be "latest". 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"> +<?php + +class Pages extends CI_Controller { + + public function view($page = 'home') + { + + } +} +</textarea> + +<p>You have created a class named "pages", 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 "views" (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>&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 − anything you'd like − and save them. +If you like to be particularly un-original, try "Hello World!".</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: <a href="index.html">Introduction</a> + · +<a href="#top">Top of Page</a> · +<a href="../index.html">User Guide Home</a> · +Next Topic: <a href="news_section.html">News section</a> +</p> +<p><a href="http://codeigniter.com">CodeIgniter</a> · Copyright © 2006 - 2011 · <a href="http://ellislab.com/">EllisLab, Inc.</a></p> +</div> + +</body> +</html>
\ No newline at end of file |