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. 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":

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:

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.

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.

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.

And here is the updated view:

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:

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.

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

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:

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

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.

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

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.