How to Build a To-Do App with CodeIgniter

Now that I’ve introduced you to the framework, it’s time to get started on our project.  We’re going to be creating a to-do app, step-by step, over the course of the next few tutorials.

Getting Started with CodeIgniterToday, we’re going to do the initial configuration and I’m going to introduce you to a helper, specifically the form helper. This is something you’ll always want to include in your autoload file because it is going to be called all the time. What good is a website without forms, right?

See All of Scott’s CodeIgniter Stories.

So go ahead and download CodeIgniter and unzip it into your PHP development environment. Add the form and URL helpers to your helper autoload array (in “config/autoload.php”) like this:

$autoload['helper'] = array('url', 'form');

Create a “home” folder in both your “controllers” folder and your “views” folder.  Set the default controller to “home/index_controller” and create a controller called “index_controller” in your “controllers/home” folder to match that route. Create two other folders in “views”: “templates” and “includes.”

In “templates”, create a file called “standard.php” and place the following code in it:

CodeIgniter To-Do Standard

Then place this code in your “index_controller” file:

CodeIgniter To-Do Code

In your “includes” folder, create files called “header.php” and “footer.php” and open them.  In “footer.php” all you need are a </body> tag and a </html> tag. In “header.php”, put the following code:

CodeIgniter Header Code

We’re going to need to create a couple of other folders at the root of the application: “css” and “js.” Create those folders so you have this structure:

CodeIgniter CSS JS

As this indicates, we’re going to need two other files. The first, we’ll create: “styles.css”.  The second one, we’ll download. Go to jquery.com and download the latest version of jQuery (yours may differ from the one pictured) into your “js” folder.

Finally, create a file called “index_view.php” and put it into the “views/home” folder.  Add this code, which introduces our form helper:

CodeIgniter To-Do Index

The “form_open” tag illustrated above is the equivalent of:

<form action="http://localhost/todo/create-task" method="post" accept-charset="utf-8">

This assumes your app is in a folder called “todo” in your local environment. As you can see, there’s far less typing involved. Be sure to “echo” the call into your HTML. The “form_close()” call will echo the “</form>” tag into your HTML.

The other three calls will give you a label, a text input and a submit button respectively.  Note that each is echoed, like all form elements in CodeIgniter. (The full documentation on the form helper can be found here.)  While there are too many different calls to list here, suffice it to say I rarely need to use the raw HTML elements themselves. In the next tutorial, we’ll add a drop-down to this HTML, but we’ll do it dynamically.

But first, we’ll need a database. In your local environment, create a database called “todo”.  (I’ll post the raw SQL you’ll need to create this app next time.  You can upload that to your MySQL installation and be good to go. Enter your database credentials into “config/database.php” in the array below:

CodeIgniter Database Settings

At this point, refresh the page and, assuming you’ve entered your database credentials correctly, you should see the form on the page, like this:

CodeIgniter My To-Do Screen

In the next tutorial, we’ll add the dropdown and style it with Twitter Bootstrap.  We’ll also add our SQL to the database so we can begin writing our controllers and models.  In a future tutorial, I’ll also show you how to add some AJAX functionality, so the page doesn’t refresh when the form submits, but the task is added to a task list below the text input.

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>