Working With CodeIgniter’s Controller

Let’s face it, the app we’ve been building isn’t much good without the ability to dynamically add tasks instead of having to pull up a database editor so we can insert them ourselves. Today, we’ll discuss how to create this. But before we do, we have to add a categories drop-down list that pulls its data from the database. That’s extremely easy to do in CodeIgniter.

First, let’s add some tasks. Open up your database editor of PHPMyAdmin (or whatever you use to work with your database).

See All of Scott’s CodeIgniter Stories.

You’ll see on the screen below that I’ve added four tasks. Customize it as you see fit.

Screen Shot 2013-03-11 at 10.46.54 AM

Next, we need to add an item to our data[] array, then we’ll need the method in our model that is called. Add this item to the data array (just a single line below the $data[‘tasks’] item):

$data['dropdown'] = $this->to_do_model->get_categories_dropdown();

Add this method to your “to_do_model”:

Screen Shot 2013-03-11 at 11.04.38 AM

Update your view so it looks like this. The new line is added a third of the way down the image.

Refresh your browser and you should see the drop-down to the right of your text input:

Screen Shot 2013-03-11 at 11.08.06 AM

This brings us to the code where we actually add the tasks to our database. We’re going to bracket our code with a method that checks to see if there is a $_POST variable available. If there is, then the code will be executed. If not, it will be ignored.

Screen Shot 2013-03-11 at 11.34.39 AM

Note that I have created a helper method — _clean_data() — to prevent against SQL injection or cross-site scripting. You can supplement this by setting this value into your config/config.php file to true:

$config['global_xss_filtering'] = TRUE;

Then, of course, we need to create the save_data() method.

Screen Shot 2013-03-11 at 11.37.13 AM

Finally, be sure to add a route to your routes file for create-task (the action on the form).  Set it to home/index_controller/create_task.

There is a problem. It lets users submit the form without any validation. A user could just submit it and then not be prompted that they need to input a task. So let’s address that now.

There are two approaches you can take. You can either handle the validation in your index method, or you can create another method within the controller for your form. I prefer the second approach, which requires some refactoring. The only downside is that it creates an additional path for the form itself. But I think this is a minor consideration.

Here is the refactored controller with the new method.

Screen Shot 2013-03-11 at 11.56.06 AM

And here is the updated view:

Screen Shot 2013-03-11 at 11.56.25 AM

Now you can add as many tasks as you want to be stored in the database.

There’s one last step, which requires us to get into some jQuery. We’ll create a click event for our button, so the task list is updated upon the submission of our form. This isn’t a jQuery column, so what I will do will be very rudimentary, but will get the task done and show you the basics of working asynchronously in CodeIgniter.

To do this, we’re going to add a new method to our controller:

Screen Shot 2013-03-11 at 12.55.33 PM

The new method is get_tasks(). The method pulls all of the tasks from the database and saves them into a variable. That variable is then run through json_encode and echoed so that the jQuery can process it.

To show you how a join works in CI, we’re also going to join our categories and tasks tables. Below is the full model, with the new get_async_tasks() method in it.

Screen Shot 2013-03-11 at 1.02.14 PM

Here’s the jQuery to pull the data when the form is submitted. I’ve placed it at the top of the view.

Screen Shot 2013-03-11 at 1.55.31 PM

Basically, in this asynchronous variation on what we’ve done so far, we post our variables to the server, then a callback is executed where the HTML is built up in a loop and output to the browser. To do this, we use site_url() to call our controller directly. I’ve created a new method called get_async_tasks()“. Here is the full controller:

Screen Shot 2013-03-11 at 1.58.11 PM

We’ll have to update our view to accommodate our new structure. It will look like this:

Screen Shot 2013-03-11 at 2.01.34 PM

Note that I’ve made a number of changes here. I’ve added IDs to the text input (which meant using an array) and the dropdown. The 0 refers to the default item that is selected when the dropdown is displayed. I’ve also added an ID to the submit button. The original output loop is now commented out and the output will be placed in the tasksDiv div.

To finish this out, I added some default styling just to make this more presentable. Here is that CSS, or you can use your own.

Screen Shot 2013-03-11 at 2.04.55 PM

Now if you run the application, you’ll get output similar to this. (Please note: there is a slight delay with asynchronous calls, so be patient):

Screen Shot 2013-03-11 at 2.07.54 PM

There’s more we could do here, like sorting tasks or giving them priorities. But I think we’ll end the CodeIgniter series with this. The API is extremely well-documented, and you should now have no trouble building your first, real CodeIgniter app.

Next time, we’ll start a new series, this one will be on building Facebook apps. See you then.

5 Responses to “Working With CodeIgniter’s Controller”

  1. arr myeyes

    this is a great series, i’ve linked to it, and i’m sure the code samples look awesome on yr monitor. and i am guessing that you wanted to show the color coded version of the code which is why you used images. but unless you have just the right conditions – its difficult to read. suggest that for future tutorials you use text for the code samples. i think there is even some js that will do some basic code formatting as well….

  2. codenerd

    I am walking through your tutorial and I am having one problem that I cannot seem to solve. when I try to add a new task it says create-task cant be found. I added a second route to routes.php

    $route[‘create-task’] = “home/index_controller/create_task”;

    is this correct? Also where did you put your jQuery script? it says at the top of the view but on index_view it starts at about line 22 so what is above this? Thank you.