Simple ToDo app – jQuery Mobile / WebSQL Part 2

Before you get started
You can download/clone the project here or view a live demo

  • Download: You can download all of the code used in this tutorial here.
  • Clone: If you use git you can clone from: git@github.com:jamesjacobs/jqm-websql-todo.git
  • Demo: You can see a working finished version here (your browser will need to support WebSQL).

Building the storage object

So lets begin by thinking about the Javascript thats going to power the app. We’ll start by creating our web-sql-storage.js file. Then we’ll add the initialize database method, which is going to open/create the database, add some sample data and include a success and error callback.

Then we’re ready for our createTable and addSampleData methods

Ok, so we’ve created the methods that will create/open our database and add some sample data – of course you can’t test this yet as the methods in this file will be called from our main app.js file we have yet to create. Stay with me though, abstracting the storage functionality like this makes things much easier further down the line. Lets continue and add the methods we’ll use to list all outstanding todos and get individual todos.

Next lets add some basic CRUD operations.

Also we need methods for marking a record as completed or pending, lets add those in now.

Finally we need to add a line to kick start things when a new WebSqlDB object is instantiated.

Great, so our whole web-sql-storage.js file should now look like the following.

In my next post we’ll create the main app object thats going to power our app, bind our events and handle any DOM manipulation.