CODEWITHSUNDEEP
html
Alex Basson
Alex Basson

Reputation: 11287

Where can I learn about how to use html5 for client-side database apps?

I would like to begin using the client-side database functionality of html5, but I don't know where to go for a good introduction/tutorial/how-to. I've been coding (x)html for years and years, so I'm not so much interested in a "here's the <head> element" type of introduction; I want to learn about what's new in html5 in general, and client-side db in particular. Any suggestions?

Upvotes: 5

Views: 4557

Answers (2)

Shadi Almosri
Shadi Almosri

Reputation: 11989

Here: http://www.weboshelp.net/webos-tutorials/156-palm-webos-html5-database-storage-tutorial :)

Another useful link:

Upvotes: 0

JayCrossler
JayCrossler

Reputation: 2129

Alex, I wrote up a detailed method of how to do it at: http://wecreategames.com/blog/?p=219 - including source code to download. Here's a few snippets:

function picsInitDatabase() {
    try {
        if (!window.openDatabase) {
            console.log('Databases are not supported in this browser');
        } else {
            var shortName = 'picsGeoDB';
            var version = '1.0';
            var displayName = 'Pictures Geotagged database';
            var maxSize = 5000000; // in bytes
            picsDB = openDatabase(shortName, version, displayName, maxSize);
            console.log("Database is setup: "+picsDB);
        }
    } catch(e) {
        // Error handling code goes here.
        if (e == 2) {
            // Version number mismatch.
            console.log("Invalid database version.");
        } else {
            console.log("Unknown error "+e+".");
        }
        return;
    } 
}

And here's a function to update the table:

function picsUpdateTables(dataID) { 
    picsDB.transaction(
        function (transaction) {
            var p = data[dataID];
            transaction.executeSql("INSERT INTO geopictures (id, secret, server, farm, title, latitude, longitude, accuracy, datetaken, ownername) VALUES (?,?,?,?,?,?,?,?,?,?);",
            [p.id, p.secret, p.server, p.farm, p.title, p.latitude, p.longitude, p.accuracy, p.datetaken, p.ownername] );
            transaction.executeSql("INSERT INTO photodata (picid, encodedtext) VALUES (?, ?)", [p.id, serializeCanvasByID(p.id)] );
        }
    );  
}

See the blog post for examples of how to do SQL SELECTS, and a video showing how to test it on a few browsers.

Upvotes: 3

Related Questions