[edson1314]

Okay, so this is where the actual tutorial starts. In this we will create a simple Web App to add and remove data from a simple, local database. Lets get started!

YAYMusic, this is the fictional (but awesome) app we will be creating. We will create a simple song addition (Not actual MP3, but just names etc.) and rating system. Nothing mildly complex.

What we need:

* Check compatibility
* To create the database and tables
* To load songs and rating already added (if any) on load.
* Form to add songs to database
* Rating functionality on each song


We need to firstly check compatibility. Only a few browsers, as listed above are currently supporting local databases which meaning's we'd like to tell the user why there is no content coming up or why errors are popping up, basically wtf is going on. So, Although it is messy, I find it handy to manage if you completely wrap your code in and [if/else] statement.

PHP Code:

if(!window.openDatabase){

        setAnError("Woops, your browser doesn't support Database. Please update/change your browser");

        } else {

        //Run main you code

        } 

What it's really saying: IF it's not possible to open database => Display error ELSE it is possible to open database => Run code.


Now that we know that the user supports Local Databases, we are set for creating one. For this we'll need to decide on it's name, version, long name and maximum size. This is done with the openDatabase function. It does exactly what it says on the tin, it opens or creates a database.

PHP Code:

function createDatabase() {

        var shortName = 'yaymusic';

        var version = '1.0';

        var displayName = 'YAYMusic Database';

        var maxSize = 100000; //The variables to open the database

        return yaymusic = openDatabase(shortName, version, displayName, maxSize); //This will return the database

        }

} 

var db = createDatabase(); //Create the DB and set it to a global variable for easy access



var yaymusic = openDatabase(shortName, version, displayName, maxSize);

This is where the database is created, as you can see in the above code, each of its parameters (shortName, version etc.) are defined above it. To check if you have created your database, you can open your inspector window and check the storage tab, we should see our 'yaymusic' database as clear as daylight.


So once you have your database created, we need to populate it with some tables! So what would we need for storing a song?

* id - Primary key
* name - text
* artist - text
* album - text
* genre - text
* rating - Integer

Lets create our query,

PHP Code:

CREATE TABLE songlist(

        id INTEGER PRIMARY KEY,

        name TEXT,

        artist TEXT,

        album TEXT,

        genre TEXT,

        rating INTEGER

); 

Now that we have our query constructed, we should put it to the database.

STILL IN PROGRESS, IN THE MEANTIME
(Of course this tutorial is subject to mistakes and mishaps (my own stupidity), please correct me on anything incorrect.)