HTML 5 provides us with a relational database running on the web browser. This relational database supports SQLite sql syntax.
The following code sample checks whether the web browser supports the HTML 5 relational database.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
if(window.openDatabase)
{
document.write("support");
}
else
{
document.write("does not support");
}
</script>
</body>
</html>
The following video clip shows the execution of this code sample and explains it.
The following code sample opens a database and provide us with an object we can use in order to work with it. It can be a new database or a database that already exists. If the database already exists and the version number we pass over to the openDatabase function is not accurate an exception will be thrown.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
try
{
var db = window.openDatabase(
'webstore',
'1.0',
'database for web store',
100000);
document.write("db version " +db.version+ " is ready to use!");
}
catch(ex)
{
document.write("ex="+ex);
}
</script>
</head>
<body>
</body>
</html>
The following video clip shows the execution of this code sample and explains it. The way we handle the exception could include a popup message to the user.
Checking the database version allows us adding code for upgrading the database (if needed). We can handle in our code each one of the possible scenarios (upgrading from 1.0 to 1.1, upgrading from 0.9 to 1.1, upgrading from 0.6 to 1.1 etc.).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
try
{
var db = window.openDatabase(
'webstore',
"",
'database for web store',
100000);
document.write("<br>db version " +db.version);
db.changeVersion("1.0","1.1");
}
catch(ex)
{
document.write("ex="+ex);
}
</script>
</head>
<body>
</body>
</html>
The following video clip shows the execution of this code sample and explains it.
Once we get an object that represents the relational database we can call the transaction method on it in order to perform sql commands.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
try
{
var db = window.openDatabase(
'naewwebstore',
"1.0",
'database for web store',
100000);
db.transaction(function(ob)
{
ob.executeSql("CREATE TABLE IF NOT EXISTS products (pid INTEGER, pname TEXT)");
ob.executeSql("INSERT INTO products VALUES(101,'tabolax')");
ob.executeSql("INSERT INTO products VALUES(102,'golgo')");
ob.executeSql("INSERT INTO products VALUES(103,'charmon')");
ob.executeSql("SELECT * FROM products",[],dataHandler,errorHandler);
}
);
}
catch(ex)
{
document.write("ex="+ex);
}
function errorHandler(error)
{
document.write("handling error "+error);
}
function dataHandler(transaction,data)
{
document.write("<table>");
document.write("<tr><th>id</th><th>name</th></tr>")
size = data.rows.length;
for(i=0;i<size;i++)
{
row = data.rows.item(i);
document.write("<tr><td>"+row['pid']+"</td><td>"+row['pname']+"</td></tr>");
}
document.write("</table>");
}
</script>
</head>
<body>
</body>
</html>
The following video clip shows the execution of this code sample and explains it.
