To Do List App

2 minute read

Be advised This post is quite old (03 Apr 2013) and any code may be out of date. Proceed with caution.

Update Feb 2017 I’ve happily used this TODO app for the past ~4 years, but I’m taking it down with the rest of my old PHP hosting. In conjunction, I’ve removed the demo-related content from this post. For anyone interested, I’m now using Wunderlist

Short post, as this isn't really a tutorial. I was recently checking out ToDoMVC to look at some JavaScript frameworks, and I really liked the To Do list app...

todosmvc

I've been looking for something similar for awhile. Looked at Evernote and other apps, but nothing was as simple and lightweight as this app. Only problem was that the items stored in the app didn't persist, as there was not database/storage behind the app. So I went ahead and wrote my own.

GitHub Repo

In my haste to modify the to do list app to save values, I skipped the part where I should have learned one of the new JavaScript frameworks highlighted on ToDoMVC. I actually used the template provided in the ToDoMVC package and used the asynchronous database call setup I outlined in a related post.

The bad news - this isn't a secure application, SQL injection attacks will succeed here. Also, some of the icons don't seem to work outside of Chrome.

The good news - this application supports multiple clients via the use of a "poor man's pull." Basically, if User A and User B are writing to dos in the app on two separate computers, they will see each other's notes in near real time. This is possible by using JavaScript to call the DB query every X number of milliseconds. Here's a code snippet if you're having a hard time understanding:

<script>
setInterval( function(){ queryDB() }, 5000);   //Call the queryDB() function every 5 seconds
</script>

<script type="text/javascript">        
function queryDB()
{
  $.ajax({
    type: "POST",
    url: "dbEngine.php",
    data: "keyword=read",
    success: function(server_response)
    {
      $('#todo-list').html(server_response).show();
    }
  })
}
</script>

The app also works on mobile phones, which is great.

If you want to set up your own instance of this app, you can download the code from GitHub. Obviously you'll need your own hosting and a MySQL database, but the rest should be pretty easy to figure out.

This isn't a fully finished product by any means, but I wanted to put it out there in case there's someone like me who needs a simple to-do list app.

Leave a Comment