techforum-repo/websqlapi.html

## websqlapi.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Browser Storage Demos - Web SQL API </title>

		<script type = "text/javascript">

			//Check for browser support
			if (window.openDatabase) {

				var db;

				function createDBAndTable()
				{
					//Open database, create if not exists - db name, version, description and required storage
					db = window.openDatabase('test_db', '1.0', 'Test DB', 1024*1024)
					//transaction
					db.transaction(function (tx) {
						//Delete the existing table
						tx.executeSql('DROP TABLE IF EXISTS CUSTOMERS');
						//Create the new table with required fields, define the primary key
						tx.executeSql('CREATE TABLE IF NOT EXISTS CUSTOMERS(SSN TEXT PRIMARY KEY , NAME TEXT,AGE INTEGER ,EMAIL TEXT)', [], function(tx, result) {
							console.log(result);
							console.log('Table created Successfully!');

						}, errorHandler);
					});
				}

				function insertData()
				{
					db.transaction(function (tx) {
						 //Insert data to the table, dynamic variables can be used
						 tx.executeSql('INSERT INTO CUSTOMERS(SSN, NAME,AGE,EMAIL) VALUES (?,?,?,?)',["444-44-4444","Bill",35,"bill@company.com"], function(tx,result) {
							console.log("Record Inserted Successfully "+result.insertId );
						},errorHandler);

						 tx.executeSql('INSERT INTO CUSTOMERS(SSN, NAME,AGE,EMAIL) VALUES (?,?,?,?)',["555-55-5555","Test1",32,"test1@company.com"], function(tx,result) {

							console.log("Record Inserted Successfully "+result.insertId);

						},errorHandler);
					});

				}

				function readDataFromDB()
				{

					db.readTransaction(function (tx) {
					//Read data from table and iterate through rows object
					tx.executeSql('SELECT * FROM CUSTOMERS', [], function (tx, results) {
						var len = results.rows.length, i;
						document.getElementById("data").innerHTML="";
						for (i = 0; i < len; i++) {
						 document.getElementById("data").innerHTML+=" SSN: " +results.rows.item(i).SSN+ " Name: "+results.rows.item(i).NAME+" Age: "+results.rows.item(i).AGE+"<br />";
						}

						},errorHandler);
					});

				}

				function updateData()
				{
					db.transaction(function (tx) {
						 //Update existing data
						 tx.executeSql('UPDATE CUSTOMERS SET AGE=? WHERE SSN=?',[45,"444-44-4444"], function(tx,result) {
							console.log("Record Updated Successfully" +result);
						},errorHandler);

					});

				}

				function deleteData()
				{
					db.transaction(function (tx) {
						 //Delete data through primary key
						 tx.executeSql('DELETE FROM CUSTOMERS WHERE SSN=?',["444-44-4444"], function(tx,result) {
							console.log("Record Deleted Successfully" +result);
						},errorHandler);

					});

				}

				function errorHandler(transaction, error) {
					console.log('Oops. Error was '+error.message+' (Code '+error.code+')');
					return false;
				}


			} else {
				console.log("No Web SQL API support..");
			}
		</script>
	</head>
	<body>
		Welcome to Browser Storage Demos - Web SQL API	<br/>

		<p id="data"></p>
                <button onclick = "createDBAndTable()">Create DB/Table</button>
                <button onclick = "insertData()">Insert data </button>
                <button onclick = "readDataFromDB()">Read data </button>
		<button onclick = "updateData()">Update data </button>
		<button onclick = "deleteData()">Delete data </button>
	</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<title>Browser Storage Demos - Web SQL API </title>

	<script type = "text/javascript">

	//Check for browser support
	if (window.openDatabase) {

	var db;

	function createDBAndTable()
	{
	//Open database, create if not exists - db name, version, description and required storage
	db = window.openDatabase('test_db', '1.0', 'Test DB', 1024*1024)
	//transaction
	db.transaction(function (tx) {
	//Delete the existing table
	tx.executeSql('DROP TABLE IF EXISTS CUSTOMERS');
	//Create the new table with required fields, define the primary key
	tx.executeSql('CREATE TABLE IF NOT EXISTS CUSTOMERS(SSN TEXT PRIMARY KEY , NAME TEXT,AGE INTEGER ,EMAIL TEXT)', [], function(tx, result) {
	console.log(result);
	console.log('Table created Successfully!');

	}, errorHandler);
	});
	}

	function insertData()
	{
	db.transaction(function (tx) {
	//Insert data to the table, dynamic variables can be used
	tx.executeSql('INSERT INTO CUSTOMERS(SSN, NAME,AGE,EMAIL) VALUES (?,?,?,?)',["444-44-4444","Bill",35,"bill@company.com"], function(tx,result) {
	console.log("Record Inserted Successfully "+result.insertId );
	},errorHandler);

	tx.executeSql('INSERT INTO CUSTOMERS(SSN, NAME,AGE,EMAIL) VALUES (?,?,?,?)',["555-55-5555","Test1",32,"test1@company.com"], function(tx,result) {

	console.log("Record Inserted Successfully "+result.insertId);

	},errorHandler);
	});

	}

	function readDataFromDB()
	{

	db.readTransaction(function (tx) {
	//Read data from table and iterate through rows object
	tx.executeSql('SELECT * FROM CUSTOMERS', [], function (tx, results) {
	var len = results.rows.length, i;
	document.getElementById("data").innerHTML="";
	for (i = 0; i < len; i++) {
	document.getElementById("data").innerHTML+=" SSN: " +results.rows.item(i).SSN+ " Name: "+results.rows.item(i).NAME+" Age: "+results.rows.item(i).AGE+"<br />";
	}

	},errorHandler);
	});

	}

	function updateData()
	{
	db.transaction(function (tx) {
	//Update existing data
	tx.executeSql('UPDATE CUSTOMERS SET AGE=? WHERE SSN=?',[45,"444-44-4444"], function(tx,result) {
	console.log("Record Updated Successfully" +result);
	},errorHandler);

	});

	}

	function deleteData()
	{
	db.transaction(function (tx) {
	//Delete data through primary key
	tx.executeSql('DELETE FROM CUSTOMERS WHERE SSN=?',["444-44-4444"], function(tx,result) {
	console.log("Record Deleted Successfully" +result);
	},errorHandler);

	});

	}

	function errorHandler(transaction, error) {
	console.log('Oops. Error was '+error.message+' (Code '+error.code+')');
	return false;
	}


	} else {
	console.log("No Web SQL API support..");
	}
	</script>
	</head>
	<body>
	Welcome to Browser Storage Demos - Web SQL API <br/>

	<p id="data"></p>
	<button onclick = "createDBAndTable()">Create DB/Table</button>
	<button onclick = "insertData()">Insert data </button>
	<button onclick = "readDataFromDB()">Read data </button>
	<button onclick = "updateData()">Update data </button>
	<button onclick = "deleteData()">Delete data </button>
	</body>
	</html>