Smashing Mobile Web Development

Elements to Build

In the preceding chapter, you defined the database structure, which is broken into four tables: color, activity, winery, and wines. The first thing you do is run the scripts to create your database so you can start adding elements, such as adding activities and wines.

Creating the database and its tables

To follow along, you need to run some code to create the database for Corks. Follow these steps to create your main database.

1. Open your text editor of choice and start editing in the index.html file.

2. At the bottom of the </body> tag, add the following snippet of code:

<script type=”text/javascript” language=”Javascript”>

var db;

$(document).ready(function(){

});

</script>

This snippet enables you to fire some JavaScript code when the document is fully loaded. The db variable is to keep track of your database transactions.

3. Add the code to create the database for Corks with the following snippet:

var db;

$(document).ready(function(){

db = openDatabase(‘myCorks’, ‘1.0’, ‘My Corks Database’, 2 * 1024 * 1024);

});

Now the database will be created under the name myCorks. If you save your index file and open your Web Inspector, you should see a page similar to that shown in Figure 7-1.

Figure 7-1: Web Inspector open to Databases

Now you start building the tables. Follow these steps:

1. Open the transaction method of the db variable and use the