Building a Todo List using Code Igniter
A Query7 reader requested this tutorial to be written. It’s aimed to be a general guide to build ’something’ using Code Igniter. It uses Models, Views, Controllers, Helpers and Libraries and will give you a good idea how Code Igniter works as a whole. I will be posting more advanced Code Igniter tutorials in the future.
Setup
Install and do some basic configuration (URL, database settings) of Code Igniter. If you don’t know how to do this, read here. Autoload the database library and url helper as we will be using them.
The user will be able to post new items and delete current items and the app itself will be made up of:
- One Controller – todo.php
- One Model – todo_model.php
- One View – todo_index.php
PHP4 Compatibility
Because Code Igniter supports both PHP4 and PHP5, you are forced to use PHP4 style OOP. Your constructor must be the same name as the class, and it needs to contain parent::Controller(); or parent::Model();
The naming conventions for controllers and models are very strict. The name of both class and constructor must be the same as the file name, but capitalized. In our case of our controller, the file name is todo.php and the name of the class and constructor is called Todo.
Model
The model in Code Igniter is a place where you write your application’s SQL queries (It doesn’t map your schema like in Django/RoR). In our application we specify 3 methods, which can then be called upon in the controller. You will notice we are using the Code Igniter database class but not Code Igniter’s full ORM. This is just personal preference. In get_all_todo_items() we call $q->result_array() . Think of it as an equivalent to mysql_fetch_array().
class Todo_model extends Model {
function Todo_model()
{
parent::Model();
}
function new_todo($content)
{
$date = date('l jS \of F Y h:i:s A');
$q = $this->db->query("INSERT INTO items (date,content) VALUES ('$date','$content')");
}
function get_all_todo_items()
{
$q = $this->db->query("SELECT id,date,content FROM items");
return $q->result_array();
}
function delete_todo_item($id)
{
$q = $this->db->query("DELETE FROM items WHERE id = '$id'");
}
}
Controller
/system/application/controllers/todo.php
You can also see in the Controller that we are loading the form helper and todo_model model. Notice there are no file extensions being used. In Code Igniter URLs are structured like: www.foo.com/ci/index.php/controller/method/. If no method is specified then Code Igniter will automatically run the index() method.
index_page()
We assign the results of get_all_todo_items() to $info['item'] . We then pass the $info array (which contains all of our todo items) to our view which we’ll create soon.
add_item()
Rather than using $_POST['content'] to access a property, you should use $this->input->post(‘content’). This utilises Code Igniter’s input class which automatically filters out SQL injections and XSS attacks (line 266 /application/config/config.php)
We then pass the result from that to our new_todo() method in our model and redirect the user back to the index page.
delete_item()
We can use the segment() method in the uri class to grab bits of information from the URL. Because our URI will be /todo/delete_item/id/, by grabbing the 3rd segment we get the id. We can then feed that do our delete_todo_item() method we defined in the model and redirect the user to the main page.
class Todo extends Controller {
function Todo()
{
parent::Controller();
$this->load->helper('url');
$this->load->helper('form');
$this->load->model('todo_model');
}
function index()
{
$this->index_page();
}
function index_page()
{
$info['item'] = $this->todo_model->get_all_todo_items();
$this->load->view('todo_index.php', $info);
}
function add_item()
{
$content = $this->input->post('content');
$this->todo_model->new_todo($content);
redirect('');
}
function delete_item()
{
$this->todo_model->delete_todo_item($this->uri->segment(3));
redirect('');
}
}
Finally we need to write our view.
/system/application/views/todo_index.php
On line 5 you can see the form_open() function being used. This creates our opening form tag. The action attribute is specified by the parameter that we passed. Code Igniter automatically prepends your site URL to this parameter it ends up as action=”http://path_to_site.com/URI_passed”. This is useful because if we move the site to another domain name, the form will continue to post to the correct URL. Between lines 12 and 17 we are iterating through the todo items posted.
<h1>Todo List</h1>
<hr />
<?php echo form_open('todo/add_item'); ?>
<textarea cols="40" rows="10" name="content"></textarea>
<input type="submit" value="Add new item" />
</form>
<ul>
<?php
for($i = 0; $i < sizeof($item); ++$i)
{
echo '<li>' . $item[$i]['content'] . ' - <i>' . $item[$i]['date'] . '</i> - <a href="' . site_url() . '/todo/delete_item/' . $item[$i]['id'] . '">Delete</a></li>';
}
?>
</ul>
<hr />
<p>Created by <a href="http://www.query7.com">Query7</a></p>
Feel free to post any questions or comments you have.


April 19, 2009
Thank you very much. It´s easy now!
I hope there will be many more CodeIgniter Tutorials to follow.
April 30, 2009
nice and short workaround! especially if you already learned some about ci, this is the type of tutorial you want to use your small knowledge practically and get on. thanks!
May 7, 2009
Thanks alot to “dedurus” who spotted an error. I forgot to load the URL helper in the controller. Code has been amended.
July 14, 2009
[...] This post was Twitted by codeignitee [...]