In my last installment, we set up a framework so we could begin building the app we'll dig into today. Before we go any further, however, we need to do two more things. See All of Scott’s CodeIgniter Stories. First, our app has no styling. Here's some basic CSS so we have something that's at least a little more attractive: This isn't a CSS tutorial, so I won't go over the code in depth. It's fairly straightforward, anyway. All I've done is add some basic styling, so we'll have to inject a little more when we get to working with AJAX, so we'll put it aside for now. If you add this CSS to the "styles.css" file you created in the "css" folder and save/upload the file, you should see something like this: Next, we have to turn our attention to the table structure in our database. There are two ways to approach this. First, you can use a point-and-click database editor to add the tables and their columns. Alternatively, you can use the raw SQL in your database environment. There are many point-and-click database editors out there to choose from. I use a Mac and prefer Sequel Pro, which has finally become a 1.x release after being a stable 0.9 version that's been usable for production for years. But there's also Querious as well as tools from Oracle, like MySQL Workbench. Rather than step you through a point-and-click process, here's the raw SQL: CREATE TABLE `tasks` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `task` varchar(100) DEFAULT NULL, `category_id` int(11) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE `categories` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `category` varchar(100) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Ready to Code?

Now you (finally) have everything you need to get started, so let's start coding. We're going to need a model, so create a model called "to_do_model.php" in your models folder.  We're going to add one method: Now we need to call the "get_tasks()" method in our controller: Add a couple of tests into your tasks table. If you add "print_r($tasks)" after the form in the view, you should see a display like this: Now the database is wired up to the view. We can format the output like this:

The Results so Far

Now, let's take a look at what we have. I've added a div to populate, which we'll style later. Within the div, I also added an unordered list. The first thing that happens is the browser determines whether there are any tasks in the $tasks variable. If there aren't, the "else" clause will render. Otherwise, the main clause will run. At that point, the browser will loop through the $tasks variable, rendering a <li> tag for each task. Now we have a working app that displays tasks. However, it only displays what is manually added to the database. In my next post, we'll work on the controller so that we can add tasks through the browser interface. Then we'll look at adding AJAX functionality so the tasks div refreshes whenever a new task is added.